UI: Part 4 - hds adoption replace <Modal> (#23451)

* k8 configure modal * kv delete modal * ldap modals * pki modals * add trash icon
hashicorp · Oct 3, 2023 · f909b49 · f909b49
1 parent 146e7e4
commit f909b49
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 275 deletions.
diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
@@ -91,12 +91,6 @@
     color: $red-500;
   }
 
-  &.is-warning-outlined {
-    background-color: $yellow-010;
-    border: 1px solid $yellow-700;
-    color: $yellow-700;
-  }
-
   &.is-flat {
     min-width: auto;
     border: none;

diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss
@@ -170,3 +170,10 @@ form {
 label {
   cursor: pointer;
 }
+
+// HDS modifications
+.hds-modal {
+  // if a component contains a modal, the modal inherits styling from the parent container
+  // i.e. if a toolbar button opens a modal
+  white-space: wrap;
+}
diff --git a/ui/lib/core/addon/helpers/message-types.js b/ui/lib/core/addon/helpers/message-types.js
@@ -37,11 +37,6 @@ export const MESSAGE_TYPES = {
     glyph: 'loading',
     text: 'Loading',
   },
-  rotation: {
-    class: 'is-info',
-    glyphClass: 'has-text-grey',
-    glyph: 'rotate-cw',
-  },
 };
 
 export function messageTypes([type]) {

diff --git a/ui/lib/kubernetes/addon/components/page/configure.hbs b/ui/lib/kubernetes/addon/components/page/configure.hbs
@@ -103,26 +103,21 @@
 </div>
 
 {{#if this.showConfirm}}
-  <Modal
-    @title="Edit configuration"
-    @type="warning"
-    @isActive={{this.showConfirm}}
-    @showCloseButton={{true}}
-    @onClose={{fn (mut this.showConfirm) false}}
-  >
-    <section class="modal-card-body">
+  <Hds::Modal id="kubernetes-edit-config-modal" @onClose={{fn (mut this.showConfirm) false}} @color="warning" as |M|>
+    <M.Header @icon="alert-triangle">
+      Edit configuration
+    </M.Header>
+    <M.Body>
       <p>
         Making changes to your configuration may affect how Vault will reach the Kubernetes API and authenticate with it. Are
         you sure?
       </p>
-    </section>
-    <footer class="modal-card-foot modal-card-foot-outlined">
-      <button data-test-config-confirm type="button" class="button is-primary" {{on "click" (perform this.save)}}>
-        Confirm
-      </button>
-      <button type="button" class="button" onclick={{fn (mut this.showConfirm) false}}>
-        Cancel
-      </button>
-    </footer>
-  </Modal>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button data-test-config-confirm {{on "click" (perform this.save)}} @text="Confirm" />
+        <Hds::Button {{on "click" F.close}} @color="secondary" @text="Cancel" />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
 {{/if}}
diff --git a/ui/lib/kv/addon/components/kv-delete-modal.hbs b/ui/lib/kv/addon/components/kv-delete-modal.hbs
@@ -1,16 +1,23 @@
-<button type="button" class="toolbar-link" {{on "click" (fn (mut this.modalOpen) true)}} data-test-kv-delete={{@mode}}>
-  {{yield}}
-</button>
+<Hds::Button
+  @text={{or @text (capitalize @mode)}}
+  @color="secondary"
+  class="toolbar-button"
+  {{on "click" (fn (mut this.modalOpen) true)}}
+  data-test-kv-delete={{@mode}}
+/>
+
 {{#if this.modalOpen}}
-  <Modal
-    @title={{this.modalDisplay.title}}
+  <Hds::Modal
+    id="kv-delete-modal-{{@mode}}"
+    @color={{this.modalDisplay.color}}
     @onClose={{fn (mut this.modalOpen) false}}
-    @isActive={{this.modalOpen}}
-    @type={{this.modalDisplay.type}}
-    @showCloseButton={{true}}
     data-test-delete-modal
+    as |M|
   >
-    <section class="modal-card-body">
+    <M.Header @icon="trash">
+      {{this.modalDisplay.title}}
+    </M.Header>
+    <M.Body>
       <p class="has-bottom-margin-s">
         {{this.modalDisplay.intro}}
       </p>
@@ -45,19 +52,19 @@
           {{/each}}
         </div>
       {{/if}}
-    </section>
-    <footer class="modal-card-foot modal-card-foot-outlined">
-      <button
-        type="button"
-        class="button {{if (eq this.modalDisplay.type 'danger') 'is-danger-outlined' 'is-warning-outlined'}}"
-        {{on "click" this.onDelete}}
-        data-test-delete-modal-confirm
-      >
-        Confirm
-      </button>
-      <button type="button" class="button is-secondary" {{on "click" (fn (mut this.modalOpen) false)}}>
-        Cancel
-      </button>
-    </footer>
-  </Modal>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button
+          @text="Confirm"
+          {{on "click" this.onDelete}}
+          @color={{if (eq this.modalDisplay.color "critical") this.modalDisplay.color}}
+          data-test-delete-modal-confirm
+        />
+
+        <Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} />
+
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
 {{/if}}
diff --git a/ui/lib/kv/addon/components/kv-delete-modal.js b/ui/lib/kv/addon/components/kv-delete-modal.js
@@ -21,6 +21,7 @@ import { assert } from '@ember/debug';
  * @param {string} mode - delete, delete-metadata, or destroy.
  * @param {object} secret - The kv/data model.
  * @param {object} [metadata] - The kv/metadata model. It is only required when mode is "delete" or "metadata-delete".
+ * @param {string} [text] - Button text that renders in KV v2 toolbar, defaults to capitalize @mode
  * @param {callback} onDelete - callback function fired to handle delete event.
  */
 
@@ -34,20 +35,20 @@ export default class KvDeleteModal extends Component {
       case 'delete':
         return {
           title: 'Delete version?',
-          type: 'warning',
+          color: 'warning',
           intro:
             'There are two ways to delete a version of a secret. Both delete actions can be undeleted later. How would you like to proceed?',
         };
       case 'destroy':
         return {
           title: 'Destroy version?',
-          type: 'danger',
+          color: 'critical',
           intro: `This action will permanently destroy Version ${this.args.version} of the secret, and the secret data cannot be read or recovered later.`,
         };
       case 'delete-metadata':
         return {
           title: 'Delete metadata and secret data?',
-          type: 'danger',
+          color: 'critical',
           intro:
             'This will permanently delete the metadata and versions of the secret. All version history will be removed. This cannot be undone.',
         };

diff --git a/ui/lib/kv/addon/components/page/secret/details.hbs b/ui/lib/kv/addon/components/page/secret/details.hbs
@@ -34,14 +34,10 @@
         @metadata={{@metadata}}
         @onDelete={{this.handleDestruction}}
         @version={{this.version}}
-      >
-        Delete
-      </KvDeleteModal>
+      />
     {{/if}}
     {{#if this.showDestroy}}
-      <KvDeleteModal @mode="destroy" @secret={{@secret}} @onDelete={{this.handleDestruction}} @version={{this.version}}>
-        Destroy
-      </KvDeleteModal>
+      <KvDeleteModal @mode="destroy" @secret={{@secret}} @onDelete={{this.handleDestruction}} @version={{this.version}} />
     {{/if}}
     {{#if (or @secret.canReadData @secret.canReadMetadata @secret.canEditData)}}
       <div class="toolbar-separator"></div>

diff --git a/ui/lib/kv/addon/components/page/secret/metadata/details.hbs b/ui/lib/kv/addon/components/page/secret/metadata/details.hbs
@@ -10,9 +10,12 @@
 
   <:toolbarActions>
     {{#if @secret.canDeleteMetadata}}
-      <KvDeleteModal @mode="delete-metadata" @metadata={{@metadata}} @onDelete={{this.onDelete}}>
-        Permanently delete
-      </KvDeleteModal>
+      <KvDeleteModal
+        @mode="delete-metadata"
+        @metadata={{@metadata}}
+        @onDelete={{this.onDelete}}
+        @text="Permanently delete"
+      />
     {{/if}}
     {{#if @secret.canUpdateMetadata}}
       <ToolbarLink @route="secret.metadata.edit" data-test-edit-metadata>Edit metadata</ToolbarLink>

diff --git a/ui/lib/ldap/addon/components/accounts-checked-out.hbs b/ui/lib/ldap/addon/components/accounts-checked-out.hbs
@@ -39,37 +39,35 @@
 </OverviewCard>
 
 {{#if this.selectedStatus}}
-  <Modal
-    @title="Account Check-in"
-    @isActive={{this.selectedStatus}}
-    @showCloseButton={{true}}
-    @onClose={{fn (mut this.selectedStatus) undefined}}
-  >
-    <section class="modal-card-body">
+  <Hds::Modal id="account-check-in-modal" @onClose={{fn (mut this.selectedStatus) undefined}} as |M|>
+    <M.Header>
+      Account Check-in
+    </M.Header>
+    <M.Body>
       <p>
         This action will check-in account
         {{this.selectedStatus.account}}
         back to the library. Do you want to proceed?
       </p>
-    </section>
-    <footer class="modal-card-foot modal-card-foot-outlined">
-      <button
-        type="button"
-        class="button is-primary {{if this.save.isRunning 'is-loading'}}"
-        disabled={{this.checkIn.isRunning}}
-        data-test-check-in-confirm
-        {{on "click" (perform this.checkIn)}}
-      >
-        Confirm
-      </button>
-      <button
-        type="button"
-        class="button"
-        disabled={{this.checkIn.isRunning}}
-        {{on "click" (fn (mut this.selectedStatus) "")}}
-      >
-        Cancel
-      </button>
-    </footer>
-  </Modal>
+    </M.Body>
+    <M.Footer>
+      <Hds::ButtonSet>
+        <Hds::Button
+          @icon={{if this.save.isRunning "is-loading"}}
+          disabled={{this.checkIn.isRunning}}
+          data-test-check-in-confirm
+          {{on "click" (perform this.checkIn)}}
+          @text="Confirm"
+        />
+        <Hds::Button
+          @icon={{if this.save.isRunning "is-loading"}}
+          @color="secondary"
+          disabled={{this.checkIn.isRunning}}
+          {{on "click" (fn (mut this.selectedStatus) "")}}
+          @text="Cancel"
+        />
+
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
 {{/if}}
diff --git a/ui/lib/ldap/addon/components/page/configure.hbs b/ui/lib/ldap/addon/components/page/configure.hbs
@@ -78,14 +78,11 @@
 </form>
 
 {{#if this.showRotatePrompt}}
-  <Modal
-    @title="Rotate your root password?"
-    @type="info"
-    @isActive={{this.showRotatePrompt}}
-    @showCloseButton={{true}}
-    @onClose={{fn (mut this.showRotatePrompt) false}}
-  >
-    <section class="modal-card-body">
+  <Hds::Modal id="ldap-rotate-password-modal" @onClose={{fn (mut this.showRotatePrompt) false}} as |M|>
+    <M.Header @icon="info">
+      Rotate your root password?
+    </M.Header>
+    <M.Body>
       <p>
         It’s best practice to rotate the administrator (root) password immediately after the initial configuration of the
         LDAP engine. The rotation will update the password both in Vault and your directory server. Once rotated,
@@ -95,19 +92,17 @@
       <p>
         Would you like to rotate your new credentials? You can also do this later.
       </p>
-    </section>
-    <footer class="modal-card-foot modal-card-foot-outlined">
-      <button
-        data-test-save-with-rotate
-        type="button"
-        class="button is-primary"
-        {{on "click" (fn (perform this.save) null true)}}
-      >
-        Save and rotate
-      </button>
-      <button data-test-save-without-rotate type="button" class="button" {{on "click" (fn (perform this.save) null false)}}>
-        Save without rotating
-      </button>
-    </footer>
-  </Modal>
+    </M.Body>
+    <M.Footer>
+      <Hds::ButtonSet>
+        <Hds::Button data-test-save-with-rotate @text="Save and rotate" {{on "click" (fn (perform this.save) null true)}} />
+        <Hds::Button
+          data-test-save-without-rotate
+          @text="Save without rotating"
+          @color="secondary"
+          {{on "click" (fn (perform this.save) null false)}}
+        />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
 {{/if}}
diff --git a/ui/lib/ldap/addon/components/page/library/details/accounts.hbs b/ui/lib/ldap/addon/components/page/library/details/accounts.hbs
@@ -54,32 +54,23 @@
 </div>
 
 {{#if this.showCheckOutPrompt}}
-  <Modal
-    @title="Account Check-out"
-    @isActive={{this.showCheckOutPrompt}}
-    @showCloseButton={{true}}
-    @onClose={{fn (mut this.showCheckOutPrompt) false}}
-  >
-    <section class="modal-card-body">
+  <Hds::Modal id="account-check-out-modal" @onClose={{fn (mut this.showCheckOutPrompt) false}} as |M|>
+    <M.Header>
+      Account Check-out
+    </M.Header>
+    <M.Body>
       <p>
         Current generated credential’s time-to-live is set at
         {{format-duration @library.ttl}}. You can set a different limit if you’d like:
       </p>
       <br />
       <TtlPicker @label="TTL" @hideToggle={{true}} @initialValue={{@library.ttl}} @onChange={{this.setTtl}} />
-    </section>
-    <footer class="modal-card-foot modal-card-foot-outlined">
-      <button data-test-check-out="save" type="button" class="button is-primary" {{on "click" this.checkOut}}>
-        Check-out
-      </button>
-      <button
-        data-test-check-out="cancel"
-        type="button"
-        class="button"
-        {{on "click" (fn (mut this.showCheckOutPrompt) false)}}
-      >
-        Cancel
-      </button>
-    </footer>
-  </Modal>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button data-test-check-out="save" @text="Check-out" {{on "click" this.checkOut}} />
+        <Hds::Button data-test-check-out="cancel" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
 {{/if}}