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

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

@@ -3,27 +3,76 @@ import { useDefaultIdentifyingInformation } from '@shell/components/Resource/Det
 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 {
-    labels,
-    annotations
-  };
+  return computed(() => {
+    return {
+      labels:              labels.value,
+      annotations:         annotations.value,
+      onShowConfiguration: (returnFocusSelector: string) => openResourceDetailDrawer(resource, returnFocusSelector)
+    };
+  });
 };
 
-export const useDefaultMetadata = (resource: any, additionalIdentifyingInformation?: (IdentifyingInformationRow[] | Ref<IdentifyingInformationRow[]>)) => {
+export const useDefaultMetadataProps = (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);
+  const basicMetaData = useBasicMetadata(resource);
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
 
-  return {
-    identifyingInformation,
-    labels,
-    annotations
-  };
+  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

@@ -11,10 +11,12 @@ import { useStore } from 'vuex';
 export interface MetadataProps {
   identifyingInformation: IdentifyingInformationRow[],
   labels: Label[],
-  annotations: Annotation[]
+  annotations: Annotation[],
+  onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 
 const { identifyingInformation, labels, annotations } = defineProps<MetadataProps>();
+const emit = defineEmits(['show-configuration']);
 
 const store = useStore();
 const i18n = useI18n(store);
@@ -37,6 +39,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
       <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. -->
@@ -44,13 +47,19 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
       v-if="!showBothEmpty"
       class="labels"
     >
-      <Labels :labels="labels" />
+      <Labels
+        :labels="labels"
+        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+      />
     </div>
     <div
       v-if="!showBothEmpty"
       class="annotations"
     >
-      <Annotations :annotations="annotations" />
+      <Annotations
+        :annotations="annotations"
+        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+      />
     </div>
   </SpacedRow>
 </template>
@@ -60,7 +69,5 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     .labels-and-annotations-empty {
       grid-column: span 2;
     }
-
-    border-bottom: 1px solid var(--border);
 }
 </style>

package/components/Resource/Detail/Page.vue

@@ -20,3 +20,18 @@
     </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/ResourceRow.vue

@@ -1,8 +1,12 @@
 <script lang="ts">
 import SubtleLink from '@shell/components/SubtleLink.vue';
-import { StateColor, stateColorCssVar } from '@shell/utils/style';
-import { sortBy } from 'lodash';
+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;
@@ -35,13 +39,38 @@ export function extractCounts(labels: string[]): Count[] {
 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"
+        v-if="to && (counts && counts.length > 0)"
         :to="to"
       >
         {{ label }}
@@ -64,15 +93,12 @@ const {
         v-else
         class="counts"
       >
-        <span
+        <StateDot
           v-if="color"
-          class="dot"
-          :style="{backgroundColor: stateColorCssVar(color)}"
-        >
-&nbsp;
-        </span>
+          :color="color"
+        />
         <span
-          v-for="count in counts"
+          v-for="count in displayCounts"
           :key="count.label"
           class="count"
         >
@@ -105,14 +131,7 @@ const {
       display: none;
     }
 
-    .dot {
-      display: inline-block;
-
-      $size: 6px;
-      width: $size;
-      height: $size;
-
-      border-radius: 50%;
+    .state-dot {
       margin-right: 10px;
     }
 }

package/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/__tests__/composables.test.ts

@@ -0,0 +1,29 @@
+import { useGetConfigMapDataTabProps } from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/composables';
+import { base64Encode } from '@shell/utils/crypto';
+
+describe('composables: ConfigMapDataTab', () => {
+  const textData = 'This is textData';
+  const binaryData = 'This is binaryData';
+  const binaryDataBase64 = base64Encode(binaryData);
+
+  it('should handle no data', () => {
+    const props = useGetConfigMapDataTabProps({});
+
+    expect(props.rows).toHaveLength(0);
+  });
+
+  it('should handle text and binary data at the same time', () => {
+    const data = { text: textData };
+    const bData = { binary: binaryDataBase64 };
+
+    const props = useGetConfigMapDataTabProps({ data, binaryData: bData });
+
+    expect(props.rows[0].key).toStrictEqual('text');
+    expect(props.rows[0].value).toStrictEqual(textData);
+    expect(props.rows[0].binary).toStrictEqual(false);
+
+    expect(props.rows[1].key).toStrictEqual('binary');
+    expect(props.rows[1].value).toStrictEqual(binaryData);
+    expect(props.rows[1].binary).toStrictEqual(false);
+  });
+});

package/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/__tests__/index.test.ts

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils';
+import ConfigMapDataTab from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/index.vue';
+
+jest.mock('clipboard-polyfill', () => {});
+jest.mock('vuex');
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: '<div>DetailText</div>',
+  props:    {
+    value: { type: String }, label: { type: String }, binary: { type: Boolean }
+  }
+}));
+
+describe('component: ConfigMapDataTab/index', () => {
+  const global = {
+    provide: {
+      addTab: jest.fn(), removeTab: jest.fn(), sideTabs: false,
+    },
+    directives: { 'clean-tooltip': () => { } }
+  };
+
+  it('should render the now rows message', async() => {
+    const wrapper = mount(ConfigMapDataTab, {
+      props: { rows: [] },
+      global
+    });
+
+    expect(wrapper.find('.no-rows').text()).toStrictEqual('sortableTable.noRows');
+  });
+
+  it('should render DetailText with the appropriate props from row', async() => {
+    const row = {
+      key:    'ROW',
+      value:  'VALUE',
+      binary: false
+    };
+    const wrapper = mount(ConfigMapDataTab, {
+      props: { rows: [row] },
+      global
+    });
+
+    const component = wrapper.getComponent({ name: 'DetailText' });
+
+    expect(component.props('value')).toStrictEqual(row.value);
+    expect(component.props('label')).toStrictEqual(row.key);
+    expect(component.props('binary')).toStrictEqual(row.binary);
+  });
+});

package/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/composables.ts

@@ -0,0 +1,31 @@
+import { Props } from '@shell/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/index.vue';
+import { computed } from 'vue';
+import { base64Decode } from '@shell/utils/crypto';
+
+export const useGetConfigMapDataTabProps = (configMap: any): Props => {
+  const rows = computed(() => {
+    const rows: any[] = [];
+    const { data = {}, binaryData = {} } = configMap;
+
+    Object.keys(data).forEach((key) => {
+      rows.push({
+        key,
+        value:  data[key],
+        binary: false
+      });
+    });
+
+    // we define the binary as false so that the ui doesn't display the size of the binary instead of the actual data...
+    Object.keys(binaryData).forEach((key) => {
+      rows.push({
+        key,
+        value:  base64Decode(binaryData[key]),
+        binary: false
+      });
+    });
+
+    return rows;
+  });
+
+  return { rows: rows.value };
+};

package/components/Resource/Detail/ResourceTabs/ConfigMapDataTab/index.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { useStore } from 'vuex';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import { useI18n } from '@shell/composables/useI18n';
+
+import DetailText from '@shell/components/DetailText.vue';
+
+export interface Row {
+  key: string;
+  value: any;
+  binary: boolean;
+}
+
+export interface Props {
+  rows: Row[];
+  weight?: number;
+}
+</script>
+
+<script lang="ts" setup>
+const { weight, rows } = defineProps<Props>();
+
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+
+<template>
+  <Tab
+    name="data"
+    label-key="secret.data"
+    :weight="weight"
+  >
+    <div
+      v-for="(row,idx) in rows"
+      :key="idx"
+      class="mb-20"
+    >
+      <DetailText
+        :value="row.value"
+        :label="row.key"
+        :binary="row.binary"
+      />
+    </div>
+    <div v-if="!rows.length">
+      <div class="m-20 text-center no-rows">
+        {{ i18n.t('sortableTable.noRows') }}
+      </div>
+    </div>
+  </Tab>
+</template>

package/components/Resource/Detail/ResourceTabs/KnownHostsTab/__tests__/composables.test.ts

@@ -0,0 +1,66 @@
+import * as composables from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/composables';
+import { SECRET_TYPES } from '@shell/config/secret';
+import * as crypto from '@shell/utils/crypto';
+
+jest.mock('@shell/utils/crypto');
+
+describe('composables: KnownHostsTab/composables', () => {
+  const base64DecodeSpy = jest.spyOn(crypto, 'base64Decode');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useGetKnownHostsTabProps', () => {
+    it('should return undefined if not the ssh type but supportsSshKnownHosts is true', () => {
+      const resource = {
+        supportsSshKnownHosts: true,
+        _type:                 SECRET_TYPES.BASIC
+      };
+
+      const props = composables.useGetKnownHostsTabProps(resource);
+
+      expect(props.value).toBeUndefined();
+    });
+
+    it('should return undefined if the ssh type but supportsSshKnownHosts is false', () => {
+      const resource = {
+        supportsSshKnownHosts: false,
+        _type:                 SECRET_TYPES.SSH
+      };
+
+      const props = composables.useGetKnownHostsTabProps(resource);
+
+      expect(props.value).toBeUndefined();
+    });
+
+    it('should return empty knownHosts if known_hosts is falsy', () => {
+      const resource = {
+        supportsSshKnownHosts: true,
+        _type:                 SECRET_TYPES.SSH,
+        data:                  {}
+      };
+
+      const props = composables.useGetKnownHostsTabProps(resource);
+
+      expect(props.value?.knownHosts).toStrictEqual('');
+    });
+
+    it('should return base64decoded knownHosts if known_hosts has a value', () => {
+      const knownHosts = 'KNOWN_HOSTS';
+      const knowHostsDecoded = 'KNOWN_HOSTS_DECODED';
+      const resource = {
+        supportsSshKnownHosts: true,
+        _type:                 SECRET_TYPES.SSH,
+        data:                  { known_hosts: knownHosts }
+      };
+
+      base64DecodeSpy.mockReturnValue(knowHostsDecoded);
+
+      const props = composables.useGetKnownHostsTabProps(resource);
+
+      expect(props.value?.knownHosts).toStrictEqual(knowHostsDecoded);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(knownHosts);
+    });
+  });
+});

package/components/Resource/Detail/ResourceTabs/KnownHostsTab/composables.ts

@@ -0,0 +1,21 @@
+import { Props } from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/index.vue';
+import { computed, Ref, toValue } from 'vue';
+import { base64Decode } from '@shell/utils/crypto';
+import { SECRET_TYPES } from '@shell/config/secret';
+
+export const useGetKnownHostsTabProps = (resource: any): Ref<Props | undefined> => {
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    const isSsh = resourceValue._type === SECRET_TYPES.SSH;
+    const showKnownHosts = isSsh && resourceValue.supportsSshKnownHosts;
+
+    if (!showKnownHosts) {
+      return undefined;
+    }
+
+    const { data = {} } = resourceValue;
+
+    return { knownHosts: data.known_hosts ? base64Decode(data.known_hosts) : '' };
+  });
+};

package/components/Resource/Detail/ResourceTabs/KnownHostsTab/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import DetailText from '@shell/components/DetailText.vue';
+
+export interface Props {
+  knownHosts: string;
+  weight?: number;
+}
+</script>
+
+<script lang="ts" setup>
+const { knownHosts, weight } = defineProps<Props>();
+</script>
+
+<template>
+  <Tab
+    name="known_hosts"
+    label-key="secret.ssh.knownHosts"
+    :weight="weight"
+  >
+    <div class="row">
+      <div class="col span-12">
+        <DetailText
+          :value="knownHosts"
+          label-key="secret.ssh.knownHosts"
+          :conceal="false"
+        />
+      </div>
+    </div>
+  </Tab>
+</template>

package/components/Resource/Detail/ResourceTabs/SecretDataTab/Basic.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+import DetailText from '@shell/components/DetailText.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export interface Row {
+    key?: string;
+    value?: string;
+}
+
+export interface Props {
+    rows: Row[];
+}
+</script>
+
+<script setup lang="ts">
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const props = defineProps<Props>();
+</script>
+<template>
+  <div class="secret-data-tab-basic">
+    <div
+      v-for="(row, idx) in props.rows"
+      :key="idx"
+      class="entry"
+    >
+      <DetailText
+        :value="row.value"
+        :label="row.key"
+        :conceal="true"
+        :conceal-stand-alone="true"
+      />
+    </div>
+    <div v-if="!rows.length">
+      <div
+        class="m-20 text-center no-rows"
+      >
+        {{ i18n.t('sortableTable.noRows') }}
+      </div>
+    </div>
+  </div>
+</template>

package/components/Resource/Detail/ResourceTabs/SecretDataTab/BasicAuth.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import DetailText from '@shell/components/DetailText.vue';
+
+export interface Props {
+    username?: string;
+    password?: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="row mt-20 secret-data-basic-auth">
+    <div class="col span-6 username">
+      <DetailText
+        :value="props.username"
+        label-key="secret.registry.username"
+      />
+    </div>
+    <div class="col span-6 password">
+      <DetailText
+        :value="props.password"
+        label-key="secret.registry.password"
+        :conceal="true"
+        :conceal-stand-alone="true"
+      />
+    </div>
+  </div>
+</template>

package/components/Resource/Detail/ResourceTabs/SecretDataTab/Certificate.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import DetailText from '@shell/components/DetailText.vue';
+
+export interface Props {
+    crt?: string;
+    token?: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="row secret-data-certificate">
+    <div class="col span-6 token">
+      <DetailText
+        :value="props.token"
+        label-key="secret.certificate.privateKey"
+        :conceal="true"
+        :conceal-stand-alone="true"
+      />
+    </div>
+    <div class="col span-6 crt">
+      <DetailText
+        :value="props.crt"
+        label-key="secret.certificate.certificate"
+      />
+    </div>
+  </div>
+</template>

package/components/Resource/Detail/ResourceTabs/SecretDataTab/Registry.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import DetailText from '@shell/components/DetailText.vue';
+
+export interface Props {
+  registryUrl?: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="row secret-data-registry">
+    <div class="col span-12 registry-url">
+      <DetailText
+        :value="props.registryUrl"
+        label-key="secret.registry.domainName"
+      />
+    </div>
+  </div>
+</template>