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
hashicorp · Sep 28, 2023 · fc7ded2 · fc7ded2
1 parent 25985e7
commit fc7ded2
Show file tree

Hide file tree

Showing 19 changed files with 315 additions and 388 deletions.
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/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}} />
+    </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/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
@@ -24,29 +24,3 @@
     color: $black;
   }
 }
-
-.link-status {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: $size-7;
-  font-weight: $font-weight-semibold;
-
-  &.connected {
-    background-color: var(--token-color-surface-action);
-    color: var(--token-color-foreground-action-active);
-
-    a {
-      color: var(--token-color-foreground-action-active);
-    }
-  }
-  &.warning {
-    background-color: var(--token-color-surface-warning);
-    color: var(--token-color-palette-amber-300);
-
-    a {
-      color: var(--token-color-palette-amber-300);
-    }
-  }
-}
diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
@@ -332,6 +332,7 @@ a.button.disabled {
   }
 }
 
+// TODO HDS adoption cleanup: audit styles with design and see what to keep/remove once buttons are fully HDS
 // Existing class on <Hds::Copy::Button> component, modifying to match existing UI Structure buttons
 .hds-copy-button {
   font-weight: $font-weight-semibold;
@@ -386,3 +387,18 @@ a.button.disabled {
     }
   }
 }
+
+// Existing class on <Hds::Button> component, modifying to match existing UI Structure buttons
+.hds-button {
+  &.toolbar-button {
+    font-weight: $font-weight-semibold;
+    background: none;
+    border: none;
+    box-shadow: none;
+    &:hover:not(.disabled) {
+      background-color: $ui-gray-100;
+      border: 0;
+      color: $blue;
+    }
+  }
+}
diff --git a/ui/app/templates/components/clients/attribution.hbs b/ui/app/templates/components/clients/attribution.hbs
@@ -15,14 +15,12 @@
     </div>
     <div class="header-right">
       {{#if this.hasCsvData}}
-        <button
+        <Hds::Button
           data-test-attribution-export-button
-          type="button"
-          class="button is-secondary"
+          @text="Export attribution data"
+          @color="secondary"
           {{on "click" (fn (mut this.showCSVDownloadModal) true)}}
-        >
-          Export attribution data
-        </button>
+        />
       {{/if}}
     </div>
   </div>
@@ -91,41 +89,41 @@
 </div>
 
 {{! MODAL FOR CSV DOWNLOAD }}
-<Modal
-  @title="Export attribution data"
-  @type="info"
-  @isActive={{this.showCSVDownloadModal}}
-  @showCloseButton={{true}}
-  @onClose={{action (mut this.showCSVDownloadModal) false}}
->
-  <section class="modal-card-body">
-    <p class="has-bottom-margin-s">
-      This export will include the namespace path, authentication method path, and the associated total, entity, and
-      non-entity clients for the below
-      {{if this.formattedEndDate "date range" "month"}}.
-    </p>
-    <p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if this.formattedEndDate " RANGE"}}</p>
-    <p class="has-bottom-margin-s">{{this.formattedStartDate}} {{if this.formattedEndDate "-"}} {{this.formattedEndDate}}</p>
-  </section>
-  <footer class="modal-card-foot modal-card-foot-outlined">
-    <button type="button" class="button is-primary" {{on "click" (fn this.exportChartData this.formattedCsvFileName)}}>
-      Export
-    </button>
-    <button type="button" class="button is-secondary" onclick={{action (mut this.showCSVDownloadModal) false}}>
-      Cancel
-    </button>
-    {{#if @upgradeExplanation}}
-      <div class="has-text-grey is-size-8">
-        <AlertInline @type="warning" @isMarginless={{true}}>
-          Your data contains an upgrade.
-          <DocLink
-            @path="/vault/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
-          >
-            Learn more here.
-          </DocLink>
-        </AlertInline>
-        <p class="has-left-padding-l">{{@upgradeExplanation}}</p>
-      </div>
-    {{/if}}
-  </footer>
-</Modal>
+{{#if this.showCSVDownloadModal}}
+  <Hds::Modal id="attribution-csv-download-modal" @onClose={{fn (mut this.showCSVDownloadModal) false}} as |M|>
+    <M.Header @icon="info" data-test-export-modal-title>
+      Export attribution data
+    </M.Header>
+    <M.Body>
+      <p class="has-bottom-margin-s">
+        This export will include the namespace path, authentication method path, and the associated total, entity, and
+        non-entity clients for the below
+        {{if this.formattedEndDate "date range" "month"}}.
+      </p>
+      <p class="has-bottom-margin-s is-subtitle-gray">SELECTED DATE {{if this.formattedEndDate " RANGE"}}</p>
+      <p class="has-bottom-margin-s" data-test-export-date-range>
+        {{this.formattedStartDate}}
+        {{if this.formattedEndDate "-"}}
+        {{this.formattedEndDate}}</p>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button @text="Export" {{on "click" (fn this.exportChartData this.formattedCsvFileName)}} />
+        <Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} />
+      </Hds::ButtonSet>
+      {{#if @upgradeExplanation}}
+        <div class="has-text-grey is-size-8 has-top-padding-m">
+          <AlertInline @type="warning">
+            Your data contains an upgrade.
+            <DocLink
+              @path="/vault/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
+            >
+              Learn more here.
+            </DocLink>
+          </AlertInline>
+          <p class="has-left-padding-l">{{@upgradeExplanation}}</p>
+        </div>
+      {{/if}}
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}