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

package/apis/intf/shell-api/slide-in.ts

@@ -1,5 +1,21 @@
 import { Component } from 'vue';
 
+/**
+ * Standard width presets for the Slide-In panel.
+ *
+ * - `'default'` — 33% of the viewport width
+ * - `'wide'` — 73% of the viewport width
+ */
+export type SlideInWidth = 'default' | 'wide';
+
+/**
+ * Standard height presets for the Slide-In panel.
+ *
+ * - `'default'` — positioned below the header bar, filling the remaining viewport height
+ * - `'full'` — full viewport height (100vh), covering the header and side menu
+ */
+export type SlideInHeight = 'default' | 'full';
+
 /**
  *
  * Configuration object for opening a Slide-In panel. Here's what a Slide-In looks like in Rancher UI:
@@ -8,45 +24,50 @@ import { Component } from 'vue';
 export interface SlideInConfig {
   /**
    *
-   * Width of the Slide-In panel in percentage, related to the window width. Defaults to `33%`
+   * title for the Slide-In panel.
+   * When set, a header bar with the title and a close button is displayed.
+   * When omitted, no header is shown.
    *
    */
-  width?: string;
+  title?: string;
   /**
    *
-   * Height of the Slide-In panel. Can be percentage or vh. Defaults to (window - header) height.
-   * Can be set as `33%` or `80vh`
-   *
-   */
-  height?: string;
-  /**
+   * Width preset for the Slide-In panel. Defaults to `'default'` (33%).
    *
-   * CSS Top position for the Slide-In panel, string using px, as `0px` or `20px`. Default is right below header height
+   * - `'default'` — 33% of the viewport width
+   * - `'wide'` — 73% of the viewport width
    *
    */
-  top?: string;
+  width?: SlideInWidth;
   /**
    *
-   * title for the Slide-In panel
+   * Height preset for the Slide-In panel. Defaults to `'default'` (below header).
+   * When set to `'full'`, the panel covers the full viewport height and the z-index
+   * is automatically elevated above the side menu.
+   *
+   * - `'default'` — positioned below the header bar, filling the remaining viewport height
+   * - `'full'` — full viewport height (100vh), covering the header and side menu
    *
    */
-  title?: string;
+  height?: SlideInHeight;
   /**
    *
-   * Wether Slide-In header is displayed or not
+   * When `true`, disables the focus trap on the Slide-In panel.
+   * Useful for panels with no focusable elements or custom focus management.
    *
    */
-  showHeader?: boolean;
+  disableFocusTrap?: boolean;
   /**
    *
-   * Array of props to watch out for in route, when they change, closes Slide-In
+   * Array of route properties to watch. When any of them change, the Slide-In closes.
+   * Defaults to `['name', 'params', 'hash', 'query']`.
    * @ignore
    *
    */
-  closeOnRouteChange?: [string];
+  closeOnRouteChange?: string[];
   /**
    *
-   * Return focus selector for focus trap
+   * CSS selector for the element that should receive focus when the Slide-In closes.
    * @ignore
    *
    */
@@ -68,6 +89,14 @@ export interface SlideInConfig {
   props?: {
     [key: string]: any;
   };
+  /**
+   * @deprecated No longer needed — automatically managed based on `panelHeight`. Full deprecation expected in Rancher 2.17.
+   */
+  top?: string;
+  /**
+   * @deprecated No longer needed — header visibility is inferred from the presence of `title`. Full deprecation expected in Rancher 2.17.
+   */
+  showHeader?: boolean;
 }
 
 /**

package/apis/shell/__tests__/slide-in.test.ts

@@ -38,7 +38,7 @@ describe('slideInApiImpl', () => {
   it('should open a slide-in panel with a config', () => {
     const config = {
       title: 'Test Panel',
-      width: '50%',
+      width: 'default' as const,
     };
 
     // 3. Act
@@ -48,7 +48,7 @@ describe('slideInApiImpl', () => {
     expect(mockCommit).toHaveBeenCalledTimes(1);
     expect(mockCommit).toHaveBeenCalledWith('slideInPanel/open', {
       component:      MockComponent,
-      componentProps: { ...config }, // The implementation spreads the config
+      componentProps: { title: 'Test Panel', width: 'default' },
     });
   });
 
@@ -87,4 +87,85 @@ describe('slideInApiImpl', () => {
       },
     });
   });
+
+  it('should open with preset properties', () => {
+    const config = {
+      title:  'Preset Panel',
+      width:  'wide' as const,
+      height: 'full' as const,
+    };
+
+    slideInApi.open(MockComponent, config);
+
+    expect(mockCommit).toHaveBeenCalledTimes(1);
+    expect(mockCommit).toHaveBeenCalledWith('slideInPanel/open', {
+      component:      MockComponent,
+      componentProps: {
+        title:  'Preset Panel',
+        width:  'wide',
+        height: 'full',
+      },
+    });
+  });
+
+  it('should open with disableFocusTrap option', () => {
+    const config = {
+      width:            'wide' as const,
+      height:           'full' as const,
+      disableFocusTrap: true,
+    };
+
+    slideInApi.open(MockComponent, config);
+
+    expect(mockCommit).toHaveBeenCalledTimes(1);
+    expect(mockCommit).toHaveBeenCalledWith('slideInPanel/open', {
+      component:      MockComponent,
+      componentProps: {
+        width:            'wide',
+        height:           'full',
+        disableFocusTrap: true,
+      },
+    });
+  });
+
+  describe('deprecation warnings', () => {
+    const originalEnv = process.env.dev;
+    let warnSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      process.env.dev = 'true';
+      warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    });
+
+    afterEach(() => {
+      process.env.dev = originalEnv;
+      warnSpy.mockRestore();
+    });
+
+    it('warns when deprecated "top" is used', () => {
+      slideInApi.open(MockComponent, { top: '0' });
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('"top" is deprecated')
+      );
+    });
+
+    it('warns when deprecated "showHeader" is used', () => {
+      slideInApi.open(MockComponent, { showHeader: false });
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('"showHeader" is deprecated')
+      );
+    });
+
+    it('does not warn when using preset properties', () => {
+      slideInApi.open(MockComponent, {
+        title:  'Test',
+        width:  'wide' as const,
+        height: 'full' as const,
+      });
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+  });
 });

package/apis/shell/slide-in.ts

@@ -2,6 +2,8 @@ import { Component } from 'vue';
 import { SlideInApi, SlideInConfig } from '@shell/apis/intf/shell';
 import { Store } from 'vuex';
 
+const DEPRECATION_PREFIX = '[SlideIn API]';
+
 export class SlideInApiImpl implements SlideInApi {
   private store: Store<any>;
 
@@ -9,6 +11,20 @@ export class SlideInApiImpl implements SlideInApi {
     this.store = store;
   }
 
+  private warnDeprecated(config: SlideInConfig): void {
+    if (!process.env.dev) {
+      return;
+    }
+
+    if (config.top !== undefined) {
+      console.warn(`${ DEPRECATION_PREFIX } "top" is deprecated. It is now automatically managed based on "panelHeight". Full deprecation expected in Rancher 2.17.`); // eslint-disable-line no-console
+    }
+
+    if (config.showHeader !== undefined) {
+      console.warn(`${ DEPRECATION_PREFIX } "showHeader" is deprecated. Header visibility is now inferred from the presence of "title". Full deprecation expected in Rancher 2.17.`); // eslint-disable-line no-console
+    }
+  }
+
   /**
    * Opens a slide in panel in Rancher UI
    *
@@ -30,6 +46,10 @@ export class SlideInApiImpl implements SlideInApi {
   public open(component: Component, config?: SlideInConfig): void {
     const props = config?.props || {};
 
+    if (config) {
+      this.warnDeprecated(config);
+    }
+
     delete config?.props;
 
     this.store.commit('slideInPanel/open', {

package/components/ExplorerProjectsNamespaces.vue

@@ -157,7 +157,7 @@ export default {
       return uniq(ids);
     },
     clusterProjects() {
-      const clusterId = this.currentCluster.id;
+      const clusterId = this.currentCluster?.id;
 
       // Get the list of projects from the store so that the list
       // is updated if a new project is created or removed.
@@ -276,7 +276,7 @@ export default {
     },
 
     canSeeProjectlessNamespaces() {
-      return this.currentCluster.canUpdate;
+      return this.currentCluster?.canUpdate;
     },
 
     showMockNotInProjectGroup() {

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/identifying-fields.test.ts

@@ -59,6 +59,15 @@ describe('composables: IdentifyingFields', () => {
       expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
       expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
     });
+
+    it('should return a plain text namespace row when the resource signals namespaceLocation is unreachable', () => {
+      mockStore.getters['cluster/canList'] = () => true;
+      const resource = { namespace: 'NAMESPACE', namespaceLocation: null };
+      const result = useNamespace(resource);
+
+      expect(result?.value.valueOverride).toBeUndefined();
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+    });
   });
 
   describe('useWorkspace', () => {

package/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields.ts

@@ -27,10 +27,14 @@ export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
     const currentStore = store.getters['currentStore'](NAMESPACE);
     const canList = store.getters[`${ currentStore }/canList`](NAMESPACE);
 
+    // A resource that explicitly returns null from namespaceLocation is signaling that
+    // the namespace lives in a cluster the user can't reach (mirrors legacy.vue's hideNamespaceLocation)
+    const hasReachableLocation = resourceValue.namespaceLocation !== null;
+
     const label = i18n.t('component.resource.detail.metadata.identifyingInformation.namespace');
     const value = resourceValue.namespace;
     const valueDataTestid = 'masthead-subheader-namespace';
-    const valueOverride = canList ? {
+    const valueOverride = canList && hasReachableLocation ? {
       component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/ResourcePopover/index.vue'))),
       props:     {
         type:           NAMESPACE,

package/components/SlideInPanelManager.vue

@@ -10,6 +10,13 @@ import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
+const WIDTH_MAP = {
+  default: '33%',
+  wide:    '73%'
+};
+
+const HEIGHT_FULL = 'full';
+
 const slideInPanelManager = useTemplateRef('SlideInPanelManager');
 const slideInPanelManagerClose = useTemplateRef('SlideInPanelManagerClose');
 
@@ -19,12 +26,22 @@ const isClosing = computed(() => store.getters['slideInPanel/isClosing']);
 const currentComponent = computed(() => store.getters['slideInPanel/component']);
 const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
 
-const panelTop = computed(() => {
-  // Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the top.
-  if (currentProps?.value?.top) {
-    return currentProps?.value?.top;
+const resolvedHeightMode = computed(() => {
+  if (currentProps.value?.height) {
+    return currentProps.value.height;
+  }
+
+  // Deprecated: infer from raw top value
+  if (currentProps.value?.top === '0') {
+    return 'full';
   }
 
+  return 'default';
+});
+
+const isFullHeight = computed(() => resolvedHeightMode.value === HEIGHT_FULL);
+
+const defaultTop = computed(() => {
   const banner = document.getElementById('banner-header');
   let height = HEADER_HEIGHT;
 
@@ -35,15 +52,51 @@ const panelTop = computed(() => {
   return `${ height }px`;
 });
 
-// Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the height.
-const panelHeight = computed(() => (currentProps?.value?.height) ? (currentProps?.value?.height) : `calc(100vh - ${ panelTop?.value })`);
-const panelWidth = computed(() => currentProps?.value?.width || '33%');
-const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
+const panelTop = computed(() => {
+  if (isFullHeight.value) {
+    return '0';
+  }
+
+  // Deprecated: explicit top value
+  if (currentProps.value?.top) {
+    return currentProps.value.top;
+  }
+
+  return defaultTop.value;
+});
+
+const panelHeight = computed(() => {
+  if (isFullHeight.value) {
+    return '100vh';
+  }
+
+  return `calc(100vh - ${ panelTop.value })`;
+});
+
+const panelWidth = computed(() => {
+  const width = currentProps.value?.width as keyof typeof WIDTH_MAP | undefined;
+
+  return (width && WIDTH_MAP[width]) || WIDTH_MAP.default;
+});
+
+const panelRight = computed(() => (isOpen.value ? '0' : `-${ panelWidth.value }`));
+
+const glassZIndex = computed(() => (isFullHeight.value ? 101 : undefined));
+const panelZIndex = computed(() => (isFullHeight.value ? 102 : undefined));
+
+const showHeader = computed(() => {
+  // Deprecated: explicit showHeader takes precedence for backwards compat
+  if (currentProps.value?.showHeader !== undefined) {
+    return currentProps.value.showHeader;
+  }
+
+  return !!currentProps.value?.title;
+});
+
+const panelTitle = computed(() => currentProps.value?.title || (showHeader.value ? 'Details' : ''));
 
-const showHeader = computed(() => currentProps?.value?.showHeader ?? true);
-const panelTitle = showHeader.value ? computed(() => currentProps?.value?.title || 'Details') : null;
 const closeOnRouteChange = computed(() => {
-  const propsCloseOnRouteChange = currentProps?.value.closeOnRouteChange;
+  const propsCloseOnRouteChange = currentProps.value?.closeOnRouteChange;
 
   if (!propsCloseOnRouteChange) {
     return ['name', 'params', 'hash', 'query'];
@@ -51,27 +104,32 @@ const closeOnRouteChange = computed(() => {
 
   return propsCloseOnRouteChange;
 });
+
 const router = useRouter();
 
 watch(
   /**
-   * trigger focus trap
+   * Focus trap logic
    */
-  () => isOpen?.value,
+  () => isOpen.value,
   (neu, old) => {
     if (neu && neu !== old) {
-      const opts:any = {
+      if (currentProps.value?.disableFocusTrap) {
+        return;
+      }
+
+      const panelEl = slideInPanelManager.value as HTMLElement;
+      const closeEl = slideInPanelManagerClose.value;
+
+      const opts: any = {
         ...DEFAULT_FOCUS_TRAP_OPTS,
-        // putting the initial focus on the first element that is not conditionally displayed
-        initialFocus: slideInPanelManagerClose.value
+        initialFocus:  closeEl || panelEl,
+        fallbackFocus: panelEl
       };
 
-      const returnFocusSelector = currentProps?.value?.returnFocusSelector;
+      const returnFocusSelector = currentProps.value?.returnFocusSelector;
 
       if (returnFocusSelector) {
-        /**
-         * will return focus to the first iterable node of this container select
-         */
         opts.setReturnFocus = () => {
           if (returnFocusSelector && !document.querySelector(returnFocusSelector)) {
             console.warn('SlideInPanelManager: cannot find elem with "returnFocusSelector", returning focus to main view'); // eslint-disable-line no-console
@@ -85,13 +143,13 @@ watch(
 
       useWatcherBasedSetupFocusTrapWithDestroyIncluded(
         () => {
-          if (currentProps?.value?.focusTrapWatcherBasedVariable) {
+          if (currentProps.value?.focusTrapWatcherBasedVariable) {
             return currentProps.value.focusTrapWatcherBasedVariable;
           }
 
-          return isOpen?.value && !isClosing?.value;
+          return isOpen.value && !isClosing.value;
         },
-        slideInPanelManager.value as HTMLElement,
+        panelEl,
         opts,
         false
       );
@@ -102,7 +160,7 @@ watch(
 watch(
   () => router?.currentRoute?.value,
   (newValue, oldValue) => {
-    if (!isOpen?.value) {
+    if (!isOpen.value) {
       return;
     }
 
@@ -137,6 +195,7 @@ function closePanel() {
     <div
       id="slide-in-panel-manager"
       ref="SlideInPanelManager"
+      tabindex="-1"
       @keydown.escape="closePanel"
     >
       <div
@@ -144,6 +203,7 @@ function closePanel() {
         data-testid="slide-in-glass"
         class="slide-in-glass"
         :class="{ 'slide-in-glass-open': isOpen }"
+        :style="{ zIndex: glassZIndex }"
         @click="closePanel"
       />
       <aside
@@ -154,6 +214,7 @@ function closePanel() {
           right: panelRight,
           top: panelTop,
           height: panelHeight,
+          zIndex: panelZIndex,
         }"
       >
         <div
@@ -167,6 +228,8 @@ function closePanel() {
             ref="SlideInPanelManagerClose"
             class="icon icon-close"
             data-testid="slide-in-close"
+            role="button"
+            :aria-label="t('generic.close')"
             :tabindex="isOpen ? 0 : -1"
             @click="closePanel"
             @keypress.enter="closePanel"
@@ -220,7 +283,7 @@ function closePanel() {
 .header {
   display: flex;
   align-items: center;
-  padding: 4px;
+  padding: 4px 10px;
   border-bottom: 1px solid var(--border);
 
   .title {
@@ -229,11 +292,26 @@ function closePanel() {
   }
 
   .icon-close {
+    padding: 8px;
+    border-radius: 4px;
+    opacity: 0.7;
     cursor: pointer;
+
+    &:hover {
+      background-color: var(--primary);
+      color: var(--primary-text);
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
   }
 }
 
 .main-panel {
+  flex: 1;
   padding: 10px;
   overflow: auto;
 }