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

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

@@ -0,0 +1,130 @@
+<script lang="ts">
+import { computed, toRefs } from 'vue';
+import Rectangle from '@shell/components/Resource/Detail/Metadata/Rectangle.vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+
+export type KeyValueType = {[key: string]: string};
+
+export interface Row {
+    key: string;
+    value: string;
+}
+
+export interface KeyValueProps {
+    propertyName: string;
+    rows: Row[];
+    maxRows?: number;
+    outline?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<KeyValueProps>(),
+  { outline: false, maxRows: 4 }
+);
+const {
+  propertyName, rows, maxRows, outline
+} = toRefs(props);
+
+const store = useStore();
+const i18n = useI18n(store);
+
+// Account for the show all button
+const visibleRowsLength = computed(() => (rows.value.length > maxRows.value ? maxRows.value - 1 : rows.value.length));
+const visibleRows = computed(() => rows.value.slice(0, visibleRowsLength.value));
+const lowercasePropertyName = computed(() => propertyName.value.toLowerCase());
+
+const showShowAllButton = computed(() => rows.value.length > maxRows.value);
+const showAllLabel = computed(() => `Show all ${ lowercasePropertyName.value }`);
+
+const displayValue = (row: Row) => `${ row.key }: ${ row.value }`;
+</script>
+
+<template>
+  <div class="key-value">
+    <div class="heading">
+      <span class="title text-muted">{{ propertyName }}</span>
+      <span class="count">{{ rows.length }}</span>
+    </div>
+    <div
+      v-if="visibleRows.length === 0"
+      class="empty mmt-2"
+    >
+      <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="#"
+        >
+          {{ i18n.t('component.resource.detail.metadata.keyValue.showConfiguration') }}
+        </router-link>
+      </div>
+    </div>
+    <div
+      v-for="row in visibleRows"
+      :key="displayValue(row)"
+      class="row"
+    >
+      <Rectangle
+        v-clean-tooltip="displayValue(row)"
+        :outline="outline"
+      >
+        {{ displayValue(row) }}
+      </Rectangle>
+    </div>
+    <router-link
+      v-if="showShowAllButton"
+      to="#"
+      class="show-all"
+    >
+      {{ showAllLabel }}
+    </router-link>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.key-value {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .count {
+        margin-left: 24px;
+    }
+
+    .heading {
+        margin-bottom: 4px;
+    }
+
+    .row {
+        &:not(:first-of-type) {
+            margin-top: 4px;
+        }
+
+        & {
+            margin-top: 8px;
+        }
+    }
+    .row {
+        margin-top: 8px;
+
+        &:not(:first-of-type) {
+            margin-top: 4px;
+        }
+    }
+    .show-all {
+        margin-top: 8px;
+    }
+
+    .rectangle {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+}
+</style>

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

@@ -0,0 +1,18 @@
+import { mount } from '@vue/test-utils';
+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() => {
+    const labels = [{ key: 'key', value: 'value' }];
+    const wrapper = mount(Labels, {
+      props:  { labels },
+      global: { provide: { store: createStore({}) }, stubs: { KeyValue: true } }
+    });
+
+    const keyValue = wrapper.getComponent<any>('key-value-stub');
+
+    expect(keyValue.props('propertyName')).toStrictEqual('component.resource.detail.metadata.labels.title');
+    expect(keyValue.props('rows')).toStrictEqual(labels);
+  });
+});

package/components/Resource/Detail/Metadata/Labels/composable.ts

@@ -0,0 +1,12 @@
+import { Label } from '@shell/components/Resource/Detail/Metadata/Labels/index.vue';
+import { computed, Ref, toValue } from 'vue';
+
+export const useDefaultLabels = (resource: any): Ref<Label[]> => {
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    const entries = Object.entries<string>(resourceValue.labels || {});
+
+    return entries.map(([key, value]) => ({ key, value }));
+  });
+};

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+import KeyValue, { Row } from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { toRefs } from 'vue';
+import { useStore } from 'vuex';
+
+export type Label = Row;
+export interface LabelsProps {
+    labels: Label[];
+}
+
+</script>
+
+<script setup lang="ts">
+const props = defineProps<LabelsProps>();
+const { labels } = toRefs(props);
+
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <KeyValue
+    :propertyName="i18n.t('component.resource.detail.metadata.labels.title')"
+    :rows="labels"
+  />
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+export interface RectangleProps {
+    outline?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<RectangleProps>(),
+  { outline: false }
+);
+
+</script>
+
+<template>
+  <div
+    class="rectangle"
+    :class="{outline: props.outline}"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rectangle {
+    border: 1px solid var(--tag-bg);
+    border-radius: 4px;
+    padding: 4px;
+
+    &:not(.outline) {
+        background-color: var(--tag-bg);
+    }
+}
+</style>

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').findComponent(RouterLinkStub).element.innerHTML).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('shoulder 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__/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,29 @@
+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';
+
+export const useBasicMetadata = (resource: any) => {
+  const labels = useDefaultLabels(resource);
+  const annotations = useDefaultAnnotations(resource);
+
+  return {
+    labels,
+    annotations
+  };
+};
+
+export const useDefaultMetadata = (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);
+
+  return {
+    identifyingInformation,
+    labels,
+    annotations
+  };
+};

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

@@ -0,0 +1,66 @@
+<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[]
+}
+
+const { identifyingInformation, labels, annotations } = defineProps<MetadataProps>();
+
+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')"
+      />
+    </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" />
+    </div>
+    <div
+      v-if="!showBothEmpty"
+      class="annotations"
+    >
+      <Annotations :annotations="annotations" />
+    </div>
+  </SpacedRow>
+</template>
+
+<style lang="scss" scoped>
+.metadata {
+    .labels-and-annotations-empty {
+      grid-column: span 2;
+    }
+
+    border-bottom: 1px solid var(--border);
+}
+</style>

package/components/Resource/Detail/Page.vue

@@ -0,0 +1,22 @@
+<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>

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>