UI: Part 5 - hds adoption replace <Modal>

ui/lib/core/addon/components/confirmation-modal.hbs

@@ -3,40 +3,45 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<Modal @title={{@title}} @onClose={{@onClose}} @isActive={{@isActive}} @type={{this.type}} @showCloseButton={{true}}>
-  <section class="modal-card-body">
-    {{yield}}
-    <div class="modal-confirm-section">
-      <p class="has-text-weight-semibold is-size-6">
-        Confirm
-      </p>
-      <p class="sub-text has-top-bottom-margin-xxs">Type
-        <strong>{{this.confirmText}}</strong>
-        to confirm
-        {{this.toConfirmMsg}}</p>
-      <Input
-        @type="text"
-        @value={{this.confirmationInput}}
-        name="confirmationInput"
-        class="input has-margin-top"
-        autocomplete="off"
-        spellcheck="false"
-        data-test-confirmation-modal-input={{or @title true}}
-      />
-    </div>
-  </section>
-  <footer class="modal-card-foot modal-card-foot-outlined">
-    <button
-      type="button"
-      class="button {{this.buttonClass}}"
-      disabled={{not-eq this.confirmationInput this.confirmText}}
-      {{on "click" @onConfirm}}
-      data-test-confirm-button={{or @title true}}
-    >
-      {{this.buttonText}}
-    </button>
-    <button type="button" class="button is-secondary" {{on "click" @onClose}} data-test-cancel-button>
-      Cancel
-    </button>
-  </footer>
-</Modal>
+{{#if @isActive}}
+  <Hds::Modal id="confirmation-modal" @onClose={{@onClose}} @color="critical" as |M|>
+    <M.Header @icon="alert-triangle">
+      {{@title}}
+    </M.Header>
+    <M.Body>
+      {{yield}}
+      <div class="modal-confirm-section">
+        <p class="has-text-weight-semibold is-size-6">
+          Confirm
+        </p>
+        <p class="sub-text has-top-bottom-margin-xxs">Type
+          <strong>{{@confirmText}}</strong>
+          to confirm
+          {{@toConfirmMsg}}
+        </p>
+        <Input
+          @type="text"
+          @value={{this.confirmationInput}}
+          name="confirmationInput"
+          class="input has-margin-top"
+          autocomplete="off"
+          spellcheck="false"
+          data-test-confirmation-modal-input={{@title}}
+        />
+      </div>
+    </M.Body>
+    <M.Footer>
+      <Hds::ButtonSet>
+        <Hds::Button
+          @color="critical"
+          type="button"
+          disabled={{not-eq this.confirmationInput @confirmText}}
+          {{on "click" @onConfirm}}
+          data-test-confirm-button={{@title}}
+          @text={{or @buttonText "Confirm"}}
+        />
+        <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onClose}} data-test-cancel-button />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}

ui/lib/core/addon/components/confirmation-modal.js

@@ -2,11 +2,13 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
+import { assert } from '@ember/debug';
 
 import Component from '@glimmer/component';
 /**
  * @module ConfirmationModal
- * ConfirmationModal components are used to provide an alternative to ConfirmationButton that automatically prompts the user to fill in confirmation text before they can continue with a potentially destructive action. It is built off the Modal component
+ * ConfirmationModal components wrap the <Hds::Modal> component to present a critical (red) type-to-confirm modal.
+ * They are used for extremely destructive actions that require extra consideration before confirming.
  *
  * @example
  * ```js
@@ -15,38 +17,22 @@ import Component from '@glimmer/component';
  *   @title="Do Dangerous Thing?"
  *   @isActive={{isModalActive}}
  *   @onClose={{action (mut isModalActive) false}}
+ *   @confirmText="yes"
  *   @onConfirmMsg="deleting this thing to delete."
  * />
  * ```
  * @param {function} onConfirm - onConfirm is the action that happens when user clicks onConfirm after filling in the confirmation block
  * @param {function} onClose - specify what to do when user attempts to close modal
  * @param {boolean} isActive - Controls whether the modal is "active" eg. visible or not.
  * @param {string} title - Title of the modal
- * @param {string} [confirmText=Yes] - The confirmation text that the user must type before continuing
- * @param {string} [toConfirmMsg=''] - Finishes the sentence "Type <confirmText> to confirm <toConfirmMsg>", default is an empty string (ex. 'secret deletion')
+ * @param {string} confirmText - The confirmation text that the user must type before continuing
+ * @param {string} [toConfirmMsg] - Finishes the sentence "Type <confirmText> to confirm <toConfirmMsg>", default is an empty string (ex. 'secret deletion')
  * @param {string} [buttonText=Confirm] - Button text on the confirm button
- * @param {string} [buttonClass=is-danger] - extra class to add to confirm button (eg. "is-danger")
- * @param {string} [type=warning] - The header styling based on type, passed into the message-types helper (in the Modal component).
  */
 
 export default class ConfirmationModal extends Component {
-  get buttonClass() {
-    return this.args.buttonClass || 'is-danger';
-  }
-
-  get buttonText() {
-    return this.args.buttonText || 'Confirm';
-  }
-
-  get confirmText() {
-    return this.args.confirmText || 'Yes';
-  }
-
-  get type() {
-    return this.args.type || 'warning';
-  }
-
-  get toConfirmMsg() {
-    return this.args.toConfirmMsg || '';
+  constructor() {
+    super(...arguments);
+    assert('@confirmText is required', this.args.confirmText);
   }
 }

ui/lib/core/addon/templates/components/replication-action-demote.hbs

@@ -30,7 +30,6 @@
   @title="Demote to secondary?"
   @onClose={{action (mut this.isModalActive) false}}
   @isActive={{this.isModalActive}}
-  @buttonClass="is-primary"
   @confirmText={{this.model.replicationModeForDisplay}}
   @toConfirmMsg="demoting this cluster"
   @onConfirm={{action "onSubmit" "demote" this.model.replicationAttrs.modeForUrl}}

ui/lib/pki/addon/components/page/pki-configuration-details.hbs

@@ -111,19 +111,18 @@
 
 {{#if this.showDeleteAllIssuers}}
   <ConfirmationModal
-    @title="Delete All Issuers?"
+    @title="Delete all issuers?"
     @toConfirmMsg="deleting all issuers and keys."
-    @buttonText="Confirm"
     @confirmText="delete-all"
     @isActive={{this.showDeleteAllIssuers}}
     @onClose={{action (mut this.showDeleteAllIssuers) false}}
     @onConfirm={{this.deleteAllIssuers}}
   >
-    <section class="modal-card-custom">
+    <p>
       This endpoint deletes
       <strong>all</strong>
       issuers and keys within the mount. It is highly recommended to use the individual delete operations instead. This mount
       will be unusable until new issuers and keys are provisioned.
-    </section>
+    </p>
   </ConfirmationModal>
 {{/if}}