@rancher/shell 3.0.7 → 3.0.8-rc.10

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/DeveloperLoadExtensionDialog.vue

@@ -4,6 +4,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { UI_PLUGIN } from '@shell/config/types';
 import { UI_PLUGIN_CHART_ANNOTATIONS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { DEVELOPER_LOAD_NAME_SUFFIX } from '@shell/core/extension-manager-impl';
 
 export default {
   emits: ['close'],
@@ -101,8 +102,16 @@ export default {
       const parts = name.split('-');
 
       if (parts.length >= 2) {
-        version = parts.pop();
-        crdName = parts.join('-');
+        // fixing the name-version separation, especially in RC versions
+        // like: elemental-3.0.1-rc.1
+        // on capturing version it must be "digit + dot + digit" + rest of string
+        const regex = /^(?<name>.+?)-(?<version>\d+\.\d+.*)$/;
+        const match = name.match(regex);
+
+        if (match && match.groups) {
+          version = match.groups.version;
+          crdName = match.groups.name;
+        }
       }
 
       if (this.persist) {
@@ -114,7 +123,7 @@ export default {
           },
           spec: {
             plugin: {
-              name:     crdName,
+              name:     `${ crdName }${ DEVELOPER_LOAD_NAME_SUFFIX }`,
               version,
               endpoint: url,
               noCache:  true,

package/dialog/RollbackWorkloadDialog.vue

@@ -165,12 +165,9 @@ export default {
       return option.label;
     },
     sizeDialog() {
-      const dialogs = document.getElementsByClassName('modal-container');
-      const width = this.showDiff ? '85%' : '600px';
+      const modalWidth = this.showDiff ? '85%' : '600px';
 
-      if (dialogs.length === 1) {
-        dialogs[0].style.setProperty('width', width);
-      }
+      this.$store.commit('action-menu/updateModalData', [{ key: 'modalWidth', value: modalWidth }]);
     },
     sanitizeYaml(obj, path = '') {
       const res = {};

package/directives/ui-context.ts

@@ -0,0 +1,103 @@
+import { get, isEmpty } from '@shell/utils/object';
+import { generateRandomAlphaString } from '@shell/utils/string';
+
+interface Context {
+  tag: string;
+  path?: string;
+  value?: any;
+  hookable?: boolean;
+  description?: string;
+  icon?: string;
+  store?: any;
+}
+
+function isValid(context: Context ): context is Context {
+  return (
+    context !== null &&
+    typeof context === 'object' &&
+    (
+      (context.path === undefined && context.value === undefined) || // both undefined is allowed
+      (typeof context.path === 'string' && context.path?.length > 0 && context.value === undefined) || // path defined, value undefined
+      (context.value !== undefined && context.path === undefined) // value defined, path undefined
+    ) &&
+    typeof context.tag === 'string' && context.tag?.length > 0 &&
+    (typeof context.description === 'string' || context.description === undefined)
+  );
+}
+
+/** UI Context Directive
+ *
+ * Usage:
+ *   <div v-ui-context="{ tag: 'example-tag', path: 'some.path.in.component', description: 'An example context' }"></div>
+ *   or
+ *   <div v-ui-context="{ tag: 'example-tag', value: 'Direct Value', description: 'An example context with direct value' }"></div>
+ *   or
+ *   <div v-ui-context="{ tag: 'example-tag', description: 'An example context with text content' }">Text Content Value</div>
+ *
+ * The directive will register the context on mount and unregister it before unmounting.
+ *
+ * The context object must have a 'tag' and either a 'path' or a 'value'.
+ * If both 'path' and 'value' are undefined, the element's textContent will be used as the value.
+ *
+ * !IMPORTANT:
+ *   The value object will be reactive only when using 'path'.
+ *   Using 'value' or textContent will not be reactive.
+ *
+*/
+export default {
+  async mounted(el: any, binding: { value: Context, instance: any }) {
+    const context: Context = binding.value;
+
+    if (!context || isEmpty(context)) {
+      return;
+    }
+
+    if (!isValid(context)) {
+      // eslint-disable-next-line no-console
+      console.warn(`[ui-context] invalid value: ${ JSON.stringify({ tag: (context as Context).tag, description: (context as Context).description }) }`);
+
+      return;
+    }
+
+    if (context.path === undefined && context.value === undefined) {
+      // path and value undefined, use textContent as value
+      context.value = el.textContent;
+    } else if (context.value === undefined) {
+      // Use context.value directly if provided, otherwise resolve it from the component instance using context.path
+      const value = get(binding.instance, context.path);
+
+      if (value === undefined) {
+        // eslint-disable-next-line no-console
+        console.warn(`[ui-context] path "${ context.path }" is undefined on the component instance`);
+
+        return;
+      }
+
+      context.value = value;
+    }
+
+    delete context.path;
+
+    if (context.hookable) {
+      const hookId = generateRandomAlphaString(12);
+
+      el.setAttribute('ux-context-hook-id', hookId);
+      (context as any).hookId = hookId;
+    }
+
+    const store = context.store || binding.instance.$store || binding.instance.store;
+
+    if (store) {
+      delete context.store;
+      const id = await store.dispatch('ui-context/add', context);
+
+      el._uiContextRemove = async() => await store.dispatch('ui-context/remove', id);
+    }
+  },
+
+  async beforeUnmount(el: any) {
+    if (el._uiContextRemove) {
+      await el._uiContextRemove();
+    }
+  }
+};

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.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.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/__tests__/oidc.test.ts

@@ -221,5 +221,31 @@ describe('oidc.vue', () => {
       expect(issuer).toBe('');
       expect(endpoint).toBe('');
     });
+
+    it('custom claims fields should not appear in UI if Amazon cognito', async() => {
+      wrapper.vm.model.id = 'cognito';
+
+      const nameClaim = wrapper.find('[data-testid="input-name-claim"]');
+      const groupsClaim = wrapper.find('[data-testid="input-groups-claim"]');
+      const emailClaim = wrapper.find('[data-testid="input-email-claim"]');
+
+      expect(nameClaim.exists()).toBe(false);
+      expect(groupsClaim.exists()).toBe(false);
+      expect(emailClaim.exists()).toBe(false);
+    });
+
+    it('custom claims fields should appear in UI if genericoidc', async() => {
+      wrapper.vm.model.id = 'genericoidc';
+      wrapper.vm.addCustomClaims = true;
+      await nextTick();
+
+      const nameClaim = wrapper.find('[data-testid="input-name-claim"]');
+      const groupsClaim = wrapper.find('[data-testid="input-groups-claim"]');
+      const emailClaim = wrapper.find('[data-testid="input-email-claim"]');
+
+      expect(nameClaim.exists()).toBe(true);
+      expect(groupsClaim.exists()).toBe(true);
+      expect(emailClaim.exists()).toBe(true);
+    });
   });
 });

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>