@rancher/shell 0.5.3 → 2.0.0

package/components/formatter/IngressTarget.vue

@@ -1,5 +1,5 @@
 <script>
-import { WORKLOAD_TYPES } from '@shell/config/types';
+import { INGRESS, WORKLOAD_TYPES } from '@shell/config/types';
 import IngressFullPath from '@shell/components/formatter/IngressFullPath';
 
 export default {
@@ -18,7 +18,18 @@ export default {
   },
 
   async fetch() {
-    await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    let promises = [];
+
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
+      // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
+      promises = Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type }));
+    }
+    const ingressSchema = this.$store.getters[`cluster/schemaFor`](INGRESS);
+
+    if (ingressSchema) {
+      promises.push(ingressSchema.fetchResourceFields());
+    }
+    await Promise.all(promises);
   },
 
   computed: {
@@ -37,7 +48,7 @@ export default {
 
 <template>
   <div
-    v-if="value"
+    v-if="value && !$fetchState.pending"
     class="ingress-target"
     :reactivity="workloads.length"
   >
@@ -48,12 +59,12 @@ export default {
     >
       <IngressFullPath :row="path" />
       <i class="icon icon-chevron-right" />
-      <nuxt-link
+      <router-link
         v-if="path.serviceName && path.serviceTargetTo"
         :to="path.serviceTargetTo"
       >
         {{ path.serviceName }}
-      </nuxt-link>
+      </router-link>
       <span v-else-if="path.serviceName">
         {{ path.serviceName }}
       </span>
@@ -63,12 +74,12 @@ export default {
       class="target"
     >
       {{ t('ingress.target.default') }} <i class="icon icon-chevron-right" />
-      <nuxt-link
+      <router-link
         v-if="defaultService.targetTo"
         :to="defaultService.targetTo"
       >
         {{ defaultService.name }}
-      </nuxt-link>
+      </router-link>
       <span v-else>
         {{ defaultService.name }}
       </span>

package/components/formatter/Link.vue

@@ -135,7 +135,7 @@ export default {
 </script>
 
 <template>
-  <n-link
+  <router-link
     v-if="isInternal && href"
     :to="href"
     class="link-text-icon"
@@ -151,7 +151,7 @@ export default {
       :class="afterIconClass"
       class="suffix"
     />
-  </n-link>
+  </router-link>
   <a
     v-else-if="href"
     :href="href"

package/components/formatter/LinkDetail.vue

@@ -42,12 +42,12 @@ export default {
 
 <template>
   <span>
-    <n-link
+    <router-link
       v-if="to"
       :to="to"
     >
       {{ value }}
-    </n-link>
+    </router-link>
     <span v-else>
       {{ value }}
       <template v-if="!value && col.dashIfEmpty">

package/components/formatter/LinkDetailImage.vue

@@ -20,9 +20,9 @@ export default {
 
 <template>
   <span>
-    <nuxt-link :to="row.detailLocation">
+    <router-link :to="row.detailLocation">
       {{ value }}
-    </nuxt-link>
+    </router-link>
     <br>
     <span class="text-small text-muted">
       {{ row.imageDisplay }}

package/components/formatter/LinkName.vue

@@ -53,12 +53,12 @@ export default {
 
 <template>
   <span v-if="value">
-    <nuxt-link
+    <router-link
       v-if="canViewResource"
       :to="url"
     >
       {{ value }}
-    </nuxt-link>
+    </router-link>
     <template v-else>
       {{ value }}
     </template>

package/components/formatter/LiveDate.vue

@@ -34,6 +34,16 @@ export default {
     showTooltip: {
       type:    Boolean,
       default: true
+    },
+
+    /**
+     * Determines if the live date should behave like a countdown by comparing
+     * the provided value and the current date. When the countdown reaches 0, a
+     * "-" is rendered.
+     */
+    isCountdown: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -104,6 +114,12 @@ export default {
         return 300;
       }
 
+      if (this.isCountdown && now.valueOf() > this.dayValue?.valueOf()) {
+        this.label = '-';
+
+        return 300;
+      }
+
       const diff = diffFrom(this.dayValue, now);
       const prefix = (diff.diff < 0 || !this.addPrefix ? '' : '-');
 

package/components/formatter/PrincipalGroupBindings.vue

@@ -38,12 +38,12 @@ export default {
 <template>
   <div class="pgb">
     <template v-for="(role, i) in boundRoles">
-      <nuxt-link
+      <router-link
         :key="role.id"
         :to="role.detailLocation"
       >
         {{ role.label }}
-      </nuxt-link>
+      </router-link>
       <template v-if="i + 1 < boundRoles.length">
         ,&nbsp;
       </template>

package/components/formatter/SecretType.vue

@@ -29,12 +29,12 @@ export default {
 </script>>
 
 <template>
-  <nuxt-link
+  <router-link
     v-if="serviceAccountLink"
     :to="serviceAccountLink"
   >
     {{ typeDisplay }}
-  </nuxt-link>
+  </router-link>
   <div v-else>
     {{ typeDisplay }}
   </div>

package/components/formatter/VirtualServiceGateways.vue

@@ -95,9 +95,9 @@ export default {
       :key="gateway"
     >
       <template v-if="i < 5">
-        <nuxt-link :to="gatewayLinks(gateway)">
+        <router-link :to="gatewayLinks(gateway)">
           {{ gatewayLinks(gateway).params.id }}
-        </nuxt-link>
+        </router-link>
         <span v-if="i<gateways.length-1 && i < 4">,</span>
       </template>
     </span>

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

@@ -6,7 +6,7 @@ describe('component: LinkDetail', () => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
       propsData: { row: { detailLocation: location }, value: 'test-name' },
-      stubs:     { nLink: RouterLinkStub }
+      stubs:     { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -18,7 +18,7 @@ describe('component: LinkDetail', () => {
     const location = 'route-somewhere';
     const wrapper = await mount(LinkDetail, {
       propsData: { row: { detailLocation: location } },
-      stubs:     { nLink: RouterLinkStub }
+      stubs:     { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -31,7 +31,7 @@ describe('component: LinkDetail', () => {
       propsData: {
         row: { detailLocation: null }, value: 'test-name', col: { }
       },
-      stubs: { nLink: RouterLinkStub }
+      stubs: { 'router-link': RouterLinkStub }
     });
     const span = wrapper.find('span span');
 
@@ -48,7 +48,7 @@ describe('component: LinkDetail', () => {
       propsData: {
         row: { detailLocation: location }, value: 'test-name', col: { }, getCustomDetailLink: () => 'custom-link'
       },
-      stubs: { nLink: RouterLinkStub }
+      stubs: { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -62,7 +62,7 @@ describe('component: LinkDetail', () => {
       propsData: {
         row: { detailLocation: location, otherKey: 'other-location' }, value: 'test-name', col: { }, reference: 'otherKey'
       },
-      stubs: { nLink: RouterLinkStub }
+      stubs: { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);

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 {

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() {
@@ -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;
 
@@ -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"
@@ -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/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);
         }
       });