Skip to content

Pr test #16231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
codyrancher wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Pr test #16231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1979bb9
add new locations for Tab extension point + update documentation
aalves08 Dec 18, 2025
6f9bf12
revert change
aalves08 Dec 18, 2025
7d58b7b
minor fixes
aalves08 Dec 18, 2025
8f9c7b8
unit test fix
codyrancher Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docusaurus/docs/extensions/api/actions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ _Arguments_

### ActionLocation.HEADER options

*(From Rancher version v2.7.2)*

![Header Actions](../screenshots/header-actions.png)

`options` config object. Admissable parameters for the `options` with `'ActionLocation.HEADER'` are:
Expand Down Expand Up @@ -100,6 +102,8 @@ plugin.addAction(

### ActionLocation.TABLE options

*(From Rancher version v2.7.2)*

_INLINE TABLE ACTION_

![inline table action](../screenshots/inline-table-action.png)
Expand Down
2 changes: 2 additions & 0 deletions docusaurus/docs/extensions/api/cards.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ _Arguments_

## CardLocation.CLUSTER_DASHBOARD_CARD options

*(From Rancher version v2.7.2)*

![Cluster Dashboard Card](../screenshots/cluster-cards.png)

`options` config object. Admissable parameters for the `options` with `'CardLocation.CLUSTER_DASHBOARD_CARD'` are:
Expand Down
27 changes: 17 additions & 10 deletions docusaurus/docs/extensions/api/common.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions docusaurus/docs/extensions/api/panels.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ _Arguments_

### PanelLocation.DETAILS_MASTHEAD options

*(From Rancher version v2.7.2)*

![Details Masthead](../screenshots/masthead.png)

`options` config object. Admissable parameters for the `options` with `'PanelLocation.DETAILS_MASTHEAD'` are:
Expand All @@ -60,6 +62,8 @@ plugin.addPanel(

### PanelLocation.DETAIL_TOP options

*(From Rancher version v2.7.2)*

![DetailTop](../screenshots/detailtop.png)

`options` config object. Admissable parameters for the `options` with `'PanelLocation.DETAIL_TOP'` are:
Expand All @@ -83,6 +87,8 @@ plugin.addPanel(

### PanelLocation.RESOURCE_LIST options

*(From Rancher version v2.7.2)*

![List View](../screenshots/list-view.png)

`options` config object. Admissable parameters for the `options` with `'PanelLocation.RESOURCE_LIST'` are:
Expand All @@ -106,6 +112,8 @@ plugin.addPanel(

### PanelLocation.ABOUT_TOP options

*(From Rancher version v2.13.0)*

![List View](../screenshots/about-top.png)

> NOTE: this Panel will only appear on the area designated in the screenshot in the About page of Rancher UI
Expand Down
193 changes: 164 additions & 29 deletions docusaurus/docs/extensions/api/tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

<br/>

`when` Object admissable values:
`when` Object admissible values:

`LocationConfig` as described above for the [LocationConfig object](./common#locationconfig).

<br/>
<br/>

### TabLocation.RESOURCE_DETAIL options

![Tabs](../screenshots/add-tab.png)
### TabLocation.RESOURCE_SHOW_CONFIGURATION options

`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_DETAIL'` are:
*(From Rancher version v2.14.0)*

![Tabs](../screenshots/add-tab-show-configuration.png)

`options` config object. Admissible parameters for the `options` with `'TabLocation.RESOURCE_SHOW_CONFIGURATION'` are:

| Key | Type | Description |
|---|---|---|
Expand All @@ -55,7 +63,7 @@ Usage example:

```ts
plugin.addTab(
TabLocation.RESOURCE_DETAIL,
TabLocation.RESOURCE_SHOW_CONFIGURATION,
{ resource: ['pod'] },
{
name: 'some-name',
Expand All @@ -69,11 +77,153 @@ plugin.addTab(
);
```

<br/>
<br/>
### TabLocation.RESOURCE_CREATE_PAGE options

*(From Rancher version v2.14.0)*

![Tabs](../screenshots/add-tab-create.png)

`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)*

![Tabs](../screenshots/add-tab-edit.png)

`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)*

![Tabs](../screenshots/add-tab-detail.png)

`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)*

![Tabs](../screenshots/cluster-config-tab-create.png)

> 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' }`
Expand Down Expand Up @@ -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**

![Tabs](../screenshots/add-tab-show-configuration.png)
![Tabs](../screenshots/add-tab.png)

`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 |
|---|---|---|
Expand All @@ -150,7 +285,7 @@ Usage example:

```ts
plugin.addTab(
TabLocation.RESOURCE_SHOW_CONFIGURATION,
TabLocation.RESOURCE_DETAIL,
{ resource: ['pod'] },
{
name: 'some-name',
Expand Down
2 changes: 1 addition & 1 deletion docusaurus/docs/extensions/provisioning/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
}, {
Expand Down
Binary file added docusaurus/docs/extensions/screenshots/add-tab-create.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docusaurus/docs/extensions/screenshots/add-tab-detail.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docusaurus/docs/extensions/screenshots/add-tab-edit.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion shell/components/CruResource.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);
Expand Down
Loading
Loading