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

package/components/formatter/__tests__/FleetSummaryGraph.test.ts

@@ -0,0 +1,216 @@
+import { shallowMount } from '@vue/test-utils';
+import FleetSummaryGraph from '@shell/components/formatter/FleetSummaryGraph.vue';
+import { FLEET } from '@shell/config/types';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const FleetSummaryGraphComponent = FleetSummaryGraph as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>;
+
+function makeRow({
+  type = FLEET.GIT_REPO,
+  resourceCounts = {},
+  targetClusters = [],
+  statusResourceCountsForCluster = undefined,
+}: {
+  type?: string;
+  resourceCounts?: Record<string, number>;
+  targetClusters?: any[];
+  statusResourceCountsForCluster?: any;
+} = {}) {
+  const row: Record<string, any> = {
+    id:     'test-ns/test-row',
+    type,
+    status: { resourceCounts },
+    targetClusters,
+  };
+
+  if (statusResourceCountsForCluster !== undefined) {
+    row.statusResourceCountsForCluster = statusResourceCountsForCluster;
+  }
+
+  return row;
+}
+
+describe('component: FleetSummaryGraph', () => {
+  describe('summary', () => {
+    it('returns status.resourceCounts for GitRepo rows', () => {
+      const resourceCounts = {
+        desiredReady: 7,
+        ready:        7,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts,
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(resourceCounts);
+    });
+
+    it('returns status.resourceCounts for HelmOp rows', () => {
+      const resourceCounts = {
+        desiredReady: 3,
+        ready:        2,
+        modified:     1,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            type:           FLEET.HELM_OP,
+            resourceCounts,
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(resourceCounts);
+    });
+
+    it('does not return function when row has statusResourceCountsForCluster as a method', () => {
+      const resourceCounts = {
+        desiredReady: 5,
+        ready:        5,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts,
+            targetClusters:                 [{ id: 'cluster-1' }],
+            // Simulate a class method — the bug was that a truthy function
+            // caused summary to return the function itself instead of resourceCounts
+            statusResourceCountsForCluster: (clusterId: string) => ({ desiredReady: 0 }),
+          }),
+        },
+      });
+
+      const summary = (wrapper.vm as any).summary;
+
+      expect(typeof summary).not.toBe('function');
+      expect(summary).toStrictEqual(resourceCounts);
+    });
+
+    it('calls statusResourceCountsForCluster with clusterId when clusterId prop is set', () => {
+      const perClusterData = {
+        desiredReady: 2,
+        ready:        1,
+      };
+      const mockFn = jest.fn().mockReturnValue(perClusterData);
+
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row:       makeRow({ statusResourceCountsForCluster: mockFn }),
+          clusterId: 'cluster-1',
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(perClusterData);
+      expect(mockFn).toHaveBeenCalledWith('cluster-1');
+    });
+
+    it('returns empty object when status.resourceCounts is undefined', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, { propsData: { row: makeRow() } });
+
+      expect((wrapper.vm as any).summary).toStrictEqual({});
+    });
+  });
+
+  describe('show', () => {
+    it('returns true when stateParts exist and row has targetClusters', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeTruthy();
+    });
+
+    it('returns false when stateParts exist but targetClusters is empty', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeFalsy();
+    });
+
+    it('returns true for FLEET.CLUSTER type even without targetClusters', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            type:           FLEET.CLUSTER,
+            resourceCounts: {
+              desiredReady: 3,
+              ready:        3,
+            },
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeTruthy();
+    });
+
+    it('returns false when resourceCounts is empty', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, { propsData: { row: makeRow({ targetClusters: [{ id: 'cluster-1' }] }) } });
+
+      expect((wrapper.vm as any).show).toBeFalsy();
+    });
+  });
+
+  describe('stateParts', () => {
+    it('filters out keys starting with "desired"', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      const parts = (wrapper.vm as any).stateParts;
+
+      expect(parts.every((p: any) => !p.label.startsWith('Desired'))).toBe(true);
+    });
+
+    it('filters out entries with value 0', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+              notReady:     0,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      const parts = (wrapper.vm as any).stateParts;
+      const labels = parts.map((p: any) => p.label);
+
+      expect(labels).toContain('Ready');
+      expect(labels).not.toContain('NotReady');
+    });
+  });
+});

package/components/formatter/__tests__/PodsUsage.test.ts

@@ -7,11 +7,9 @@ describe('component: PodsUsage', () => {
       props: {
         row: {
           isReady: true,
-          mgmt:    {
-            status: {
-              requested:   { pods: 10 },
-              allocatable: { pods: 20 }
-            }
+          status:  {
+            requested:   { pods: 10 },
+            allocatable: { pods: 20 }
           }
         }
       },
@@ -28,11 +26,9 @@ describe('component: PodsUsage', () => {
       props: {
         row: {
           isReady: true,
-          mgmt:    {
-            status: {
-              requested:   { pods: 10 },
-              allocatable: { pods: 0 }
-            }
+          status:  {
+            requested:   { pods: 10 },
+            allocatable: { pods: 0 }
           }
         }
       },

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/NamespaceFilter.vue

@@ -1005,8 +1005,8 @@ export default {
     .ns-filter-clear {
       cursor: pointer;
       position: absolute;
-      right: 10px;
-      top: 10px;
+      right: 12px;
+      top: 5px;
       line-height: 24px;
       text-align: center;
       width: 14px;

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.helper.ts

@@ -35,7 +35,18 @@ interface UpdateArgs {
 }
 
 type MgmtCluster = {
-  [key: string]: any
+  [key: string]: any,
+  id: string,
+  nameDisplay: string,
+  canExplore: boolean,
+  providerMenuLogo: string,
+  badge: string,
+  iconColor: string,
+  isLocal: boolean,
+  pinned: boolean,
+  description: string,
+  pin: () => void
+  unpin: () => void
 }
 
 type ProvCluster = {
@@ -148,7 +159,8 @@ export abstract class BaseTopLevelMenuHelper {
     return {
       id:              mgmtCluster.id,
       label:           mgmtCluster.nameDisplay,
-      ready:           mgmtCluster.isReady,
+      // Align side nav cluster, home page name link and cluster management cluster explore buttons on canExplore
+      ready:           mgmtCluster.canExplore,
       providerNavLogo: mgmtCluster.providerMenuLogo,
       badge:           mgmtCluster.badge,
       iconColor:       mgmtCluster.iconColor,
@@ -488,7 +500,7 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
     const maxClustersToShow = args.unPinnedMax || 10;
 
     const search = (clusterFilter || '').toLowerCase();
-    let localCluster: MgmtCluster | null = null;
+    let localCluster: TopLevelMenuCluster | null = null;
 
     const filtered = clusters.filter((c) => {
       // If we're searching we don't care if pinned or not

package/components/nav/TopLevelMenu.vue

@@ -98,6 +98,17 @@ export default {
       return count?.summary.count;
     },
 
+    routeComboActive() {
+      if (!this.routeCombo) {
+        return false;
+      }
+
+      const ready = [...this.appBar.pinFiltered, ...this.appBar.clustersFiltered].filter((c) => c.ready);
+      const readyCount = ready.length;
+
+      return readyCount > 1 || (readyCount === 1 && this.clusterId !== ready[0].id);
+    },
+
     // New
     search() {
       return (this.clusterFilter || '').toLowerCase();
@@ -386,7 +397,7 @@ export default {
     },
 
     clusterMenuClick(ev, cluster) {
-      if (this.routeCombo) {
+      if (this.routeComboActive) {
         ev.preventDefault();
 
         if (this.isCurrRouteClusterExplorer && this.productFromRoute === this.currentProduct?.name) {
@@ -423,7 +434,7 @@ export default {
     },
 
     async goToHarvesterCluster() {
-      const localCluster = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((C) => C.id === 'fleet-local/local');
+      const localCluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, 'fleet-local/local');
 
       try {
         await localCluster.goToHarvesterCluster();
@@ -446,7 +457,7 @@ export default {
         content = this.shown ? null : contentText;
 
       // if key combo is pressed, then we update the tooltip as well
-      } else if (this.routeCombo &&
+      } else if (this.routeComboActive &&
         typeof item === 'object' &&
         !Array.isArray(item) &&
         item !== null &&
@@ -706,7 +717,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div
@@ -785,7 +796,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div

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>