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

package/components/Resource/Detail/Cards.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import SpacedRow from '@shell/components/Resource/Detail/SpacedRow.vue';
+import ExtrasCard from '@shell/components/Resource/Detail/Card/ExtrasCard.vue';
+import { computed } from 'vue';
+
+export interface Props {
+  resource: any;
+}
+</script>
+
+<script setup lang="ts">
+const { resource } = defineProps<Props>();
+const cards = computed(() => resource?.cards?.filter((c: any) => c) || []);
+const showExtrasCard = computed(() => cards.value.length >= 1 && cards.value.length < 3);
+</script>
+
+<template>
+  <SpacedRow v-if="cards.length > 0">
+    <component
+      :is="card.component"
+      v-for="(card, i) in cards"
+      :key="i"
+      v-bind="card.props"
+    />
+    <ExtrasCard v-if="showExtrasCard" />
+  </SpacedRow>
+</template>

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

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import Cards from '@shell/components/Resource/Detail/Cards.vue';
+
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+
+describe('component: Masthead/index', () => {
+  const mockResource = {
+    name:  'test-resource',
+    cards: []
+  };
+
+  const defaultProps = {
+    titleBarProps: {
+      resource:          mockResource,
+      resourceTypeLabel: 'ConfigMap',
+      resourceName:      'test-resource'
+    },
+    metadataProps: { items: [] }
+  };
+
+  it('should render the Cards component', () => {
+    const wrapper = mount(Masthead, {
+      props:  defaultProps,
+      global: {
+        stubs: {
+          TitleBar: true,
+          Metadata: true,
+          Cards:    true
+        }
+      }
+    });
+
+    expect(wrapper.findComponent(Cards).exists()).toBe(true);
+  });
+
+  it('should pass the resource from titleBarProps to Cards', () => {
+    const wrapper = mount(Masthead, {
+      props:  defaultProps,
+      global: {
+        stubs: {
+          TitleBar: true,
+          Metadata: true,
+          Cards:    true
+        }
+      }
+    });
+
+    const cardsComponent = wrapper.findComponent(Cards);
+
+    expect(cardsComponent.props('resource')).toStrictEqual(mockResource);
+  });
+
+  it('should render Cards with mb-20 class', () => {
+    const wrapper = mount(Masthead, {
+      props:  defaultProps,
+      global: {
+        stubs: {
+          TitleBar: true,
+          Metadata: true,
+          Cards:    true
+        }
+      }
+    });
+
+    const cardsComponent = wrapper.findComponent(Cards);
+
+    expect(cardsComponent.classes()).toContain('mb-20');
+  });
+});

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 import TitleBar, { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import Metadata, { MetadataProps } from '@shell/components/Resource/Detail/Metadata/index.vue';
+import Cards from '@shell/components/Resource/Detail/Cards.vue';
 
 export interface MastheadProps {
   titleBarProps: TitleBarProps;
@@ -25,6 +26,10 @@ const props = defineProps<MastheadProps>();
     <Metadata
       v-bind="props.metadataProps"
     />
+    <Cards
+      class="mb-20"
+      :resource="props.titleBarProps.resource"
+    />
   </div>
 </template>
 

package/components/Resource/Detail/Metadata/KeyValueRow.vue

@@ -43,7 +43,7 @@ const previewId = randomStr();
   >
     <RcButton
       ref="button"
-      ghost
+      variant="ghost"
       aria-haspopup="dialog"
       :aria-expanded="showPreview"
       :aria-controls="previewId"
@@ -103,9 +103,11 @@ const previewId = randomStr();
     line-height: normal;
   }
 
-  & .btn {
+  & .btn.btn-medium.rc-button.variant-ghost {
     line-height: initial;
     min-height: initial;
+
+    padding: 0;
   }
 
   &.active {

package/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue

@@ -81,7 +81,7 @@ const getGlanceItemValueId = (glanceItem: any): string => `value-${ glanceItem.l
       }
     }
 
-    .v-popper, .btn.role-link {
+    .v-popper, .btn.variant-link.rc-button {
       height: 24px;
       min-height: initial;
       padding: 0;
@@ -91,7 +91,7 @@ const getGlanceItemValueId = (glanceItem: any): string => `value-${ glanceItem.l
       padding: 0;
     }
 
-    .btn.role-link {
+    .btn.variant-link.rc-button.variant-ghost {
       color: #141419;
       padding: 0 12px;
       i {

package/components/Resource/Detail/ResourceRow.types.ts

@@ -0,0 +1,14 @@
+import { StateColor } from '@shell/utils/style';
+import { RouteLocationRaw } from 'vue-router';
+
+export interface Count {
+  label: string;
+  count: number;
+}
+
+export interface Props {
+  label: string;
+  to?: RouteLocationRaw;
+  color?: StateColor;
+  counts?: Count[];
+}

package/components/Resource/Detail/ResourceRow.vue

@@ -1,41 +1,11 @@
-<script lang="ts">
+<script setup lang="ts">
 import SubtleLink from '@shell/components/SubtleLink.vue';
 import StateDot from '@shell/components/StateDot/index.vue';
-import { StateColor } from '@shell/utils/style';
-import { sortBy, sumBy } from 'lodash';
-import { RouteLocationRaw } from 'vue-router';
+import { sumBy } from 'lodash';
 import { computed } from 'vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
-
-export interface Count {
-  label: string;
-  count: number;
-}
-
-export interface Props {
-  label: string;
-  to?: RouteLocationRaw;
-  color?: StateColor;
-  counts?: Count[];
-}
-
-export function extractCounts(labels: string[]): Count[] {
-  const accumulator: { [k: string]: number} = {};
-
-  labels.forEach((l: string) => {
-    accumulator[l] = accumulator[l] || 0;
-    accumulator[l]++;
-  });
-
-  const counts: Count[] = Object.entries(accumulator).map(([label, count]) => ({ label, count }));
-
-  return sortBy(counts, 'label');
-}
-
-</script>
-
-<script setup lang="ts">
+import { Props } from './ResourceRow.types';
 const {
   label, to, counts, color
 } = defineProps<Props>();
@@ -102,7 +72,7 @@ const displayCounts = computed(() => {
           :key="count.label"
           class="count"
         >
-          {{ count.count }} {{ count.label }}<span class="and">&nbsp;+&nbsp;</span>
+          <span class="count-value">{{ count.count }}</span>&nbsp;<span class="count-label">{{ count.label }}</span><span class="and">&nbsp;+&nbsp;</span>
         </span>
       </div>
     </div>
@@ -118,13 +88,31 @@ const displayCounts = computed(() => {
     .right {
       flex-grow: 1;
       text-align: right;
+      overflow: hidden;
     }
 
     .counts {
-      display: inline-flex;
+      display: flex;
       flex-direction: row;
       justify-content: flex-end;
       align-items: center;
+      max-width: 100%;
+      overflow: hidden;
+
+      .count {
+        display: flex;
+        justify-content: flex-end;
+        min-width: 0;
+      }
+
+      .count:not(.count + .count) {
+        max-width: calc(100% - 90px);
+
+        .count-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
     }
 
     .count:last-of-type .and {

package/components/Resource/Detail/StatusRow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Bubble from '@shell/components/Resource/Detail/Card/PodsCard/Bubble.vue';
+import { RcCounterBadge } from '@components/Pill';
 import { StateColor, stateColorCssVar } from '@shell/utils/style';
 
 export interface Props {
@@ -24,7 +24,10 @@ const {
       {{ label }}
     </div>
     <div class="count">
-      <Bubble>{{ count }}</Bubble>
+      <RcCounterBadge
+        :count="count"
+        type="inactive"
+      />
     </div>
     <div class="percent text-muted">
       {{ percent.toFixed(1) }}%

package/components/Resource/Detail/TitleBar/__tests__/composables.test.ts

@@ -16,13 +16,14 @@ jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
 
 describe('composables: TitleBar', () => {
   const resource = {
-    nameDisplay:       'RESOURCE_NAME',
-    namespace:         'RESOURCE_NAMESPACE',
-    type:              'RESOURCE_TYPE',
-    stateBackground:   'RESOURCE_STATE_BACKGROUND',
-    stateDisplay:      'RESOURCE_STATE_DISPLAY',
-    description:       'RESOURCE_DESCRIPTION',
-    showConfiguration: jest.fn(),
+    nameDisplay:                 'RESOURCE_NAME',
+    namespace:                   'RESOURCE_NAMESPACE',
+    type:                        'RESOURCE_TYPE',
+    stateBackground:             'RESOURCE_STATE_BACKGROUND',
+    stateDisplay:                'RESOURCE_STATE_DISPLAY',
+    description:                 'RESOURCE_DESCRIPTION',
+    showConfiguration:           jest.fn(),
+    detailPageAdditionalActions: undefined as any,
   };
   const labelFor = 'LABEL_FOR';
   const schema = { type: 'SCHEMA' };
@@ -54,4 +55,34 @@ describe('composables: TitleBar', () => {
     props.value.onShowConfiguration?.('callback');
     expect(resource.showConfiguration).toHaveBeenCalledTimes(1);
   });
+
+  it('should include additionalActions from resource.detailPageAdditionalActions', async() => {
+    const additionalActions = [
+      {
+        label: 'Action 1', variant: 'secondary', onClick: jest.fn()
+      }
+    ];
+
+    resource.detailPageAdditionalActions = additionalActions;
+
+    mockStore.getters['currentStore'].mockImplementation(() => 'cluster');
+    mockStore.getters['cluster/schemaFor'].mockImplementation(() => schema);
+    mockStore.getters['type-map/labelFor'].mockImplementation(() => labelFor);
+
+    const props = useDefaultTitleBarProps(resource, ref(undefined));
+
+    expect(props.value.additionalActions).toStrictEqual(additionalActions);
+  });
+
+  it('should have undefined additionalActions when resource does not define detailPageAdditionalActions', async() => {
+    resource.detailPageAdditionalActions = undefined;
+
+    mockStore.getters['currentStore'].mockImplementation(() => 'cluster');
+    mockStore.getters['cluster/schemaFor'].mockImplementation(() => schema);
+    mockStore.getters['type-map/labelFor'].mockImplementation(() => labelFor);
+
+    const props = useDefaultTitleBarProps(resource, ref(undefined));
+
+    expect(props.value.additionalActions).toBeUndefined();
+  });
 });

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

@@ -2,6 +2,7 @@ import { mount, RouterLinkStub } from '@vue/test-utils';
 import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { createStore } from 'vuex';
+import { defineComponent, h } from 'vue';
 
 describe('component: TitleBar/index', () => {
   const resourceTypeLabel = 'RESOURCE_TYPE_LABEL';
@@ -77,7 +78,7 @@ describe('component: TitleBar/index', () => {
     const button = wrapper.find('.top > .actions > .show-configuration');
     const buttonComponent = button.getComponent<any>('rc-button-stub');
 
-    expect(buttonComponent.props('primary')).toStrictEqual(true);
+    expect(buttonComponent.props('variant')).toStrictEqual('primary');
     button.trigger('click');
 
     expect(wrapper.emitted()).toHaveProperty('show-configuration');
@@ -107,7 +108,7 @@ describe('component: TitleBar/index', () => {
     const actions = wrapper.find('.top > .actions');
     const actionMenuComponent = actions.getComponent<any>('action-menu-stub');
 
-    expect(actionMenuComponent.props('buttonRole')).toStrictEqual('multiAction');
+    expect(actionMenuComponent.props('buttonVariant')).toStrictEqual('multiAction');
     expect(actionMenuComponent.props('resource')).toStrictEqual(actionMenuResource);
   });
 
@@ -137,4 +138,107 @@ describe('component: TitleBar/index', () => {
     expect(wrapper.find('.bottom.description').exists()).toBeTruthy();
     expect(wrapper.find('.bottom.description').element.innerHTML).toStrictEqual(description);
   });
+
+  describe('additionalActions', () => {
+    it('should not render additional action buttons when additionalActions is not provided', async() => {
+      const wrapper = mount(TitleBar, {
+        props:  { resourceTypeLabel, resourceName },
+        global: { stubs: { 'router-link': RouterLinkStub, RcButton: true }, provide: { store } }
+      });
+
+      const actionButtons = wrapper.findAll('.top > .actions > rc-button-stub');
+
+      expect(actionButtons).toHaveLength(0);
+    });
+
+    it('should render buttons when additionalActions is an array of button props', async() => {
+      const onClick1 = jest.fn();
+      const onClick2 = jest.fn();
+      const additionalActions = [
+        {
+          label: 'Action 1', variant: 'secondary', onClick: onClick1
+        },
+        {
+          label: 'Action 2', variant: 'primary', size: 'large', onClick: onClick2
+        }
+      ];
+
+      const wrapper = mount(TitleBar, {
+        props: {
+          resourceTypeLabel, resourceName, additionalActions
+        },
+        global: { stubs: { 'router-link': RouterLinkStub, RcButton: true }, provide: { store } }
+      });
+
+      const actionButtons = wrapper.findAll('.top > .actions > rc-button-stub');
+
+      expect(actionButtons).toHaveLength(2);
+
+      const button1 = actionButtons[0].getComponent<any>('rc-button-stub');
+      const button2 = actionButtons[1].getComponent<any>('rc-button-stub');
+
+      expect(button1.props('variant')).toStrictEqual('secondary');
+      expect(button2.props('variant')).toStrictEqual('primary');
+      expect(button2.props('size')).toStrictEqual('large');
+    });
+
+    it('should call onClick handler when additional action button is clicked', async() => {
+      const onClick = jest.fn();
+      const additionalActions = [
+        {
+          label: 'Action 1', variant: 'secondary', onClick
+        }
+      ];
+
+      const wrapper = mount(TitleBar, {
+        props: {
+          resourceTypeLabel, resourceName, additionalActions
+        },
+        global: { stubs: { 'router-link': RouterLinkStub, RcButton: true }, provide: { store } }
+      });
+
+      const actionButton = wrapper.find('.top > .actions > rc-button-stub');
+
+      await actionButton.trigger('click');
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render a custom component when additionalActions is a Vue component', async() => {
+      const CustomComponent = defineComponent({
+        name:   'CustomActions',
+        render: () => h('div', { class: 'custom-actions' }, 'Custom Actions')
+      });
+
+      const wrapper = mount(TitleBar, {
+        props: {
+          resourceTypeLabel, resourceName, additionalActions: CustomComponent
+        },
+        global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+      });
+
+      expect(wrapper.find('.custom-actions').exists()).toBeTruthy();
+      expect(wrapper.find('.custom-actions').text()).toBe('Custom Actions');
+    });
+
+    it('should use slot content when additional-actions slot is provided', async() => {
+      const additionalActions = [
+        {
+          label: 'Action 1', variant: 'secondary', onClick: jest.fn()
+        }
+      ];
+
+      const wrapper = mount(TitleBar, {
+        props: {
+          resourceTypeLabel, resourceName, additionalActions
+        },
+        slots:  { 'additional-actions': '<button class="slot-button">Slot Button</button>' },
+        global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+      });
+
+      // Slot content should override the additionalActions prop
+      expect(wrapper.find('.slot-button').exists()).toBeTruthy();
+      expect(wrapper.find('.slot-button').text()).toBe('Slot Button');
+    });
+  });
 });

package/components/Resource/Detail/TitleBar/composables.ts

@@ -36,7 +36,8 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
         color: resourceValue.stateBackground,
         label: resourceValue.stateDisplay
       },
-      description: resourceValue.description,
+      description:       resourceValue.description,
+      additionalActions: resourceValue.detailPageAdditionalActions,
       onShowConfiguration
     };
   });

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

@@ -8,16 +8,23 @@ import { useStore } from 'vuex';
 import { useI18n } from '@shell/composables/useI18n';
 import RcButton from '@components/RcButton/RcButton.vue';
 import TabTitle from '@shell/components/TabTitle';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, VueElement, watch } from 'vue';
 import { _CONFIG, AS } from '@shell/config/query-params';
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
+import { ButtonVariantNewProps, ButtonSizeNewProps } from '~/pkg/rancher-components/src/components/RcButton/types';
+import { isArray } from 'lodash';
 
 export interface Badge {
   color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
   label: string;
 }
 
+export interface AdditionalActionButton extends ButtonVariantNewProps, ButtonSizeNewProps {
+  label: string;
+  onClick: () => void;
+}
+
 export interface TitleBarProps {
   resource: any;
   resourceTypeLabel: string;
@@ -27,6 +34,8 @@ export interface TitleBarProps {
   description?: string;
   badge?: Badge;
 
+  additionalActions?: VueElement | AdditionalActionButton[];
+
   // This should be replaced with a list of menu items we want to render.
   // I don't have the time right now to swap this out though.
   actionMenuResource?: any;
@@ -36,7 +45,7 @@ export interface TitleBarProps {
 
 <script setup lang="ts">
 const {
-  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, onShowConfiguration,
+  additionalActions, resource, resourceTypeLabel, resourceTo, resourceName, description, badge, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
 const store = useStore();
@@ -55,6 +64,8 @@ watch(
     router.push({ query: { [AS]: currentView.value } });
   }
 );
+
+const showAdditionalActionButtons = computed(() => isArray(additionalActions));
 </script>
 
 <template>
@@ -89,12 +100,31 @@ watch(
         />
       </Title>
       <div class="actions">
-        <slot name="additional-actions" />
+        <slot name="additional-actions">
+          <template v-if="additionalActions">
+            <template v-if="showAdditionalActionButtons">
+              <RcButton
+                v-for="(actionButtonProps, i) in (additionalActions as AdditionalActionButton[])"
+                :key="`action-button-${i}`"
+                :variant="actionButtonProps.variant"
+                :size="actionButtonProps.size"
+                @click="actionButtonProps.onClick"
+              >
+                {{ actionButtonProps.label }}
+              </RcButton>
+            </template>
+            <component
+              :is="additionalActions"
+              v-else
+            />
+          </template>
+        </slot>
         <RcButton
           v-if="onShowConfiguration"
           :data-testid="showConfigurationDataTestId"
           class="show-configuration"
-          :primary="true"
+          variant="primary"
+          size="large"
           :aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.showConfiguration', { resource: resourceName })"
           @click="() => emit('show-configuration', showConfigurationReturnFocusSelector)"
         >
@@ -106,7 +136,7 @@ watch(
         </RcButton>
         <ActionMenu
           v-if="actionMenuResource"
-          button-role="multiAction"
+          button-variant="multiAction"
           :resource="actionMenuResource"
           data-testid="masthead-action-menu"
           :button-aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.actionMenu', { resource: resourceName })"
@@ -143,7 +173,12 @@ watch(
     margin-right: 10px;
   }
 
-  .show-configuration {
+  .actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .show-configuration, &:deep() .actions button {
     margin-left: 16px;
   }
 

package/components/ResourceDetail/Masthead/__tests__/index.test.ts

@@ -8,7 +8,7 @@ jest.mock('@shell/composables/useIsNewDetailPageEnabled');
 jest.mock('@shell/components/ResourceDetail/Masthead/latest.vue', () => ({
   name:     'Latest',
   template: `<div>Latest</div>`,
-  props:    ['value', 'resourceSubtype']
+  props:    ['value', 'resourceSubtype', 'isCustomDetailOrEdit']
 }));
 jest.mock('@shell/components/ResourceDetail/Masthead/legacy.vue', () => ({
   name:     'Legacy',
@@ -67,4 +67,52 @@ describe('component: Masthead/index', () => {
 
     expect(component).toBeDefined();
   });
+
+  it('should pass isCustomDetailOrEdit as true when hasDetail is true', () => {
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+    const props = {
+      value:     { type: 'VALUE' },
+      mode:      _VIEW,
+      hasDetail: true,
+      hasEdit:   false
+    };
+
+    const wrapper = mount(Index, { props });
+
+    const component = wrapper.getComponent({ name: 'Latest' });
+
+    expect(component.props('isCustomDetailOrEdit')).toBe(true);
+  });
+
+  it('should pass isCustomDetailOrEdit as true when hasEdit is true', () => {
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+    const props = {
+      value:     { type: 'VALUE' },
+      mode:      _VIEW,
+      hasDetail: false,
+      hasEdit:   true
+    };
+
+    const wrapper = mount(Index, { props });
+
+    const component = wrapper.getComponent({ name: 'Latest' });
+
+    expect(component.props('isCustomDetailOrEdit')).toBe(true);
+  });
+
+  it('should pass isCustomDetailOrEdit as false when both hasDetail and hasEdit are false', () => {
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+    const props = {
+      value:     { type: 'VALUE' },
+      mode:      _VIEW,
+      hasDetail: false,
+      hasEdit:   false
+    };
+
+    const wrapper = mount(Index, { props });
+
+    const component = wrapper.getComponent({ name: 'Latest' });
+
+    expect(component.props('isCustomDetailOrEdit')).toBe(false);
+  });
 });