@rancher/shell 3.0.10 → 3.0.12-rc.1

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.oidcclient.vue

@@ -9,6 +9,7 @@ import DateComponent from '@shell/components/formatter/Date.vue';
 import { RcItemCard } from '@components/RcItemCard';
 import ActionMenu, { type ActionMenuSelection } from '@shell/components/ActionMenuShell.vue';
 import { Banner } from '@components/Banner';
+import keySvg from '~shell/assets/images/key.svg';
 
 type SecretActionType = 'create-secret' | 'regen-secret' | 'remove-secret'
 interface ClientSecretData { createdAt: string, lastUsedAt: string, lastFiveCharacters: string }
@@ -228,7 +229,7 @@ export default defineComponent({
           clientSecrets.push({
             id:                 oidcSecretDataKey,
             header:             { title: { text: oidcSecretDataKey } },
-            image:              { src: require('~shell/assets/images/key.svg') },
+            image:              { src: keySvg },
             createdAt,
             lastFiveCharacters: oidcSecretData.lastFiveCharacters,
             lastUsedAt,

package/detail/node.vue

@@ -234,6 +234,7 @@ export default {
         :resource-name="t('node.detail.glance.consumptionGauge.pods')"
         :capacity="value.podCapacity"
         :used="value.podConsumed"
+        :used-label="t('node.detail.glance.consumptionGauge.running')"
       />
     </div>
     <div class="spacer" />

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() },
   });
 

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import CreateEditView from '@shell/mixins/create-edit-view';
+import AsyncButton from '@shell/components/AsyncButton.vue';
 import Footer from '@shell/components/form/Footer';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
@@ -16,6 +17,7 @@ import { getVersionData } from '@shell/config/version';
 import { RcItemCard } from '@components/RcItemCard';
 import { _CREATE, _EDIT, TARGET, _VIEW } from '@shell/config/query-params';
 import { RcIconType } from '@components/RcIcon/types';
+import { requireAsset } from '@shell/utils/require-asset';
 
 export default {
   name: 'CruCatalogRepo',
@@ -23,6 +25,7 @@ export default {
   emits: ['input'],
 
   components: {
+    AsyncButton,
     Footer,
     LabeledInput,
     NameNsDescription,
@@ -64,7 +67,7 @@ export default {
       {
         id:      CLUSTER_REPO_TYPES.OCI_URL,
         header:  { title: { key: 'catalog.repo.target.oci.title' } },
-        image:   { src: require('@shell/assets/images/providers/oci-open-containers.svg'), alt: { key: 'catalog.repo.target.oci.title' } },
+        image:   { src: requireAsset('@shell/assets/images/providers/oci-open-containers.svg'), alt: { key: 'catalog.repo.target.oci.title' } },
         content: { key: 'catalog.repo.target.oci.description' },
       },
     ];
@@ -74,7 +77,7 @@ export default {
       clusterRepoTargets.push({
         id:      CLUSTER_REPO_TYPES.SUSE_APP_COLLECTION,
         header:  { title: { key: 'catalog.repo.target.suseAppCollection.title' } },
-        image:   { src: require('@shell/assets/images/content/suse.svg'), alt: { key: 'catalog.repo.target.suseAppCollection.title' } },
+        image:   { src: requireAsset('@shell/assets/images/content/suse.svg'), alt: { key: 'catalog.repo.target.suseAppCollection.title' } },
         content: { key: 'catalog.repo.target.suseAppCollection.description' },
       });
     }
@@ -90,6 +93,7 @@ export default {
       ociMaxRetries:       this.value.spec.exponentialBackOffValues?.maxRetries,
       getVersionData,
       isView:              this.mode === _VIEW,
+      isCreate:            this.mode === _CREATE,
       clusterRepoTargets,
       previousName:        '',
       previousDescription: '',
@@ -450,7 +454,17 @@ export default {
       :errors="errors"
       @save="save"
       @done="done"
-    />
+    >
+      <template
+        v-if="isCreate"
+        #save
+      >
+        <AsyncButton
+          :action-label="t('catalog.repo.add')"
+          @click="save"
+        />
+      </template>
+    </Footer>
   </form>
 </template>
 

package/edit/cloudcredential.vue

@@ -3,6 +3,7 @@ import { SECRET_TYPES as TYPES } from '@shell/config/secret';
 import { MANAGEMENT, NORMAN, SCHEMA, DEFAULT_WORKSPACE } from '@shell/config/types';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
+import { requireAsset } from '@shell/utils/require-asset';
 import CruResource from '@shell/components/CruResource';
 import { _CREATE, _EDIT } from '@shell/config/query-params';
 import Loading from '@shell/components/Loading';
@@ -177,7 +178,7 @@ export default {
 
         if (!bannerImage) {
           try {
-            bannerImage = require(`~shell/assets/images/providers/${ id }.svg`);
+            bannerImage = requireAsset(`~shell/assets/images/providers/${ id }.svg`);
           } catch (e) {
             bannerImage = null;
             bannerAbbrv = this.initialDisplayFor(id);

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -13,6 +13,11 @@ import ButtonDropdown from '@shell/components/ButtonDropdown';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import FormValidation from '@shell/mixins/form-validation';
 import { fetchAlertManagerConfigSpecs } from '@shell/utils/alertmanagerconfig';
+import slackLogo from '@shell/assets/images/vendor/slack.svg';
+import emailLogo from '@shell/assets/images/vendor/email.svg';
+import pagerdutyLogo from '@shell/assets/images/vendor/pagerduty.svg';
+import webhookLogo from '@shell/assets/images/vendor/webhook.svg';
+import customLogo from '@shell/assets/images/vendor/custom.svg';
 
 // i18n-uses monitoringReceiver.slack.*, monitoringReceiver.email.*, monitoringReceiver.pagerduty.*
 // i18n-uses monitoringReceiver.opsgenie.*, monitoringReceiver.webhook.*, monitoringReceiver.custom.*
@@ -23,14 +28,14 @@ export const RECEIVERS_TYPES = [
     title: 'monitoringReceiver.slack.title',
     info:  'monitoringReceiver.slack.info',
     key:   'slackConfigs',
-    logo:  require(`@shell/assets/images/vendor/slack.svg`)
+    logo:  slackLogo
   },
   {
     name:  'email',
     label: 'monitoringReceiver.email.label',
     title: 'monitoringReceiver.email.title',
     key:   'emailConfigs',
-    logo:  require(`@shell/assets/images/vendor/email.svg`)
+    logo:  emailLogo
   },
   {
     name:  'pagerduty',
@@ -38,21 +43,21 @@ export const RECEIVERS_TYPES = [
     title: 'monitoringReceiver.pagerduty.title',
     info:  'monitoringReceiver.pagerduty.info',
     key:   'pagerdutyConfigs',
-    logo:  require(`@shell/assets/images/vendor/pagerduty.svg`)
+    logo:  pagerdutyLogo
   },
   {
     name:  'opsgenie',
     label: 'monitoringReceiver.opsgenie.label',
     title: 'monitoringReceiver.opsgenie.title',
     key:   'opsgenieConfigs',
-    logo:  require(`@shell/assets/images/vendor/email.svg`)
+    logo:  emailLogo
   },
   {
     name:  'webhook',
     label: 'monitoringReceiver.webhook.label',
     title: 'monitoringReceiver.webhook.title',
     key:   'webhookConfigs',
-    logo:  require(`@shell/assets/images/vendor/webhook.svg`),
+    logo:  webhookLogo,
   },
   {
     name:  'custom',
@@ -60,7 +65,7 @@ export const RECEIVERS_TYPES = [
     title: 'monitoringReceiver.custom.title',
     info:  'monitoringReceiver.custom.info',
     key:   'webhookConfigs',
-    logo:  require(`@shell/assets/images/vendor/custom.svg`)
+    logo:  customLogo
   },
 ];