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

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-deemphasized"
+        :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>
@@ -73,6 +95,13 @@ const { rows } = defineProps<MetadataProps>();
         display: flex;
         flex-direction: row;
         align-items: center;
+
+        &, & * {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
 
       .label {

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,28 +45,34 @@ 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-muted">{{ propertyName }}</span>
+      <span class="title text-deemphasized">{{ propertyName }}</span>
       <span class="count">{{ rows.length }}</span>
     </div>
     <div
       v-if="visibleRows.length === 0"
-      class="empty mmt-2"
+      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">
-        <router-link
-          class="secondary"
-          to="#"
+        <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') }}
-        </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="#"
+      :data-testid="showConfigurationMoreDataTestId"
+      href="#"
       class="show-all"
+      @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationMoreFocusSelector);}"
     >
       {{ showAllLabel }}
-    </router-link>
+    </a>
   </div>
 </template>
 
@@ -97,22 +110,14 @@ const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
     }
 
     .heading {
-        margin-bottom: 4px;
+        margin-bottom: 8px;
     }
 
     .row {
-        &:not(:first-of-type) {
-            margin-top: 4px;
-        }
-
-        & {
-            margin-top: 8px;
-        }
-    }
-    .row {
-        margin-top: 8px;
+        display: block;
+        width: 100%;
 
-        &:not(:first-of-type) {
+        &:not(:nth-child(2)) {
             margin-top: 4px;
         }
     }
@@ -121,10 +126,15 @@ const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
     }
 
     .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

@@ -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/Rectangle.vue

@@ -23,7 +23,9 @@ const props = withDefaults(
 .rectangle {
     border: 1px solid var(--tag-bg);
     border-radius: 4px;
-    padding: 4px;
+    padding: 0 8px;
+    height: 23px;
+    line-height: 23px;
 
     &:not(.outline) {
         background-color: var(--tag-bg);

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

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

@@ -3,27 +3,76 @@ import { useDefaultIdentifyingInformation } from '@shell/components/Resource/Det
 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 {
-    labels,
-    annotations
-  };
+  return computed(() => {
+    return {
+      labels:              labels.value,
+      annotations:         annotations.value,
+      onShowConfiguration: (returnFocusSelector: string) => openResourceDetailDrawer(resource, returnFocusSelector)
+    };
+  });
 };
 
-export const useDefaultMetadata = (resource: any, additionalIdentifyingInformation?: (IdentifyingInformationRow[] | Ref<IdentifyingInformationRow[]>)) => {
+export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInformation?: (IdentifyingInformationRow[] | Ref<IdentifyingInformationRow[]>)) => {
   const defaultIdentifyingInformation = useDefaultIdentifyingInformation(resource);
   const additionalIdentifyingInformationValue = toValue(additionalIdentifyingInformation);
 
   const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
-  const { labels, annotations } = useBasicMetadata(resource);
+  const basicMetaData = useBasicMetadata(resource);
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
 
-  return {
-    identifyingInformation,
-    labels,
-    annotations
-  };
+  return computed(() => {
+    return {
+      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 {
+      identifyingInformation: identifyingInformation.value,
+      labels:                 basicMetaData.value.labels,
+      annotations:            basicMetaData.value.annotations,
+      onShowConfiguration:    () => openResourceDetailDrawer(resource)
+    };
+  });
 };

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

@@ -11,10 +11,12 @@ import { useStore } from 'vuex';
 export interface MetadataProps {
   identifyingInformation: IdentifyingInformationRow[],
   labels: Label[],
-  annotations: Annotation[]
+  annotations: Annotation[],
+  onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 
 const { identifyingInformation, labels, annotations } = defineProps<MetadataProps>();
+const emit = defineEmits(['show-configuration']);
 
 const store = useStore();
 const i18n = useI18n(store);
@@ -37,6 +39,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
       <KeyValue
         :rows="[]"
         :propertyName="i18n.t('component.resource.detail.metadata.labelsAndAnnotations')"
+        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
       />
     </div>
     <!-- I'm not using v-else here so I can maintain the spacing correctly with the other columns in other rows. -->
@@ -44,13 +47,19 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
       v-if="!showBothEmpty"
       class="labels"
     >
-      <Labels :labels="labels" />
+      <Labels
+        :labels="labels"
+        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+      />
     </div>
     <div
       v-if="!showBothEmpty"
       class="annotations"
     >
-      <Annotations :annotations="annotations" />
+      <Annotations
+        :annotations="annotations"
+        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+      />
     </div>
   </SpacedRow>
 </template>
@@ -60,7 +69,5 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     .labels-and-annotations-empty {
       grid-column: span 2;
     }
-
-    border-bottom: 1px solid var(--border);
 }
 </style>

package/components/Resource/Detail/Page.vue

@@ -20,3 +20,18 @@
     </div>
   </div>
 </template>
+<style lang="scss" scoped>
+.resource-detail-page {
+  padding: 24px;
+
+  :deep() .tabs.horizontal {
+    border: none;
+  }
+  :deep() .tabs.horizontal + .tab-container {
+    border: none;
+    border-top: 1px solid var(--border);
+    padding: 0;
+    padding-top: 24px;
+  }
+}
+</style>

package/components/Resource/Detail/ResourceRow.vue

@@ -1,8 +1,12 @@
 <script lang="ts">
 import SubtleLink from '@shell/components/SubtleLink.vue';
-import { StateColor, stateColorCssVar } from '@shell/utils/style';
-import { sortBy } from 'lodash';
+import StateDot from '@shell/components/StateDot/index.vue';
+import { StateColor } from '@shell/utils/style';
+import { sortBy, sumBy } from 'lodash';
 import { RouteLocationRaw } from 'vue-router';
+import { computed } from 'vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
 
 export interface Count {
   label: string;
@@ -35,13 +39,38 @@ export function extractCounts(labels: string[]): Count[] {
 const {
   label, to, counts, color
 } = defineProps<Props>();
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const displayCounts = computed(() => {
+  if (!counts) {
+    return counts;
+  }
+
+  if (counts.length < 3) {
+    return counts;
+  }
+
+  const [first, ...rest] = counts;
+  const otherCount = sumBy(rest, 'count');
+  const other = {
+    label: i18n.t('generic.other', { count: otherCount }),
+    count: otherCount
+  };
+
+  return [
+    first,
+    other
+  ];
+});
 </script>
 
 <template>
   <div class="resource-row">
     <div class="left">
       <SubtleLink
-        v-if="to"
+        v-if="to && (counts && counts.length > 0)"
         :to="to"
       >
         {{ label }}
@@ -64,15 +93,12 @@ const {
         v-else
         class="counts"
       >
-        <span
+        <StateDot
           v-if="color"
-          class="dot"
-          :style="{backgroundColor: stateColorCssVar(color)}"
-        >
-&nbsp;
-        </span>
+          :color="color"
+        />
         <span
-          v-for="count in counts"
+          v-for="count in displayCounts"
           :key="count.label"
           class="count"
         >
@@ -105,14 +131,7 @@ const {
       display: none;
     }
 
-    .dot {
-      display: inline-block;
-
-      $size: 6px;
-      width: $size;
-      height: $size;
-
-      border-radius: 50%;
+    .state-dot {
       margin-right: 10px;
     }
 }

package/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/__tests__/composables.test.ts

@@ -0,0 +1,29 @@
+import { useGetConfigMapDataTabProps } from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/composables';
+import { base64Encode } from '@shell/utils/crypto';
+
+describe('composables: ConfigMapDataTab', () => {
+  const textData = 'This is textData';
+  const binaryData = 'This is binaryData';
+  const binaryDataBase64 = base64Encode(binaryData);
+
+  it('should handle no data', () => {
+    const props = useGetConfigMapDataTabProps({});
+
+    expect(props.rows).toHaveLength(0);
+  });
+
+  it('should handle text and binary data at the same time', () => {
+    const data = { text: textData };
+    const bData = { binary: binaryDataBase64 };
+
+    const props = useGetConfigMapDataTabProps({ data, binaryData: bData });
+
+    expect(props.rows[0].key).toStrictEqual('text');
+    expect(props.rows[0].value).toStrictEqual(textData);
+    expect(props.rows[0].binary).toStrictEqual(false);
+
+    expect(props.rows[1].key).toStrictEqual('binary');
+    expect(props.rows[1].value).toStrictEqual(binaryData);
+    expect(props.rows[1].binary).toStrictEqual(false);
+  });
+});