UI: HDS adoption replace <CopyButton> component #22333
Conversation
malinac02
added
ui
hashicorp-contributed-pr
malinac02
force-pushed
the
ui/VAULT-18829/hds-adoption-replace-CopyButton
branch
from
2ef7656 to
86ff82c
Compare
* certificate-card.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * scope-form.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * fix tests caused by changing certificate-card. change hds copy button in certificate-card.hbs * json-editor.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * masked-input.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * fix error with certificate-card.hbs copy button * fix tests that deal with certificate-card.hbs * add class to hds copy buttons to maintain similar styling to curent UI * info-table-row.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * undo change that should instead by merged in from main * change tooltip copy button to white. cleanup * add extra tet for oidc scope form. edit css class for the white icon copy button * fix tests
| @@ -34,7 +34,7 @@ | |||
| <Icon @name="minus" /> | |||
| {{/if}} | |||
| </div> | |||
| <div class="column is-flex-center" data-test-value-div={{@label}}> | |||
| <div class="column is-flex-center {{if @truncateValue 'is-two-thirds'}}" data-test-value-div={{@label}}> | |||
There was a problem hiding this comment.
Resolved merge conflict with UI: [VAULT-19478] Fix info table row value overflow
* encrypt.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * decrypt.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * datakey.hbs. replace 6 <CopyButton> with <Hds::Copy::Button> * rewrap.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * hmac.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * fix typo * add copy-close class to copy & close buttons * export.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>. fix styling * sign.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * fix test caused by changing <pre> tag to <code> in export.hbs * rename class * add extra style to class needed for part 4 of copy button replacement
* user-menu.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * transit-form-show.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * configure-ssh-secret.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * tool-hash.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * tool-random.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * tool-rewrap.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * tool-unwrap.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * tool-wrap.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * paths.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * code-snippet.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * cleanup css for code-snippet. add comments for getting rid of code-snippet and replacing with <Hds::Copy::Snippet * change code-snippet copy icon to gray to match original design * change code-snippet class * accounts.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * hover-copy-button.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * add.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * show.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * copy-secret-dropdown.hbs: replace 1 <CopyButton> with <Hds::Copy::Button> * change styling of 'link' copy buttons * generate-credentials.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * transform-show-transformation.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * sign.hbs: replace 2 <CopyButton> with <Hds::Copy::Button> * hide some copy buttons' icons and use original flash message * undo cleanup of scss file so that I can put cleanup all into one PR to be more organized
* remove unecessary code-snippet.scssn class * remove copy classes from masked-input.scss * remove copy button class from text-file.scss * uninstall ember-cli-clipboard 0.16.0 since there is no longer structure <CopyButton> * remove copyright message from code-snippet.scss to avoid merge conflicts with main, where the file is deleted * replace 2 classes with one * remove unecessary class from copy button * cleanup classes * revert changes to avoid merge conflicts * remove is-block class * conditionally render private key * add more info to comment * remove HoverCopyButton * add missing selector * fix control group padding --------- Co-authored-by: [email protected] <[email protected]> Co-authored-by: claire bontempo <[email protected]>
There was a problem hiding this comment.
Removed this because somewhere I came across moving away from hover copy buttons because of accessibility...of course now I can't track down where I read that 🙈
| @@ -47,11 +47,6 @@ export default class KeymgmtKeyEdit extends Component { | |||
| return this.args.mode === 'create'; | |||
| } | |||
|
|
|||
| @action | |||
There was a problem hiding this comment.
while cleaning up transit I noticed this action was unused
| > | ||
| <Icon @name="clipboard-copy" aria-label="Copy" /> | ||
| </CopyButton> | ||
| <div class="is-flex-center has-background-white-bis has-side-padding-s has-top-bottom-margin-negative-m"> |
| {{@tooltipText}} | ||
| </div> | ||
| </CopyButton> | ||
| <div class="box is-flex-center"> |
There was a problem hiding this comment.
Wow, copy in a tooltip seems like a serious anti-pattern but I guess that's what we had before 🙈
There was a problem hiding this comment.
haha, my thoughts exactly! We created a polishing ticket to consider redesigning this when we initially came across it
| <MaskedInput @value={{this.model.privateKey}} @name="Private key" @allowCopy={{true}} @displayOnly={{true}} /> | ||
| </div> | ||
| </InfoTableRow> | ||
| {{#if this.model.privateKey}} |
There was a problem hiding this comment.
added this conditional because this row was always rendering, even when there was no private key
There was a problem hiding this comment.
The button is slightly smaller but I think that's okay since it previously only appeared on hover
before
after
There was a problem hiding this comment.
This still overlaps text that's long (can make a polish task if folks thinks it's important to address later)
before
after
There was a problem hiding this comment.
looks the same as before:
There was a problem hiding this comment.
updated to use CodeSnippet so they have consistent styling throughout ui
before
after
There was a problem hiding this comment.
consulted design and opted to remove blue copy buttons as they were redundant and anti-pattern
before / after
all of the /transit-key-action files have similar before/after views
There was a problem hiding this comment.
Went ahead and implemented the updated design:
|
Build Results: |
| @@ -125,7 +125,6 @@ | |||
| "ember-cli": "~4.12.1", | |||
| "ember-cli-autoprefixer": "^0.8.1", | |||
| "ember-cli-babel": "^7.26.11", | |||
| "ember-cli-clipboard": "0.16.0", | |||
|
CI Results: |
hellobontempo
deleted the
ui/VAULT-18829/hds-adoption-replace-CopyButton
branch
description updates from @hellobontempo
This PR implements the
<Hds::Copy::Button>component. The component has a built in success/error states, so success flash messages have been removed as part of this adoption.See below for screenshots of various implementations