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

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

@@ -0,0 +1,186 @@
+import * as authTypes from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types';
+import * as crypto from '@shell/utils/crypto';
+
+jest.mock('@shell/utils/crypto');
+jest.mock('vuex', () => ({ useStore: jest.fn() }));
+
+describe('composables: SecretDataTab/auth-types', () => {
+  const resource = { _type: 'RESOURCE', data: { type: 'data' } };
+  const base64 = '64 decoded string';
+  const base64DecodeSpy = jest.spyOn(crypto, 'base64Decode');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useSecretInfo', () => {
+    it('should return the secret type and data set in resource', () => {
+      const info = authTypes.useSecretInfo(resource);
+
+      expect(info.value.secretType).toStrictEqual(resource._type);
+      expect(info.value.secretData).toStrictEqual(resource.data);
+    });
+
+    it('should return the an empty object for secretData if not set on resource', () => {
+      const info = authTypes.useSecretInfo({ _type: 'RESOURCE' });
+
+      expect(info.value.secretType).toStrictEqual(resource._type);
+      expect(info.value.secretData).toStrictEqual({});
+    });
+  });
+
+  describe('useSecretRows', () => {
+    it('should return empty array if data is not set', () => {
+      const rows = authTypes.useSecretRows({});
+
+      expect(rows.value).toStrictEqual([]);
+    });
+
+    it('should return a base64Decoded key/value if data is set', () => {
+      base64DecodeSpy.mockReturnValue(base64);
+      const row = { mockKey: 'value' };
+      const rows = authTypes.useSecretRows({ data: row });
+
+      expect(rows.value[0].key).toStrictEqual('mockKey');
+      expect(rows.value[0].value).toStrictEqual(base64);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(row.mockKey);
+    });
+  });
+
+  describe('useDockerAuths', () => {
+    it('should return the auths field from a base64decoded json object in the `.dockerconfigjson` data field', () => {
+      const data = { '.dockerconfigjson': 'base64Json' };
+      const json = { auths: 'AUTHS' };
+
+      base64DecodeSpy.mockReturnValue(JSON.stringify(json));
+      const dockerAuths = authTypes.useDockerAuths({ data });
+
+      expect(dockerAuths.value).toStrictEqual(json.auths);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(data['.dockerconfigjson']);
+    });
+  });
+
+  describe('useDockerRegistry', () => {
+    it('should return the first value from the docker auths', () => {
+      const data = { '.dockerconfigjson': 'base64Json' };
+      const registryUrl = 'registry-url.com';
+      const json = { auths: { [registryUrl]: { something: 'test' } } };
+
+      base64DecodeSpy.mockReturnValue(JSON.stringify(json));
+      const registry = authTypes.useDockerRegistry({ data });
+
+      expect(registry.value.registryUrl).toStrictEqual(registryUrl);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(data['.dockerconfigjson']);
+    });
+  });
+
+  describe('useDockerBasic', () => {
+    it('should return the username and password from the docker auths', () => {
+      const data = { '.dockerconfigjson': 'base64Json' };
+      const registryUrl = 'registry-url.com';
+      const username = 'USERNAME';
+      const password = 'PASSWORD';
+      const json = { auths: { [registryUrl]: { username, password } } };
+
+      base64DecodeSpy.mockReturnValue(JSON.stringify(json));
+      const dockerBasic = authTypes.useDockerBasic({ data });
+
+      expect(dockerBasic.value.username).toStrictEqual(username);
+      expect(dockerBasic.value.password).toStrictEqual(password);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(data['.dockerconfigjson']);
+    });
+  });
+
+  describe('useBasic', () => {
+    it('should return the username, password, rows from the docker auths', () => {
+      const username = 'USERNAME';
+      const password = 'PASSWORD';
+      const data = { username, password };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(username)
+        .mockReturnValueOnce(password)
+        .mockReturnValueOnce(username)
+        .mockReturnValueOnce(password);
+
+      const basic = authTypes.useBasic({ data });
+
+      expect(basic.value.username).toStrictEqual(username);
+      expect(basic.value.password).toStrictEqual(password);
+      expect(basic.value.rows).toStrictEqual([{ key: 'username', value: username }, { key: 'password', value: password }]);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(username);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(password);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(username);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(password);
+    });
+  });
+
+  describe('useSsh', () => {
+    it('should return the username, password from data fields ssh-publickey/privatekey', () => {
+      const username = 'USERNAME';
+      const password = 'PASSWORD';
+      const data = {
+        'ssh-publickey':  username,
+        'ssh-privatekey': password
+      };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(username)
+        .mockReturnValueOnce(password);
+
+      const ssh = authTypes.useSsh({ data });
+
+      expect(ssh.value.username).toStrictEqual(username);
+      expect(ssh.value.password).toStrictEqual(password);
+
+      expect(base64DecodeSpy).toHaveBeenCalledWith(username);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(password);
+    });
+  });
+
+  describe('useServiceAccount', () => {
+    it('should return the token, crt from data fields token, ca.crt', () => {
+      const token = 'TOKEN';
+      const crt = 'CRT';
+      const data = {
+        token,
+        'ca.crt': crt
+      };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(token)
+        .mockReturnValueOnce(crt);
+
+      const serviceAccount = authTypes.useServiceAccount({ data });
+
+      expect(serviceAccount.value.token).toStrictEqual(token);
+      expect(serviceAccount.value.crt).toStrictEqual(crt);
+
+      expect(base64DecodeSpy).toHaveBeenCalledWith(token);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(crt);
+    });
+  });
+
+  describe('useTls', () => {
+    it('should return the token, crt from data fields token, ca.crt', () => {
+      const token = 'TOKEN';
+      const crt = 'CRT';
+      const data = {
+        'tls.key': token,
+        'tls.crt': crt
+      };
+
+      base64DecodeSpy
+        .mockReturnValueOnce(token)
+        .mockReturnValueOnce(crt);
+
+      const serviceAccount = authTypes.useTls({ data });
+
+      expect(serviceAccount.value.token).toStrictEqual(token);
+      expect(serviceAccount.value.crt).toStrictEqual(crt);
+
+      expect(base64DecodeSpy).toHaveBeenCalledWith(token);
+      expect(base64DecodeSpy).toHaveBeenCalledWith(crt);
+    });
+  });
+});

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

@@ -0,0 +1,102 @@
+import * as authTypes from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types';
+import { useSecretDataTabDefaultProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables';
+import { SECRET_TYPES } from '@shell/config/secret';
+
+jest.mock('@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types');
+jest.mock('vuex', () => ({ useStore: jest.fn() }));
+
+describe('composables: SecretDataTab/composables', () => {
+  describe('useSecretDataTabDefaultProps', () => {
+    const useSecretInfoSpy = jest.spyOn(authTypes, 'useSecretInfo');
+    const resource = { type: 'Resource' };
+
+    it('should return the appropriate props when secret type is DOCKER_JSON', () => {
+      const dockerRegistry = { type: 'DockerRegistry' };
+      const dockerBasic = { type: 'DockerBasic' };
+      const useDockerRegistrySpy = jest.spyOn(authTypes, 'useDockerRegistry');
+      const useDockerBasic = jest.spyOn(authTypes, 'useDockerBasic');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.DOCKER_JSON } }));
+      useDockerRegistrySpy.mockImplementation((): any => ({ value: dockerRegistry }));
+      useDockerBasic.mockImplementation((): any => ({ value: dockerBasic }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useDockerRegistrySpy).toHaveBeenCalledWith(resource);
+      expect(useDockerBasic).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.registry).toStrictEqual(dockerRegistry);
+      expect(props.value.secretData.basicAuth).toStrictEqual(dockerBasic);
+    });
+
+    it('should return the appropriate props when secret type is TLS', () => {
+      const tls = { type: 'TLS' };
+      const useTlsSpy = jest.spyOn(authTypes, 'useTls');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.TLS } }));
+      useTlsSpy.mockImplementation((): any => ({ value: tls }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.certificate.certificate');
+      expect(useTlsSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.certificate).toStrictEqual(tls);
+    });
+
+    it('should return the appropriate props when secret type is SERVICE_ACCT', () => {
+      const serviceAccount = { type: 'serviceAccount' };
+      const useServiceAccountSpy = jest.spyOn(authTypes, 'useServiceAccount');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.SERVICE_ACCT } }));
+      useServiceAccountSpy.mockImplementation((): any => ({ value: serviceAccount }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useServiceAccountSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.serviceAccount).toStrictEqual(serviceAccount);
+    });
+
+    it('should return the appropriate props when secret type is SSH', () => {
+      const ssh = { type: 'SSH' };
+      const useSshSpy = jest.spyOn(authTypes, 'useSsh');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.SSH } }));
+      useSshSpy.mockImplementation((): any => ({ value: ssh }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.ssh.keys');
+      expect(useSshSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.ssh).toStrictEqual(ssh);
+    });
+
+    it('should return the appropriate props when secret type is BASIC', () => {
+      const basic = { type: 'basic' };
+      const useBasicSpy = jest.spyOn(authTypes, 'useBasic');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.BASIC } }));
+      useBasicSpy.mockImplementation((): any => ({ value: basic }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useBasicSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.basicAuth).toStrictEqual(basic);
+    });
+
+    it('should return the appropriate props when secret type is anything else', () => {
+      const basic = { type: 'basic' };
+      const useBasicSpy = jest.spyOn(authTypes, 'useBasic');
+
+      useSecretInfoSpy.mockImplementation((): any => ({ value: { secretType: SECRET_TYPES.FLEET_CLUSTER } }));
+      useBasicSpy.mockImplementation((): any => ({ value: basic }));
+
+      const props = useSecretDataTabDefaultProps(resource);
+
+      expect(props.value.tabLabel).toStrictEqual('secret.data');
+      expect(useBasicSpy).toHaveBeenCalledWith(resource);
+      expect(props.value.secretData.basic).toStrictEqual(basic);
+    });
+  });
+});

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

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

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

@@ -8,6 +8,7 @@
   h1.title {
     display: inline-block;
     align-items: center;
-    line-height: 18px;
+    display: flex;
+    flex-direction: row;
   }
 </style>

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

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import Title from '@shell/components/Resource/Detail/TitleBar/Title.vue';
 
 describe('component: TitleBar/Title', () => {
-  it('shoulder render container with class title', async() => {
+  it('should render container with class title', async() => {
     const wrapper = mount(Title);
 
     expect(wrapper.find('.title').exists()).toBeTruthy();

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

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import Top from '@shell/components/Resource/Detail/TitleBar/Top.vue';
 
 describe('component: TitleBar/Top', () => {
-  it('shoulder render container with class top', async() => {
+  it('should render container with class top', async() => {
     const wrapper = mount(Top);
 
     expect(wrapper.find('.top').exists()).toBeTruthy();

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

@@ -11,7 +11,7 @@ describe('component: TitleBar/index', () => {
   const resourceName = 'RESOURCE_NAME';
   const store = createStore({});
 
-  it('shoulder render container with class title-bar', async() => {
+  it('should render container with class title-bar', async() => {
     const wrapper = mount(TitleBar, {
       props: {
         resourceTypeLabel,

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

@@ -0,0 +1,45 @@
+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 {
+      resourceTypeLabel,
+      resourceTo,
+      resourceName,
+      actionMenuResource: resourceValue,
+      badge:              {
+        color: resourceValue.stateBackground,
+        label: resourceValue.stateDisplay
+      },
+      description:     resourceValue.description,
+      showViewOptions: hasGraph,
+      onShowConfiguration
+    };
+  });
+};