Skip to content

Commit 9ffcaff

Browse files
authored
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
1 parent c6796ab commit 9ffcaff

File tree

12 files changed

+61
-48
lines changed

12 files changed

+61
-48
lines changed

shell/components/Drawer/Chrome.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
<script lang="ts">
1+
<script setup lang="ts">
22
import { useI18n } from '@shell/composables/useI18n';
33
import { useStore } from 'vuex';
44
import { computed } from 'vue';
5-
export interface Props {
6-
ariaTarget: string;
7-
}
8-
</script>
5+
import { Props } from './types';
96
10-
<script setup lang="ts">
117
const props = defineProps<Props>();
128
const emit = defineEmits(['close']);
139

shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
<script lang="ts">
1+
<script setup lang="ts">
22
import { useI18n } from '@shell/composables/useI18n';
33
import { _VIEW } from '@shell/config/query-params';
44
import { useStore } from 'vuex';
55
import Tab from '@shell/components/Tabbed/Tab.vue';
6+
import { ConfigProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
67
7-
export interface Props {
8-
resource: any;
9-
component: any;
10-
resourceType: string;
11-
}
12-
</script>
13-
<script setup lang="ts">
14-
const props = defineProps<Props>();
8+
const props = defineProps<ConfigProps>();
159
const store = useStore();
1610
const i18n = useI18n(store);
1711
</script>

shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
<script lang="ts">
1+
<script setup lang="ts">
22
import { useI18n } from '@shell/composables/useI18n';
33
import { _VIEW } from '@shell/config/query-params';
44
import { useStore } from 'vuex';
55
import Tab from '@shell/components/Tabbed/Tab.vue';
66
import { useTemplateRef } from 'vue';
77
import ResourceYaml from '@shell/components/ResourceYaml.vue';
8+
import { YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
89
9-
export interface Props {
10-
resource: any;
11-
yaml: string;
12-
}
13-
</script>
14-
<script setup lang="ts">
15-
const props = defineProps<Props>();
10+
const props = defineProps<YamlProps>();
1611
const store = useStore();
1712
const i18n = useI18n(store);
1813
const yamlComponent: any = useTemplateRef('yaml');

shell/components/Drawer/ResourceDetailDrawer/composables.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { Props as YamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
2-
import { Props as ConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
31
import { useStore } from 'vuex';
42
import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
3+
import { ConfigProps, YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
54

6-
export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProps> {
5+
export async function useDefaultYamlTabProps(resource: any): Promise<YamlProps> {
76
const yaml = await getYaml(resource);
87

98
return {
@@ -12,7 +11,7 @@ export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProp
1211
};
1312
}
1413

15-
export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefined {
14+
export function useDefaultConfigTabProps(resource: any): ConfigProps | undefined {
1615
const store = useStore();
1716

1817
// 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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script lang="ts">
1+
<script setup lang="ts">
22
import Drawer from '@shell/components/Drawer/Chrome.vue';
33
import { useI18n } from '@shell/composables/useI18n';
44
import { useStore } from 'vuex';
@@ -9,17 +9,11 @@ import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.v
99
import { computed, ref } from 'vue';
1010
import RcButton from '@components/RcButton/RcButton.vue';
1111
import StateDot from '@shell/components/StateDot/index.vue';
12+
import { ResourceDetailDrawerProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
1213
13-
export interface Props {
14-
resource: any;
15-
16-
onClose?: () => void;
17-
}
18-
</script>
19-
<script setup lang="ts">
2014
const editBttnDataTestId = 'save-configuration-bttn';
2115
const componentTestid = 'configuration-drawer-tabbed';
22-
const props = defineProps<Props>();
16+
const props = defineProps<ResourceDetailDrawerProps>();
2317
const emit = defineEmits(['close']);
2418
const store = useStore();
2519
const i18n = useI18n(store);
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export interface YamlProps {
2+
resource: any;
3+
yaml: string;
4+
}
5+
6+
export interface ConfigProps {
7+
resource: any;
8+
component: any;
9+
resourceType: string;
10+
}
11+
12+
export interface ResourceDetailDrawerProps {
13+
resource: any;
14+
15+
onClose?: () => void;
16+
}

shell/components/Drawer/types.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface Props {
2+
ariaTarget: string;
3+
}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ import { computed, toValue, Ref } from 'vue';
66
import {
77
useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
88
} from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
9+
import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
910

1011
export const useBasicMetadata = (resource: any) => {
1112
const labels = useDefaultLabels(resource);
1213
const annotations = useDefaultAnnotations(resource);
13-
const resourceValue = toValue(resource);
14+
const onShowConfiguration = useOnShowConfiguration(resource);
1415

1516
return computed(() => {
1617
return {
17-
resource: toValue(resource),
18-
labels: labels.value,
19-
annotations: annotations.value,
20-
onShowConfiguration: () => resourceValue.showConfiguration()
18+
resource: toValue(resource),
19+
labels: labels.value,
20+
annotations: annotations.value,
21+
onShowConfiguration
2122
};
2223
});
2324
};
@@ -28,15 +29,15 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
2829

2930
const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
3031
const basicMetaData = useBasicMetadata(resource);
31-
const resourceValue = toValue(resource);
32+
const onShowConfiguration = useOnShowConfiguration(resource);
3233

3334
return computed(() => {
3435
return {
3536
resource: toValue(resource),
3637
identifyingInformation: identifyingInformation.value,
3738
labels: basicMetaData.value.labels,
3839
annotations: basicMetaData.value.annotations,
39-
onShowConfiguration: (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
40+
onShowConfiguration
4041
};
4142
});
4243
};
@@ -47,7 +48,6 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
4748
const workspace = useWorkspace(resource);
4849
const namespace = useNamespace(resource);
4950
const liveDate = useLiveDate(resource);
50-
const resourceValue = toValue(resource);
5151

5252
const identifyingInformation = computed((): IdentifyingInformationRow[] => {
5353
const defaultInfo = [
@@ -71,7 +71,7 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
7171
identifyingInformation: identifyingInformation.value,
7272
labels: basicMetaData.value.labels,
7373
annotations: basicMetaData.value.annotations,
74-
onShowConfiguration: (returnFocusSelector?: string) => resourceValue.showConfiguration(returnFocusSelector)
74+
onShowConfiguration: basicMetaData.value.onShowConfiguration
7575
};
7676
});
7777
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
12
import { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
23
import { computed, Ref, toValue } from 'vue';
34
import { useRoute } from 'vue-router';
@@ -23,7 +24,7 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
2324
resource: resourceValue.type
2425
}
2526
};
26-
const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector);
27+
const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : useOnShowConfiguration(resource);
2728

2829
return {
2930
resource: resourceValue,

shell/components/Resource/Detail/composables.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { computed, Ref, toValue } from 'vue';
22
import { useStore } from 'vuex';
33
import { Props as BannerProps } from '@components/Banner/Banner.vue';
44
import { useI18n } from '@shell/composables/useI18n';
5+
import ResourceClass from '@shell/plugins/dashboard-store/resource-class';
56

67
export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | undefined> => {
78
const store = useStore();
@@ -43,3 +44,14 @@ export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | u
4344
return undefined;
4445
});
4546
};
47+
48+
export const useOnShowConfiguration = (resource: any) => {
49+
return (returnFocusSelector?: string) => {
50+
const resourceValue = toValue(resource);
51+
// 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
52+
// to still the rest of shell to consume
53+
const showConfiguration = resourceValue.showConfiguration ? resourceValue.showConfiguration.bind(resourceValue) : ResourceClass.prototype.showConfiguration.bind(resourceValue);
54+
55+
showConfiguration(returnFocusSelector);
56+
};
57+
};

0 commit comments

Comments
 (0)