UI: Adding warn modal for rotating a static role immediately (#30119)

* adding warn modal to static role

* changelog

* update modal text

* moved hbs, removed action, updated to action

* removing extra spacing

changelog/30119.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui/database: Adding warning modal pop up when creating a static role that will be rotated immediately
+```

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

@@ -108,7 +108,7 @@
 {{else}}
   {{! Edit or Create }}
   <div class="box is-sideless is-fullwidth is-marginless">
-    <form {{on "submit" (perform this.handleCreateEditRole)}}>
+    <form {{on "submit" this.handleCreateEditRole}}>
       <MessageError @errorMessage={{this.errorMessage}} />
       {{#each @model.fieldAttrs as |attr|}}
         {{#if (eq @mode "edit")}}
@@ -194,4 +194,23 @@
       </div>
     </form>
   </div>
+{{/if}}
+
+{{#if this.saveIssuerWarning}}
+  <Hds::Modal @color="warning" @onClose={{fn (mut this.saveIssuerWarning) ""}} data-test-issuer-warning as |M|>
+    <M.Header @icon="alert-circle">
+      Are you sure?
+    </M.Header>
+    <M.Body>
+      <p data-test-issuer-warning-message>
+        {{this.saveIssuerWarning}}
+      </p>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button @text="Continue" {{on "click" this.continueSubmitForm}} data-test-issuer-save />
+        <Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} data-test-issuer-cancel />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
 {{/if}}

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

@@ -35,6 +35,7 @@ export default class DatabaseRoleEdit extends Component {
   @tracked modelValidations;
   @tracked invalidFormAlert;
   @tracked errorMessage = '';
+  @tracked saveIssuerWarning = '';
 
   constructor() {
     super(...arguments);
@@ -83,6 +84,11 @@ export default class DatabaseRoleEdit extends Component {
       .catch(() => null);
   }
 
+  @action continueSubmitForm() {
+    this.saveIssuerWarning = '';
+    this.saveRole.perform();
+  }
+
   @action
   generateCreds(roleId, roleType = '') {
     this.router.transitionTo('vault.cluster.secrets.backend.credentials', roleId, {
@@ -108,12 +114,25 @@ export default class DatabaseRoleEdit extends Component {
       });
   }
 
-  handleCreateEditRole = task(
-    waitFor(async (evt) => {
-      evt.preventDefault();
-      this.resetErrors();
+  @action
+  async handleCreateEditRole(evt) {
+    evt.preventDefault();
+    this.resetErrors();
+    const { mode, model } = this.args;
+    if (!this.isValid()) return;
+
+    // if we're creating and rotating a static role immediately, warn user
+    if (!model.skip_import_rotation && model.type === 'static' && mode === 'create') {
+      this.saveIssuerWarning =
+        "You have enabled 'Rotate immediately' for this static role. Vault will update the password immediately after you save. NOTE: This will disrupt any active use of this role outside of Vault.";
+      return;
+    }
+    await this.saveRole.perform();
+  }
+
+  saveRole = task(
+    waitFor(async () => {
       const { mode, model } = this.args;
-      if (!this.isValid()) return;
 
       if (mode === 'create') {
         model.id = model.name;

ui/tests/integration/components/database-role-edit-test.js

@@ -104,13 +104,16 @@ module('Integration | Component | database-role-edit', function (hooks) {
     assert.dom('[data-test-value-div="Rotate immediately"]').containsText('No');
   });
 
-  test('enterprise: it should successfully create user that does rotate immediately', async function (assert) {
+  test('enterprise: it should successfully create user that does rotate immediately & verify warning modal pops up', async function (assert) {
     this.version.type = 'enterprise';
     this.server.post('/sys/capabilities-self', capabilitiesStub('database/static-creds/my-role', ['create']));
 
     await render(hbs`<DatabaseRoleEdit @model={{this.modelStatic}} @mode="create"/>`);
     await click('[data-test-secret-save]');
 
+    assert.dom('[data-test-issuer-warning]').exists(); // check if warning modal shows after clicking save
+    await click('[data-test-issuer-save]'); // click continue button on modal
+
     await render(hbs`<DatabaseRoleEdit @model={{this.modelStatic}} @mode="show"/>`);
     assert.dom('[data-test-value-div="Rotate immediately"]').containsText('Yes');
   });