Making it so we can target detail page vs show configuration

Fixes #16179
Fixes #16189

Author: codyrancher

docusaurus/extensions_versioned_docs/version-v2/api/tabs.md

@@ -24,10 +24,11 @@ _Arguments_
 | Key | Type | Description |
 |---|---|---|
 |`TabLocation.RESOURCE_DETAIL`| String | Location for a Tab on a Resource Detail page |
+|`TabLocation.RESOURCE_SHOW_CONFIGURATION`| String | Location for a Tab on a Resource Show Configuration  |
 
 <br/>
 
-`when` Object admissable values:
+`when` Object admissible values:
 
 `LocationConfig` as described above for the [LocationConfig object](./common#locationconfig).
 
@@ -38,13 +39,13 @@ _Arguments_
 
 ![Tabs](../screenshots/add-tab.png)
 
-`options` config object. Admissable parameters for the `options` with `'TabLocation.RESOURCE_DETAIL'` are:
+`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_DETAIL'` are:
 
 | Key | Type | Description |
 |---|---|---|
 |`name`| String | Query param name used in url when tab is active/clicked |
 |`label`| String | Text for the tab label |
-|`labelKey`| String | Same as "label" but allows for translation. Will superseed "label" |
+|`labelKey`| String | Same as "label" but allows for translation. Will supersede "label" |
 |`weight`| Int | Defines the order on which the tab is displayed in relation to other tabs in the component |
 |`showHeader`| Boolean | Whether the tab header is displayed or not |
 |`tooltip`| String | Tooltip message (on tab header) |
@@ -66,4 +67,38 @@ plugin.addTab(
     component:  () => import('./MyTabComponent.vue')
   }
 );
+```
+
+### TabLocation.RESOURCE_SHOW_CONFIGURATION options
+
+![Tabs](../screenshots/add-tab-show-configuration.png)
+
+`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_SHOW_CONFIGURATION'` are:
+
+| Key | Type | Description |
+|---|---|---|
+|`name`| String | Query param name used in url when tab is active/clicked |
+|`label`| String | Text for the tab label |
+|`labelKey`| String | Same as "label" but allows for translation. Will supersede "label" |
+|`weight`| Int | Defines the order on which the tab is displayed in relation to other tabs in the component |
+|`showHeader`| Boolean | Whether the tab header is displayed or not |
+|`tooltip`| String | Tooltip message (on tab header) |
+|`component`| Function | Component to be rendered as content on the tab |
+
+Usage example:
+
+```ts
+plugin.addTab( 
+  TabLocation.RESOURCE_SHOW_CONFIGURATION,
+  { resource: ['pod'] }, 
+  {
+    name:       'some-name',
+    labelKey:   'plugin-examples.tab-label',
+    label:      'some-label',
+    weight:     -5,
+    showHeader: true,
+    tooltip:    'this is a tooltip message',
+    component:  () => import('./MyTabComponent.vue')
+  }
+);
 ```

docusaurus/extensions_versioned_docs/version-v2/screenshots/add-tab-show-configuration.png

@@ -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/composables.ts

@@ -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

shell/components/Drawer/ResourceDetailDrawer/index.vue

@@ -7,6 +7,7 @@ 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 { useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 
 export default {
   name: 'Tabbed',
@@ -105,7 +106,8 @@ export default {
   },
 
   data() {
-    const extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
+    const location = this.isInResourceDetailDrawer ? TabLocation.RESOURCE_SHOW_CONFIGURATION : TabLocation.RESOURCE_DETAIL;
+    const extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, location, this.$route, this, this.extensionParams) || [] : [];
 
     const parsedExtTabs = extensionTabs.map((item) => {
       return {
@@ -133,6 +135,12 @@ export default {
     }
   },
 
+  setup() {
+    const isInResourceDetailDrawer = useIsInResourceDetailDrawer();
+
+    return { isInResourceDetailDrawer };
+  },
+
   watch: {
     sortedTabs(tabs) {
       const {

shell/components/Tabbed/index.vue

@@ -79,6 +79,7 @@ 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
+  RESOURCE_SHOW_CONFIGURATION = 'resource-show-configuration', // eslint-disable-line no-unused-vars
   CLUSTER_CREATE_RKE2 = 'cluster-create-rke2', // eslint-disable-line no-unused-vars
 }