Making it so we can target detail page vs show configuration #16203

codyrancher · 2025-12-17T04:43:22Z

Summary

Occurred changes and/or fixed issues

Made is so we can now differentiate between detail pages and show configuration when adding tabs via extensions.

Technical notes summary

This is done by using provide/inject to indicate to all ancestors that they're inside a resourcedetailpage. It's not the most elegant but it seems preferable over prop drilling especially when we don't control all detail pages that are rendered.

Areas or cases that should be tested

Extension tabs on the resource detail page, show configuration page, create and edit pages.

Areas which could experience regressions

See above

Screenshot/Video

tabular.mp4

Checklist

The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
The PR has a Milestone
The PR template has been filled out
The PR has been self reviewed
The PR has a reviewer assigned
The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
The PR has been reviewed in terms of Accessibility
The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

richard-cox · 2025-12-17T07:27:54Z

shell/components/Tabbed/index.vue


  data() {
-    const extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
+    const location = this.isResourceDetailDrawer ? TabLocation.RESOURCE_SHOW_CONFIGURATION : TabLocation.RESOURCE_DETAIL;


@aalves08 @codyrancher just want to confirm my comment in #16189 (comment).

The issue needs updating to reflect that we need it primarily on the edit page and then the show config tab, so two tab locations.

We probably need to be more explicit as well (if a --> y, if b --> x) instead of falling back on a location (if then else). Tabs can be used in a number of different places

@richard-cox we are safe with the create and edit scenarios because of the url param create (i just need to double-check if it works of if I need a PR, but in node we can't do Create's) and the edit has the mode query param, which is working fine.

It may be technically possible to overload the resource detail location + also supply some additional restrictions, but from the perspective of a ui extension developer having distinct tab locations is much easier to understand and use. This also follows the general messages of the three primary resource pages

List page

Detail page

Create/Edit page

aalves08 · 2025-12-17T11:46:00Z

shell/core/types.ts

-  /**
-   * Hide the product if the type is present (opposite of ifHaveType)
-   */
-  ifNotHaveType?: string | RegExp;


careful about this... probably is because it's missing a rebase or something. This was added quite recently. Should not be deleted

Fixed. Really not sure what caused it.

aalves08 · 2025-12-17T12:01:24Z

@codyrancher overall path looks great. I've tried the PR and it works just fine. Thank you very much! If you want I can take care of the documentation part in a separate PR 🙇

aalves08 · 2025-12-17T14:54:18Z

FYI, you can target:

EDIT

plugin.addTab(
    TabLocation.RESOURCE_DETAIL,
    { resource: ['pod'], mode: ['edit'] },
    {
      name:       'some-name',
      label:      'some-label',
      weight:     -5,
      showHeader: true,
      tooltip:    'this is a tooltip message',
      component:  () => import('./MyTabComponent.vue')
    }
  );

CREATE

  plugin.addTab(
    TabLocation.RESOURCE_DETAIL,
    {
      resource: ['pod'], mode: [], path: { urlPath: '/create', endsWith: true }
    },
    {
      name:       'some-name',
      label:      'some-label222',
      weight:     -5,
      showHeader: true,
      tooltip:    'this is a tooltip message',
      component:  () => import('./MyTabComponent.vue')
    }
  );

codyrancher · 2025-12-18T05:53:42Z

@codyrancher overall path looks great. I've tried the PR and it works just fine. Thank you very much! If you want I can take care of the documentation part in a separate PR 🙇

@aalves08 I cleaned it up and added some docs. If we do want to make separate location I'm happy to do that as well but it's up to you.

Edit: do we want to add each of the scenarios to https://github.com/rancher/ui-plugin-examples to make it easier for QA to test?

richard-cox

Re-iterating #16203 (comment).

The developer experience is not good, we should have tab locations for each of the three places.

aalves08

LGTM @codyrancher

aalves08 · 2025-12-18T10:59:01Z

Re-iterating #16203 (comment).

The developer experience is not good, we should have tab locations for each of the three places.

Created new isssue #16218 to be tackled separately @richard-cox

aalves08 · 2025-12-18T10:59:49Z

@codyrancher I can take care of the ui-plugins-examples, as per #16219. I've got more stuff to add there

found an issue on docs

aalves08

minor changes, but let's try to get this in today 🙏 Thanks @codyrancher !

aalves08 · 2025-12-18T11:17:18Z

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

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


Ah, the docs content is correct but where you've edited them is wrong... It should be docusaurus/docs/extensions/api/tabs.md not the versioned_docs part as that's old stuff...

Also, minor change but important, can you add a reference that this available from 2.14 and onwards? 🙏

*(From Rancher version v2.14.0)*

Dismissing review because created issue to tackle it separately

Fixes rancher#16179 Fixes rancher#16189

aalves08

LGTM

codyrancher requested a review from aalves08 December 17, 2025 04:43

rancher-ui-project-bot bot assigned codyrancher Dec 17, 2025

rancher-ui-project-bot bot added this to the v2.14.0 milestone Dec 17, 2025

richard-cox reviewed Dec 17, 2025

View reviewed changes

aalves08 reviewed Dec 17, 2025

View reviewed changes

codyrancher force-pushed the tabular-yo branch 3 times, most recently from 0422aff to a9765bf Compare December 18, 2025 05:50

codyrancher force-pushed the tabular-yo branch from a9765bf to 2499dc8 Compare December 18, 2025 06:02

codyrancher marked this pull request as ready for review December 18, 2025 06:04

codyrancher requested a review from aalves08 December 18, 2025 06:26

richard-cox previously requested changes Dec 18, 2025

View reviewed changes

aalves08 mentioned this pull request Dec 18, 2025

Tech Debt: Improve experience on Tabs extensions point with new locations #16218

Closed

aalves08 previously approved these changes Dec 18, 2025

View reviewed changes

aalves08 requested changes Dec 18, 2025

View reviewed changes

Making it so we can target detail page vs show configuration

7506ba8

Fixes rancher#16179 Fixes rancher#16189

codyrancher force-pushed the tabular-yo branch from 2499dc8 to 7506ba8 Compare December 18, 2025 16:47

aalves08 mentioned this pull request Dec 18, 2025

add new locations for Tab extension point #16225

Merged

9 tasks

codyrancher requested a review from aalves08 December 18, 2025 16:50

aalves08 approved these changes Dec 18, 2025

View reviewed changes

codyrancher merged commit 4e34af4 into rancher:master Dec 18, 2025
61 of 64 checks passed

aalves08 mentioned this pull request Dec 19, 2025

bump shell version to release new updates to extension points #16238

Merged

9 tasks

rancher-ui-project-bot bot mentioned this pull request Dec 23, 2025

[backport v2.13.2] Tech Debt: Improve experience on Tabs extensions point with new locations #16262

Closed

rancher-ui-project-bot bot mentioned this pull request Dec 23, 2025

[backport v2.12.6] Tech Debt: Improve experience on Tabs extensions point with new locations #16263

Closed

This was referenced Jan 2, 2026

2.13 ::: backport PRs 16203, 16225 and 16208 #16292

Merged

2.12 ::: backport PRs 16203, 16225 and 16208 #16293

Merged

Making it so we can target detail page vs show configuration #16203

Making it so we can target detail page vs show configuration #16203

Uh oh!

Conversation

codyrancher commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Occurred changes and/or fixed issues

Technical notes summary

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Checklist

Uh oh!

richard-cox Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

aalves08 Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

richard-cox Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

aalves08 Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

codyrancher Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

aalves08 commented Dec 17, 2025

Uh oh!

aalves08 commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codyrancher commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

richard-cox left a comment

Choose a reason for hiding this comment

Uh oh!

aalves08 left a comment

Choose a reason for hiding this comment

Uh oh!

aalves08 commented Dec 18, 2025

Uh oh!

aalves08 commented Dec 18, 2025

Uh oh!

aalves08 left a comment

Choose a reason for hiding this comment

Uh oh!

aalves08 Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

aalves08 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codyrancher commented Dec 17, 2025 •

edited

Loading

aalves08 commented Dec 17, 2025 •

edited

Loading

codyrancher commented Dec 18, 2025 •

edited

Loading