Resolving an issue when DetailText receives undefined/null value

shell/components/DetailText.vue

@@ -22,7 +22,7 @@ export default {
 
     value: {
       type:    String,
-      default: null,
+      default: '',
     },
 
     maxLength: {

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

@@ -4,8 +4,8 @@ import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 
 export interface Row {
-    key: string;
-    value: string;
+    key?: string;
+    value?: string;
 }
 
 export interface Props {

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

@@ -2,8 +2,8 @@
 import DetailText from '@shell/components/DetailText.vue';
 
 export interface Props {
-    username: string;
-    password: string;
+    username?: string;
+    password?: string;
 }
 </script>
 

shell/components/Resource/Detail/ResourceTabs/SecretDataTab/ServiceAccountToken.vue

@@ -2,8 +2,8 @@
 import DetailText from '@shell/components/DetailText.vue';
 
 export interface Props {
-    crt: string;
-    token: string;
+    crt?: string;
+    token?: string;
 }
 </script>
 

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

@@ -2,8 +2,8 @@
 import DetailText from '@shell/components/DetailText.vue';
 
 export interface Props {
-    username: string;
-    password: string;
+    username?: string;
+    password?: string;
 }
 </script>
 

shell/composables/resources.test.ts

@@ -0,0 +1,63 @@
+import { useResourceIdentifiers, useFetchResourceWithId } from '@shell/composables/resources';
+
+const mockStore: any = {
+  getters:  { 'cluster/schemaFor': jest.fn(() => ({ id: 'test-schema' })) },
+  dispatch: jest.fn()
+};
+const mockRoute: any = {
+  params: {
+    cluster:   'test-cluster',
+    namespace: 'test-namespace',
+    id:        'test-id',
+  },
+};
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+
+describe('resources', () => {
+  describe('useResourceIdentifiers', () => {
+    it('should return the correct value for a route with a namespace', async() => {
+      const { clusterId, id, schema } = useResourceIdentifiers('test-type');
+
+      expect(clusterId).toBe('test-cluster');
+      expect(id).toBe('test-namespace/test-id');
+      expect(schema).toStrictEqual({ id: 'test-schema' });
+    });
+
+    it('should return the correct value for a route without a namespace', async() => {
+      mockRoute.params.namespace = undefined;
+      const { clusterId, id, schema } = useResourceIdentifiers('test-type');
+
+      expect(clusterId).toBe('test-cluster');
+      expect(id).toBe('test-id');
+      expect(schema).toStrictEqual({ id: 'test-schema' });
+    });
+  });
+
+  describe('useFetchResourceWithId', () => {
+    it('should return the correct value given the correct arguments are passed to the dispatch method', async() => {
+      mockStore.dispatch.mockImplementation(() => Promise.resolve({ id: 'test-resource' }));
+      const resource = await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('cluster/find', { type: 'test-type', id: 'test-id' });
+      expect(resource).toStrictEqual({ id: 'test-resource' });
+    });
+
+    it('should dispatch a loadingError if a 404 occurs', async() => {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      mockStore.dispatch.mockImplementationOnce(() => Promise.reject({ status: 404 }));
+      await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('loadingError', new Error('nav.failWhale.resourceIdNotFound-{"resource":"test-type","fqid":"test-id"}'));
+    });
+
+    it('should dispatch a loadingError if a 403 occurs', async() => {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      mockStore.dispatch.mockImplementationOnce(() => Promise.reject({ status: 403 }));
+      await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('loadingError', new Error('nav.failWhale.resourceIdNotFound-{"resource":"test-type","fqid":"test-id"}'));
+    });
+  });
+});

shell/composables/resources.ts

@@ -1,3 +1,4 @@
+import { useI18n } from '@shell/composables/useI18n';
 import { computed, Ref, toValue } from 'vue';
 import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
@@ -22,9 +23,16 @@ export const useResourceIdentifiers = (type: ResourceType) => {
 
 export const useFetchResourceWithId = async(type: ResourceType, id: IdType) => {
   const store = useStore();
+  const i18n = useI18n(store);
 
   const typeValue = toValue(type);
   const idValue = toValue(id);
 
-  return await store.dispatch('cluster/find', { type: typeValue, id: idValue });
+  try {
+    return await store.dispatch('cluster/find', { type: typeValue, id: idValue });
+  } catch (ex: any) {
+    if (ex.status === 404 || ex.status === 403) {
+      store.dispatch('loadingError', new Error(i18n.t('nav.failWhale.resourceIdNotFound', { resource: type, fqid: id }, true)));
+    }
+  }
 };