@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/components/nav/TopLevelMenu.vue

@@ -12,6 +12,7 @@ import { KEY } from '@shell/utils/platform';
 import { getVersionInfo } from '@shell/utils/version';
 import { SETTING } from '@shell/config/settings';
 import { getProductFromRoute } from '@shell/utils/router';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
 import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
@@ -98,6 +99,17 @@ export default {
       return count?.summary.count;
     },
 
+    routeComboActive() {
+      if (!this.routeCombo || !this.isCurrRouteClusterExplorer) {
+        return false;
+      }
+
+      const ready = [...this.appBar.pinFiltered, ...this.appBar.clustersFiltered].filter((c) => c.ready);
+      const readyCount = ready.length;
+
+      return readyCount > 1 || (readyCount === 1 && this.clusterId !== ready[0].id);
+    },
+
     // New
     search() {
       return (this.clusterFilter || '').toLowerCase();
@@ -226,7 +238,7 @@ export default {
     },
 
     isCurrRouteClusterExplorer() {
-      return this.$route?.name?.startsWith('c-cluster');
+      return this.$route?.name?.startsWith('c-cluster') && this.productFromRoute === EXPLORER;
     },
 
     productFromRoute() {
@@ -382,11 +394,15 @@ export default {
     },
 
     handleKeyComboClick() {
+      if (!this.isCurrRouteClusterExplorer) {
+        return;
+      }
+
       this.routeCombo = !this.routeCombo;
     },
 
     clusterMenuClick(ev, cluster) {
-      if (this.routeCombo) {
+      if (this.routeComboActive) {
         ev.preventDefault();
 
         if (this.isCurrRouteClusterExplorer && this.productFromRoute === this.currentProduct?.name) {
@@ -423,7 +439,7 @@ export default {
     },
 
     async goToHarvesterCluster() {
-      const localCluster = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((C) => C.id === 'fleet-local/local');
+      const localCluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, 'fleet-local/local');
 
       try {
         await localCluster.goToHarvesterCluster();
@@ -446,7 +462,7 @@ export default {
         content = this.shown ? null : contentText;
 
       // if key combo is pressed, then we update the tooltip as well
-      } else if (this.routeCombo &&
+      } else if (this.routeComboActive &&
         typeof item === 'object' &&
         !Array.isArray(item) &&
         item !== null &&
@@ -706,7 +722,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div
@@ -785,7 +801,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div

package/components/nav/__tests__/Header.test.ts

@@ -157,6 +157,21 @@ describe('component: Header', () => {
 
       expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(true);
     });
+
+    it.each([
+      ['c-cluster-fleet-application-appco-credentials', '/c/local/fleet/application/suse-app-collection/credentials'],
+      ['c-cluster-fleet-application-appco-charts', '/c/local/fleet/application/suse-app-collection/charts'],
+      ['c-cluster-fleet-application-appco-chart', '/c/local/fleet/application/suse-app-collection/chart'],
+    ])('should disable Workspace Switcher on AppCo page %s (via route meta)', (name, path) => {
+      const wrapper = createWrapper({
+        name,
+        path,
+        params: {},
+        meta:   { disableWorkspaceSwitcher: true },
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(true);
+    });
   });
 
   describe('showFilter', () => {

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -110,28 +110,28 @@ describe('topLevelMenu', () => {
                 id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
-                isReady:     true
+                canExplore:  true
               },
               {
                 name:        'x33-cwf5-name',
                 id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
-                isReady:     true
+                canExplore:  true
               },
               {
                 name:        'x34-cwf5-name',
                 id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
-                isReady:     true
+                canExplore:  true
               },
               {
                 name:        'local-name',
                 id:          'local',
                 mgmt:        { id: 'local' },
                 nameDisplay: 'local',
-                isReady:     true
+                canExplore:  true
               },
             ])
           }
@@ -156,28 +156,28 @@ describe('topLevelMenu', () => {
         id:          'an-id1',
         mgmt:        { id: 'an-id1' },
         nameDisplay: 'c-cluster',
-        isReady:     true
+        canExplore:  true
       },
       {
         name:        'x33-cwf5-name',
         id:          'an-id2',
         mgmt:        { id: 'an-id2' },
         nameDisplay: 'a-cluster',
-        isReady:     false
+        canExplore:  false
       },
       {
         name:        'x34-cwf5-name',
         id:          'an-id3',
         mgmt:        { id: 'an-id3' },
         nameDisplay: 'b-cluster',
-        isReady:     true
+        canExplore:  true
       },
       {
         name:        'local-name',
         id:          'local',
         mgmt:        { id: 'local' },
         nameDisplay: 'local',
-        isReady:     true,
+        canExplore:  true,
         isLocal:     true,
       },
     ];
@@ -195,9 +195,9 @@ describe('topLevelMenu', () => {
     await waitForIt();
 
     expect(wrapper.find('[data-testid="top-level-menu-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('a-cluster');
     expect(wrapper.find('[data-testid="top-level-menu-cluster-1"] .cluster-name p').text()).toStrictEqual('b-cluster');
     expect(wrapper.find('[data-testid="top-level-menu-cluster-2"] .cluster-name p').text()).toStrictEqual('c-cluster');
-    expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('a-cluster');
   });
 
   it('should show local cluster always on top of the list of clusters (pinned and ready clusters)', async() => {
@@ -212,7 +212,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -220,7 +220,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -228,7 +228,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -236,7 +236,7 @@ describe('topLevelMenu', () => {
                 id:          'local',
                 mgmt:        { id: 'local' },
                 nameDisplay: 'local',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
             ])
@@ -271,7 +271,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -279,7 +279,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -287,7 +287,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
-                isReady:     false,
+                canExplore:  false,
                 pinned:      true
               },
               {
@@ -295,7 +295,7 @@ describe('topLevelMenu', () => {
                 id:          'local',
                 mgmt:        { id: 'local' },
                 nameDisplay: 'local',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
             ])
@@ -328,7 +328,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id1' },
                 description: 'some-description1',
                 nameDisplay: 'some-label',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               // pinned NOT ready cluster
@@ -347,7 +347,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id3' },
                 description: 'some-description3',
                 nameDisplay: 'some-label',
-                isReady:     true
+                canExplore:  true
               },
               // unpinned NOT ready cluster
               {
@@ -392,7 +392,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id1' },
                 description: 'some-description1',
                 nameDisplay: 'some-label',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               // pinned NOT ready cluster
@@ -411,7 +411,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id3' },
                 description: 'some-description3',
                 nameDisplay: 'some-label',
-                isReady:     true
+                canExplore:  true
               },
               // unpinned NOT ready cluster
               {
@@ -713,4 +713,246 @@ describe('topLevelMenu', () => {
       expect(wrapper.vm.mgmtClusters).toStrictEqual([]);
     });
   });
+
+  describe('computed properties', () => {
+    describe('routeComboActive', () => {
+      it('should be true when routeCombo is true and there are multiple ready clusters', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: { name: 'c-cluster-explorer', params: { cluster: 'local', product: 'explorer' } },
+              $store: {
+                ...generateStore([
+                  {
+                    nameDisplay: 'cluster1',
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    canExplore:  true
+                  },
+                  {
+                    nameDisplay: 'cluster2',
+                    id:          'an-id2',
+                    mgmt:        { id: 'an-id2' },
+                    canExplore:  true
+                  }
+                ])
+              }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(true);
+      });
+
+      it('should be false when routeCombo is false', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: {
+                ...generateStore([
+                  {
+                    nameDisplay: 'cluster1',
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    canExplore:  true
+                  },
+                  {
+                    nameDisplay: 'cluster2',
+                    id:          'an-id2',
+                    mgmt:        { id: 'an-id2' },
+                    canExplore:  true
+                  }
+                ])
+              }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: false });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+      });
+
+      it('should be false when there is only one ready cluster and it is the current cluster', async() => {
+        const store = generateStore([
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true
+          }
+        ]);
+
+        store.getters.clusterId = 'an-id1' as any;
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: store
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+      });
+
+      it('should be true when there is only one ready cluster but it is not the current cluster', async() => {
+        const store = generateStore([
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true
+          }
+        ]);
+
+        store.getters.clusterId = 'some-other-cluster-id' as any;
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: { name: 'c-cluster-explorer', params: { cluster: 'local', product: 'explorer' } },
+              $store: store
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(true);
+      });
+    });
+
+    describe('handleKeyComboClick', () => {
+      it('should not toggle routeCombo when route is a non-explorer c-cluster route', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'c-cluster-fleet', params: { cluster: 'local', product: 'fleet' } },
+              $router: { push: jest.fn() },
+              $store:  { ...generateStore([]) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+
+        expect(wrapper.vm.routeCombo).toBe(false);
+        wrapper.vm.handleKeyComboClick();
+        expect(wrapper.vm.routeCombo).toBe(false);
+      });
+
+      it('should toggle routeCombo when route is cluster explorer', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'c-cluster-explorer', params: { cluster: 'local', product: 'explorer' } },
+              $router: { push: jest.fn() },
+              $store:  { ...generateStore([]) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+
+        expect(wrapper.vm.routeCombo).toBe(false);
+        wrapper.vm.handleKeyComboClick();
+        expect(wrapper.vm.routeCombo).toBe(true);
+      });
+    });
+
+    describe('clusterMenuClick', () => {
+      it('should navigate normally on non-explorer c-cluster route even with routeCombo set', async() => {
+        const mockPush = jest.fn();
+        const clusterRoute = { name: 'c-cluster-explorer' };
+        const clusters = [
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true,
+            clusterRoute
+          },
+          {
+            nameDisplay: 'cluster2',
+            id:          'an-id2',
+            mgmt:        { id: 'an-id2' },
+            canExplore:  true,
+            clusterRoute
+          }
+        ];
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'c-cluster-fleet', params: { cluster: 'local', product: 'fleet' } },
+              $router: { push: mockPush },
+              $store:  { ...generateStore(clusters) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+
+        const ev = { preventDefault: jest.fn() };
+
+        wrapper.vm.clusterMenuClick(ev, clusters[1]);
+
+        expect(mockPush).toHaveBeenCalledWith(clusterRoute);
+      });
+
+      it('should navigate to cluster route when routeComboActive is false', async() => {
+        const mockPush = jest.fn();
+        const clusterRoute = { name: 'c-cluster-explorer' };
+        const clusters = [
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true,
+            clusterRoute
+          }
+        ];
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route:  { name: 'fleet-management', params: {} },
+              $router: { push: mockPush },
+              $store:  { ...generateStore(clusters) }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+
+        const ev = { preventDefault: jest.fn() };
+
+        wrapper.vm.clusterMenuClick(ev, clusters[0]);
+
+        expect(mockPush).toHaveBeenCalledWith(clusterRoute);
+      });
+    });
+  });
 });

package/components/templates/default.vue

@@ -24,6 +24,7 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import { getClusterFromRoute, getProductFromRoute } from '@shell/utils/router';
 import SideNav from '@shell/components/SideNav';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -42,6 +43,7 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     SideNav,
+    RcButton,
   },
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
@@ -162,10 +164,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <AwsComplianceBanner v-if="managementReady" />
     <div

package/components/templates/home.vue

@@ -12,6 +12,7 @@ import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
@@ -24,6 +25,7 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     PromptModal,
+    RcButton
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -62,6 +64,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <Inactivity />
     <AwsComplianceBanner />
@@ -77,8 +86,10 @@ export default {
       />
 
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.home')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
@@ -142,4 +153,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>

package/components/templates/plain.vue

@@ -15,6 +15,7 @@ import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
@@ -30,6 +31,7 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     Inactivity,
+    RcButton
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -66,6 +68,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <AwsComplianceBanner />
 
@@ -75,8 +84,10 @@ export default {
     >
       <Header :simple="true" />
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.plain')"
+        tabindex="-1"
       >
         <IndentedPanel class="pt-20">
           <router-view
@@ -147,4 +158,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>