diff --git a/ui/app/components/hover-copy-button.js b/ui/app/components/hover-copy-button.js deleted file mode 100644 index 35fcaad07ee4..000000000000 --- a/ui/app/components/hover-copy-button.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; - -/** - * @module HoverCopyButton - * The `HoverCopyButton` is used on dark backgrounds to show a copy button. - * - * @example ```js - * ``` - * - * @param {string} copyValue - The value to be copied. - * @param {boolean} [alwaysShow] - Boolean that affects the class. - */ - -export default class HoverCopyButton extends Component { - get alwaysShow() { - return this.args.alwaysShow || false; - } - get copyValue() { - return this.args.copyValue || false; - } - - @tracked tooltipText = 'Copy'; -} diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs index 3237c8f289e4..efc92603806a 100644 --- a/ui/app/components/sidebar/user-menu.hbs +++ b/ui/app/components/sidebar/user-menu.hbs @@ -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" {{on "click" (action (set-flash-message "Token copied!"))}} /> diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss index cd4b5e6241cc..4832a7c68417 100644 --- a/ui/app/styles/components/console-ui-panel.scss +++ b/ui/app/styles/components/console-ui-panel.scss @@ -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; diff --git a/ui/app/styles/components/control-group.scss b/ui/app/styles/components/control-group.scss index 90b0f5cea3dd..176591f7c060 100644 --- a/ui/app/styles/components/control-group.scss +++ b/ui/app/styles/components/control-group.scss @@ -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; - } -} diff --git a/ui/app/styles/components/hover-copy-button.scss b/ui/app/styles/components/hover-copy-button.scss deleted file mode 100644 index ff6f585b4491..000000000000 --- a/ui/app/styles/components/hover-copy-button.scss +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -.has-copy-button { - position: relative; - color: $grey; -} -.hover-copy-button, -.hover-copy-button-static { - position: absolute; - top: 0.5rem; - right: 0.5rem; -} - -.hover-copy-button { - opacity: 0; - pointer-events: none; - transition: opacity $speed ease-in-out; - will-change: opacity; - z-index: 10; -} - -.has-copy-button:hover .hover-copy-button, -.has-copy-button:focus .hover-copy-button, -.hover-copy-button .copy-button:focus { - opacity: 1; - pointer-events: auto; -} diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss index d3a4b3083e83..ee908f6ecf1d 100644 --- a/ui/app/styles/components/masked-input.scss +++ b/ui/app/styles/components/masked-input.scss @@ -49,7 +49,6 @@ } .button.masked-input-toggle, -.button.copy-button, .button.download-button { min-width: $spacing-xl; border-left: 0; @@ -57,7 +56,6 @@ box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12); } -.button.copy-button, .button.download-button { border-radius: 0; } @@ -68,7 +66,6 @@ .display-only { .button.masked-input-toggle, - .button.copy-button, .button.download-button { background: transparent; height: auto; diff --git a/ui/app/styles/components/text-file.scss b/ui/app/styles/components/text-file.scss index c455ad83a17a..3631e6e1efa9 100644 --- a/ui/app/styles/components/text-file.scss +++ b/ui/app/styles/components/text-file.scss @@ -12,8 +12,7 @@ line-height: inherit; } } - .button.masked-input-toggle, - .button.copy-button { + .button.masked-input-toggle { display: flex; } } diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index f181434d589f..19653c83dc26 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -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'; diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 54c72b09f016..4f3103a56cb2 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -333,7 +333,8 @@ a.button.disabled { } } -// Modification to HDS copy button component to match current UI +// Styling to 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; @@ -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; @@ -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 { + div { + font-size: $size-7; + } + svg { + color: transparent; + } } } diff --git a/ui/app/styles/helper-classes/layout.scss b/ui/app/styles/helper-classes/layout.scss index 58717acc41fc..a905ccee2c1d 100644 --- a/ui/app/styles/helper-classes/layout.scss +++ b/ui/app/styles/helper-classes/layout.scss @@ -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; diff --git a/ui/app/templates/components/console/log-json.hbs b/ui/app/templates/components/console/log-json.hbs index e66764322ecb..737a36bee628 100644 --- a/ui/app/templates/components/console/log-json.hbs +++ b/ui/app/templates/components/console/log-json.hbs @@ -3,7 +3,7 @@ SPDX-License-Identifier: BUSL-1.1 ~}} -
+
- +
\ No newline at end of file diff --git a/ui/app/templates/components/console/log-list.hbs b/ui/app/templates/components/console/log-list.hbs index 099fe876f1a8..18ab4264b637 100644 --- a/ui/app/templates/components/console/log-list.hbs +++ b/ui/app/templates/components/console/log-list.hbs @@ -3,7 +3,7 @@ SPDX-License-Identifier: BUSL-1.1 ~}} -
+
     Keys
     {{#each this.list as |item|}}
@@ -11,5 +11,10 @@
 
     {{/each}}
   
- +
\ No newline at end of file diff --git a/ui/app/templates/components/console/log-object.hbs b/ui/app/templates/components/console/log-object.hbs index 93a1eaf547cc..948ec145efd4 100644 --- a/ui/app/templates/components/console/log-object.hbs +++ b/ui/app/templates/components/console/log-object.hbs @@ -3,7 +3,7 @@ SPDX-License-Identifier: BUSL-1.1 ~}} -
+
{{this.columns}}
- +
\ No newline at end of file diff --git a/ui/app/templates/components/console/log-text.hbs b/ui/app/templates/components/console/log-text.hbs index d6fe35a9b259..ac334f3782cd 100644 --- a/ui/app/templates/components/console/log-text.hbs +++ b/ui/app/templates/components/console/log-text.hbs @@ -3,7 +3,7 @@ SPDX-License-Identifier: BUSL-1.1 ~}} -
+
{{@content}}
- +
\ No newline at end of file diff --git a/ui/app/templates/components/control-group-success.hbs b/ui/app/templates/components/control-group-success.hbs index 3755452b0dff..6204a6665904 100644 --- a/ui/app/templates/components/control-group-success.hbs +++ b/ui/app/templates/components/control-group-success.hbs @@ -16,8 +16,8 @@
{{else}} {{#if this.unwrapData}} -
-
+
+
- +
diff --git a/ui/app/templates/components/control-group.hbs b/ui/app/templates/components/control-group.hbs index 236e39d575b0..b2897fea69ea 100644 --- a/ui/app/templates/components/control-group.hbs +++ b/ui/app/templates/components/control-group.hbs @@ -48,8 +48,13 @@
{{#if (or (not this.model.requestEntity) this.currentUserIsRequesting)}} -
- +
+

Accessor @@ -85,11 +90,14 @@ {{/if}} {{#if this.controlGroupResponse.token}} -

- We’ve saved your request token, but you may want to copy it just in case: - {{this.controlGroupResponse.token}} - -

+
+

+ We’ve saved your request token, but you may want to copy it just in case: +

+
+ +
+
{{/if}} {{! template-lint-configure simple-unless "warn" }} {{#unless (and this.model.approved (or (not this.model.requestEntity) this.currentUserIsRequesting))}} diff --git a/ui/app/templates/components/hover-copy-button.hbs b/ui/app/templates/components/hover-copy-button.hbs deleted file mode 100644 index 6a9662f78743..000000000000 --- a/ui/app/templates/components/hover-copy-button.hbs +++ /dev/null @@ -1,23 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -~}} - -
- - - - - -
- {{this.tooltipText}} -
-
-
-
\ No newline at end of file diff --git a/ui/app/templates/components/transit-form-show.hbs b/ui/app/templates/components/transit-form-show.hbs index e8f9031a57e0..e67074508d5d 100644 --- a/ui/app/templates/components/transit-form-show.hbs +++ b/ui/app/templates/components/transit-form-show.hbs @@ -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!"))}} /> diff --git a/ui/app/templates/components/transit-key-action/datakey.hbs b/ui/app/templates/components/transit-key-action/datakey.hbs index 75a0f6b5ccdf..11958785a599 100644 --- a/ui/app/templates/components/transit-key-action/datakey.hbs +++ b/ui/app/templates/components/transit-key-action/datakey.hbs @@ -107,13 +107,13 @@ diff --git a/ui/lib/core/addon/components/choose-pgp-key-form.hbs b/ui/lib/core/addon/components/choose-pgp-key-form.hbs index 0d624f747ad9..b6683a2c8f39 100644 --- a/ui/lib/core/addon/components/choose-pgp-key-form.hbs +++ b/ui/lib/core/addon/components/choose-pgp-key-form.hbs @@ -22,10 +22,12 @@

{{concat "PGP Key " this.pgpKeyFile.filename}}

-
- - {{this.pgpKey}} -
+

diff --git a/ui/lib/core/addon/components/copy-secret-dropdown.hbs b/ui/lib/core/addon/components/copy-secret-dropdown.hbs index 35b1d02fdf42..0d6a1ec1904a 100644 --- a/ui/lib/core/addon/components/copy-secret-dropdown.hbs +++ b/ui/lib/core/addon/components/copy-secret-dropdown.hbs @@ -17,7 +17,7 @@ @text="Copy JSON" @textToCopy={{@clipboardText}} @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 "JSON Copied!"))}} data-test-copy-button /> diff --git a/ui/lib/core/addon/components/shamir/dr-token-flow.hbs b/ui/lib/core/addon/components/shamir/dr-token-flow.hbs index 1b4021fe85a9..e5bf2b8faa67 100644 --- a/ui/lib/core/addon/components/shamir/dr-token-flow.hbs +++ b/ui/lib/core/addon/components/shamir/dr-token-flow.hbs @@ -16,10 +16,7 @@

This is a one-time token that will be used to generate the operation token. Please save it.

-
- - {{this.encodedToken}} -
+
{{#if this.otp}}
@@ -29,10 +26,7 @@

This OTP will be used to decode the generated operation token. Please save it.

-
- - {{this.otp}} -
+
{{/if}}
@@ -48,21 +42,18 @@ the operation token. {{/if}}

-
- {{! template-lint-disable quotes }} - {{#let - (if - this.otp - (concat 'vault operator generate-root -dr-token -otp="' this.otp '" -decode="' this.encodedToken '"') - (concat 'vault operator generate-root -dr-token -otp="" -decode="' this.encodedToken '"') - ) - as |cmd| - }} - - {{cmd}} - {{/let}} - {{! template-lint-enable quotes }} -
+ {{! template-lint-disable quotes }} + {{#let + (if + this.otp + (concat 'vault operator generate-root -dr-token -otp="' this.otp '" -decode="' this.encodedToken '"') + (concat 'vault operator generate-root -dr-token -otp="" -decode="' this.encodedToken '"') + ) + as |cmd| + }} + + {{/let}} + {{! template-lint-enable quotes }}
diff --git a/ui/lib/core/addon/components/shamir/form.hbs b/ui/lib/core/addon/components/shamir/form.hbs index 4ba49924238f..e79020da83ae 100644 --- a/ui/lib/core/addon/components/shamir/form.hbs +++ b/ui/lib/core/addon/components/shamir/form.hbs @@ -13,18 +13,17 @@ {{#if @otp}} Info - + Below is the generated OTP. This will be used to encode the generated Operation Token. Make sure to save this, as you will need it later to decode the Operation Token. + +

+ One Time Password (otp) +

+ +
-
- -

- One Time Password (otp) -

- {{@otp}} -
{{/if}} {{#if (has-block)}} {{yield}} diff --git a/ui/lib/core/addon/templates/components/shamir-flow.hbs b/ui/lib/core/addon/templates/components/shamir-flow.hbs index d3fd9af2fc06..98406b57c70e 100644 --- a/ui/lib/core/addon/templates/components/shamir-flow.hbs +++ b/ui/lib/core/addon/templates/components/shamir-flow.hbs @@ -5,46 +5,37 @@ {{#if this.encoded_token}}
-
- -
-

- Encoded Operation Token -

- {{this.encoded_token}} -
+
+

+ Encoded Operation Token +

+
+ {{#if this.otp}} -
- -
-

- One Time Password (otp) -

- {{this.otp}} -
+
+

+ One Time Password (otp) +

+
{{/if}} -
- {{! template-lint-disable quotes }} - {{#let - (if - this.otp - (concat 'vault operator generate-root -otp="' this.otp '" -decode="' this.encoded_token '"') - (concat 'vault operator generate-root -otp="" -decode="' this.encoded_token '"') - ) - as |cmd| - }} - -
-

- DR Operation Token Command -

- {{cmd}} -
- {{/let}} - {{! template-lint-enable quotes }} -
+ + {{! template-lint-disable quotes }} + {{#let + (if + this.otp + (concat 'vault operator generate-root -otp="' this.otp '" -decode="' this.encoded_token '"') + (concat 'vault operator generate-root -otp="" -decode="' this.encoded_token '"') + ) + as |cmd| + }} +

+ DR Operation Token Command +

+ + {{/let}} + {{! template-lint-enable quotes }}