UI: Use HDS::Toast for flash messages #25459
Conversation
|
CI Results: |
|
Build Results: |
| @@ -75,24 +75,7 @@ | |||
| <div class="global-flash"> | |||
| {{#each this.flashMessages.queue as |flash|}} | |||
| <FlashMessage data-test-flash-message={{true}} @flash={{flash}} as |customComponent flash close|> | |||
| {{#if flash.componentName}} | |||
There was a problem hiding this comment.
I didn't see this setting used anywhere so I figured we can remove it
| @@ -17,7 +17,6 @@ IF YOUR TOKEN HAS THE PROPER CAPABILITIES, THIS WILL CREATE AND DELETE ITEMS ON | |||
| Your token will also be shown on the screen in the example curl command output.`; | |||
| this.flashMessages.warning(warning, { | |||
| sticky: true, | |||
| preformatted: true, | |||
There was a problem hiding this comment.
The new component renders this correctly by default:
ui/app/services/flash-messages.js
Outdated
There was a problem hiding this comment.
Fixes this build warning:
WARNING: Detected collisions between .js and .ts files of the same name. This can result in nondeterministic build output; see https://git.io/JvIwo for more information.
- vault/services/flash-messages.{js,ts}
| return 'highlight'; | ||
| case 'danger': | ||
| return 'critical'; | ||
| case 'warning': |
There was a problem hiding this comment.
is this supposed to return 'warning'?
There was a problem hiding this comment.
This is a shorthand for when type is warning or success, return the type
|
|
||
| get title() { | ||
| if (this.args.title) return this.args.title; | ||
| switch (this.args.flash.type) { |
There was a problem hiding this comment.
I always forget that switch cases allow you to have default values!
| <Hds::Toast @color={{this.color}} @ class="has-bottom-margin-m" data-test-flash-toast as |T|> | ||
| <T.Title data-test-flash-toast-title>{{this.title}}</T.Title> | ||
| <T.Description data-test-flash-message-body> | ||
| <p class="is-word-break">{{@flash.message}}</p> |
There was a problem hiding this comment.
@hashishaw FYI the Description field of the Alert/Toast already breaking long words, so this could be simply:
<T.Description data-test-flash-message-body>{{@flash.message}}</T.Description>
This PR updates the Vault UI to use the HDS::Toast component with specified placement and spacing
✨