@rancher/shell 3.0.9-rc.3 → 3.0.9-rc.5

package/components/Tabbed/Tab.vue

@@ -44,6 +44,10 @@ export default {
       type:    Boolean,
       default: false
     },
+    errorIconTooltip: {
+      type:    String,
+      default: ''
+    },
     badge: {
       default:  0,
       required: false,

package/components/Tabbed/index.vue

@@ -359,7 +359,7 @@ export default {
           >{{ tab.badge }}</span>
           <i
             v-if="hasErrorIcon(tab)"
-            v-clean-tooltip="t('validation.tab')"
+            v-clean-tooltip="tab.errorIconTooltip || t('validation.tab')"
             class="conditions-alert-icon icon-error"
           />
         </a>
@@ -417,11 +417,13 @@ export default {
         :name="tab.name"
         :label="tab.label"
         :label-key="tab.labelKey"
+        :label-icon="tab.labelIcon"
         :weight="tab.weight"
         :tooltip="tab.tooltip"
         :show-header="tab.showHeader"
         :display-alert-icon="tab.displayAlertIcon"
         :error="tab.error"
+        :error-icon-tooltip="tab.errorIconTooltip"
         :badge="tab.badge"
       >
         <component
@@ -504,6 +506,7 @@ export default {
     .conditions-alert-icon {
       color: var(--error);
       padding-left: 4px;
+      margin-left: auto;
     }
 
     &:last-child {

package/components/__tests__/ProjectRow.test.ts

@@ -143,4 +143,64 @@ describe('component: ProjectRow.vue', () => {
     expect(wrapper.vm.isCustom).toBe(true);
     expect(wrapper.vm.customType).toBe('requests.nvidia.com/gpu');
   });
+
+  it('should emit update:resource-identifier when updateCustomType is called', () => {
+    const wrapper: any = shallowMount(ProjectRow, {
+      props: {
+        ...defaultMountOptions.props,
+        type: TYPES.EXTENDED,
+      }
+    });
+
+    wrapper.vm.updateCustomType('my-custom-resource');
+
+    expect(wrapper.emitted('update:resource-identifier')).toBeTruthy();
+    expect(wrapper.emitted('update:resource-identifier')[0]).toStrictEqual([{
+      type:       TYPES.EXTENDED,
+      customType: 'my-custom-resource',
+      index:      0
+    }]);
+  });
+
+  it('should not delete resource limits if there are duplicate keys in localTypeValues', () => {
+    const value = {
+      spec: {
+        resourceQuota:                 { limit: { extended: { 'my-resource': '10' } } },
+        namespaceDefaultResourceQuota: { limit: { extended: { 'my-resource': '5' } } }
+      }
+    };
+    const wrapper: any = shallowMount(ProjectRow, {
+      props: {
+        ...defaultMountOptions.props,
+        value,
+        typeValues: ['extended.my-resource', 'extended.my-resource']
+      }
+    });
+
+    wrapper.vm.deleteResourceLimits('my-resource', true);
+
+    expect(value.spec.resourceQuota.limit.extended['my-resource']).toStrictEqual('10');
+    expect(value.spec.namespaceDefaultResourceQuota.limit.extended['my-resource']).toStrictEqual('5');
+  });
+
+  it('should delete resource limits if there is only one key in localTypeValues', () => {
+    const value = {
+      spec: {
+        resourceQuota:                 { limit: { extended: { 'my-resource': '10' } } },
+        namespaceDefaultResourceQuota: { limit: { extended: { 'my-resource': '5' } } }
+      }
+    };
+    const wrapper: any = shallowMount(ProjectRow, {
+      props: {
+        ...defaultMountOptions.props,
+        value,
+        typeValues: ['extended.my-resource']
+      }
+    });
+
+    wrapper.vm.deleteResourceLimits('my-resource', true);
+
+    expect(value.spec.resourceQuota.limit.extended['my-resource']).toBeUndefined();
+    expect(value.spec.namespaceDefaultResourceQuota.limit.extended['my-resource']).toBeUndefined();
+  });
 });

package/components/form/ChangePassword.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { Banner } from '@components/Banner';
 import { Checkbox } from '@components/Form/Checkbox';
 import Password from '@shell/components/form/Password';
-import { NORMAN } from '@shell/config/types';
+import { NORMAN, EXT } from '@shell/config/types';
 import { _CREATE, _EDIT } from '@shell/config/query-params';
 
 // Component handles three use cases
@@ -21,27 +21,22 @@ export default {
       type:    String,
       default: null
     },
+    user: {
+      type:     Object,
+      default:  null,
+      required: true
+    },
     mustChangePassword: {
       type:    Boolean,
       default: false
     }
   },
   async fetch() {
-    if (this.isChange) {
-      // Fetch the username for hidden input fields. The value itself is not needed if create or changing another user's password
-      const users = await this.$store.dispatch('rancher/findAll', {
-        type: NORMAN.USER,
-        opt:  { url: '/v3/users', filter: { me: true } }
-      });
-      const user = users?.[0];
-
-      this.username = user?.username;
-    }
-    this.userChangeOnLogin = this.mustChangePassword;
+    this.passwordChangeRequest = await this.$store.dispatch('management/create', { type: EXT.PASSWORD_CHANGE_REQUESTS });
   },
-  data(ctx) {
+  data() {
     return {
-      username:                   '',
+      passwordChangeRequest:      undefined,
       errorMessages:              [],
       pCanShowMismatchedPassword: false,
       pIsRandomGenerated:         false,
@@ -58,6 +53,18 @@ export default {
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
+    userId() {
+      return this.user?.id;
+    },
+
+    username() {
+      return this.user?.username;
+    },
+
+    canChangePassword() {
+      return !!this.passwordChangeRequest?.canChangePassword;
+    },
+
     isRandomGenerated: {
       get() {
         return this.pIsRandomGenerated;
@@ -227,37 +234,36 @@ export default {
       });
     },
 
-    async save(user) {
+    async save() {
       if (this.isChange) {
-        await this.changePassword();
+        await this.changePassword('change');
         if (this.form.deleteKeys) {
           await this.deleteKeys();
         }
       } else if (this.isEdit) {
-        return this.setPassword(user);
+        return this.changePassword('set');
       }
     },
 
-    async setPassword(user) {
-      // Error handling is catered for by caller
-      await this.$store.dispatch('rancher/resourceAction', {
-        type:       NORMAN.USER,
-        actionName: 'setpassword',
-        resource:   user,
-        body:       { newPassword: this.isRandomGenerated ? this.form.genP : this.form.newP },
-      });
-    },
+    async changePassword(mode) {
+      if (!this.canChangePassword) {
+        this.errorMessages = [this.t('changePassword.errors.cannotChange')];
+        throw new Error(this.t('changePassword.errors.cannotChange'));
+      }
+
+      const spec = {
+        newPassword: this.isRandomGenerated ? this.form.genP : this.form.newP,
+        userID:      this.userId
+      };
+
+      if (mode === 'change') {
+        spec.currentPassword = this.form.currentP;
+      }
 
-    async changePassword() {
       try {
-        await this.$store.dispatch('rancher/collectionAction', {
-          type:       NORMAN.USER,
-          actionName: 'changepassword',
-          body:       {
-            currentPassword: this.form.currentP,
-            newPassword:     this.isRandomGenerated ? this.form.genP : this.form.newP
-          },
-        });
+        this.passwordChangeRequest.spec = spec;
+
+        await this.passwordChangeRequest.save();
       } catch (err) {
         this.errorMessages = [err.message || this.t('changePassword.errors.failedToChange')];
         throw err;

package/components/form/ResourceQuota/Project.vue

@@ -5,7 +5,11 @@ import { QUOTA_COMPUTED, TYPES } from './shared';
 import Banner from '@components/Banner/Banner.vue';
 
 export default {
-  emits: ['remove', 'input'],
+  emits: [
+    'remove',
+    'input',
+    'validationChanged',
+  ],
 
   components: {
     ArrayList,
@@ -60,6 +64,34 @@ export default {
       const { index, type } = event;
 
       this.typeValues[index] = type;
+
+      this.validateTypes();
+    },
+    updateResourceIdentifier({ type, customType, index }) {
+      if (type.startsWith(TYPES.EXTENDED)) {
+        this.typeValues[index] = `extended.${ customType }`;
+      }
+
+      this.validateTypes();
+    },
+    validateTypes(isValid = true) {
+      if (!isValid) {
+        this.$emit('validationChanged', false);
+
+        return;
+      }
+
+      const hasMissingExtendedValue = this.typeValues.some((typeValue) => {
+        if (!typeValue.startsWith(TYPES.EXTENDED)) {
+          return false;
+        }
+
+        const [, resourceIdentifier] = typeValue.split('.');
+
+        return !resourceIdentifier;
+      });
+
+      this.$emit('validationChanged', !hasMissingExtendedValue);
     },
     remainingTypes(currentType) {
       return this.mappedTypes
@@ -72,7 +104,13 @@ export default {
         });
     },
     emitRemove(data) {
+      this.typeValues = this.typeValues.filter((_typeValue, index) => {
+        return index !== data.index;
+      });
+
       this.$emit('remove', data.row?.value);
+
+      this.validateTypes();
     }
   },
 };
@@ -122,6 +160,7 @@ export default {
       :add-allowed="remainingTypes().length > 0"
       :mode="mode"
       @remove="emitRemove"
+      @add="validateTypes(false)"
     >
       <template #columns="props">
         <Row
@@ -129,9 +168,11 @@ export default {
           :mode="mode"
           :types="remainingTypes(typeValues[props.i])"
           :type="typeValues[props.i]"
+          :type-values="typeValues"
           :index="props.i"
           @input="$emit('input', $event)"
           @type-change="updateType($event)"
+          @update:resource-identifier="updateResourceIdentifier"
         />
       </template>
     </ArrayList>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -5,7 +5,10 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { ROW_COMPUTED, TYPES } from './shared';
 
 export default {
-  emits: ['type-change'],
+  emits: [
+    'type-change',
+    'update:resource-identifier',
+  ],
 
   components: {
     Select,
@@ -26,6 +29,10 @@ export default {
       type:    String,
       default: ''
     },
+    typeValues: {
+      type:    Array,
+      default: () => [],
+    },
     value: {
       type:    Object,
       default: () => {
@@ -39,7 +46,10 @@ export default {
   },
 
   data() {
-    return { customType: '' };
+    return {
+      customType:         '',
+      previousTypeValues: [],
+    };
   },
 
   created() {
@@ -48,6 +58,7 @@ export default {
     } else {
       this.customType = this.type;
     }
+    this.previousTypeValues = [...this.typeValues];
   },
 
   computed: {
@@ -99,6 +110,22 @@ export default {
     }
   },
 
+  watch: {
+    typeValues: {
+      /**
+       * Intentionally uses `oldValues` (not `_newValues`) so that
+       * `previousTypeValues` always reflects the committed state before the
+       * current change. `deleteResourceLimits` relies on this snapshot to
+       * detect duplicate keys: if a key still appears twice in the old list
+       * we know another row owns it and must not delete the shared limit.
+       */
+      handler(_newValues, oldValues) {
+        this.previousTypeValues = [...oldValues];
+      },
+      deep: true
+    }
+  },
+
   methods: {
     updateType(type) {
       const oldResourceKey = this.isCustom ? this.customType : this.localType;
@@ -117,9 +144,17 @@ export default {
     updateCustomType(type) {
       const oldType = this.customType;
 
-      this.deleteResourceLimits(oldType);
+      if (oldType) {
+        this.deleteResourceLimits(oldType, true);
+      }
 
       this.customType = type;
+
+      this.$emit('update:resource-identifier', {
+        type:       this.type,
+        customType: this.customType,
+        index:      this.index,
+      });
     },
 
     updateQuotaLimit(prop, type, val) {
@@ -140,7 +175,38 @@ export default {
       this.value.spec[prop].limit[type] = val;
     },
 
-    deleteResourceLimits(resourceKey) {
+    deleteResourceLimits(resourceKey, isExtended = false) {
+      const limit = this.value?.spec.resourceQuota?.limit;
+      const usedLimit = this.value?.spec.namespaceDefaultResourceQuota?.limit;
+
+      if (isExtended) {
+        // `previousTypeValues` holds the previous snapshot of typeValues.
+        // Counting matches against the old list lets us detect whether another
+        // row already owns this key before we delete the shared limit entry.
+        const matchesForKey = this.previousTypeValues.filter((typeValue) => {
+          const [, typeKey] = typeValue.split('.');
+
+          return resourceKey === typeKey;
+        });
+
+        /**
+         * Prevent inadvertently deleting values for an existing custom resource
+         * if a duplicate key is entered.
+         */
+        if (matchesForKey.length >= 2) {
+          return;
+        }
+
+        if (limit?.extended && typeof this.value.spec.resourceQuota?.limit?.extended[resourceKey] !== 'undefined') {
+          delete this.value.spec.resourceQuota.limit.extended[resourceKey];
+        }
+        if (usedLimit?.extended && typeof this.value.spec.namespaceDefaultResourceQuota?.limit?.extended[resourceKey] !== 'undefined') {
+          delete this.value.spec.namespaceDefaultResourceQuota.limit.extended[resourceKey];
+        }
+
+        return;
+      }
+
       if (typeof this.value.spec.resourceQuota?.limit[resourceKey] !== 'undefined') {
         delete this.value.spec.resourceQuota.limit[resourceKey];
       }
@@ -171,6 +237,7 @@ export default {
       :mode="mode"
       :placeholder="t('resourceQuota.resourceIdentifier.placeholder')"
       :rules="customTypeRules"
+      :require-dirty="false"
       class="mr-10"
       data-testid="projectrow-custom-type-input"
       @update:value="updateCustomType($event)"

package/components/form/ResourceQuota/__tests__/Project.test.ts

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import Project from '@shell/components/form/ResourceQuota/Project.vue';
+import { TYPES } from '@shell/components/form/ResourceQuota/shared';
+
+describe('project', () => {
+  const defaultProps = {
+    mode:  'create',
+    value: {
+      spec: {
+        resourceQuota:                 { limit: {} },
+        namespaceDefaultResourceQuota: { limit: {} }
+      }
+    },
+    types: []
+  };
+
+  it('should emit validationChanged with false when validateTypes(false) is called (e.g., when adding a row)', () => {
+    const wrapper: any = shallowMount(Project, { props: defaultProps });
+
+    wrapper.vm.validateTypes(false);
+
+    expect(wrapper.emitted('validationChanged')).toBeTruthy();
+    expect(wrapper.emitted('validationChanged')[0]).toStrictEqual([false]);
+  });
+
+  it('should emit validationChanged with false if an extended type has no resource identifier', () => {
+    const wrapper: any = shallowMount(Project, { props: defaultProps });
+
+    wrapper.setData({ typeValues: [TYPES.EXTENDED] });
+
+    wrapper.vm.validateTypes(true);
+
+    expect(wrapper.emitted('validationChanged')).toBeTruthy();
+    expect(wrapper.emitted('validationChanged')[0]).toStrictEqual([false]);
+  });
+
+  it('should emit validationChanged with true if an extended type has resource identifier', () => {
+    const wrapper: any = shallowMount(Project, { props: defaultProps });
+
+    wrapper.setData({ typeValues: ['extended.my-resource'] });
+
+    wrapper.vm.validateTypes(true);
+
+    expect(wrapper.emitted('validationChanged')).toBeTruthy();
+    expect(wrapper.emitted('validationChanged')[0]).toStrictEqual([true]);
+  });
+
+  it('should update typeValues and validate when updateResourceIdentifier is called', () => {
+    const wrapper: any = shallowMount(Project, { props: defaultProps });
+
+    wrapper.setData({ typeValues: [TYPES.EXTENDED] });
+
+    wrapper.vm.updateResourceIdentifier({
+      type:       TYPES.EXTENDED,
+      customType: 'my-resource',
+      index:      0
+    });
+
+    expect(wrapper.vm.typeValues[0]).toStrictEqual('extended.my-resource');
+    expect(wrapper.emitted('validationChanged')).toBeTruthy();
+    expect(wrapper.emitted('validationChanged')[0]).toStrictEqual([true]);
+  });
+});

package/components/form/SelectOrCreateAuthSecret.vue

@@ -149,6 +149,11 @@ export default {
       type:    Boolean,
       default: false,
     },
+
+    isGithubDotComRepository: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   async fetch() {
@@ -662,7 +667,7 @@ export default {
             data-testid="auth-secret-basic-password"
             :mode="mode"
             type="password"
-            label-key="selectOrCreateAuthSecret.basic.password"
+            :label-key="isGithubDotComRepository ? 'selectOrCreateAuthSecret.basic.passwordPersonalAccessToken' : 'selectOrCreateAuthSecret.basic.password'"
           />
         </div>
       </template>

package/components/form/__tests__/SelectOrCreateAuthSecret.test.ts

@@ -31,4 +31,39 @@ describe('component: SelectOrCreateAuthSecret', () => {
 
     expect(knownSshHosts.exists()).toBe(showSshKnownHosts || false);
   });
+
+  it.each([
+    ['selectOrCreateAuthSecret.basic.passwordPersonalAccessToken', true],
+    ['selectOrCreateAuthSecret.basic.password', false],
+    ['selectOrCreateAuthSecret.basic.password', undefined],
+  ])('should render "%s" label when isGithubDotComRepository is %p', async(expectedLabel, isGithubDotComRepository) => {
+    const wrapper = mount(SelectOrCreateAuthSecret, {
+      ...requiredSetup(),
+      props: {
+        mode:               _EDIT,
+        namespace:          'default',
+        value:              {},
+        isGithubDotComRepository,
+        registerBeforeHook: () => {},
+      },
+      data() {
+        return { selected: AUTH_TYPE._BASIC } as any;
+      }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    // Find the LabeledInput component with the password data-testid
+    const labeledInputComponents = wrapper.findAllComponents({ name: 'LabeledInput' });
+
+    // The second LabeledInput component should be the password field
+    const passwordLabeledInput = labeledInputComponents.length > 1 ? labeledInputComponents[1] : null;
+
+    expect(passwordLabeledInput).not.toBeNull();
+
+    // Check the label-key prop to verify correct i18n key is used
+    const expectedLabelKey = isGithubDotComRepository ? 'selectOrCreateAuthSecret.basic.passwordPersonalAccessToken' : 'selectOrCreateAuthSecret.basic.password';
+
+    expect(passwordLabeledInput!.props('labelKey')).toBe(expectedLabelKey);
+  });
 });

package/components/formatter/KubeconfigClusters.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface ClusterReference {
+  label: string;
+  location?: object;
+}
+
+const MAX_DISPLAY = 25;
+
+const props = defineProps<{
+  row: { id: string; sortedReferencedClusters?: ClusterReference[] };
+  value?: unknown[];
+}>();
+
+const allClusters = computed<ClusterReference[]>(() => {
+  return props.row?.sortedReferencedClusters || [];
+});
+
+const clusters = computed<ClusterReference[]>(() => {
+  return allClusters.value.slice(0, MAX_DISPLAY);
+});
+
+const remainingCount = computed<number>(() => {
+  return Math.max(0, allClusters.value.length - MAX_DISPLAY);
+});
+</script>
+
+<template>
+  <span class="kubeconfig-clusters">
+    <template
+      v-for="(cluster, index) in clusters"
+    >
+      <template v-if="index > 0">,&nbsp;</template>
+      <router-link
+        v-if="cluster.location"
+        :key="`${row.id}-${cluster.label}`"
+        :to="cluster.location"
+      >
+        {{ cluster.label }}
+      </router-link>
+      <span
+        v-else
+        :key="`${row.id}-${cluster.label}-deleted`"
+        class="text-muted"
+      >
+        {{ cluster.label }}
+      </span>
+    </template>
+    <span
+      v-if="remainingCount > 0"
+      class="text-muted"
+    >
+      {{ t('ext.cattle.io.kubeconfig.moreClusterCount', { remainingCount: remainingCount }) }}
+    </span>
+    <span
+      v-if="allClusters.length === 0"
+      class="text-muted"
+    >
+      &mdash;
+    </span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.kubeconfig-clusters {
+  display: block;
+  width: 0;
+  min-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/components/formatter/MachineSummaryGraph.vue

@@ -37,7 +37,10 @@ export default {
     offset="1"
   >
     <template #popper>
-      <table class="fixed">
+      <table
+        data-testid="machine-progress-popper"
+        class="fixed"
+      >
         <tbody>
           <tr
             v-for="(obj, i) in row.stateParts"
@@ -49,7 +52,10 @@ export default {
             >
               {{ obj.label }}
             </td>
-            <td class="text-right">
+            <td
+              :data-testid="`machine-progress-popper-${obj.label.toLowerCase()}`"
+              class="text-right"
+            >
               {{ obj.value }}
             </td>
           </tr>
@@ -60,11 +66,13 @@ export default {
     <div
       class="content"
       :class="{ horizontal }"
+      data-testid="machine-progress-count"
     >
       <ProgressBarMulti
         v-if="row.stateParts"
         :values="row.stateParts"
         class="progress-bar"
+        data-testid="machine-progress-bar"
       />
       <span
         v-if="row.desired === ready"