@rancher/shell 3.0.11 → 3.0.12-rc.2

package/detail/__tests__/management.cattle.io.fleetworkspace.test.ts

@@ -0,0 +1,128 @@
+import { shallowMount } from '@vue/test-utils';
+import DetailWorkspace from '@shell/detail/management.cattle.io.fleetworkspace.vue';
+import { FLEET } from '@shell/config/types';
+import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+
+describe('component: DetailWorkspace', () => {
+  const mockValue = {
+    id:     'fleet-default',
+    counts: {
+      gitRepos:      3,
+      helmOps:       2,
+      clusters:      5,
+      cluster:       5,
+      clusterGroup:  1,
+      clusterGroups: 1,
+    },
+  };
+
+  const mockRouter = { push: jest.fn() };
+
+  const defaultStore = {
+    commit:   jest.fn(),
+    dispatch: jest.fn(),
+    getters:  {
+      'i18n/t':       (key: string) => key,
+      'i18n/exists':  () => true,
+      currentProduct: { name: FLEET_NAME },
+    },
+  };
+
+  const createWrapper = (props = {}) => {
+    return shallowMount(DetailWorkspace, {
+      props:  { value: mockValue, ...props },
+      global: {
+        mocks: {
+          $store:  defaultStore,
+          $route:  { params: {} },
+          $router: mockRouter,
+        },
+        stubs: {
+          CountBox:     { template: '<div />', props: ['clickable', 'count', 'name', 'primaryColorVar'] },
+          ResourceTabs: { template: '<div />' },
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('applicationRoute', () => {
+    it('should return the fleet application route', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.vm.applicationRoute).toStrictEqual({
+        name:   'c-cluster-fleet-application',
+        params: { cluster: BLANK_CLUSTER },
+      });
+    });
+  });
+
+  describe('clustersRoute', () => {
+    it('should return the fleet clusters list route', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.vm.clustersRoute).toStrictEqual({
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  BLANK_CLUSTER,
+          product:  FLEET_NAME,
+          resource: FLEET.CLUSTER,
+        },
+      });
+    });
+  });
+
+  describe('clusterGroupsRoute', () => {
+    it('should return the fleet cluster groups list route', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.vm.clusterGroupsRoute).toStrictEqual({
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  BLANK_CLUSTER,
+          product:  FLEET_NAME,
+          resource: FLEET.CLUSTER_GROUP,
+        },
+      });
+    });
+  });
+
+  describe('setWorkspaceAndNavigate', () => {
+    it('should commit updateWorkspace with the workspace id', () => {
+      const wrapper = createWrapper();
+      const route = wrapper.vm.applicationRoute;
+
+      wrapper.vm.setWorkspaceAndNavigate(route);
+
+      expect(defaultStore.commit).toHaveBeenCalledWith('updateWorkspace', {
+        value:   'fleet-default',
+        getters: defaultStore.getters,
+      });
+    });
+
+    it('should dispatch prefs/set with the workspace id', () => {
+      const wrapper = createWrapper();
+      const route = wrapper.vm.applicationRoute;
+
+      wrapper.vm.setWorkspaceAndNavigate(route);
+
+      expect(defaultStore.dispatch).toHaveBeenCalledWith('prefs/set', {
+        key:   expect.any(String),
+        value: 'fleet-default',
+      });
+    });
+
+    it('should navigate to the given route', () => {
+      const wrapper = createWrapper();
+      const route = wrapper.vm.clustersRoute;
+
+      wrapper.vm.setWorkspaceAndNavigate(route);
+
+      expect(mockRouter.push).toHaveBeenCalledWith(route);
+    });
+  });
+});

package/detail/fleet.cattle.io.bundle.vue

@@ -5,12 +5,16 @@ import FleetUtils from '@shell/utils/fleet';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import Loading from '@shell/components/Loading.vue';
 import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
+import ResourceTabs from '@shell/components/form/ResourceTabs';
+import Tab from '@shell/components/Tabbed/Tab';
 
 export default {
   name: 'FleetBundleDetail',
 
-  components: { Loading, FleetResources },
-  props:      {
+  components: {
+    Loading, FleetResources, ResourceTabs, Tab
+  },
+  props: {
     value: {
       type:     Object,
       required: true,
@@ -82,42 +86,25 @@ export default {
         return res;
       }, []);
     },
-    resourceCount() {
-      return this.bundleResources.length;
-    },
   }
 };
 
 </script>
 
 <template>
-  <div>
-    <div class="bundle-title mt-20 mb-20">
-      <h2>{{ t('fleet.bundles.resources') }}</h2>
-      <span>{{ resourceCount }}</span>
-    </div>
-    <Loading v-if="$fetchState.pending" />
-    <FleetResources
-      v-else
-      :rows="bundleResources"
-    />
-  </div>
+  <Loading v-if="$fetchState.pending" />
+  <ResourceTabs
+    v-else
+    :value="value"
+    mode="view"
+    :need-related="false"
+  >
+    <Tab
+      label="Resources"
+      name="resources"
+      :weight="20"
+    >
+      <FleetResources :rows="bundleResources" />
+    </Tab>
+  </ResourceTabs>
 </template>
-
-<style lang="scss" scoped>
-.bundle-title {
-  display: flex;
-  align-items: center;
-
-  h2 {
-    margin: 0 10px 0 0;
-  }
-
-  span {
-    background-color: var(--darker);
-    color: var(--default);
-    padding: 5px 10px;
-    border-radius: 15px;
-  }
-}
-</style>

package/detail/management.cattle.io.fleetworkspace.vue

@@ -4,6 +4,8 @@ import ResourceTabs from '@shell/components/form/ResourceTabs';
 import { SCOPE_NAMESPACE, SCOPE_CLUSTER } from '@shell/components/RoleBindings.vue';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 import { FLEET } from '@shell/config/types';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { WORKSPACE } from '@shell/store/prefs';
 
 export default {
   name: 'DetailWorkspace',
@@ -34,6 +36,35 @@ export default {
       return this.t(`typeLabel."${ FLEET.HELM_OP }"`, { count: this.value.counts.helmOps });
     },
 
+    applicationRoute() {
+      return {
+        name:   'c-cluster-fleet-application',
+        params: { cluster: BLANK_CLUSTER }
+      };
+    },
+
+    clustersRoute() {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  BLANK_CLUSTER,
+          product:  FLEET_NAME,
+          resource: FLEET.CLUSTER,
+        }
+      };
+    },
+
+    clusterGroupsRoute() {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  BLANK_CLUSTER,
+          product:  FLEET_NAME,
+          resource: FLEET.CLUSTER_GROUP,
+        }
+      };
+    },
+
     SCOPE_NAMESPACE() {
       return SCOPE_NAMESPACE;
     },
@@ -46,6 +77,16 @@ export default {
       return FLEET_NAME;
     }
   },
+
+  methods: {
+    setWorkspaceAndNavigate(route) {
+      const workspaceId = this.value.id;
+
+      this.$store.commit('updateWorkspace', { value: workspaceId, getters: this.$store.getters });
+      this.$store.dispatch('prefs/set', { key: WORKSPACE, value: workspaceId });
+      this.$router.push(route);
+    }
+  }
 };
 </script>
 
@@ -58,6 +99,8 @@ export default {
             :count="value.counts.gitRepos"
             :name="gitRepoLabel"
             :primary-color-var="'--sizzle-3'"
+            :clickable="true"
+            @click="setWorkspaceAndNavigate(applicationRoute)"
           />
         </div>
         <div class="col span-3">
@@ -65,6 +108,8 @@ export default {
             :count="value.counts.helmOps"
             :name="helmOpsLabel"
             :primary-color-var="'--sizzle-3'"
+            :clickable="true"
+            @click="setWorkspaceAndNavigate(applicationRoute)"
           />
         </div>
         <div class="col span-3">
@@ -72,6 +117,8 @@ export default {
             :count="value.counts.clusters"
             :name="clustersLabel"
             :primary-color-var="'--sizzle-1'"
+            :clickable="true"
+            @click="setWorkspaceAndNavigate(clustersRoute)"
           />
         </div>
         <div class="col span-3">
@@ -79,6 +126,8 @@ export default {
             :count="value.counts.clusterGroups"
             :name="clusterGroupsLabel"
             :primary-color-var="'--sizzle-2'"
+            :clickable="true"
+            @click="setWorkspaceAndNavigate(clusterGroupsRoute)"
           />
         </div>
       </div>

package/dialog/ExtensionCatalogInstallDialog.vue

@@ -302,7 +302,7 @@ export default {
         });
 
         if (this.extensionSvc) {
-          this.extensionUrl = `http://${ this.extensionSvc.spec.clusterIP }:${ this.extensionSvc.spec.ports[0].port }`;
+          this.extensionUrl = `http://${ this.extensionSvc.metadata.name }.${ this.extensionSvc.metadata.namespace }.svc:${ this.extensionSvc.spec.ports[0].port }`;
         } else {
           throw new Error('Error fetching extension service');
         }

package/dialog/InstallExtensionDialog.vue

@@ -223,7 +223,7 @@ export default {
 
       const plugin = this.plugin;
 
-      this.updateStatus(plugin.name, this.action);
+      this.updateStatus(plugin.id, this.action);
 
       // Find the version that the user wants to install
       const version = plugin.versions?.find((v) => v.version === this.version);
@@ -370,31 +370,21 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .plugin-install-dialog {
-    padding: 10px;
+  @import '@shell/assets/styles/base/_mixins.scss';
 
-    h4 {
-      font-weight: bold;
-    }
+  .plugin-install-dialog {
+    @include extension-dialog;
 
     .dialog-panel {
-      display: flex;
-      flex-direction: column;
-      min-height: 100px;
-
       p {
-        margin-bottom: 5px;
-      }
-
-      .dialog-info {
-        flex: 1;
+        margin-bottom: 4px;
       }
 
       .toggle-advanced {
         display: flex;
         align-items: center;
         cursor: pointer;
-        margin: 10px 0;
+        margin: 8px 0;
 
         &:hover {
           text-decoration: none;
@@ -403,19 +393,8 @@ export default {
       }
 
       .version-selector {
-        margin: 0 10px 10px 10px;
         width: auto;
       }
     }
-
-    .dialog-buttons {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 10px;
-
-      > *:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
   }
 </style>

package/dialog/UninstallExistingExtensionDialog.vue

@@ -0,0 +1,141 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import { CATALOG } from '@shell/config/types';
+import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+
+/**
+ * Dialog shown when user tries to install an extension that is already installed from a different source.
+ * Prompts the user to uninstall the existing version first before installing from the new source.
+ */
+export default {
+  emits: ['close'],
+
+  components: { AsyncButton },
+
+  props: {
+    /**
+     * The installed plugin that needs to be uninstalled
+     */
+    installedPlugin: {
+      type:     Object,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Callback to update install status on extensions main screen
+     */
+    updateStatus: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Callback when modal is closed
+     */
+    closed: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    }
+  },
+
+  data() {
+    return { busy: false };
+  },
+
+  methods: {
+    closeDialog(result) {
+      this.closed(result);
+      this.$emit('close');
+    },
+    async uninstall() {
+      this.busy = true;
+
+      const plugin = this.installedPlugin;
+
+      this.updateStatus(plugin.id, 'uninstall');
+
+      // Delete the CR if this is a developer plugin (there is no Helm App, so need to remove the CRD ourselves)
+      if (plugin.uiplugin?.isDeveloper) {
+        // Delete the custom resource
+        await plugin.uiplugin.remove();
+      }
+
+      // Find the app for this plugin using direct lookup (more efficient than findAll)
+      let pluginApp = null;
+
+      try {
+        const appId = `${ UI_PLUGIN_NAMESPACE }/${ plugin.name }`;
+
+        pluginApp = await this.$store.dispatch('management/find', {
+          type: CATALOG.APP,
+          id:   appId
+        });
+      } catch (e) {
+        // If the app cannot be found (e.g. already removed), proceed without error
+        pluginApp = null;
+      }
+
+      if (pluginApp) {
+        try {
+          await pluginApp.remove();
+        } catch (e) {
+          this.$store.dispatch('growl/error', {
+            title:   this.t('plugins.error.generic'),
+            message: e.message ? e.message : e,
+            timeout: 10000
+          }, { root: true });
+
+          this.busy = false;
+
+          return;
+        }
+
+        await this.$store.dispatch('management/findAll', { type: CATALOG.OPERATION });
+      }
+
+      // Close the dialog
+      this.closeDialog({ uninstalled: true, plugin });
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="plugin-install-dialog">
+    <h4 class="mt-10">
+      {{ t('plugins.install.alreadyInstalledTitle') }}
+    </h4>
+    <div class="mt-10 dialog-panel">
+      <div class="dialog-info">
+        <p>
+          {{ t('plugins.install.alreadyInstalledPrompt') }}
+        </p>
+      </div>
+      <div class="dialog-buttons">
+        <button
+          :disabled="busy"
+          class="btn role-secondary"
+          data-testid="uninstall-existing-ext-modal-cancel-btn"
+          @click="closeDialog(false)"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="uninstall"
+          :action-label="t('plugins.install.uninstallExisting')"
+          data-testid="uninstall-existing-ext-modal-uninstall-btn"
+          @click="uninstall()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '@shell/assets/styles/base/_mixins.scss';
+
+  .plugin-install-dialog {
+    @include extension-dialog;
+  }
+</style>

package/dialog/UninstallExtensionDialog.vue

@@ -65,7 +65,7 @@ export default {
 
       const plugin = this.plugin;
 
-      this.updateStatus(plugin.name, 'uninstall');
+      this.updateStatus(plugin.id, 'uninstall');
 
       // Delete the CR if this is a developer plugin (there is no Helm App, so need to remove the CRD ourselves)
       if (plugin.uiplugin?.isDeveloper) {
@@ -132,31 +132,9 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .plugin-install-dialog {
-    padding: 10px;
-
-    h4 {
-      font-weight: bold;
-    }
+  @import '@shell/assets/styles/base/_mixins.scss';
 
-    .dialog-panel {
-      display: flex;
-      flex-direction: column;
-      min-height: 100px;
-
-      .dialog-info {
-        flex: 1;
-      }
-    }
-
-    .dialog-buttons {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 10px;
-
-      > *:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
+  .plugin-install-dialog {
+    @include extension-dialog;
   }
 </style>

package/dialog/__tests__/UninstallExistingExtensionDialog.test.ts

@@ -0,0 +1,114 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import UninstallExistingExtensionDialog from '@shell/dialog/UninstallExistingExtensionDialog.vue';
+
+const t = (key: string): string => key;
+
+describe('component: UninstallExistingExtensionDialog', () => {
+  let wrapper: VueWrapper<any>;
+
+  const mountComponent = (propsData = {}) => {
+    const store = { dispatch: jest.fn().mockResolvedValue([]) };
+
+    const defaultProps = {
+      installedPlugin: {
+        id: 'test-plugin', name: 'test-plugin', label: 'Test Plugin'
+      },
+      updateStatus: jest.fn(),
+      closed:       jest.fn(),
+    };
+
+    return shallowMount(UninstallExistingExtensionDialog, {
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
+      global: {
+        mocks: {
+          $store:  store,
+          $router: { go: jest.fn() },
+          t,
+        },
+      }
+    });
+  };
+
+  describe('rendering', () => {
+    it('should render the dialog title', () => {
+      wrapper = mountComponent();
+
+      const title = wrapper.find('h4');
+
+      expect(title.text()).toBe('plugins.install.alreadyInstalledTitle');
+    });
+
+    it('should render the dialog prompt', () => {
+      wrapper = mountComponent();
+
+      const prompt = wrapper.find('.dialog-info p');
+
+      expect(prompt.text()).toBe('plugins.install.alreadyInstalledPrompt');
+    });
+
+    it('should render cancel button', () => {
+      wrapper = mountComponent();
+
+      const cancelBtn = wrapper.find('[data-testid="uninstall-existing-ext-modal-cancel-btn"]');
+
+      expect(cancelBtn.exists()).toBe(true);
+    });
+
+    it('should render uninstall button', () => {
+      wrapper = mountComponent();
+
+      const uninstallBtn = wrapper.find('[data-testid="uninstall-existing-ext-modal-uninstall-btn"]');
+
+      expect(uninstallBtn.exists()).toBe(true);
+    });
+  });
+
+  describe('closeDialog', () => {
+    it('should call closed callback and emit close event when cancel is clicked', async() => {
+      const closedFn = jest.fn();
+
+      wrapper = mountComponent({ closed: closedFn });
+
+      const cancelBtn = wrapper.find('[data-testid="uninstall-existing-ext-modal-cancel-btn"]');
+
+      await cancelBtn.trigger('click');
+
+      expect(closedFn).toHaveBeenCalledWith(false);
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+  });
+
+  describe('uninstall', () => {
+    it('should call updateStatus with uninstall action', async() => {
+      const updateStatusFn = jest.fn();
+      const installedPlugin = {
+        id: 'test-plugin', name: 'test-plugin', label: 'Test Plugin'
+      };
+
+      wrapper = mountComponent({ installedPlugin, updateStatus: updateStatusFn });
+
+      await wrapper.vm.uninstall();
+
+      expect(updateStatusFn).toHaveBeenCalledWith('test-plugin', 'uninstall');
+    });
+
+    it('should remove developer plugin CR if isDeveloper is true', async() => {
+      const removeFn = jest.fn().mockResolvedValue(undefined);
+      const installedPlugin = {
+        id:       'test-plugin',
+        name:     'test-plugin',
+        label:    'Test Plugin',
+        uiplugin: { isDeveloper: true, remove: removeFn }
+      };
+
+      wrapper = mountComponent({ installedPlugin });
+
+      await wrapper.vm.uninstall();
+
+      expect(removeFn).toHaveBeenCalledWith();
+    });
+  });
+});

package/edit/__tests__/fleet.cattle.io.gitrepo.test.ts

@@ -70,6 +70,7 @@ const initGitRepo = (props: any, value?: any) => {
   }, {
     getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
     dispatch:    jest.fn(),
+    rootState:   { $extension: { getPlugins: () => ({}) } },
     rootGetters: { 'i18n/t': jest.fn() },
   });