@rancher/shell 3.0.5-rc.8 → 3.0.5-rc.9

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import CopyToClipboard from '@shell/components/Resource/Detail/CopyToClipboard.vue';
+import { Row } from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import Preview from '@shell/components/Resource/Detail/Preview/Preview.vue';
+import { nextTick, ref } from 'vue';
+import RcTag from '@components/Pill/RcTag/RcTag.vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import { Type } from '@components/Pill/types';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { randomStr } from '@shell/utils/string';
+
+export interface KeyValueRowProps {
+    row: Row;
+    type: Type;
+}
+
+const props = defineProps<KeyValueRowProps>();
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const showPreview = ref(false);
+const element = ref<HTMLElement | null>(null);
+const button = ref<HTMLElement | null>(null);
+
+const onClose = (keyboardExit: boolean) => {
+  showPreview.value = false;
+  if (keyboardExit) {
+    nextTick(() => {
+      button.value?.focus();
+    });
+  }
+};
+const previewId = randomStr();
+</script>
+
+<template>
+  <div
+    ref="element"
+    class="key-value-row"
+    :class="{'show-preview': showPreview, [props.type]: true}"
+  >
+    <RcButton
+      ref="button"
+      ghost
+      aria-haspopup="dialog"
+      :aria-expanded="showPreview"
+      :aria-controls="previewId"
+      :aria-label="i18n.t('component.resource.detail.metadata.keyValue.ariaLabel.showPreview')"
+      @click="() => showPreview = true"
+    >
+      <RcTag
+        :type="type"
+        :highlight="showPreview"
+      >
+        <span class="tag-data">{{ props.row.key }}: {{ props.row.value }}</span>
+      </RcTag>
+    </RcButton>
+    <CopyToClipboard :value="row.value" />
+    <Preview
+      v-if="showPreview"
+      :id="previewId"
+      class="preview"
+      :title="row.key"
+      :value="row.value"
+      :anchor-element="element"
+      aria-live="polite"
+      @close="onClose"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.key-value-row {
+  display: inline-block;
+  position: relative;
+  padding: 0;
+
+  .copy-to-clipboard {
+    position: fixed;
+
+    right: -20px;
+    top: -9px;
+    z-index: 20px;
+  }
+
+  &, .btn, .rc-tag {
+    max-width: calc(100%);
+  }
+
+  .rc-tag {
+    display: inline-block;
+    line-height: normal;
+  }
+
+  .tag-data {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: calc(100%);
+    line-height: normal;
+  }
+
+  & .btn {
+    line-height: initial;
+    min-height: initial;
+  }
+
+  &.active {
+    $ellipsis-padding: 22px;
+
+    &.show-preview {
+      .copy-to-clipboard {
+        position: fixed;
+      }
+    }
+
+    button:focus-visible, button:hover, .copy-to-clipboard:focus-visible {
+      .rc-tag .tag-data {
+        // This alters the ellipsis so we show more letters when the clipboard button is visible and occluding parts of the tag
+        padding-right: $ellipsis-padding;
+      }
+
+      & + .copy-to-clipboard {
+        position: absolute;
+      }
+    }
+
+    .copy-to-clipboard:focus-visible, .copy-to-clipboard:hover {
+      position: absolute;
+
+    }
+
+    .btn:has(+ .copy-to-clipboard:focus-visible), .btn:has(+ .copy-to-clipboard:hover)  {
+      .rc-tag .tag-data {
+        // This alters the ellipsis so we show more letters when the clipboard button is visible and occluding parts of the tag
+        padding-right: $ellipsis-padding;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import Labels from '@shell/components/Resource/Detail/Metadata/Labels/index.vue';
 import { createStore } from 'vuex';
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
 
 describe('component: Metadata/Labels', () => {
   it('should render KeyValue with the appropriate props', async() => {

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

@@ -26,6 +26,7 @@ const i18n = useI18n(store);
   <KeyValue
     :propertyName="i18n.t('component.resource.detail.metadata.labels.title')"
     :rows="labels"
+    type="active"
     @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
   />
 </template>

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

@@ -1,7 +1,7 @@
 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';
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
 
 describe('component: Metadata/IdentifyingInformation', () => {
   const propertyName = 'PROPERTY_NAME';
@@ -16,9 +16,13 @@ describe('component: Metadata/IdentifyingInformation', () => {
 
   it('should render container with identifying information', async() => {
     const wrapper = mount(KeyValue, {
-      props:  { propertyName, rows },
+      props: {
+        propertyName, rows, type: 'active'
+      },
       global: {
-        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        stubs: {
+          'router-link': RouterLinkStub, 'clean-tooltip': true, KeyValueRow: true
+        },
         provide: { store },
         directives
       }
@@ -29,9 +33,13 @@ describe('component: Metadata/IdentifyingInformation', () => {
 
   it('should render property name and count', async() => {
     const wrapper = mount(KeyValue, {
-      props:  { propertyName, rows },
+      props: {
+        propertyName, rows, type: 'active'
+      },
       global: {
-        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        stubs: {
+          'router-link': RouterLinkStub, 'clean-tooltip': true, KeyValueRow: true
+        },
         provide: { store },
         directives
       }
@@ -43,9 +51,13 @@ describe('component: Metadata/IdentifyingInformation', () => {
 
   it('should render no rows messaging', async() => {
     const wrapper = mount(KeyValue, {
-      props:  { propertyName, rows: [] },
+      props: {
+        propertyName, rows: [], type: 'active'
+      },
       global: {
-        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        stubs: {
+          'router-link': RouterLinkStub, 'clean-tooltip': true, KeyValueRow: true
+        },
         provide: { store },
         directives
       }
@@ -58,10 +70,12 @@ describe('component: Metadata/IdentifyingInformation', () => {
   it('should render show all button if rows length exceeds max', async() => {
     const wrapper = mount(KeyValue, {
       props: {
-        propertyName, rows: [...rows, ...rows], maxRows: 1
+        propertyName, rows: [...rows, ...rows], maxRows: 1, type: 'active'
       },
       global: {
-        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        stubs: {
+          'router-link': RouterLinkStub, 'clean-tooltip': true, KeyValueRow: true
+        },
         provide: { store },
         directives
       }
@@ -70,38 +84,22 @@ describe('component: Metadata/IdentifyingInformation', () => {
     expect(wrapper.find('.show-all').exists()).toBeTruthy();
   });
 
-  it('should pass outline down to rectangle', async() => {
+  it('should pass type down to KeyValueRow', async() => {
     const wrapper = mount(KeyValue, {
       props: {
-        propertyName, rows, outline: false
+        propertyName, rows, type: 'active'
       },
       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 },
+        stubs: {
+          'router-link': RouterLinkStub, 'clean-tooltip': true, KeyValueRow: true
+        },
         provide: { store },
         directives
       }
     });
 
-    const row = rows[0];
-    const concatenated = `${ row.key }: ${ row.value }`;
-    const rectangleComponent = wrapper.find('.row').findComponent(Rectangle);
+    const keyValueRowComponent: any = wrapper.findComponent('key-value-row-stub');
 
-    expect(rectangleComponent.element.innerHTML).toStrictEqual(concatenated);
-    expect(cleanTooltip.mock.calls[0][1].value).toStrictEqual(concatenated);
+    expect(keyValueRowComponent.props('type')).toStrictEqual('active');
   });
 });

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

@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils';
+import KeyValueRow from '@shell/components/Resource/Detail/Metadata/KeyValueRow.vue';
+import Preview from '@shell/components/Resource/Detail/Preview/Preview.vue';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+jest.mock('vuex', () => ({ useStore: () => { } }));
+
+describe('component: KeyValueRow', () => {
+  const mockRow = {
+    key:   'test-key',
+    value: 'test-value',
+  };
+
+  const global = {
+    stubs: {
+      RcButton: { template: '<button><slot/></button>' },
+      RcTag:    { template: '<div><slot/></div>' },
+    },
+    directives: { cleanHtml: (identity: any) => identity, t: (identity: any) => identity },
+  };
+
+  beforeEach(() => {
+    // Create a teleport target
+    const teleportTarget = document.createElement('div');
+
+    teleportTarget.id = 'preview';
+    document.body.appendChild(teleportTarget);
+  });
+
+  afterEach(() => {
+    document.getElementById('preview')?.remove();
+    jest.clearAllMocks();
+  });
+
+  it('should render the key and value', () => {
+    const wrapper = mount(KeyValueRow, {
+      props: {
+        row:  mockRow,
+        type: 'active',
+      },
+      global
+    });
+
+    const tagData = wrapper.find('.tag-data');
+
+    expect(tagData.exists()).toBe(true);
+    expect(tagData.text()).toBe(`${ mockRow.key }: ${ mockRow.value }`);
+  });
+
+  it('should show the preview component on click', async() => {
+    const wrapper = mount(KeyValueRow, {
+      props: {
+        row:  mockRow,
+        type: 'active',
+      },
+      global
+    });
+
+    expect(wrapper.findComponent(Preview).exists()).toBe(false);
+
+    await wrapper.find('button').trigger('click');
+
+    expect(wrapper.findComponent(Preview).exists()).toBe(true);
+  });
+
+  it('should hide the preview component on close', async() => {
+    const wrapper = mount(KeyValueRow, {
+      props: {
+        row:  mockRow,
+        type: 'active',
+      },
+      global
+    });
+
+    expect(wrapper.findComponent(Preview).exists()).toBe(false);
+
+    await wrapper.find('button').trigger('click');
+
+    expect(wrapper.findComponent(Preview).exists()).toBe(true);
+
+    const preview = wrapper.findComponent({ name: 'Preview' });
+
+    preview.vm.$emit('close');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(Preview).exists()).toBe(false);
+  });
+
+  it('should contain a copy to clipboard component and call copy on click', async() => {
+    const wrapper = mount(KeyValueRow, {
+      props: {
+        row:  mockRow,
+        type: 'active',
+      },
+      global
+    });
+
+    const copyToClipboard = wrapper.findComponent({ name: 'CopyToClipboard' });
+
+    expect(copyToClipboard.exists()).toBe(true);
+    expect(copyToClipboard.props('value')).toBe(mockRow.value);
+
+    await copyToClipboard.trigger('click');
+
+    expect(copyTextToClipboard).toHaveBeenCalledWith(mockRow.value);
+  });
+});

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

@@ -14,7 +14,6 @@ describe('composables: Metadata/composables', () => {
     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', () => {
@@ -39,7 +38,6 @@ describe('composables: Metadata/composables', () => {
       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 = {
@@ -59,7 +57,6 @@ describe('composables: Metadata/composables', () => {
         { label: 'WORKSPACE' },
         { label: 'NAMESPACE' },
         { label: 'LIVE_DATE' },
-        { label: 'CREATED_BY' },
         { label: 'RESOURCE_DETAILS' }
       ]);
       expect(resource.showConfiguration).toHaveBeenCalledTimes(1);

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

@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils';
 import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
 import { createStore } from 'vuex';
 
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+
 describe('component: Metadata/index', () => {
   const store = createStore({});
   const stubs = ['IdentifyingInformation', 'KeyValue', 'Labels', 'Annotations'];
@@ -14,7 +16,8 @@ describe('component: Metadata/index', () => {
       props: {
         identifyingInformation,
         labels:      [],
-        annotations: []
+        annotations: [],
+        resource:    {}
       },
       global: { provide: { store }, stubs }
     });
@@ -27,7 +30,8 @@ describe('component: Metadata/index', () => {
       props: {
         identifyingInformation,
         labels:      [],
-        annotations: []
+        annotations: [],
+        resource:    {}
       },
       global: { provide: { store }, stubs }
     });
@@ -42,7 +46,8 @@ describe('component: Metadata/index', () => {
       props: {
         identifyingInformation,
         labels:      [],
-        annotations: []
+        annotations: [],
+        resource:    {}
       },
       global: { provide: { store }, stubs }
     });
@@ -60,7 +65,8 @@ describe('component: Metadata/index', () => {
       props: {
         identifyingInformation,
         labels:      keyValue,
-        annotations: []
+        annotations: [],
+        resource:    {}
       },
       global: { provide: { store }, stubs }
     });
@@ -77,7 +83,8 @@ describe('component: Metadata/index', () => {
       props: {
         identifyingInformation,
         labels:      [],
-        annotations: keyValue
+        annotations: keyValue,
+        resource:    {}
       },
       global: { provide: { store }, stubs }
     });

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

@@ -4,7 +4,6 @@ import { useDefaultLabels } from '@shell/components/Resource/Detail/Metadata/Lab
 import { useDefaultAnnotations } from '@shell/components/Resource/Detail/Metadata/Annotations/composable';
 import { computed, toValue, Ref } from 'vue';
 import {
-  useCreatedBy,
   useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
 
@@ -48,7 +47,6 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
   const workspace = useWorkspace(resource);
   const namespace = useNamespace(resource);
   const liveDate = useLiveDate(resource);
-  const createdBy = useCreatedBy(resource);
   const resourceValue = toValue(resource);
 
   const identifyingInformation = computed((): IdentifyingInformationRow[] => {
@@ -57,7 +55,6 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
       workspace?.value,
       namespace?.value,
       liveDate?.value,
-      createdBy?.value,
     ];
     const info = [
       ...defaultInfo,
@@ -74,7 +71,7 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration:    (returnFocusSelector?: string) => resourceValue.showConfiguration(returnFocusSelector)
     };
   });
 };

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

@@ -45,6 +45,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
       class="labels-and-annotations-empty"
     >
       <KeyValue
+        type="active"
         :rows="[]"
         :propertyName="i18n.t('component.resource.detail.metadata.labelsAndAnnotations')"
         @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"

package/components/Resource/Detail/Preview/Content.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import { _VIEW } from '@shell/config/query-params';
+import { nlToBr } from '@shell/utils/string';
+import { computed } from 'vue';
+
+export interface Props {
+  value: string;
+}
+
+const props = defineProps<Props>();
+
+const isEmpty = computed(() => props.value.length === 0);
+const jsonStr = computed(() => {
+  const value = props.value;
+
+  if ( value && ( value.startsWith('{') || value.startsWith('[') ) ) {
+    try {
+      let parsed = JSON.parse(value);
+
+      parsed = JSON.stringify(parsed, null, 2);
+
+      return parsed;
+    } catch {
+    }
+  }
+
+  return null;
+});
+
+const bodyHtml = computed(() => {
+  return nlToBr(props.value);
+});
+
+</script>
+<template>
+  <div class="content">
+    <span
+      v-if="isEmpty"
+      v-t="'detailText.empty'"
+    />
+    <CodeMirror
+      v-else-if="jsonStr"
+      :mode="_VIEW"
+      :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false}"
+      :value="jsonStr"
+    />
+    <span
+      v-else
+      v-clean-html="bodyHtml"
+      data-testid="detail-top_html"
+      :class="{'monospace': true}"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep() {
+    .CodeMirror-gutters {
+        display: none;
+    }
+}
+</style>