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

package/components/Resource/Detail/Masthead/__tests__/index.test.ts

@@ -1,5 +1,7 @@
 import { mount } from '@vue/test-utils';
 import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
 import Cards from '@shell/components/Resource/Detail/Cards.vue';
 
 jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
@@ -19,16 +21,18 @@ describe('component: Masthead/index', () => {
     metadataProps: { items: [] }
   };
 
+  const globalStubs = {
+    stubs: {
+      TitleBar: true,
+      Metadata: true,
+      Cards:    true
+    }
+  };
+
   it('should render the Cards component', () => {
     const wrapper = mount(Masthead, {
       props:  defaultProps,
-      global: {
-        stubs: {
-          TitleBar: true,
-          Metadata: true,
-          Cards:    true
-        }
-      }
+      global: globalStubs
     });
 
     expect(wrapper.findComponent(Cards).exists()).toBe(true);
@@ -37,17 +41,67 @@ describe('component: Masthead/index', () => {
   it('should pass the resource from titleBarProps to Cards', () => {
     const wrapper = mount(Masthead, {
       props:  defaultProps,
-      global: {
-        stubs: {
-          TitleBar: true,
-          Metadata: true,
-          Cards:    true
-        }
-      }
+      global: globalStubs
     });
 
     const cardsComponent = wrapper.findComponent(Cards);
 
     expect(cardsComponent.props('resource')).toStrictEqual(mockResource);
   });
+
+  it('should render TitleBar when titleBarProps is provided', () => {
+    const wrapper = mount(Masthead, {
+      props:  defaultProps,
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(TitleBar).exists()).toBe(true);
+  });
+
+  it('should render Metadata when metadataProps is provided', () => {
+    const wrapper = mount(Masthead, {
+      props:  defaultProps,
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(Metadata).exists()).toBe(true);
+  });
+
+  it('should not render TitleBar when titleBarProps is undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: undefined, metadataProps: { items: [] } },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(TitleBar).exists()).toBe(false);
+  });
+
+  it('should not render Metadata when metadataProps is undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: defaultProps.titleBarProps, metadataProps: undefined },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(Metadata).exists()).toBe(false);
+  });
+
+  it('should not render Cards when titleBarProps is undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: undefined, metadataProps: undefined },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(Cards).exists()).toBe(false);
+  });
+
+  it('should not render any children when both props are undefined', () => {
+    const wrapper = mount(Masthead, {
+      props:  { titleBarProps: undefined, metadataProps: undefined },
+      global: globalStubs
+    });
+
+    expect(wrapper.findComponent(TitleBar).exists()).toBe(false);
+    expect(wrapper.findComponent(Metadata).exists()).toBe(false);
+    expect(wrapper.findComponent(Cards).exists()).toBe(false);
+  });
 });

package/components/Resource/Detail/Masthead/index.vue

@@ -4,8 +4,8 @@ import Metadata, { MetadataProps } from '@shell/components/Resource/Detail/Metad
 import Cards from '@shell/components/Resource/Detail/Cards.vue';
 
 export interface MastheadProps {
-  titleBarProps: TitleBarProps;
-  metadataProps: MetadataProps;
+  titleBarProps?: TitleBarProps;
+  metadataProps?: MetadataProps;
 }
 </script>
 
@@ -15,7 +15,10 @@ const props = defineProps<MastheadProps>();
 </script>
 <template>
   <div class="masthead">
-    <TitleBar v-bind="props.titleBarProps">
+    <TitleBar
+      v-if="props.titleBarProps"
+      v-bind="props.titleBarProps"
+    >
       <template
         v-if="$slots['additional-actions']"
         #additional-actions
@@ -24,10 +27,12 @@ const props = defineProps<MastheadProps>();
       </template>
     </TitleBar>
     <Metadata
+      v-if="props.metadataProps"
       class="metadata-section"
       v-bind="props.metadataProps"
     />
     <Cards
+      v-if="props.titleBarProps"
       class="cards-section"
       :resource="props.titleBarProps.resource"
     />

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

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/components/form/Security.vue

@@ -285,7 +285,7 @@ export default {
           </legend>
           <LabeledInput
             v-model:value.number="securityContext.runAsUser"
-            type="number"
+            type="integer"
             min="0"
             :label="t('workload.container.security.runAsUser.label')"
             :mode="mode"

package/components/formatter/Translate.vue

@@ -1,4 +1,6 @@
 <script>
+import { get } from '@shell/utils/object';
+
 export default {
   props: {
     row: {
@@ -6,6 +8,11 @@ export default {
       required: true,
     },
 
+    fallbackPath: {
+      type:    String,
+      default: '',
+    },
+
     prefix: {
       type:    String,
       default: '',
@@ -18,8 +25,22 @@ export default {
   },
 
   computed: {
+    l10nId() {
+      return `${ this.prefix ? `${ this.prefix }.` : '' }${ this.value || this.row.id }`;
+    },
+
+    l10nFallback() {
+      const fallback = this.value;
+
+      if (this.fallbackPath) {
+        return get(this.row, this.fallbackPath) || fallback;
+      }
+
+      return fallback;
+    },
+
     text() {
-      return this.$store.getters['i18n/withFallback'](`${ this.prefix }.${ this.value || this.row.id }`, null, this.value);
+      return this.$store.getters['i18n/withFallback'](this.l10nId, null, this.l10nFallback);
     },
   },
 };