@rancher/shell 3.0.5-rc.8 → 3.0.5

package/components/Resource/Detail/CopyToClipboard.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { useI18n } from '@shell/composables/useI18n';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+
+export interface Props {
+    value: string;
+}
+
+const props = defineProps<Props>();
+const store = useStore();
+const i18n = useI18n(store);
+const copied = ref(false);
+const timeout = ref<null | ReturnType<typeof setTimeout>>(null);
+
+const onClick = (ev: MouseEvent) => {
+  ev.stopPropagation();
+
+  copyTextToClipboard(props.value);
+  copied.value = true;
+
+  if (timeout.value) {
+    return;
+  }
+
+  timeout.value = setTimeout(() => {
+    copied.value = false;
+    timeout.value = null;
+  }, 2000);
+};
+</script>
+<template>
+  <button
+    class="copy-to-clipboard"
+    :class="{copied}"
+    :aria-label="i18n.t('component.resource.detail.copyToClipboard.ariaLabel.copy')"
+    @click="onClick"
+  >
+    <i class="icon icon-copy" />
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.copy-to-clipboard {
+    z-index: 2;
+    display: inline-flex;
+    $size: 36px;
+    width: $size;
+    height: $size;
+    font-size: 14px;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+
+    border: 1px solid var(--primary);
+    color: var(--primary);
+
+    background-color: var(--body-bg);
+
+    &:hover {
+        color: var(--body-text);
+    }
+
+    &.copied {
+        background-color: var(--success);
+        border-color: var(--success-border);
+        color: var(--success-text);
+
+        transition: all 0.25s;
+        transition-timing-function: ease;
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+    }
+}
+</style>

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

@@ -0,0 +1,69 @@
+import { useFetch } from '@shell/components/Resource/Detail/FetchLoader/composables';
+import { nextTick } from 'vue';
+
+describe('composables: useFetch', () => {
+  it('should be in a loading state initially and call the fetch function immediately', () => {
+    const mockFetch = jest.fn(() => new Promise(() => {})); // A promise that never resolves
+
+    const result = useFetch(mockFetch);
+
+    expect(result.value.loading).toBe(true);
+    expect(result.value.data).toBeUndefined();
+    expect(result.value.error).toBeUndefined();
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('should successfully fetch data and update state', async() => {
+    const mockData = { id: 1, name: 'Test Data' };
+    const mockFetch = jest.fn(() => Promise.resolve(mockData));
+
+    const result = useFetch(mockFetch);
+
+    // Initial state check
+    expect(result.value.loading).toBe(true);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+
+    // Wait for the promise to resolve and Vue to react
+    await nextTick();
+
+    // Final state check
+    expect(result.value.loading).toBe(false);
+    expect(result.value.data).toStrictEqual(mockData);
+    expect(result.value.error).toBeUndefined();
+  });
+
+  it('should handle a fetch error and update state', async() => {
+    const mockError = new Error('Network Failed');
+    const mockFetch = jest.fn(() => Promise.reject(mockError));
+
+    const result = useFetch(mockFetch);
+
+    // Initial state check
+    expect(result.value.loading).toBe(true);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+
+    // Wait for the promise to reject and Vue to react
+    await nextTick();
+
+    // Final state check
+    expect(result.value.loading).toBe(false);
+    expect(result.value.data).toBeUndefined();
+    expect(result.value.error).toStrictEqual(mockError);
+  });
+
+  it('should correctly handle a fetch function that returns a non-promise value', async() => {
+    const mockData = 'just a string';
+    // The composable uses `await`, which will wrap non-promise values.
+    const mockFetch = jest.fn(() => mockData as any);
+
+    const result = useFetch(mockFetch);
+
+    expect(result.value.loading).toBe(true);
+
+    await nextTick();
+
+    expect(result.value.loading).toBe(false);
+    expect(result.value.data).toBe(mockData);
+    expect(result.value.error).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { computed, ref, toValue } from 'vue';
+
+export const useFetch = <T>(fetch: () => Promise<T> ) => {
+  const loading = ref<boolean>(true);
+  const data = ref<T>();
+  const error = ref<any>();
+
+  const load = async() => {
+    try {
+      loading.value = true;
+
+      data.value = toValue(await fetch());
+    } catch (ex) {
+      error.value = ex;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  load();
+
+  return computed(() => ({
+    loading: loading.value,
+    data:    data.value,
+    error:   error.value
+  }));
+};

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

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import Annotations from '@shell/components/Resource/Detail/Metadata/Annotations/index.vue';
 import { createStore } from 'vuex';
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
 
 describe('component: Metadata/Annotations', () => {
   it('should render KeyValue with the appropriate props', async() => {
@@ -14,6 +15,5 @@ describe('component: Metadata/Annotations', () => {
 
     expect(keyValue.props('propertyName')).toStrictEqual('component.resource.detail.metadata.annotations.title');
     expect(keyValue.props('rows')).toStrictEqual(annotations);
-    expect(keyValue.props('outline')).toStrictEqual(true);
   });
 });

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

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

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

@@ -1,8 +1,7 @@
 import {
-  useNamespace, useWorkspace, useLiveDate, useCreatedBy, useProject,
-  useResourceDetails
+  useNamespace, useWorkspace, useLiveDate, useProject, useResourceDetails
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
-import { NAMESPACE, FLEET } from '@shell/config/types';
+import { NAMESPACE, FLEET, MANAGEMENT } from '@shell/config/types';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 
 const mockStore = {
@@ -33,29 +32,12 @@ describe('composables: IdentifyingFields', () => {
       expect(result).toBeUndefined();
     });
 
-    it('should return a valid namespace row with namespaceLocation', () => {
-      const resource = { namespace: 'NAMESPACE', namespaceLocation: 'NAMESPACE_LOCATION' };
-      const result = useNamespace(resource);
-
-      expect(result?.value.to).toStrictEqual(resource.namespaceLocation);
-      expect(result?.value.value).toStrictEqual(resource.namespace);
-      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
-      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
-    });
-
-    it('should return a valid namespace row with computed `to`', () => {
+    it('should return a valid namespace row', () => {
       const resource = { namespace: 'NAMESPACE' };
       const result = useNamespace(resource);
 
-      expect(result?.value.to).toStrictEqual({
-        name:   `c-cluster-product-resource-id`,
-        params: {
-          product:  'PRODUCT_ID',
-          cluster:  'CLUSTER_ID',
-          resource: NAMESPACE,
-          id:       resource.namespace
-        }
-      });
+      expect(result?.value.valueOverride?.props.type).toStrictEqual(NAMESPACE);
+      expect(result?.value.valueOverride?.props.id).toStrictEqual(resource.namespace);
       expect(result?.value.value).toStrictEqual(resource.namespace);
       expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
       expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
@@ -122,41 +104,6 @@ describe('composables: IdentifyingFields', () => {
     });
   });
 
-  describe('useCreatedBy', () => {
-    it('should return undefined if showCreatedBy is falsy', () => {
-      const resource = {};
-      const result = useCreatedBy(resource);
-
-      expect(result).toBeUndefined();
-    });
-
-    it('should return a valid createdBy row', () => {
-      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
-
-      const resource = { showCreatedBy: true, createdBy: { displayName: 'CREATED_BY' } };
-      const result = useCreatedBy(resource);
-
-      expect(result?.value.to).toBeUndefined();
-      expect(result?.value.value).toStrictEqual(resource.createdBy.displayName);
-      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.createdBy');
-      expect(result?.value.dataTestid).toStrictEqual('masthead-subheader-createdBy');
-      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-createdBy_plain-text');
-    });
-
-    it('should return a valid createdBy row with createdBy.location', () => {
-      mockStore.getters[`type-map/optionsFor`].mockReturnValue({ showAge: true });
-
-      const resource = { showCreatedBy: true, createdBy: { displayName: 'CREATED_BY', location: 'LOCATION' } };
-      const result = useCreatedBy(resource);
-
-      expect(result?.value.to).toStrictEqual(resource.createdBy.location);
-      expect(result?.value.value).toStrictEqual(resource.createdBy.displayName);
-      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.createdBy');
-      expect(result?.value.dataTestid).toStrictEqual('masthead-subheader-createdBy');
-      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-createdBy-link');
-    });
-  });
-
   describe('useProject', () => {
     it('should return undefined if type is not namespace', () => {
       const resource = { type: 'anything' };
@@ -173,11 +120,16 @@ describe('composables: IdentifyingFields', () => {
     });
 
     it('should return a valid project row', () => {
-      const resource = { type: NAMESPACE, project: { nameDisplay: 'PROJECT', detailLocation: 'LOCATION' } };
+      const resource = {
+        type:    NAMESPACE,
+        project: {
+          id: 'ID', nameDisplay: 'PROJECT', detailLocation: 'LOCATION'
+        }
+      };
       const result = useProject(resource);
 
-      expect(result?.value.to).toStrictEqual(resource.project.detailLocation);
-      expect(result?.value.value).toStrictEqual(resource.project.nameDisplay);
+      expect(result?.value.valueOverride?.props.type).toStrictEqual(MANAGEMENT.PROJECT);
+      expect(result?.value.valueOverride?.props.id).toStrictEqual(resource.project.id);
       expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.project');
     });
   });

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

@@ -1,7 +1,9 @@
 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 KeyValueRow from '@shell/components/Resource/Detail/Metadata/KeyValueRow.vue';
 import { markRaw } from 'vue';
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+jest.mock('vuex', () => ({ useStore: () => { } }));
 
 describe('component: Metadata/IdentifyingInformation', () => {
   const label = 'LABEL';
@@ -76,10 +78,35 @@ describe('component: Metadata/IdentifyingInformation', () => {
     expect(wrapper.find(`.value .status.${ status }`).exists()).toBeTruthy();
   });
 
-  it('should render a valueOverride', async() => {
+  it('should render a .full-custom-value valueOverride', async() => {
     const valueOverride = {
-      component: markRaw(Rectangle),
-      props:     { outline: false }
+      component: markRaw(KeyValueRow),
+      props:     { type: 'interactive' }
+    };
+    const wrapper = mount(IdentifyingInformation, {
+      props: {
+        rows: [
+          {
+            label,
+            value,
+            valueOverride
+          }
+        ]
+      },
+      global: { stubs: { 'router-link': RouterLinkStub, KeyValueRow: true } }
+    });
+
+    expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
+
+    const testComponent = wrapper.find('.full-custom-value').getComponent(KeyValueRow);
+
+    expect(testComponent.props('type')).toStrictEqual(valueOverride.props.type);
+  });
+
+  it('should render a formatter valueOverride', async() => {
+    const valueOverride = {
+      component: 'router-link',
+      props:     { to: '#' }
     };
     const wrapper = mount(IdentifyingInformation, {
       props: {
@@ -96,8 +123,8 @@ describe('component: Metadata/IdentifyingInformation', () => {
 
     expect(wrapper.find('.label').element.innerHTML.trim()).toStrictEqual(label);
 
-    const testComponent = wrapper.find('.value').getComponent(Rectangle);
+    const testComponent: any = wrapper.find('.value').getComponent('a');
 
-    expect(testComponent.props('outline')).toStrictEqual(valueOverride.props.outline);
+    expect(testComponent.props('to')).toStrictEqual('#');
   });
 });

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

@@ -1,9 +1,12 @@
 import { useI18n } from '@shell/composables/useI18n';
-import { computed, ComputedRef, markRaw, toValue } from 'vue';
+import {
+  computed, ComputedRef, defineAsyncComponent, markRaw, toValue
+} from 'vue';
 import Additional from '@shell/components/Resource/Detail/Additional.vue';
 import { useStore } from 'vuex';
 import {
-  NAMESPACE, FLEET, SERVICE_ACCOUNT, SECRET, CAPI
+  NAMESPACE, FLEET, SERVICE_ACCOUNT, SECRET, CAPI,
+  MANAGEMENT
 } 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';
@@ -21,21 +24,18 @@ export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
   }
 
   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
+      valueOverride:   {
+        component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/ResourcePopover/index.vue'))),
+        props:     {
+          type:           NAMESPACE,
+          id:             resourceValue.namespace,
+          detailLocation: resourceValue.namespaceLocation
+        }
+      }
     };
   });
 };
@@ -88,28 +88,6 @@ export const useLiveDate = (resource: any): ComputedRef<Row> | undefined => {
   }));
 };
 
-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);
@@ -126,9 +104,17 @@ export const useProject = (resource: any): ComputedRef<Row> | undefined => {
 
   return computed(() => {
     return {
-      label: i18n.t('component.resource.detail.metadata.identifyingInformation.project'),
-      value: resourceValue.project?.nameDisplay,
-      to:    resourceValue.project?.detailLocation
+      label:           i18n.t('component.resource.detail.metadata.identifyingInformation.project'),
+      value:           resourceValue.project?.nameDisplay,
+      valueDataTestid: 'masthead-subheader-project',
+      valueOverride:   {
+        component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/ResourcePopover/index.vue'))),
+        props:     {
+          type:         MANAGEMENT.PROJECT,
+          id:           resourceValue.project?.id,
+          currentStore: 'management'
+        }
+      }
     };
   });
 };

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

@@ -39,8 +39,22 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
       >
         {{ row.label }}
       </label>
+      <!-- A custom component specified as an object, responsible for it's own styling -->
       <div
-        v-if="row.valueOverride?.component && row.value"
+        v-if="typeof row.valueOverride?.component !== 'string' && row.valueOverride?.component && row.value"
+        :id="getRowValueId(row)"
+        class="full-custom-value"
+      >
+        <component
+          :is="row.valueOverride?.component"
+          v-if="row.valueOverride?.component"
+          v-bind="row.valueOverride?.props"
+          :data-testid="row.valueDataTestid"
+        />
+      </div>
+      <!-- A formatter with a component specified as a string -->
+      <div
+        v-else-if="row.valueOverride?.component && row.value"
         :id="getRowValueId(row)"
         class="value"
       >
@@ -91,16 +105,22 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     .row {
       margin-bottom: 8px;
 
+      .full-custom-value {
+        flex: 1;
+      }
+
       .value {
         display: flex;
         flex-direction: row;
         align-items: center;
+        flex: 1;
 
-        &, & * {
+        & > div, & > span {
           max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+        }
+
+        &, & > div, & > span {
+          @include clip;
         }
       }
 

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

@@ -1,8 +1,9 @@
 <script lang="ts">
 import { computed, toRefs } from 'vue';
-import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+import KeyValueRow from '@shell/components/Resource/Detail/Metadata/KeyValueRow.vue';
 import { useStore } from 'vuex';
 import { useI18n } from '@shell/composables/useI18n';
+import { Type } from '@components/Pill/types';
 
 export type KeyValueType = {[key: string]: string};
 
@@ -14,9 +15,9 @@ export interface Row {
 export interface KeyValueProps {
     propertyName: string;
     rows: Row[];
-    maxRows?: number;
-    outline?: boolean;
+    type: Type;
 
+    maxRows?: number;
     onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 </script>
@@ -24,13 +25,9 @@ export interface KeyValueProps {
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<KeyValueProps>(),
-  {
-    outline: false, maxRows: 4, onShowConfiguration: undefined
-  }
+  { maxRows: 4, onShowConfiguration: undefined }
 );
-const {
-  propertyName, rows, maxRows, outline
-} = toRefs(props);
+const { propertyName, rows, maxRows } = toRefs(props);
 
 const store = useStore();
 const i18n = useI18n(store);
@@ -80,12 +77,11 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
       :key="displayValue(row)"
       class="row"
     >
-      <Rectangle
-        v-clean-tooltip="displayValue(row)"
-        :outline="outline"
-      >
-        {{ displayValue(row) }}
-      </Rectangle>
+      <KeyValueRow
+        class="rectangle"
+        :type="props.type"
+        :row="row"
+      />
     </div>
     <a
       v-if="showShowAllButton"
@@ -116,6 +112,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     .row {
         display: block;
         width: 100%;
+        display: inline-block;
 
         &:not(:nth-child(2)) {
             margin-top: 4px;
@@ -125,14 +122,6 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
         margin-top: 8px;
     }
 
-    .rectangle {
-      display: inline-block;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
     .no-rows {
       line-height: 21px;
     }