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

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

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

@@ -0,0 +1,317 @@
+import { useI18n } from '@shell/composables/useI18n';
+import { computed, ComputedRef, markRaw, toValue } from 'vue';
+import Additional from '@shell/components/Resource/Detail/Additional.vue';
+import { useStore } from 'vuex';
+import {
+  NAMESPACE, FLEET, SERVICE_ACCOUNT, SECRET, CAPI
+} from '@shell/config/types';
+import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
+import { useRoute } from 'vue-router';
+import { TYPES as SECRET_TYPES } from '@shell/models/secret';
+import { KUBERNETES } from '@shell/config/labels-annotations';
+
+export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.namespace || resourceValue.namespaces) {
+    return;
+  }
+
+  return computed(() => {
+    const to = resourceValue.namespaceLocation || {
+      name:   `c-cluster-product-resource-id`,
+      params: {
+        product:  store.getters['productId'],
+        cluster:  store.getters['clusterId'],
+        resource: NAMESPACE,
+        id:       resourceValue.namespace
+      }
+    };
+
+    return {
+      label:           i18n.t('component.resource.detail.metadata.identifyingInformation.namespace'),
+      value:           resourceValue.namespace,
+      valueDataTestid: 'masthead-subheader-namespace',
+      to
+    };
+  });
+};
+
+export const useWorkspace = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+  const route = useRoute();
+
+  const isWorkspace = store.getters['productId'] === FLEET_NAME && !!resourceValue?.metadata?.namespace;
+
+  if (!isWorkspace) {
+    return;
+  }
+
+  return computed(() => ({
+    label: i18n.t('component.resource.detail.metadata.identifyingInformation.workspace'),
+    value: resourceValue.namespace,
+    to:    {
+      name:   `c-cluster-product-resource-id`,
+      params: {
+        product:  store.getters['productId'],
+        cluster:  store.getters['clusterId'],
+        resource: FLEET.WORKSPACE,
+        id:       route.params.namespace
+      }
+    }
+  }));
+};
+
+export const useLiveDate = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  const options = store.getters[`type-map/optionsFor`](resource.type);
+
+  if (!options.showAge) {
+    return;
+  }
+
+  return computed(() => ({
+    label:         i18n.t('component.resource.detail.metadata.identifyingInformation.age'),
+    valueOverride: {
+      component: 'LiveDate',
+      props:     { value: resourceValue.creationTimestamp }
+    },
+    value: resourceValue.creationTimestamp,
+  }));
+};
+
+export const useCreatedBy = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.showCreatedBy) {
+    return;
+  }
+
+  return computed(() => {
+    const to = resourceValue.createdBy.location || undefined;
+
+    return {
+      label:           i18n.t('component.resource.detail.metadata.identifyingInformation.createdBy'),
+      value:           resourceValue.createdBy.displayName,
+      to,
+      dataTestid:      'masthead-subheader-createdBy',
+      valueDataTestid: to ? 'masthead-subheader-createdBy-link' : 'masthead-subheader-createdBy_plain-text'
+    };
+  });
+};
+
+export const useProject = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  // Only show project if one of these types
+  if (resource.type !== NAMESPACE && resource.type !== SECRET) {
+    return;
+  }
+
+  if (!resourceValue.project) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.project'),
+      value: resourceValue.project?.nameDisplay,
+      to:    resourceValue.project?.detailLocation
+    };
+  });
+};
+
+export const useSecretCluster = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      label: store.getters['type-map/labelFor']({ id: CAPI.RANCHER_CLUSTER }),
+      value: resourceValue.projectCluster?.nameDisplay,
+    };
+  });
+};
+
+export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]> => {
+  const details = resource.details;
+
+  if (!details) {
+    return;
+  }
+
+  const extractValueOverride = (detail: any) => {
+    if (!detail.formatter) {
+      return;
+    }
+
+    return {
+      component: detail.formatter,
+      props:     {
+        value: detail.content,
+        ...detail.formatterOpts
+      }
+    };
+  };
+
+  return computed(() => {
+    return details
+      .filter((detail: any) => !detail.separator)
+      .map((detail: any) => {
+        return {
+          label:         detail.label,
+          value:         detail.content,
+          valueOverride: extractValueOverride(detail)
+        };
+      });
+  });
+};
+
+export const useImage = (resource: any): ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  return computed(() => ({
+    label:         i18n.t('component.resource.detail.metadata.identifyingInformation.image'),
+    value:         resourceValue.imageNames,
+    valueOverride: {
+      component: markRaw(Additional),
+      props:     { items: resourceValue.imageNames }
+    },
+  }));
+};
+
+export const useReady = (resource: any): ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  return computed(() => ({
+    label: i18n.t('component.resource.detail.metadata.identifyingInformation.ready'),
+    value: resourceValue.ready,
+  }));
+};
+
+export const useSecretType = (resource: any): ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.type'),
+      value: resourceValue.typeDisplay,
+    };
+  });
+};
+
+export const useServiceAccount = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (resourceValue._type !== SECRET_TYPES.SERVICE_ACCT) {
+    return;
+  }
+
+  const serviceAccountName = resourceValue.metadata?.annotations?.[KUBERNETES.SERVICE_ACCOUNT_NAME];
+
+  if (!serviceAccountName) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.serviceAccount'),
+      value: serviceAccountName,
+      to:    {
+        name:   `c-cluster-product-resource-namespace-id`,
+        params: {
+          product:   store.getters['productId'],
+          cluster:   store.getters['clusterId'],
+          namespace: resource.namespace,
+          resource:  SERVICE_ACCOUNT,
+          id:        serviceAccountName
+        }
+      }
+    };
+  });
+};
+
+export const useCertificate = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.cn) {
+    return;
+  }
+
+  const certificate = resourceValue.plusMoreNames ? `${ resourceValue.cn } ${ i18n.t('secret.certificate.plusMore', { n: resourceValue.plusMoreNames }) }` : resourceValue.cn;
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.certificate'),
+      value: certificate,
+    };
+  });
+};
+
+export const useIssuer = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.issuer) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.issuer'),
+      value: resourceValue.issuer,
+    };
+  });
+};
+
+export const useExpires = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.notAfter) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label:         i18n.t('component.resource.detail.metadata.identifyingInformation.expires'),
+      valueOverride: {
+        component: markRaw(Date),
+        props:     {
+          value: resourceValue.notAfter,
+          class: resourceValue.dateClass
+        }
+      },
+      value: resourceValue.notAfter,
+    };
+  });
+};

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

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { RouteLocationRaw } from 'vue-router';
+
+export interface Row {
+    label: string;
+    value?: string;
+    valueOverride?: {
+      component: any,
+      props?: Object
+    },
+    to?: RouteLocationRaw;
+    dataTestid?: string;
+    valueDataTestid?: string;
+    status?: 'success' | 'warning' | 'info' | 'error',
+}
+
+export interface MetadataProps {
+  rows: Row[];
+}
+</script>
+
+<script setup lang="ts">
+const { rows } = defineProps<MetadataProps>();
+
+const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`.toLowerCase().replaceAll(' ', '');
+</script>
+
+<template>
+  <div class="identifying-information">
+    <div
+      v-for="row in rows"
+      :key="`${row.label}:${row.value}`"
+      class="row"
+      :data-testid="row.dataTestid"
+    >
+      <label
+        class="label text-deemphasized"
+        :for="getRowValueId(row)"
+      >
+        {{ row.label }}
+      </label>
+      <div
+        v-if="row.valueOverride?.component && row.value"
+        :id="getRowValueId(row)"
+        class="value"
+      >
+        <component
+          :is="row.valueOverride?.component"
+          v-if="row.valueOverride?.component"
+          v-bind="row.valueOverride?.props"
+          :data-testid="row.valueDataTestid"
+        />
+      </div>
+      <div
+        v-else
+        :id="getRowValueId(row)"
+        class="value"
+      >
+        <div
+          v-if="row.status"
+          :class="['status', row.status]"
+        />
+        <router-link
+          v-if="row.value && row.to"
+          :to="row.to"
+          :data-testid="row.valueDataTestid"
+        >
+          {{ row.value }}
+        </router-link>
+        <span
+          v-else-if="row.value"
+          :data-testid="row.valueDataTestid"
+          tabindex="0"
+          :aria-label="row.value"
+        >{{ row.value }}</span>
+        <span
+          v-else
+          class="text-muted"
+          :data-testid="row.valueDataTestid"
+        >&mdash;</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.identifying-information {
+    display: flex;
+    flex-direction: column;
+
+    .row {
+      margin-bottom: 8px;
+
+      .value {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        &, & * {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      .label {
+        width: 30%;
+        min-width: 120px;
+      }
+
+      .status {
+        display: inline-block;
+        $size: 8px;
+        border-radius: 50%;
+        width: $size;
+        height: $size;
+        margin-right: 12px;
+
+        &.success {
+          background-color: var(--success);
+        }
+
+        &.warning {
+          background-color: var(--warning);
+        }
+
+        &.error {
+          background-color: var(--error);
+        }
+
+        &.info {
+          background-color: var(--info);
+        }
+      }
+
+    }
+
+}
+</style>