@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

package/components/nav/WorkspaceSwitcher.vue

@@ -8,6 +8,13 @@ export default {
   name:       'WorkspaceSwitcher',
   components: { Select },
 
+  props: {
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
   computed: {
     ...mapState(['allWorkspaces', 'workspace', 'allNamespaces', 'defaultNamespace', 'getActiveNamespaces']),
 
@@ -94,6 +101,7 @@ export default {
       label="label"
       :options="options"
       :clearable="false"
+      :disabled="disabled"
       :reduce="(opt) => opt.value"
     />
     <!--button v-shortkey.once="['w']" class="hide" @shortkey="focus()" /-->
@@ -187,4 +195,9 @@ export default {
 .filter :deep() .unlabeled-select INPUT[type='search'] {
   padding: 7px;
 }
+
+.filter :deep() .unlabeled-select.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 </style>

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

@@ -0,0 +1,67 @@
+import { shallowMount } from '@vue/test-utils';
+import Group from '@shell/components/nav/Group.vue';
+
+describe('component: Group', () => {
+  it('isOverview ignores query parameters and hash strings when checking active state', () => {
+    const group = {
+      name:     'test',
+      children: [
+        {
+          route:    { name: 'overview-route' },
+          overview: true
+        }
+      ]
+    };
+
+    const wrapper = shallowMount(Group as any, {
+      props: {
+        group, canCollapse: true, idPrefix: ''
+      },
+      global: {
+        mocks: {
+          $route:  { path: '/test/route', fullPath: '/test/route?query=val#hash' },
+          $router: {
+            resolve:   jest.fn().mockReturnValue({ path: '/test/route', fullPath: '/test/route' }),
+            getRoutes: jest.fn().mockReturnValue([])
+          },
+          t: (key: string) => key
+        }
+      }
+    });
+
+    expect((wrapper.vm as any).isOverview).toBe(true);
+  });
+
+  it('hasActiveRoute ignores query parameters when checking item paths', () => {
+    const group = {
+      name:     'test',
+      children: [
+        { route: { name: 'child-route', params: {} } }
+      ]
+    };
+
+    const wrapper = shallowMount(Group as any, {
+      props: {
+        group, canCollapse: true, idPrefix: ''
+      },
+      global: {
+        mocks: {
+          $route: {
+            params:   {},
+            hash:     '#hash',
+            path:     '/child/route',
+            fullPath: '/child/route?query=val#hash',
+            matched:  []
+          },
+          $router: {
+            resolve:   jest.fn().mockReturnValue({ path: '/child/route', fullPath: '/child/route' }),
+            getRoutes: jest.fn().mockReturnValue([])
+          },
+          t: (key: string) => key
+        }
+      }
+    });
+
+    expect((wrapper.vm as any).hasActiveRoute()).toBe(true);
+  });
+});

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

@@ -0,0 +1,235 @@
+import { shallowMount } from '@vue/test-utils';
+import Header from '@shell/components/nav/Header.vue';
+
+describe('component: Header', () => {
+  const defaultStoreMock = {
+    getters: {
+      clusterReady:            false,
+      isExplorer:              false,
+      isRancher:               false,
+      currentCluster:          null,
+      currentProduct:          null,
+      rootProduct:             { name: 'fleet' },
+      backToRancherLink:       '',
+      backToRancherGlobalLink: '',
+      pageActions:             [],
+      isSingleProduct:         false,
+      isRancherInHarvester:    false,
+      showTopLevelMenu:        false,
+      showWorkspaceSwitcher:   true,
+      'management/schemaFor':  () => null,
+      'management/all':        () => [],
+      'rancher/schemaFor':     () => null,
+      'rancher/byId':          () => null,
+      'rancher/all':           () => [],
+      'auth/principalId':      'test',
+      'auth/enabled':          false,
+      'i18n/withFallback':     () => '',
+    },
+    dispatch: jest.fn(),
+    commit:   jest.fn(),
+  };
+
+  const defaultRouteMock = {
+    name:   'c-cluster-fleet-application-resource',
+    path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo',
+    params: { resource: 'fleet.cattle.io.gitrepo' },
+  };
+
+  const defaultConfigMock = { rancherEnv: 'web' };
+
+  function createWrapper(routeOverride = {}, storeOverride = {}) {
+    const routeMock = {
+      ...defaultRouteMock,
+      ...routeOverride,
+    };
+
+    const storeMock = {
+      ...defaultStoreMock,
+      getters: {
+        ...defaultStoreMock.getters,
+        ...storeOverride,
+      },
+      dispatch: jest.fn(),
+      commit:   jest.fn(),
+    };
+
+    return shallowMount(Header as any, {
+      global: {
+        mocks: {
+          $store:     storeMock,
+          $route:     routeMock,
+          $config:    defaultConfigMock,
+          $extension: { getDynamic: jest.fn() },
+        },
+        stubs: {
+          'router-link':        { template: '<a><slot /></a>' },
+          BrandImage:           { template: '<span />' },
+          ClusterProviderIcon:  { template: '<span />' },
+          ClusterBadge:         { template: '<span />' },
+          TopLevelMenu:         { template: '<div />' },
+          NamespaceFilter:      { template: '<div />' },
+          WorkspaceSwitcher:    { template: '<div />' },
+          IconOrSvg:            { template: '<span />' },
+          AppModal:             { template: '<div />' },
+          NotificationCenter:   { template: '<div />' },
+          HeaderPageActionMenu: { template: '<div />' },
+          RcDropdown:           { template: '<div><slot /><slot name="dropdownCollection" /></div>' },
+          RcDropdownItem:       { template: '<div><slot /></div>' },
+          RcDropdownSeparator:  { template: '<hr />' },
+          RcDropdownTrigger:    { template: '<button><slot /></button>' },
+        },
+      },
+    });
+  }
+
+  describe('disableWorkspaceSwitcher', () => {
+    it('should return false on a list page', () => {
+      const wrapper = createWrapper({
+        name:   'c-cluster-fleet-application-resource',
+        path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo',
+        params: { resource: 'fleet.cattle.io.gitrepo' },
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(false);
+    });
+
+    it('should return true on a detail page (route has an id param)', () => {
+      const wrapper = createWrapper({
+        name:   'c-cluster-fleet-application-resource-namespace-id',
+        path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo/fleet-default/my-repo',
+        params: {
+          resource: 'fleet.cattle.io.gitrepo', namespace: 'fleet-default', id: 'my-repo'
+        },
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(true);
+    });
+
+    it('should return true on a create page (route name ends with -create)', () => {
+      const wrapper = createWrapper({
+        name:   'c-cluster-fleet-application-resource-create',
+        path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo/create',
+        params: { resource: 'fleet.cattle.io.gitrepo' },
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(true);
+    });
+
+    it('should return true on the application create page', () => {
+      const wrapper = createWrapper({
+        name:   'c-cluster-fleet-application-create',
+        path:   '/c/local/fleet/application/create',
+        params: {},
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(true);
+    });
+
+    it('should return false on the Workspaces list page', () => {
+      const wrapper = createWrapper({
+        name:   'c-cluster-fleet-application-resource',
+        path:   '/c/local/fleet/application/management.cattle.io.fleetworkspace',
+        params: { resource: 'management.cattle.io.fleetworkspace' },
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(false);
+    });
+
+    it('should return false on a non-workspace resource list page', () => {
+      const wrapper = createWrapper({
+        name:   'c-cluster-fleet-application-resource',
+        path:   '/c/local/fleet/application/fleet.cattle.io.cluster',
+        params: { resource: 'fleet.cattle.io.cluster' },
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(false);
+    });
+
+    it('should return true on an edit page (route has an id param)', () => {
+      const wrapper = createWrapper({
+        name:   'c-cluster-fleet-application-resource-namespace-id',
+        path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo/fleet-default/my-repo?mode=edit',
+        params: {
+          resource: 'fleet.cattle.io.gitrepo', namespace: 'fleet-default', id: 'my-repo'
+        },
+      });
+
+      expect((wrapper.vm as any).disableWorkspaceSwitcher).toBe(true);
+    });
+  });
+
+  describe('showFilter', () => {
+    it('should return true on a list page when showWorkspaceSwitcher is enabled', () => {
+      const wrapper = createWrapper(
+        {
+          name:   'c-cluster-fleet-application-resource',
+          path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo',
+          params: { resource: 'fleet.cattle.io.gitrepo' },
+        },
+        { currentProduct: { showWorkspaceSwitcher: true } },
+      );
+
+      expect((wrapper.vm as any).showFilter).toBe(true);
+    });
+
+    it('should return true when showWorkspaceSwitcher is enabled on a detail page (switcher visible but disabled)', () => {
+      const wrapper = createWrapper(
+        {
+          name:   'c-cluster-fleet-application-resource-namespace-id',
+          path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo/fleet-default/my-repo',
+          params: {
+            resource: 'fleet.cattle.io.gitrepo', namespace: 'fleet-default', id: 'my-repo'
+          },
+        },
+        { currentProduct: { showWorkspaceSwitcher: true } },
+      );
+
+      expect((wrapper.vm as any).showFilter).toBe(true);
+    });
+
+    it('should return true when showWorkspaceSwitcher is enabled on a create page (switcher visible but disabled)', () => {
+      const wrapper = createWrapper(
+        {
+          name:   'c-cluster-fleet-application-resource-create',
+          path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo/create',
+          params: { resource: 'fleet.cattle.io.gitrepo' },
+        },
+        { currentProduct: { showWorkspaceSwitcher: true } },
+      );
+
+      expect((wrapper.vm as any).showFilter).toBe(true);
+    });
+
+    it('should return false when showWorkspaceSwitcher is false in the store (e.g. Workspaces page)', () => {
+      const wrapper = createWrapper(
+        {
+          name:   'c-cluster-fleet-application-resource',
+          path:   '/c/local/fleet/application/management.cattle.io.fleetworkspace',
+          params: { resource: 'management.cattle.io.fleetworkspace' },
+        },
+        {
+          currentProduct:        { showWorkspaceSwitcher: true },
+          showWorkspaceSwitcher: false,
+        },
+      );
+
+      expect((wrapper.vm as any).showFilter).toBe(false);
+    });
+
+    it('should return true when showNamespaceFilter is enabled regardless of route', () => {
+      const wrapper = createWrapper(
+        {
+          name:   'c-cluster-fleet-application-resource-namespace-id',
+          path:   '/c/local/fleet/application/fleet.cattle.io.gitrepo/fleet-default/my-repo',
+          params: {
+            resource: 'fleet.cattle.io.gitrepo', namespace: 'fleet-default', id: 'my-repo'
+          },
+        },
+        { currentCluster: { id: 'local' }, currentProduct: { showNamespaceFilter: true } },
+      );
+
+      expect((wrapper.vm as any).showFilter).toBe(true);
+    });
+  });
+});

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,128 @@ 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: {},
+              $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: {},
+              $store: store
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(true);
+      });
+    });
+  });
 });

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

@@ -28,10 +28,10 @@ describe('component: Type', () => {
     };
     const routerMock = {
       resolve: jest.fn((route) => {
-        return { fullPath: route };
+        return { fullPath: route, path: route };
       })
     };
-    const routeMock = { fullPath: 'route' };
+    const routeMock = { fullPath: 'route', path: 'route' };
 
     describe('should pass props correctly', () => {
       it('should forward Type props to router-link', () => {
@@ -104,7 +104,7 @@ describe('component: Type', () => {
             directives: { cleanHtml: (identity) => identity },
 
             mocks: {
-              $store: storeMock, $router: routerMock, $route: { fullPath: 'bad' }
+              $store: storeMock, $router: routerMock, $route: { fullPath: 'bad', path: 'bad' }
             },
             stubs: { routerLink: createChildRenderingRouterLinkStub() },
           },
@@ -152,6 +152,23 @@ describe('component: Type', () => {
 
         expect(elementWithSelector.exists()).toBe(false);
       });
+      it('should use active and exact active classes when route matches but includes query and hash', () => {
+        const wrapper = shallowMount(Type as any, {
+          props: { type: defaultRouteTypeProp, highlightRoute: true },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: {
+              $store: storeMock, $router: routerMock, $route: { fullPath: 'route?repo=test#myhash', path: 'route' }
+            },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isExactActive: true }) },
+          },
+        });
+
+        expect(wrapper.find(`.${ activeClass }`).exists()).toBe(true);
+        expect(wrapper.find(`.${ exactActiveClass }`).exists()).toBe(true);
+      });
     });
 
     describe('should use classes if preconditions are met', () => {