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

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

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { computed, toRefs } from 'vue';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+
+export type KeyValueType = {[key: string]: string};
+
+export interface Row {
+    key: string;
+    value: string;
+}
+
+export interface KeyValueProps {
+    propertyName: string;
+    rows: Row[];
+    maxRows?: number;
+    outline?: boolean;
+
+    onShowConfiguration?: (returnFocusSelector: string) => void;
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<KeyValueProps>(),
+  {
+    outline: false, maxRows: 4, onShowConfiguration: undefined
+  }
+);
+const {
+  propertyName, rows, maxRows, outline
+} = toRefs(props);
+
+const store = useStore();
+const i18n = useI18n(store);
+const emit = defineEmits(['show-configuration']);
+
+// Account for the show all button
+const visibleRowsLength = computed(() => (rows.value.length > maxRows.value ? maxRows.value - 1 : rows.value.length));
+const visibleRows = computed(() => rows.value.slice(0, visibleRowsLength.value));
+const lowercasePropertyName = computed(() => propertyName.value.toLowerCase());
+
+const showShowAllButton = computed(() => rows.value.length > maxRows.value);
+const showAllLabel = computed(() => `Show all ${ lowercasePropertyName.value }`);
+
+const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
+const showConfigurationEmptyDataTestId = computed(() => `empty-show-configuration_${ propertyName.value.replaceAll(' ', '').toLowerCase() }`);
+const showConfigurationEmptyFocusSelector = computed(() => `[data-testid="${ showConfigurationEmptyDataTestId.value }"]`);
+const showConfigurationMoreDataTestId = computed(() => `more-show-configuration_${ propertyName.value.replaceAll(' ', '').toLowerCase() }`);
+const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ showConfigurationMoreDataTestId.value }"]`);
+</script>
+
+<template>
+  <div class="key-value">
+    <div class="heading">
+      <span class="title text-deemphasized">{{ propertyName }}</span>
+      <span class="count">{{ rows.length }}</span>
+    </div>
+    <div
+      v-if="visibleRows.length === 0"
+      class="empty mmt-2 text-deemphasized"
+    >
+      <div class="no-rows">
+        {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
+      </div>
+      <div class="show-configuration mmt-1">
+        <a
+          :data-testid="showConfigurationEmptyDataTestId"
+          class="secondary text-deemphasized"
+          href="#"
+          @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationEmptyFocusSelector);}"
+        >
+          {{ i18n.t('component.resource.detail.metadata.keyValue.showConfiguration') }}
+        </a>
+      </div>
+    </div>
+    <div
+      v-for="row in visibleRows"
+      :key="displayValue(row)"
+      class="row"
+    >
+      <Rectangle
+        v-clean-tooltip="displayValue(row)"
+        :outline="outline"
+      >
+        {{ displayValue(row) }}
+      </Rectangle>
+    </div>
+    <a
+      v-if="showShowAllButton"
+      :data-testid="showConfigurationMoreDataTestId"
+      href="#"
+      class="show-all"
+      @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationMoreFocusSelector);}"
+    >
+      {{ showAllLabel }}
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.key-value {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .count {
+        margin-left: 24px;
+    }
+
+    .heading {
+        margin-bottom: 8px;
+    }
+
+    .row {
+        display: block;
+        width: 100%;
+
+        &:not(:nth-child(2)) {
+            margin-top: 4px;
+        }
+    }
+    .show-all {
+        margin-top: 8px;
+    }
+
+    .rectangle {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .no-rows {
+      line-height: 21px;
+    }
+}
+</style>

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

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

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

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

package/components/Resource/Detail/Metadata/Labels/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 { toRefs } from 'vue';
+import { useStore } from 'vuex';
+
+export type Label = Row;
+export interface LabelsProps {
+    labels: Label[];
+
+    onShowConfiguration?: (returnFocusSelector: string) => void;
+}
+
+</script>
+
+<script setup lang="ts">
+const props = defineProps<LabelsProps>();
+const { labels } = toRefs(props);
+const emit = defineEmits(['show-configuration']);
+
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <KeyValue
+    :propertyName="i18n.t('component.resource.detail.metadata.labels.title')"
+    :rows="labels"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+  />
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+export interface RectangleProps {
+    outline?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<RectangleProps>(),
+  { outline: false }
+);
+
+</script>
+
+<template>
+  <div
+    class="rectangle"
+    :class="{outline: props.outline}"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rectangle {
+    border: 1px solid var(--tag-bg);
+    border-radius: 4px;
+    padding: 0 8px;
+    height: 23px;
+    line-height: 23px;
+
+    &:not(.outline) {
+        background-color: var(--tag-bg);
+    }
+}
+</style>

package/components/Resource/Detail/Metadata/__tests__/KeyValue.test.ts

@@ -0,0 +1,107 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import KeyValue from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import { createStore } from 'vuex';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+
+describe('component: Metadata/IdentifyingInformation', () => {
+  const propertyName = 'PROPERTY_NAME';
+  const store = createStore({});
+  const cleanTooltip = jest.fn();
+  const directives = { 'clean-tooltip': cleanTooltip };
+  const rows = [{ key: 'KEY', value: 'VALUE' }];
+
+  afterEach(() => {
+    cleanTooltip.mockClear();
+  });
+
+  it('should render container with identifying information', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.key-value').exists()).toBeTruthy();
+  });
+
+  it('should render property name and count', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.heading .title').element.innerHTML.trim()).toStrictEqual(propertyName);
+    expect(wrapper.find('.heading .count').element.innerHTML.trim()).toStrictEqual(rows.length.toString());
+  });
+
+  it('should render no rows messaging', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows: [] },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.empty .no-rows').element.innerHTML.trim()).toStrictEqual(`component.resource.detail.metadata.keyValue.noRows-{"propertyName":"${ propertyName.toLowerCase() }"}`);
+    expect(wrapper.find('.empty .show-configuration a').text()).toStrictEqual('component.resource.detail.metadata.keyValue.showConfiguration');
+  });
+
+  it('should render show all button if rows length exceeds max', async() => {
+    const wrapper = mount(KeyValue, {
+      props: {
+        propertyName, rows: [...rows, ...rows], maxRows: 1
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.show-all').exists()).toBeTruthy();
+  });
+
+  it('should pass outline down to rectangle', async() => {
+    const wrapper = mount(KeyValue, {
+      props: {
+        propertyName, rows, outline: false
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    const rectangleComponent = wrapper.find('.row').findComponent(Rectangle);
+
+    expect(rectangleComponent.props('outline')).toStrictEqual(false);
+  });
+
+  it('should render a concatenated string for the tooltip and default slot of the rectangle', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    const row = rows[0];
+    const concatenated = `${ row.key }: ${ row.value }`;
+    const rectangleComponent = wrapper.find('.row').findComponent(Rectangle);
+
+    expect(rectangleComponent.element.innerHTML).toStrictEqual(concatenated);
+    expect(cleanTooltip.mock.calls[0][1].value).toStrictEqual(concatenated);
+  });
+});

package/components/Resource/Detail/Metadata/__tests__/Rectangle.test.ts

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+
+describe('component: Rectangle', () => {
+  it('should render container with class title and missing outline when passed outline:false', async() => {
+    const wrapper = mount(Rectangle, { props: { outline: false } });
+
+    expect(wrapper.find('.rectangle').exists()).toBeTruthy();
+    expect(wrapper.find('.rectangle.outline').exists()).toBeFalsy();
+  });
+
+  it('should render outline class when passed outline:true', async() => {
+    const wrapper = mount(Rectangle, { props: { outline: true } });
+
+    expect(wrapper.find('.rectangle.outline').exists()).toBeTruthy();
+  });
+
+  it('should render default slot', async() => {
+    const content = 'CONTENT';
+    const wrapper = mount(Rectangle, { slots: { default: content } });
+
+    expect(wrapper.find('.rectangle').element.innerHTML).toStrictEqual(content);
+  });
+});

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

@@ -0,0 +1,75 @@
+import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resource/Detail/Metadata/composables';
+import * as IdentifyingFields from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { computed } from 'vue';
+
+const mockDrawer = { openResourceDetailDrawer: jest.fn() };
+
+jest.mock('@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields');
+jest.mock('@shell/components/Drawer/ResourceDetailDrawer/composables', () => {
+  return {
+    useResourceDetailDrawer() {
+      return mockDrawer;
+    }
+  };
+});
+
+describe('composables: Metadata/composables', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useDefaultMetadataForLegacyPagesProps', () => {
+    const useProjectSpy = jest.spyOn(IdentifyingFields, 'useProject');
+    const useWorkspaceSpy = jest.spyOn(IdentifyingFields, 'useWorkspace');
+    const useNamespaceSpy = jest.spyOn(IdentifyingFields, 'useNamespace');
+    const useLiveDateSpy = jest.spyOn(IdentifyingFields, 'useLiveDate');
+    const useCreatedBySpy = jest.spyOn(IdentifyingFields, 'useCreatedBy');
+    const useResourceDetailsSpy = jest.spyOn(IdentifyingFields, 'useResourceDetails');
+
+    it('should filter out undefined identifyingInformation', () => {
+      const resource = {
+        type:        'RESOURCE',
+        annotations: { annotation: 'ANNOTATION' },
+        labels:      { label: 'LABEL' }
+      };
+      const result = useDefaultMetadataForLegacyPagesProps(resource);
+
+      result.value.onShowConfiguration();
+
+      expect(result.value.annotations).toStrictEqual([{ key: 'annotation', value: resource.annotations.annotation }]);
+      expect(result.value.labels).toStrictEqual([{ key: 'label', value: resource.labels.label }]);
+      expect(result.value.identifyingInformation).toHaveLength(0);
+      expect(mockDrawer.openResourceDetailDrawer).toHaveBeenCalledTimes(1);
+    });
+
+    it('should fill identifyingInformation', () => {
+      useProjectSpy.mockReturnValue(computed(() => ({ label: 'PROJECT' })));
+      useWorkspaceSpy.mockReturnValue(computed(() => ({ label: 'WORKSPACE' })));
+      useNamespaceSpy.mockReturnValue(computed(() => ({ label: 'NAMESPACE' })));
+      useLiveDateSpy.mockReturnValue(computed(() => ({ label: 'LIVE_DATE' })));
+      useCreatedBySpy.mockReturnValue(computed(() => ({ label: 'CREATED_BY' })));
+      useResourceDetailsSpy.mockReturnValue(computed(() => [{ label: 'RESOURCE_DETAILS' }]));
+
+      const resource = {
+        type:        'RESOURCE',
+        annotations: { annotation: 'ANNOTATION' },
+        labels:      { label: 'LABEL' }
+      };
+      const result = useDefaultMetadataForLegacyPagesProps(resource);
+
+      result.value.onShowConfiguration();
+
+      expect(result.value.annotations).toStrictEqual([{ key: 'annotation', value: resource.annotations.annotation }]);
+      expect(result.value.labels).toStrictEqual([{ key: 'label', value: resource.labels.label }]);
+      expect(result.value.identifyingInformation).toStrictEqual([
+        { label: 'PROJECT' },
+        { label: 'WORKSPACE' },
+        { label: 'NAMESPACE' },
+        { label: 'LIVE_DATE' },
+        { label: 'CREATED_BY' },
+        { label: 'RESOURCE_DETAILS' }
+      ]);
+      expect(mockDrawer.openResourceDetailDrawer).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { createStore } from 'vuex';
+
+describe('component: Metadata/index', () => {
+  const store = createStore({});
+  const stubs = ['IdentifyingInformation', 'KeyValue', 'Labels', 'Annotations'];
+
+  const identifyingInformation = [{ label: 'zero' }];
+  const keyValue = [{ key: 'key', value: 'value' }];
+
+  it('should render the container with metadata class', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.spaced-row.metadata').exists()).toBeTruthy();
+  });
+
+  it('should render identifying information with the appropriate class and rows', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    const identingInformationComponent = wrapper.find('.identifying-info').getComponent<any>('identifying-information-stub');
+
+    expect(identingInformationComponent.props('rows')).toStrictEqual(identifyingInformation);
+  });
+
+  it('should render both empty message if labels and annotations are empty and labels/annotations are hidden', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels').exists()).toBeFalsy();
+    expect(wrapper.find('.annotations').exists()).toBeFalsy();
+    const keyValueComponent = wrapper.find('.labels-and-annotations-empty').getComponent<any>('key-value-stub');
+
+    expect(keyValueComponent.props('rows')).toStrictEqual([]);
+    expect(keyValueComponent.props('propertyName')).toStrictEqual('component.resource.detail.metadata.labelsAndAnnotations');
+  });
+
+  it('should render labels and pass appropriate props and not render the empty message', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      keyValue,
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels-and-annotations-empty').exists()).toBeFalsy();
+
+    const labelsComponent = wrapper.find('.labels').getComponent<any>('labels-stub');
+
+    expect(labelsComponent.props('labels')).toStrictEqual(keyValue);
+  });
+
+  it('should render annotations and pass appropriate props and not render the empty message', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: keyValue
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels-and-annotations-empty').exists()).toBeFalsy();
+
+    const labelsComponent = wrapper.find('.annotations').getComponent<any>('annotations-stub');
+
+    expect(labelsComponent.props('annotations')).toStrictEqual(keyValue);
+  });
+});

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

@@ -0,0 +1,81 @@
+import { Row as IdentifyingInformationRow } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import { useDefaultIdentifyingInformation } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/composable';
+import { useDefaultLabels } from '@shell/components/Resource/Detail/Metadata/Labels/composable';
+import { useDefaultAnnotations } from '@shell/components/Resource/Detail/Metadata/Annotations/composable';
+import { computed, toValue, Ref } from 'vue';
+import { useResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import {
+  useCreatedBy,
+  useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
+} from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+
+export const useBasicMetadata = (resource: any) => {
+  const labels = useDefaultLabels(resource);
+  const annotations = useDefaultAnnotations(resource);
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+
+  return computed(() => {
+    return {
+      resource:            toValue(resource),
+      labels:              labels.value,
+      annotations:         annotations.value,
+      onShowConfiguration: (returnFocusSelector: string) => openResourceDetailDrawer(resource, returnFocusSelector)
+    };
+  });
+};
+
+export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInformation?: (IdentifyingInformationRow[] | Ref<IdentifyingInformationRow[]>)) => {
+  const defaultIdentifyingInformation = useDefaultIdentifyingInformation(resource);
+  const additionalIdentifyingInformationValue = toValue(additionalIdentifyingInformation);
+
+  const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
+  const basicMetaData = useBasicMetadata(resource);
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+
+  return computed(() => {
+    return {
+      resource:               toValue(resource),
+      identifyingInformation: identifyingInformation.value,
+      labels:                 basicMetaData.value.labels,
+      annotations:            basicMetaData.value.annotations,
+      onShowConfiguration:    (returnFocusSelector: string) => openResourceDetailDrawer(resource, returnFocusSelector)
+    };
+  });
+};
+
+export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
+  const resourceDetails = useResourceDetails(resource);
+  const project = useProject(resource);
+  const workspace = useWorkspace(resource);
+  const namespace = useNamespace(resource);
+  const liveDate = useLiveDate(resource);
+  const createdBy = useCreatedBy(resource);
+
+  const identifyingInformation = computed((): IdentifyingInformationRow[] => {
+    const defaultInfo = [
+      project?.value,
+      workspace?.value,
+      namespace?.value,
+      liveDate?.value,
+      createdBy?.value,
+    ];
+    const info = [
+      ...defaultInfo,
+      ...(resourceDetails?.value || [])
+    ];
+
+    return info.filter((info) => typeof info !== 'undefined');
+  });
+  const basicMetaData = useBasicMetadata(resource);
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+
+  return computed(() => {
+    return {
+      resource:               toValue(resource),
+      identifyingInformation: identifyingInformation.value,
+      labels:                 basicMetaData.value.labels,
+      annotations:            basicMetaData.value.annotations,
+      onShowConfiguration:    () => openResourceDetailDrawer(resource)
+    };
+  });
+};