@rancher/shell 3.0.11 → 3.0.12-rc.2

package/components/nav/Type.vue

@@ -68,8 +68,9 @@ export default {
     },
 
     isActive() {
-      const typeFullPath = this.$router.resolve(this.typeRoute)?.fullPath.toLowerCase();
-      const pageFullPath = this.$route.fullPath?.toLowerCase().split('#')[0]; // Ignore the shebang when comparing routes
+      // Use .path instead of .fullPath to ignore query parameters and hashes when comparing routes
+      const typePath = this.$router.resolve(this.typeRoute)?.path.toLowerCase();
+      const pagePath = this.$route.path?.toLowerCase();
       const routeMetaNav = this.$route.meta?.nav;
 
       // If the route explicitly declares the nav path that should be highlighted, then use that
@@ -80,14 +81,14 @@ export default {
           .replace(':cluster', cluster)
           .replace(':product', product);
 
-        if (navPath === typeFullPath) {
+        if (navPath === typePath) {
           return true;
         }
       }
 
       if ( !this.type.exact) {
-        const typeSplit = typeFullPath.split('/');
-        const pageSplit = pageFullPath.split('/');
+        const typeSplit = typePath.split('/');
+        const pageSplit = pagePath.split('/');
 
         for (let index = 0; index < typeSplit.length; ++index) {
           if ( index >= pageSplit.length || typeSplit[index] !== pageSplit[index] ) {
@@ -98,7 +99,7 @@ export default {
         return true;
       }
 
-      return typeFullPath === pageFullPath;
+      return typePath === pagePath;
     },
 
     typeRoute() {
@@ -131,7 +132,7 @@ export default {
   <router-link
     v-if="type.route"
     :key="type.name"
-    v-slot="{ href, navigate,isExactActive }"
+    v-slot="{ href, navigate, isExactActive }"
     custom
     :to="typeRoute"
   >

package/components/nav/WindowManager/index.vue

@@ -36,7 +36,7 @@ const props = defineProps({
 
 const { loadComponent } = useComponentsMount();
 
-const { isPanelEnabled } = usePanelsHandler({ layout: props.layout, positions: props.positions });
+const { isPanelEnabled } = usePanelsHandler(props);
 const { tabs } = useTabsHandler();
 </script>
 
@@ -66,6 +66,7 @@ const { tabs } = useTabsHandler();
         :active="true"
         :height="tab.containerHeight"
         :width="tab.containerWidth"
+        :layout="layout"
         v-bind="tab.attrs"
       />
     </keep-alive>

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__/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', () => {

package/components/templates/default.vue

@@ -9,7 +9,6 @@ import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
 import ModalManager from '@shell/components/ModalManager';
 import SlideInPanelManager from '@shell/components/SlideInPanelManager';
-import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
 import PromptModal from '@shell/components/PromptModal';
@@ -39,7 +38,6 @@ export default {
     GrowlManager,
     ModalManager,
     SlideInPanelManager,
-    WindowManager,
     FixedBanner,
     AwsComplianceBanner,
     Inactivity,
@@ -48,10 +46,11 @@ export default {
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   // Note - This will not run on route change
   data() {
     return {
-      layout:           Layout.default,
       noLocaleShortcut: process.env.dev || false,
       wantNavSync:      false,
     };
@@ -104,6 +103,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.default);
+  },
+
   methods: {
 
     handlePageAction(action) {
@@ -159,6 +162,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <AwsComplianceBanner v-if="managementReady" />
     <div
@@ -173,8 +180,10 @@ export default {
       />
       <main
         v-if="clusterAndRouteReady"
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.default')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
@@ -211,15 +220,22 @@ export default {
       <!-- Ensure there's an outlet to show the error (404) page -->
       <main
         v-else-if="unmatchedRoute"
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.default')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
           class="outlet"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-default"
+        style="display: contents;"
+      />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
@@ -227,3 +243,17 @@ export default {
     <Inactivity />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.skip-to-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  transform: translateY(-100%);
+
+  &:focus {
+    transform: translate(1rem, 1rem);
+  }
+}
+</style>

package/components/templates/home.vue

@@ -11,7 +11,6 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
-import WindowManager from '@shell/components/nav/WindowManager';
 import { Layout } from '@shell/types/window-manager';
 
 export default {
@@ -25,14 +24,14 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     PromptModal,
-    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   data() {
     return {
-      layout:           Layout.home,
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
       noLocaleShortcut: process.env.dev || false,
@@ -45,6 +44,10 @@ export default {
     ...mapGetters(['showTopLevelMenu']),
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.home);
+  },
+
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
@@ -82,7 +85,12 @@ export default {
           class="outlet"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-home"
+        style="display: contents;"
+      />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
@@ -125,27 +133,6 @@ export default {
     }
   }
 
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vr {
-    grid-area: wm-vr;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vl {
-    grid-area: wm-vl;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
   MAIN {
     grid-area: main;
     overflow: auto;