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> part 5: Cleanup #22884

Merged
merged 17 commits into from
Sep 13, 2023
Merged

UI: HDS adoption replace <CopyButton> part 5: Cleanup #22884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9093b2b
remove unecessary code-snippet.scssn class
malinac02 Sep 8, 2023
30a6f7d
remove copy classes from masked-input.scss
malinac02 Sep 8, 2023
1881983
remove copy button class from text-file.scss
malinac02 Sep 8, 2023
dba8f5e
Merge branch 'ui/VAULT-18829/hds-adoption-replace-CopyButton' into ui…
malinac02 Sep 8, 2023
576ebc6
uninstall ember-cli-clipboard 0.16.0 since there is no longer structu…
malinac02 Sep 8, 2023
07893ff
remove copyright message from code-snippet.scss to avoid merge confli…
malinac02 Sep 8, 2023
10d9896
replace 2 classes with one
malinac02 Sep 8, 2023
ba39e73
remove unecessary class from copy button
malinac02 Sep 8, 2023
fd73aa9
cleanup classes
malinac02 Sep 8, 2023
4563973
revert changes to avoid merge conflicts
hellobontempo Sep 12, 2023
5c776ab
remove is-block class
hellobontempo Sep 12, 2023
af592ad
conditionally render private key
hellobontempo Sep 12, 2023
75b8a20
add more info to comment
hellobontempo Sep 12, 2023
dec1736
remove HoverCopyButton
hellobontempo Sep 13, 2023
4abd1b7
add missing selector
hellobontempo Sep 13, 2023
9386f90
fix control group padding
hellobontempo Sep 13, 2023
d37d5d0
Merge branch 'ui/VAULT-18829/hds-adoption-replace-CopyButton' into ui…
hellobontempo Sep 13, 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

This file was deleted.

2 changes: 1 addition & 1 deletion ui/app/components/sidebar/user-menu.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
@text="Copy token"
@textToCopy={{this.auth.currentToken}}
@isFullWidth={{true}}
class="hds-copy-button size-7 hidden-icon link is-flex-start"
class="hds-copy-button in-dropdown link is-flex-start"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Combined 2 classes into one, this is applied to copy buttons which are in dropdowns

{{on "click" (action (set-flash-message "Token copied!"))}}
/>
</li>
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
48 changes: 22 additions & 26 deletions ui/app/styles/core/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,8 @@ a.button.disabled {
}
}

// Modification to HDS copy button component to match current UI
// Styling to <Hds::Copy::Button> component to match existing UI Structure buttons
// Will likely be removed/modified when all buttons are audited and replaced with HDS
.hds-copy-button {
&.icon-only {
background: none;
Expand All @@ -347,27 +348,6 @@ a.button.disabled {
color: $white;
}

&.hidden-icon svg {
color: transparent;
}

&.size-7 div {
font-size: $size-7;
}

&.code-snippet {
background: none;
border: none;
box-shadow: none;
min-width: auto;
padding: $size-11 $size-8;
color: $ui-gray-300;

svg {
color: $ui-gray-300;
}
}

&.is-primary {
background-color: $blue;
box-shadow: $box-shadow-low;
Expand Down Expand Up @@ -395,9 +375,25 @@ a.button.disabled {
min-width: 6rem;
}

&.hover-button {
min-width: $spacing-xl;
border-radius: 0;
box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
&.code-snippet {
background: none;
border: none;
box-shadow: none;
min-width: auto;
padding: $size-11 $size-8;
color: $ui-gray-300;

svg {
color: $ui-gray-300;
}
}

&.in-dropdown {
Copy link
Contributor

Choose a reason for hiding this comment

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

nice job combining the classes!

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
4 changes: 2 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,5 @@
@gutters={{false}}
@theme="hashi auto-height"
/>
<HoverCopyButton @copyValue={{stringify this.content}} />
<Hds::Copy::Button @text="Copy" @isIconOnly={{true}} @textToCopy={{stringify this.content}} class="top-right-absolute" />
</div>
9 changes: 7 additions & 2 deletions ui/app/templates/components/console/log-list.hbs
View file
Open in desktop
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="top-right-absolute"
/>
</div>
4 changes: 2 additions & 2 deletions ui/app/templates/components/console/log-object.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">
<pre>{{this.columns}}</pre>
<HoverCopyButton @copyValue={{this.columns}} />
<Hds::Copy::Button @text="Copy" @isIconOnly={{true}} @textToCopy={{this.columns}} class="top-right-absolute" />
</div>
4 changes: 2 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,7 @@
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="top-right-absolute" />
</div>
11 changes: 8 additions & 3 deletions ui/app/templates/components/control-group-success.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
</div>
{{else}}
{{#if this.unwrapData}}
<div class="control-group-success {{if this.unwrapData 'is-editor'}}">
<div class="has-copy-button">
<div class="control-group-success is-editor">
<div class="is-relative">
<JsonEditor
data-test-json-viewer
@showToolbar={{false}}
Expand All @@ -27,7 +27,12 @@
@gutters={{false}}
@theme="hashi-read-only auto-height"
/>
<HoverCopyButton @copyValue={{stringify this.unwrapData}} />
<Hds::Copy::Button
@text="Copy"
@isIconOnly={{true}}
@textToCopy={{stringify this.unwrapData}}
class="hds-copy-button icon-only top-right-absolute"
/>
</div>
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
Expand Down
22 changes: 15 additions & 7 deletions ui/app/templates/components/control-group.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,13 @@
</div>

{{#if (or (not this.model.requestEntity) this.currentUserIsRequesting)}}
<div class="message is-list is-highlight has-copy-button" tabindex="-1" data-test-accessor-callout>
<HoverCopyButton @alwaysShow={{true}} @copyValue={{this.model.id}} />
<div class="message is-highlight" data-test-accessor-callout>
<Hds::Copy::Button
@text="Copy"
@isIconOnly={{true}}
@textToCopy={{this.model.id}}
class="hds-copy-button icon-only top-right-absolute"
/>
<div class="message-body">
<h4 class="title is-7 is-marginless">
Accessor
Expand Down Expand Up @@ -85,11 +90,14 @@
{{/if}}

{{#if this.controlGroupResponse.token}}
<p class="control-group-token-text" data-test-token>
We’ve saved your request token, but you may want to copy it just in case:
<span class="tag has-font-monospaced" data-test-token-value>{{this.controlGroupResponse.token}}</span>
<HoverCopyButton @alwaysShow={{true}} @copyValue={{this.controlGroupResponse.token}} />
</p>
<div class="is-flex-row has-bottom-margin-m has-top-margin-m" data-test-token>
<p class="has-text-grey has-padding-xxs">
We’ve saved your request token, but you may want to copy it just in case:
</p>
<div>
<Hds::Copy::Snippet data-test-token-value @textToCopy={{this.controlGroupResponse.token}} @color="secondary" />
</div>
</div>
{{/if}}
{{! template-lint-configure simple-unless "warn" }}
{{#unless (and this.model.approved (or (not this.model.requestEntity) this.currentUserIsRequesting))}}
Expand Down
23 changes: 0 additions & 23 deletions ui/app/templates/components/hover-copy-button.hbs
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion ui/app/templates/components/transit-form-show.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@
@text="Copy Public Key"
@textToCopy={{meta.public_key}}
@isFullWidth={{true}}
class="hds-copy-button size-7 hidden-icon link is-flex-start"
class="hds-copy-button in-dropdown link is-flex-start"
{{on "click" (action (set-flash-message "Public key copied!"))}}
/>
</li>
Expand Down
Loading
Loading