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

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

@@ -0,0 +1,298 @@
+import { useI18n } from '@shell/composables/useI18n';
+import { computed, ComputedRef, markRaw, toValue } from 'vue';
+import Additional from '@shell/components/Resource/Detail/Additional.vue';
+import { useStore } from 'vuex';
+import { NAMESPACE, FLEET, SERVICE_ACCOUNT } 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';
+import { useRoute } from 'vue-router';
+import { TYPES as SECRET_TYPES } from '@shell/models/secret';
+import { KUBERNETES } from '@shell/config/labels-annotations';
+
+export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.namespace || resourceValue.namespaces) {
+    return;
+  }
+
+  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
+    };
+  });
+};
+
+export const useWorkspace = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+  const route = useRoute();
+
+  const isWorkspace = store.getters['productId'] === FLEET_NAME && !!resourceValue?.metadata?.namespace;
+
+  if (!isWorkspace) {
+    return;
+  }
+
+  return computed(() => ({
+    label: i18n.t('component.resource.detail.metadata.identifyingInformation.workspace'),
+    value: resourceValue.namespace,
+    to:    {
+      name:   `c-cluster-product-resource-id`,
+      params: {
+        product:  store.getters['productId'],
+        cluster:  store.getters['clusterId'],
+        resource: FLEET.WORKSPACE,
+        id:       route.params.namespace
+      }
+    }
+  }));
+};
+
+export const useLiveDate = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  const options = store.getters[`type-map/optionsFor`](resource.type);
+
+  if (!options.showAge) {
+    return;
+  }
+
+  return computed(() => ({
+    label:         i18n.t('component.resource.detail.metadata.identifyingInformation.age'),
+    valueOverride: {
+      component: 'LiveDate',
+      props:     { value: resourceValue.creationTimestamp }
+    },
+    value: resourceValue.creationTimestamp,
+  }));
+};
+
+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);
+  const resourceValue = toValue(resource);
+
+  if (resource.type !== NAMESPACE || !resourceValue.project) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.project'),
+      value: resourceValue.project?.nameDisplay,
+      to:    resourceValue.project?.detailLocation
+    };
+  });
+};
+
+export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]> => {
+  const details = resource.details;
+
+  if (!details) {
+    return;
+  }
+
+  const extractValueOverride = (detail: any) => {
+    if (!detail.formatter) {
+      return;
+    }
+
+    return {
+      component: detail.formatter,
+      props:     {
+        value: detail.content,
+        ...detail.formatterOpts
+      }
+    };
+  };
+
+  return computed(() => {
+    return details
+      .filter((detail: any) => !detail.separator)
+      .map((detail: any) => {
+        return {
+          label:         detail.label,
+          value:         detail.content,
+          valueOverride: extractValueOverride(detail)
+        };
+      });
+  });
+};
+
+export const useImage = (resource: any): ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  return computed(() => ({
+    label:         i18n.t('component.resource.detail.metadata.identifyingInformation.image'),
+    value:         resourceValue.imageNames,
+    valueOverride: {
+      component: markRaw(Additional),
+      props:     { items: resourceValue.imageNames }
+    },
+  }));
+};
+
+export const useReady = (resource: any): ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  return computed(() => ({
+    label: i18n.t('component.resource.detail.metadata.identifyingInformation.ready'),
+    value: resourceValue.ready,
+  }));
+};
+
+export const useSecretType = (resource: any): ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.type'),
+      value: resourceValue.typeDisplay,
+    };
+  });
+};
+
+export const useServiceAccount = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (resourceValue._type !== SECRET_TYPES.SERVICE_ACCT) {
+    return;
+  }
+
+  const serviceAccountName = resourceValue.metadata?.annotations?.[KUBERNETES.SERVICE_ACCOUNT_NAME];
+
+  if (!serviceAccountName) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.serviceAccount'),
+      value: serviceAccountName,
+      to:    {
+        name:   `c-cluster-product-resource-namespace-id`,
+        params: {
+          product:   store.getters['productId'],
+          cluster:   store.getters['clusterId'],
+          namespace: resource.namespace,
+          resource:  SERVICE_ACCOUNT,
+          id:        serviceAccountName
+        }
+      }
+    };
+  });
+};
+
+export const useCertificate = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.cn) {
+    return;
+  }
+
+  const certificate = resourceValue.plusMoreNames ? `${ resourceValue.cn } ${ i18n.t('secret.certificate.plusMore', { n: resourceValue.plusMoreNames }) }` : resourceValue.cn;
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.certificate'),
+      value: certificate,
+    };
+  });
+};
+
+export const useIssuer = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.issuer) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label: i18n.t('component.resource.detail.metadata.identifyingInformation.issuer'),
+      value: resourceValue.issuer,
+    };
+  });
+};
+
+export const useExpires = (resource: any): undefined | ComputedRef<Row> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const resourceValue = toValue(resource);
+
+  if (!resourceValue.notAfter) {
+    return;
+  }
+
+  return computed(() => {
+    return {
+      label:         i18n.t('component.resource.detail.metadata.identifyingInformation.expires'),
+      valueOverride: {
+        component: markRaw(Date),
+        props:     {
+          value: resourceValue.notAfter,
+          class: resourceValue.dateClass
+        }
+      },
+      value: resourceValue.notAfter,
+    };
+  });
+};

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+import { RouteLocationRaw } from 'vue-router';
+
+export interface Row {
+    label: string;
+    value?: string;
+    valueOverride?: {
+      component: any,
+      props?: Object
+    },
+    to?: RouteLocationRaw;
+    dataTestid?: string;
+    valueDataTestid?: string;
+    status?: 'success' | 'warning' | 'info' | 'error',
+}
+
+export interface MetadataProps {
+  rows: Row[];
+}
+</script>
+
+<script setup lang="ts">
+const { rows } = defineProps<MetadataProps>();
+
+const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`.toLowerCase().replaceAll(' ', '');
+</script>
+
+<template>
+  <div class="identifying-information">
+    <div
+      v-for="row in rows"
+      :key="`${row.label}:${row.value}`"
+      class="row"
+      :data-testid="row.dataTestid"
+    >
+      <label
+        class="label text-muted"
+        :for="getRowValueId(row)"
+      >
+        {{ row.label }}
+      </label>
+      <div
+        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
+          v-if="row.status"
+          :class="['status', row.status]"
+        />
+        <router-link
+          v-if="row.value && row.to"
+          :to="row.to"
+          :data-testid="row.valueDataTestid"
+        >
+          {{ row.value }}
+        </router-link>
+        <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>
+</template>
+
+<style lang="scss" scoped>
+.identifying-information {
+    display: flex;
+    flex-direction: column;
+
+    .row {
+      margin-bottom: 8px;
+
+      .value {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .label {
+        width: 30%;
+        min-width: 120px;
+      }
+
+      .status {
+        display: inline-block;
+        $size: 8px;
+        border-radius: 50%;
+        width: $size;
+        height: $size;
+        margin-right: 12px;
+
+        &.success {
+          background-color: var(--success);
+        }
+
+        &.warning {
+          background-color: var(--warning);
+        }
+
+        &.error {
+          background-color: var(--error);
+        }
+
+        &.info {
+          background-color: var(--info);
+        }
+      }
+
+    }
+
+}
+</style>

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

@@ -0,0 +1,138 @@
+<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;
+
+    onShowConfiguration?: (returnFocusSelector: string) => void;
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<KeyValueProps>(),
+  {
+    outline: false, maxRows: 4, onShowConfiguration: undefined
+  }
+);
+const {
+  propertyName, rows, maxRows, outline
+} = toRefs(props);
+
+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));
+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 }`;
+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="count">{{ rows.length }}</span>
+    </div>
+    <div
+      v-if="visibleRows.length === 0"
+      class="empty mmt-2 text-muted"
+    >
+      <div class="no-rows">
+        {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
+      </div>
+      <div class="show-configuration mmt-1">
+        <a
+          :data-testid="showConfigurationEmptyDataTestId"
+          class="secondary text-muted"
+          href="#"
+          @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationEmptyFocusSelector);}"
+        >
+          {{ i18n.t('component.resource.detail.metadata.keyValue.showConfiguration') }}
+        </a>
+      </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>
+    <a
+      v-if="showShowAllButton"
+      :data-testid="showConfigurationMoreDataTestId"
+      href="#"
+      class="show-all secondary"
+      @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationMoreFocusSelector);}"
+    >
+      {{ showAllLabel }}
+    </a>
+  </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 {
+        width: 100%;
+
+        &:not(:first-of-type) {
+            margin-top: 4px;
+        }
+
+        & {
+            margin-top: 8px;
+        }
+    }
+    .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('should 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,31 @@
+<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[];
+
+    onShowConfiguration?: (returnFocusSelector: string) => void;
+}
+
+</script>
+
+<script setup lang="ts">
+const props = defineProps<LabelsProps>();
+const { labels } = toRefs(props);
+const emit = defineEmits(['show-configuration']);
+
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <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

@@ -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>