dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

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>

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/identifying-fields.test.ts

@@ -0,0 +1,223 @@
+import {
+  useNamespace, useWorkspace, useLiveDate, useCreatedBy, useProject,
+  useResourceDetails
+} from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { NAMESPACE, FLEET } from '@shell/config/types';
+import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
+
+const mockStore = {
+  getters: {
+    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn()
+  }
+};
+const mockRoute = { params: { cluster: 'CLUSTER', namespace: 'NAMESPACE' } };
+const mockDrawer = { openResourceDetailDrawer: jest.fn() };
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+jest.mock('@shell/components/Drawer/ResourceDetailDrawer/composables', () => ({ useResourceDetailDrawer: () => mockDrawer }));
+
+describe('composables: IdentifyingFields', () => {
+  describe('useNamespace', () => {
+    it('should return undefined if namespace is falsy', () => {
+      const resource = {};
+      const result = useNamespace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined if namespaces is truthy', () => {
+      const resource = { namespaces: [] };
+      const result = useNamespace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid namespace row with namespaceLocation', () => {
+      const resource = { namespace: 'NAMESPACE', namespaceLocation: 'NAMESPACE_LOCATION' };
+      const result = useNamespace(resource);
+
+      expect(result?.value.to).toStrictEqual(resource.namespaceLocation);
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
+    });
+
+    it('should return a valid namespace row with computed `to`', () => {
+      const resource = { namespace: 'NAMESPACE' };
+      const result = useNamespace(resource);
+
+      expect(result?.value.to).toStrictEqual({
+        name:   `c-cluster-product-resource-id`,
+        params: {
+          product:  'PRODUCT_ID',
+          cluster:  'CLUSTER_ID',
+          resource: NAMESPACE,
+          id:       resource.namespace
+        }
+      });
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
+    });
+  });
+
+  describe('useWorkspace', () => {
+    it('should return undefined if productId is not fleet', () => {
+      const resource = { metadata: { namespace: true } };
+      const result = useWorkspace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined if productId is fleet and metadata namespace is falsy', () => {
+      mockStore.getters.productId = FLEET_NAME;
+      const resource = { };
+      const result = useWorkspace(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid workspace row', () => {
+      mockStore.getters.productId = FLEET_NAME;
+      const resource = { namespace: 'NAMESPACE', metadata: { namespace: true } };
+      const result = useWorkspace(resource);
+
+      expect(result?.value.to).toStrictEqual({
+        name:   `c-cluster-product-resource-id`,
+        params: {
+          product:  FLEET_NAME,
+          cluster:  'CLUSTER_ID',
+          resource: FLEET.WORKSPACE,
+          id:       mockRoute.params.namespace
+        }
+      });
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.workspace');
+    });
+  });
+
+  describe('useLiveDate', () => {
+    it('should return undefined if showAge is false', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: false });
+
+      const resource = { };
+      const result = useLiveDate(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid liveDate row', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
+
+      const resource = { creationTimestamp: 'CREATION_TIMESTAMP' };
+      const result = useLiveDate(resource);
+
+      expect(result?.value.valueOverride).toStrictEqual({
+        component: 'LiveDate',
+        props:     { value: resource.creationTimestamp }
+      });
+      expect(result?.value.value).toStrictEqual(resource.creationTimestamp);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.age');
+    });
+  });
+
+  describe('useCreatedBy', () => {
+    it('should return undefined if showCreatedBy is falsy', () => {
+      const resource = {};
+      const result = useCreatedBy(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid createdBy row', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
+
+      const resource = { showCreatedBy: true, createdBy: { displayName: 'CREATED_BY' } };
+      const result = useCreatedBy(resource);
+
+      expect(result?.value.to).toBeUndefined();
+      expect(result?.value.value).toStrictEqual(resource.createdBy.displayName);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.createdBy');
+      expect(result?.value.dataTestid).toStrictEqual('masthead-subheader-createdBy');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-createdBy_plain-text');
+    });
+
+    it('should return a valid createdBy row with createdBy.location', () => {
+      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
+
+      const resource = { showCreatedBy: true, createdBy: { displayName: 'CREATED_BY', location: 'LOCATION' } };
+      const result = useCreatedBy(resource);
+
+      expect(result?.value.to).toStrictEqual(resource.createdBy.location);
+      expect(result?.value.value).toStrictEqual(resource.createdBy.displayName);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.createdBy');
+      expect(result?.value.dataTestid).toStrictEqual('masthead-subheader-createdBy');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-createdBy-link');
+    });
+  });
+
+  describe('useProject', () => {
+    it('should return undefined if type is not namespace', () => {
+      const resource = { type: 'anything' };
+      const result = useProject(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined if project is falsy', () => {
+      const resource = { type: NAMESPACE };
+      const result = useProject(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return a valid project row', () => {
+      const resource = { type: NAMESPACE, project: { nameDisplay: 'PROJECT', detailLocation: 'LOCATION' } };
+      const result = useProject(resource);
+
+      expect(result?.value.to).toStrictEqual(resource.project.detailLocation);
+      expect(result?.value.value).toStrictEqual(resource.project.nameDisplay);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.project');
+    });
+  });
+
+  describe('useResourceDetails', () => {
+    it('should return undefined if details is falsy', () => {
+      const resource = { };
+      const result = useResourceDetails(resource);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return valid resourceDetail without valueOverride', () => {
+      const resource = { details: [{ label: 'LABEL', content: 'CONTENT' }] };
+      const result = useResourceDetails(resource);
+
+      expect(result?.value[0].label).toStrictEqual(resource.details[0].label);
+      expect(result?.value[0].value).toStrictEqual(resource.details[0].content);
+      expect(result?.value[0].valueOverride).toBeUndefined();
+    });
+
+    it('should omit separator details', () => {
+      const resource = { details: [{ separator: true }] };
+      const result = useResourceDetails(resource);
+
+      expect(result?.value).toHaveLength(0);
+    });
+
+    it('should return valid resourceDetail with valueOverride', () => {
+      const resource = {
+        details: [{
+          label: 'LABEL', content: 'CONTENT', formatter: 'FORMATTER', formatterOpts: { key: 'value' }
+        }]
+      };
+      const result = useResourceDetails(resource);
+
+      expect(result?.value[0].label).toStrictEqual(resource.details[0].label);
+      expect(result?.value[0].value).toStrictEqual(resource.details[0].content);
+      expect(result?.value[0].valueOverride?.component).toStrictEqual(resource.details[0].formatter);
+      expect(result?.value[0].valueOverride?.props).toStrictEqual({ value: resource.details[0].content, ...resource.details[0].formatterOpts });
+    });
+  });
+});

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

@@ -0,0 +1,103 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import IdentifyingInformation from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+import { markRaw } from 'vue';
+
+describe('component: Metadata/IdentifyingInformation', () => {
+  const label = 'LABEL';
+  const value = 'VALUE';
+  const status = 'error';
+  const to = 'http://google.com';
+
+  it('should render container with identifying information', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props:  { rows: [] },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.identifying-information').exists()).toBeTruthy();
+  });
+
+  it('should render basic label and value', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+    expect(wrapper.find('.value span').element.innerHTML.trim()).toStrictEqual(value);
+  });
+
+  it('should render a link value', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value,
+            to
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+
+    const routerLinkComponent = wrapper.find('.value').getComponent(RouterLinkStub);
+
+    expect(routerLinkComponent.props('to')).toStrictEqual(to);
+    expect(routerLinkComponent.element.innerHTML).toStrictEqual(value);
+  });
+
+  it('should render a status value', async() => {
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value,
+            status
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+    expect(wrapper.find('.value span').element.innerHTML.trim()).toStrictEqual(value);
+    expect(wrapper.find(`.value .status.${ status }`).exists()).toBeTruthy();
+  });
+
+  it('should render a valueOverride', async() => {
+    const valueOverride = {
+      component: markRaw(Rectangle),
+      props:     { outline: false }
+    };
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value,
+            valueOverride
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+
+    const testComponent = wrapper.find('.value').getComponent(Rectangle);
+
+    expect(testComponent.props('outline')).toStrictEqual(valueOverride.props.outline);
+  });
+});

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

@@ -0,0 +1,72 @@
+import { computed, ComputedRef, toValue } from 'vue';
+import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import {
+  useCertificate,
+  useExpires,
+  useImage, useIssuer, useLiveDate, useNamespace, useProject, useReady, useSecretCluster, useSecretType,
+  useServiceAccount
+} from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+
+export const useDefaultIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
+  const namespace = useNamespace(resource);
+  const liveDate = useLiveDate(resource);
+
+  return computed(() => {
+    return [
+      namespace?.value,
+      liveDate?.value
+    ].filter((info) => typeof info !== 'undefined');
+  });
+};
+
+export const useSecretIdentifyingInformation = (resource: any, isProjectSecret: boolean): ComputedRef<Row[]> => {
+  const namespace = isProjectSecret ? undefined : useNamespace(resource);
+  const project = isProjectSecret ? useProject(resource) : undefined;
+  const cluster = isProjectSecret ? useSecretCluster(resource) : undefined;
+  const age = useLiveDate(resource);
+  const secretType = useSecretType(resource);
+  const serviceAccount = useServiceAccount(resource);
+  const certificate = useCertificate(resource);
+  const issuer = useIssuer(resource);
+  const expires = useExpires(resource);
+
+  return computed(() => {
+    const rows = [
+      age?.value,
+      namespace?.value,
+      project?.value,
+      cluster?.value,
+      secretType?.value,
+      serviceAccount?.value,
+      certificate?.value,
+      issuer?.value,
+      expires?.value,
+    ];
+
+    return rows.filter((r) => typeof r !== 'undefined');
+  });
+};
+
+export const useDefaultWorkloadIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+  const image = useImage(resource);
+  const ready = useReady(resource);
+
+  return computed(() => [
+    image.value,
+    ready.value,
+    {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.up-to-date'),
+      value: resourceValue.upToDate,
+    },
+    {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.available'),
+      value: resourceValue.available,
+    },
+  ]);
+};