Merge pull request #13966 from codyrancher/cluster-create-cred

Fixing the focus loss issue of the cloud credentials creator on the create cluster pages

cypress/e2e/po/pages/cluster-manager/cloud-credentials-create.po.ts

@@ -1,5 +1,5 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
-import CloudCredentialsCreateAWSPagePo from '~/cypress/e2e/po/pages/cluster-manager/cloud-credentials-create-aws.po';
+import CloudCredentialsCreateAWSPagePo from '@/cypress/e2e/po/pages/cluster-manager/cloud-credentials-create-aws.po';
 
 export default class CloudCredentialsCreatePagePo extends PagePo {
   private static createPath(clusterId: string) {

cypress/e2e/tests/pages/manager/cloud-credential.spec.ts

@@ -4,7 +4,9 @@ import { machinePoolConfigResponse } from '@/cypress/e2e/blueprints/manager/mach
 import ClusterManagerListPagePo from '@/cypress/e2e/po/pages/cluster-manager/cluster-manager-list.po';
 import ClusterManagerEditGenericPagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/edit/cluster-edit-generic.po';
 import ClusterManagerCreateRke2AzurePagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create-rke2-azure.po';
-import CloudCredentialsCreatePagePo from '~/cypress/e2e/po/pages/cluster-manager/cloud-credentials-create.po';
+import CloudCredentialsCreatePagePo from '@/cypress/e2e/po/pages/cluster-manager/cloud-credentials-create.po';
+import ClusterManagerCreatePagePo from '@/cypress/e2e/po/edit/provisioning.cattle.io.cluster/create/cluster-create.po';
+import CloudCredentialsCreateAWSPagePo from '@/cypress/e2e/po/pages/cluster-manager/cloud-credentials-create-aws.po';
 
 describe('Cloud Credential', { testIsolation: 'off' }, () => {
   const clusterList = new ClusterManagerListPagePo();
@@ -255,6 +257,33 @@ describe('Cloud Credential', { testIsolation: 'off' }, () => {
     createCredentialsAwsPo.errorBanner().should('contain.text', errorMessage);
   });
 
+  it('Ensure we validate credentials and show an error when invalid when creating a credential from the create cluster page', { tags: ['@manager', '@adminUser'] }, () => {
+    // We're doing this odd page navigation and input verification to ensure we don't run into a very specific error which required this order of events described in https://github.com/rancher/dashboard/issues/13802
+    const name = 'name';
+    const access = 'access';
+    const secret = 'secret';
+    const errorMessage = 'Authentication test failed, please check your credentials';
+
+    const clusterCreate = new ClusterManagerCreatePagePo();
+
+    clusterCreate.goTo();
+    clusterCreate.waitForPage();
+    clusterCreate.selectCreate(0);
+    clusterCreate.rke2PageTitle().should('include', 'Create Amazon EC2');
+
+    const createCredentialsAwsPo = new CloudCredentialsCreateAWSPagePo();
+
+    createCredentialsAwsPo.accessKeyInput().set(access);
+    createCredentialsAwsPo.secretKeyInput().set(secret);
+    createCredentialsAwsPo.credentialNameInput().set(name);
+
+    createCredentialsAwsPo.credentialNameInput().value().should('eq', name);
+
+    createCredentialsAwsPo.clickCreate();
+    // In the previous bug this text would get truncated to the first letter
+    createCredentialsAwsPo.errorBanner().should('contain.text', errorMessage);
+  });
+
   after(() => {
     for (let i = 0; i < doCreatedCloudCredsIds.length; i++) {
       cy.deleteRancherResource('v3', `cloudcredentials`, doCreatedCloudCredsIds[i]);

shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue

@@ -236,6 +236,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <CruResource
     v-else
+    :done-params="$attrs['done-params'] /* Without this, changes to the validationPassed prop end up propagating all the way to the root of the app and force a re-render when the input becomes valid. I haven't found a reasonable explanation for why this happens. */"
     :mode="mode"
     :validation-passed="validationPassed"
     :resource="newCredential"