UI: fix DB Postgres test (#28227)

ui/app/components/database-connection.js

@@ -8,6 +8,7 @@ import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { waitFor } from '@ember/test-waiters';
+import { task } from 'ember-concurrency';
 
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
@@ -56,42 +57,43 @@ export default class DatabaseConnectionEdit extends Component {
     this.args.model[attr] = value;
   }
 
-  @action
-  async handleCreateConnection(evt) {
-    evt.preventDefault();
-    const secret = this.args.model;
-    secret
-      .save()
-      .then(() => {
+  handleCreateConnection = task(
+    waitFor(async (evt) => {
+      evt.preventDefault();
+      try {
+        const secret = this.args.model;
+        await secret.save();
         this.showSaveModal = true;
-      })
-      .catch((e) => {
+      } catch (e) {
         const errorMessage = getErrorMessage(e.errors);
         this.flashMessages.danger(errorMessage);
-      });
-  }
+      }
+    })
+  );
 
   @action
   continueWithoutRotate() {
+    if (this.continueWithRotate.isRunning) return;
     this.showSaveModal = false;
     const { name } = this.args.model;
     this.transitionToRoute(SHOW_ROUTE, name);
   }
 
-  @action
-  @waitFor
-  async continueWithRotate() {
-    this.showSaveModal = false;
-    const { backend, name } = this.args.model;
-    try {
-      await this.rotateCredentials(backend, name);
-      this.flashMessages.success(`Successfully rotated root credentials for connection "${name}"`);
-      this.transitionToRoute(SHOW_ROUTE, name);
-    } catch (e) {
-      this.flashMessages.danger(`Error rotating root credentials: ${e.errors}`);
-      this.transitionToRoute(SHOW_ROUTE, name);
-    }
-  }
+  continueWithRotate = task(
+    waitFor(async () => {
+      const { backend, name } = this.args.model;
+      try {
+        await this.rotateCredentials(backend, name);
+        this.flashMessages.success(`Successfully rotated root credentials for connection "${name}"`);
+        this.transitionToRoute(SHOW_ROUTE, name);
+      } catch (e) {
+        this.flashMessages.danger(`Error rotating root credentials: ${e.errors}`);
+        this.transitionToRoute(SHOW_ROUTE, name);
+      } finally {
+        this.showSaveModal = false;
+      }
+    })
+  );
 
   @action
   handleUpdateConnection(evt) {

ui/app/templates/components/database-connection.hbs

@@ -102,7 +102,7 @@
     </Hds::Alert>
   {{/if}}
 
-  <form {{on "submit" this.handleCreateConnection}} aria-label="create connection form">
+  <form {{on "submit" (perform this.handleCreateConnection)}} aria-label="create connection form">
     {{#each @model.fieldAttrs as |attr|}}
       {{#if (not-eq attr.options.readOnly true)}}
         <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
@@ -177,7 +177,12 @@
     <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
       <div class="field is-grouped">
         <Hds::ButtonSet>
-          <Hds::Button @text="Create database" type="submit" data-test-secret-save />
+          <Hds::Button
+            @icon={{if this.handleCreateConnection.isRunning "loading"}}
+            @text="Create database"
+            type="submit"
+            data-test-secret-save
+          />
           <Hds::Button
             @text="Cancel"
             @color="secondary"
@@ -370,7 +375,12 @@
     </M.Body>
     <M.Footer>
       <Hds::ButtonSet>
-        <Hds::Button @text="Rotate and enable" {{on "click" this.continueWithRotate}} data-test-enable-rotate-connection />
+        <Hds::Button
+          @icon={{if this.continueWithRotate.isRunning "loading"}}
+          @text="Rotate and enable"
+          {{on "click" (perform this.continueWithRotate)}}
+          data-test-enable-rotate-connection
+        />
         <Hds::Button
           @text="Enable without rotating"
           @color="secondary"

ui/tests/acceptance/secrets/backend/database/secret-test.js

@@ -48,8 +48,8 @@ const connectionTests = [
   {
     name: 'elasticsearch-connection',
     plugin: 'elasticsearch-database-plugin',
-    elasticUser: 'username',
-    elasticPassword: 'password',
+    username: 'username',
+    password: 'password',
     url: 'http://127.0.0.1:9200',
     assertCount: 9,
     requiredFields: async (assert, name) => {
@@ -199,6 +199,8 @@ const connectionTests = [
     name: 'postgresql-connection',
     plugin: 'postgresql-database-plugin',
     url: `postgresql://{{username}}:{{password}}@localhost:5432/postgres?sslmode=disable`,
+    username: 'username',
+    password: 'password',
     assertCount: 7,
     requiredFields: async (assert, name) => {
       assert.dom('[data-test-input="username"]').exists(`Username field exists for ${name}`);
@@ -269,13 +271,19 @@ module('Acceptance | secrets/database/*', function (hooks) {
       await connectionPage.dbPlugin(testCase.plugin);
       assert.dom('[data-test-empty-state]').doesNotExist('Empty state goes away after plugin selected');
       await connectionPage.name(testCase.name);
+
+      // elasticsearch has a special url field
       if (testCase.plugin === 'elasticsearch-database-plugin') {
         await connectionPage.url(testCase.url);
-        await connectionPage.username(testCase.elasticUser);
-        await connectionPage.password(testCase.elasticPassword);
       } else {
         await connectionPage.connectionUrl(testCase.url);
       }
+
+      // elasticsearch and postgres require username and password set in order to save
+      if (testCase.username) {
+        await connectionPage.username(testCase.username);
+        await connectionPage.password(testCase.password);
+      }
       testCase.requiredFields(assert, testCase.plugin);
       assert.dom('[data-test-input="verify_connection"]').isChecked('verify is checked');
       await connectionPage.toggleVerify();