-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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 4 - hds adoption replace <Modal> #23451
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -170,3 +170,10 @@ form { | |
label { | ||
cursor: pointer; | ||
} | ||
|
||
// HDS modifications | ||
.hds-modal { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wasn't sure where to put this - if there are more I may create a separate file, but it seemed okay here for now |
||
// 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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is every header going to be a trash icon or should we add an icon key to the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These are all delete related, so they'll all have the trash! |
||
</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}} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -34,14 +34,10 @@ | |
@metadata={{@metadata}} | ||
@onDelete={{this.handleDestruction}} | ||
@version={{this.version}} | ||
> | ||
Delete | ||
</KvDeleteModal> | ||
/> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
{{/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> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,9 +10,12 @@ | |
|
||
<:toolbarActions> | ||
{{#if @secret.canDeleteMetadata}} | ||
<KvDeleteModal @mode="delete-metadata" @metadata={{@metadata}} @onDelete={{this.onDelete}}> | ||
Permanently delete | ||
</KvDeleteModal> | ||
<KvDeleteModal | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
@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> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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|> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just out of curiousity - do modals always need id's now? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not that I can tell - but I wondered if screen readers used them. I also thought that we could use them in a general test selector There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for clarifying, Claire! I think it's a great pattern to add the ids to each modal :) |
||
<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}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removing because this color doesn't exist in HDS buttons