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

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>

package/components/Resource/Detail/ResourceTabs/SecretDataTab/ServiceAccountToken.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-service-account-token">
+    <div class="col span-6 crt">
+      <DetailText
+        :value="props.crt"
+        label-key="secret.serviceAcct.ca"
+      />
+    </div>
+    <div class="col span-6 token">
+      <DetailText
+        :value="props.token"
+        label-key="secret.serviceAcct.token"
+        :conceal="true"
+        :conceal-stand-alone="true"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+<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 secret-data-ssh">
+    <div class="col span-6 username">
+      <DetailText
+        :value="props.username"
+        label-key="secret.ssh.public"
+      />
+    </div>
+    <div class="col span-6 password">
+      <DetailText
+        :value="props.password"
+        label-key="secret.ssh.private"
+        :conceal="true"
+        :conceal-stand-alone="true"
+      />
+    </div>
+  </div>
+</template>

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/Basic.test.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import Basic from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Basic.vue';
+
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: `<div class="detail-text">DetailText</div>`,
+  props:    ['value', 'label', 'conceal']
+}));
+
+jest.mock('vuex', () => ({ useStore: jest.fn() }));
+
+describe('component: SecretDataTab/Basic', () => {
+  const rows = [
+    {
+      key:   'KEY',
+      value: 'VALUE'
+    }
+  ];
+
+  it('should render container with class secret-data-tab-basic', async() => {
+    const wrapper = mount(Basic, { props: { rows: [] } });
+
+    expect(wrapper.find('.secret-data-tab-basic').exists()).toBeTruthy();
+  });
+
+  it('should render no rows message if empty rows are passed', async() => {
+    const wrapper = mount(Basic, { props: { rows: [] } });
+
+    expect(wrapper.find('.no-rows').text()).toStrictEqual('sortableTable.noRows');
+  });
+
+  it('should render row of DetailText with appropriate props', async() => {
+    const wrapper = mount(Basic, { props: { rows } });
+
+    const detailTextComponent = wrapper.findComponent({ name: 'DetailText' });
+
+    expect(detailTextComponent.props('label')).toStrictEqual(rows[0].key);
+    expect(detailTextComponent.props('value')).toStrictEqual(rows[0].value);
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/BasicAuth.test.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import BasicAuth from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/BasicAuth.vue';
+
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: `<div class="detail-text">DetailText</div>`,
+  props:    ['value', 'label-key', 'conceal']
+}));
+
+describe('component: SecretDataTab/BasicAuth', () => {
+  const username = 'USERNAME';
+  const password = 'PASSWORD';
+
+  it('should render container with class secret-data-basic-auth', async() => {
+    const wrapper = mount(BasicAuth, { props: { username, password } });
+
+    expect(wrapper.find('.secret-data-basic-auth').exists()).toBeTruthy();
+  });
+
+  it('should render DetailText with username and password props passed correctly', async() => {
+    const wrapper = mount(BasicAuth, { props: { username, password } });
+
+    const usernameDetailTextComponent = wrapper.find('.username').findComponent({ name: 'DetailText' });
+    const passwordDetailTextComponent = wrapper.find('.password').findComponent({ name: 'DetailText' });
+
+    expect(usernameDetailTextComponent.props('value')).toStrictEqual(username);
+    expect(usernameDetailTextComponent.props('labelKey')).toStrictEqual('secret.registry.username');
+
+    expect(passwordDetailTextComponent.props('value')).toStrictEqual(password);
+    expect(passwordDetailTextComponent.props('labelKey')).toStrictEqual('secret.registry.password');
+    expect(passwordDetailTextComponent.props('conceal')).toStrictEqual(true);
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/Certificate.test.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import Certificate from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Certificate.vue';
+
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: `<div class="detail-text">DetailText</div>`,
+  props:    ['value', 'label-key', 'conceal']
+}));
+
+describe('component: SecretDataTab/Certificate', () => {
+  const crt = 'CRT';
+  const token = 'TOKEN';
+
+  it('should render container with class secret-data-basic-auth', async() => {
+    const wrapper = mount(Certificate, { props: { crt, token } });
+
+    expect(wrapper.find('.secret-data-certificate').exists()).toBeTruthy();
+  });
+
+  it('should render DetailText with crt and token props passed correctly', async() => {
+    const wrapper = mount(Certificate, { props: { crt, token } });
+
+    const crtDetailTextComponent = wrapper.find('.crt').findComponent({ name: 'DetailText' });
+    const tokenDetailTextComponent = wrapper.find('.token').findComponent({ name: 'DetailText' });
+
+    expect(crtDetailTextComponent.props('value')).toStrictEqual(crt);
+    expect(crtDetailTextComponent.props('labelKey')).toStrictEqual('secret.certificate.certificate');
+
+    expect(tokenDetailTextComponent.props('value')).toStrictEqual(token);
+    expect(tokenDetailTextComponent.props('labelKey')).toStrictEqual('secret.certificate.privateKey');
+    expect(tokenDetailTextComponent.props('conceal')).toStrictEqual(true);
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/Registry.test.ts

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils';
+import Registry from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Registry.vue';
+
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: `<div class="detail-text">DetailText</div>`,
+  props:    ['value', 'label-key']
+}));
+
+describe('component: SecretDataTab/Registry', () => {
+  const registryUrl = 'url';
+
+  it('should render container with class secret-data-registry', async() => {
+    const wrapper = mount(Registry, { props: { registryUrl } });
+
+    expect(wrapper.find('.secret-data-registry').exists()).toBeTruthy();
+  });
+
+  it('should render DetailText with crt and token props passed correctly', async() => {
+    const wrapper = mount(Registry, { props: { registryUrl } });
+
+    const registryUrlDetailTextComponent = wrapper.find('.registry-url').findComponent({ name: 'DetailText' });
+
+    expect(registryUrlDetailTextComponent.props('value')).toStrictEqual(registryUrl);
+    expect(registryUrlDetailTextComponent.props('labelKey')).toStrictEqual('secret.registry.domainName');
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/ServiceAccountToken.test.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import ServiceAccountToken from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/ServiceAccountToken.vue';
+
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: `<div class="detail-text">DetailText</div>`,
+  props:    ['value', 'label-key', 'conceal']
+}));
+
+describe('component: SecretDataTab/ServiceAccountToken', () => {
+  const crt = 'CRT';
+  const token = 'TOKEN';
+
+  it('should render container with class secret-data-service-account-token', async() => {
+    const wrapper = mount(ServiceAccountToken, { props: { crt, token } });
+
+    expect(wrapper.find('.secret-data-service-account-token').exists()).toBeTruthy();
+  });
+
+  it('should render DetailText with ca and token props passed correctly', async() => {
+    const wrapper = mount(ServiceAccountToken, { props: { crt, token } });
+
+    const caDetailTextComponent = wrapper.find('.crt').findComponent({ name: 'DetailText' });
+    const tokenDetailTextComponent = wrapper.find('.token').findComponent({ name: 'DetailText' });
+
+    expect(caDetailTextComponent.props('value')).toStrictEqual(crt);
+    expect(caDetailTextComponent.props('labelKey')).toStrictEqual('secret.serviceAcct.ca');
+
+    expect(tokenDetailTextComponent.props('value')).toStrictEqual(token);
+    expect(tokenDetailTextComponent.props('labelKey')).toStrictEqual('secret.serviceAcct.token');
+    expect(tokenDetailTextComponent.props('conceal')).toStrictEqual(true);
+  });
+});

package/components/Resource/Detail/ResourceTabs/SecretDataTab/__tests__/Ssh.test.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import Ssh from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Ssh.vue';
+
+jest.mock('@shell/components/DetailText.vue', () => ({
+  name:     'DetailText',
+  template: `<div class="detail-text">DetailText</div>`,
+  props:    ['value', 'label-key', 'conceal']
+}));
+
+describe('component: SecretDataTab/BasicAuth', () => {
+  const username = 'USERNAME';
+  const password = 'PASSWORD';
+
+  it('should render container with class secret-data-ssh', async() => {
+    const wrapper = mount(Ssh, { props: { username, password } });
+
+    expect(wrapper.find('.secret-data-ssh').exists()).toBeTruthy();
+  });
+
+  it('should render DetailText with username and password props passed correctly', async() => {
+    const wrapper = mount(Ssh, { props: { username, password } });
+
+    const usernameDetailTextComponent = wrapper.find('.username').findComponent({ name: 'DetailText' });
+    const passwordDetailTextComponent = wrapper.find('.password').findComponent({ name: 'DetailText' });
+
+    expect(usernameDetailTextComponent.props('value')).toStrictEqual(username);
+    expect(usernameDetailTextComponent.props('labelKey')).toStrictEqual('secret.ssh.public');
+
+    expect(passwordDetailTextComponent.props('value')).toStrictEqual(password);
+    expect(passwordDetailTextComponent.props('labelKey')).toStrictEqual('secret.ssh.private');
+    expect(passwordDetailTextComponent.props('conceal')).toStrictEqual(true);
+  });
+});