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

package/components/form/labeled-select-utils/useLabeledSelectPagination.ts

@@ -0,0 +1,138 @@
+/**
+ * composable to provide pagination support to LabeledSelect
+ */
+import {
+  ref, computed, onMounted, ComputedRef, Ref, PropType
+} from 'vue';
+import { useStore } from 'vuex';
+import { debounce } from 'lodash';
+import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
+
+interface LabeledSelectPaginationProps {
+  paginate?: LabelSelectPaginateFn | null;
+  inStore?: string;
+  resourceType?: string | null;
+  options?: Array<any>;
+}
+
+interface UseLabeledSelectPagination {
+  canPaginate: ComputedRef<boolean>;
+  canLoadMore: ComputedRef<boolean>;
+  optionCounts: ComputedRef<string>;
+  _options: ComputedRef<any[]>;
+  pages: Ref<number>;
+  totalResults: Ref<number>;
+  paginating: Ref<boolean>;
+  loadMore: () => void;
+  setPaginationFilter: (filter: string) => void;
+}
+
+export const labeledSelectPaginationProps = {
+  paginate: {
+    default: null,
+    type:    Function as PropType<LabelSelectPaginateFn>,
+  },
+
+  inStore: {
+    type:    String,
+    default: 'cluster',
+  },
+
+  /**
+   * Resource to show
+  */
+  resourceType: {
+    type:    String,
+    default: null,
+  },
+};
+
+export const useLabeledSelectPagination = (props: LabeledSelectPaginationProps): UseLabeledSelectPagination => {
+  const store = useStore();
+
+  // Internal
+  const currentPage = ref(1);
+  const search = ref('');
+  const pageSize = ref(10);
+  const pages = ref(0);
+
+  // External
+  const page = ref<any[]>([]);
+  const totalResults = ref(0);
+  const paginating = ref(false);
+
+  const canPaginate = computed(() => {
+    return !!props.paginate && !!props.resourceType && store.getters[`${ props.inStore }/paginationEnabled`](props.resourceType);
+  });
+
+  const _options = computed(() => canPaginate.value ? page.value : (props.options || []));
+
+  const canLoadMore = computed(() => pages.value > currentPage.value);
+
+  const optionsInPage = computed(() => {
+    // Number of genuine options (not groups, dividers, etc)
+    return canPaginate.value ? _options.value.filter((o: any) => {
+      return o.kind !== LABEL_SELECT_KINDS.NONE && !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind);
+    }).length : 0;
+  });
+
+  const optionCounts = computed(() => {
+    if (!canPaginate.value || optionsInPage.value === totalResults.value) {
+      return '';
+    }
+
+    return store.getters['i18n/t']('labelSelect.pagination.counts', {
+      count:      optionsInPage.value,
+      totalCount: totalResults.value
+    });
+  });
+
+  const requestPagination = async(resetPage = false) => {
+    paginating.value = true;
+
+    const { page: p, pages: pg, total } = await (props.paginate as LabelSelectPaginateFn)({
+      resetPage,
+      pageContent: page.value || [],
+      page:        currentPage.value,
+      filter:      search.value,
+      pageSize:    pageSize.value,
+    });
+
+    page.value = p;
+    pages.value = pg || 0;
+    totalResults.value = total || 0;
+    paginating.value = false;
+  };
+
+  const debouncedRequestPagination = debounce(requestPagination, 700);
+
+  const setPaginationFilter = (filter: string) => {
+    paginating.value = true; // Do this before debounce
+    currentPage.value = 1;
+    search.value = filter;
+    debouncedRequestPagination(true);
+  };
+
+  const loadMore = () => {
+    currentPage.value++;
+    requestPagination();
+  };
+
+  onMounted(async() => {
+    if (canPaginate.value) {
+      await requestPagination();
+    }
+  });
+
+  return {
+    canPaginate,
+    canLoadMore,
+    optionCounts,
+    _options,
+    pages,
+    totalResults,
+    paginating,
+    loadMore,
+    setPaginationFilter,
+  };
+};

package/components/nav/Group.vue

@@ -82,7 +82,8 @@ export default {
           const validRoute = filterLocationValidParams(this.$router, overviewRoute || {});
           const route = this.$router.resolve(validRoute);
 
-          return this.$route.fullPath.split('#')[0] === route?.fullPath;
+          // Use .path instead of .fullPath to ignore query parameters and hashes when comparing routes
+          return this.$route.path === route?.path;
         }
       }
 
@@ -204,14 +205,14 @@ export default {
         } else if (item.route) {
           const navLevels = ['cluster', 'product', 'resource'];
           const matchesNavLevel = navLevels.filter((param) => !this.$route.params[param] || this.$route.params[param] !== item.route.params[param]).length === 0;
-          const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
-          const withoutQuery = withoutHash.split('?')[0];
           const validItemRoute = filterLocationValidParams(this.$router, item.route);
-          const itemFullPath = this.$router.resolve(validItemRoute).fullPath;
 
-          if (matchesNavLevel || itemFullPath === withoutQuery) {
+          // Use .path instead of .fullPath to ignore query parameters and hashes when comparing routes
+          const itemPath = this.$router.resolve(validItemRoute).path;
+
+          if (matchesNavLevel || itemPath === this.$route.path) {
             return true;
-          } else if (parentPath && itemFullPath === parentPath) {
+          } else if (parentPath && itemPath === parentPath) {
             return true;
           }
         }

package/components/nav/Header.vue

@@ -189,12 +189,30 @@ export default {
                  (this.currentProduct && this.currentProduct.showWorkspaceSwitcher);
       // Don't show if the header is in 'simple' mode
       const notSimple = !this.simple;
-      // One of these must be enabled, otherwise t here's no component to show
-      const validFilterSettings = this.currentProduct?.showNamespaceFilter || this.currentProduct?.showWorkspaceSwitcher;
+      // One of these must be enabled, otherwise there's no component to show
+      const validFilterSettings = this.currentProduct?.showNamespaceFilter || this.showWorkspaceSwitcher;
 
       return validClusterOrProduct && notSimple && validFilterSettings;
     },
 
+    /**
+     * The workspace switcher should be disabled on detail, edit and create pages.
+     * Only list pages should allow changing the workspace.
+     */
+    disableWorkspaceSwitcher() {
+      // Disable on detail/edit pages (route has an id param)
+      if (this.$route?.params?.id) {
+        return true;
+      }
+
+      // Disable on create pages (route names end with '-create')
+      if (this.$route?.name?.endsWith('-create')) {
+        return true;
+      }
+
+      return false;
+    },
+
     featureRancherDesktop() {
       return this.$config.rancherEnv === 'desktop';
     },
@@ -581,7 +599,10 @@ export default {
         class="top"
       >
         <NamespaceFilter v-if="clusterReady && currentProduct && (currentProduct.showNamespaceFilter || isExplorer)" />
-        <WorkspaceSwitcher v-else-if="clusterReady && currentProduct && currentProduct.showWorkspaceSwitcher && showWorkspaceSwitcher" />
+        <WorkspaceSwitcher
+          v-else-if="clusterReady && showWorkspaceSwitcher"
+          :disabled="disableWorkspaceSwitcher"
+        />
       </div>
       <div
         v-if="currentCluster && !simple"

package/components/nav/NotificationCenter/Notification.vue

@@ -246,7 +246,10 @@ const findNewIndex = (shouldAdvance: boolean, activeIndex: number, itemsArr: Ele
             :class="clz"
           />
         </div>
-        <div class="item-title">
+        <div
+          v-clean-tooltip="item.title"
+          class="item-title"
+        >
           {{ item.title }}
         </div>
         <button

package/components/nav/NotificationCenter/NotificationHeader.vue

@@ -2,17 +2,19 @@
 import { useStore } from 'vuex';
 import { computed, inject, ref } from 'vue';
 import { DropdownContext, defaultContext } from '@components/RcDropdown/types';
+import RcButton from '@components/RcButton/RcButton.vue';
+import { RcButtonType } from '@components/RcButton/types';
 
 const { dropdownItems } = inject<DropdownContext>('dropdownContext') || defaultContext;
 const store = useStore();
 const unreadCount = computed<number>(() => store.getters['notifications/unreadCount']);
-const markAllReadButton = ref<HTMLElement>();
+const markAllReadButton = ref<RcButtonType | null>(null);
 
 const markAllRead = (keyboard: boolean) => {
   store.dispatch('notifications/markAllRead');
 
-  // If we have focus, then move to the next item if activated by the keyboard
-  if (keyboard && document.activeElement === markAllReadButton?.value) {
+  // If activated via keyboard, move focus to the next dropdown item
+  if (keyboard) {
     moveFocus(true);
   }
 };
@@ -65,18 +67,19 @@ const gotFocus = (e: Event) => {
         {{ t('notificationCenter.title') }}
       </div>
       <div v-if="unreadCount !== 0">
-        <a
+        <RcButton
           ref="markAllReadButton"
-          role="button"
+          variant="ghost"
+          size="small"
           tabindex="-1"
-          href="#"
+          class="mark-all-read"
           data-testid="notifications-center-markall-read"
           @keydown.up.down.stop.prevent="handleKeydown"
           @keydown.enter.space.stop="markAllRead(true)"
           @click="markAllRead(false)"
         >
           {{ t('notificationCenter.markAllRead') }}
-        </a>
+        </RcButton>
       </div>
     </div>
     <div class="notification-border" />
@@ -104,8 +107,17 @@ const gotFocus = (e: Event) => {
         flex: 1;
       }
 
-      A {
+      .mark-all-read {
+        padding: 0;
+        min-height: auto;
+        font-size: inherit;
+        line-height: inherit;
         color: var(--link);
+
+        &:hover {
+          color: var(--body-text);
+          text-decoration: underline;
+        }
       }
     }
   }

package/components/nav/NotificationCenter/__tests__/NotificationHeader.test.ts

@@ -0,0 +1,80 @@
+import { ref } from 'vue';
+import { mount, shallowMount } from '@vue/test-utils';
+import NotificationHeader from '@shell/components/nav/NotificationCenter/NotificationHeader.vue';
+import { defaultContext } from '@components/RcDropdown/types';
+
+const buildStore = (unreadCount = 1) => {
+  const dispatch = jest.fn();
+  const store = {
+    dispatch,
+    getters: { 'notifications/unreadCount': unreadCount },
+  };
+
+  return { store, dispatch };
+};
+
+const buildGlobal = (store: any) => ({
+  provide: {
+    store,
+    dropdownContext: { ...defaultContext, dropdownItems: ref<HTMLElement[]>([]) },
+  },
+  mocks: { $store: store },
+});
+
+jest.mock('vuex', () => ({ useStore: () => (globalThis as any).__testStore }));
+
+describe('component: NotificationHeader', () => {
+  afterEach(() => {
+    (globalThis as any).__testStore = undefined;
+  });
+
+  it('renders the mark all read action when there are unread notifications', () => {
+    const { store } = buildStore(3);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = shallowMount(NotificationHeader, { global: buildGlobal(store) });
+
+    expect(wrapper.find('[data-testid="notifications-center-markall-read"]').exists()).toBe(true);
+  });
+
+  it('hides the mark all read action when there are no unread notifications', () => {
+    const { store } = buildStore(0);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = shallowMount(NotificationHeader, { global: buildGlobal(store) });
+
+    expect(wrapper.find('[data-testid="notifications-center-markall-read"]').exists()).toBe(false);
+  });
+
+  it('dispatches notifications/markAllRead when clicked', async() => {
+    const { store, dispatch } = buildStore(2);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = mount(NotificationHeader, { global: buildGlobal(store) });
+
+    await wrapper.find('[data-testid="notifications-center-markall-read"]').trigger('click');
+
+    expect(dispatch).toHaveBeenCalledWith('notifications/markAllRead');
+  });
+
+  // Regression test for https://github.com/rancher/dashboard/issues/16923
+  // "Mark all as read" was originally an <a href="#"> which, on click, navigated
+  // to "#" and stripped any existing URL hash fragment (e.g. #pod). Rendering it
+  // as a <button> (via RcButton) removes the default navigation behavior entirely,
+  // so the URL hash is preserved and extensions scoped via LocationConfig.hash
+  // continue to match after activation.
+  it('renders mark all read as a <button> so activating it cannot strip the URL hash', () => {
+    const { store } = buildStore(2);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = mount(NotificationHeader, { global: buildGlobal(store) });
+    const markAll = wrapper.find('[data-testid="notifications-center-markall-read"]');
+
+    expect(markAll.element.tagName).toBe('BUTTON');
+    expect(markAll.attributes('href')).toBeUndefined();
+  });
+});

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);
+  });
+});