@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.6

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

@@ -0,0 +1,298 @@
+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 } 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);
+
+  if (resource.type !== NAMESPACE || !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 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

@@ -9,6 +9,8 @@ export interface Row {
       props?: Object
     },
     to?: RouteLocationRaw;
+    dataTestid?: string;
+    valueDataTestid?: string;
     status?: 'success' | 'warning' | 'info' | 'error',
 }
 
@@ -19,6 +21,8 @@ export interface MetadataProps {
 
 <script setup lang="ts">
 const { rows } = defineProps<MetadataProps>();
+
+const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`.toLowerCase().replaceAll(' ', '');
 </script>
 
 <template>
@@ -27,22 +31,29 @@ const { rows } = defineProps<MetadataProps>();
       v-for="row in rows"
       :key="`${row.label}:${row.value}`"
       class="row"
+      :data-testid="row.dataTestid"
     >
-      <div class="label text-muted">
+      <label
+        class="label text-muted"
+        :for="getRowValueId(row)"
+      >
         {{ row.label }}
-      </div>
+      </label>
       <div
-        v-if="row.valueOverride?.component"
+        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
@@ -50,12 +61,23 @@ const { rows } = defineProps<MetadataProps>();
           :class="['status', row.status]"
         />
         <router-link
-          v-if="row.to"
+          v-if="row.value && row.to"
           :to="row.to"
+          :data-testid="row.valueDataTestid"
         >
           {{ row.value }}
         </router-link>
-        <span v-else>{{ row.value }}</span>
+        <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>

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

@@ -16,13 +16,17 @@ export interface KeyValueProps {
     rows: Row[];
     maxRows?: number;
     outline?: boolean;
+
+    onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 </script>
 
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<KeyValueProps>(),
-  { outline: false, maxRows: 4 }
+  {
+    outline: false, maxRows: 4, onShowConfiguration: undefined
+  }
 );
 const {
   propertyName, rows, maxRows, outline
@@ -30,6 +34,7 @@ const {
 
 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));
@@ -40,6 +45,10 @@ 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>
@@ -50,18 +59,20 @@ const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
     </div>
     <div
       v-if="visibleRows.length === 0"
-      class="empty mmt-2"
+      class="empty mmt-2 text-muted"
     >
       <div class="no-rows">
         {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
       </div>
       <div class="show-configuration mmt-1">
-        <router-link
-          class="secondary"
-          to="#"
+        <a
+          :data-testid="showConfigurationEmptyDataTestId"
+          class="secondary text-muted"
+          href="#"
+          @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationEmptyFocusSelector);}"
         >
           {{ i18n.t('component.resource.detail.metadata.keyValue.showConfiguration') }}
-        </router-link>
+        </a>
       </div>
     </div>
     <div
@@ -76,13 +87,15 @@ const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
         {{ displayValue(row) }}
       </Rectangle>
     </div>
-    <router-link
+    <a
       v-if="showShowAllButton"
-      to="#"
-      class="show-all"
+      :data-testid="showConfigurationMoreDataTestId"
+      href="#"
+      class="show-all secondary"
+      @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationMoreFocusSelector);}"
     >
       {{ showAllLabel }}
-    </router-link>
+    </a>
   </div>
 </template>
 
@@ -101,6 +114,8 @@ const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
     }
 
     .row {
+        width: 100%;
+
         &:not(:first-of-type) {
             margin-top: 4px;
         }
@@ -109,13 +124,6 @@ const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
             margin-top: 8px;
         }
     }
-    .row {
-        margin-top: 8px;
-
-        &:not(:first-of-type) {
-            margin-top: 4px;
-        }
-    }
     .show-all {
         margin-top: 8px;
     }

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

@@ -3,7 +3,7 @@ import Labels from '@shell/components/Resource/Detail/Metadata/Labels/index.vue'
 import { createStore } from 'vuex';
 
 describe('component: Metadata/Labels', () => {
-  it('shoulder render KeyValue with the appropriate props', async() => {
+  it('should render KeyValue with the appropriate props', async() => {
     const labels = [{ key: 'key', value: 'value' }];
     const wrapper = mount(Labels, {
       props:  { labels },

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

@@ -7,6 +7,8 @@ import { useStore } from 'vuex';
 export type Label = Row;
 export interface LabelsProps {
     labels: Label[];
+
+    onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 
 </script>
@@ -14,6 +16,7 @@ export interface LabelsProps {
 <script setup lang="ts">
 const props = defineProps<LabelsProps>();
 const { labels } = toRefs(props);
+const emit = defineEmits(['show-configuration']);
 
 const store = useStore();
 const i18n = useI18n(store);
@@ -23,5 +26,6 @@ const i18n = useI18n(store);
   <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/__tests__/KeyValue.test.ts

@@ -52,7 +52,7 @@ describe('component: Metadata/IdentifyingInformation', () => {
     });
 
     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').findComponent(RouterLinkStub).element.innerHTML).toStrictEqual('component.resource.detail.metadata.keyValue.showConfiguration');
+    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() => {

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

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
 
 describe('component: Rectangle', () => {
-  it('shoulder render container with class title and missing outline when passed outline:false', async() => {
+  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();

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