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

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

@@ -0,0 +1,107 @@
+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';
+
+describe('component: Metadata/IdentifyingInformation', () => {
+  const propertyName = 'PROPERTY_NAME';
+  const store = createStore({});
+  const cleanTooltip = jest.fn();
+  const directives = { 'clean-tooltip': cleanTooltip };
+  const rows = [{ key: 'KEY', value: 'VALUE' }];
+
+  afterEach(() => {
+    cleanTooltip.mockClear();
+  });
+
+  it('should render container with identifying information', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.key-value').exists()).toBeTruthy();
+  });
+
+  it('should render property name and count', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.heading .title').element.innerHTML.trim()).toStrictEqual(propertyName);
+    expect(wrapper.find('.heading .count').element.innerHTML.trim()).toStrictEqual(rows.length.toString());
+  });
+
+  it('should render no rows messaging', async() => {
+    const wrapper = mount(KeyValue, {
+      props:  { propertyName, rows: [] },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    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 a').text()).toStrictEqual('component.resource.detail.metadata.keyValue.showConfiguration');
+  });
+
+  it('should render show all button if rows length exceeds max', async() => {
+    const wrapper = mount(KeyValue, {
+      props: {
+        propertyName, rows: [...rows, ...rows], maxRows: 1
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, 'clean-tooltip': true },
+        provide: { store },
+        directives
+      }
+    });
+
+    expect(wrapper.find('.show-all').exists()).toBeTruthy();
+  });
+
+  it('should pass outline down to rectangle', async() => {
+    const wrapper = mount(KeyValue, {
+      props: {
+        propertyName, rows, outline: false
+      },
+      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 },
+        provide: { store },
+        directives
+      }
+    });
+
+    const row = rows[0];
+    const concatenated = `${ row.key }: ${ row.value }`;
+    const rectangleComponent = wrapper.find('.row').findComponent(Rectangle);
+
+    expect(rectangleComponent.element.innerHTML).toStrictEqual(concatenated);
+    expect(cleanTooltip.mock.calls[0][1].value).toStrictEqual(concatenated);
+  });
+});

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

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+
+describe('component: Rectangle', () => {
+  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();
+    expect(wrapper.find('.rectangle.outline').exists()).toBeFalsy();
+  });
+
+  it('should render outline class when passed outline:true', async() => {
+    const wrapper = mount(Rectangle, { props: { outline: true } });
+
+    expect(wrapper.find('.rectangle.outline').exists()).toBeTruthy();
+  });
+
+  it('should render default slot', async() => {
+    const content = 'CONTENT';
+    const wrapper = mount(Rectangle, { slots: { default: content } });
+
+    expect(wrapper.find('.rectangle').element.innerHTML).toStrictEqual(content);
+  });
+});

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/__tests__/index.test.ts

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { createStore } from 'vuex';
+
+describe('component: Metadata/index', () => {
+  const store = createStore({});
+  const stubs = ['IdentifyingInformation', 'KeyValue', 'Labels', 'Annotations'];
+
+  const identifyingInformation = [{ label: 'zero' }];
+  const keyValue = [{ key: 'key', value: 'value' }];
+
+  it('should render the container with metadata class', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.spaced-row.metadata').exists()).toBeTruthy();
+  });
+
+  it('should render identifying information with the appropriate class and rows', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    const identingInformationComponent = wrapper.find('.identifying-info').getComponent<any>('identifying-information-stub');
+
+    expect(identingInformationComponent.props('rows')).toStrictEqual(identifyingInformation);
+  });
+
+  it('should render both empty message if labels and annotations are empty and labels/annotations are hidden', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels').exists()).toBeFalsy();
+    expect(wrapper.find('.annotations').exists()).toBeFalsy();
+    const keyValueComponent = wrapper.find('.labels-and-annotations-empty').getComponent<any>('key-value-stub');
+
+    expect(keyValueComponent.props('rows')).toStrictEqual([]);
+    expect(keyValueComponent.props('propertyName')).toStrictEqual('component.resource.detail.metadata.labelsAndAnnotations');
+  });
+
+  it('should render labels and pass appropriate props and not render the empty message', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      keyValue,
+        annotations: []
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels-and-annotations-empty').exists()).toBeFalsy();
+
+    const labelsComponent = wrapper.find('.labels').getComponent<any>('labels-stub');
+
+    expect(labelsComponent.props('labels')).toStrictEqual(keyValue);
+  });
+
+  it('should render annotations and pass appropriate props and not render the empty message', async() => {
+    const wrapper = mount(Metadata, {
+      props: {
+        identifyingInformation,
+        labels:      [],
+        annotations: keyValue
+      },
+      global: { provide: { store }, stubs }
+    });
+
+    expect(wrapper.find('.labels-and-annotations-empty').exists()).toBeFalsy();
+
+    const labelsComponent = wrapper.find('.annotations').getComponent<any>('annotations-stub');
+
+    expect(labelsComponent.props('annotations')).toStrictEqual(keyValue);
+  });
+});

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

@@ -0,0 +1,78 @@
+import { Row as IdentifyingInformationRow } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import { useDefaultIdentifyingInformation } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/composable';
+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 computed(() => {
+    return {
+      labels:              labels.value,
+      annotations:         annotations.value,
+      onShowConfiguration: (returnFocusSelector: string) => openResourceDetailDrawer(resource, returnFocusSelector)
+    };
+  });
+};
+
+export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInformation?: (IdentifyingInformationRow[] | Ref<IdentifyingInformationRow[]>)) => {
+  const defaultIdentifyingInformation = useDefaultIdentifyingInformation(resource);
+  const additionalIdentifyingInformationValue = toValue(additionalIdentifyingInformation);
+
+  const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
+  const basicMetaData = useBasicMetadata(resource);
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+
+  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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import IdentifyingInformation, { Row as IdentifyingInformationRow } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
+import Labels, { Label } from '@shell/components/Resource/Detail/Metadata/Labels/index.vue';
+import Annotations, { Annotation } from '@shell/components/Resource/Detail/Metadata/Annotations/index.vue';
+import SpacedRow from '@shell/components/Resource/Detail/SpacedRow.vue';
+import KeyValue from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import { computed } from 'vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export interface MetadataProps {
+  identifyingInformation: IdentifyingInformationRow[],
+  labels: Label[],
+  annotations: Annotation[],
+  onShowConfiguration?: (returnFocusSelector: string) => void;
+}
+
+const { identifyingInformation, labels, annotations } = defineProps<MetadataProps>();
+const emit = defineEmits(['show-configuration']);
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const showBothEmpty = computed(() => labels.length === 0 && annotations.length === 0);
+</script>
+
+<template>
+  <SpacedRow class="metadata ppb-3">
+    <div
+      class="identifying-info"
+    >
+      <IdentifyingInformation :rows="identifyingInformation" />
+    </div>
+    <!-- In the renders we want the same empty message that the labels/annotations show but we want it to span two columns. This is a cheap way to keep the look consistent without duplicating code. -->
+    <div
+      v-if="showBothEmpty"
+      class="labels-and-annotations-empty"
+    >
+      <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. -->
+    <div
+      v-if="!showBothEmpty"
+      class="labels"
+    >
+      <Labels
+        :labels="labels"
+        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+      />
+    </div>
+    <div
+      v-if="!showBothEmpty"
+      class="annotations"
+    >
+      <Annotations
+        :annotations="annotations"
+        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+      />
+    </div>
+  </SpacedRow>
+</template>
+
+<style lang="scss" scoped>
+.metadata {
+    .labels-and-annotations-empty {
+      grid-column: span 2;
+    }
+}
+</style>

package/components/Resource/Detail/Page.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="resource-detail-page">
+    <div
+      v-if="$slots['top-area']"
+      class="top-area"
+    >
+      <slot name="top-area" />
+    </div>
+    <div
+      v-if="$slots['middle-area']"
+      class="middle-area mmt-6"
+    >
+      <slot name="middle-area" />
+    </div>
+    <div
+      v-if="$slots['bottom-area']"
+      class="bottom-area mmt-6"
+    >
+      <slot name="bottom-area" />
+    </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/PercentageBar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  percent: number;
+  percentageColor?: string;
+  baseColor?: string;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    baseColor:       'var(--progress-bg)',
+    percentageColor: 'var(--primary)'
+  }
+);
+
+const usedWidth = computed(() => `${ props.percent }%`);
+</script>
+
+<template>
+  <div class="percentage-bar">
+    <div class="used" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.percentage-bar {
+  border-radius: var(--border-radius-md);
+  height: 16px;
+  overflow: hidden;
+  background-color: v-bind('props.baseColor');
+
+  .used {
+    height: 100%;
+    background-color: v-bind('props.percentageColor');
+    width: v-bind('usedWidth')
+  }
+}
+</style>

package/components/Resource/Detail/ResourceRow.vue

@@ -0,0 +1,138 @@
+<script lang="ts">
+import SubtleLink from '@shell/components/SubtleLink.vue';
+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;
+  count: number;
+}
+
+export interface Props {
+  label: string;
+  to?: RouteLocationRaw;
+  color?: StateColor;
+  counts?: Count[];
+}
+
+export function extractCounts(labels: string[]): Count[] {
+  const accumulator: { [k: string]: number} = {};
+
+  labels.forEach((l: string) => {
+    accumulator[l] = accumulator[l] || 0;
+    accumulator[l]++;
+  });
+
+  const counts: Count[] = Object.entries(accumulator).map(([label, count]) => ({ label, count }));
+
+  return sortBy(counts, 'label');
+}
+
+</script>
+
+<script setup lang="ts">
+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 && (counts && counts.length > 0)"
+        :to="to"
+      >
+        {{ label }}
+      </SubtleLink>
+      <span
+        v-else
+        class="text-muted"
+      >
+        {{ label }}
+      </span>
+    </div>
+    <div class="right">
+      <div
+        v-if="!counts || counts.length == 0"
+        class="text-muted"
+      >
+        &mdash;
+      </div>
+      <div
+        v-else
+        class="counts"
+      >
+        <StateDot
+          v-if="color"
+          :color="color"
+        />
+        <span
+          v-for="count in displayCounts"
+          :key="count.label"
+          class="count"
+        >
+          {{ count.count }} {{ count.label }}<span class="and">&nbsp;+&nbsp;</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resource-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .right {
+      flex-grow: 1;
+      text-align: right;
+    }
+
+    .counts {
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .count:last-of-type .and {
+      display: none;
+    }
+
+    .state-dot {
+      margin-right: 10px;
+    }
+}
+</style>