2.13 ::: backport PRs 16203, 16225 and 16208

cypress/e2e/tests/pages/charts/question-tabs.spec.ts

@@ -15,7 +15,7 @@ describe('Charts Install', { tags: ['@charts', '@adminUser'] }, () => {
     describe('Vsphere Cpi chart install - Tabs visibility', () => {
       it('Should not show any tabs on "Edit Options" screen if there is only 1 group', () => {
         ChartPage.navTo(null, 'vSphere CPI');
-        chartPage.waitForPage('repo-type=cluster&repo=rancher-rke2-charts&chart=rancher-vsphere-cpi&version=1.12.100');
+        chartPage.waitForPage('repo-type=cluster&repo=rancher-rke2-charts&chart=rancher-vsphere-cpi&version=1.13.000');
         chartPage.goToInstall();
         installChart.nextPage();
 

shell/components/CruResource.vue

@@ -9,9 +9,10 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
+import { useResourceCreatePageProvider, useResourceEditPageProvider } from '@shell/composables/cruResource';
 
 import {
-  _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE
+  _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE, _CREATE
 } from '@shell/config/query-params';
 
 import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
@@ -168,6 +169,12 @@ export default {
     const inStore = this.$store.getters['currentStore'](this.resource);
     const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
 
+    if (this.mode === _CREATE) {
+      useResourceCreatePageProvider();
+    } else if (this.mode === _EDIT) {
+      useResourceEditPageProvider();
+    }
+
     return {
       isCancelModal:   false,
       showAsForm:      this.$route.query[AS] !== _YAML,

shell/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts

@@ -1,11 +1,17 @@
-import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { provide, inject } from 'vue';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawerProvider, useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import * as helpers from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 import * as vuex from 'vuex';
 
 jest.mock('@shell/components/Drawer/ResourceDetailDrawer/helpers');
 jest.mock('vuex');
 jest.mock('@shell/composables/drawer');
 jest.mock('@shell/components/Drawer/ResourceDetailDrawer/index.vue', () => ({ name: 'ResourceDetailDrawer' } as any));
+jest.mock('vue', () => ({
+  ...jest.requireActual('vue'),
+  provide: jest.fn(),
+  inject:  jest.fn()
+}));
 
 describe('composables: ResourceDetailDrawer', () => {
   const resource = { type: 'RESOURCE' };
@@ -78,4 +84,47 @@ describe('composables: ResourceDetailDrawer', () => {
       expect(props?.resource).toStrictEqual(resource);
     });
   });
+
+  describe('useResourceDetailDrawerProvider', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call provide with the correct key and value', () => {
+      useResourceDetailDrawerProvider();
+
+      expect(provide).toHaveBeenCalledWith('isInResourceDetailDrawerKey', true);
+    });
+  });
+
+  describe('useIsInResourceDetailDrawer', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call inject with the correct key and default value', () => {
+      (inject as jest.Mock).mockReturnValue(false);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(inject).toHaveBeenCalledWith('isInResourceDetailDrawerKey', false);
+      expect(result).toBe(false);
+    });
+
+    it('should return true when inside a ResourceDetailDrawer', () => {
+      (inject as jest.Mock).mockReturnValue(true);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false when not inside a ResourceDetailDrawer', () => {
+      (inject as jest.Mock).mockReturnValue(false);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(result).toBe(false);
+    });
+  });
 });

shell/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -1,6 +1,7 @@
 import { useStore } from 'vuex';
 import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 import { ConfigProps, YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
+import { inject, provide } from 'vue';
 
 export async function useDefaultYamlTabProps(resource: any): Promise<YamlProps> {
   const yaml = await getYaml(resource);
@@ -27,3 +28,21 @@ export function useDefaultConfigTabProps(resource: any): ConfigProps | undefined
     resourceType: resource.type
   };
 }
+
+const IS_IN_RESOURCE_DETAIL_DRAWER_KEY = 'isInResourceDetailDrawerKey';
+
+/**
+ * Used to add a provide method which will indicate to all ancestors that they're inside the ResourceDetailDrawer. This is useful because we show
+ * config page components both independently and within the ResourceDetailDrawer and we sometimes want to distinguish between the two use cases.
+*/
+export function useResourceDetailDrawerProvider() {
+  provide(IS_IN_RESOURCE_DETAIL_DRAWER_KEY, true);
+}
+
+/**
+ * A composable used to determine if the current component was instantiated as an ancestor of a ResourceDetailDrawer.
+ * @returns true if the component is an ancestor of ResourceDetailDrawer, otherwise false
+ */
+export function useIsInResourceDetailDrawer() {
+  return inject(IS_IN_RESOURCE_DETAIL_DRAWER_KEY, false);
+}

shell/components/Drawer/ResourceDetailDrawer/index.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import YamlTab, { Props as YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
-import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawerProvider } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
 import { computed, ref } from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
@@ -54,6 +54,8 @@ const canEdit = computed(() => {
   return isConfig.value ? props.resource.canEdit : props.resource.canEditYaml;
 });
 
+useResourceDetailDrawerProvider();
+
 </script>
 <template>
   <Drawer
@@ -79,6 +81,7 @@ const canEdit = computed(() => {
         <ConfigTab
           v-if="configTabProps"
           v-bind="configTabProps"
+          :default-tab="props.defaultTab"
         />
         <YamlTab
           v-if="yamlTabProps"

shell/components/ResourceDetail/index.vue

@@ -14,6 +14,7 @@ import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
+import { useResourceDetailPageProvider } from '@shell/composables/resourceDetail';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -116,6 +117,7 @@ export default {
 
     if ( mode === _VIEW && hasCustomDetail && (!requested || requested === _DETAIL) ) {
       as = _DETAIL;
+      useResourceDetailPageProvider();
     } else if ( hasCustomEdit && (!requested || requested === _CONFIG) ) {
       as = _CONFIG;
     } else {

shell/components/Tabbed/index.vue

@@ -7,6 +7,10 @@ import findIndex from 'lodash/findIndex';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import Tab from '@shell/components/Tabbed/Tab';
+import { ref } from 'vue';
+import { useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { useIsInResourceDetailPage } from '@shell/composables/resourceDetail';
+import { useIsInResourceCreatePage, useIsInResourceEditPage } from '@shell/composables/cruResource';
 
 export default {
   name: 'Tabbed',
@@ -105,7 +109,14 @@ export default {
   },
 
   data() {
-    const extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
+    const location = this.getInitialTabLocation();
+    let extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, location, this.$route, this, this.extensionParams) || [] : [];
+    const legacyExtensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
+
+    if (!extensionTabs.length) {
+      // Support legacy tabs for RESOURCE_DETAIL location
+      extensionTabs = legacyExtensionTabs;
+    }
 
     const parsedExtTabs = extensionTabs.map((item) => {
       return {
@@ -130,7 +141,18 @@ export default {
     // hide tabs based on tab count IF flag is active
     hideTabs() {
       return this.hideSingleTab && this.sortedTabs.length === 1;
-    }
+    },
+  },
+
+  setup() {
+    const isInResourceDetailDrawer = ref(useIsInResourceDetailDrawer());
+    const isInResourceDetailPage = ref(useIsInResourceDetailPage());
+    const isInResourceEditPage = ref(useIsInResourceEditPage());
+    const isInResourceCreatePage = ref(useIsInResourceCreatePage());
+
+    return {
+      isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage
+    };
   },
 
   watch: {
@@ -166,6 +188,19 @@ export default {
   },
 
   methods: {
+    getInitialTabLocation() {
+      if (this.isInResourceEditPage) {
+        return TabLocation.RESOURCE_EDIT_PAGE;
+      } else if (this.isInResourceDetailDrawer) {
+        return TabLocation.RESOURCE_SHOW_CONFIGURATION;
+      } else if (this.isInResourceDetailPage) {
+        return TabLocation.RESOURCE_DETAIL_PAGE;
+      } else if (this.isInResourceCreatePage) {
+        return TabLocation.RESOURCE_CREATE_PAGE;
+      } else {
+        return TabLocation.ALL;
+      }
+    },
     hasIcon(tab) {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },

shell/composables/cruResource.ts

@@ -0,0 +1,27 @@
+import { inject, provide } from 'vue';
+const IS_IN_RESOURCE_EDIT_PAGE_KEY = 'isInResourceEditKey';
+const IS_IN_RESOURCE_CREATE_PAGE_KEY = 'isInResourceCreateKey';
+
+/**
+ * Used to determine if the current component was instantiated as an ancestor of a CruResource EDIT page.
+ * @returns true if the component is an ancestor of CruResource EDIT page, otherwise false
+ */
+export function useIsInResourceEditPage() {
+  return inject(IS_IN_RESOURCE_EDIT_PAGE_KEY, false);
+}
+
+/**
+ * Used to determine if the current component was instantiated as an ancestor of a CruResource CREATE page.
+ * @returns true if the component is an ancestor of CruResource CREATE page, otherwise false
+ */
+export function useIsInResourceCreatePage() {
+  return inject(IS_IN_RESOURCE_CREATE_PAGE_KEY, false);
+}
+
+export function useResourceEditPageProvider() {
+  provide(IS_IN_RESOURCE_EDIT_PAGE_KEY, true);
+}
+
+export function useResourceCreatePageProvider() {
+  provide(IS_IN_RESOURCE_CREATE_PAGE_KEY, true);
+}

shell/composables/resourceDetail.ts

@@ -0,0 +1,15 @@
+import { inject, provide } from 'vue';
+
+const IS_IN_RESOURCE_DETAIL_PAGE_KEY = 'isInResourceDetailKey';
+
+/**
+ * Used to determine if the current component was instantiated as an ancestor of a ResourceDetail.
+ * @returns true if the component is an ancestor of ResourceDetail, otherwise false
+ */
+export function useIsInResourceDetailPage() {
+  return inject(IS_IN_RESOURCE_DETAIL_PAGE_KEY, false);
+}
+
+export function useResourceDetailPageProvider() {
+  provide(IS_IN_RESOURCE_DETAIL_PAGE_KEY, true);
+}

shell/core/types.ts

@@ -79,6 +79,11 @@ export enum PanelLocation {
 /** Enum regarding tab locations that are extensible in the UI */
 export enum TabLocation {
   RESOURCE_DETAIL = 'tab', // eslint-disable-line no-unused-vars
+  ALL = 'tab-all-pages', // eslint-disable-line no-unused-vars
+  RESOURCE_DETAIL_PAGE = 'resource-detail-page', // eslint-disable-line no-unused-vars
+  RESOURCE_CREATE_PAGE = 'resource-create-page', // eslint-disable-line no-unused-vars
+  RESOURCE_EDIT_PAGE = 'resource-edit-page', // eslint-disable-line no-unused-vars
+  RESOURCE_SHOW_CONFIGURATION = 'resource-show-configuration', // eslint-disable-line no-unused-vars
   CLUSTER_CREATE_RKE2 = 'cluster-create-rke2', // eslint-disable-line no-unused-vars
 }
 

shell/edit/workload/index.vue

@@ -155,6 +155,7 @@ export default {
         :default-tab="defaultTab"
         :flat="true"
         :use-hash="useTabbedHash"
+        :showExtensionTabs="false"
         data-testid="workload-horizontal-tabs"
         @changed="changed"
       >