@rancher/shell 3.0.10 → 3.0.12-rc.1

package/pages/c/_cluster/uiplugins/__tests__/index.test.ts

@@ -207,6 +207,68 @@ describe('page: UI plugins/Extensions', () => {
 
       expect(items).toHaveLength(0);
     });
+
+    it('should display repository name for non-installed plugins with chart info', () => {
+      const plugin = {
+        installed: false,
+        chart:     { repoNameDisplay: 'rancher-charts' },
+        certified: true
+      };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items).toHaveLength(1);
+      expect(items[0].icon).toBe('repository-alt');
+      expect(items[0].labels).toStrictEqual(['rancher-charts']);
+    });
+
+    it('should display repository name for installed plugins when chart info is present (original repo exists)', () => {
+      const plugin = {
+        installed: true,
+        chart:     { repoNameDisplay: 'rancher-charts' },
+        certified: true
+      };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items).toHaveLength(1);
+      expect(items[0].icon).toBe('repository-alt');
+      expect(items[0].labels).toStrictEqual(['rancher-charts']);
+    });
+
+    it('should display original repository name for installed plugins when original repo was removed', () => {
+      const plugin = {
+        installed:               true,
+        originalRepoNameDisplay: 'removed-repo',
+        certified:               true
+      };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items).toHaveLength(1);
+      expect(items[0].icon).toBe('repository-alt');
+      expect(items[0].labels).toStrictEqual(['removed-repo']);
+    });
+
+    it('should prefer chart.repoNameDisplay over originalRepoNameDisplay when both are present', () => {
+      const plugin = {
+        installed:               true,
+        chart:                   { repoNameDisplay: 'current-repo' },
+        originalRepoNameDisplay: 'original-repo',
+        certified:               true
+      };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items).toHaveLength(1);
+      expect(items[0].labels).toStrictEqual(['current-repo']);
+    });
+
+    it('should NOT display repository name when neither chart nor originalRepoNameDisplay are present', () => {
+      const plugin = {
+        installed: true,
+        certified: true
+      };
+      const items = wrapper.vm.getFooterItems(plugin);
+
+      expect(items).toHaveLength(0);
+    });
   });
 
   describe('getStatuses', () => {
@@ -269,6 +331,162 @@ describe('page: UI plugins/Extensions', () => {
     });
   });
 
+  describe('showInstallDialog', () => {
+    let dispatchMock: jest.Mock;
+
+    const createWrapper = (availablePlugins: any[] = []) => {
+      dispatchMock = jest.fn().mockResolvedValue(true);
+
+      const store = {
+        getters: {
+          'prefs/get':         jest.fn(),
+          'catalog/rawCharts': {},
+          'uiplugins/plugins': [],
+          'uiplugins/errors':  {},
+          'management/all':    () => [],
+        },
+        dispatch: dispatchMock,
+      };
+
+      const wrapper = shallowMount(UiPluginsPage, {
+        global: {
+          mocks: {
+            $store: store,
+            t,
+          },
+          stubs: { ActionMenu: { template: '<div />' } }
+        }
+      });
+
+      // Mock the available computed property
+      Object.defineProperty(wrapper.vm, 'available', { get: () => availablePlugins });
+
+      return wrapper;
+    };
+
+    it('should open UninstallExistingExtensionDialog when installing a plugin that is already installed from a different source', () => {
+      const installedPlugin = {
+        id:        'other-repo/my-plugin',
+        name:      'my-plugin',
+        installed: true
+      };
+      const pluginToInstall = {
+        id:   'new-repo/my-plugin',
+        name: 'my-plugin'
+      };
+
+      const wrapper = createWrapper([installedPlugin, pluginToInstall]);
+
+      wrapper.vm.showInstallDialog(pluginToInstall, 'install', {});
+
+      expect(dispatchMock).toHaveBeenCalledWith(
+        'management/promptModal',
+        expect.objectContaining({ component: 'UninstallExistingExtensionDialog' })
+      );
+    });
+
+    it('should NOT open InstallExtensionDialog when plugin is already installed from a different source', () => {
+      const installedPlugin = {
+        id:        'other-repo/my-plugin',
+        name:      'my-plugin',
+        installed: true
+      };
+      const pluginToInstall = {
+        id:   'new-repo/my-plugin',
+        name: 'my-plugin'
+      };
+
+      const wrapper = createWrapper([installedPlugin, pluginToInstall]);
+
+      wrapper.vm.showInstallDialog(pluginToInstall, 'install', {});
+
+      expect(dispatchMock).not.toHaveBeenCalledWith(
+        'management/promptModal',
+        expect.objectContaining({ component: 'InstallExtensionDialog' })
+      );
+    });
+
+    it('should pass the installedPlugin to UninstallExistingExtensionDialog', () => {
+      const installedPlugin = {
+        id:        'other-repo/my-plugin',
+        name:      'my-plugin',
+        installed: true
+      };
+      const pluginToInstall = {
+        id:   'new-repo/my-plugin',
+        name: 'my-plugin'
+      };
+
+      const wrapper = createWrapper([installedPlugin, pluginToInstall]);
+
+      wrapper.vm.showInstallDialog(pluginToInstall, 'install', {});
+
+      expect(dispatchMock).toHaveBeenCalledWith(
+        'management/promptModal',
+        expect.objectContaining({
+          component:      'UninstallExistingExtensionDialog',
+          componentProps: expect.objectContaining({ installedPlugin })
+        })
+      );
+    });
+
+    it('should open InstallExtensionDialog when installing a plugin that is NOT installed from another source', () => {
+      const pluginToInstall = {
+        id:   'repo/my-plugin',
+        name: 'my-plugin'
+      };
+
+      const wrapper = createWrapper([pluginToInstall]);
+
+      wrapper.vm.showInstallDialog(pluginToInstall, 'install', {});
+
+      expect(dispatchMock).toHaveBeenCalledWith(
+        'management/promptModal',
+        expect.objectContaining({ component: 'InstallExtensionDialog' })
+      );
+    });
+
+    it('should open InstallExtensionDialog when the same plugin id is being re-installed (same source)', () => {
+      const installedPlugin = {
+        id:        'repo/my-plugin',
+        name:      'my-plugin',
+        installed: true
+      };
+
+      const wrapper = createWrapper([installedPlugin]);
+
+      wrapper.vm.showInstallDialog(installedPlugin, 'install', {});
+
+      expect(dispatchMock).toHaveBeenCalledWith(
+        'management/promptModal',
+        expect.objectContaining({ component: 'InstallExtensionDialog' })
+      );
+    });
+
+    it('should open InstallExtensionDialog for upgrade action even if same name exists in another repo', () => {
+      const installedPlugin = {
+        id:        'repo-a/my-plugin',
+        name:      'my-plugin',
+        installed: true
+      };
+      const otherPlugin = {
+        id:        'repo-b/my-plugin',
+        name:      'my-plugin',
+        installed: false
+      };
+
+      const wrapper = createWrapper([installedPlugin, otherPlugin]);
+
+      // Upgrade action should always go to InstallExtensionDialog
+      wrapper.vm.showInstallDialog(installedPlugin, 'upgrade', {});
+
+      expect(dispatchMock).toHaveBeenCalledWith(
+        'management/promptModal',
+        expect.objectContaining({ component: 'InstallExtensionDialog' })
+      );
+    });
+  });
+
   describe('watch: helmOps', () => {
     let wrapper: VueWrapper<any>;
     let updatePluginInstallStatusMock: jest.Mock;
@@ -296,10 +514,10 @@ describe('page: UI plugins/Extensions', () => {
         computed: {
           // Override the computed property for this test suite
           available: () => [
-            { name: 'plugin1' },
-            { name: 'plugin2' },
-            { name: 'plugin3' },
-            { name: 'plugin4' },
+            { name: 'plugin1', id: 'repo/plugin1' },
+            { name: 'plugin2', id: 'repo/plugin2' },
+            { name: 'plugin3', id: 'repo/plugin3' },
+            { name: 'plugin4', id: 'repo/plugin4' },
           ],
           hasMenuActions: () => true,
           menuActions:    () => []
@@ -311,9 +529,9 @@ describe('page: UI plugins/Extensions', () => {
 
       // Set the 'installing' status on the component instance
       wrapper.vm.installing = {
-        plugin1: 'install',
-        plugin2: 'downgrade',
-        plugin3: 'uninstall',
+        'repo/plugin1': 'install',
+        'repo/plugin2': 'downgrade',
+        'repo/plugin3': 'uninstall',
       };
 
       // Reset errors
@@ -330,7 +548,7 @@ describe('page: UI plugins/Extensions', () => {
       wrapper.vm.helmOps = helmOps;
       await wrapper.vm.$nextTick();
 
-      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('plugin1', 'install');
+      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('repo/plugin1', 'install');
     });
 
     it('should not update status for an upgrade op when a downgrade was initiated', async() => {
@@ -344,7 +562,7 @@ describe('page: UI plugins/Extensions', () => {
       await wrapper.vm.$nextTick();
 
       // It should not be called with 'upgrade' for plugin2
-      expect(updatePluginInstallStatusMock).not.toHaveBeenCalledWith('plugin2', 'upgrade');
+      expect(updatePluginInstallStatusMock).not.toHaveBeenCalledWith('repo/plugin2', 'upgrade');
     });
 
     it('should clear status for a completed uninstall operation', async() => {
@@ -357,7 +575,7 @@ describe('page: UI plugins/Extensions', () => {
       wrapper.vm.helmOps = helmOps;
       await wrapper.vm.$nextTick();
 
-      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('plugin3', false);
+      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('repo/plugin3', false);
     });
 
     it('should set error and clear status for a failed operation', async() => {
@@ -370,8 +588,8 @@ describe('page: UI plugins/Extensions', () => {
       wrapper.vm.helmOps = helmOps;
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.vm.errors.plugin1).toBe(true);
-      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('plugin1', false);
+      expect(wrapper.vm.errors['repo/plugin1']).toBe(true);
+      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('repo/plugin1', false);
     });
 
     it('should clear status for plugins with no active operation', async() => {
@@ -385,7 +603,7 @@ describe('page: UI plugins/Extensions', () => {
       await wrapper.vm.$nextTick();
 
       // plugin4 has no op, so its status should be cleared
-      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('plugin4', false);
+      expect(updatePluginInstallStatusMock).toHaveBeenCalledWith('repo/plugin4', false);
     });
   });
 });

package/pages/c/_cluster/uiplugins/index.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import day from 'dayjs';
 import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
+import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { allHash } from '@shell/utils/promise';
 import { CATALOG, UI_PLUGIN, MANAGEMENT, ZERO_TIME } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -73,7 +74,7 @@ export default {
       menuTargetEvent:                null,
       menuOpen:                       false,
       hasFeatureFlag:                 true,
-      defaultIcon:                    require('~shell/assets/images/generic-plugin.svg'),
+      defaultIcon:                    genericPluginSvg,
       reloadRequired:                 false,
       rancherVersion:                 null
     };
@@ -100,6 +101,14 @@ export default {
       hash.helmOps = this.$store.dispatch('management/findAll', { type: CATALOG.OPERATION });
     }
 
+    // Load apps in UI_PLUGIN_NAMESPACE to determine which repo an extension was installed from
+    if (this.$store.getters['management/schemaFor'](CATALOG.APP)) {
+      hash.apps = this.$store.dispatch('management/findAll', {
+        type: CATALOG.APP,
+        opt:  { namespaced: UI_PLUGIN_NAMESPACE }
+      });
+    }
+
     if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
       hash.repos = this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO }, { force: true });
     }
@@ -126,6 +135,12 @@ export default {
     ...mapGetters({ uiErrors: 'uiplugins/errors' }),
     ...mapGetters({ theme: 'prefs/theme' }),
 
+    // Computed to reactively update when new apps are installed
+    apps() {
+      return this.$store.getters['management/all'](CATALOG.APP)
+        .filter((app) => app.metadata?.namespace === UI_PLUGIN_NAMESPACE);
+    },
+
     charts() {
       const c = this.$store.getters['catalog/rawCharts'];
 
@@ -312,8 +327,8 @@ export default {
           }
         }
 
-        if (this.installing[item.name]) {
-          item.installing = this.installing[item.name];
+        if (this.installing[item.id]) {
+          item.installing = this.installing[item.id];
         }
 
         return item;
@@ -358,15 +373,23 @@ export default {
 
       // Go through the CRs for the plugins and wire them into the catalog
       this.plugins.forEach((p) => {
-        const chart = all.find((c) => c.name === p.name);
+        let chart;
+        const app = this.apps.find((a) => a.metadata.name === p.name && a.metadata.namespace === UI_PLUGIN_NAMESPACE);
+        const originalRepoName = app?.spec?.chart?.metadata?.annotations?.[CATALOG_ANNOTATIONS.SOURCE_REPO_NAME] || app?.metadata?.labels?.[CATALOG_ANNOTATIONS.CLUSTER_REPO_NAME];
+
+        // Find the chart from the original repo to avoid picking a wrong chart with the same name
+        if (originalRepoName) {
+          chart = all.find((c) => c.name === p.name && c.chart?.repoName === originalRepoName);
+        }
 
+        // If original repo was removed, don't fall back to another repo's chart (would break Available tab)
         if (chart) {
           chart.installed = true;
           chart.uiplugin = p;
           chart.installedVersion = p.version;
 
           // Can't do this here
-          chart.installing = this.installing[chart.name];
+          chart.installing = this.installing[chart.id];
 
           // Check for upgrade
           const latestInstallableVersion = chart.installableVersions?.[0];
@@ -384,20 +407,34 @@ export default {
             chart.upgrade = getPluginChartVersionLabel(latestInstallableVersion);
           }
         } else {
-          // No chart, so add a card for the plugin based on its Custom resource being present
+          // No chart available - original repo was removed or developer-loaded plugin
+          const appChartMeta = app?.spec?.chart?.metadata;
+          const appAnnotations = appChartMeta?.annotations || {};
+          let originalRepoDisplayName = null;
+
+          if (originalRepoName) {
+            originalRepoDisplayName = this.$store.getters['i18n/withFallback'](`catalog.repo.name."${ originalRepoName }"`, null, originalRepoName);
+          }
+
           const item = {
-            name:                p.name,
-            label:               p.name,
-            description:         p.description || '-',
-            id:                  `${ p.name }-${ p.version }`,
-            versions:            [],
-            displayVersion:      p.version,
-            displayVersionLabel: p.version || '-',
-            isDeveloper:         p.isDeveloper,
-            installed:           true,
-            installing:          false,
-            builtin:             false,
-            uiplugin:            p,
+            name:                    p.name,
+            label:                   appAnnotations[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || appChartMeta?.name || p.name,
+            description:             appChartMeta?.description || p.description || '-',
+            icon:                    appChartMeta?.icon || appAnnotations['catalog.cattle.io/ui-icon'],
+            id:                      `${ p.name }-${ p.version }`,
+            versions:                [],
+            displayVersion:          p.version,
+            displayVersionLabel:     p.version || '-',
+            isDeveloper:             p.isDeveloper,
+            installed:               true,
+            installedVersion:        p.version,
+            installing:              false,
+            builtin:                 false,
+            uiplugin:                p,
+            primeOnly:               appAnnotations[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true',
+            experimental:            appAnnotations[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
+            certified:               appAnnotations[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER,
+            originalRepoNameDisplay: originalRepoDisplayName,
           };
 
           all.push(item);
@@ -421,7 +458,7 @@ export default {
 
       // Merge in the plugin load errors from help ops
       Object.keys(this.errors).forEach((e) => {
-        const chart = all.find((c) => c.name === e);
+        const chart = all.find((c) => c.id === e);
 
         if (chart) {
           chart.helmError = !!this.errors[e];
@@ -455,28 +492,50 @@ export default {
           const op = pluginOps.find((o) => o.status?.releaseName === plugin.name);
 
           if (op) {
+            const allWithSameName = this.available.filter((p) => p.name === plugin.name);
+            let targetPluginId;
+
+            // When multiple plugins share the same name (from different repositories),
+            // a single helm operation will trigger updates. We need to correctly identify
+            // the specific plugin that is either currently being installed/updated or is already installed
+            // so we don't accidentally mark all identically named plugins as "installing".
+            const installingPlugin = allWithSameName.find((p) => this.installing[p.id]);
+            const installedPlugin = allWithSameName.find((p) => p.installed);
+
+            if (installingPlugin) {
+              targetPluginId = installingPlugin.id;
+            } else if (installedPlugin) {
+              targetPluginId = installedPlugin.id;
+            } else {
+              targetPluginId = allWithSameName[0]?.id;
+            }
+
+            if (plugin.id !== targetPluginId) {
+              return;
+            }
+
             const active = op.metadata.state?.transitioning;
             const error = op.metadata.state?.error;
 
-            this.errors[plugin.name] = error;
+            this.errors[plugin.id] = error;
 
             if (active) {
             // Can use the status directly, apart from upgrade, which maps to update
               const status = op.status.action;
 
-              if (status === 'upgrade' && this.installing[plugin.name] === 'downgrade') {
+              if (status === 'upgrade' && this.installing[plugin.id] === 'downgrade') {
                 // Helm op is an upgrade, but we initiated a downgrade, so keep the 'downgrade' status
               } else {
-                this.updatePluginInstallStatus(plugin.name, status);
+                this.updatePluginInstallStatus(plugin.id, status);
               }
             } else if (op.status.action === 'uninstall') {
             // Uninstall has finished
-              this.updatePluginInstallStatus(plugin.name, false);
+              this.updatePluginInstallStatus(plugin.id, false);
             } else if (error) {
-              this.updatePluginInstallStatus(plugin.name, false);
+              this.updatePluginInstallStatus(plugin.id, false);
             }
           } else {
-            this.updatePluginInstallStatus(plugin.name, false);
+            this.updatePluginInstallStatus(plugin.id, false);
           }
         });
       },
@@ -502,7 +561,11 @@ export default {
               changes++;
             }
 
-            this.updatePluginInstallStatus(plugin.name, false);
+            (this.available || []).forEach((c) => {
+              if (c.name === plugin.name) {
+                this.updatePluginInstallStatus(c.id, false);
+              }
+            });
           }
         });
 
@@ -595,6 +658,35 @@ export default {
       ev?.preventDefault?.();
       ev?.stopPropagation?.();
 
+      // Check if a plugin with the same name is already installed from a different repo
+      if (action === 'install') {
+        const installedPlugin = this.available.find((p) => p.name === plugin.name && p.installed);
+        const isInstalledFromDifferentSource = !!installedPlugin && installedPlugin.id !== plugin.id;
+
+        if (isInstalledFromDifferentSource) {
+          // Show a different dialog that prompts the user to uninstall the existing version first
+          this.$store.dispatch('management/promptModal', {
+            component:                            'UninstallExistingExtensionDialog',
+            testId:                               'uninstall-existing-extension-modal',
+            returnFocusSelector:                  `[data-testid="extension-card-${ action }-btn-${ plugin?.name }"]`,
+            returnFocusFirstIterableNodeSelector: '#extensions-main-page',
+            componentProps:                       {
+              installedPlugin,
+              updateStatus: (pluginId, type) => {
+                this.updatePluginInstallStatus(pluginId, type);
+              },
+              closed: (res) => {
+                if (res?.uninstalled) {
+                  this.didUninstall(res.plugin);
+                }
+              }
+            }
+          });
+
+          return;
+        }
+      }
+
       this.$store.dispatch('management/promptModal', {
         component:                            'InstallExtensionDialog',
         testId:                               'install-extension-modal',
@@ -604,8 +696,8 @@ export default {
           plugin,
           action,
           initialVersion,
-          updateStatus: (pluginName, type) => {
-            this.updatePluginInstallStatus(pluginName, type);
+          updateStatus: (pluginId, type) => {
+            this.updatePluginInstallStatus(pluginId, type);
           },
           closed: (res) => {
             this.didInstall(res);
@@ -626,8 +718,8 @@ export default {
         returnFocusFirstIterableNodeSelector: '#extensions-main-page',
         componentProps:                       {
           plugin,
-          updateStatus: (pluginName, type) => {
-            this.updatePluginInstallStatus(pluginName, type);
+          updateStatus: (pluginId, type) => {
+            this.updatePluginInstallStatus(pluginId, type);
           },
           closed: (res) => {
             this.didUninstall(res);
@@ -638,7 +730,7 @@ export default {
 
     didUninstall(plugin) {
       if (plugin) {
-        this.updatePluginInstallStatus(plugin.name, 'uninstall');
+        this.updatePluginInstallStatus(plugin.id, 'uninstall');
 
         if (plugin.catalog) {
           this.refreshCharts();
@@ -665,8 +757,8 @@ export default {
       this.$refs.infoPanel.show({ ...plugin, tags });
     },
 
-    updatePluginInstallStatus(name, status) {
-      this.installing[name] = status;
+    updatePluginInstallStatus(id, status) {
+      this.installing[id] = status;
     },
 
     setMenu(event) {
@@ -849,6 +941,17 @@ export default {
     },
 
     getFooterItems(plugin) {
+      const footerItems = [];
+      const repoNameToDisplay = plugin?.chart?.repoNameDisplay || plugin?.originalRepoNameDisplay;
+
+      if (repoNameToDisplay) {
+        footerItems.push({
+          icon:        'repository-alt',
+          iconTooltip: { key: 'tableHeaders.repoName' },
+          labels:      [repoNameToDisplay]
+        });
+      }
+
       const labels = [];
 
       // "developer load" tag
@@ -872,11 +975,15 @@ export default {
         labels.push(this.t('plugins.labels.experimental'));
       }
 
-      return labels.length ? [{
-        icon:        'tag-alt',
-        iconTooltip: { key: 'generic.tags' },
-        labels,
-      }] : [];
+      if (labels.length) {
+        footerItems.push({
+          icon:        'tag-alt',
+          iconTooltip: { key: 'generic.tags' },
+          labels,
+        });
+      }
+
+      return footerItems;
     },
 
     getStatuses(plugin) {

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -436,6 +436,7 @@ describe('class: Resource', () => {
       }, {
         getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
         dispatch:    jest.fn(),
+        rootState:   { $extension: { getPlugins: () => ({}) } },
         rootGetters: {
           'i18n/t':            (key: string) => key,
           currentCluster:      undefined,

package/plugins/dashboard-store/actions.js

@@ -494,8 +494,9 @@ export default {
     // Of type @StorePaginationResult
     const pagination = opt.pagination ? {
       request: {
-        namespace:  opt.namespaced,
-        pagination: opt.pagination
+        namespace:             opt.namespaced,
+        pagination:            opt.pagination,
+        includeAssociatedData: opt.includeAssociatedData,
       },
       result: {
         count:     out.count,