Fixing an issue with using show configuration within extensions (#15766)

* Fixing an issue with using show configuration within extensions

Fixes #15658

* Changing how we import drawers. The dynamic importing appears to be broken in harvester

* Fixing CI errors

Author: codyrancher

shell/components/Drawer/Chrome.vue

@@ -1,13 +1,9 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
-export interface Props {
-  ariaTarget: string;
-}
-</script>
+import { Props } from './types';
 
-<script setup lang="ts">
 const props = defineProps<Props>();
 const emit = defineEmits(['close']);
 

shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -1,17 +1,11 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { _VIEW } from '@shell/config/query-params';
 import { useStore } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab.vue';
+import { ConfigProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-  component: any;
-  resourceType: string;
-}
-</script>
-<script setup lang="ts">
-const props = defineProps<Props>();
+const props = defineProps<ConfigProps>();
 const store = useStore();
 const i18n = useI18n(store);
 </script>

shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue

@@ -1,18 +1,13 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { _VIEW } from '@shell/config/query-params';
 import { useStore } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import { useTemplateRef } from 'vue';
 import ResourceYaml from '@shell/components/ResourceYaml.vue';
+import { YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-  yaml: string;
-}
-</script>
-<script setup lang="ts">
-const props = defineProps<Props>();
+const props = defineProps<YamlProps>();
 const store = useStore();
 const i18n = useI18n(store);
 const yamlComponent: any = useTemplateRef('yaml');

shell/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -1,9 +1,8 @@
-import { Props as YamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
-import { Props as ConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
 import { useStore } from 'vuex';
 import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
+import { ConfigProps, YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProps> {
+export async function useDefaultYamlTabProps(resource: any): Promise<YamlProps> {
   const yaml = await getYaml(resource);
 
   return {
@@ -12,7 +11,7 @@ export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProp
   };
 }
 
-export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefined {
+export function useDefaultConfigTabProps(resource: any): ConfigProps | undefined {
   const store = useStore();
 
   // You don't want to show the Config tab if there isn't a an edit page to show and you don't want to show it if there isn't

shell/components/Drawer/ResourceDetailDrawer/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 import Drawer from '@shell/components/Drawer/Chrome.vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
@@ -9,17 +9,11 @@ import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.v
 import { computed, ref } from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
 import StateDot from '@shell/components/StateDot/index.vue';
+import { ResourceDetailDrawerProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-
-  onClose?: () => void;
-}
-</script>
-<script setup lang="ts">
 const editBttnDataTestId = 'save-configuration-bttn';
 const componentTestid = 'configuration-drawer-tabbed';
-const props = defineProps<Props>();
+const props = defineProps<ResourceDetailDrawerProps>();
 const emit = defineEmits(['close']);
 const store = useStore();
 const i18n = useI18n(store);

shell/components/Drawer/ResourceDetailDrawer/types.ts

@@ -0,0 +1,16 @@
+export interface YamlProps {
+    resource: any;
+    yaml: string;
+}
+
+export interface ConfigProps {
+    resource: any;
+    component: any;
+    resourceType: string;
+}
+
+export interface ResourceDetailDrawerProps {
+    resource: any;
+
+    onClose?: () => void;
+}

shell/components/Drawer/types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+    ariaTarget: string;
+}

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

@@ -6,18 +6,19 @@ import { computed, toValue, Ref } from 'vue';
 import {
   useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
 
 export const useBasicMetadata = (resource: any) => {
   const labels = useDefaultLabels(resource);
   const annotations = useDefaultAnnotations(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
-      resource:            toValue(resource),
-      labels:              labels.value,
-      annotations:         annotations.value,
-      onShowConfiguration: () => resourceValue.showConfiguration()
+      resource:    toValue(resource),
+      labels:      labels.value,
+      annotations: annotations.value,
+      onShowConfiguration
     };
   });
 };
@@ -28,15 +29,15 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
 
   const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
   const basicMetaData = useBasicMetadata(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
       resource:               toValue(resource),
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration
     };
   });
 };
@@ -47,7 +48,6 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
   const workspace = useWorkspace(resource);
   const namespace = useNamespace(resource);
   const liveDate = useLiveDate(resource);
-  const resourceValue = toValue(resource);
 
   const identifyingInformation = computed((): IdentifyingInformationRow[] => {
     const defaultInfo = [
@@ -71,7 +71,7 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector?: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration:    basicMetaData.value.onShowConfiguration
     };
   });
 };

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

@@ -1,3 +1,4 @@
+import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
 import { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import { computed, Ref, toValue } from 'vue';
 import { useRoute } from 'vue-router';
@@ -23,7 +24,7 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
         resource:  resourceValue.type
       }
     };
-    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector);
+    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : useOnShowConfiguration(resource);
 
     return {
       resource:           resourceValue,

shell/components/Resource/Detail/composables.ts

@@ -2,6 +2,7 @@ import { computed, Ref, toValue } from 'vue';
 import { useStore } from 'vuex';
 import { Props as BannerProps } from '@components/Banner/Banner.vue';
 import { useI18n } from '@shell/composables/useI18n';
+import ResourceClass from '@shell/plugins/dashboard-store/resource-class';
 
 export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | undefined> => {
   const store = useStore();
@@ -43,3 +44,14 @@ export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | u
     return undefined;
   });
 };
+
+export const useOnShowConfiguration = (resource: any) => {
+  return (returnFocusSelector?: string) => {
+    const resourceValue = toValue(resource);
+    // Because extensions can make a copy of the resource-class it's possible that an extension will have a resource-class which predates the inclusion of showConfiguration
+    // to still the rest of shell to consume
+    const showConfiguration = resourceValue.showConfiguration ? resourceValue.showConfiguration.bind(resourceValue) : ResourceClass.prototype.showConfiguration.bind(resourceValue);
+
+    showConfiguration(returnFocusSelector);
+  };
+};