@rancher/shell 1.2.3 → 2.0.1

package/components/nav/Group.vue

@@ -212,13 +212,13 @@ export default {
       @click="groupSelected()"
     >
       <slot name="header">
-        <n-link
+        <router-link
           v-if="hasOverview"
           :to="group.children[0].route"
           :exact="group.children[0].exact"
         >
           <h6 v-clean-html="group.labelDisplay || group.label" />
-        </n-link>
+        </router-link>
         <h6
           v-else
           v-clean-html="group.labelDisplay || group.label"
@@ -293,7 +293,8 @@ export default {
 
     > A {
       display: block;
-      padding-left: 16px;
+      box-sizing:border-box;
+      height: 100%;
       &:hover{
         text-decoration: none;
       }
@@ -302,6 +303,7 @@ export default {
       }
       > H6 {
         text-transform: none;
+        padding: 8px 0 8px 16px;
       }
     }
   }
@@ -313,6 +315,7 @@ export default {
         background-color: var(--primary-hover-bg);
 
         h6 {
+          padding: 8px 0 8px 16px;
           font-weight: bold;
           color: var(--primary-hover-text);
         }
@@ -330,7 +333,6 @@ export default {
   .accordion {
     &.depth-0 {
       > .header {
-        padding: 8px 0;
 
         &.noHover {
           cursor: default;
@@ -338,7 +340,7 @@ export default {
 
         > H6 {
           text-transform: none;
-          padding-left: 16px;
+          padding: 8px 0 8px 16px;
         }
 
         > I {
@@ -390,8 +392,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.nuxt-link-active,
-  .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.router-link-active,
+  .header ::v-deep > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {

package/components/nav/Header.vue

@@ -9,7 +9,8 @@ import BrandImage from '@shell/components/BrandImage';
 import { getProduct } from '@shell/config/private-label';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
 import ClusterBadge from '@shell/components/ClusterBadge';
-import { LOGGED_OUT } from '@shell/config/query-params';
+import AppModal from '@shell/components/AppModal';
+import { LOGGED_OUT, IS_SSO } from '@shell/config/query-params';
 import NamespaceFilter from './NamespaceFilter';
 import WorkspaceSwitcher from './WorkspaceSwitcher';
 import TopLevelMenu from './TopLevelMenu';
@@ -18,8 +19,7 @@ import { allHash } from '@shell/utils/promise';
 import { ActionLocation, ExtensionPoint } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import IconOrSvg from '@shell/components/IconOrSvg';
-
-const PAGE_HEADER_ACTION = 'page-action';
+import { wait } from '@shell/utils/async';
 
 export default {
 
@@ -32,7 +32,8 @@ export default {
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
-    IconOrSvg
+    IconOrSvg,
+    AppModal,
   },
 
   props: {
@@ -55,14 +56,15 @@ export default {
       LOGGED_OUT,
       navHeaderRight:         null,
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
-      ctx:                    this
+      ctx:                    this,
+      showImportModal:        false,
+      showSearchModal:        false,
     };
   },
 
   computed: {
     ...mapGetters(['clusterReady', 'isExplorer', 'isRancher', 'currentCluster',
-      'currentProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
-    ...mapGetters('type-map', ['activeProducts']),
+      'currentProduct', 'rootProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
 
     appName() {
       return getProduct();
@@ -72,6 +74,14 @@ export default {
       return this.$store.getters['auth/enabled'];
     },
 
+    isAuthLocalProvider() {
+      return this.principal && this.principal.provider === 'local';
+    },
+
+    generateLogoutRoute() {
+      return this.isAuthLocalProvider ? { name: 'auth-logout', query: { [LOGGED_OUT]: true } } : { name: 'auth-logout', query: { [LOGGED_OUT]: true, [IS_SSO]: true } };
+    },
+
     principal() {
       return this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.$store.getters['auth/principalId']) || {};
     },
@@ -85,15 +95,15 @@ export default {
     },
 
     showKubeShell() {
-      return !this.currentProduct?.hideKubeShell;
+      return !this.rootProduct?.hideKubeShell;
     },
 
     showKubeConfig() {
-      return !this.currentProduct?.hideKubeConfig;
+      return !this.rootProduct?.hideKubeConfig;
     },
 
     showCopyConfig() {
-      return !this.currentProduct?.hideCopyConfig;
+      return !this.rootProduct?.hideCopyConfig;
     },
 
     showPreferencesLink() {
@@ -108,7 +118,7 @@ export default {
     },
 
     showPageActions() {
-      return !this.featureRancherDesktop && this.pageActions?.length;
+      return !this.featureRancherDesktop && this.pageActions && this.pageActions.length;
     },
 
     showUserMenu() {
@@ -123,7 +133,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;
     },
@@ -137,17 +147,17 @@ export default {
     },
 
     prod() {
-      const name = this.currentProduct.name;
+      const name = this.rootProduct.name;
 
       return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
     },
 
     showSearch() {
-      return this.currentProduct?.inStore === 'cluster';
+      return this.rootProduct?.inStore === 'cluster';
     },
 
     showImportYaml() {
-      return this.currentProduct?.inStore !== 'harvester';
+      return this.rootProduct?.inStore !== 'harvester';
     },
 
     nameTooltip() {
@@ -239,19 +249,19 @@ export default {
     },
 
     openImport() {
-      this.$modal.show('importModal');
+      this.showImportModal = true;
     },
 
     closeImport() {
-      this.$modal.hide('importModal');
+      this.showImportModal = false;
     },
 
     openSearch() {
-      this.$modal.show('searchModal');
+      this.showSearchModal = true;
     },
 
     hideSearch() {
-      this.$modal.hide('searchModal');
+      this.showSearchModal = false;
     },
 
     showPageActionsMenu(show) {
@@ -265,7 +275,7 @@ export default {
     },
 
     pageAction(action) {
-      this.$nuxt.$emit(PAGE_HEADER_ACTION, action);
+      this.$store.dispatch('handlePageAction', action);
     },
 
     checkClusterName() {
@@ -292,7 +302,7 @@ export default {
       // Make sure we wait at least 1 second so that the user can see the visual indication that the config has been copied
       allHash({
         copy:     this.currentCluster.copyKubeConfig(),
-        minDelay: new Promise((resolve) => setTimeout(resolve, 1000))
+        minDelay: wait(1000),
       }).finally(() => {
         this.kubeConfigCopying = false;
 
@@ -311,7 +321,7 @@ export default {
         product: this.currentProduct.name,
         cluster: this.currentCluster,
       };
-      const enabled = action.enabled ? action.enabled.apply(this, [opts]) : true;
+      const enabled = action.enabled ? action.enabled.apply(this, [this.ctx]) : true;
 
       if (fn && enabled) {
         fn.apply(this, [opts, [], { $route: this.$route }]);
@@ -344,7 +354,7 @@ export default {
       class="menu-spacer"
       :class="{'isSingleProduct': isSingleProduct }"
     >
-      <n-link
+      <router-link
         v-if="isSingleProduct && !isRancherInHarvester"
         :to="singleProductLogoRoute"
       >
@@ -352,7 +362,7 @@ export default {
           class="side-menu-logo"
           :src="isSingleProduct.logo"
         >
-      </n-link>
+      </router-link>
     </div>
     <div
       v-if="!simple"
@@ -432,6 +442,7 @@ export default {
       >
         <BrandImage
           class="side-menu-logo-img"
+          data-testid="header-side-menu__brand-img"
           file-name="rancher-logo.svg"
         />
       </div>
@@ -441,7 +452,6 @@ export default {
 
     <div class="rd-header-right">
       <component :is="navHeaderRight" />
-
       <div
         v-if="showFilter"
         class="top"
@@ -460,22 +470,25 @@ export default {
             :disabled="!importEnabled"
             type="button"
             class="btn header-btn role-tertiary"
+            data-testid="header-action-import-yaml"
             @click="openImport()"
           >
             <i class="icon icon-upload icon-lg" />
           </button>
-          <modal
+          <app-modal
+            v-if="showImportModal"
             class="import-modal"
             name="importModal"
             width="75%"
             height="auto"
             styles="max-height: 90vh;"
+            @close="closeImport"
           >
             <Import
               :cluster="currentCluster"
               @close="closeImport"
             />
-          </modal>
+          </app-modal>
 
           <button
             v-if="showKubeShell"
@@ -497,6 +510,7 @@ export default {
             :disabled="!kubeConfigEnabled"
             type="button"
             class="btn header-btn role-tertiary"
+            data-testid="btn-download-kubeconfig"
             @click="currentCluster.downloadKubeConfig()"
           >
             <i class="icon icon-file icon-lg" />
@@ -508,6 +522,7 @@ export default {
             :disabled="!kubeConfigEnabled"
             type="button"
             class="btn header-btn role-tertiary"
+            data-testid="btn-copy-kubeconfig"
             @click="copyKubeConfig($event)"
           >
             <i
@@ -527,20 +542,22 @@ export default {
           v-shortkey="{windows: ['ctrl', 'k'], mac: ['meta', 'k']}"
           type="button"
           class="btn header-btn role-tertiary"
+          data-testid="header-resource-search"
           @shortkey="openSearch()"
           @click="openSearch()"
         >
           <i class="icon icon-search icon-lg" />
         </button>
-        <modal
-          v-if="showSearch"
+        <app-modal
+          v-if="showSearch && showSearchModal"
           class="search-modal"
           name="searchModal"
           width="50%"
           height="auto"
+          @close="hideSearch()"
         >
           <Jump @closeSearch="hideSearch()" />
-        </modal>
+        </app-modal>
       </div>
 
       <!-- Extension header actions -->
@@ -556,6 +573,7 @@ export default {
           :disabled="action.enabled ? !action.enabled(ctx) : false"
           type="button"
           class="btn header-btn role-tertiary"
+          :data-testid="`extension-header-action-${ action.labelKey || action.label }`"
           @shortkey="handleExtensionAction(action, $event)"
           @click="handleExtensionAction(action, $event)"
         >
@@ -673,30 +691,51 @@ export default {
                   </template>
                 </div>
               </li>
-              <nuxt-link
+              <router-link
                 v-if="showPreferencesLink"
-                tag="li"
+                v-slot="{ href, navigate }"
+                custom
                 :to="{name: 'prefs'}"
-                class="user-menu-item"
               >
-                <a>{{ t('nav.userMenu.preferences') }}</a>
-              </nuxt-link>
-              <nuxt-link
+                <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"
-                tag="li"
+                v-slot="{ href, navigate }"
+                custom
                 :to="{name: 'account'}"
-                class="user-menu-item"
               >
-                <a>{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
-              </nuxt-link>
-              <nuxt-link
+                <li
+                  class="user-menu-item"
+                  @click="navigate"
+                  @keypress.enter="navigate"
+                >
+                  <a :href="href">{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
+                </li>
+              </router-link>
+              <router-link
                 v-if="authEnabled"
-                tag="li"
-                :to="{name: 'auth-logout', query: { [LOGGED_OUT]: true }}"
-                class="user-menu-item"
+                v-slot="{ href, navigate }"
+                custom
+                :to="generateLogoutRoute"
               >
-                <a @blur="showMenu(false)">{{ t('nav.userMenu.logOut') }}</a>
-              </nuxt-link>
+                <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>
           </template>
         </v-popover>

package/components/nav/Jump.vue

@@ -2,7 +2,8 @@
 import debounce from 'lodash/debounce';
 import Group from '@shell/components/nav/Group';
 import { isMac } from '@shell/utils/platform';
-import { BOTH, ALL } from '@shell/store/type-map';
+import { BOTH, TYPE_MODES } from '@shell/store/type-map';
+import { COUNT } from '@shell/config/types';
 
 export default {
   components: { Group },
@@ -31,17 +32,26 @@ export default {
   methods: {
     updateMatches() {
       const clusterId = this.$store.getters['clusterId'];
-      const isAllNamespaces = this.$store.getters['isAllNamespaces'];
-      const product = this.$store.getters['productId'];
+      const productId = this.$store.getters['productId'];
+      const product = this.$store.getters['currentProduct'];
 
-      let namespaces = null;
+      const allTypesByMode = this.$store.getters['type-map/allTypes'](productId, [TYPE_MODES.ALL]) || {};
+      const allTypes = allTypesByMode[TYPE_MODES.ALL];
+      const out = this.$store.getters['type-map/getTree'](productId, TYPE_MODES.ALL, allTypes, clusterId, BOTH, null, this.value);
 
-      if ( !isAllNamespaces ) {
-        namespaces = Object.keys(this.$store.getters['activeNamespaceCache']);
-      }
+      // Suplement the output with count info. Usualy the `Type` component would handle this individualy... but scales real bad so give it
+      // some help
+      const counts = this.$store.getters[`${ product.inStore }/all`](COUNT)?.[0]?.counts || {};
 
-      const allTypes = this.$store.getters['type-map/allTypes'](product) || {};
-      const out = this.$store.getters['type-map/getTree'](product, ALL, allTypes, clusterId, BOTH, namespaces, null, this.value);
+      out.forEach((o) => {
+        o.children?.forEach((t) => {
+          const count = counts[t.name];
+
+          t.count = count ? count.summary.count || 0 : null;
+          t.byNamespace = count ? count.namespaces : {};
+          t.revision = count ? count.revision : null;
+        });
+      });
 
       this.groups = out;
 

package/components/nav/NamespaceFilter.vue

@@ -17,8 +17,9 @@ import {
   NAMESPACE_FILTER_P_FULL_PREFIX,
 } from '@shell/utils/namespace-filter';
 import { KEY } from '@shell/utils/platform';
-import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
+import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
 import { SETTING } from '@shell/config/settings';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 const forcedNamespaceValidTypes = [NAMESPACE_FILTER_KINDS.DIVIDER, NAMESPACE_FILTER_KINDS.PROJECT, NAMESPACE_FILTER_KINDS.NAMESPACE];
 
@@ -53,6 +54,10 @@ export default {
       return this.filter.length > 0;
     },
 
+    paginatedListFilterMode() {
+      return this.$store.getters[`${ this.currentProduct.inStore }/paginationEnabled`](this.$route.params?.resource) ? paginationUtils.validNsProjectFilters : null;
+    },
+
     filtered() {
       let out = this.options;
 
@@ -100,6 +105,8 @@ export default {
           const isNotInProjectGroup = i.id === ALL_ORPHANS;
 
           i.enabled = (!isLastSelected && kindAllowed) && !isNotInProjectGroup;
+        } else if (this.paginatedListFilterMode?.length) {
+          i.enabled = !!i.id && paginationUtils.validateNsProjectFilter(i.id);
         }
       });