UI: HDS adoption replace <Modal> (#23382)

* UI: Part 1 - hds adoption replace <Modal> (#23363) * replace policy-form modal * replace clients/attribution modal * clients/config modal * scope form odal * remove button type * include toolbar to match other example templates * rotate credentials modal * add toolbar button class for hds buttons * transformation-edit modal * add back test selector * add route arg to button! * update link status * fix link-status tests * remove prevent default * update db tests * update tests * use page alert for hcp link status banner * fix scopy button selector * fix sidebar test * change to neutral banner * UI: Part 2 - hds adoption replace <Modal> (#23398) * upgrade HDS library (adds support for snippet containers * cleanup flight icons * replace transit key action modals * re-add deps as devDeps * remove line * address transit tests * UI: Part 3 - hds adoption replace <Modal> (#23415) * cleanup css * cleanup extra type attr * masked input download modal * use Hds::Button in download button" * fix size of modal * tiny icon fix * refactor download button to always render download icon * update tests * UI: Part 3.5 - hds adoption replace <Modal> (#23448) * replication-promote modal * replication component modals * replication add secondary modal * move update text for diff * UI: Part 4 - hds adoption replace <Modal> (#23451) * k8 configure modal * kv delete modal * ldap modals * pki modals * add trash icon * move deps * UI: Part 5 - hds adoption replace <Modal> (#23471) * replace confirmation modals --------- * UI: Part 6 - hds adoption replace <Modal> (#23484) * search select with modal * policy search select modal * replace date dropdown for client dashboard * change padding to top * update policy example args * lolllll test typo wow * update dropdown tests * shamir flow modals! * add one more container * update test selectors * UI: Final hds adoption replace <Modal> cleanup PR (#23522) * search select with modal * policy search select modal * replace date dropdown for client dashboard * change padding to top * update policy example args * lolllll test typo wow * update dropdown tests * shamir flow modals! * add one more container * update test selectors * remove wormhole and modal component * fix selectors * uninstall wormhole * remove shamir-modal-flow class * fix confirm modal test * fix pki and kv test * fix toolbar selector kv * client and download button test * fix-confirmation-modal-padding * fix replication modal tests so relevant modal opens (#23540) * more confirmation modal tests * adds changelog
hashicorp · Oct 6, 2023 · 43258c2 · 43258c2
1 parent 92fcfda
commit 43258c2
Show file tree

Hide file tree

Showing 120 changed files with 1,537 additions and 2,156 deletions.
diff --git a/changelog/23382.txt b/changelog/23382.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Makes modals accessible by implementing Helios Design System modal component
+```
diff --git a/ui/app/components/database-connection.js b/ui/app/components/database-connection.js
@@ -73,15 +73,15 @@ export default class DatabaseConnectionEdit extends Component {
   }
 
   @action
-  continueWithoutRotate(evt) {
-    evt.preventDefault();
+  continueWithoutRotate() {
+    this.showSaveModal = false;
     const { name } = this.args.model;
     this.transitionToRoute(SHOW_ROUTE, name);
   }
 
   @action
-  continueWithRotate(evt) {
-    evt.preventDefault();
+  continueWithRotate() {
+    this.showSaveModal = false;
     const { backend, name } = this.args.model;
     this.rotateCredentials(backend, name)
       .then(() => {

diff --git a/ui/app/components/date-dropdown.js b/ui/app/components/date-dropdown.js
@@ -15,10 +15,9 @@ import timestamp from 'core/utils/timestamp';
  *
  * @example
  * ```js
- * <DateDropdown @handleSubmit={{this.actionFromParent}} @name="startTime" @submitText="Save" @handleCancel={{this.onCancel}}/>
+ * <DateDropdown @handleSubmit={{this.actionFromParent}} @name="startTime" @submitText="Save" />
  * ```
  * @param {function} handleSubmit - callback function from parent that the date picker triggers on submit
- * @param {function} [handleCancel] - optional callback for cancel action, if exists then buttons appear modal style with a light gray background
  * @param {string} [dateType] - optional argument to give the selected month/year a type
  * @param {string} [submitText] - optional argument to change submit button text
  * @param {function} [validateDate] - parent function to validate date selection, receives date object and returns an error message that's passed to the inline alert
@@ -69,12 +68,6 @@ export default class DateDropdown extends Component {
     this.resetDropdown();
   }
 
-  @action
-  handleCancel() {
-    this.args.handleCancel();
-    this.resetDropdown();
-  }
-
   resetDropdown() {
     this.maxMonthIdx = 11;
     this.disabledYear = null;

diff --git a/ui/app/components/modal-form/policy-template.hbs b/ui/app/components/modal-form/policy-template.hbs
@@ -32,7 +32,7 @@
   </nav>
 {{/if}}
 {{#if this.showExamplePolicy}}
-  <PolicyExample @policyType={{this.policy.policyType}} />
+  <PolicyExample @policyType={{this.policy.policyType}} @container="#search-select-modal" />
 {{else}}
   <Select
     @name="policyType"

diff --git a/ui/app/components/policy-form.hbs b/ui/app/components/policy-form.hbs
@@ -23,11 +23,24 @@
       </div>
     {{/if}}
     <div class="field">
-      {{#if @model.isNew}}
-        <Toolbar>
-          <label class="has-text-weight-bold">Policy</label>
-          <ToolbarActions>
-            <div class="toolbar-separator"></div>
+      <Toolbar>
+        <label class="has-text-weight-bold has-right-margin-xxs">Policy</label>
+        {{#if @renderPolicyExampleModal}}
+          {{! only true in policy create and edit routes }}
+          <ToolbarFilters>
+            <Hds::Button
+              @text="How to write a policy"
+              @icon="bulb"
+              @size="small"
+              @color="tertiary"
+              {{on "click" (fn (mut this.showTemplateModal))}}
+              data-test-policy-example-button
+            />
+          </ToolbarFilters>
+        {{/if}}
+        <ToolbarActions>
+          <div class="toolbar-separator"></div>
+          {{#if @model.isNew}}
             <div class="control is-flex">
               <Input
                 id="fileUploadToggle"
@@ -40,25 +53,24 @@
               />
               <label for="fileUploadToggle">Upload file</label>
             </div>
-          </ToolbarActions>
-        </Toolbar>
-        {{#if this.showFileUpload}}
-          <TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} />
-        {{else}}
-          <JsonEditor
-            @title="Policy"
-            @showToolbar={{false}}
-            @value={{@model.policy}}
-            @valueUpdated={{action (mut @model.policy)}}
-            @mode="ruby"
-            @extraKeys={{hash Shift-Enter=(perform this.save)}}
-            data-test-policy-editor
-          />
-        {{/if}}
+          {{else}}
+            {{! EDITING - no file upload toggle}}
+            <Hds::Copy::Button
+              @text="Copy"
+              @isIconOnly={{true}}
+              @textToCopy={{@model.policy}}
+              class="transparent"
+              data-test-copy-button
+            />
+          {{/if}}
+        </ToolbarActions>
+      </Toolbar>
+      {{#if this.showFileUpload}}
+        <TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} />
       {{else}}
-        {{! EDITING - no file upload toggle}}
         <JsonEditor
           @title="Policy"
+          @showToolbar={{false}}
           @value={{@model.policy}}
           @valueUpdated={{action (mut @model.policy)}}
           @mode="ruby"
@@ -70,36 +82,6 @@
         <span class="is-size-9 has-text-grey has-bottom-margin-l">
           You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field.
         </span>
-        {{! Only renders button (and modal) if not already in the "create policy" modal }}
-        {{#if @renderPolicyExampleModal}}
-          <span class="is-size-9 has-text-grey has-bottom-margin-l">
-            See
-            <button
-              type="button"
-              class="text-button has-text-info"
-              {{on "click" (fn (mut this.showTemplateModal))}}
-              data-test-policy-example-button
-            >
-              example template
-            </button>.
-          </span>
-          {{! Only renders more information if already in the "create policy" modal }}
-        {{else}}
-          <p class="has-top-margin-l">
-            More information about
-            {{uppercase @model.policyType}}
-            policies can be found
-            <DocLink
-              @path={{if
-                (eq @model.policyType "acl")
-                "/vault/docs/concepts/policies#capabilities"
-                "/vault/tutorials/policies/sentinel#role-governing-policies-rgps"
-              }}
-            >
-              here.
-            </DocLink>
-          </p>
-        {{/if}}
       </div>
     </div>
     {{#each @model.additionalAttrs as |attr|}}
@@ -128,26 +110,26 @@
     </div>
   </div>
 </form>
-{{! SAMPLE POLICY MODAL. Only renders modal if not already in create policy modal }}
-{{#if @renderPolicyExampleModal}}
-  <Modal
-    @title="Example {{uppercase @model.policyType}} Policy"
+
+{{! SAMPLE POLICY MODAL. Only renders in policy create and edit routes }}
+{{#if this.showTemplateModal}}
+  <Hds::Modal
+    id="policy-example-modal"
+    @size="large"
     @onClose={{fn (mut this.showTemplateModal) false}}
-    @isActive={{this.showTemplateModal}}
-    @showCloseButton={{true}}
     data-test-policy-example-modal
+    as |M|
   >
-    <section class="modal-card-body">
-      {{! code-mirror modifier does not render value initially until focus event fires }}
-      {{! wait until the Modal is rendered and then show the PolicyExample (contains JsonEditor) }}
-      {{#if this.showTemplateModal}}
-        <PolicyExample @policyType={{@model.policyType}} />
-      {{/if}}
-    </section>
-    <div class="modal-card-head has-border-top-light">
-      <button type="button" class="button" {{on "click" (fn (mut this.showTemplateModal) false)}} data-test-close-modal>
-        Close
-      </button>
-    </div>
-  </Modal>
+    <M.Header data-test-modal-title>
+      Example
+      {{uppercase @model.policyType}}
+      Policy
+    </M.Header>
+    <M.Body>
+      <PolicyExample @policyType={{@model.policyType}} @container="#policy-example-modal" />
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::Button @text="Close" {{on "click" F.close}} data-test-modal-close-button />
+    </M.Footer>
+  </Hds::Modal>
 {{/if}}
diff --git a/ui/app/components/sidebar/frame.hbs b/ui/app/components/sidebar/frame.hbs
@@ -46,7 +46,6 @@
   </Frame.Sidebar>
   <Frame.Main id="app-main-content" class={{if this.console.isOpen "main--console-open"}}>
     {{! outlet for app content }}
-    <div id="modal-wormhole"></div>
     <LinkStatus @status={{this.currentCluster.cluster.hcpLinkStatus}} />
     {{yield}}
     <div data-test-console-panel class={{if this.console.isOpen "panel-open"}}>

diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss
@@ -48,25 +48,19 @@
   background-color: transparent;
 }
 
-.button.masked-input-toggle,
-.button.download-button {
+.button.masked-input-toggle {
   min-width: $spacing-xl;
   border-left: 0;
   color: $grey;
   box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
 }
 
-.button.download-button {
-  border-radius: 0;
-}
-
 .button.masked-input-toggle {
   border-radius: 0 $radius $radius 0;
 }
 
 .display-only {
-  .button.masked-input-toggle,
-  .button.download-button {
+  .button.masked-input-toggle {
     background: transparent;
     height: auto;
     line-height: 1rem;