@rancher/shell 3.0.12-rc.6 → 3.0.12-rc.7

package/components/__tests__/SlideInPanelManager.spec.ts

@@ -5,7 +5,7 @@ import SlideInPanelManager from '@shell/components/SlideInPanelManager.vue';
 
 const MockComponent = {
   template: '<div data-testid="slide-in-panel-component">Mock Panel Content</div>',
-  props:    ['width', 'title', 'extraProp']
+  props:    ['title', 'extraProp']
 };
 
 describe('slideInPanelManager.vue with Teleport', () => {
@@ -23,7 +23,7 @@ describe('slideInPanelManager.vue with Teleport', () => {
       'slideInPanel/isOpen':         () => true,
       'slideInPanel/component':      () => MockComponent,
       'slideInPanel/componentProps': () => ({
-        width: '40%', title: 'Test Title', extraProp: 'extra'
+        width: 'default', title: 'Test Title', extraProp: 'extra'
       })
     };
 
@@ -61,15 +61,14 @@ describe('slideInPanelManager.vue with Teleport', () => {
 
     const styleAttr = slidePanel.getAttribute('style') || '';
 
-    expect(styleAttr).toContain('width: 40%');
+    expect(styleAttr).toContain('width: 33%');
     expect(styleAttr).toContain('top: 55px');
     expect(styleAttr).toContain('height: calc(100vh - 55px)');
     expect(styleAttr).toContain('right: 0');
   });
 
-  it('renders default panel title when no title is provided', async() => {
-    // Update getter so that no title is provided
-    getters['slideInPanel/componentProps'] = () => ({ width: '40%' });
+  it('hides header when no title is provided', async() => {
+    getters['slideInPanel/componentProps'] = () => ({});
     store = createStore({
       getters,
       mutations: { 'slideInPanel/close': jest.fn() }
@@ -77,9 +76,9 @@ describe('slideInPanelManager.vue with Teleport', () => {
     factory();
     await nextTick();
 
-    const headerTitle = document.querySelector('#slides #slide-in-panel-manager .header .title') as HTMLElement;
+    const header = document.querySelector('#slides #slide-in-panel-manager .header') as HTMLElement;
 
-    expect(headerTitle.textContent?.trim()).toBe('Details');
+    expect(header).toBeNull();
   });
 
   it('computes panelTop correctly when a banner exists', async() => {
@@ -122,8 +121,8 @@ describe('slideInPanelManager.vue with Teleport', () => {
     const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
     const styleAttr = slidePanel.getAttribute('style') || '';
 
-    // With currentProps width "40%", panelRight should be "-40%" when closed.
-    expect(styleAttr).toContain('right: -40%');
+    // With default width preset (33%), panelRight should be "-33%" when closed.
+    expect(styleAttr).toContain('right: -33%');
   });
 
   it('calls store commit when clicking on the slide-in glass overlay', async() => {
@@ -163,4 +162,148 @@ describe('slideInPanelManager.vue with Teleport', () => {
 
     expect(closeMutation).toHaveBeenCalledWith({}, undefined);
   });
+
+  describe('width preset', () => {
+    it('resolves width "wide" to 73%', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ width: 'wide', title: 'Test' });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+      const styleAttr = slidePanel.getAttribute('style') || '';
+
+      expect(styleAttr).toContain('width: 73%');
+    });
+
+    it('defaults to 33% when no width config is provided', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ title: 'Test' });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+      const styleAttr = slidePanel.getAttribute('style') || '';
+
+      expect(styleAttr).toContain('width: 33%');
+    });
+  });
+
+  describe('height preset', () => {
+    it('resolves height "full" to 100vh with top 0', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ height: 'full', title: 'Test' });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+      const styleAttr = slidePanel.getAttribute('style') || '';
+
+      expect(styleAttr).toContain('height: 100vh');
+      expect(styleAttr).toContain('top: 0');
+    });
+
+    it('applies elevated z-index when panelHeight is "full"', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ height: 'full', title: 'Test' });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+      const styleAttr = slidePanel.getAttribute('style') || '';
+
+      expect(styleAttr).toContain('z-index: 102');
+
+      const slideGlass = document.querySelector('[data-testid="slide-in-glass"]') as HTMLElement;
+      const glassStyle = slideGlass.getAttribute('style') || '';
+
+      expect(glassStyle).toContain('z-index: 101');
+    });
+
+    it('does not apply elevated z-index for default panelHeight', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ title: 'Test' });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const slidePanel = document.querySelector('#slides .slide-in') as HTMLElement;
+      const styleAttr = slidePanel.getAttribute('style') || '';
+
+      expect(styleAttr).not.toContain('z-index: 102');
+    });
+  });
+
+  describe('showHeader inferred from title', () => {
+    it('shows header when title is provided', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ title: 'My Panel' });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const header = document.querySelector('#slides .slide-in .header') as HTMLElement;
+
+      expect(header).toBeTruthy();
+      expect(header.textContent?.trim()).toContain('My Panel');
+    });
+
+    it('hides header when no title is provided', async() => {
+      getters['slideInPanel/componentProps'] = () => ({});
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const header = document.querySelector('#slides .slide-in .header') as HTMLElement;
+
+      expect(header).toBeNull();
+    });
+
+    it('respects deprecated showHeader=true even without title', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ showHeader: true });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const header = document.querySelector('#slides .slide-in .header') as HTMLElement;
+
+      expect(header).toBeTruthy();
+    });
+
+    it('respects deprecated showHeader=false even with title', async() => {
+      getters['slideInPanel/componentProps'] = () => ({ showHeader: false, title: 'Should Not Show' });
+      store = createStore({
+        getters,
+        mutations: { 'slideInPanel/close': jest.fn() }
+      });
+      factory();
+      await nextTick();
+
+      const header = document.querySelector('#slides .slide-in .header') as HTMLElement;
+
+      expect(header).toBeNull();
+    });
+  });
 });

package/components/auth/AuthBanner.vue

@@ -60,7 +60,7 @@ export default {
       <slot name="actions" />
       <button
         type="button"
-        class="btn-sm role-primary"
+        class="btn btn-sm role-primary"
         @click="edit"
       >
         {{ t('action.edit') }}

package/core/plugins-loader.js

@@ -1,4 +1,5 @@
 import * as vue3 from 'vue';
+import * as vueRouter from 'vue-router';
 import $ from 'jquery';
 import JSZip from 'jszip';
 import jsyaml from 'js-yaml';
@@ -25,6 +26,7 @@ export default function({
 
   // Global libraries - allows us to externalise these to reduce package bundle size
   window.Vue = vue3;
+  window.__vueRouter = vueRouter;
   window.$ = $;
   window.__jszip = JSZip;
   window.__jsyaml = jsyaml;

package/models/__tests__/namespace.test.ts

@@ -1,6 +1,20 @@
 import Namespace from '@shell/models/namespace';
 import { SYSTEM_NAMESPACE } from '@shell/config/labels-annotations';
 import SYSTEM_NAMESPACES from '@shell/config/system-namespaces';
+import { LOCAL_CLUSTER } from '@shell/config/types';
+import { NAME as MANAGER } from '@shell/config/product/manager';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
+
+jest.mock('@shell/components/nav/TopLevelMenu.helper', () => ({
+  __esModule: true,
+  default:    {
+    helper: {
+      clustersPinned: [],
+      clustersOthers: [],
+    },
+  },
+}));
 
 describe('class Namespace', () => {
   describe('checking if isSystem', () => {
@@ -201,24 +215,64 @@ describe('class Namespace', () => {
       expect(namespace.listLocation.name).toBe(name);
     });
 
-    it('should return the name and resource if Harvester', () => {
+    it('should route to local cluster explorer when in manager product', () => {
       const namespace = new Namespace({});
 
       jest.spyOn(namespace, '$rootGetters', 'get').mockReturnValue({
         isRancher:      true,
-        currentProduct: { inStore: 'harvester' }
+        productId:      MANAGER,
+        clusterId:      '_',
+        currentProduct: { inStore: '' },
       });
 
-      const value = {
-        name:   'harvester-c-cluster-projectsnamespaces',
-        params: { resource: 'namespace' }
-      };
+      expect(namespace.listLocation.params.cluster).toBe(LOCAL_CLUSTER);
+      expect(namespace.listLocation.params.product).toBe(EXPLORER);
+    });
+
+    it('should use current cluster and always use explorer product when not in manager', () => {
+      const namespace = new Namespace({});
 
-      expect(namespace.listLocation).toStrictEqual(value);
+      jest.spyOn(namespace, '$rootGetters', 'get').mockReturnValue({
+        isRancher:      true,
+        productId:      EXPLORER,
+        clusterId:      'c-abc',
+        currentProduct: { inStore: '' },
+      });
+
+      expect(namespace.listLocation.params.cluster).toBe('c-abc');
+      expect(namespace.listLocation.params.product).toBe(EXPLORER);
     });
   });
 
-  it.todo('should return _detailLocation with a name');
+  describe('handling _detailLocation', () => {
+    const mockDetailLocation = (namespace: any, overrides: Record<string, any>) => {
+      jest.spyOn(namespace, '$rootGetters', 'get').mockReturnValue(overrides);
+      jest.spyOn(namespace, '$getters', 'get').mockReturnValue({ schemaFor: () => ({ attributes: { namespaced: false } }) });
+      Object.defineProperty(namespace, 'isProdRegistrationV2TopLevelProductResoure', { get: () => false });
+    };
+
+    it('should route to local cluster explorer when in manager product', () => {
+      const namespace = new Namespace({});
+
+      mockDetailLocation(namespace, { productId: MANAGER, clusterId: '_' });
+
+      const loc = namespace._detailLocation;
+
+      expect(loc.params.cluster).toBe(LOCAL_CLUSTER);
+      expect(loc.params.product).toBe(EXPLORER);
+    });
+
+    it('should use current cluster and product when not in manager product', () => {
+      const namespace = new Namespace({});
+
+      mockDetailLocation(namespace, { productId: EXPLORER, clusterId: 'c-abc' });
+
+      const loc = namespace._detailLocation;
+
+      expect(loc.params.cluster).toBe('c-abc');
+      expect(loc.params.product).toBe(EXPLORER);
+    });
+  });
   it.todo('should return the resourceQuota');
   it.todo('should set the resourceQuota as reactive Vue property');
   it.todo('should reset project with cleanForNew');
@@ -263,6 +317,7 @@ describe('class Namespace', () => {
       const namespace = new Namespace({});
 
       jest.spyOn(namespace, 'project', 'get').mockReturnValue(null);
+      jest.spyOn(namespace, '$rootGetters', 'get').mockReturnValue({ productId: EXPLORER });
       Object.defineProperty(namespace, '_glance', { get: jest.fn(() => [{ name: 'namespace' }, { name: 'other' }]) });
 
       const result = namespace.glance;
@@ -270,6 +325,76 @@ describe('class Namespace', () => {
       expect(result).toHaveLength(1);
       expect(result[0].name).toBe('other');
     });
+
+    it('should remove type Link formatter when in manager product without local cluster access', () => {
+      const namespace = new Namespace({});
+
+      sideNavService.helper.clustersPinned.length = 0;
+      sideNavService.helper.clustersOthers.length = 0;
+
+      jest.spyOn(namespace, 'project', 'get').mockReturnValue(null);
+      jest.spyOn(namespace, '$rootGetters', 'get').mockReturnValue({ productId: MANAGER });
+      Object.defineProperty(namespace, '_glance', {
+        get: jest.fn(() => [
+          {
+            name: 'type', formatter: 'Link', formatterOpts: { to: {}, row: {} }
+          },
+          { name: 'other' },
+        ])
+      });
+
+      const result = namespace.glance;
+      const typeItem = result.find((item: any) => item.name === 'type');
+
+      expect(typeItem.formatter).toBeUndefined();
+      expect(typeItem.formatterOpts).toBeUndefined();
+    });
+
+    it('should keep type Link formatter when in manager product with local cluster access', () => {
+      const namespace = new Namespace({});
+
+      sideNavService.helper.clustersPinned.length = 0;
+      sideNavService.helper.clustersPinned.push({ id: LOCAL_CLUSTER } as any);
+      sideNavService.helper.clustersOthers.length = 0;
+
+      jest.spyOn(namespace, 'project', 'get').mockReturnValue(null);
+      jest.spyOn(namespace, '$rootGetters', 'get').mockReturnValue({ productId: MANAGER });
+      Object.defineProperty(namespace, '_glance', {
+        get: jest.fn(() => [
+          {
+            name: 'type', formatter: 'Link', formatterOpts: { to: {}, row: {} }
+          },
+          { name: 'other' },
+        ])
+      });
+
+      const result = namespace.glance;
+      const typeItem = result.find((item: any) => item.name === 'type');
+
+      expect(typeItem.formatter).toBe('Link');
+      expect(typeItem.formatterOpts).toBeDefined();
+    });
+
+    it('should keep type Link formatter when not in manager product', () => {
+      const namespace = new Namespace({});
+
+      jest.spyOn(namespace, 'project', 'get').mockReturnValue(null);
+      jest.spyOn(namespace, '$rootGetters', 'get').mockReturnValue({ productId: EXPLORER });
+      Object.defineProperty(namespace, '_glance', {
+        get: jest.fn(() => [
+          {
+            name: 'type', formatter: 'Link', formatterOpts: { to: {}, row: {} }
+          },
+          { name: 'other' },
+        ])
+      });
+
+      const result = namespace.glance;
+      const typeItem = result.find((item: any) => item.name === 'type');
+
+      expect(typeItem.formatter).toBe('Link');
+      expect(typeItem.formatterOpts).toBeDefined();
+    });
   });
 
   describe('projectGlance', () => {

package/models/__tests__/provisioning.cattle.io.cluster.test.ts

@@ -3,11 +3,23 @@ import MgmtCluster from '@shell/models/management.cattle.io.cluster';
 import { IMPORTED_DAY_2_OPS } from '@shell/config/features';
 import { OPERATION_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { SETTING } from '@shell/config/settings';
-import { MANAGEMENT, OPERATION } from '@shell/config/types';
+import { MANAGEMENT, OPERATION, LOCAL_CLUSTER, NAMESPACE } from '@shell/config/types';
 import { createOperationCR } from '@shell/utils/operation-cr';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 
 jest.mock('@shell/utils/operation-cr', () => ({ createOperationCR: jest.fn() }));
 
+jest.mock('@shell/components/nav/TopLevelMenu.helper', () => ({
+  __esModule: true,
+  default:    {
+    helper: {
+      clustersPinned: [],
+      clustersOthers: []
+    }
+  }
+}));
+
 jest.mock('@shell/utils/provider', () => ({
   isHostedProvider: jest.fn().mockImplementation((context, provider) => {
     return ['GKE', 'EKS', 'AKS'].includes(provider);
@@ -597,4 +609,48 @@ describe('class ProvCluster', () => {
       expect((createOperationCR as jest.Mock).mock.calls[0][4]).toBe('imported-cluster');
     });
   });
+
+  describe('namespaceLocation', () => {
+    const setLocalClusterAccess = ({ pinned, others }: { pinned: boolean, others: boolean }) => {
+      sideNavService.helper.clustersPinned.length = 0;
+      sideNavService.helper.clustersOthers.length = 0;
+
+      if (pinned) {
+        sideNavService.helper.clustersPinned.push({ id: LOCAL_CLUSTER } as any);
+      }
+      if (others) {
+        sideNavService.helper.clustersOthers.push({ id: LOCAL_CLUSTER } as any);
+      }
+    };
+
+    it('should route to the local cluster explorer when local is in the pinned side-nav clusters', () => {
+      setLocalClusterAccess({ pinned: true, others: false });
+      const cluster = new ProvCluster({ metadata: { namespace: 'fleet-default' } });
+
+      expect(cluster.namespaceLocation).toStrictEqual({
+        name:   'c-cluster-product-resource-id',
+        params: {
+          cluster:  LOCAL_CLUSTER,
+          product:  EXPLORER,
+          resource: NAMESPACE,
+          id:       'fleet-default',
+        },
+      });
+    });
+
+    it('should route to the local cluster explorer when local is in the unpinned side-nav clusters', () => {
+      setLocalClusterAccess({ pinned: false, others: true });
+      const cluster = new ProvCluster({ metadata: { namespace: 'fleet-default' } });
+
+      expect(cluster.namespaceLocation?.params.cluster).toBe(LOCAL_CLUSTER);
+      expect(cluster.namespaceLocation?.params.product).toBe(EXPLORER);
+    });
+
+    it('should return null when the user has no access to the local cluster', () => {
+      setLocalClusterAccess({ pinned: false, others: false });
+      const cluster = new ProvCluster({ metadata: { namespace: 'fleet-default' } });
+
+      expect(cluster.namespaceLocation).toBeNull();
+    });
+  });
 });

package/models/namespace.js

@@ -2,12 +2,15 @@ import SYSTEM_NAMESPACES from '@shell/config/system-namespaces';
 import {
   PROJECT, SYSTEM_NAMESPACE, ISTIO as ISTIO_LABELS, FLEET, RESOURCE_QUOTA
 } from '@shell/config/labels-annotations';
-import { ISTIO, MANAGEMENT } from '@shell/config/types';
+import { ISTIO, MANAGEMENT, LOCAL_CLUSTER } from '@shell/config/types';
 
 import { get, set } from '@shell/utils/object';
 import { insertAt, isArray } from '@shell/utils/array';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import { NAME as MANAGER } from '@shell/config/product/manager';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 import { hasPSALabels, getPSATooltipsDescription, getPSALabels } from '@shell/utils/pod-security-admission';
 import { PSAIconsDisplay, PSALabelsNamespaceVersion } from '@shell/config/pod-security-admission';
 
@@ -188,7 +191,14 @@ export default class Namespace extends SteveModel {
   }
 
   get listLocation() {
-    const listLocation = { name: this.$rootGetters['isRancher'] ? 'c-cluster-product-projectsnamespaces' : 'c-cluster-product-resource' };
+    const productId = this.$rootGetters['productId'];
+    const isManagerProduct = productId === MANAGER;
+    const cluster = isManagerProduct ? LOCAL_CLUSTER : this.$rootGetters['clusterId'];
+
+    const listLocation = {
+      name:   this.$rootGetters['isRancher'] ? 'c-cluster-product-projectsnamespaces' : 'c-cluster-product-resource',
+      params: { cluster, product: EXPLORER },
+    };
 
     // Harvester uses these resource directly... but has different routes. listLocation covers routes leading back to route
     if (this.$rootGetters['currentProduct'].inStore === HARVESTER) {
@@ -202,6 +212,12 @@ export default class Namespace extends SteveModel {
   get _detailLocation() {
     const _detailLocation = super._detailLocation;
 
+    // Namespace detail pages belong to the local cluster's explorer, not Cluster Management
+    if (this.$rootGetters['productId'] === MANAGER) {
+      _detailLocation.params.cluster = LOCAL_CLUSTER;
+      _detailLocation.params.product = EXPLORER;
+    }
+
     return _detailLocation;
   }
 
@@ -285,6 +301,22 @@ export default class Namespace extends SteveModel {
       glance.splice(namespaceIndex, 1, this.projectGlance);
     }
 
+    // In Cluster Management, the type link points to the local cluster's explorer.
+    // If the user cannot access the local cluster, show type as plain text.
+    const productId = this.$rootGetters['productId'];
+
+    if (productId === MANAGER) {
+      const hasLocalCluster = sideNavService.helper.clustersPinned.some((c) => c.id === LOCAL_CLUSTER) ||
+        sideNavService.helper.clustersOthers.some((c) => c.id === LOCAL_CLUSTER);
+      const typeIndex = glance.findIndex((item) => item.name === 'type');
+
+      if (!hasLocalCluster && typeIndex > -1) {
+        glance[typeIndex] = {
+          ...glance[typeIndex], formatter: undefined, formatterOpts: undefined
+        };
+      }
+    }
+
     // projectGlance could be undefined
     return glance.filter(Boolean);
   }

package/models/provisioning.cattle.io.cluster.js

@@ -3,6 +3,8 @@ import {
   CONFIG_MAP, AUTOSCALER_CONFIG_MAP_ID,
   EVENT, OPERATION
 } from '@shell/config/types';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { findBy } from '@shell/utils/array';
 import { get, set } from '@shell/utils/object';
@@ -788,21 +790,26 @@ export default class ProvCluster extends SteveModel {
   }
 
   get namespaceLocation() {
-    const localCluster = this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, LOCAL_CLUSTER);
-
-    if (localCluster) {
-      return {
-        name:   'c-cluster-product-resource-id',
-        params: {
-          cluster:  localCluster.id,
-          product:  this.$rootGetters['productId'],
-          resource: NAMESPACE,
-          id:       this.namespace
-        }
-      };
+    // Check side nav for local cluster access — `management/byId` only reflects what's
+    // currently cached, which on a downstream detail page is just the downstream cluster
+    // (so admins would falsely look like they have no local access). The side nav reflects
+    // permission, not cache state, so it's accurate for both admins and downstream-only users.
+    const hasLocalCluster = sideNavService.helper.clustersPinned.some((c) => c.id === LOCAL_CLUSTER) ||
+      sideNavService.helper.clustersOthers.some((c) => c.id === LOCAL_CLUSTER);
+
+    if (!hasLocalCluster) {
+      return null;
     }
 
-    return null;
+    return {
+      name:   'c-cluster-product-resource-id',
+      params: {
+        cluster:  LOCAL_CLUSTER,
+        product:  EXPLORER,
+        resource: NAMESPACE,
+        id:       this.namespace
+      }
+    };
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.12-rc.6",
+  "version": "3.0.12-rc.7",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",