make name required by form validation + update form validation for cr…

…eds that send validation from custom component + remove 'optional' from placeholder + allow editing of the 'name' prop in cloud creds + add tests (rancher#10512) Co-authored-by: Alexandre Alves <aalves@Alexandres-MacBook-Pro.local>
yonasberhe23 · Feb 27, 2024 · dbe99cc · dbe99cc
1 parent a1aac27
commit dbe99cc
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 15 deletions.
diff --git a/cypress/e2e/po/components/async-button.po.ts b/cypress/e2e/po/components/async-button.po.ts
@@ -5,6 +5,14 @@ export default class AsyncButtonPo extends ComponentPo {
     return this.self().click({ force });
   }
 
+  expectToBeDisabled(): Cypress.Chainable {
+    return this.self().should('have.attr', 'disabled', 'disabled');
+  }
+
+  expectToBeEnabled(): Cypress.Chainable {
+    return this.self().should('not.have.attr', 'disabled');
+  }
+
   label(name: string): Cypress.Chainable {
     return this.self().contains(name);
   }

diff --git a/cypress/e2e/po/components/labeled-input.po.ts b/cypress/e2e/po/components/labeled-input.po.ts
@@ -36,6 +36,10 @@ export default class LabeledInputPo extends ComponentPo {
     }
   }
 
+  getAttributeValue(attr: string): Cypress.Chainable {
+    return this.input().invoke('attr', attr);
+  }
+
   clear() {
     return this.input().clear();
   }

diff --git a/cypress/e2e/tests/pages/manager/cloud-credentials.spec.ts b/cypress/e2e/tests/pages/manager/cloud-credentials.spec.ts
@@ -36,11 +36,22 @@ describe('Cloud Credentials', { testIsolation: 'off', tags: ['@manager', '@jenki
     cloudCredentialsPage.createEditCloudCreds().waitForPage();
     cloudCredentialsPage.createEditCloudCreds().cloudServiceOptions().selectSubTypeByIndex(0).click();
     cloudCredentialsPage.createEditCloudCreds().waitForPage('type=aws');
-    cloudCredentialsPage.createEditCloudCreds().nameNsDescription().name().set(this.cloudCredentialName);
     cloudCredentialsPage.createEditCloudCreds().nameNsDescription().description().set(`${ this.cloudCredentialName }-description`);
     cloudCredentialsPage.createEditCloudCreds().accessKey().set(Cypress.env('awsAccessKey'));
     cloudCredentialsPage.createEditCloudCreds().secretKey().set(Cypress.env('awsSecretKey'), true);
     cloudCredentialsPage.createEditCloudCreds().defaultRegion().checkOptionSelected('us-west-2');
+
+    // Testing issue https://github.com/rancher/dashboard/issues/10424
+    // making name a mandatory field with form validation + removal of "optional" from "name" placeholder
+    cloudCredentialsPage.createEditCloudCreds().nameNsDescription().name().getAttributeValue('placeholder')
+      .should('not.contain', 'optional');
+    cloudCredentialsPage.createEditCloudCreds().saveCreateForm().cruResource().saveOrCreate()
+      .expectToBeDisabled();
+    cloudCredentialsPage.createEditCloudCreds().nameNsDescription().name().set(this.cloudCredentialName);
+    cloudCredentialsPage.createEditCloudCreds().saveCreateForm().cruResource().saveOrCreate()
+      .expectToBeEnabled();
+    // EOT
+
     cloudCredentialsPage.createEditCloudCreds().saveCreateForm().cruResource().saveAndWaitForRequests('POST', '/v3/cloudcredentials')
       .then((req) => {
         cloudcredentialId = req.response?.body.id;
@@ -55,12 +66,17 @@ describe('Cloud Credentials', { testIsolation: 'off', tags: ['@manager', '@jenki
     CloudCredentialsPagePo.navTo();
     cloudCredentialsPage.list().actionMenu(this.cloudCredentialName).getMenuItem('Edit Config').click();
     cloudCredentialsPage.createEditCloudCreds(cloudcredentialId).waitForPage('mode=edit');
+    // Testing issue https://github.com/rancher/dashboard/issues/10424
+    // we now allow for editing the "name" field
+    cloudCredentialsPage.createEditCloudCreds().nameNsDescription().name().set(`${ this.cloudCredentialName }-name-edit`);
+    // EOT
     cloudCredentialsPage.createEditCloudCreds().nameNsDescription().description().set(`${ this.cloudCredentialName }-description-edit`);
     cloudCredentialsPage.createEditCloudCreds().secretKey().set(Cypress.env('awsSecretKey'), true);
     cloudCredentialsPage.createEditCloudCreds().saveCreateForm().cruResource().saveAndWaitForRequests('PUT', '/v3/cloudCredentials/**');
     cloudCredentialsPage.waitForPage();
 
     // check list details
+    cloudCredentialsPage.list().details(`${ this.cloudCredentialName }-name-edit`, 2).should('be.visible');
     cloudCredentialsPage.list().details(`${ this.cloudCredentialName }-description-edit`, 3).should('be.visible');
   });
 

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -1220,7 +1220,7 @@ cluster:
         placeholder: Your Client Secret
     name:
       label: Credential Name
-      placeholder: Name for this credential (optional)
+      placeholder: Name for this credential
     s3:
       accessKey:
         label: Access Key

diff --git a/shell/edit/cloudcredential.vue b/shell/edit/cloudcredential.vue
@@ -4,7 +4,7 @@ import { MANAGEMENT, NORMAN, SCHEMA, DEFAULT_WORKSPACE } from '@shell/config/typ
 import CreateEditView from '@shell/mixins/create-edit-view';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import CruResource from '@shell/components/CruResource';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 import Loading from '@shell/components/Loading';
 import Labels from '@shell/components/form/Labels';
 import { HIDE_SENSITIVE } from '@shell/store/prefs';
@@ -70,21 +70,32 @@ export default {
       set(this.value, '_name', '');
     }
 
+    if (this.mode === _EDIT && this.value?.name?.length) {
+      this.value._name = this.value.name;
+      this.nameRequiredValidation = true;
+    }
+
     if ( this.value.provider ) {
       this.selectType(this.value.provider);
     }
   },
 
   data() {
     return {
-      nodeDrivers:      null,
-      kontainerDrivers: null
+      credCustomComponentValidation: false,
+      nameRequiredValidation:        false,
+      nodeDrivers:                   null,
+      kontainerDrivers:              null
     };
   },
 
   computed: {
     rke2Enabled: mapFeature(RKE2_FEATURE),
 
+    validationPassed() {
+      return this.credCustomComponentValidation && this.nameRequiredValidation;
+    },
+
     storeOverride() {
       return 'rancher';
     },
@@ -171,6 +182,14 @@ export default {
   },
 
   methods: {
+    handleNameRequiredValidation() {
+      this.nameRequiredValidation = !!this.value?._name?.length;
+    },
+
+    createValidationChanged(passed) {
+      this.credCustomComponentValidation = passed;
+    },
+
     async saveCredential(btnCb) {
       if ( this.errors ) {
         clear(this.errors);
@@ -245,7 +264,7 @@ export default {
     <CruResource
       v-else
       :mode="mode"
-      :validation-passed="true"
+      :validation-passed="validationPassed"
       :selected-subtype="value._type"
       :resource="value"
       :errors="errors"
@@ -258,12 +277,14 @@ export default {
     >
       <NameNsDescription
         v-model="value"
+        :name-editable="true"
         name-key="_name"
         description-key="description"
         name-label="cluster.credential.name.label"
         name-placeholder="cluster.credential.name.placeholder"
         :mode="mode"
         :namespaced="false"
+        @change="handleNameRequiredValidation"
       />
       <keep-alive>
         <component
@@ -273,6 +294,7 @@ export default {
           :value="value"
           :mode="mode"
           :hide-sensitive-data="hideSensitiveData"
+          @validationChanged="createValidationChanged"
         />
       </keep-alive>
     </CruResource>

diff --git a/shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue b/shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue
@@ -67,12 +67,13 @@ export default {
 
   data() {
     return {
-      allCredentials:         [],
-      nodeComponent:          null,
-      credentialId:           this.value || _NONE,
-      newCredential:          null,
-      createValidationPassed: false,
-      originalId:             this.value
+      allCredentials:                [],
+      nodeComponent:                 null,
+      credentialId:                  this.value || _NONE,
+      newCredential:                 null,
+      credCustomComponentValidation: false,
+      nameRequiredValidation:        false,
+      originalId:                    this.value
     };
   },
 
@@ -150,7 +151,7 @@ export default {
       }
 
       if ( this.credentialId === _NEW ) {
-        return this.createValidationPassed;
+        return this.credCustomComponentValidation && this.nameRequiredValidation;
       }
 
       return !!this.credentialId;
@@ -168,6 +169,10 @@ export default {
   },
 
   methods: {
+    handleNameRequiredValidation() {
+      this.nameRequiredValidation = !!this.newCredential?.name?.length;
+    },
+
     async save(btnCb) {
       if ( this.errors ) {
         clear(this.errors);
@@ -207,7 +212,7 @@ export default {
     },
 
     createValidationChanged(passed) {
-      this.createValidationPassed = passed;
+      this.credCustomComponentValidation = passed;
     },
 
     backToExisting() {
@@ -247,8 +252,8 @@ export default {
         name-key="name"
         name-label="cluster.credential.name.label"
         name-placeholder="cluster.credential.name.placeholder"
-        :name-required="false"
         mode="create"
+        @change="handleNameRequiredValidation"
       />
 
       <component