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

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;

package/components/templates/plain.vue

@@ -14,7 +14,6 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { 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 {
@@ -31,17 +30,17 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     Inactivity,
-    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   data() {
     return {
       // 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,
-      layout:           Layout.plain,
+      noLocaleShortcut: process.env.dev || false
     };
   },
 
@@ -50,6 +49,10 @@ export default {
     ...mapGetters(['showTopLevelMenu']),
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.plain);
+  },
+
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
@@ -98,7 +101,12 @@ export default {
           @shortkey="toggleNoneLocale()"
         />
       </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-plain"
+        style="display: contents;"
+      />
     </div>
 
     <FixedBanner :footer="true" />
@@ -130,27 +138,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;

package/composables/useLabeledFormElement.ts

@@ -6,7 +6,7 @@ import { _VIEW, _EDIT } from '@shell/config/query-params';
 
 interface LabeledFormElementProps {
   mode: string;
-  value: string | number | Record<string, any>
+  value: string | number | Record<string, any> | null
   required: boolean;
   disabled: boolean;
   rules: Array<any>;
@@ -18,6 +18,8 @@ interface UseLabeledFormElement {
   focused: Ref<boolean>;
   blurred: Ref<number | null>;
   requiredField: ComputedRef<any>;
+  empty: ComputedRef<boolean>;
+  isView: ComputedRef<boolean>;
   isDisabled: ComputedRef<any>;
   validationMessage: ComputedRef<any>;
   onFocusLabeled: () => void;
@@ -46,7 +48,7 @@ export const labeledFormElementProps = {
     default: null
   },
   value: {
-    type:    [String, Number, Object],
+    type:    [String, Number, Object, null],
     default: ''
   },
   mode: {
@@ -82,6 +84,10 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: Emit
     return props.required || props.rules?.some((rule: any) => rule?.name === 'required');
   });
 
+  const empty = computed(() => {
+    return !!`${ props.value }`;
+  });
+
   const isView = computed(() => {
     return props.mode === _VIEW;
   });
@@ -143,6 +149,8 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: Emit
     raised,
     focused,
     blurred,
+    empty,
+    isView,
     onFocusLabeled,
     onBlurLabeled,
     isDisabled,

package/composables/useLabeledSelect.ts

@@ -0,0 +1,60 @@
+import { computed, ComputedRef, Ref, nextTick } from 'vue';
+import { getWidth, setWidth } from '@shell/utils/width';
+
+interface LabeledSelectProps {
+  options?: Array<any>;
+  searchable?: boolean;
+  filterable?: boolean;
+}
+
+interface UseLabeledSelect {
+  isSearchable: ComputedRef<boolean>;
+  isFilterable: ComputedRef<boolean>;
+  resizeHandler: (selectRef: Ref<HTMLElement | null>) => void;
+}
+
+export const useLabeledSelect = (props: LabeledSelectProps, canPaginate?: ComputedRef<boolean>): UseLabeledSelect => {
+  const isSearchable = computed(() => {
+    if (canPaginate?.value) {
+      return true;
+    }
+    const options = props.options || [];
+
+    if (props.searchable || options.length >= 10) {
+      return true;
+    }
+
+    return false;
+  });
+
+  const isFilterable = computed(() => {
+    if (canPaginate?.value) {
+      return false;
+    }
+
+    return props.filterable ?? true;
+  });
+
+  const resizeHandler = (selectRef: Ref<HTMLElement | null>) => {
+    // since the DD is positioned there is no way to 'inherit' the size of the input, this calcs the size of the parent and set the dd width if it is smaller. If not let it grow with the regular styles
+    nextTick(() => {
+      if (!selectRef.value) {
+        return;
+      }
+
+      const DD = selectRef.value.querySelector('ul.vs__dropdown-menu');
+      const selectWidth = getWidth(selectRef.value) || 0;
+      const dropWidth = getWidth(DD as Element) || 0;
+
+      if (dropWidth < selectWidth) {
+        setWidth(DD as Element, selectWidth);
+      }
+    });
+  };
+
+  return {
+    isSearchable,
+    isFilterable,
+    resizeHandler
+  };
+};