Fix Unable to add extension tab to Edit Storage Class page (rancher#1…

…2886) * first iteration to improve extension point for tabs (missing default mode = VIEW) * add default _DETAIL for the extension tabs extension point so that they are not added to EDIT views as well, unless specified otherwise * revert harvester change
aalves08 · Dec 26, 2024 · 8698cb8 · 8698cb8
1 parent 3135635
commit 8698cb8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/shell/components/Tabbed/index.vue b/shell/components/Tabbed/index.vue
@@ -4,10 +4,15 @@ import isEmpty from 'lodash/isEmpty';
 import { addObject, removeObject, findBy } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 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';
 
 export default {
   name: 'Tabbed',
 
+  components: { Tab },
+
   emits: ['changed', 'addTab', 'removeTab'],
 
   props: {
@@ -82,9 +87,19 @@ export default {
   },
 
   data() {
+    const extensionTabs = getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [];
+
+    const parsedExtTabs = extensionTabs.map((item) => {
+      return {
+        ...item,
+        active: false
+      };
+    });
+
     return {
-      tabs:          [],
-      activeTabName: null,
+      tabs:          [...parsedExtTabs],
+      extensionTabs: parsedExtTabs,
+      activeTabName: null
     };
   },
 
@@ -320,6 +335,24 @@ export default {
       }"
     >
       <slot />
+      <!-- Extension tabs -->
+      <Tab
+        v-for="tab, i in extensionTabs"
+        :key="`${tab.name}${i}`"
+        :name="tab.name"
+        :label="tab.label"
+        :label-key="tab.labelKey"
+        :weight="tab.weight"
+        :tooltip="tab.tooltip"
+        :show-header="tab.showHeader"
+        :display-alert-icon="tab.displayAlertIcon"
+        :error="tab.error"
+        :badge="tab.badge"
+      >
+        <component
+          :is="tab.component"
+        />
+      </Tab>
     </div>
   </div>
 </template>

diff --git a/shell/components/form/ResourceTabs/index.vue b/shell/components/form/ResourceTabs/index.vue
@@ -11,8 +11,6 @@ import { EVENT } from '@shell/config/types';
 import SortableTable from '@shell/components/SortableTable';
 import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
-import { ExtensionPoint, TabLocation } from '@shell/core/types';
-import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
@@ -77,7 +75,6 @@ export default {
       allEvents:      [],
       selectedTab:    this.defaultTab,
       didLoadEvents:  false,
-      extensionTabs:  getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
       inStore,
       showConditions: false,
     };
@@ -246,25 +243,5 @@ export default {
         direction="to"
       />
     </Tab>
-
-    <!-- Extension tabs -->
-    <Tab
-      v-for="tab, i in extensionTabs"
-      :key="`${tab.name}${i}`"
-      :name="tab.name"
-      :label="tab.label"
-      :label-key="tab.labelKey"
-      :weight="tab.weight"
-      :tooltip="tab.tooltip"
-      :show-header="tab.showHeader"
-      :display-alert-icon="tab.displayAlertIcon"
-      :error="tab.error"
-      :badge="tab.badge"
-    >
-      <component
-        :is="tab.component"
-        :resource="value"
-      />
-    </Tab>
   </Tabbed>
 </template>
diff --git a/shell/core/plugin.ts b/shell/core/plugin.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { RouteRecordRaw } from 'vue-router';
 import { DSL as STORE_DSL } from '@shell/store/type-map';
+import { _DETAIL } from '@shell/config/query-params';
 import {
   CoreStoreInit,
   Action,
@@ -11,7 +12,7 @@ import {
   IPlugin,
   LocationConfig,
   ExtensionPoint,
-
+  TabLocation,
   PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
@@ -162,6 +163,12 @@ export class Plugin implements IPlugin {
    * Adds a tab to the UI
    */
   addTab(where: string, when: LocationConfig | string, tab: Tab): void {
+    // tackling https://github.com/rancher/dashboard/issues/11122, we don't want the tab to added in _EDIT view, unless overriden
+    // on extensions side we won't document the mode param for this extension point
+    if (where === TabLocation.RESOURCE_DETAIL && (typeof when === 'object' && !when.mode)) {
+      when.mode = [_DETAIL];
+    }
+
     this._addUIConfig(ExtensionPoint.TAB, where, when, this._createAsyncComponent(tab));
   }