Handle multiple sources for one extension by momesgin · Pull Request #17031 · rancher/dashboard

momesgin · 2026-03-26T20:58:14Z

Summary

Fixes #16935
Fixes #16228

Occurred changes and/or fixed issues

Display repository name on extension cards even when the original repository is removed
When an extension is installed from one repository and the user tries to install the same extension from a different repository, a new modal is now shown prompting them to uninstall the existing version first
Created new UninstallExistingExtensionDialog.vue component for handling this scenario

Technical notes summary

The available computed property in shell/pages/c/_cluster/uiplugins/index.vue now creates standalone items for installed plugins when the original repository is removed, rather than marking a fallback chart from another repo as "installed"
Original repository name is extracted from Helm app annotations (catalog.cattle.io/ui-source-repo or catalog.cattle.io/cluster-repo-name) and stored in originalRepoName
showInstallDialog method now checks if the same extension is already installed from a different source and shows UninstallExistingExtensionDialog instead of InstallExtensionDialog
Added shared extension-dialog mixin in shell/assets/styles/base/_mixins.scss used by InstallExtensionDialog, UninstallExtensionDialog, and UninstallExistingExtensionDialog
Added unit tests

Areas or cases that should be tested

Install an extension from Repository A, then remove Repository A - verify the extension card still shows the original repo name and displays correctly in the Installed tab
Add two repositories that provide the same extension, install from one, then try to install from the other - verify the new "already installed from another source" modal appears
In the new modal, click "Uninstall existing version" - verify the extension is uninstalled correctly
Verify extensions from other repositories still appear in the Available tab after installing an extension with the same name from a different repo
Test upgrade/downgrade flows still work correctly for installed extensions

Areas which could experience regressions

Extensions page - particularly the Available and Installed tabs filtering logic
Extension installation, upgrade, and downgrade flows
Extension uninstallation flow

Screenshot/Video

multisourceext.mov

UPDATE:
addressing the wrong capitalization styling for repo names

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

…me name

…xtensions

Copilot

Pull request overview

Improves the Extensions UI to better handle the case where the same extension exists in multiple repositories, preserving correct “installed” attribution and surfacing the source repository in the card footer.

Changes:

Load Helm Apps to determine an installed extension’s original source repo and avoid incorrectly marking a different repo’s chart as installed.
Introduce an “already installed from another source” uninstall-first modal (UninstallExistingExtensionDialog.vue) and switch install-status tracking to use plugin id (vs name) to disambiguate duplicates.
Add shared extension-dialog styling mixin and expand unit tests for footer repo display + helm-op status tracking.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
shell/pages/c/_cluster/uiplugins/index.vue	Cross-references Helm Apps for source repo, updates install/uninstall flows for multi-source duplicates, tracks install state by id, shows repo footer item.
shell/pages/c/_cluster/uiplugins/tests/index.test.ts	Adds unit tests for repo footer display and updates helmOps watcher tests to use plugin ids.
shell/pages/c/_cluster/apps/charts/AppChartCardFooter.vue	Updates footer text styling (capitalization).
shell/dialog/UninstallExistingExtensionDialog.vue	New uninstall-first modal for “installed from another source” scenario.
shell/dialog/tests/UninstallExistingExtensionDialog.test.ts	Unit tests for the new dialog.
shell/dialog/InstallExtensionDialog.vue	Switches install status callback to use plugin id; adopts shared dialog mixin.
shell/dialog/UninstallExtensionDialog.vue	Switches uninstall status callback to use plugin id; adopts shared dialog mixin.
shell/assets/styles/base/_mixins.scss	Adds shared `extension-dialog` mixin.
shell/assets/translations/en-us.yaml	Adds i18n strings for the new uninstall-first modal text.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

aalves08

Left a few comments @momesgin .

Functionally, seems to be working fine. Like advertised.

A couple of nitpicks with the presentation/visuals (@oboc-sts to reply, if possible):

In the case of Rancher Extensions, uppercase looks good to me, but for Elemental-Repo and others it seems weird... Just a personal opinion but I would prefer to see elemental-repo or ui-plugin-catalog-charts. This last one could be "translated" to Image Catalog or something and fallback to ui-plugin-catalog-charts.

Another one for @oboc-sts as well: In this scenario

I got the extension installed, but these two cards don't display anything (warning?) in regards to being an extension with the same ID already installed... Don't know if you guys covered this scenario or not but would love to hear your opinion on it 🙏

Thanks in advance

oboc-sts · 2026-03-31T13:47:18Z

Thanks for pointing these @aalves08 ... I'm trying to go through them but I'm having some issues:

In the case of Rancher Extensions, uppercase looks good to me, but for Elemental-Repo and others it seems weird... Just a personal opinion but I would prefer to see elemental-repo or ui-plugin-catalog-charts. This last one could be "translated" to Image Catalog or something and fallback to ui-plugin-catalog-charts.

I... am not aware of having any case-sensitive formatting applied there, or I don't recall spec'ing something like this 😁 . Not for the extension, nor for the chart cards. @momesgin am I missing something here?

I got the extension installed, but these two cards don't display anything (warning?) in regards to being an extension with the same ID already installed... Don't know if you guys covered this scenario or not but would love to hear your opinion on it 🙏

I see the screenshot but I have no idea which extensions you're talking about and what is the warning message you're missing? In other words, I need a bit of context / more details around this. Are you sure this is a matter related to the component (the card) itself and not to the installation process that should've checked if there is an extension already installed with that ID?

aalves08 · 2026-03-31T15:11:18Z

Thanks for pointing these @aalves08 ... I'm trying to go through them but I'm having some issues:

In the case of Rancher Extensions, uppercase looks good to me, but for Elemental-Repo and others it seems weird... Just a personal opinion but I would prefer to see elemental-repo or ui-plugin-catalog-charts. This last one could be "translated" to Image Catalog or something and fallback to ui-plugin-catalog-charts.

I... am not aware of having any case-sensitive formatting applied there, or I don't recall spec'ing something like this 😁 . Not for the extension, nor for the chart cards. @momesgin am I missing something here?

I got the extension installed, but these two cards don't display anything (warning?) in regards to being an extension with the same ID already installed... Don't know if you guys covered this scenario or not but would love to hear your opinion on it 🙏

I see the screenshot but I have no idea which extensions you're talking about and what is the warning message you're missing? In other words, I need a bit of context / more details around this. Are you sure this is a matter related to the component (the card) itself and not to the installation process that should've checked if there is an extension already installed with that ID?

@oboc-sts sorry for the lack of context, I tested with Elemental extension. The cards are duplicated (even triplicated, but that third one cannot be seen because it's that third one is in the installed tab)

oboc-sts · 2026-04-01T06:20:49Z

They seem duplicated, but I see they come from different repos. So they are not in fact identical. Or are they?

I'm trying to better define the problem we're trying to solve here but it's still not clear to me.

Maybe it's something I'm missing but having conflicts (in general, not necessarily for extensions) of this type (having extensions with the same ID, installing extensions from the same source, etc) is something that is (should be) always treated during the process (of adding, installing, etc) and doesn't have anything to do with the components being used in the end result.

In other words, the warnings, errors and other conflictual use cases should be accounted for at "design time" (e.g. before the extension actually gets installed / added / etc), not "runtime" (after the extension is already installed / added / etc). The micro version of this would be: act proactively (try to prevent having identical extensions installed), not retroactively (passively inform the use there are identical extensions installed).

Maybe having a call with you and @momesgin would clarify the whole case a bit more.

momesgin · 2026-04-01T06:38:33Z

I... am not aware of having any case-sensitive formatting applied there, or I don't recall spec'ing something like this 😁 . Not for the extension, nor for the chart cards. @momesgin am I missing something here?

@oboc-sts I thought it was by design, but I might've misunderstood that. Will address that along with this PR.

Re the other question from @aalves08, I have the same understanding as you do.

aalves08 · 2026-04-01T14:48:41Z

@oboc-sts

They seem duplicated, but I see they come from different repos. So they are not in fact identical. Or are they?

I'm trying to better define the problem we're trying to solve here but it's still not clear to me.

Maybe it's something I'm missing but having conflicts (in general, not necessarily for extensions) of this type (having extensions with the same ID, installing extensions from the same source, etc) is something that is (should be) always treated during the process (of adding, installing, etc) and doesn't have anything to do with the components being used in the end result.

In other words, the warnings, errors and other conflictual use cases should be accounted for at "design time" (e.g. before the extension actually gets installed / added / etc), not "runtime" (after the extension is already installed / added / etc). The micro version of this would be: act proactively (try to prevent having identical extensions installed), not retroactively (passively inform the use there are identical extensions installed).

Maybe having a call with you and @momesgin would clarify the whole case a bit more.

I am fine with that path @oboc-sts. Just wanted to raise it so that we would consider all angles, that's it. You are the UX man so I completely trust your opinion. As long as the experience is aligned with your expert analysis, I am fine with it 🙏

oboc-sts · 2026-04-01T15:16:34Z

Thanks, Alex. I'll take it with @momesgin

oboc-sts · 2026-04-01T15:56:54Z

Just had a call with @momesgin and:

the case sensitive thingie used on the extension cards will be fixed
the warnings / flags / etc on the card BEFORE the installation are NOT needed.

aalves08 · 2026-04-01T16:05:37Z

Just had a call with @momesgin and:

the case sensitive thingie used on the extension cards will be fixed

the warnings / flags / etc on the card BEFORE the installation are NOT needed.

Totally in agreement 🙏 Thanks for looking into this

aalves08 · 2026-04-09T13:34:18Z

@momesgin is this ready for approval?

momesgin · 2026-04-09T15:29:38Z

@momesgin is this ready for approval?

yes

UPDATE: no! I forgot to address the wrong styling for the repo names, but now it's fixed. So now... YES!

…xtensions

aalves08

LGTM

* display repo on extension cards * handle install/uninstall process for multiple extenstions with the same name * minor style + remove log * display repo name on installed card even after repo is removed * implement the final ux/ui * address feedback * remove unused code * update comments * add UninstallExistingExtensionDialog to PromptModal.test.ts * remove capitalize styling for the cards footer --------- Co-authored-by: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local> Co-authored-by: nwmac <1955897+nwmac@users.noreply.github.com>

Mo Mesgin added 8 commits March 16, 2026 11:13

display repo on extension cards

30cfefd

handle install/uninstall process for multiple extenstions with the sa…

e7979d0

…me name

minor style + remove log

79a8894

Merge branch 'master' of github.com:rancher/dashboard into multiple-e…

d1aba2b

…xtensions

display repo name on installed card even after repo is removed

2ab71a0

Merge branch 'master' of github.com:rancher/dashboard into multiple-e…

1aacf64

…xtensions

Merge branch 'master' of github.com:rancher/dashboard into multiple-e…

0079cdc

…xtensions

implement the final ux/ui

caf0d1e

momesgin added this to the v2.15.0 milestone Mar 26, 2026

momesgin self-assigned this Mar 26, 2026

momesgin requested a review from Copilot March 27, 2026 17:43

Copilot started reviewing on behalf of momesgin March 27, 2026 17:43 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

Mo Mesgin added 3 commits March 27, 2026 11:56

address feedback

004f628

remove unused code

6ebee15

update comments

bcaa943

momesgin marked this pull request as ready for review March 27, 2026 23:01

momesgin requested review from aalves08 and richard-cox March 27, 2026 23:34

aalves08 reviewed Mar 31, 2026

View reviewed changes

Comment thread shell/pages/c/_cluster/uiplugins/index.vue

Comment thread shell/dialog/UninstallExtensionDialog.vue

Comment thread shell/pages/c/_cluster/uiplugins/index.vue

Comment thread shell/pages/c/_cluster/uiplugins/index.vue

oboc-sts mentioned this pull request Apr 1, 2026

Review - handle multiple sources for one extension (Alex) rancher/ux#426

Closed

add UninstallExistingExtensionDialog to PromptModal.test.ts

2ac67bb

Mo Mesgin added 2 commits April 9, 2026 08:48

remove capitalize styling for the cards footer

190ab50

Merge branch 'master' of github.com:rancher/dashboard into multiple-e…

6e51ea0

…xtensions

momesgin requested a review from aalves08 April 9, 2026 16:26

aalves08 approved these changes Apr 9, 2026

View reviewed changes

momesgin merged commit 006d1f8 into rancher:master Apr 9, 2026
52 checks passed

momesgin deleted the multiple-extensions branch April 9, 2026 16:56

Conversation

momesgin commented Mar 26, 2026 • 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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aalves08 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oboc-sts commented Mar 31, 2026

Uh oh!

aalves08 commented Mar 31, 2026

Uh oh!

oboc-sts commented Apr 1, 2026

Uh oh!

momesgin commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aalves08 commented Apr 1, 2026

Uh oh!

oboc-sts commented Apr 1, 2026

Uh oh!

oboc-sts commented Apr 1, 2026

Uh oh!

aalves08 commented Apr 1, 2026

Uh oh!

aalves08 commented Apr 9, 2026

Uh oh!

momesgin commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

4 participants

momesgin commented Mar 26, 2026 •

edited

Loading

momesgin commented Apr 1, 2026 •

edited

Loading

momesgin commented Apr 9, 2026 •

edited

Loading