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

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/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);
     },
   },
 };

package/components/nav/Group.vue

@@ -384,14 +384,12 @@ export default {
       user-select: none;
       text-transform: none;
       font-size: 14px;
+      height: 100%;
+      padding: 8px 0 8px 16px;
+      display: inline-flex;
+      align-items: center;
     }
 
-    > H6 {
-        text-transform: none;
-        height: 100%;
-        padding: 8px 0 8px 16px;
-      }
-
     > A {
       display: block;
       box-sizing:border-box;
@@ -403,10 +401,6 @@ export default {
       &:focus{
         outline:none;
       }
-      > H6 {
-        text-transform: none;
-        padding: 8px 0 8px 16px;
-      }
     }
   }
 
@@ -574,6 +568,7 @@ export default {
       padding-left: 24px;
       display: flex;
       justify-content: space-between;
+      align-items: center;
     }
 
     A:focus {

package/components/nav/TopLevelMenu.vue

@@ -955,19 +955,6 @@ export default {
         <div
           class="footer"
         >
-          <div
-            v-if="canEditSettings"
-            class="support"
-            @click="hide()"
-          >
-            <router-link
-              :to="{name: 'support'}"
-              role="link"
-              :aria-label="t('nav.ariaLabel.support')"
-            >
-              {{ t('nav.support', {hasSupport}) }}
-            </router-link>
-          </div>
           <div
             class="version"
             :class="{'version-small': largeAboutText}"
@@ -1574,10 +1561,6 @@ export default {
         margin: 20px 10px;
         width: 50px;
 
-        .support {
-          display: none;
-        }
-
         .version{
           text-align: center;
 
@@ -1597,19 +1580,7 @@ export default {
       > * {
         flex: 1;
         color: var(--link);
-
-        &:first-child {
-          text-align: left;
-        }
-        &:last-child {
-          text-align: right;
-        }
-        text-align: center;
-      }
-
-      .support a:focus-visible {
-        @include focus-outline;
-        outline-offset: 4px;
+        text-align: left;
       }
 
       .version {

package/components/nav/__tests__/Group.test.ts

@@ -64,4 +64,65 @@ describe('component: Group', () => {
 
     expect((wrapper.vm as any).hasActiveRoute()).toBe(true);
   });
+
+  describe('group header label', () => {
+    const mountGroup = (group: any) => shallowMount(Group as any, {
+      props: {
+        group, canCollapse: true, idPrefix: ''
+      },
+      global: {
+        stubs: { 'router-link': { template: '<a><slot /></a>' } },
+        mocks: {
+          $route: {
+            params: {}, path: '/test/route', fullPath: '/test/route', matched: []
+          },
+          $router: {
+            resolve:   jest.fn().mockReturnValue({ path: '/test/route', fullPath: '/test/route' }),
+            getRoutes: jest.fn().mockReturnValue([])
+          },
+          t: (key: string) => key
+        }
+      }
+    });
+
+    it('renders the label in an h6 for a non-linked group header', () => {
+      const group = {
+        name:     'test',
+        label:    'My Group',
+        children: [
+          { route: { name: 'child-route', params: {} } }
+        ]
+      };
+
+      const wrapper = mountGroup(group);
+      const header = wrapper.find('.header');
+      const h6 = header.find('h6');
+
+      // Non-linked header: the label sits in a bare h6, not wrapped in a router-link
+      expect(header.find('a').exists()).toBe(false);
+      expect(h6.exists()).toBe(true);
+      expect(h6.find('span').html()).toContain('My Group');
+    });
+
+    it('renders the label in an h6 wrapped in a router-link for a group header with overview', () => {
+      const group = {
+        name:     'test',
+        label:    'My Group',
+        children: [
+          {
+            route: { name: 'overview-route' }, overview: true, exact: true
+          }
+        ]
+      };
+
+      const wrapper = mountGroup(group);
+      const link = wrapper.find('.header a');
+      const h6 = link.find('h6');
+
+      // Linked header: the same h6 label markup is wrapped in a router-link
+      expect(link.exists()).toBe(true);
+      expect(h6.exists()).toBe(true);
+      expect(h6.find('span').html()).toContain('My Group');
+    });
+  });
 });

package/config/labels-annotations.js

@@ -20,6 +20,7 @@ export const IMPORTED_CLUSTER_VERSION_MANAGEMENT = 'rancher.io/imported-cluster-
 export const UI_PROJECT_SECRET = 'management.cattle.io/project-scoped-secret';
 export const UI_PROJECT_SECRET_COPY = 'management.cattle.io/project-scoped-secret-copy';
 export const SERVICE_LINKS = 'ui.rancher/service-links';
+export const NODE_DRIVER_FIELD_HINTS = 'io.cattle.nodedriver/ui-field-hints';
 
 export const KUBERNETES = {
   SERVICE_ACCOUNT_UID:  'kubernetes.io/service-account.uid',

package/config/table-headers.js

@@ -1072,11 +1072,14 @@ export const ROLE = {
 export const FEATURE_DESCRIPTION = {
   name:          'description',
   labelKey:      'tableHeaders.description',
-  value:         'status.description',
+  value:         'id',
   align:         'left',
   sort:          ['status.description'],
   formatter:     'Translate',
-  formatterOpts: { prefix: 'featureFlags.description' },
+  formatterOpts: {
+    prefix:       'featureFlags.description',
+    fallbackPath: 'status.description'
+  },
 };
 
 export const STATE_NORMAN = {