dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types.ts

@@ -0,0 +1,109 @@
+import { computed, toValue } from 'vue';
+import { base64Decode } from '@shell/utils/crypto';
+
+export const useSecretInfo = (resource: any) => {
+  return computed(() => {
+    const resourceValue = toValue(resource);
+
+    return {
+      secretType: resourceValue._type,
+      secretData: resourceValue.data || {}
+    };
+  });
+};
+
+export const useSecretRows = (resource: any) => {
+  return computed(() => {
+    const resourceValue = toValue(resource);
+
+    const rows: any[] = [];
+    const { data = {} } = resourceValue;
+
+    Object.keys(data).forEach((key) => {
+      const value = base64Decode(data[key]);
+
+      rows.push({
+        key,
+        value
+      });
+    });
+
+    return rows;
+  });
+};
+
+export const useDockerAuths = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    const json = base64Decode(secretInfo.value.secretData['.dockerconfigjson']);
+
+    return JSON.parse(json).auths;
+  });
+};
+
+export const useDockerRegistry = (resource: any) => {
+  const dockerAuths = useDockerAuths(resource);
+
+  return computed(() => {
+    return { registryUrl: Object.keys(dockerAuths.value)[0] };
+  });
+};
+
+export const useDockerBasic = (resource: any) => {
+  const dockerAuths = useDockerAuths(resource);
+  const dockerRegistry = useDockerRegistry(resource);
+
+  return computed(() => {
+    return {
+      username: dockerAuths.value[dockerRegistry.value.registryUrl].username,
+      password: dockerAuths.value[dockerRegistry.value.registryUrl].password,
+    };
+  });
+};
+
+export const useBasic = (resource: any) => {
+  const rows = useSecretRows(resource);
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      username: base64Decode(secretInfo.value.secretData.username || ''),
+      password: base64Decode(secretInfo.value.secretData.password || ''),
+      rows:     rows.value
+    };
+  });
+};
+
+export const useSsh = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      username: base64Decode(secretInfo.value.secretData['ssh-publickey'] || ''),
+      password: base64Decode(secretInfo.value.secretData['ssh-privatekey'] || ''),
+    };
+  });
+};
+
+export const useServiceAccount = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      token: base64Decode(secretInfo.value.secretData['token']),
+      crt:   base64Decode(secretInfo.value.secretData['ca.crt']),
+    };
+  });
+};
+
+export const useTls = (resource: any) => {
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    return {
+      token: base64Decode(secretInfo.value.secretData['tls.key']),
+      crt:   base64Decode(secretInfo.value.secretData['tls.crt']),
+    };
+  });
+};

package/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables.ts

@@ -0,0 +1,52 @@
+import { computed, ComputedRef } from 'vue';
+import { Props } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue';
+import { SECRET_TYPES } from '@shell/config/secret';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import {
+  useBasic, useSsh, useTls, useSecretInfo, useDockerRegistry, useServiceAccount, useDockerBasic
+} from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types';
+
+export const useSecretDataTabDefaultProps = (resource: any): ComputedRef<Props> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    switch (secretInfo.value.secretType) {
+    case SECRET_TYPES.DOCKER_JSON:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: {
+          registry:  useDockerRegistry(resource).value,
+          basicAuth: useDockerBasic(resource).value
+        }
+      };
+    case SECRET_TYPES.TLS:
+      return {
+        tabLabel:   i18n.t('secret.certificate.certificate'),
+        secretData: { certificate: useTls(resource).value }
+      };
+    case SECRET_TYPES.SERVICE_ACCT:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { serviceAccount: useServiceAccount(resource).value }
+      };
+    case SECRET_TYPES.SSH:
+      return {
+        tabLabel:   i18n.t('secret.ssh.keys'),
+        secretData: { ssh: useSsh(resource).value }
+      };
+    case SECRET_TYPES.BASIC:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { basicAuth: useBasic(resource).value }
+      };
+    default:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { basic: useBasic(resource).value }
+      };
+    }
+  });
+};

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import Basic, { Props as BasicProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Basic.vue';
+import Ssh, { Props as SshProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Ssh.vue';
+import ServiceAccountToken, { Props as ServiceAccountTokenProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/ServiceAccountToken.vue';
+import Certificate, { Props as CertificateProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Certificate.vue';
+import BasicAuth, { Props as BasicAuthProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/BasicAuth.vue';
+import Registry, { Props as RegistryProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Registry.vue';
+
+export interface SecretData {
+  basic?: BasicProps;
+  basicAuth?: BasicAuthProps;
+  ssh?: SshProps;
+  serviceAccount?: ServiceAccountTokenProps;
+  certificate?: CertificateProps;
+  registry?: RegistryProps;
+}
+
+export interface Props {
+  tabLabel: string;
+  secretData: SecretData;
+
+  weight?: number;
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <Tab
+    class="secret-data-tab"
+    name="data"
+    :label="props.tabLabel"
+    :weight="props.weight"
+  >
+    <Registry
+      v-if="props.secretData.registry"
+      v-bind="props.secretData.registry"
+    />
+    <BasicAuth
+      v-if="props.secretData.basicAuth"
+      v-bind="props.secretData.basicAuth"
+    />
+    <Certificate
+      v-else-if="props.secretData.certificate"
+      v-bind="props.secretData.certificate"
+    />
+    <ServiceAccountToken
+      v-if="props.secretData.serviceAccount"
+      v-bind="props.secretData.serviceAccount"
+    />
+    <Ssh
+      v-if="props.secretData.ssh"
+      v-bind="props.secretData.ssh"
+    />
+    <Basic
+      v-if="props.secretData.basic"
+      v-bind="props.secretData.basic"
+    />
+  </Tab>
+</template>
+
+<style lang="scss" scoped>
+.secret-data-tab {
+  :deep() .entry:not(:first-of-type) {
+    margin-top: 16px;
+  }
+}
+</style>

package/components/Resource/Detail/SpacedRow.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="spaced-row">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.spaced-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));;
+  grid-auto-flow: dense;
+  grid-gap: 24px;
+}
+</style>

package/components/Resource/Detail/StatusBar.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { stateColorCssVar, StateColor } from '@shell/utils/style';
+
+export interface Segment {
+  color: StateColor;
+  percent: number;
+}
+
+export interface Props {
+  segments: Segment[]
+}
+
+const { segments } = defineProps<Props>();
+
+const computeStyle = (segment: Segment) => {
+  return {
+    backgroundColor: stateColorCssVar(segment.color),
+    width:           `${ segment.percent }%`
+  };
+};
+</script>
+
+<template>
+  <div class="status-bar">
+    <div
+      v-for="(segment, i) in segments"
+      :key="i"
+      class="segment"
+      :style="computeStyle(segment)"
+    >
+&nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    column-gap: 2px;
+    height: 21px;
+
+    .segment {
+        height: 4px;
+
+        &:first-of-type {
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+
+        &:last-of-type {
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+    }
+}
+</style>

package/components/Resource/Detail/StatusRow.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Bubble from '@shell/components/Resource/Detail/Card/PodsCard/Bubble.vue';
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+
+export interface Props {
+        color: StateColor;
+        label: string;
+        count: number;
+        percent: number;
+}
+
+const {
+  color, label, count, percent
+} = defineProps<Props>();
+</script>
+
+<template>
+  <div class="status-row">
+    <div
+      class="indicator"
+      :style="{backgroundColor: stateColorCssVar(color)}"
+    />
+    <div class="label">
+      {{ label }}
+    </div>
+    <div class="count">
+      <Bubble>{{ count }}</Bubble>
+    </div>
+    <div class="percent text-muted">
+      {{ percent.toFixed(1) }}%
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
+    .label {
+      flex-grow: 1;
+    }
+
+    .indicator {
+      height: 4px;
+      border-radius: 4px;
+      width: 20px;
+      margin-right: 10px;
+    }
+
+    .percent {
+      width: 60px;
+      text-align: right;
+    }
+}
+</style>

package/components/Resource/Detail/TitleBar/Title.vue

@@ -0,0 +1,14 @@
+<template>
+  <h1 class="title">
+    <slot name="default" />
+  </h1>
+</template>
+
+<style lang="scss" scoped>
+  h1.title {
+    display: inline-block;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+  }
+</style>

package/components/Resource/Detail/TitleBar/Top.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="top">
+    <slot name="default" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

package/components/Resource/Detail/TitleBar/__tests__/Title.test.ts

@@ -0,0 +1,17 @@
+import { mount } from '@vue/test-utils';
+import Title from '@shell/components/Resource/Detail/TitleBar/Title.vue';
+
+describe('component: TitleBar/Title', () => {
+  it('should render container with class title', async() => {
+    const wrapper = mount(Title);
+
+    expect(wrapper.find('.title').exists()).toBeTruthy();
+  });
+
+  it('should render default slot', async() => {
+    const content = 'CONTENT';
+    const wrapper = mount(Title, { slots: { default: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
+  });
+});

package/components/Resource/Detail/TitleBar/__tests__/Top.test.ts

@@ -0,0 +1,17 @@
+import { mount } from '@vue/test-utils';
+import Top from '@shell/components/Resource/Detail/TitleBar/Top.vue';
+
+describe('component: TitleBar/Top', () => {
+  it('should render container with class top', async() => {
+    const wrapper = mount(Top);
+
+    expect(wrapper.find('.top').exists()).toBeTruthy();
+  });
+
+  it('should render default slot', async() => {
+    const content = 'CONTENT';
+    const wrapper = mount(Top, { slots: { default: content } });
+
+    expect(wrapper.find('.top').element.innerHTML).toStrictEqual(content);
+  });
+});

package/components/Resource/Detail/TitleBar/__tests__/composables.test.ts

@@ -0,0 +1,63 @@
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const mockStore = {
+  getters: {
+    'type-map/labelFor': jest.fn(),
+    'type-map/hasGraph': jest.fn(),
+    currentStore:        jest.fn(),
+    'cluster/schemaFor': jest.fn()
+  }
+};
+const mockRoute = { params: { cluster: 'CLUSTER' } };
+const mockDrawer = { openResourceDetailDrawer: jest.fn() };
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+jest.mock('@shell/components/Drawer/ResourceDetailDrawer/composables', () => ({ useResourceDetailDrawer: () => mockDrawer }));
+
+describe('composables: TitleBar', () => {
+  const resource = {
+    nameDisplay:     'RESOURCE_NAME',
+    namespace:       'RESOURCE_NAMESPACE',
+    type:            'RESOURCE_TYPE',
+    stateBackground: 'RESOURCE_STATE_BACKGROUND',
+    stateDisplay:    'RESOURCE_STATE_DISPLAY',
+    description:     'RESOURCE_DESCRIPTION',
+  };
+  const labelFor = 'LABEL_FOR';
+  const schema = { type: 'SCHEMA' };
+  const hasGraph = true;
+
+  it('should return the appropriate values based on input', async() => {
+    const route = useRoute();
+
+    mockStore.getters['currentStore'].mockImplementation(() => 'cluster');
+    mockStore.getters['cluster/schemaFor'].mockImplementation(() => schema);
+    mockStore.getters['type-map/labelFor'].mockImplementation(() => labelFor);
+    mockStore.getters['type-map/hasGraph'].mockImplementation(() => hasGraph);
+
+    const props = useDefaultTitleBarProps(resource, ref(undefined));
+
+    expect(props.value.resourceTypeLabel).toStrictEqual(labelFor);
+    expect(mockStore.getters['type-map/labelFor']).toHaveBeenLastCalledWith(schema);
+    expect(mockStore.getters['type-map/hasGraph']).toHaveBeenLastCalledWith(resource.type);
+    expect(mockStore.getters['currentStore']).toHaveBeenLastCalledWith(resource.type);
+    expect(mockStore.getters['cluster/schemaFor']).toHaveBeenLastCalledWith(resource.type);
+    expect(props.value.resourceTo?.params.product).toStrictEqual('explorer');
+    expect(props.value.resourceTo?.params.cluster).toStrictEqual(route.params.cluster);
+    expect(props.value.resourceTo?.params.namespace).toStrictEqual(resource.namespace);
+    expect(props.value.resourceTo?.params.resource).toStrictEqual(resource.type);
+    expect(props.value.resourceName).toStrictEqual(resource.nameDisplay);
+
+    expect(props.value.actionMenuResource).toStrictEqual(resource);
+    expect(props.value.badge?.color).toStrictEqual(resource.stateBackground);
+    expect(props.value.badge?.label).toStrictEqual(resource.stateDisplay);
+    expect(props.value.description).toStrictEqual(resource.description);
+    expect(props.value.showViewOptions).toStrictEqual(hasGraph);
+
+    props.value.onShowConfiguration?.('callback');
+    expect(mockDrawer.openResourceDetailDrawer).toHaveBeenCalledTimes(1);
+  });
+});

package/components/Resource/Detail/TitleBar/__tests__/index.test.ts

@@ -0,0 +1,142 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { createStore } from 'vuex';
+
+jest.mock(`@shell/assets/images/icons/document.svg`, () => `@shell/assets/images/icons/document.svg`);
+
+describe('component: TitleBar/index', () => {
+  const resourceTypeLabel = 'RESOURCE_TYPE_LABEL';
+  const resourceTo = 'RESOURCE_TO';
+  const resourceName = 'RESOURCE_NAME';
+  const store = createStore({});
+
+  it('should render container with class title-bar', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel,
+        resourceName
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.title-bar').exists()).toBeTruthy();
+  });
+
+  it('should render type label as a link when resourceTo is provided', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel, resourceTo, resourceName
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    const link = wrapper.find('.top .title .resource-link').findComponent(RouterLinkStub);
+
+    expect(link.props('to')).toStrictEqual(resourceTo);
+    expect(link.element.innerHTML.trim()).toStrictEqual(`${ resourceTypeLabel }:`);
+  });
+
+  it('should render type label as text when resourceTo is not provided', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    const span = wrapper.find('.top > .title > .resource-text');
+
+    expect(span.element.innerHTML.trim()).toStrictEqual(`${ resourceTypeLabel }:`);
+  });
+
+  it('should render resourceName', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    const span = wrapper.find('.top > .title > .resource-name');
+
+    expect(span.element.innerHTML).toStrictEqual(resourceName);
+  });
+
+  it('should hide the ShowConfiguration button if onShowConfiguration is not defined', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.top > .actions > .show-configuration').exists()).toBeFalsy();
+  });
+
+  it('should pass appropriate props to RcButton if onShowConfiguration is defined and emits show-configuration', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel, resourceName, onShowConfiguration: () => {}
+      },
+      global: { stubs: { 'router-link': RouterLinkStub, RcButton: true }, provide: { store } }
+    });
+
+    const button = wrapper.find('.top > .actions > .show-configuration');
+    const buttonComponent = button.getComponent<any>('rc-button-stub');
+
+    expect(buttonComponent.props('primary')).toStrictEqual(true);
+    button.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('show-configuration');
+  });
+
+  it('should hide ActionMenu if actionMenuResource is not defined', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub, ActionMenu }, provide: { store } }
+    });
+
+    expect(wrapper.find('.top > .actions > [data-testid="masthead-action-menu"]').exists()).toBeFalsy();
+  });
+
+  it('should pass appropriate props to ActionMenu if actionMenuResource', async() => {
+    const actionMenuResource = { resource: 'test' };
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel, resourceName, actionMenuResource
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, ActionMenu: true },
+        provide: { store }
+      }
+    });
+
+    const actions = wrapper.find('.top > .actions');
+    const actionMenuComponent = actions.getComponent<any>('action-menu-stub');
+
+    expect(actionMenuComponent.props('buttonRole')).toStrictEqual('multiAction');
+    expect(actionMenuComponent.props('resource')).toStrictEqual(actionMenuResource);
+  });
+
+  it('should hide the description element if description is not passed', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel,
+        resourceName
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.bottom.description').exists()).toBeFalsy();
+  });
+
+  it('should show the description element if description is passed', async() => {
+    const description = 'DESCRIPTION';
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel,
+        resourceName,
+        description
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.bottom.description').exists()).toBeTruthy();
+    expect(wrapper.find('.bottom.description').element.innerHTML).toStrictEqual(description);
+  });
+});

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

@@ -0,0 +1,46 @@
+import { useResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { computed, Ref, toValue } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<string | undefined>): Ref<TitleBarProps> => {
+  const route = useRoute();
+  const store = useStore();
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    const resourceSubtypeValue = toValue(resourceSubtype);
+    const currentStore = store.getters['currentStore'](resourceValue.type);
+    const schema = store.getters[`${ currentStore }/schemaFor`](resourceValue.type);
+    const resourceTypeLabel = resourceValue.parentNameOverride || store.getters['type-map/labelFor'](schema);
+    const resourceName = resourceSubtypeValue ? `${ resourceSubtypeValue } - ${ resourceValue.nameDisplay }` : resourceValue.nameDisplay;
+    const resourceTo = resourceValue.listLocation || {
+      name:   'c-cluster-product-resource',
+      params: {
+        product:   'explorer',
+        cluster:   route?.params.cluster,
+        namespace: resourceValue.namespace,
+        resource:  resourceValue.type
+      }
+    };
+    const hasGraph = !!store.getters['type-map/hasGraph'](resourceValue.type);
+    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => openResourceDetailDrawer(resourceValue, returnFocusSelector);
+
+    return {
+      resource:           resourceValue,
+      resourceTypeLabel,
+      resourceTo,
+      resourceName,
+      actionMenuResource: resourceValue,
+      badge:              {
+        color: resourceValue.stateBackground,
+        label: resourceValue.stateDisplay
+      },
+      description:     resourceValue.description,
+      showViewOptions: hasGraph,
+      onShowConfiguration
+    };
+  });
+};