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: HDS adoption replace <CopyButton> component #22333

Merged
merged 26 commits into from
Sep 15, 2023
Merged

UI: HDS adoption replace <CopyButton> component #22333

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
86ff82c
Part 1: Upgrade HDS to 2.9.0 (#22311)
malinac02 Aug 15, 2023
1ae69ad
Merge branch 'main' into ui/VAULT-18829/hds-adoption-replace-CopyButton
malinac02 Aug 24, 2023
228c6a2
UI: HDS adoption replace <CopyButton> part 2 (#22356)
malinac02 Aug 29, 2023
499e047
Merge branch 'main' into ui/VAULT-18829/hds-adoption-replace-CopyButton
malinac02 Sep 5, 2023
0045a29
UI: HDS adoption replace <CopyButton> part 3 (#22614)
malinac02 Sep 6, 2023
4f8dc36
Merge branch 'main' into ui/VAULT-18829/hds-adoption-replace-CopyButton
malinac02 Sep 8, 2023
662c631
UI: HDS adoption replace <CopyButton> part 4 (#22749)
malinac02 Sep 8, 2023
d596f80
Merge branch 'main' into ui/VAULT-18829/hds-adoption-replace-CopyButton
hellobontempo Sep 13, 2023
ed2d5f3
update code snippet copy button
hellobontempo Sep 13, 2023
a27881c
UI: HDS adoption replace <CopyButton> part 5: Cleanup (#22884)
malinac02 Sep 13, 2023
5329b58
rename class to transparent background
hellobontempo Sep 14, 2023
0379783
remove unused test selectors
hellobontempo Sep 14, 2023
7a65c27
replace transit actions with Copy::Snippet
hellobontempo Sep 14, 2023
0a7bfa8
replace transfrom code blocks with code snippet component
hellobontempo Sep 14, 2023
effb2a0
revert extra css fiddling
hellobontempo Sep 14, 2023
7f58d4b
misc cleanup, unused action
hellobontempo Sep 14, 2023
a1156f9
remove copy & close buttons from transit modals
hellobontempo Sep 14, 2023
2bf3524
remove is- from class naming
hellobontempo Sep 14, 2023
abeb6be
remove hds-copy-button class
hellobontempo Sep 14, 2023
2f09675
add other grey class
hellobontempo Sep 14, 2023
230d1d6
more small cleanup
hellobontempo Sep 14, 2023
4eaf13a
add -top to margin
hellobontempo Sep 15, 2023
948b9fa
add changelog
hellobontempo Sep 15, 2023
6468f7b
Merge branch 'main' into ui/VAULT-18829/hds-adoption-replace-CopyButton
hellobontempo Sep 15, 2023
790ef37
Merge branch 'main' into ui/VAULT-18829/hds-adoption-replace-CopyButton
hellobontempo Sep 15, 2023
961fbf1
Merge branch 'main' into ui/VAULT-18829/hds-adoption-replace-CopyButton
hellobontempo Sep 15, 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
29 changes: 0 additions & 29 deletions ui/app/components/hover-copy-button.js
View file
Open in desktop
Copy link
Contributor

@hellobontempo hellobontempo Sep 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

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 🙈

This file was deleted.

5 changes: 0 additions & 5 deletions ui/app/components/keymgmt/key-edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,6 @@ export default class KeymgmtKeyEdit extends Component {
return this.args.mode === 'create';
}

@action
Copy link
Contributor

Choose a reason for hiding this comment

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

while cleaning up transit I noticed this action was unused

toggleModal(bool) {
this.isDeleteModalOpen = bool;
}

@task
@waitFor
*saveKey(evt) {
Expand Down
15 changes: 7 additions & 8 deletions ui/app/components/sidebar/user-menu.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,13 @@
</li>
{{/if}}
<li class="action">
<CopyButton
@clipboardText={{this.auth.currentToken}}
class="link"
@buttonType="button"
@success={{action (set-flash-message "Token copied!")}}
>
Copy token
</CopyButton>
<Hds::Copy::Button
@text="Copy token"
@textToCopy={{this.auth.currentToken}}
@isFullWidth={{true}}
class="in-dropdown link is-flex-start"
{{on "click" (fn (set-flash-message "Token copied!"))}}
/>
</li>
{{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
{{#if this.auth.authData.renewable}}
Expand Down
7 changes: 0 additions & 7 deletions ui/app/components/transit-key-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,13 +214,6 @@ export default Component.extend(TRANSIT_PARAMS, {
arr.forEach((param) => this.set(param, null));
},

toggleModal(successMessage) {
Copy link
Contributor

@hellobontempo hellobontempo Sep 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

removed Copy & Close modal button, now modals just close

if (!!successMessage && typeof successMessage === 'string') {
this.flashMessages.success(successMessage);
}
this.toggleProperty('isModalActive');
},

doSubmit(data, options = {}, maybeEvent) {
const event = options.type === 'submit' ? options : maybeEvent;
if (event) {
Expand Down
7 changes: 0 additions & 7 deletions ui/app/styles/components/console-ui-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,6 @@ $console-close-height: 35px;
}
}

.console-ui-panel-content.hover-copy-button,
.console-ui-panel-content.hover-copy-button-static {
top: auto;
bottom: 0;
right: 0;
}

.console-ui-input {
align-items: center;
display: flex;
Expand Down
17 changes: 0 additions & 17 deletions ui/app/styles/components/control-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,3 @@
.control-group .authorizations {
margin-top: $size-9;
}

.control-group .hover-copy-button-static {
color: $orange;
}

.control-group-token-text {
color: $grey;
position: relative;
padding: $size-8 0;

.hover-copy-button-static {
position: relative;
top: auto;
left: auto;
display: inline-block;
}
}
30 changes: 0 additions & 30 deletions ui/app/styles/components/hover-copy-button.scss
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions ui/app/styles/components/masked-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,13 @@
}

.button.masked-input-toggle,
.button.copy-button,
.button.download-button {
min-width: $spacing-xl;
border-left: 0;
color: $grey;
box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
}

.button.copy-button,
.button.download-button {
border-radius: 0;
}
Expand All @@ -68,7 +66,6 @@

.display-only {
.button.masked-input-toggle,
.button.copy-button,
.button.download-button {
background: transparent;
height: auto;
Expand Down
3 changes: 1 addition & 2 deletions ui/app/styles/components/text-file.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
line-height: inherit;
}
}
.button.masked-input-toggle,
.button.copy-button {
.button.masked-input-toggle {
display: flex;
}
}
1 change: 0 additions & 1 deletion ui/app/styles/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@
@import './components/features-selection';
@import './components/form-section';
@import './components/global-flash';
@import './components/hover-copy-button';
@import './components/icon';
@import './components/init-illustration';
@import './components/info-table-row';
Expand Down
60 changes: 57 additions & 3 deletions ui/app/styles/core/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,9 @@
display: inline-block;
font-size: $size-8;
font-weight: $font-weight-semibold;
height: 2.5rem;
line-height: 1.6;
min-height: 2.25rem;
min-width: 6rem;
padding: $size-10 $size-8;
padding: 0.5625rem 0.9375rem;
Comment on lines +17 to +19
Copy link
Contributor

Choose a reason for hiding this comment

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

This universally matches our button dimensions to HDS (instead of matching HDS to our buttons and then later removing the modification) until we have the chance to replace all of our structure buttons (coming soooon!! 🔜 )

position: relative;
text-align: center;
text-decoration: none;
Expand Down Expand Up @@ -332,3 +331,58 @@ a.button.disabled {
cursor: not-allowed;
}
}

// Existing class on <Hds::Copy::Button> component, modifying to match existing UI Structure buttons
.hds-copy-button {
font-weight: $font-weight-semibold;
box-shadow: $box-shadow-low;
border-radius: $radius;
Comment on lines +337 to +339
Copy link
Contributor

@hellobontempo hellobontempo Sep 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

When we use HDS buttons these three styles will be removed, the classes below will remain so please give any feedback on structure/naming!

These adjust the svg color and button background of the default hds style
Screenshot 2023-09-14 at 1 30 23 PM


&.white-icon svg {
color: $white;
}

&.icon-grey-300 svg {
color: $ui-gray-300;
}

&.icon-grey-500 svg {
color: $ui-gray-500;
}

&.icon-only {
margin-right: $spacing-xxs;
margin-left: $spacing-xxs;
}

&.transparent {
background: none;
border: none;
box-shadow: none;
}

&.primary {
background-color: $blue;
border-color: darken($blue, 2%);
color: $white;
font-weight: $font-weight-bold;
text-shadow: 0 1px 1px rgba($black, 0.25);
svg {
color: $white;
}
}

&.secondary {
background-color: $grey-lightest;
border: 1px solid $grey-light;
}

&.in-dropdown {
div {
font-size: $size-7;
}
svg {
color: transparent;
}
}
}
7 changes: 7 additions & 0 deletions ui/app/styles/helper-classes/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@
}

// position
.top-right-absolute {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
}

.is-in-bottom-right {
position: absolute;
bottom: 1rem;
Expand Down
8 changes: 4 additions & 4 deletions ui/app/styles/helper-classes/spacing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,6 @@
margin-top: -$spacing-xxl;
}

.has-top-margin-xxs {
margin: $spacing-xxs 0;
}

.has-right-margin-xxs {
margin-right: $spacing-xxs;
}
Expand Down Expand Up @@ -147,6 +143,10 @@
margin-bottom: $spacing-xxl;
}

.has-top-margin-xxs {
margin: $spacing-xxs 0;
hellobontempo marked this conversation as resolved.
Show resolved Hide resolved
}

.has-top-margin-s {
margin-top: $spacing-s;
}
Expand Down
9 changes: 1 addition & 8 deletions ui/app/templates/components/configure-ssh-secret.hbs
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

image

Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,7 @@
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<CopyButton
@clipboardText={{@model.publicKey}}
@class="button is-primary"
@buttonType="button"
@success={{action (set-flash-message "Public Key copied!")}}
>
Copy
</CopyButton>
<Hds::Copy::Button @text="Copy" @textToCopy={{@model.publicKey}} class="primary" />
</div>
<div class="control">
<ConfirmAction
Expand Down
9 changes: 7 additions & 2 deletions ui/app/templates/components/console/log-json.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
SPDX-License-Identifier: BUSL-1.1
~}}

<div class="console-ui-output has-copy-button">
<div class="console-ui-output has-text-grey">
<JsonEditor
@showToolbar={{false}}
@value={{stringify this.content}}
Expand All @@ -12,5 +12,10 @@
@gutters={{false}}
@theme="hashi auto-height"
/>
<HoverCopyButton @copyValue={{stringify this.content}} />
<Hds::Copy::Button
@text="Copy"
@isIconOnly={{true}}
@textToCopy={{stringify this.content}}
class="transparent icon-grey-500 top-right-absolute"
/>
</div>
9 changes: 7 additions & 2 deletions ui/app/templates/components/console/log-list.hbs
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

The button is slightly smaller but I think that's okay since it previously only appeared on hover

before

Screenshot 2023-09-14 at 1 48 59 PM

after

Screenshot 2023-09-14 at 2 03 33 PM

Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@
SPDX-License-Identifier: BUSL-1.1
~}}

<div class="console-ui-output has-copy-button">
<div class="console-ui-output has-text-grey">
<pre>
Keys
{{#each this.list as |item|}}
{{item}}

{{/each}}
</pre>
<HoverCopyButton @copyValue={{multi-line-join this.list}} />
<Hds::Copy::Button
@text="Copy"
@isIconOnly={{true}}
@textToCopy={{multi-line-join this.list}}
class="transparent icon-grey-500 top-right-absolute"
/>
</div>
9 changes: 7 additions & 2 deletions ui/app/templates/components/console/log-object.hbs
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

This still overlaps text that's long (can make a polish task if folks thinks it's important to address later)

before

Screenshot 2023-09-14 at 2 10 14 PM

after

Screenshot 2023-09-14 at 2 10 59 PM

Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
SPDX-License-Identifier: BUSL-1.1
~}}

<div class="console-ui-output has-copy-button">
<div class="console-ui-output has-text-grey">
<pre>{{this.columns}}</pre>
<HoverCopyButton @copyValue={{this.columns}} />
<Hds::Copy::Button
@text="Copy"
@isIconOnly={{true}}
@textToCopy={{this.columns}}
class="transparent icon-grey-500 top-right-absolute"
/>
</div>
9 changes: 7 additions & 2 deletions ui/app/templates/components/console/log-text.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
SPDX-License-Identifier: BUSL-1.1
~}}

<div class="console-ui-output has-copy-button">
<div class="console-ui-output has-text-grey">
<pre>{{@content}}</pre>
<HoverCopyButton @copyValue={{this.content}} @alwaysShow={{true}} />
<Hds::Copy::Button
@text="Copy"
@isIconOnly={{true}}
@textToCopy={{@content}}
class="transparent icon-grey-500 top-right-absolute"
/>
</div>
Loading