@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/formatter/__tests__/Si.test.ts

@@ -3,7 +3,7 @@ import Si from '@shell/components/formatter/Si.vue';
 
 describe('component: Si formatter', () => {
   it('should format integers as Bytes', async() => {
-    const wrapper = await mount(Si, { propsData: { value: 13 } });
+    const wrapper = await mount(Si, { props: { value: 13 } });
 
     const element = wrapper.find('span');
 
@@ -15,7 +15,7 @@ describe('component: Si formatter', () => {
     ['1024', '1 KiB'],
     ['2048 GiB', '2 TiB']
   ])('should parse and re-format Si input strings', async(input, out) => {
-    const wrapper = await mount(Si, { propsData: { value: input, needParseSi: true } });
+    const wrapper = await mount(Si, { props: { value: input, needParseSi: true } });
 
     const element = wrapper.find('span');
 
@@ -24,7 +24,7 @@ describe('component: Si formatter', () => {
 
   it('should allow additional si formatting opts', async() => {
     const wrapper = await mount(Si, {
-      propsData: {
+      props: {
         value: '1 TiB', needParseSi: true, opts: { maxExponent: 3 }
       }
     });

package/components/formatter/__tests__/WorkloadDetailEndpoints.test.ts

@@ -56,8 +56,8 @@ describe('component: WorkloadDetailEndpoints', () => {
     [withoutAddresses, basicNodesOutput, ['https://some-external-ip:443']],
   ])('should display a link given the appropriate conditions', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
     const wrapper = mount(WorkloadDetailEndpoints, {
-      propsData: { value: JSON.stringify(value) },
-      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput } } }
+      props:  { value: JSON.stringify(value) },
+      global: { mocks: { $store: { getters: { 'cluster/all': () => nodesOutput } } } }
     });
 
     wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {
@@ -66,11 +66,11 @@ describe('component: WorkloadDetailEndpoints', () => {
   });
 
   it.each([
-    [withoutAddresses, [], ['[some-translation]:443']],
+    [withoutAddresses, [], ['[%servicesPage.anyNode%]:443']],
   ])('should render a Tag component with the appropriate content', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
     const wrapper = mount(WorkloadDetailEndpoints, {
-      propsData: { value: JSON.stringify(value) },
-      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput, 'i18n/t': () => 'some-translation' } } }
+      props:  { value: JSON.stringify(value) },
+      global: { mocks: { $store: { getters: { 'cluster/all': () => nodesOutput } } } }
     });
 
     wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {

package/components/graph/LinePlot.vue

@@ -139,13 +139,12 @@ export default {
       :class="`lines--${i}`"
     >
       <path
-        :key="i"
         :d="lines[i]"
         class="line"
       />
       <circle
         v-for="(point, index) in set.points"
-        :key="`${index}--circle`"
+        :key="index"
         class="data-circle"
         r="4"
         :cx="scaleX([0, 10], index)"

package/components/nav/Group.vue

@@ -5,6 +5,8 @@ export default {
 
   components: { Type },
 
+  emits: ['expand', 'close'],
+
   props: {
     depth: {
       type:    Number,
@@ -73,7 +75,7 @@ export default {
         if (overviewRoute && grp.overview) {
           const route = this.$router.resolve(overviewRoute || {});
 
-          return this.$route.fullPath.split('#')[0] === route?.route?.fullPath;
+          return this.$route.fullPath.split('#')[0] === route?.fullPath;
         }
       }
 
@@ -165,7 +167,7 @@ export default {
           const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
           const withoutQuery = withoutHash.split('?')[0];
 
-          if (matchesNavLevel || this.$router.resolve(item.route).route.fullPath === withoutQuery) {
+          if (matchesNavLevel || this.$router.resolve(item.route).fullPath === withoutQuery) {
             return true;
           }
         }
@@ -236,7 +238,10 @@ export default {
       class="list-unstyled body"
       v-bind="$attrs"
     >
-      <template v-for="(child, idx) in group[childrenKey]">
+      <template
+        v-for="(child, idx) in group[childrenKey]"
+        :key="idx"
+      >
         <li
           v-if="child.divider"
           :key="idx"
@@ -392,8 +397,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.router-link-active,
-  .header ::v-deep > .child.router-link-exact-active {
+  .body :deep() > .child.router-link-active,
+  .header :deep() > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {
@@ -407,7 +412,7 @@ export default {
     }
   }
 
-  .body ::v-deep > .child {
+  .body :deep() > .child {
     A {
       border-left: solid 5px transparent;
       line-height: 16px;

package/components/nav/Header.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import debounce from 'lodash/debounce';
-import { NORMAN, STEVE } from '@shell/config/types';
+import { NORMAN, STEVE, MANAGEMENT } from '@shell/config/types';
 import { ucFirst } from '@shell/utils/string';
 import { isAlternate, isMac } from '@shell/utils/platform';
 import Import from '@shell/components/Import';
@@ -20,6 +20,7 @@ import { ActionLocation, ExtensionPoint } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
+import { authProvidersInfo, parseAuthProvidersInfo } from '@shell/utils/auth';
 
 export default {
 
@@ -43,13 +44,21 @@ export default {
     }
   },
 
+  fetch() {
+    // fetch needed data to check if any auth provider is enabled
+    authProvidersInfo(this.$store);
+  },
+
   data() {
     const searchShortcut = isMac ? '(\u2318-K)' : '(Ctrl+K)';
     const shellShortcut = '(Ctrl+`)';
 
     return {
+      authInfo:               {},
       show:                   false,
       showTooltip:            false,
+      isPopoverOpen:          false,
+      isPageActionMenuOpen:   false,
       kubeConfigCopying:      false,
       searchShortcut,
       shellShortcut,
@@ -66,6 +75,26 @@ export default {
     ...mapGetters(['clusterReady', 'isExplorer', 'isRancher', 'currentCluster',
       'currentProduct', 'rootProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
 
+    authProviderEnabled() {
+      const authProviders = this.$store.getters['management/all'](MANAGEMENT.AUTH_CONFIG);
+      const authInfo = parseAuthProvidersInfo(authProviders);
+
+      return authInfo.enabled?.[0] || {};
+    },
+
+    shouldShowSloLogoutModal() {
+      if (this.isAuthLocalProvider) {
+        // If the user logged in as a local user... they cannot log out as if they were an auth config user
+        return false;
+      }
+
+      const {
+        logoutAllSupported, logoutAllEnabled, logoutAllForced, configType
+      } = this.authProviderEnabled;
+
+      return configType === 'saml' && logoutAllSupported && logoutAllEnabled && !logoutAllForced;
+    },
+
     appName() {
       return getProduct();
     },
@@ -133,7 +162,7 @@ export default {
       // Don't show if the header is in 'simple' mode
       const notSimple = !this.simple;
       // One of these must be enabled, otherwise t here's no component to show
-      const validFilterSettings = this.currentProduct.showNamespaceFilter || this.currentProduct.showWorkspaceSwitcher;
+      const validFilterSettings = this.currentProduct?.showNamespaceFilter || this.currentProduct?.showWorkspaceSwitcher;
 
       return validClusterOrProduct && notSimple && validFilterSettings;
     },
@@ -205,11 +234,18 @@ export default {
     this.$nextTick(() => this.layoutHeader(null, true));
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.debouncedLayoutHeader);
   },
 
   methods: {
+    showSloModal() {
+      this.$store.dispatch('management/promptModal', {
+        component:      'SloDialog',
+        componentProps: { authProvider: this.authProviderEnabled },
+        modalWidth:     '500px'
+      });
+    },
     // Sizes the product area of the header such that it shrinks to ensure the whole header bar can be shown
     // where possible - we use a minimum width of 32px which is enough to just show the product icon
     layoutHeader() {
@@ -239,13 +275,7 @@ export default {
       }
     },
     showMenu(show) {
-      if (this.$refs.popover) {
-        if (show) {
-          this.$refs.popover.show();
-        } else {
-          this.$refs.popover.hide();
-        }
-      }
+      this.isPopoverOpen = show;
     },
 
     openImport() {
@@ -265,13 +295,7 @@ export default {
     },
 
     showPageActionsMenu(show) {
-      if (this.$refs.pageActions) {
-        if (show) {
-          this.$refs.pageActions.show();
-        } else {
-          this.$refs.pageActions.hide();
-        }
-      }
+      this.isPageActionMenuOpen = show;
     },
 
     pageAction(action) {
@@ -598,43 +622,40 @@ export default {
           @click="showPageActionsMenu(true)"
           @focus.capture="showPageActionsMenu(true)"
         />
-        <v-popover
-          ref="pageActions"
-          placement="bottom-end"
-          offset="0"
-          trigger="manual"
-          :delay="{show: 0, hide: 0}"
-          :popper-options="{modifiers: { flip: { enabled: false } } }"
-          :container="false"
+        <v-dropdown
+          :triggers="[]"
+          :shown="isPageActionMenuOpen"
+          :autoHide="false"
         >
-          <template
-            slot="popover"
-            class="user-menu"
-          >
-            <ul
-              data-testid="page-actions-dropdown"
-              class="list-unstyled dropdown"
-              @click.stop="showPageActionsMenu(false)"
+          <template #popper>
+            <div
+              class="user-menu"
             >
-              <li
-                v-for="a in pageActions"
-                :key="a.label"
-                class="user-menu-item"
+              <ul
+                data-testid="page-actions-dropdown"
+                class="list-unstyled dropdown"
+                @click.stop="showPageActionsMenu(false)"
               >
-                <a
-                  v-if="!a.separator"
-                  @click="pageAction(a)"
-                >{{ a.labelKey ? t(a.labelKey) : a.label }}</a>
-                <div
-                  v-else
-                  class="menu-separator"
+                <li
+                  v-for="(a, i) in pageActions"
+                  :key="i"
+                  class="user-menu-item"
                 >
-                  <div class="menu-separator-line" />
-                </div>
-              </li>
-            </ul>
+                  <a
+                    v-if="!a.separator"
+                    @click="pageAction(a)"
+                  >{{ a.labelKey ? t(a.labelKey) : a.label }}</a>
+                  <div
+                    v-else
+                    class="menu-separator"
+                  >
+                    <div class="menu-separator-line" />
+                  </div>
+                </li>
+              </ul>
+            </div>
           </template>
-        </v-popover>
+        </v-dropdown>
       </div>
 
       <div class="header-spacer" />
@@ -643,18 +664,13 @@ export default {
         class="user user-menu"
         data-testid="nav_header_showUserMenu"
         tabindex="0"
-        @blur="showMenu(false)"
         @click="showMenu(true)"
         @focus.capture="showMenu(true)"
       >
-        <v-popover
-          ref="popover"
-          placement="bottom-end"
-          offset="-10"
-          trigger="manual"
-          :delay="{show: 0, hide: 0}"
-          :popper-options="{modifiers: { flip: { enabled: false } } }"
-          :container="false"
+        <v-dropdown
+          :triggers="[]"
+          :shown="isPopoverOpen"
+          :autoHide="false"
         >
           <div class="user-image text-right hand">
             <img
@@ -669,76 +685,87 @@ export default {
               class="icon icon-user icon-3x avatar"
             />
           </div>
-          <template
-            slot="popover"
-            class="user-menu"
-          >
-            <ul
-              class="list-unstyled dropdown"
-              data-testid="user-menu-dropdown"
-              @click.stop="showMenu(false)"
+          <template #popper>
+            <div
+              class="user-menu"
             >
-              <li
-                v-if="authEnabled"
-                class="user-info"
-              >
-                <div class="user-name">
-                  <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
-                </div>
-                <div class="text-small pt-5 pb-5">
-                  <template v-if="principal.loginName !== principal.name">
-                    {{ principal.name }}
-                  </template>
-                </div>
-              </li>
-              <router-link
-                v-if="showPreferencesLink"
-                v-slot="{ href, navigate }"
-                custom
-                :to="{name: 'prefs'}"
+              <ul
+                class="list-unstyled dropdown"
+                data-testid="user-menu-dropdown"
+                @click.stop="showMenu(false)"
               >
                 <li
-                  class="user-menu-item"
-                  @click="navigate"
-                  @keypress.enter="navigate"
+                  v-if="authEnabled"
+                  class="user-info"
                 >
-                  <a :href="href">{{ t('nav.userMenu.preferences') }}</a>
+                  <div class="user-name">
+                    <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
+                  </div>
+                  <div class="text-small pt-5 pb-5">
+                    <template v-if="principal.loginName !== principal.name">
+                      {{ principal.name }}
+                    </template>
+                  </div>
                 </li>
-              </router-link>
-              <router-link
-                v-if="showAccountAndApiKeyLink"
-                v-slot="{ href, navigate }"
-                custom
-                :to="{name: 'account'}"
-              >
-                <li
-                  class="user-menu-item"
-                  @click="navigate"
-                  @keypress.enter="navigate"
+                <router-link
+                  v-if="showPreferencesLink"
+                  v-slot="{ href, navigate }"
+                  custom
+                  :to="{name: 'prefs'}"
                 >
-                  <a :href="href">{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
-                </li>
-              </router-link>
-              <router-link
-                v-if="authEnabled"
-                v-slot="{ href, navigate }"
-                custom
-                :to="generateLogoutRoute"
-              >
+                  <li
+                    class="user-menu-item"
+                    @click="navigate"
+                    @keypress.enter="navigate"
+                  >
+                    <a :href="href">{{ t('nav.userMenu.preferences') }}</a>
+                  </li>
+                </router-link>
+                <router-link
+                  v-if="showAccountAndApiKeyLink"
+                  v-slot="{ href, navigate }"
+                  custom
+                  :to="{name: 'account'}"
+                >
+                  <li
+                    class="user-menu-item"
+                    @click="navigate"
+                    @keypress.enter="navigate"
+                  >
+                    <a :href="href">{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
+                  </li>
+                </router-link>
+                <!-- SLO modal -->
                 <li
-                  class="user-menu-item"
-                  @click="navigate"
-                  @keypress.enter="navigate"
+                  v-if="authEnabled && shouldShowSloLogoutModal"
+                  class="user-menu-item no-link"
+                  @click="showSloModal"
+                  @keypress.enter="showSloModal"
                 >
-                  <a
-                    :href="href"
-                    @blur="showMenu(false)"
-                  >{{ t('nav.userMenu.logOut') }}</a>
+                  <span>{{ t('nav.userMenu.logOut') }}</span>
                 </li>
-              </router-link>
-            </ul>
+                <!-- logout -->
+                <router-link
+                  v-else-if="authEnabled"
+                  v-slot="{ href, navigate }"
+                  custom
+                  :to="generateLogoutRoute"
+                >
+                  <li
+                    class="user-menu-item"
+                    @click="navigate"
+                    @keypress.enter="navigate"
+                  >
+                    <a
+                      :href="href"
+                      @blur="showMenu(false)"
+                    >{{ t('nav.userMenu.logOut') }}</a>
+                  </li>
+                </router-link>
+              </ul>
+            </div>
           </template>
-        </v-popover>
+        </v-dropdown>
       </div>
     </div>
   </header>
@@ -778,8 +805,8 @@ export default {
     }
 
     .filter {
-      ::v-deep .labeled-select,
-      ::v-deep .unlabeled-select {
+      :deep() .labeled-select,
+      :deep() .unlabeled-select {
         .vs__search::placeholder {
           color: var(--body-text) !important;
         }
@@ -941,7 +968,7 @@ export default {
         width: 40px;
       }
 
-      ::v-deep > div > .btn.role-tertiary {
+      :deep() > div > .btn.role-tertiary {
         border: 1px solid var(--header-btn-bg);
         border: none;
         background: var(--header-btn-bg);
@@ -996,7 +1023,7 @@ export default {
 
         .v-popover {
           display: flex;
-          ::v-deep .trigger{
+          :deep() .trigger{
           .user-image {
               display: flex;
             }
@@ -1010,7 +1037,7 @@ export default {
 
         &:focus {
           .v-popover {
-            ::v-deep .trigger {
+            :deep() .trigger {
               line-height: 0;
               .user-image {
                 max-height: 40px;
@@ -1080,17 +1107,17 @@ export default {
 
   .user-menu {
     // Remove the default padding on the popup so that the hover on menu items goes full width of the menu
-    ::v-deep .popover-inner {
+    :deep() .popover-inner {
       padding: 10px 0;
     }
 
-    ::v-deep .v-popover {
+    :deep() .v-popover {
       display: flex;
     }
   }
 
   .actions {
-    ::v-deep .popover:focus {
+    :deep() .popover:focus {
       outline: 0;
     }
 
@@ -1100,8 +1127,8 @@ export default {
   }
 
   .user-menu-item {
-    a {
-      cursor: hand;
+    a, &.no-link > span {
+      cursor: pointer;
       padding: 0px 10px;
 
       &:hover {
@@ -1118,6 +1145,13 @@ export default {
       }
     }
 
+    &.no-link > span {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+      color: var(--link);
+    }
+
     div.menu-separator {
       cursor: default;
       padding: 4px 0;

package/components/nav/Jump.vue

@@ -91,7 +91,7 @@ export default {
           :fixed-open="true"
           @close="$emit('closeSearch')"
         >
-          <template slot="accordion">
+          <template #accordion>
             <h6>{{ g.label }}</h6>
           </template>
         </Group>

package/components/nav/NamespaceFilter.vue

@@ -381,7 +381,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.removeCloseKeyHandler();
   },