@rancher/shell 2.0.1 → 3.0.0-rc.2

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,
+      isUserMenuOpen:         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();
     },
@@ -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.isUserMenuOpen = 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) {
@@ -594,47 +618,48 @@ export default {
         <i
           data-testid="page-actions-menu"
           class="icon icon-actions"
+          tabindex="0"
           @blur="showPageActionsMenu(false)"
           @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"
+          :flip="false"
+          :content="false"
+          :placement="'bottom-end'"
+          :distance="14"
+          :container="'#page-actions'"
         >
-          <template
-            slot="popover"
-            class="user-menu"
-          >
-            <ul
-              data-testid="page-actions-dropdown"
-              class="list-unstyled dropdown"
-              @click.stop="showPageActionsMenu(false)"
-            >
-              <li
-                v-for="a in pageActions"
-                :key="a.label"
-                class="user-menu-item"
+          <template #popper>
+            <div class="user-menu">
+              <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" />
@@ -647,14 +672,13 @@ export default {
         @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 } } }"
+        <v-dropdown
+          :triggers="[]"
+          :shown="isUserMenuOpen"
+          :autoHide="false"
+          :flip="false"
           :container="false"
+          :placement="'bottom-end'"
         >
           <div class="user-image text-right hand">
             <img
@@ -669,76 +693,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 +813,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 +976,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);
@@ -986,7 +1021,7 @@ export default {
         position: relative;
       }
 
-      .user-menu {
+      .user.user-menu {
         padding-top: 9.5px;
       }
 
@@ -994,9 +1029,9 @@ export default {
         outline: none;
         width: var(--header-height);
 
-        .v-popover {
+        .v-popper {
           display: flex;
-          ::v-deep .trigger{
+          :deep() .trigger{
           .user-image {
               display: flex;
             }
@@ -1009,8 +1044,8 @@ export default {
         }
 
         &:focus {
-          .v-popover {
-            ::v-deep .trigger {
+          .v-popper {
+            :deep() .trigger {
               line-height: 0;
               .user-image {
                 max-height: 40px;
@@ -1067,7 +1102,7 @@ export default {
     }
   }
 
-  .popover .popover-inner {
+  .v-popper__popper .v-popper__inner {
     padding: 0;
     border-radius: 0;
   }
@@ -1078,19 +1113,28 @@ export default {
     color: var(--secondary);
   }
 
+  #page-actions {
+    :deep() .v-popper__arrow-container {
+      display: none;
+    }
+  }
+
   .user-menu {
+    :deep() .v-popper__arrow-container {
+      display: none;
+    }
     // Remove the default padding on the popup so that the hover on menu items goes full width of the menu
-    ::v-deep .popover-inner {
-      padding: 10px 0;
+    :deep() .v-popper__inner {
+      padding: 0 0 10px 0;
     }
 
-    ::v-deep .v-popover {
+    :deep() .v-popper {
       display: flex;
     }
   }
 
   .actions {
-    ::v-deep .popover:focus {
+    :deep() .v-popper:focus {
       outline: 0;
     }
 
@@ -1100,8 +1144,8 @@ export default {
   }
 
   .user-menu-item {
-    a {
-      cursor: hand;
+    a, &.no-link > span {
+      cursor: pointer;
       padding: 0px 10px;
 
       &:hover {
@@ -1118,6 +1162,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();
   },
 
@@ -836,7 +836,7 @@ export default {
           :key="opt.id"
           tabindex="0"
           class="ns-option"
-          :disabled="!opt.enabled"
+          :disabled="opt.enabled ? null : true"
           :class="{
             'ns-selected': opt.selected,
             'ns-single-match': cachedFiltered.length === 1 && !opt.selected,

package/components/nav/TopLevelMenu.vue

@@ -318,7 +318,7 @@ export default {
     document.addEventListener('keyup', this.handler);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
   },
 
@@ -561,8 +561,8 @@ export default {
               </a>
             </div>
             <div
-              v-for="a in appBar.hciApps"
-              :key="a.label"
+              v-for="(a, i) in appBar.hciApps"
+              :key="i"
               @click="hide()"
             >
               <router-link
@@ -593,7 +593,7 @@ export default {
               >
                 <div
                   v-for="(c, index) in appBar.pinFiltered"
-                  :key="c.id"
+                  :key="index"
                   :data-testid="`pinned-ready-cluster-${index}`"
                   @click="hide()"
                 >
@@ -668,7 +668,7 @@ export default {
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
-                  :key="c.id"
+                  :key="index"
                   :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
@@ -692,6 +692,7 @@ export default {
                       v-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
+                      <!-- HERE LOCAL CLUSTER! -->
                       <p>{{ c.label }}</p>
                       <p
                         v-if="c.description"
@@ -773,8 +774,8 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in appBar.multiClusterApps"
-                :key="a.label"
+                v-for="(a, i) in appBar.multiClusterApps"
+                :key="i"
                 @click="hide()"
               >
                 <router-link
@@ -801,8 +802,8 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in appBar.legacyApps"
-                :key="a.label"
+                v-for="(a, i) in appBar.legacyApps"
+                :key="i"
                 @click="hide()"
               >
                 <router-link
@@ -831,8 +832,8 @@ export default {
                 </span>
               </div>
               <div
-                v-for="a in appBar.configurationApps"
-                :key="a.label"
+                v-for="(a, i) in appBar.configurationApps"
+                :key="i"
                 @click="hide()"
               >
                 <router-link
@@ -903,15 +904,15 @@ export default {
   }
 
   .localeSelector {
-    .popover-inner {
+    .v-popper__inner {
       padding: 10px 0;
     }
 
-    .popover-arrow {
+    .v-popper__arrow-container {
       display: none;
     }
 
-    .popover:focus {
+    .v-popper:focus {
       outline: 0;
     }
   }
@@ -1450,15 +1451,15 @@ export default {
   }
 
   .localeSelector {
-    ::v-deep .popover-inner {
+    :deep() .v-popper__inner {
       padding: 50px 0;
     }
 
-    ::v-deep .popover-arrow {
+    :deep() .v-popper__arrow-container {
       display: none;
     }
 
-    ::v-deep .popover:focus {
+    :deep() .v-popper:focus {
       outline: 0;
     }
 

package/components/nav/Type.vue

@@ -10,6 +10,8 @@ export default {
 
   components: { Favorite, TabTitle },
 
+  emits: ['selected'],
+
   props: {
     type: {
       type:     Object,
@@ -64,7 +66,7 @@ export default {
     selectType() {
       // Prevent issues if custom NavLink is used #5047
       if (this.type?.route) {
-        const typePath = this.$router.resolve(this.type.route)?.route?.fullPath;
+        const typePath = this.$router.resolve(this.type.route)?.fullPath;
 
         if (typePath !== this.$route.fullPath) {
           this.$emit('selected');
@@ -82,8 +84,6 @@ export default {
     v-slot="{ href, navigate, isActive, isExactActive }"
     custom
     :to="type.route"
-    :exact="type.exact"
-    :exact-path="type['exact-path']"
   >
     <li
       class="child nav-type"
@@ -171,13 +171,13 @@ export default {
         padding-left: 3px;
       }
 
-      ::v-deep .highlight {
+      :deep() .highlight {
         background: var(--diff-ins-bg);
         color: var(--body-text);
         padding: 2px;
       }
 
-      ::v-deep .icon {
+      :deep() .icon {
         position: relative;
         color: var(--muted);
       }
@@ -202,7 +202,7 @@ export default {
         background: var(--nav-hover);
         text-decoration: none;
 
-        ::v-deep .icon {
+        :deep() .icon {
           color: var(--body-text);
         }
       }
@@ -229,7 +229,7 @@ export default {
         padding-left: 16px;
       }
 
-      ::v-deep .label I {
+      :deep() .label I {
         padding-right: 2px;
       }
     }