@rancher/shell 3.0.6 → 3.0.8-rc.1

package/dialog/AddonConfigConfirmationDialog.vue

@@ -1,6 +1,10 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
+import { mapGetters } from 'vuex';
+
+import { labelForAddon } from '@shell/utils/cluster';
+import { resourceNames } from '@shell/utils/string';
 
 export default {
   emits: ['close'],
@@ -17,11 +21,45 @@ export default {
     registerBackgroundClosing: {
       type:     Function,
       required: true
+    },
+    /**
+     * The names of the addons that have configuration conflicts.
+     */
+    addonNames: {
+      type:    Array,
+      default: () => []
+    },
+    /**
+     * The Kubernetes version the user is upgrading from.
+     */
+    previousKubeVersion: {
+      type:    String,
+      default: ''
+    },
+    /**
+     * The Kubernetes version the user is upgrading to.
+     */
+    newKubeVersion: {
+      type:    String,
+      default: ''
     }
   },
   created() {
     this.registerBackgroundClosing(this.closing);
   },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    formattedAddons() {
+      if (!this.addonNames || this.addonNames.length === 0) {
+        return '';
+      }
+
+      const translatedNames = this.addonNames.map((name) => labelForAddon(this.$store, name, true));
+
+      return resourceNames(translatedNames, null, this.t, false);
+    }
+  },
   methods: {
     continue(value) {
       if (this.resources[0]) {
@@ -59,7 +97,13 @@ export default {
 
     <template #body>
       <slot name="body">
-        {{ t('addonConfigConfirmation.body') }}
+        <span
+          v-clean-html="t('addonConfigConfirmation.body', {
+            addons: formattedAddons,
+            previousKubeVersion,
+            newKubeVersion
+          }, true)"
+        />
       </slot>
     </template>
 

package/dialog/InstallExtensionDialog.vue

@@ -3,12 +3,12 @@ import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { UI_PLUGIN_NAMESPACE, isChartVersionHigher } from '@shell/config/uiplugins';
 import Banner from '@components/Banner/Banner.vue';
 import { SETTING } from '@shell/config/settings';
-import { getPluginChartVersion, getPluginChartVersionLabel } from '@shell/utils/uiplugins';
+import { getPluginChartVersionLabel } from '@shell/utils/uiplugins';
 
-// Note: This dialog handles installation and update of a plugin
+// Note: This dialog handles installation, upgrade and downgrade of a plugin
 
 export default {
   emits: ['close'],
@@ -29,7 +29,14 @@ export default {
       required: true
     },
     /**
-     * The action to perform (install, update, rollback)
+     * The pre-selected version in the dropdown
+     */
+    initialVersion: {
+      type:    String,
+      default: null
+    },
+    /**
+     * The action to perform (install, upgrade, downgrade)
      */
     action: {
       type:     String,
@@ -63,33 +70,32 @@ export default {
   },
 
   async fetch() {
-    const chartVersion = getPluginChartVersion(this.plugin);
-
-    // Default to latest version on install (this is default on the plugin)
-    this.version = chartVersion;
-
-    if (this.action === 'update') {
-      this.currentVersion = chartVersion;
-
-      // Update to latest version, so take the first version
-      if (this.plugin?.installableVersions?.length > 0) {
-        this.version = this.plugin?.installableVersions?.[0]?.version;
-      }
-    } else if (this.action === 'rollback') {
-      // Find the newest version once we remove the current version
-      const versionNames = this.plugin.installableVersions.filter((v) => v.version !== chartVersion);
+    // Determine the currently installed version, if any
+    if (this.plugin.installed) {
+      this.currentVersion = this.plugin.installedVersion;
+    }
 
-      this.currentVersion = chartVersion;
+    // Determine the initial version to select in the dropdown
+    if (this.initialVersion) {
+      this.version = this.initialVersion;
+    } else if (this.action === 'upgrade') {
+      // Upgrade to the latest version, so take the first version
+      this.version = this.plugin?.installableVersions?.[0]?.version;
+    } else if (this.action === 'downgrade') {
+      const versions = this.plugin.installableVersions;
+      const currentIndex = versions.findIndex((v) => v.version === this.currentVersion);
 
-      if (versionNames.length > 0) {
-        this.version = versionNames[0].version;
+      if (currentIndex !== -1 && currentIndex < versions.length - 1) {
+        // Select the version just below the current version
+        this.version = versions[currentIndex + 1].version;
       }
+    } else {
+      // Default to the latest installable version for new installs
+      this.version = this.plugin?.installableVersions?.[0]?.version;
     }
 
-    // Make sure we have the version available
-    const versionChart = this.plugin?.installableVersions?.find((v) => v.version === this.version);
-
-    if (!versionChart) {
+    // Fallback if no version could be determined
+    if (!this.version) {
       this.version = this.plugin?.installableVersions?.[0]?.version;
     }
 
@@ -119,37 +125,39 @@ export default {
     },
 
     versionOptions() {
-      if (!this.plugin) {
+      if (!this.plugin?.installableVersions) {
         return [];
       }
 
-      // Don't allow update/rollback to current version
-      const versions = this.plugin?.installableVersions?.filter((v) => {
-        if (this.currentVersion) {
-          return v.version !== this.currentVersion;
-        }
-
-        return true;
-      });
+      // Don't allow upgrade/downgrade to current version by disabling the option
+      return this.plugin.installableVersions.map((v) => {
+        const isCurrent = v.version === this.currentVersion;
 
-      return versions.map((version) => {
         return {
-          label: getPluginChartVersionLabel(version),
-          value: version.version,
+          label:    getPluginChartVersionLabel(v) + (isCurrent ? ` (${ this.t('plugins.labels.current') })` : ''),
+          value:    v.version,
+          disabled: isCurrent,
         };
       });
     },
 
     buttonMode() {
-      if (this.action === 'rollback') {
-        return 'rollback';
+      if (this.action === 'install') {
+        return 'install';
       }
 
-      if (this.action === 'update') {
-        return 'update';
+      if (this.currentVersion && this.version) {
+        if (isChartVersionHigher(this.version, this.currentVersion)) {
+          return 'upgrade';
+        }
+
+        if (isChartVersionHigher(this.currentVersion, this.version)) {
+          return 'downgrade';
+        }
       }
 
-      return 'install';
+      // Fallback for safety, though should not be reached if version is selected
+      return this.action;
     },
 
     chartVersionLoadsWithoutAuth() {
@@ -158,6 +166,23 @@ export default {
 
     returnFocusSelector() {
       return `[data-testid="extension-card-${ this.action }-btn-${ this.plugin?.name }"]`;
+    },
+
+    buttonIcon() {
+      if (this.busy) {
+        return '';
+      }
+
+      switch (this.buttonMode) {
+      case 'install':
+        return 'icon-plus';
+      case 'upgrade':
+        return 'icon-upgrade-alt';
+      case 'downgrade':
+        return 'icon-downgrade-alt';
+      default:
+        return '';
+      }
     }
   },
 
@@ -295,12 +320,12 @@ export default {
 <template>
   <div class="plugin-install-dialog">
     <h4 class="mt-10">
-      {{ t(`plugins.${ action }.title`, { name: plugin?.label }) }}
+      {{ t(`plugins.${ buttonMode }.title`, { name: `"${plugin?.label}"` }, true) }}
     </h4>
     <div class="custom mt-10">
       <div class="dialog-panel">
         <p>
-          {{ t(`plugins.${ action }.prompt`) }}
+          {{ t(`plugins.${ buttonMode }.prompt`) }}
         </p>
         <Banner
           v-if="chartVersionLoadsWithoutAuth"
@@ -335,6 +360,7 @@ export default {
         </button>
         <AsyncButton
           :mode="buttonMode"
+          :icon="buttonIcon"
           data-testid="install-ext-modal-install-btn"
           @click="install"
         />

package/dialog/UninstallExtensionDialog.vue

@@ -103,7 +103,7 @@ export default {
 <template>
   <div class="plugin-install-dialog">
     <h4 class="mt-10">
-      {{ t('plugins.uninstall.title', { name: plugin?.label }) }}
+      {{ t('plugins.uninstall.title', { name: `"${plugin?.label}"` }, true) }}
     </h4>
     <div class="mt-10 dialog-panel">
       <div class="dialog-info">
@@ -122,6 +122,7 @@ export default {
         </button>
         <AsyncButton
           mode="uninstall"
+          :icon="busy ? '' : 'icon-delete'"
           data-testid="uninstall-ext-modal-uninstall-btn"
           @click="uninstall()"
         />

package/dialog/__tests__/InstallExtensionDialog.test.ts

@@ -0,0 +1,111 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import InstallExtensionDialog from '@shell/dialog/InstallExtensionDialog.vue';
+
+jest.mock('@shell/config/uiplugins', () => ({
+  ...jest.requireActual('@shell/config/uiplugins'),
+  isChartVersionHigher: jest.fn((v1: string, v2: string) => v1 > v2),
+}));
+
+const t = (key: string): string => key;
+
+describe('component: InstallExtensionDialog', () => {
+  let wrapper: VueWrapper<any>;
+
+  const mountComponent = (propsData = {}) => {
+    const store = { dispatch: () => Promise.resolve() };
+
+    const defaultProps = {
+      plugin:       { installableVersions: [] },
+      action:       'install',
+      updateStatus: jest.fn(),
+      closed:       jest.fn(),
+    };
+
+    return shallowMount(InstallExtensionDialog, {
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
+      global: {
+        mocks: {
+          $store: store,
+          t,
+        },
+      }
+    });
+  };
+
+  describe('fetch', () => {
+    it('should set currentVersion if plugin is installed', async() => {
+      wrapper = mountComponent({ plugin: { installed: true, installedVersion: '1.0.0' } });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.currentVersion).toBe('1.0.0');
+    });
+
+    it('should set version from initialVersion if provided', async() => {
+      wrapper = mountComponent({ initialVersion: '1.2.3', plugin: { installed: false } });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.version).toBe('1.2.3');
+    });
+
+    it('should set version to latest for upgrade action', async() => {
+      const plugin = { installableVersions: [{ version: '1.1.0' }, { version: '1.0.0' }] };
+
+      wrapper = mountComponent({ plugin, action: 'upgrade' });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.version).toBe('1.1.0');
+    });
+
+    it('should set version to next oldest for downgrade action', async() => {
+      const plugin = {
+        installed:           true,
+        installedVersion:    '1.1.0',
+        installableVersions: [{ version: '1.1.0' }, { version: '1.0.0' }]
+      };
+
+      wrapper = mountComponent({ plugin, action: 'downgrade' });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+      expect(wrapper.vm.version).toBe('1.0.0');
+    });
+  });
+
+  describe('versionOptions', () => {
+    it('should include and disable the current version', () => {
+      const plugin = {
+        installableVersions: [
+          { version: '1.1.0' },
+          { version: '1.0.0' },
+        ]
+      };
+
+      wrapper = mountComponent({ plugin });
+      wrapper.vm.currentVersion = '1.0.0';
+
+      const options = wrapper.vm.versionOptions;
+      const currentOption = options.find((o: any) => o.value === '1.0.0');
+
+      expect(currentOption).toBeDefined();
+      expect(currentOption.disabled).toBe(true);
+      expect(currentOption.label).toContain('(plugins.labels.current)');
+    });
+  });
+
+  describe('buttonMode', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ action: 'upgrade' });
+      wrapper.vm.currentVersion = '1.0.0';
+    });
+
+    it('should be "upgrade" if selected version is higher', async() => {
+      wrapper.vm.version = '1.1.0';
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.buttonMode).toBe('upgrade');
+    });
+
+    it('should be "downgrade" if selected version is lower', async() => {
+      wrapper.vm.version = '0.9.0';
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.buttonMode).toBe('downgrade');
+    });
+  });
+});

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

@@ -2,18 +2,22 @@ import { mount } from '@vue/test-utils';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 import HelmOp from '@shell/models/fleet.cattle.io.helmop';
 import HelmOpComponent from '@shell/edit/fleet.cattle.io.helmop.vue';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
 
 const mockStore = {
   dispatch: jest.fn(),
   commit:   jest.fn(),
   getters:  {
-    'i18n/t':                  (text: string) => text,
-    'i18n/exists':             jest.fn(),
-    t:                         (text: string) => text,
-    currentStore:              () => 'current_store',
-    'current_store/schemaFor': jest.fn(),
-    'current_store/all':       jest.fn(),
-    workspace:                 'test',
+    'i18n/t':                       (text: string) => text,
+    'i18n/exists':                  jest.fn(),
+    t:                              (text: string) => text,
+    currentStore:                   () => 'current_store',
+    'current_store/schemaFor':      jest.fn(),
+    'current_store/all':            jest.fn(),
+    workspace:                      'test',
+    'management/paginationEnabled': () => false,
+    'management/all':               () => [],
   },
   rootGetters: { 'i18n/t': jest.fn() },
 };
@@ -63,19 +67,22 @@ const mockHelmOp = {
   currentRoute: () => {},
 };
 
-const initHelmOp = (props: any, value?: any) => {
-  const initValue = new HelmOp({
+const initHelmOp = (props: any, options = {}) => {
+  const value = new HelmOp({
     ...mockHelmOp,
-    ...(value || {})
+    ...options
   }, {
     getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
     dispatch:    jest.fn(),
     rootGetters: { 'i18n/t': jest.fn() },
   });
 
+  value.applyDefaults = () => {};
+  value.metadata = { namespace: '' };
+
   return {
     props: {
-      value: initValue,
+      value,
       ...props
     },
     computed: mockComputed,
@@ -221,4 +228,38 @@ describe.each([
 
     expect(pollingIntervalInput.value).toBe(displayValue);
   });
+
+  it('should update downstreamResources with new Secrets when FleetSecretSelector emits update event', async() => {
+    const wrapper = mount(HelmOpComponent, initHelmOp({ realMode: mode }));
+
+    const fleetConfigMapSelector = wrapper.findComponent(FleetConfigMapSelector);
+    const fleetSecretSelector = wrapper.findComponent(FleetSecretSelector);
+
+    expect(fleetSecretSelector.exists()).toBe(true);
+    expect(fleetConfigMapSelector.exists()).toBe(true);
+
+    await fleetSecretSelector.vm.$emit('update:value', []);
+    await fleetConfigMapSelector.vm.$emit('update:value', []);
+
+    await fleetSecretSelector.vm.$emit('update:value', ['secret2', 'secret3']);
+
+    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
+  });
+
+  it('should update downstreamResources with new ConfigMaps when FleetConfigMapSelector emits update event', async() => {
+    const wrapper = mount(HelmOpComponent, initHelmOp({ realMode: mode }));
+
+    const fleetConfigMapSelector = wrapper.findComponent(FleetConfigMapSelector);
+    const fleetSecretSelector = wrapper.findComponent(FleetSecretSelector);
+
+    expect(fleetSecretSelector.exists()).toBe(true);
+    expect(fleetConfigMapSelector.exists()).toBe(true);
+
+    await fleetSecretSelector.vm.$emit('update:value', []);
+    await fleetConfigMapSelector.vm.$emit('update:value', []);
+
+    await fleetConfigMapSelector.vm.$emit('update:value', ['configMap2', 'configMap3']);
+
+    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
+  });
 });

package/edit/auth/AuthProviderWarningBanners.vue

@@ -28,7 +28,20 @@ export default defineComponent({
       color="warning"
       data-testid="auth-provider-admin-permissions-warning-banner"
     >
-      <span v-clean-html="t('authConfig.associatedWarning', tArgs, true)" />
+      <span class="banner-content">
+        <span v-clean-html="t('authConfig.associatedWarning', tArgs, true)" />
+        <slot name="additional-warning">
+          <!--Empty slot content-->
+        </slot>
+      </span>
     </Banner>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.banner-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

package/edit/auth/github-app-steps.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import InfoBox from '@shell/components/InfoBox';
+import CopyToClipboard from '@shell/components/CopyToClipboard';
+
+type TArgs = {
+  baseUrl: string;
+  serverUrl: string;
+  provider: string;
+  username: string;
+}
+
+defineProps<{
+  name: string;
+  tArgs: TArgs;
+}>();
+
+</script>
+
+<template>
+  <InfoBox
+    :step="1"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.2`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.3`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.4`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="2"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li>
+        {{ t(`authConfig.${name}.form.instruction`, tArgs, true) }}
+        <ul class="mt-10">
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.app.label`) }}
+            </b>:
+            <span v-clean-html="t(`authConfig.${name}.form.app.value`, tArgs, true)" />
+          </li>
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.homepage.label`) }}
+            </b>: {{ tArgs.serverUrl }}
+            <CopyToClipboard
+              label-as="tooltip"
+              :text="tArgs.serverUrl"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.description.label`) }}
+            </b>:
+            <span v-clean-html="t(`authConfig.${name}.form.description.value`, tArgs, true)" />
+          </li>
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.callback.label`) }}
+            </b>:
+            {{ t(`authConfig.${name}.form.callback.value`, tArgs, true) }}
+            <CopyToClipboard
+              :text="t(`authConfig.${name}.form.callback.value`, tArgs, true)"
+              label-as="tooltip"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+        </ul>
+      </li>
+      <li>
+        {{ t(`authConfig.${name}.form.create`, tArgs, true) }}
+      </li>
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="3"
+    class="mb-20"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.2`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.3`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+</template>
+
+<style lang="scss" scoped>
+  .step-list li:not(:last-child) {
+    margin-bottom: 8px;
+  }
+</style>

package/edit/auth/github-steps.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import InfoBox from '@shell/components/InfoBox';
+import CopyToClipboard from '@shell/components/CopyToClipboard';
+
+type TArgs = {
+  baseUrl: string;
+  serverUrl: string;
+  provider: string;
+  username: string;
+}
+
+defineProps<{
+  name: string;
+  tArgs: TArgs;
+}>();
+
+</script>
+
+<template>
+  <InfoBox
+    :step="1"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.2`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.3`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="2"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li>
+        {{ t(`authConfig.${name}.form.instruction`, tArgs, true) }}
+        <ul class="mt-10">
+          <li><b>{{ t(`authConfig.${name}.form.app.label`) }}</b>: <span v-clean-html="t(`authConfig.${name}.form.app.value`, tArgs, true)" /></li>
+          <li>
+            <b>{{ t(`authConfig.${name}.form.homepage.label`) }}</b>: {{ tArgs.serverUrl }} <CopyToClipboard
+              label-as="tooltip"
+              :text="tArgs.serverUrl"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+          <li><b>{{ t(`authConfig.${name}.form.description.label`) }}</b>: <span v-clean-html="t(`authConfig.${name}.form.description.value`, tArgs, true)" /></li>
+          <li>
+            <b>{{ t(`authConfig.${name}.form.callback.label`) }}</b>: {{ tArgs.serverUrl }} <CopyToClipboard
+              :text="tArgs.serverUrl"
+              label-as="tooltip"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="3"
+    class="mb-20"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.2`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+</template>
+
+<style lang="scss" scoped>
+  .step-list li:not(:last-child) {
+    margin-bottom: 8px;
+  }
+</style>