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

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

@@ -0,0 +1,215 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import ResourceQuotaEntry from '@shell/components/form/ResourceQuota/ResourceQuotaEntry.vue';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RcButton } from '@components/RcButton';
+import { TYPES } from '@shell/components/form/ResourceQuota/shared';
+
+describe('component: ResourceQuotaEntry', () => {
+  const store = createStore({});
+
+  const mockType = {
+    value:         'configMaps',
+    inputExponent: 0,
+    baseUnit:      '',
+    placeholder:   'Enter count',
+    increment:     1,
+  };
+
+  const podsType = {
+    value:         'pods',
+    inputExponent: 0,
+    baseUnit:      '',
+    placeholder:   'Enter count',
+    increment:     1,
+  };
+
+  const limitsCpuType = {
+    value:         'limitsCpu',
+    inputExponent: -1,
+    baseUnit:      '',
+    placeholder:   'Enter CPU',
+    increment:     1,
+  };
+
+  const extendedType = {
+    value:         TYPES.EXTENDED,
+    inputExponent: 0,
+    baseUnit:      '',
+    placeholder:   'Enter value',
+    increment:     1,
+  };
+
+  const allTypes = [mockType, podsType, limitsCpuType, extendedType];
+
+  const defaultProps = {
+    id:                    '1',
+    mode:                  'edit',
+    types:                 allTypes,
+    resourceType:          'configMaps',
+    resourceIdentifier:    'configMaps',
+    projectLimit:          '20',
+    namespaceDefaultLimit: '10',
+  };
+
+  const createWrapper = (propsOverrides: Record<string, unknown> = {}) => {
+    return shallowMount(ResourceQuotaEntry, {
+      props:  { ...defaultProps, ...propsOverrides },
+      global: { provide: { store } },
+    });
+  };
+
+  describe('rendering', () => {
+    it('should render all input fields with their data-testid attributes', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.find('[data-testid="projectrow-type-input"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="projectrow-custom-type-input"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="projectrow-project-quota-input"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="projectrow-namespace-quota-input"]').exists()).toBe(true);
+    });
+  });
+
+  describe('computed: typeOption', () => {
+    it('should return the matching type option for a given resourceType', () => {
+      const wrapper = createWrapper({ resourceType: 'configMaps' });
+
+      expect((wrapper.vm as any).typeOption).toStrictEqual(mockType);
+    });
+
+    it('should return the extended type option when resourceType is TYPES.EXTENDED', () => {
+      const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+
+      expect((wrapper.vm as any).typeOption).toStrictEqual(extendedType);
+    });
+  });
+
+  describe('computed: isCustom', () => {
+    it('should return true when resourceType equals TYPES.EXTENDED', () => {
+      const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+
+      expect((wrapper.vm as any).isCustom).toBe(true);
+    });
+
+    it.each([
+      ['configMaps'],
+      ['pods'],
+      ['limitsCpu'],
+    ])('should return false when resourceType is "%s"', (resourceType) => {
+      const wrapper = createWrapper({ resourceType });
+
+      expect((wrapper.vm as any).isCustom).toBe(false);
+    });
+  });
+
+  describe('computed: customTypeRules', () => {
+    it('should return an empty array when resourceType is a standard type', () => {
+      const wrapper = createWrapper({ resourceType: 'configMaps' });
+
+      expect((wrapper.vm as any).customTypeRules).toStrictEqual([]);
+    });
+
+    it('should return one validation rule when resourceType is TYPES.EXTENDED', () => {
+      const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+
+      expect((wrapper.vm as any).customTypeRules).toHaveLength(1);
+    });
+
+    describe('validation rule behavior for custom type', () => {
+      it.each([
+        ['', 'resourceQuota.errors.customTypeRequired'],
+        [null, 'resourceQuota.errors.customTypeRequired'],
+        [undefined, 'resourceQuota.errors.customTypeRequired'],
+      ])('should return an error message for falsy value "%s"', (value, expectedError) => {
+        const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+        const [rule] = (wrapper.vm as any).customTypeRules;
+
+        expect(rule(value)).toBe(expectedError);
+      });
+
+      it.each([
+        ['my-resource'],
+        ['cpu'],
+        ['custom.resource/name'],
+      ])('should return undefined for non-empty value "%s"', (value) => {
+        const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+        const [rule] = (wrapper.vm as any).customTypeRules;
+
+        expect(rule(value)).toBeUndefined();
+      });
+    });
+  });
+
+  describe('method: remove', () => {
+    it('should emit remove event with the resource quota id', () => {
+      const id = 'test-remove-id';
+      const wrapper = createWrapper({ id });
+
+      (wrapper.vm as any).remove(id);
+
+      expect(wrapper.emitted('remove')).toBeTruthy();
+      expect(wrapper.emitted('remove')![0]).toStrictEqual([id]);
+    });
+
+    it('should emit remove when the Remove button is clicked', async() => {
+      const id = 'click-test-id';
+      const wrapper = createWrapper({ id });
+
+      await wrapper.findComponent(RcButton as any).trigger('click');
+
+      expect(wrapper.emitted('remove')).toBeTruthy();
+      expect(wrapper.emitted('remove')![0]).toStrictEqual([id]);
+    });
+  });
+
+  describe('method: updateResourceIdentifier', () => {
+    it('should emit update:resourceIdentifier with the new type for standard types', () => {
+      const wrapper = createWrapper({ resourceType: 'configMaps' });
+
+      (wrapper.vm as any).updateResourceIdentifier('pods');
+
+      expect(wrapper.emitted('update:resourceIdentifier')).toBeTruthy();
+      expect(wrapper.emitted('update:resourceIdentifier')![0]).toStrictEqual(['pods']);
+    });
+
+    it('should not emit update:resourceIdentifier when called with TYPES.EXTENDED', () => {
+      const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+
+      (wrapper.vm as any).updateResourceIdentifier(TYPES.EXTENDED);
+
+      expect(wrapper.emitted('update:resourceIdentifier')).toBeFalsy();
+    });
+  });
+
+  describe('template: LabeledInput disabled state', () => {
+    it('should have the identifier input disabled when resourceType is a standard type', () => {
+      const wrapper = createWrapper({ resourceType: 'configMaps' });
+      const input = wrapper.findComponent(LabeledInput as any);
+
+      expect(input.props('disabled')).toBe(true);
+    });
+
+    it('should not have the identifier input disabled when resourceType is TYPES.EXTENDED', () => {
+      const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+      const input = wrapper.findComponent(LabeledInput as any);
+
+      expect(input.props('disabled')).toBe(false);
+    });
+  });
+
+  describe('template: LabeledInput required state', () => {
+    it('should have the identifier input required when resourceType is TYPES.EXTENDED', () => {
+      const wrapper = createWrapper({ resourceType: TYPES.EXTENDED });
+      const input = wrapper.findComponent(LabeledInput as any);
+
+      expect(input.props('required')).toBe(true);
+    });
+
+    it('should not have the identifier input required when resourceType is a standard type', () => {
+      const wrapper = createWrapper({ resourceType: 'configMaps' });
+      const input = wrapper.findComponent(LabeledInput as any);
+
+      expect(input.props('required')).toBe(false);
+    });
+  });
+});

package/components/form/SchedulingCustomization.vue

@@ -7,6 +7,10 @@ export default {
   components: { Checkbox, Banner },
   emits:      ['scheduling-customization-changed'],
   props:      {
+    type: {
+      type:     String,
+      required: true,
+    },
     value: {
       type:    Object,
       default: () => {},
@@ -26,6 +30,10 @@ export default {
     defaultPDB: {
       type:    Object,
       default: () => {},
+    },
+    checkboxWithOnlyAgentName: {
+      type:    Boolean,
+      default: false
     }
   },
   data() {
@@ -59,10 +67,10 @@ export default {
     <Checkbox
       :value="enabled"
       :mode="mode"
-      label-key="cluster.agentConfig.subGroups.schedulingCustomization.label"
-      descriptionKey="cluster.agentConfig.subGroups.schedulingCustomization.description"
+      :label="checkboxWithOnlyAgentName ? t(`cluster.agentConfig.subGroups.agentsScheduling.${type}`) : t('cluster.agentConfig.subGroups.agentsScheduling.label', { agent: t(`cluster.agentConfig.subGroups.agentsScheduling.${type}`)})"
+      :description="checkboxWithOnlyAgentName ? '' :t('cluster.agentConfig.subGroups.agentsScheduling.description', { agent: t(`cluster.agentConfig.subGroups.agentsScheduling.${type}`)})"
       data-testid="scheduling-customization-checkbox"
-      @update:value="$emit('scheduling-customization-changed', $event)"
+      @update:value="$emit('scheduling-customization-changed', { event: $event, agentType: type })"
     >
       <template
         v-if="feature && isEdit && settingMissmatch"
@@ -71,13 +79,13 @@ export default {
         <Banner
           class="mt-10 mb-10"
           color="info"
-          label-key="cluster.agentConfig.subGroups.schedulingCustomization.banner"
+          :label="t('cluster.agentConfig.subGroups.agentsScheduling.banner', { agent: t(`cluster.agentConfig.subGroups.agentsScheduling.${type}`)})"
         />
         <Checkbox
           :value="applyGlobal"
           :mode="mode"
-          label-key="cluster.agentConfig.subGroups.schedulingCustomization.innerCheckbox"
-          @update:value="$emit('scheduling-customization-changed', feature)"
+          :label="t('cluster.agentConfig.subGroups.agentsScheduling.innerCheckbox', { agent: t(`cluster.agentConfig.subGroups.agentsScheduling.${type}`)})"
+          @update:value="$emit('scheduling-customization-changed', { event: $event, agentType: type })"
         />
       </template>
     </Checkbox>

package/components/form/SelectOrCreateAuthSecret.vue

@@ -71,6 +71,11 @@ export default {
       default: 'auth-',
     },
 
+    clientGeneratedName: {
+      type:    String,
+      default: null,
+    },
+
     allowNone: {
       type:    Boolean,
       default: true,
@@ -150,6 +155,42 @@ export default {
       default: false,
     },
 
+    /**
+     * Used specifically to fix the HTTP BASIC auth to generate specific authentication
+     * This is used to clear up the SELECT to make sure it only has HTTP BASIC with some special conditions
+     */
+    fixedHttpBasicAuth: {
+      type:    Boolean,
+      default: false,
+    },
+
+    /** Used together with fixedHttpBasicAuth
+     * It will filter all the cases to use this specific label at the start.
+     */
+    filterBasicAuth: {
+      type:    String,
+      default: '',
+    },
+
+    /**
+     * This works similar to other allow* but this makes specific to create as ImagePullSecret since it is specific for one page that only uses it
+     * To avoid using it in other places.
+     */
+    fixedImagePullSecret: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * Whenever the fixedImagePullSecret is setup the dockerJsonUrlConfig needs to be passed that will be used to create the DockerJsonConfig file
+     */
+    imagePullSecretDockerJsonUrlConfig: {
+      type:    String,
+      default: '',
+    },
+
+    /**
+     * Specific property to change labels if it is Github.com repository
+     */
     isGithubDotComRepository: {
       type:    Boolean,
       default: false,
@@ -157,7 +198,7 @@ export default {
   },
 
   async fetch() {
-    if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
+    if ( (this.allowSsh || this.allowBasic || this.allowRke || this.fixedImagePullSecret) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
       if (this.$store.getters[`${ this.inStore }/paginationEnabled`](SECRET)) {
         // Filter results via api (because we shouldn't be fetching them all...)
         this.filteredSecrets = await this.filterSecretsByApi();
@@ -200,6 +241,8 @@ export default {
 
       selected: null,
 
+      previousValue: null,
+
       filterByNamespace: this.namespace && this.limitToNamespace,
 
       publicKey:     '',
@@ -207,10 +250,11 @@ export default {
       sshKnownHosts: '',
       uniqueId:      new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
 
-      SSH:   AUTH_TYPE._SSH,
-      BASIC: AUTH_TYPE._BASIC,
-      S3:    AUTH_TYPE._S3,
-      RKE:   AUTH_TYPE._RKE,
+      SSH:               AUTH_TYPE._SSH,
+      BASIC:             AUTH_TYPE._BASIC,
+      IMAGE_PULL_SECRET: AUTH_TYPE._IMAGE_PULL_SECRET,
+      S3:                AUTH_TYPE._S3,
+      RKE:               AUTH_TYPE._RKE,
     };
   },
 
@@ -218,6 +262,12 @@ export default {
     secretTypes() {
       const types = [];
 
+      if ( this.fixedImagePullSecret ) {
+        types.push(SECRET_TYPES.DOCKER_JSON);
+
+        return types;
+      }
+
       if ( this.allowSsh ) {
         types.push(SECRET_TYPES.SSH);
       }
@@ -325,7 +375,7 @@ export default {
         });
       }
 
-      if (this.allowSsh || this.allowS3 || this.allowBasic || this.allowRke) {
+      if (this.allowSsh || this.allowS3 || this.allowBasic || this.allowRke || this.fixedImagePullSecret) {
         out.unshift({
           label:    'divider',
           disabled: true,
@@ -366,6 +416,18 @@ export default {
         });
       }
 
+      if ( this.fixedImagePullSecret ) {
+        out.unshift({
+          label: this.t('selectOrCreateAuthSecret.createImagePullSecret'),
+          value: AUTH_TYPE._IMAGE_PULL_SECRET,
+          kind:  'highlighted'
+        });
+      }
+
+      if (this.fixedHttpBasicAuth) {
+        out = out.filter((o) => o.label.search(this.filterBasicAuth) === 0 || ['title', 'divider'].includes(o.kind) || o.value === AUTH_TYPE._BASIC);
+      }
+
       return out;
     },
 
@@ -374,7 +436,7 @@ export default {
         return '';
       }
 
-      if ( this.selected === AUTH_TYPE._SSH || this.selected === AUTH_TYPE._BASIC || this.selected === AUTH_TYPE._RKE || this.selected === AUTH_TYPE._S3 ) {
+      if ( this.selected === AUTH_TYPE._SSH || this.selected === AUTH_TYPE._BASIC || this.selected === AUTH_TYPE._RKE || this.selected === AUTH_TYPE._S3 || this.selected === AUTH_TYPE._IMAGE_PULL_SECRET ) {
         return 'col span-4';
       }
 
@@ -395,6 +457,7 @@ export default {
     publicKey:     'updateKeyVal',
     privateKey:    'updateKeyVal',
     sshKnownHosts: 'updateKeyVal',
+    preSelect:     'updateSelectedFromValue',
     value:         'updateSelectedFromValue',
 
     async namespace(ns) {
@@ -478,7 +541,7 @@ export default {
     },
 
     updateKeyVal() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE].includes(this.selected) ) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._IMAGE_PULL_SECRET].includes(this.selected) ) {
         this.privateKey = '';
         this.publicKey = '';
         this.sshKnownHosts = '';
@@ -498,9 +561,9 @@ export default {
     },
 
     update() {
-      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._NONE].includes(this.selected))) {
+      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._NONE, AUTH_TYPE._IMAGE_PULL_SECRET].includes(this.selected))) {
         this.$emit('update:value', null);
-      } else if ( this.selected.includes(':') ) {
+      } else if ( this.selected.includes(':')) {
         // Cloud creds
         this.$emit('update:value', this.selected);
       } else {
@@ -522,7 +585,7 @@ export default {
     },
 
     async doCreate() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE].includes(this.selected) || this.delegateCreateToParent ) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._IMAGE_PULL_SECRET].includes(this.selected) || this.delegateCreateToParent ) {
         return;
       }
 
@@ -537,12 +600,17 @@ export default {
           },
         });
       } else {
+        const metadata = { namespace: this.namespace };
+
+        if (this.clientGeneratedName) {
+          metadata.name = this.clientGeneratedName;
+        } else {
+          metadata.generateName = this.generateName;
+        }
+
         secret = await this.$store.dispatch(`${ this.inStore }/create`, {
-          type:     SECRET,
-          metadata: {
-            namespace:    this.namespace,
-            generateName: this.generateName
-          },
+          type: SECRET,
+          metadata,
         });
 
         let type, publicField, privateField;
@@ -558,6 +626,11 @@ export default {
           publicField = 'username';
           privateField = 'password';
           break;
+        case AUTH_TYPE._IMAGE_PULL_SECRET:
+          type = SECRET_TYPES.DOCKER_JSON;
+          publicField = 'username';
+          privateField = 'password';
+          break;
         case AUTH_TYPE._RKE:
           type = SECRET_TYPES.RKE_AUTH_CONFIG;
           // Set the 'auth' key to be the base64 of the username and password concatenated with a ':' character
@@ -581,6 +654,22 @@ export default {
           if ((this.selected === AUTH_TYPE._SSH) && this.showSshKnownHosts) {
             secret.data.known_hosts = base64Encode(this.sshKnownHosts || '');
           }
+
+          if (this.selected === AUTH_TYPE._IMAGE_PULL_SECRET && this.imagePullSecretDockerJsonUrlConfig) {
+            const registryHost = this.imagePullSecretDockerJsonUrlConfig ? new URL(this.imagePullSecretDockerJsonUrlConfig).host : '';
+
+            const config = {
+              auths: {
+                [registryHost]: {
+                  [publicField]:  this.publicKey,
+                  [privateField]: this.privateKey,
+                }
+              }
+            };
+            const json = JSON.stringify(config);
+
+            secret.setData('.dockerconfigjson', json);
+          }
         }
       }
 
@@ -609,7 +698,7 @@ export default {
           v-model:value="selected"
           data-testid="auth-secret-select"
           :mode="mode"
-          :label-key="labelKey"
+          :label-key="fixedImagePullSecret ? 'selectOrCreateAuthSecret.imagePullSecret' : labelKey"
           :loading="$fetchState.pending"
           :options="options"
           :selectable="option => !option.disabled"
@@ -645,7 +734,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === BASIC || selected === RKE">
+      <template v-else-if="selected === BASIC || selected === RKE || selected === IMAGE_PULL_SECRET">
         <Banner
           v-if="selected === RKE"
           color="info"

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

@@ -6,12 +6,17 @@ const requiredSetup = () => {
   return {
     global: {
       mocks: {
-        $store: {
+        $fetchState: { pending: false },
+        $store:      {
           getters: {
-            currentProduct: { inStore: 'cluster' },
-            'i18n/t':       (text: string) => text,
-            t:              (text: string) => text,
-          }
+            currentStore:                () => 'cluster',
+            currentProduct:              { inStore: 'cluster' },
+            'i18n/t':                    (text: string) => text,
+            t:                           (text: string) => text,
+            'cluster/paginationEnabled': () => false,
+            'cluster/all':               () => ['node-0', 'node-1'],
+          },
+          dispatch: jest.fn(),
         }
       },
     }
@@ -21,8 +26,6 @@ const requiredSetup = () => {
 describe('component: NodeScheduling', () => {
   const value = { nodeName: 'node-1' };
 
-  const nodes = ['node-0', 'node-1'];
-
   it.each([
     _VIEW,
     _CREATE,
@@ -32,13 +35,13 @@ describe('component: NodeScheduling', () => {
       NodeScheduling,
       {
         props: {
-          mode, loading: false, value, nodes
+          mode, loading: false, value
         },
         ...requiredSetup(),
       }
     );
 
     expect(wrapper.find('[data-testid="node-scheduling-selectNode"]').exists()).toBeTruthy();
-    expect(wrapper.find('[data-testid="node-scheduling-nodeSelector"]').element.textContent).toContain(value.nodeName);
+    expect(wrapper.find('[data-testid="node-scheduling-nodeSelector"] .vs__selected').text()).toBe(value.nodeName);
   });
 });

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

@@ -3,6 +3,23 @@ import { mount } from '@vue/test-utils';
 import PodAffinity from '@shell/components/form/PodAffinity.vue';
 import { _CREATE } from '@shell/config/query-params';
 
+const requiredSetup = () => {
+  return {
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:        () => 'cluster',
+            'i18n/t':            (text: string) => text,
+            'cluster/schemaFor': jest.fn(),
+            'cluster/canList':   jest.fn(),
+          }
+        }
+      }
+    }
+  };
+};
+
 describe('component: PodAffinity', () => {
   it('should display the weight input when the priority is preferred', () => {
     const podAffinity = {
@@ -15,7 +32,8 @@ describe('component: PodAffinity', () => {
     const wrapper = mount(PodAffinity, {
       props: {
         mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
-      }
+      },
+      ...requiredSetup()
     });
 
     expect(wrapper.find('[data-testid="pod-affinity-weight-index0"]').exists()).toBeTruthy();
@@ -33,7 +51,8 @@ describe('component: PodAffinity', () => {
     const wrapper = mount(PodAffinity, {
       props: {
         mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
-      }
+      },
+      ...requiredSetup()
     });
 
     const weightInput = wrapper.find('[data-testid="pod-affinity-weight-index0"]');