UI: Part 3 - hds adoption replace <Modal> #23415

hellobontempo · 2023-09-28T23:28:18Z

The modal in MaskedInput includes a DownloaButton so I opted to go ahead and implement <Hds::Button> there instead of wrangle CSS to accommodate me 😅

hellobontempo · 2023-09-28T23:32:54Z

ui/app/styles/core/buttons.scss

    box-shadow: none;
+    border: 1px solid transparent;


added so the copy button matches when <Hds::Button> has @color="tertiary" (the masked input eye hasn't been replaced yet)

Copy button doesn't have a @color=tertiary option so this styling will likely remain

hellobontempo · 2023-09-28T23:33:39Z

ui/app/templates/vault/cluster/init.hbs

@@ -95,15 +95,14 @@
            </div>
          {{/if}}
          <DownloadButton
-            class="button is-ghost"
+            @color="tertiary"


Most download actions have the icon trailing, so opted to make that a default instead of another arg to pass in

Changed this! HDS defaults to 'leading' so keeping that functionality to align with other products

hellobontempo · 2023-09-28T23:33:57Z

ui/app/templates/vault/cluster/policy/show.hbs

@@ -29,14 +29,14 @@
 <Toolbar>
  <ToolbarActions>
    <DownloadButton
-      class="toolbar-link"
+      class="toolbar-button"


hellobontempo · 2023-09-28T23:35:55Z

ui/lib/core/addon/components/masked-input.hbs

-    <button type="button" class="button download-button" {{on "click" (fn (mut this.modalOpen) true)}}>
-      <Icon data-test-download-icon @name="download" />
-    </button>
+    <Hds::Button


hellobontempo · 2023-09-28T23:38:07Z

ui/lib/core/addon/components/masked-input.hbs

-    @type="warning"
-  >
-    <section class="modal-card-body">
+{{#if this.modalOpen}}


hellobontempo · 2023-09-28T23:39:23Z

ui/lib/kmip/addon/templates/configuration.hbs

@@ -8,14 +8,14 @@
  <ToolbarActions>
    {{#if this.model}}
      <DownloadButton
-        class="toolbar-link"
+        class="toolbar-button"


hellobontempo · 2023-09-28T23:40:08Z

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

hellobontempo · 2023-09-28T23:54:43Z

ui/app/templates/vault/cluster/init.hbs

@@ -95,15 +95,14 @@
            </div>
          {{/if}}
          <DownloadButton
-            class="button is-ghost"


Purposefully not matching css 1:1 with our old styling.

I'd prefer to make adjustments globally after we've removed the .button class, while consulting design, so we can align with other products and rely on HDS styling as much as possible

github-actions · 2023-09-29T00:19:38Z

Build Results:
All builds succeeded! ✅

hashishaw

Looks good! Just one question about the icons for download in toolbar. I feel like it should still be a download icon even if it's in the toolbar.

hashishaw · 2023-10-02T15:05:00Z

ui/app/templates/vault/cluster/policy/show.hbs

-      Download policy
-      <Chevron @isButton={{true}} />
-    </DownloadButton>
+      @icon="chevron-right"


It's a little odd to me that the icon here is a chevron. It seems to indicate on other toolbars that we will take you to a new page 🤔

I agree! I was just keeping with the old pattern but I can update to a download :)

hashishaw · 2023-10-02T15:07:19Z

ui/lib/kmip/addon/templates/configuration.hbs

-        Download CA cert
-        <Chevron @isButton={{true}} />
-      </DownloadButton>
+        @icon="chevron-right"


same here re:icon

kiannaquach · 2023-10-02T15:56:00Z

ui/lib/pki/addon/components/page/pki-key-list.hbs

@@ -6,7 +6,7 @@
 <PkiPaginatedList @listRoute="keys.index" @list={{@keyModels}} @hasConfig={{@hasConfig}}>
  <:actions>
    {{#if @canImportKey}}
-      <ToolbarLink @route="keys.import" @type="download" data-test-pki-key-import>
+      <ToolbarLink @route="keys.import" @type="upload" data-test-pki-key-import>


just want to make sure this update to type upload was intentional! :)

Yeah! I noticed this was incorrect - since it's an Import action it should be upload 😄

* 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

hellobontempo added 4 commits September 28, 2023 15:51

cleanup css

e17ce52

cleanup extra type attr

564b147

masked input download modal

1ce3d62

use Hds::Button in download button"

d7eedd2

hellobontempo added ui pr/no-changelog labels Sep 28, 2023

hellobontempo added this to the 1.16.0-rc1 milestone Sep 28, 2023

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Sep 28, 2023

hellobontempo commented Sep 28, 2023

View reviewed changes

ui/lib/pki/addon/components/page/pki-issuer-details.hbs Outdated

Copy link

Contributor Author

hellobontempo Sep 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hellobontempo added 2 commits September 28, 2023 16:42

fix size of modal

23c9209

tiny icon fix

afd54bd

hellobontempo commented Sep 28, 2023

View reviewed changes

hashishaw approved these changes Oct 2, 2023

View reviewed changes

kiannaquach reviewed Oct 2, 2023

View reviewed changes

hellobontempo added 2 commits October 2, 2023 10:46

refactor download button to always render download icon

6308987

update tests

cc54902

hellobontempo mentioned this pull request Oct 2, 2023

UI: HDS adoption replace <Modal> #23382

Merged

hellobontempo merged commit e98ccb2 into ui/VAULT-17315-hds-adoption-replace-Modal Oct 2, 2023

hellobontempo deleted the ui/VAULT-17315/part-3-modal branch October 2, 2023 18:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Part 3 - hds adoption replace <Modal> #23415

UI: Part 3 - hds adoption replace <Modal> #23415

hellobontempo commented Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023

hellobontempo Sep 28, 2023

hellobontempo Sep 28, 2023

hellobontempo Oct 2, 2023

hellobontempo Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023

hellobontempo Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023

hellobontempo Sep 28, 2023

hellobontempo Sep 28, 2023

github-actions bot commented Sep 29, 2023 •

edited

Loading

hashishaw left a comment

hashishaw Oct 2, 2023

hellobontempo Oct 2, 2023

hashishaw Oct 2, 2023

kiannaquach Oct 2, 2023

hellobontempo Oct 2, 2023

UI: Part 3 - hds adoption replace <Modal> #23415

UI: Part 3 - hds adoption replace <Modal> #23415

Conversation

hellobontempo commented Sep 28, 2023 • edited Loading

hellobontempo Sep 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hellobontempo Sep 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hellobontempo Sep 28, 2023 • edited Loading

Choose a reason for hiding this comment

hellobontempo Sep 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 29, 2023 • edited Loading

hashishaw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hellobontempo commented Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023 •

edited

Loading

hellobontempo Sep 28, 2023 •

edited

Loading

github-actions bot commented Sep 29, 2023 •

edited

Loading