Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Part 2 - hds adoption replace <Modal> #23398

Merged
merged 6 commits into from
Sep 28, 2023
Merged

UI: Part 2 - hds adoption replace <Modal> #23398

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b78884f
upgrade HDS library (adds support for snippet containers
hellobontempo Sep 28, 2023
5cbc702
cleanup flight icons
hellobontempo Sep 28, 2023
2980633
replace transit key action modals
hellobontempo Sep 28, 2023
0cb33dc
re-add deps as devDeps
hellobontempo Sep 28, 2023
d8a0b07
remove line
hellobontempo Sep 28, 2023
f3a63c9
address transit tests
hellobontempo Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions ui/app/templates/components/transit-key-action/datakey.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,19 +74,27 @@
</div>
</div>
</form>
<Modal @title="Copy your generated key" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
{{#if @isModalActive}}
Copy link
Contributor Author

@hellobontempo hellobontempo Sep 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

all of the transit modals have similar styling - so just one screenshot :)
Screenshot 2023-09-28 at 1 55 20 PM

<Hds::Modal id="transit-datakey-modal" @onClose={{fn (mut @isModalActive) false}} as |M|>
<M.Header>
Copy your generated key
</M.Header>
<M.Body>
{{#if (eq @param "plaintext")}}
<h2 class="has-text-weight-semibold is-6">Plaintext</h2>
<p class="sub-text">Plaintext is base64 encoded</p>
<Hds::Copy::Snippet class="has-bottom-margin-m" @textToCopy={{@plaintext}} @color="secondary" />
<Hds::Copy::Snippet
class="has-bottom-margin-m"
@textToCopy={{@plaintext}}
@color="secondary"
@container="#transit-datakey-modal"
/>
{{/if}}
<h2 class="has-text-weight-semibold is-6">Ciphertext</h2>
<Hds::Copy::Snippet @textToCopy={{@ciphertext}} @color="secondary" />
</div>
</section>
<footer class="modal-card-foot">
<button type="button" class="button is-primary" {{on "click" (fn (mut @isModalActive) false)}}>Close</button>
</footer>
</Modal>
<Hds::Copy::Snippet @textToCopy={{@ciphertext}} @color="secondary" @container="#transit-datakey-modal" />
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
30 changes: 18 additions & 12 deletions ui/app/templates/components/transit-key-action/decrypt.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,22 @@
</div>
</form>
{{#if @isModalActive}}
<Modal @title="Copy your unwrapped data" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
<h2 class="has-text-weight-semibold is-6">Plaintext</h2>
<p class="sub-text">Plaintext is base64 encoded</p>
<Hds::Copy::Snippet @textToCopy={{@plaintext}} @color="secondary" data-test-encrypted-value="plaintext" />
</div>
</section>
<footer class="modal-card-foot">
<button type="button" class="button is-primary" {{on "click" (fn (mut @isModalActive) false)}}>Close</button>
</footer>
</Modal>
<Hds::Modal id="transit-decrypt-modal" @onClose={{fn (mut @isModalActive) false}} as |M|>
<M.Header>
Copy your unwrapped data
</M.Header>
<M.Body>
<h2 class="has-text-weight-semibold is-6">Plaintext</h2>
<p class="sub-text">Plaintext is base64 encoded</p>
<Hds::Copy::Snippet
@textToCopy={{@plaintext}}
@color="secondary"
@container="#transit-decrypt-modal"
data-test-encrypted-value="plaintext"
/>
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
33 changes: 18 additions & 15 deletions ui/app/templates/components/transit-key-action/encrypt.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,19 +69,22 @@
</div>
</div>
</form>
<Modal
@title="Copy your token"
@onClose={{action (mut @isModalActive) false}}
@isActive={{@isModalActive}}
data-test-encrypt-modal
>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
{{#if @isModalActive}}
<Hds::Modal id="transit-encrypt-modal" @onClose={{fn (mut @isModalActive) false}} data-test-encrypt-modal as |M|>
<M.Header>
Copy your token
</M.Header>
<M.Body>
<h2 class="title is-6">Ciphertext</h2>
<Hds::Copy::Snippet @textToCopy={{@ciphertext}} @color="secondary" data-test-encrypted-value="ciphertext" />
</div>
</section>
<footer class="modal-card-foot">
<button type="button" class="button is-primary" {{on "click" (fn (mut @isModalActive) false)}}>Close</button>
</footer>
</Modal>
<Hds::Copy::Snippet
@textToCopy={{@ciphertext}}
@color="secondary"
@container="#transit-encrypt-modal"
data-test-encrypted-value="ciphertext"
/>
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
25 changes: 15 additions & 10 deletions ui/app/templates/components/transit-key-action/export.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,19 @@
</div>
</div>
</form>
<Modal @title="Copy your wrapped key" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
<h2 class="title is-6">Wrapped Key</h2>
{{#if @isModalActive}}
<Hds::Modal id="transit-export-modal" @onClose={{fn (mut @isModalActive) false}} as |M|>
<M.Header>
Copy your wrapped key
</M.Header>
<M.Body>
<h2 class="title is-6">Wrapped key</h2>
{{#if this.wrapTTL}}
<Hds::Copy::Snippet
class="has-bottom-margin-m"
@textToCopy={{@wrappedToken}}
@color="secondary"
@container="#transit-export-modal"
data-test-encrypted-value="export"
/>
{{else}}
Expand All @@ -85,13 +89,14 @@
@text="Copy"
@isIconOnly={{true}}
@textToCopy={{stringify @keys}}
@container="#transit-export-modal"
class="transparent top-right-absolute"
/>
</div>
{{/if}}
</div>
</section>
<footer class="modal-card-foot">
<button type="button" class="button is-primary" {{on "click" (fn (mut @isModalActive) false)}}>Close</button>
</footer>
</Modal>
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
28 changes: 18 additions & 10 deletions ui/app/templates/components/transit-key-action/hmac.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,22 @@
</div>
</div>
</form>
<Modal @title="Copy your unwrapped data" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
{{#if @isModalActive}}
<Hds::Modal id="transit-hmac-modal" @onClose={{fn (mut @isModalActive) false}} as |M|>
<M.Header>
Copy your unwrapped data
</M.Header>
<M.Body>
<h2 class="title is-6">HMAC</h2>
<Hds::Copy::Snippet @textToCopy={{@hmac}} @color="secondary" data-test-encrypted-value="hmac" />
</div>
</section>
<footer class="modal-card-foot">
<button type="button" class="button is-primary" {{on "click" (fn (mut @isModalActive) false)}}>Close</button>
</footer>
</Modal>
<Hds::Copy::Snippet
@textToCopy={{@hmac}}
@color="secondary"
@container="#transit-hmac-modal"
data-test-encrypted-value="hmac"
/>
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
23 changes: 13 additions & 10 deletions ui/app/templates/components/transit-key-action/rewrap.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,17 @@
</div>
</div>
</form>
<Modal @title="Copy your token" @onClose={{action (mut @isModalActive)}} @isActive={{@isModalActive}}>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
{{#if @isModalActive}}
<Hds::Modal id="transit-rewrap-modal" @onClose={{fn (mut @isModalActive) false}} as |M|>
<M.Header>
Copy your token
</M.Header>
<M.Body>
<h2 class="title is-6">Ciphertext</h2>
<Hds::Copy::Snippet @textToCopy={{@ciphertext}} @color="secondary" />
</div>
</section>
<footer class="modal-card-foot">
<button type="button" class="button is-primary" {{on "click" (fn (mut @isModalActive) false)}}>Close</button>
</footer>
</Modal>
<Hds::Copy::Snippet @textToCopy={{@ciphertext}} @color="secondary" @container="#transit-rewrap-modal" />
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
33 changes: 18 additions & 15 deletions ui/app/templates/components/transit-key-action/sign.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,19 +120,22 @@
</div>
</div>
</form>
<Modal
@title="Copy your signature"
@onClose={{action (mut @isModalActive) false}}
@isActive={{@isModalActive}}
data-test-sign-modal
>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">
{{#if @isModalActive}}
<Hds::Modal id="transit-sign-modal" @onClose={{fn (mut @isModalActive) false}} data-test-sign-modal as |M|>
<M.Header>
Copy your signature
</M.Header>
<M.Body>
<h2 class="title is-6">Signature</h2>
<Hds::Copy::Snippet @textToCopy={{@signature}} @color="secondary" data-test-encrypted-value="signature" />
</div>
</section>
<footer class="modal-card-foot">
<button type="button" class="button is-primary" {{on "click" (fn (mut @isModalActive) false)}}>Close</button>
</footer>
</Modal>
<Hds::Copy::Snippet
@textToCopy={{@signature}}
@color="secondary"
@container="#transit-sign-modal"
data-test-encrypted-value="signature"
/>
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
35 changes: 22 additions & 13 deletions ui/app/templates/components/transit-key-action/verify.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,16 +192,25 @@
</div>
</div>
</form>
<Modal @title="Results" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Previously the modal didn't even have a close button! 🤯
Screenshot 2023-09-28 at 2 05 35 PM
Screenshot 2023-09-28 at 2 05 49 PM

<section class="modal-card-body">
<Hds::Alert @type="inline" @color={{if @valid "success" "critical"}} as |A|>
<A.Title>{{if @valid "Valid" "Not Valid"}}</A.Title>
<A.Description>
The input is
{{if @valid "valid" "not valid"}}
for the given
{{if @signature "signature." "HMAC."}}
</A.Description>
</Hds::Alert>
</section>
</Modal>
{{#if @isModalActive}}
<Hds::Modal id="transit-verify-modal" @size="small" @onClose={{fn (mut @isModalActive) false}} as |M|>
<M.Header>
Results
<Hds::Badge
@text={{if @valid "Valid" "Not Valid"}}
@size="large"
@color={{if @valid "success" "critical"}}
@icon={{if @valid "check-circle" "x-circle"}}
/>
</M.Header>
<M.Body>
The input is
{{if @valid "valid" "not valid"}}
for the given
{{if @signature "signature." "HMAC."}}
</M.Body>
<M.Footer as |F|>
<Hds::Button @text="Close" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
4 changes: 2 additions & 2 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@
"@ember/test-waiters": "^3.0.0",
"@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2",
"@hashicorp/ember-flight-icons": "^3.0.9",
"@hashicorp/design-system-components": "^2.12.2",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

had to upgrade because @container support for <Hds::Copy::Snippet> was added recently

"@hashicorp/ember-flight-icons": "^3.1.3",
"@hashicorp/structure-icons": "^1.3.0",
"@icholy/duration": "^5.1.0",
"@tsconfig/ember": "^1.0.1",
Expand Down Expand Up @@ -248,7 +249,6 @@
]
},
"dependencies": {
"@hashicorp/design-system-components": "^2.9.0",
"handlebars": "4.7.7",
"highlight.js": "^10.4.1",
"node-notifier": "^8.0.1",
Expand Down
Loading
Loading