dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.10

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import ResourceRow, { Props as ResourceRowProps } from '@shell/components/Resource/Detail/ResourceRow.vue';
+
+export interface Props {
+  title: string;
+  rows: ResourceRowProps[];
+}
+</script>
+
+<script setup lang="ts">
+const { title, rows } = defineProps<Props>();
+</script>
+
+<template>
+  <Card :title="title">
+    <div class="resource-rows">
+      <ResourceRow
+        v-for="(row, i) in rows"
+        :key="i"
+        :label="row.label"
+        :color="row.color"
+        :to="row.to"
+        :counts="row.counts"
+      />
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.resource-rows {
+    display: flex;
+    flex-direction: column;
+
+    & > *:not(:first-of-type) {
+        margin-top: 4px;
+    }
+}
+</style>

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

@@ -0,0 +1,11 @@
+<template>
+  <div class="vertical-gap">
+&nbsp;
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vertical-gap {
+    height: 12px;
+}
+</style>

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

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+
+describe('component: Card/index', () => {
+  it('should render title and default slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { default: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(title);
+  });
+
+  it('should allow you to override the heading with slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { heading: content } });
+
+    expect(wrapper.find('.title').exists()).toBeFalsy();
+    expect(wrapper.find('.heading').element.innerHTML).toStrictEqual(content);
+  });
+
+  it('should allow you to override the title with slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { title: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
+  });
+
+  it('should allow you to insert heading-action with slot', async() => {
+    const content = '<div id="test">content</div>';
+    const wrapper = mount(Card, { slots: { 'heading-action': content } });
+
+    expect(wrapper.find('.heading #test').exists()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,84 @@
+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 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({});
+
+  const podSuccess = { stateSimpleColor: 'success', stateDisplay: 'Completed' };
+  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 card = wrapper.findComponent(Card);
+
+    expect(card.props('title')).toStrictEqual('component.resource.detail.card.podsCard.title');
+  });
+
+  it('should show Scaler when showScaling is true', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true }, global: { provide: { store } } });
+
+    expect(wrapper.find('.scaler').exists()).toBeTruthy();
+  });
+
+  it('should hide scaler when showScaling is false', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: false }, global: { provide: { store } } });
+
+    expect(wrapper.find('.scaler').exists()).toBeFalsy();
+  });
+
+  it('should pass the appropriate props to the Scaler component', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true, pods: [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 } } });
+    const statusBar = wrapper.findComponent(StatusBar);
+
+    const segments = statusBar.props('segments');
+
+    expect(segments[0].color).toStrictEqual('success');
+    expect(segments[0].percent).toStrictEqual(50);
+
+    expect(segments[1].color).toStrictEqual('error');
+    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 } } });
+    const rows = wrapper.findComponent(StatusRow);
+
+    expect(rows.props()).toStrictEqual({
+      color:   'success',
+      count:   1,
+      label:   'Completed',
+      percent: 50
+    });
+  });
+});

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

@@ -0,0 +1,72 @@
+import { mount } from '@vue/test-utils';
+import ResourceUsageCard from '@shell/components/Resource/Detail/Card/ResourceUsageCard/index.vue';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import { createStore } from 'vuex';
+
+describe('component: ResourceUsageCard', () => {
+  const title = 'TITLE';
+  const used = 20;
+  const available = 100;
+  const store = createStore({});
+  const unit = 'UNIT';
+
+  it('should pass the title passed in to the card title prop', async() => {
+    const wrapper = mount(ResourceUsageCard, {
+      props: {
+        title, used, available
+      },
+      global: { provide: { store } }
+    });
+
+    const card = wrapper.findComponent(Card);
+
+    expect(card.props('title')).toStrictEqual(title);
+  });
+
+  it('should render information in the appropriate places', async() => {
+    const wrapper = mount(ResourceUsageCard, {
+      props: {
+        title, used, available
+      },
+      global: { provide: { store } }
+    });
+
+    const numerical = wrapper.find('.numerical');
+    const usedDiv = numerical.find('.used');
+    const data = numerical.find('.data');
+
+    expect(usedDiv.element.innerHTML).toStrictEqual('component.resource.detail.card.resourceUsage.used');
+    expect(data.find('.amount').element.innerHTML).toStrictEqual(`component.resource.detail.card.resourceUsage.amount-{"used":"${ used }","available":"${ available }"}`);
+    expect(data.find('.unit').exists()).toBeFalsy();
+    expect(data.find('.spacer').exists()).toBeTruthy();
+    expect(data.find('.percentage').element.innerHTML).toStrictEqual('20%');
+  });
+
+  it('should render units when passed', async() => {
+    const wrapper = mount(ResourceUsageCard, {
+      props: {
+        title, used, available, unit
+      },
+      global: { provide: { store } }
+    });
+
+    const numerical = wrapper.find('.numerical');
+    const data = numerical.find('.data');
+
+    expect(data.find('.unit').element.innerHTML).toStrictEqual(unit);
+  });
+
+  it('should handle formatters properly', async() => {
+    const wrapper = mount(ResourceUsageCard, {
+      props: {
+        title, used, available, usedFormatter: (n: number) => `used: ${ n }`, availableFormatter: (n: number) => `available: ${ n }`
+      },
+      global: { provide: { store } }
+    });
+
+    const numerical = wrapper.find('.numerical');
+    const data = numerical.find('.data');
+
+    expect(data.find('.amount').element.innerHTML).toStrictEqual(`component.resource.detail.card.resourceUsage.amount-{"used":"used: ${ used }","available":"available: ${ available }"}`);
+  });
+});

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

@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils';
+import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import { useStore } from 'vuex';
+
+describe('component: Scaler', () => {
+  const ariaResourceName = 'pods';
+  const global = { provide: { store: useStore() } };
+
+  it('should have two buttons and a value', async() => {
+    const wrapper = mount(Scaler, {
+      props: { ariaResourceName, value: 2 },
+      global
+    });
+
+    expect(wrapper.find('.decrease').exists()).toBeTruthy();
+    expect(wrapper.find('.value').exists()).toBeTruthy();
+    expect(wrapper.find('.increase').exists()).toBeTruthy();
+  });
+
+  it('should render value in the correct location', async() => {
+    const value = 2;
+    const wrapper = mount(Scaler, {
+      props: { ariaResourceName, value },
+      global
+    });
+
+    expect(wrapper.find('.value').element.innerHTML).toStrictEqual(`${ value }`);
+  });
+
+  it('should render buttons without disabled class when within bounds', async() => {
+    const wrapper = mount(Scaler, {
+      props: {
+        ariaResourceName, value: 2, min: 1, max: 3
+      },
+      global
+    });
+
+    expect(wrapper.find('.decrease').element.attributes.getNamedItem('disabled')).toBeNull();
+    expect(wrapper.find('.increase').element.attributes.getNamedItem('disabled')).toBeNull();
+  });
+
+  it('should render buttons with disabled class when out of bounds', async() => {
+    const wrapper = mount(Scaler, {
+      props: {
+        ariaResourceName, value: 2, min: 2, max: 2
+      },
+      global
+    });
+
+    expect(wrapper.find('.decrease').element.attributes.getNamedItem('disabled')).toBeTruthy();
+    expect(wrapper.find('.increase').element.attributes.getNamedItem('disabled')).toBeTruthy();
+  });
+
+  it('should render aria labels', async() => {
+    const wrapper = mount(Scaler, {
+      props: {
+        ariaResourceName, value: 2, min: 2, max: 2
+      },
+      global
+    });
+
+    expect(wrapper.find('.decrease').element.attributes.getNamedItem('aria-label')?.value).toStrictEqual(`component.resource.detail.card.scaler.ariaLabel.decrease-{"resourceName":"${ ariaResourceName }"}`);
+    expect(wrapper.find('.increase').element.attributes.getNamedItem('aria-label')?.value).toStrictEqual(`component.resource.detail.card.scaler.ariaLabel.increase-{"resourceName":"${ ariaResourceName }"}`);
+  });
+
+  it('should emit @increase event when increase button clicked', async() => {
+    const wrapper = mount(Scaler, {
+      props: { ariaResourceName, value: 2 },
+      global
+    });
+
+    wrapper.find('.increase').trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('increase');
+  });
+
+  it('should emit @decrease event when decrease button clicked', async() => {
+    const wrapper = mount(Scaler, {
+      props: { ariaResourceName, value: 2 },
+      global
+    });
+
+    wrapper.find('.decrease').trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('decrease');
+  });
+});

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

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import StateCard from '@shell/components/Resource/Detail/Card/StateCard/index.vue';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
+
+describe('component: StateCard', () => {
+  const title = 'TITLE';
+  const counts = [{ label: 'label2', count: 3 }];
+  const row: any = {
+    label: 'label',
+    to:    'to',
+    color: 'success',
+    counts,
+  };
+
+  it('should pass the title passed in to the card title prop', async() => {
+    const wrapper = mount(StateCard, {
+      props: {
+        title,
+        rows: []
+      },
+    });
+
+    const card = wrapper.findComponent(Card);
+
+    expect(card.props('title')).toStrictEqual(title);
+  });
+
+  it('should have resource-rows class', async() => {
+    const wrapper = mount(StateCard, {
+      props: {
+        title,
+        rows: []
+      },
+    });
+
+    expect(wrapper.find('.resource-rows').exists()).toBeTruthy();
+  });
+
+  it('should pass props from rows to ResourceRows correctly', async() => {
+    const wrapper = mount(StateCard, {
+      props: {
+        title,
+        rows: [row]
+      },
+      global: { stubs: ['router-link'] }
+    });
+
+    const resourceRows = wrapper.findComponent(ResourceRow);
+
+    expect(resourceRows.props()).toStrictEqual(row);
+  });
+});

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

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
+
+describe('component: VerticalGap', () => {
+  const wrapper = mount(VerticalGap);
+
+  it('should have appropriate class', async() => {
+    expect(wrapper.element.className).toBe('vertical-gap');
+  });
+
+  it('should have blank content so the element can have height styled by the class', async() => {
+    expect(wrapper.element.innerHTML.trim()).toBe(' ');
+  });
+});

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

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+
+describe('component: Card/index', () => {
+  it('should render title and default slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { default: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(title);
+  });
+
+  it('should allow you to override the heading with slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { heading: content } });
+
+    expect(wrapper.find('.title').exists()).toBeFalsy();
+    expect(wrapper.find('.heading').element.innerHTML).toStrictEqual(content);
+  });
+
+  it('should allow you to override the title with slot', async() => {
+    const title = 'title';
+    const content = 'content';
+    const wrapper = mount(Card, { props: { title }, slots: { title: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
+  });
+
+  it('should allow you to insert heading-action with slot', async() => {
+    const content = '<div id="test">content</div>';
+    const wrapper = mount(Card, { slots: { 'heading-action': content } });
+
+    expect(wrapper.find('.heading #test').exists()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
+
+export interface CardProps {
+    title?: string;
+}
+
+const { title } = defineProps<CardProps>();
+
+</script>
+
+<template>
+  <div class="detail-card">
+    <div class="heading">
+      <slot name="heading">
+        <div class="title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </slot>
+      <slot name="heading-action" />
+    </div>
+    <VerticalGap />
+    <div class="body">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.detail-card {
+    padding: 16px;
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--border);
+
+    .heading {
+      display: flex;
+      justify-content: space-between;
+
+      height: 32px;
+
+      .title {
+          font-size: 18px;
+          font-weight: 600;
+          line-height: 21px;
+      }
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+}
+</style>

package/components/Resource/Detail/Metadata/Annotations/__tests__/index.test.ts

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils';
+import Annotations from '@shell/components/Resource/Detail/Metadata/Annotations/index.vue';
+import { createStore } from 'vuex';
+
+describe('component: Metadata/Annotations', () => {
+  it('should render KeyValue with the appropriate props', async() => {
+    const annotations = [{ key: 'key', value: 'value' }];
+    const wrapper = mount(Annotations, {
+      props:  { annotations },
+      global: { provide: { store: createStore({}) }, stubs: { KeyValue: true } }
+    });
+
+    const keyValue = wrapper.getComponent<any>('key-value-stub');
+
+    expect(keyValue.props('propertyName')).toStrictEqual('component.resource.detail.metadata.annotations.title');
+    expect(keyValue.props('rows')).toStrictEqual(annotations);
+    expect(keyValue.props('outline')).toStrictEqual(true);
+  });
+});

package/components/Resource/Detail/Metadata/Annotations/composable.ts

@@ -0,0 +1,12 @@
+import { Annotation } from '@shell/components/Resource/Detail/Metadata/Annotations/index.vue';
+import { computed, Ref, toValue } from 'vue';
+
+export const useDefaultAnnotations = (resource: any): Ref<Annotation[]> => {
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    const keyValuePairs = Object.entries<string>(resourceValue.annotations || {});
+
+    return keyValuePairs.map(([key, value]) => ({ key, value }));
+  });
+};

package/components/Resource/Detail/Metadata/Annotations/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import KeyValue, { Row } from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export type Annotation = Row;
+
+export interface AnnotationsProps {
+  annotations: Annotation[];
+
+  onShowConfiguration?: (returnFocusSelector: string) => void;
+}
+
+</script>
+
+<script setup lang="ts">
+const { annotations } = defineProps<AnnotationsProps>();
+const emit = defineEmits(['show-configuration']);
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <KeyValue
+    :propertyName="i18n.t('component.resource.detail.metadata.annotations.title')"
+    :rows="annotations"
+    :outline="true"
+
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+  />
+</template>