UI: Show error when connection roles fail to update on role create (#10980)

* Show error  when connection roles fail to update on role create

* Clean up errors for role, remove bad state setting after transition

* Add changelog

changelog/10980.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: better errors on Database secrets engine role create
+```

ui/app/adapters/database/role.js

@@ -127,11 +127,15 @@ export default ApplicationAdapter.extend({
     const backend = snapshot.attr('backend');
     const id = snapshot.attr('name');
     const db = snapshot.attr('database');
+    try {
       await this._updateAllowedRoles(store, {
         role: id,
         backend,
         db: db[0],
       });
+    } catch (e) {
+      throw new Error('Could not update allowed roles for selected database. Check Vault logs for details');
+    }
 
     return this.ajax(this.urlFor(backend, id, roleType), 'POST', { data }).then(() => {
       // ember data doesn't like 204s if it's not a DELETE

ui/app/components/database-connection.js

@@ -8,7 +8,7 @@ const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
 
 const getErrorMessage = errors => {
   let errorMessage = errors?.join('. ') || 'Something went wrong. Check the Vault logs for more information.';
-  if (errors?.join(' ').indexOf('failed to verify')) {
+  if (errorMessage.indexOf('failed to verify') >= 0) {
     errorMessage =
       'There was a verification error for this connection. Check the Vault logs for more information.';
   }

ui/app/components/database-role-edit.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 const LIST_ROOT_ROUTE = 'vault.cluster.secrets.backend.list-root';
 const SHOW_ROUTE = 'vault.cluster.secrets.backend.show';
@@ -9,6 +10,8 @@ export default class DatabaseRoleEdit extends Component {
   @service router;
   @service flashMessages;
 
+  @tracked loading = false;
+
   get warningMessages() {
     let warnings = {};
     if (this.args.model.canUpdateDb === false) {
@@ -54,26 +57,11 @@ export default class DatabaseRoleEdit extends Component {
       });
   }
 
-  @action
-  handleCreateRole(evt) {
-    evt.preventDefault();
-    let roleSecret = this.args.model;
-    let secretId = roleSecret.name;
-    roleSecret.set('id', secretId);
-    let path = roleSecret.type === 'static' ? 'static-roles' : 'roles';
-    roleSecret.set('path', path);
-    roleSecret.save().then(() => {
-      try {
-        this.router.transitionTo(SHOW_ROUTE, `role/${secretId}`);
-      } catch (e) {
-        console.debug(e);
-      }
-    });
-  }
-
   @action
   handleCreateEditRole(evt) {
     evt.preventDefault();
+    this.loading = true;
+
     const mode = this.args.mode;
     let roleSecret = this.args.model;
     let secretId = roleSecret.name;
@@ -82,12 +70,21 @@ export default class DatabaseRoleEdit extends Component {
       let path = roleSecret.type === 'static' ? 'static-roles' : 'roles';
       roleSecret.set('path', path);
     }
-    roleSecret.save().then(() => {
+    roleSecret
+      .save()
+      .then(() => {
         try {
           this.router.transitionTo(SHOW_ROUTE, `role/${secretId}`);
         } catch (e) {
           console.debug(e);
         }
+      })
+      .catch(e => {
+        const errorMessage = e.errors?.join('. ') || e.message;
+        this.flashMessages.danger(
+          errorMessage || 'Could not save the role. Please check Vault logs for more information.'
+        );
+        this.loading = false;
       });
   }
 }

ui/app/templates/components/database-role-edit.hbs

@@ -105,8 +105,8 @@
               <button
                 data-test-secret-save
                 type="submit"
-                {{!-- disabled={{this.missingFields}} // TODO validation --}}
-                class="button is-primary"
+                disabled={{this.loading}}
+                class="button is-primary {{if this.loading 'is-loading'}}"
               >
                 Save
               </button>