diff --git a/docusaurus/docs/extensions/api/actions.md b/docusaurus/docs/extensions/api/actions.md
index 93cd4872249..6410acf28ca 100644
--- a/docusaurus/docs/extensions/api/actions.md
+++ b/docusaurus/docs/extensions/api/actions.md
@@ -40,6 +40,8 @@ _Arguments_
### ActionLocation.HEADER options
+*(From Rancher version v2.7.2)*
+
`options` config object. Admissable parameters for the `options` with `'ActionLocation.HEADER'` are:
@@ -100,6 +102,8 @@ plugin.addAction(
### ActionLocation.TABLE options
+*(From Rancher version v2.7.2)*
+
_INLINE TABLE ACTION_
diff --git a/docusaurus/docs/extensions/api/cards.md b/docusaurus/docs/extensions/api/cards.md
index 7a8aaa86bc9..76bf0ff77eb 100644
--- a/docusaurus/docs/extensions/api/cards.md
+++ b/docusaurus/docs/extensions/api/cards.md
@@ -39,6 +39,8 @@ _Arguments_
## CardLocation.CLUSTER_DASHBOARD_CARD options
+*(From Rancher version v2.7.2)*
+
`options` config object. Admissable parameters for the `options` with `'CardLocation.CLUSTER_DASHBOARD_CARD'` are:
diff --git a/docusaurus/docs/extensions/api/common.md b/docusaurus/docs/extensions/api/common.md
index 322d4ce7fb3..4b7d270a778 100644
--- a/docusaurus/docs/extensions/api/common.md
+++ b/docusaurus/docs/extensions/api/common.md
@@ -6,16 +6,23 @@ The `where` defines which area of the UI the extension method will apply to and
The admissable string values for the `where` are:
-| Key | Type | Description |
-|---|---|---|
-|`ActionLocation.HEADER`| String | Location for an action on the Header of Rancher Dashboard. Check [screenshot](./actions/#actionlocationheader-options) for location. |
-|`ActionLocation.TABLE`| String | Location for an action on a List View Table of Rancher Dashboard. Check [screenshot](./actions/#actionlocationtable-options) for location. |
-|`TabLocation.RESOURCE_DETAIL`| String | Location for a Tab on a Resource Detail page. Check [screenshot](./tabs/#tablocationresource_detail-options) for location. |
-|`PanelLocation.DETAILS_MASTHEAD`| String | Location for a panel on the Details Masthead area of a Resource Detail page. Check [screenshot](./panels/#panellocationdetails_masthead-options) for location. |
-|`PanelLocation.DETAIL_TOP`| String | Location for a panel on the Detail Top area of a Resource Detail page. Check [screenshot](./panels/#panellocationdetail_top-options) for location. |
-|`PanelLocation.RESOURCE_LIST`| String | Location for a panel on a Resource List View page (above the table area). Check [screenshot](./panels#panellocationresource_list-options) for location. |
-|`CardLocation.CLUSTER_DASHBOARD_CARD`| String | Location for a card on the Cluster Dashboard page. Check [screenshot](./cards/#cardlocationcluster_dashboard_card-options) for location. |
-|`TableColumnLocation.RESOURCE`| String | Location for a table column on a Resource List View page. Check [screenshot](./table-columns/#tablecolumnlocationresource-options) for location. |
+| Key | Type | Rancher Version | Description |
+|---|---|---|---|
+|`ActionLocation.HEADER`| String | 2.7.2 | Location for an action on the Header of Rancher Dashboard. Check [screenshot](./actions/#actionlocationheader-options) for location. |
+|`ActionLocation.TABLE`| String | 2.7.2 | Location for an action on a List View Table of Rancher Dashboard. Check [screenshot](./actions/#actionlocationtable-options) for location. |
+|`TabLocation.RESOURCE_SHOW_CONFIGURATION`| String | 2.14.0 | Location for a Tab on the "Show configuration" slide-in panel in Resource Detail page. Check [screenshot](./tabs/#tablocationresource_show_configuration-options) for location. |
+|`TabLocation.RESOURCE_CREATE_PAGE`| String | 2.14.0 | Location for a Tab on a Resource Create page. Check [screenshot](./tabs/#tablocationresource_create_page-options) for location. |
+|`TabLocation.RESOURCE_EDIT_PAGE`| String | 2.14.0 | Location for a Tab on a Resource Edit page. Check [screenshot](./tabs/#tablocationresource_edit_page-options) for location. |
+|`TabLocation.RESOURCE_DETAIL_PAGE`| String | 2.14.0 | Location for a Tab on a Resource Detail page. Check [screenshot](./tabs/#tablocationresource_detail_page-options) for location. |
+|`TabLocation.ALL`| String | 2.14.0 | Generic location for a Tab on any given page. Can be further specified with the appropriate `LocationConfig` params. |
+|`TabLocation.CLUSTER_CREATE_RKE2`| String | 2.13.0 | Location for a Tab on the Cluster Configuration area in Cluster Provisioning |
+|`TabLocation.RESOURCE_DETAIL`| String | 2.7.2 (deprecated from 2.14.0) | Location for a Tab on a Resource Detail page. Check [screenshot](./tabs/#tablocationresource_detail-options) for location. |
+|`PanelLocation.DETAILS_MASTHEAD`| String | 2.7.2 | Location for a panel on the Details Masthead area of a Resource Detail page. Check [screenshot](./panels/#panellocationdetails_masthead-options) for location. |
+|`PanelLocation.DETAIL_TOP`| String | 2.7.2 | Location for a panel on the Detail Top area of a Resource Detail page. Check [screenshot](./panels/#panellocationdetail_top-options) for location. |
+|`PanelLocation.RESOURCE_LIST`| String | 2.7.2 | Location for a panel on a Resource List View page (above the table area). Check [screenshot](./panels#panellocationresource_list-options) for location. |
+|`PanelLocation.ABOUT_TOP`| String | 2.13.0 | Location for a panel on the About page. Check [screenshot](./panels#panellocationabout_top-options) for location. |
+|`CardLocation.CLUSTER_DASHBOARD_CARD`| String | 2.7.2 | Location for a card on the Cluster Dashboard page. Check [screenshot](./cards/#cardlocationcluster_dashboard_card-options) for location. |
+|`TableColumnLocation.RESOURCE`| String | 2.7.2 | Location for a table column on a Resource List View page. Check [screenshot](./table-columns/#tablecolumnlocationresource-options) for location. |
## LocationConfig
diff --git a/docusaurus/docs/extensions/api/panels.md b/docusaurus/docs/extensions/api/panels.md
index 3eacf665f92..6f91a349b66 100644
--- a/docusaurus/docs/extensions/api/panels.md
+++ b/docusaurus/docs/extensions/api/panels.md
@@ -37,6 +37,8 @@ _Arguments_
### PanelLocation.DETAILS_MASTHEAD options
+*(From Rancher version v2.7.2)*
+
`options` config object. Admissable parameters for the `options` with `'PanelLocation.DETAILS_MASTHEAD'` are:
@@ -60,6 +62,8 @@ plugin.addPanel(
### PanelLocation.DETAIL_TOP options
+*(From Rancher version v2.7.2)*
+
`options` config object. Admissable parameters for the `options` with `'PanelLocation.DETAIL_TOP'` are:
@@ -83,6 +87,8 @@ plugin.addPanel(
### PanelLocation.RESOURCE_LIST options
+*(From Rancher version v2.7.2)*
+
`options` config object. Admissable parameters for the `options` with `'PanelLocation.RESOURCE_LIST'` are:
@@ -106,6 +112,8 @@ plugin.addPanel(
### PanelLocation.ABOUT_TOP options
+*(From Rancher version v2.13.0)*
+
> NOTE: this Panel will only appear on the area designated in the screenshot in the About page of Rancher UI
diff --git a/docusaurus/docs/extensions/api/tabs.md b/docusaurus/docs/extensions/api/tabs.md
index d76089633a0..dbb2ab4753c 100644
--- a/docusaurus/docs/extensions/api/tabs.md
+++ b/docusaurus/docs/extensions/api/tabs.md
@@ -23,23 +23,31 @@ _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 *(From Rancher version v2.14.0)* |
+|`TabLocation.RESOURCE_CREATE_PAGE`| String | Location for a Tab on a Resource Create page |
+|`TabLocation.RESOURCE_EDIT_PAGE`| String | Location for a Tab on a Resource Edit page |
+|`TabLocation.RESOURCE_DETAIL_PAGE`| String | Location for a Tab on a Resource Detail page |
+|`TabLocation.ALL`| String | Generic location for a Tab on any given page. Can be further specified with the appropriate `LocationConfig` params. |
+|`TabLocation.CLUSTER_CREATE_RKE2`| String | Location for a Tab on the Cluster Configuration area in Cluster Provisioning |
+|`TabLocation.RESOURCE_DETAIL`| String | Location for a Tab on a Resource Detail page |
-`when` Object admissable values:
+`when` Object admissible values:
`LocationConfig` as described above for the [LocationConfig object](./common#locationconfig).
-### TabLocation.RESOURCE_DETAIL options
-
+### TabLocation.RESOURCE_SHOW_CONFIGURATION options
-`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_DETAIL'` are:
+*(From Rancher version v2.14.0)*
+
+
+
+`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_SHOW_CONFIGURATION'` are:
| Key | Type | Description |
|---|---|---|
@@ -55,7 +63,7 @@ Usage example:
```ts
plugin.addTab(
- TabLocation.RESOURCE_DETAIL,
+ TabLocation.RESOURCE_SHOW_CONFIGURATION,
{ resource: ['pod'] },
{
name: 'some-name',
@@ -69,11 +77,153 @@ plugin.addTab(
);
```
-
-
+### TabLocation.RESOURCE_CREATE_PAGE options
+
+*(From Rancher version v2.14.0)*
+
+
+
+`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_CREATE_PAGE'` 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_CREATE_PAGE,
+ { 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')
+ }
+);
+```
+
+### TabLocation.RESOURCE_EDIT_PAGE options
+
+*(From Rancher version v2.14.0)*
+
+
+
+`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_EDIT_PAGE'` 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_EDIT_PAGE,
+ { 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')
+ }
+);
+```
+
+### TabLocation.RESOURCE_DETAIL_PAGE options
+
+*(From Rancher version v2.14.0)*
+
+
+
+`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_DETAIL_PAGE'` 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_DETAIL_PAGE,
+ { 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')
+ }
+);
+```
+
+
+### TabLocation.ALL options
+
+*(From Rancher version v2.14.0)*
+
+`options` config object. Admissible parameters for the `options` with `'TabLocation.ALL'` 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.ALL,
+ { 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')
+ }
+);
+```
### TabLocation.CLUSTER_CREATE_RKE2 options
+*(From Rancher version v2.13.0)*
+
> NOTE: this tab will be added in the CREATE cluster interface, Cluster Configuration. If you want to target a specific provider and rke type use the `queryParam` in the location config. Ex: `queryParam: { type: 'digitalocean', rkeType: 'rke2' }`
@@ -111,30 +261,15 @@ plugin.addTab(
);
```
-### TabLocation.RESOURCE_DETAIL accessible props
-
-When using `addTab` in the `TabLocation.RESOURCE_DETAIL` location, the component used can have access to the given Vue properties:
-
-- `resource`: This will pass to the component used the **resource** object (k8s resource) which can be useful to access in the component context
-
-Usage:
-```js
-props: {
- resource: {
- type: [String, Object],
- default: () => {}
- },
-
-....
-```
+### TabLocation.RESOURCE_DETAIL options
-### TabLocation.RESOURCE_SHOW_CONFIGURATION options
+*(From Rancher version v2.7.2)*
-> Available from Rancher `2.14` and onwards
+**deprecated from Rancher version 2.14.0 and onwards - use TabLocation.ALL**
-
+
-`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_SHOW_CONFIGURATION'` are:
+`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_DETAIL'` are:
| Key | Type | Description |
|---|---|---|
@@ -150,7 +285,7 @@ Usage example:
```ts
plugin.addTab(
- TabLocation.RESOURCE_SHOW_CONFIGURATION,
+ TabLocation.RESOURCE_DETAIL,
{ resource: ['pod'] },
{
name: 'some-name',
diff --git a/docusaurus/docs/extensions/provisioning/overview.md b/docusaurus/docs/extensions/provisioning/overview.md
index e1d27a5b1e0..14a0089fcc8 100644
--- a/docusaurus/docs/extensions/provisioning/overview.md
+++ b/docusaurus/docs/extensions/provisioning/overview.md
@@ -144,7 +144,7 @@ Check the documentation about adding a tab to the Cluster Configuration area in
When clicking on a created cluster in the UI the user is shown details for the cluster. This page has some tabs which may not be applicable to the custom provider. The provider class has a way to hide these. To add a new custom tab the following can be used
```
- plugin.addTab(TabLocation.RESOURCE_DETAIL, {
+ plugin.addTab(TabLocation.RESOURCE_DETAIL_PAGE, {
resource: ['provisioning.cattle.io.cluster'],
context: { provider: ExampleProvisioner.ID }
}, {
diff --git a/docusaurus/docs/extensions/screenshots/add-tab-create.png b/docusaurus/docs/extensions/screenshots/add-tab-create.png
new file mode 100644
index 00000000000..11d2a16f36c
Binary files /dev/null and b/docusaurus/docs/extensions/screenshots/add-tab-create.png differ
diff --git a/docusaurus/docs/extensions/screenshots/add-tab-detail.png b/docusaurus/docs/extensions/screenshots/add-tab-detail.png
new file mode 100644
index 00000000000..f76c3d72406
Binary files /dev/null and b/docusaurus/docs/extensions/screenshots/add-tab-detail.png differ
diff --git a/docusaurus/docs/extensions/screenshots/add-tab-edit.png b/docusaurus/docs/extensions/screenshots/add-tab-edit.png
new file mode 100644
index 00000000000..ae5369f6c94
Binary files /dev/null and b/docusaurus/docs/extensions/screenshots/add-tab-edit.png differ
diff --git a/shell/components/CruResource.vue b/shell/components/CruResource.vue
index 9e2ee3c9e88..1728ffe219d 100644
--- a/shell/components/CruResource.vue
+++ b/shell/components/CruResource.vue
@@ -11,11 +11,12 @@ import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
import CruResourceFooter from '@shell/components/CruResourceFooter';
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';
import Wizard from '@shell/components/Wizard';
+import { useResourceCreatePageProvider, useResourceEditPageProvider } from '@shell/composables/cruResource';
export const CONTEXT_HOOK_EDIT_YAML = 'show-preview-yaml';
@@ -164,6 +165,14 @@ export default {
}
},
+ setup(props) {
+ if (props.mode === _CREATE) {
+ useResourceCreatePageProvider();
+ } else if (props.mode === _EDIT) {
+ useResourceEditPageProvider();
+ }
+ },
+
data(props) {
const inStore = this.$store.getters['currentStore'](this.resource);
const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
diff --git a/shell/components/ResourceDetail/index.vue b/shell/components/ResourceDetail/index.vue
index 92de05113ad..5d0d7bd7373 100644
--- a/shell/components/ResourceDetail/index.vue
+++ b/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 {
@@ -351,6 +353,7 @@ export default {
methods: {
stringify,
+
setSubtype(subtype) {
this.resourceSubtype = subtype;
},
diff --git a/shell/components/Tabbed/index.vue b/shell/components/Tabbed/index.vue
index 778d9f9feba..01e23e9a369 100644
--- a/shell/components/Tabbed/index.vue
+++ b/shell/components/Tabbed/index.vue
@@ -7,7 +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',
@@ -106,8 +109,14 @@ export default {
},
data() {
- 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 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 {
@@ -132,13 +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 = useIsInResourceDetailDrawer();
+ const isInResourceDetailDrawer = ref(useIsInResourceDetailDrawer());
+ const isInResourceDetailPage = ref(useIsInResourceDetailPage());
+ const isInResourceEditPage = ref(useIsInResourceEditPage());
+ const isInResourceCreatePage = ref(useIsInResourceCreatePage());
- return { isInResourceDetailDrawer };
+ return {
+ isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage
+ };
},
watch: {
@@ -174,6 +188,19 @@ export default {
},
methods: {
+ getInitialTabLocation() {
+ if (this.isInResourceDetailDrawer) {
+ return TabLocation.RESOURCE_SHOW_CONFIGURATION;
+ } else if (this.isInResourceDetailPage) {
+ return TabLocation.RESOURCE_DETAIL_PAGE;
+ } else if (this.isInResourceEditPage) {
+ return TabLocation.RESOURCE_EDIT_PAGE;
+ } else if (this.isInResourceCreatePage) {
+ return TabLocation.RESOURCE_CREATE_PAGE;
+ } else {
+ return TabLocation.ALL;
+ }
+ },
hasIcon(tab) {
return tab.displayAlertIcon || (tab.error && !tab.active);
},
diff --git a/shell/composables/cruResource.ts b/shell/composables/cruResource.ts
new file mode 100644
index 00000000000..a844b7f808b
--- /dev/null
+++ b/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);
+}
diff --git a/shell/composables/resourceDetail.ts b/shell/composables/resourceDetail.ts
new file mode 100644
index 00000000000..e50c8c15dee
--- /dev/null
+++ b/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 useResourceCreatePageProvider() {
+ provide(IS_IN_RESOURCE_DETAIL_PAGE_KEY, true);
+}
diff --git a/shell/core/types.ts b/shell/core/types.ts
index 2cdeac4e515..2eeb479cc0d 100644
--- a/shell/core/types.ts
+++ b/shell/core/types.ts
@@ -79,6 +79,10 @@ 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
}