@rancher/shell 3.0.8 → 3.0.9-rc.2

package/components/Drawer/ResourceDetailDrawer/__tests__/ConfigTab.test.ts

@@ -38,13 +38,13 @@ describe('component: ResourceDetailDrawer/ConfigTab', () => {
     expect(component.props('name')).toStrictEqual('config-tab');
   });
 
-  it('should render a dynamic component within the .container and pass the correct props', () => {
+  it('should render a dynamic component within DrawerCard and pass the correct props', () => {
     const wrapper = mount(ConfigTab, {
       props: { resource, component: markRaw(DynamicComponent) },
       global
     });
 
-    const component = wrapper.find('.container').getComponent(DynamicComponent);
+    const component = wrapper.findComponent(DynamicComponent);
 
     expect(component.props('value')).toStrictEqual(resource);
     expect(component.props('mode')).toStrictEqual(_VIEW);

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -59,7 +59,6 @@ useResourceDetailDrawerProvider();
 </script>
 <template>
   <Drawer
-    class="resource-detail-drawer"
     :ariaTarget="title"
     @close="emit('close')"
   >
@@ -72,10 +71,10 @@ useResourceDetailDrawerProvider();
     </template>
     <template #body>
       <Tabbed
-        class="tabbed"
         :useHash="false"
         :showExtensionTabs="false"
         :componentTestid="componentTestid"
+        :remove-borders="true"
         @changed="({selectedName}) => {activeTab = selectedName;}"
       >
         <ConfigTab
@@ -92,7 +91,8 @@ useResourceDetailDrawerProvider();
     <template #additional-actions>
       <RcButton
         v-if="canEdit"
-        :primary="true"
+        variant="primary"
+        size="large"
         :aria-label="action.ariaLabel"
         :data-testid="editBttnDataTestId"
         @click="action.action"
@@ -102,20 +102,3 @@ useResourceDetailDrawerProvider();
     </template>
   </Drawer>
 </template>
-
-<style lang="scss" scoped>
-.resource-detail-drawer {
-  :deep() .tabbed {
-    & > .tabs {
-      border: none;
-    }
-
-    & > .tab-container {
-      border: none;
-      border-top: 1px solid var(--border);
-      padding: 0;
-      padding-top: 24px;
-    }
-  }
-}
-</style>

package/components/Drawer/types.ts

@@ -1,3 +1,4 @@
 export interface Props {
     ariaTarget: string;
+    removeFooter?: boolean;
 }

package/components/DynamicContent/DynamicContentCloseButton.vue

@@ -18,8 +18,8 @@ const markRead = () => {
 </script>
 <template>
   <RcButton
-    ghost
-    small
+    variant="ghost"
+    size="small"
     :aria-label="t('dynamicContent.action.close')"
     tabindex="0"
     @click="markRead()"

package/components/LocaleSelector.vue

@@ -79,7 +79,7 @@ export default {
       >
         <rc-dropdown-trigger
           data-testid="locale-selector"
-          link
+          variant="link"
           class="baseline locale-selector-btn"
           :aria-label="t('locale.menu')"
         >

package/components/Markdown.vue

@@ -93,7 +93,7 @@ export default {
       color: rgb(101, 109, 118);
       border-left: 0.25em solid rgb(208, 215, 222);
       padding: 0 1em;
-      margin-bottom: 16px;
+      margin: 10px 8px 8px 8px;
     }
 
     table {

package/components/PopoverCard.vue

@@ -57,7 +57,7 @@ watch(
       >
         <slot name="default" />
         <RcButton
-          ghost
+          variant="ghost"
           class="focus-button"
           :aria-label="props.showPopoverAriaLabel"
           aria-haspopup="true"
@@ -128,7 +128,7 @@ watch(
     display: inline-block;
   }
 
-  .focus-button {
+  .rc-button.btn.focus-button {
     margin-left: 4px;
     margin-right: 2px;
     padding: 0;
@@ -160,7 +160,7 @@ watch(
   }
 
   &:deep() {
-    & > .v-popper > .btn.role-link {
+    & > .v-popper > .btn.variant-link {
       padding: 0;
       min-height: initial;
       line-height: initial;

package/components/Resource/Detail/Card/ExtrasCard.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import { BLANK_CLUSTER } from '@shell/store/store-types';
+</script>
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+const i18n = useI18n(store);
+
+const extensionsUrl = router.resolve({
+  name:   'c-cluster-uiplugins',
+  params: { cluster: BLANK_CLUSTER }
+}).href;
+
+const clusterToolsUrl = router.resolve({
+  name:   'c-cluster-apps-charts',
+  params: { cluster: BLANK_CLUSTER }
+}).href;
+</script>
+
+<template>
+  <Card :title="i18n.t('component.resource.detail.card.extrasCard.title')">
+    <p
+      v-clean-html="i18n.t('component.resource.detail.card.extrasCard.message', { extensionsUrl, clusterToolsUrl }, true)"
+      class="message text-deemphasized"
+    />
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.message {
+  margin: 0;
+  line-height: 1.5;
+}
+</style>

package/components/Resource/Detail/Card/StateCard/__tests__/composables.test.ts

@@ -0,0 +1,142 @@
+import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
+
+describe('useResourceCardRow', () => {
+  describe('with default keys', () => {
+    it('should return undefined counts when resources is empty', () => {
+      const result = useResourceCardRow('Test', []);
+
+      expect(result.label).toBe('Test');
+      expect(result.color).toBeUndefined();
+      expect(result.counts).toBeUndefined();
+    });
+
+    it('should aggregate resources by stateDisplay', () => {
+      const resources = [
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'error', stateDisplay: 'Failed' }
+      ];
+
+      const result = useResourceCardRow('Pods', resources);
+
+      expect(result.label).toBe('Pods');
+      expect(result.counts).toHaveLength(2);
+    });
+
+    it('should return highest alert color as the main color', () => {
+      const resources = [
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'error', stateDisplay: 'Failed' },
+        { stateSimpleColor: 'warning', stateDisplay: 'Pending' }
+      ];
+
+      const result = useResourceCardRow('Pods', resources);
+
+      expect(result.color).toBe('error');
+    });
+
+    it('should sort counts by alert level (error first)', () => {
+      const resources = [
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'error', stateDisplay: 'Failed' },
+        { stateSimpleColor: 'warning', stateDisplay: 'Pending' }
+      ];
+
+      const result = useResourceCardRow('Pods', resources);
+
+      expect(result.counts![0].color).toBe('error');
+      expect(result.counts![1].color).toBe('warning');
+      expect(result.counts![2].color).toBe('success');
+    });
+
+    it('should sort by count when colors are equal', () => {
+      const resources = [
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'success', stateDisplay: 'Completed' }
+      ];
+
+      const result = useResourceCardRow('Pods', resources);
+
+      expect(result.counts![0].label).toBe('running');
+      expect(result.counts![0].count).toBe(3);
+      expect(result.counts![1].label).toBe('completed');
+      expect(result.counts![1].count).toBe(1);
+    });
+
+    it('should use default color when stateSimpleColor is undefined', () => {
+      const resources = [
+        { stateDisplay: 'Unknown' }
+      ];
+
+      const result = useResourceCardRow('Pods', resources);
+
+      expect(result.color).toBe('disabled');
+    });
+
+    it('should include to parameter when provided', () => {
+      const to = { hash: '#pods' };
+      const result = useResourceCardRow('Pods', [], undefined, undefined, to);
+
+      expect(result.to).toStrictEqual(to);
+    });
+  });
+
+  describe('with custom keys', () => {
+    it('should use custom stateColorKey', () => {
+      const resources = [
+        { customColor: 'error', stateDisplay: 'Failed' },
+        { customColor: 'success', stateDisplay: 'Running' }
+      ];
+
+      const result = useResourceCardRow('Conditions', resources, 'customColor');
+
+      expect(result.color).toBe('error');
+    });
+
+    it('should use custom stateDisplayKey', () => {
+      const resources = [
+        { stateSimpleColor: 'success', condition: 'Available' },
+        { stateSimpleColor: 'success', condition: 'Available' },
+        { stateSimpleColor: 'success', condition: 'Progressing' }
+      ];
+
+      const result = useResourceCardRow('Conditions', resources, undefined, 'condition');
+
+      // Both have same color (success), so sorted by count (higher first)
+      expect(result.counts![0].label).toBe('available');
+      expect(result.counts![0].count).toBe(2);
+      expect(result.counts![1].label).toBe('progressing');
+      expect(result.counts![1].count).toBe(1);
+    });
+
+    it('should use both custom keys together', () => {
+      const resources = [
+        { statusColor: 'error', status: 'False' },
+        { statusColor: 'disabled', status: 'True' }
+      ];
+
+      const result = useResourceCardRow('Status', resources, 'statusColor', 'status');
+
+      expect(result.color).toBe('error');
+      expect(result.counts).toContainEqual(expect.objectContaining({ label: 'false', color: 'error' }));
+      expect(result.counts).toContainEqual(expect.objectContaining({ label: 'true', color: 'disabled' }));
+    });
+  });
+
+  describe('lowercase handling', () => {
+    it('should convert stateDisplay to lowercase', () => {
+      const resources = [
+        { stateSimpleColor: 'success', stateDisplay: 'RUNNING' },
+        { stateSimpleColor: 'success', stateDisplay: 'Running' }
+      ];
+
+      const result = useResourceCardRow('Pods', resources);
+
+      expect(result.counts).toHaveLength(1);
+      expect(result.counts![0].label).toBe('running');
+      expect(result.counts![0].count).toBe(2);
+    });
+  });
+});

package/components/Resource/Detail/Card/StateCard/composables.ts

@@ -1,20 +1,50 @@
-import { extractCounts, Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.vue';
+import { Count, Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.types';
 import { useI18n } from '@shell/composables/useI18n';
 import { INGRESS, SERVICE } from '@shell/config/types';
-import { getHighestAlertColor } from '@shell/utils/style';
+import { isHigherAlert, StateColor } from '@shell/utils/style';
 import { computed, Ref, toValue } from 'vue';
 import { useStore } from 'vuex';
-import { Props as StateCardProps } from '@shell/components/Resource/Detail/Card/StateCard/index.vue';
+import { Props as StateCardProps } from '@shell/components/Resource/Detail/Card/StateCard/types';
 import { RouteLocationRaw } from 'vue-router';
 
-export function useResourceCardRow(label: string, resources: any[], to?: RouteLocationRaw): ResourceRowProps {
-  const colors = resources.map((r: any) => r.stateSimpleColor);
-  const states = resources.map((r: any) => r.stateDisplay.toLowerCase());
+export function useResourceCardRow(label: string, resources: any[], stateColorKey = 'stateSimpleColor', stateDisplayKey = 'stateDisplay', to?: RouteLocationRaw): ResourceRowProps {
+  const agg: any = {};
+
+  resources.forEach((r: any) => {
+    const state = r[stateDisplayKey]?.toLowerCase();
+    const color = r[stateColorKey] || 'disabled';
+
+    agg[state] = agg[state] || {
+      color, label: state, count: 0
+    };
+    agg[state].count++;
+  });
+
+  interface Tuple extends Count {
+    color: StateColor;
+  }
+  const tuples: Tuple[] = Object.values(agg);
+
+  tuples.sort((left: any, right: any) => {
+    if (isHigherAlert(left.color, right.color)) {
+      return -1;
+    }
+
+    if (left.color !== right.color) {
+      return 1;
+    }
+
+    if (left.count === right.count) {
+      return 0;
+    }
+
+    return left.count > right.count ? -1 : 1;
+  });
 
   return {
     label,
-    color:  resources.length ? getHighestAlertColor(colors) : undefined,
-    counts: resources.length ? extractCounts(states) : undefined,
+    color:  tuples.length ? tuples[0].color : undefined,
+    counts: tuples.length ? tuples : undefined,
     to
   };
 }
@@ -27,7 +57,7 @@ export interface Pairs {
 
 export function useDefaultResources(pairs: Ref<Pairs[]>) {
   const pairsValue = toValue(pairs);
-  const rows = computed(() => pairsValue.map(({ label, resources, to }) => useResourceCardRow(label, resources, to)));
+  const rows = computed(() => pairsValue.map(({ label, resources, to }) => useResourceCardRow(label, resources, undefined, undefined, to)));
 
   return rows;
 }
@@ -93,13 +123,13 @@ export function useDefaultWorkloadInsightsCardProps(): StateCardProps {
   const rows: ResourceRowProps[] = [
     {
       label:  i18n.t('component.resource.detail.card.insightsCard.rows.conditions'),
-      to:     '#',
+      to:     '#conditions',
       color:  'disabled',
       counts: [{ label: 'Available', count: 1 }, { label: 'Progressing', count: 1 }]
     },
     {
       label:  i18n.t('component.resource.detail.card.insightsCard.rows.events'),
-      to:     '#',
+      to:     '#events',
       color:  'disabled',
       counts: [{ label: 'Normal', count: 2 }]
     }

package/components/Resource/Detail/Card/StateCard/index.vue

@@ -1,14 +1,8 @@
-<script lang="ts">
+<script setup lang="ts">
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
-import ResourceRow, { Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.vue';
+import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
+import { Props } from './types';
 
-export interface Props {
-  title: string;
-  rows: ResourceRowProps[];
-}
-</script>
-
-<script setup lang="ts">
 const { title, rows } = defineProps<Props>();
 </script>
 

package/components/Resource/Detail/Card/StateCard/types.ts

@@ -0,0 +1,6 @@
+import { Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.types';
+
+export interface Props {
+  title: string;
+  rows: ResourceRowProps[];
+}

package/components/Resource/Detail/Card/{PodsCard → StatusCard}/index.vue

@@ -10,7 +10,8 @@ import { computed } from 'vue';
 import { useStore } from 'vuex';
 
 export interface Props {
-  pods?: any[];
+  title: string;
+  resources?: any[];
   showScaling?: boolean;
 }
 </script>
@@ -19,7 +20,7 @@ export interface Props {
 const store = useStore();
 const i18n = useI18n(store);
 
-const props = withDefaults(defineProps<Props>(), { pods: undefined, showScaling: false });
+const props = withDefaults(defineProps<Props>(), { resources: undefined, showScaling: false });
 const emit = defineEmits(['decrease', 'increase']);
 
 const segmentAccumulator = computed(() => {
@@ -28,8 +29,8 @@ const segmentAccumulator = computed(() => {
   }
   const accumulator: {[key in StateColor]?: Value} = {};
 
-  props.pods?.forEach((pod: any) => {
-    const color: StateColor = pod.stateSimpleColor;
+  props.resources?.forEach((resource: any) => {
+    const color: StateColor = resource.stateSimpleColor;
 
     accumulator[color] = accumulator[color] || { count: 0 };
     accumulator[color].count++;
@@ -45,10 +46,10 @@ const rowAccumulator = computed(() => {
   }
   const accumulator: {[key in string]: Value} = {};
 
-  props.pods?.forEach((pod: any) => {
-    accumulator[pod.stateDisplay] = accumulator[pod.stateDisplay] || { count: 0 };
-    accumulator[pod.stateDisplay].count++;
-    accumulator[pod.stateDisplay].color = pod.stateSimpleColor.replace('text-', '') as StateColor;
+  props.resources?.forEach((resource: any) => {
+    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0 };
+    accumulator[resource.stateDisplay].count++;
+    accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
   });
 
   return accumulator;
@@ -58,7 +59,7 @@ const percent = (count: number, total: number) => {
   return count / total * 100;
 };
 
-const count = computed(() => props.pods?.length || 0);
+const count = computed(() => props.resources?.length || 0);
 
 const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
 const segments = computed(() => segmentColors.value.map((color: StateColor) => ({
@@ -82,7 +83,7 @@ const rows = computed(() => {
 </script>
 
 <template>
-  <Card :title="i18n.t('component.resource.detail.card.podsCard.title')">
+  <Card :title="title">
     <template
       v-if="props.showScaling"
       #heading-action

package/components/Resource/Detail/Card/__tests__/PodsCard.test.ts

@@ -1,28 +1,11 @@
 import { mount } from '@vue/test-utils';
-import Bubble from '@shell/components/Resource/Detail/Card/PodsCard/Bubble.vue';
-import PodsCard from '@shell/components/Resource/Detail/Card/PodsCard/index.vue';
+import PodsCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
 import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
 import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
 import { createStore } from 'vuex';
 
-describe('component: Bubble', () => {
-  it('should render element with bubble class for styling', async() => {
-    const content = 'content';
-    const wrapper = mount(Bubble, { slots: { default: content } });
-
-    expect(wrapper.element.className).toStrictEqual('bubble');
-  });
-
-  it('should render default slot content', async() => {
-    const content = 'content';
-    const wrapper = mount(Bubble, { slots: { default: content } });
-
-    expect(wrapper.find('.bubble').element.innerHTML).toStrictEqual(content);
-  });
-});
-
 describe('component: PodsCard', () => {
   const store = createStore({});
 
@@ -30,11 +13,12 @@ describe('component: PodsCard', () => {
   const podFail = { stateSimpleColor: 'error', stateDisplay: 'Error' };
 
   it('should pass title to Card prop correctly', async() => {
-    const wrapper = mount(PodsCard, { props: { showScaling: true }, global: { provide: { store } } });
+    const title = 'component.resource.detail.card.podsCard.title';
+    const wrapper = mount(PodsCard, { props: { title, showScaling: true }, global: { provide: { store } } });
 
     const card = wrapper.findComponent(Card);
 
-    expect(card.props('title')).toStrictEqual('component.resource.detail.card.podsCard.title');
+    expect(card.props('title')).toStrictEqual(title);
   });
 
   it('should show Scaler when showScaling is true', async() => {
@@ -50,15 +34,25 @@ describe('component: PodsCard', () => {
   });
 
   it('should pass the appropriate props to the Scaler component', async() => {
-    const wrapper = mount(PodsCard, { props: { showScaling: true, pods: [podSuccess] }, global: { provide: { store } } });
+    const wrapper = mount(PodsCard, {
+      props: {
+        title: 'Test', showScaling: true, resources: [podSuccess]
+      },
+      global: { provide: { store } }
+    });
     const scaler = wrapper.findComponent(Scaler);
 
     expect(scaler.props('value')).toStrictEqual(1);
     expect(scaler.props('min')).toStrictEqual(0);
   });
 
-  it('should pass the appropriate props to the StatusBar component based on the pods input', async() => {
-    const wrapper = mount(PodsCard, { props: { showScaling: true, pods: [podSuccess, podFail] }, global: { provide: { store } } });
+  it('should pass the appropriate props to the StatusBar component based on the resources input', async() => {
+    const wrapper = mount(PodsCard, {
+      props: {
+        title: 'Test', showScaling: true, resources: [podSuccess, podFail]
+      },
+      global: { provide: { store } }
+    });
     const statusBar = wrapper.findComponent(StatusBar);
 
     const segments = statusBar.props('segments');
@@ -70,8 +64,13 @@ describe('component: PodsCard', () => {
     expect(segments[1].percent).toStrictEqual(50);
   });
 
-  it('should pass the appropriate props to the StatusRow component based on the pods input', async() => {
-    const wrapper = mount(PodsCard, { props: { showScaling: true, pods: [podSuccess, podFail] }, global: { provide: { store } } });
+  it('should pass the appropriate props to the StatusRow component based on the resources input', async() => {
+    const wrapper = mount(PodsCard, {
+      props: {
+        title: 'Test', showScaling: true, resources: [podSuccess, podFail]
+      },
+      global: { provide: { store } }
+    });
     const rows = wrapper.findComponent(StatusRow);
 
     expect(rows.props()).toStrictEqual({

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');
+  });
+});