ui: HDS adoption replace <AlertBanner> component #21375
Conversation
* rename test selector * replace db banner * add class * replace db role edit * db creds * generate creds * simpler class * license banner component * oidc callback plash * raft * aws * secret create or update * change to compact alert for form field * change back to inline * combine alert banners * wrap in conditional * remove references to message class
* token expire warning * delete css * edit form * item details distribute mfa step 2 transit verify * back to secondary * distribute * oidc lease error * sign * kv obj and repl dash * more repl * update test selector * show, creds * shamir * pki csr * pki banners * add hds library to ember engines * woops comma * fix k8 test * update message error component for last! * hold off MessageError changes until next pr * revert test selectors * update pki tests
* final component swap * and actual final of MessageError * update MessageError selectors * delete alert-banner and remove references * update next step alerts to highlight color * finishing touches, auth form test and client dashboard inline link * fix more selectors * fix shamir flow test
* replace AlertPopup * add test tag * move tag * one more message error tag * delete alert popup * final css cleanup * move preformatted flash into <p> tag
There was a problem hiding this comment.
combined banners into one message (pattern we used in client count dashboard)
There was a problem hiding this comment.
Moved <section> and <div> here so the alert spans the full UI width
| <button onclick={{action "enable" @model}} type="button" class="link" data-test-enable={{true}}> | ||
| Enable | ||
| </button> | ||
| <A.Button data-test-enable-identity @text="Enable" @color="secondary" {{on "click" (action "enable" @model)}} /> |
There was a problem hiding this comment.
Consulted design and intentionally changed this button to look like a button (not a link)
secondary class is for alert action buttons
There was a problem hiding this comment.
class="message" defaults to the old structure's info blue background, so this looked a little incohesive beside the new alert banner:
before
after:
updated to generic grey and removed the erroneous div for now. design has a ticket to revisit this
| </LinkTo> | ||
| to enable tracking again. | ||
| </AlertBanner> | ||
| <Hds::Alert @type="inline" @color="warning" class="has-bottom-margin-s" as |A|> |
| <li> | ||
| {{this.upgradeVersionAndDate}} | ||
| {{this.upgradeExplanation}} | ||
| <DocLink |
There was a problem hiding this comment.
Plan is to keep <DocLink> but use the HDS component in that template
There was a problem hiding this comment.
Design decided @color="highlight" is more appropriate for Next steps banners
| @@ -28,11 +28,11 @@ | |||
| @color={{this.tidyStateAlertBanner.color}} | |||
| @icon={{this.tidyStateAlertBanner.icon}} | |||
| class="has-top-margin-m" | |||
| data-test-hds-alert | |||
| data-test-tidy-status-alert | |||
There was a problem hiding this comment.
trying to make selectors more component-relevant so debugging is easier in the future
ui/app/templates/vault/cluster.hbs
Outdated
There was a problem hiding this comment.
Flash message comparisons new + old
purple highlight for info
wrapping of really long item names
applying white-space: pre-wrap class and moving inside <p> tag
| The input is | ||
| {{if @valid "valid" "not valid"}} | ||
| for the given | ||
| {{if @signature "signature" "HMAC"}} |
There was a problem hiding this comment.
I believe, because this is a description, both signature and HMAC need a period?
There was a problem hiding this comment.
I know you didn't change/write the copy, but if we're in there, might as well address some punctuation.
* add periods, move link to trailing * more periods and typo fix
hellobontempo
deleted the
ui/VAULT-16910/hds-adoption-replace-AlertBanner
branch
new component
old component