@rancher/shell 3.0.11 → 3.0.12-rc.2

package/components/form/__tests__/PrivateRegistry.test.ts

@@ -0,0 +1,133 @@
+import { shallowMount } from '@vue/test-utils';
+import PrivateRegistry from '@shell/components/form/PrivateRegistry.vue';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+const defaultMocks = {
+  $store: {
+    getters: {
+      'i18n/t': (text: string) => text,
+      t:        (text: string) => text,
+    }
+  }
+};
+
+const mountPrivateRegistry = (props = {}) => {
+  return shallowMount(PrivateRegistry, {
+    props: {
+      mode: 'edit',
+      ...props
+    },
+    global: { mocks: defaultMocks }
+  });
+};
+
+describe('privateRegistry', () => {
+  it('should render the info banner', () => {
+    const wrapper = mountPrivateRegistry();
+    const banner = wrapper.find('[color="info"]');
+
+    expect(banner.exists()).toBe(true);
+  });
+
+  it('should render the enable checkbox', () => {
+    const wrapper = mountPrivateRegistry();
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    expect(checkbox.exists()).toBe(true);
+  });
+
+  it('should not show the URL input when no value is provided', () => {
+    const wrapper = mountPrivateRegistry();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(false);
+  });
+
+  it('should show the URL input when a value is provided', () => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(true);
+  });
+
+  it('should show the URL input when checkbox is checked', async() => {
+    const wrapper = mountPrivateRegistry();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(false);
+
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', true);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(true);
+  });
+
+  it('should emit update:value with null when checkbox is unchecked', async() => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    await checkbox.vm.$emit('update:value', false);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')![0]).toStrictEqual([null]);
+  });
+
+  it('should emit update:value when the URL input changes', async() => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+    const input = wrapper.findComponent(LabeledInput);
+
+    await input.vm.$emit('update:value', 'new-registry.example.com');
+
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')![0]).toStrictEqual(['new-registry.example.com']);
+  });
+
+  it('should auto-enable the checkbox when value changes from null to a string', async() => {
+    const wrapper = mountPrivateRegistry();
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(false);
+
+    await wrapper.setProps({ value: 'registry.example.com' });
+
+    expect(wrapper.findComponent(LabeledInput).exists()).toBe(true);
+  });
+
+  it('should pass rules to the URL input', () => {
+    const mockRule = jest.fn();
+    const wrapper = mountPrivateRegistry({
+      value: 'registry.example.com',
+      rules: [mockRule]
+    });
+    const input = wrapper.findComponent(LabeledInput);
+
+    expect(input.attributes('rules')).toBeDefined();
+  });
+
+  it('should apply custom data-testid to checkbox when provided', () => {
+    const wrapper = mountPrivateRegistry({ checkboxTestId: 'my-checkbox' });
+    const checkbox = wrapper.findComponent(Checkbox);
+
+    expect(checkbox.attributes('data-testid')).toBe('my-checkbox');
+  });
+
+  it('should apply custom data-testid to input when provided', () => {
+    const wrapper = mountPrivateRegistry({
+      value:       'registry.example.com',
+      inputTestId: 'my-input'
+    });
+    const input = wrapper.findComponent(LabeledInput);
+
+    expect(input.attributes('data-testid')).toBe('my-input');
+  });
+
+  it('should not set data-testid when not provided', () => {
+    const wrapper = mountPrivateRegistry({ value: 'registry.example.com' });
+    const checkbox = wrapper.findComponent(Checkbox);
+    const input = wrapper.findComponent(LabeledInput);
+
+    expect(checkbox.attributes('data-testid')).toBeUndefined();
+    expect(input.attributes('data-testid')).toBeUndefined();
+  });
+});

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/formatter/WorkloadHealthScale.vue

@@ -67,7 +67,9 @@ export default {
           color: `bg-${ value.color }`,
           value: value.count || 0,
           label: ucFirst(name)
-        })).filter((x) => x.value > 0);
+        }))
+        .filter((x) => x.value > 0)
+        .sort((a, b) => a.label.localeCompare(b.label));
 
       return 5;
     },

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;
           }
         }
@@ -269,8 +270,9 @@ export default {
         @keyup.space="groupSelected()"
       >
         <slot name="header">
+          <!-- Group overview with link -->
           <router-link
-            v-if="hasOverview"
+            v-if="hasOverview && hasChildren"
             :to="headerRoute"
             :exact="group.children[0].exact"
             :tabindex="-1"
@@ -279,15 +281,32 @@ export default {
               <span v-clean-html="group.labelDisplay || group.label" />
             </h6>
           </router-link>
+          <!-- Non-linked group header -->
           <h6
-            v-else
+            v-else-if="hasChildren"
           >
             <span v-clean-html="group.labelDisplay || group.label" />
           </h6>
+          <!-- Simple child (nav item) -->
+          <ul
+            v-else
+            class="list-unstyled body root-depth"
+            v-bind="$attrs"
+          >
+            <Type
+
+              :key="id+'_' + group.name + '_type'"
+              :is-root="depth == 0 && !showHeader"
+              :type="group"
+              :depth="depth"
+              :highlight-route="highlightRoute"
+              @selected="selectType($event)"
+            />
+          </ul>
         </slot>
       </div>
       <i
-        v-if="!onlyHasOverview && canCollapse"
+        v-if="!onlyHasOverview && canCollapse && hasChildren"
         class="icon toggle toggle-accordion"
         :class="{'icon-chevron-right': !isExpanded, 'icon-chevron-down': isExpanded}"
         role="button"
@@ -377,6 +396,7 @@ export default {
       display: block;
       box-sizing:border-box;
       height: 100%;
+
       &:hover{
         text-decoration: none;
       }
@@ -484,6 +504,10 @@ export default {
           }
         }
       }
+
+      .root-depth :deep() > .child.nav-type a {
+        padding-left: 14px;
+      }
     }
 
     &.depth-1 {

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';
     },
@@ -203,12 +221,6 @@ export default {
       return !!this.currentCluster?.actions?.apply;
     },
 
-    prod() {
-      const name = this.rootProduct.name;
-
-      return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
-    },
-
     showSearch() {
       return this.rootProduct?.inStore === 'cluster';
     },
@@ -239,6 +251,30 @@ export default {
     isHarvester() {
       return this.$store.getters['currentProduct'].inStore === HARVESTER;
     },
+
+    productLabel() {
+      const name = this.rootProduct.name;
+
+      // single products do their own thing, which is the previous default behavior as per next line
+      if (this.isSingleProduct) {
+        return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
+      } else {
+        if (this.rootProduct?.label) {
+          return this.rootProduct.label;
+        }
+        if (this.rootProduct?.labelKey) {
+          return this.$store.getters['i18n/t'](this.rootProduct.labelKey);
+        }
+
+        return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
+      }
+    },
+
+    // Determine if we are on a route that shows the logo instead of the product label
+    // This is to enforce the logo display on certain routes like home, about, prefs, account, etc
+    isLogoRoute() {
+      return !this.$route.name.includes('c-cluster');
+    }
   },
 
   watch: {
@@ -518,7 +554,7 @@ export default {
           :alt="t('branding.logos.label')"
         >
         <div class="product-name">
-          {{ prod }}
+          {{ productLabel }}
         </div>
       </div>
     </div>
@@ -534,6 +570,13 @@ export default {
         {{ t(isSingleProduct.productNameKey) }}
       </div>
 
+      <div
+        v-else-if="productLabel && !isLogoRoute"
+        class="product-name"
+      >
+        {{ productLabel }}
+      </div>
+
       <div
         v-else
         class="side-menu-logo"
@@ -556,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/TopLevelMenu.vue

@@ -186,8 +186,22 @@ export default {
           to.params.product = p.name;
         }
 
+        let label;
+
+        // Allow product to specify its label (old DSL product() did not have "label" or "labelKey")
+        // new extensions product registration supports both "label" and "labelKey" (with "labelKey" taking precedence if both are provided)
+        if (p.labelKey) {
+          label = this.$store.getters['i18n/t'](p.labelKey);
+        } else if (p.label) {
+          label = p.label;
+        }
+
+        if (!label) {
+          label = this.$store.getters['i18n/withFallback'](`product.${ p.name }`, null, ucFirst(p.name));
+        }
+
         return {
-          label:             this.$store.getters['i18n/withFallback'](`product."${ p.name }"`, null, ucFirst(p.name)),
+          label,
           icon:              `icon-${ p.icon || 'copy' }`,
           svg:               p.svg,
           value:             p.name,