diff --git a/changelog/23382.txt b/changelog/23382.txt new file mode 100644 index 000000000000..50a7d4773bc3 --- /dev/null +++ b/changelog/23382.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Makes modals accessible by implementing Helios Design System modal component +``` diff --git a/ui/app/components/database-connection.js b/ui/app/components/database-connection.js index 420b83f1f360..060a7702b2fa 100644 --- a/ui/app/components/database-connection.js +++ b/ui/app/components/database-connection.js @@ -73,15 +73,15 @@ export default class DatabaseConnectionEdit extends Component { } @action - continueWithoutRotate(evt) { - evt.preventDefault(); + continueWithoutRotate() { + this.showSaveModal = false; const { name } = this.args.model; this.transitionToRoute(SHOW_ROUTE, name); } @action - continueWithRotate(evt) { - evt.preventDefault(); + continueWithRotate() { + this.showSaveModal = false; const { backend, name } = this.args.model; this.rotateCredentials(backend, name) .then(() => { diff --git a/ui/app/components/date-dropdown.js b/ui/app/components/date-dropdown.js index be935b1aa078..7fee2b45510f 100644 --- a/ui/app/components/date-dropdown.js +++ b/ui/app/components/date-dropdown.js @@ -15,10 +15,9 @@ import timestamp from 'core/utils/timestamp'; * * @example * ```js - * + * * ``` * @param {function} handleSubmit - callback function from parent that the date picker triggers on submit - * @param {function} [handleCancel] - optional callback for cancel action, if exists then buttons appear modal style with a light gray background * @param {string} [dateType] - optional argument to give the selected month/year a type * @param {string} [submitText] - optional argument to change submit button text * @param {function} [validateDate] - parent function to validate date selection, receives date object and returns an error message that's passed to the inline alert @@ -69,12 +68,6 @@ export default class DateDropdown extends Component { this.resetDropdown(); } - @action - handleCancel() { - this.args.handleCancel(); - this.resetDropdown(); - } - resetDropdown() { this.maxMonthIdx = 11; this.disabledYear = null; diff --git a/ui/app/components/modal-form/policy-template.hbs b/ui/app/components/modal-form/policy-template.hbs index ffe085bc104e..60f83833dd44 100644 --- a/ui/app/components/modal-form/policy-template.hbs +++ b/ui/app/components/modal-form/policy-template.hbs @@ -32,7 +32,7 @@ {{/if}} {{#if this.showExamplePolicy}} - + {{else}} - - - {{#if this.showFileUpload}} - - {{else}} - - {{/if}} + {{else}} + {{! EDITING - no file upload toggle}} + + {{/if}} + + + {{#if this.showFileUpload}} + {{else}} - {{! EDITING - no file upload toggle}} You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field. - {{! Only renders button (and modal) if not already in the "create policy" modal }} - {{#if @renderPolicyExampleModal}} - - See - . - - {{! Only renders more information if already in the "create policy" modal }} - {{else}} -

- More information about - {{uppercase @model.policyType}} - policies can be found - - here. - -

- {{/if}} {{#each @model.additionalAttrs as |attr|}} @@ -128,26 +110,26 @@ -{{! SAMPLE POLICY MODAL. Only renders modal if not already in create policy modal }} -{{#if @renderPolicyExampleModal}} - -
- {{! code-mirror modifier does not render value initially until focus event fires }} - {{! wait until the Modal is rendered and then show the PolicyExample (contains JsonEditor) }} - {{#if this.showTemplateModal}} - - {{/if}} -
-
- -
- + + Example + {{uppercase @model.policyType}} + Policy + + + + + + + + {{/if}} \ No newline at end of file diff --git a/ui/app/components/sidebar/frame.hbs b/ui/app/components/sidebar/frame.hbs index 93266dce0714..85113093701d 100644 --- a/ui/app/components/sidebar/frame.hbs +++ b/ui/app/components/sidebar/frame.hbs @@ -46,7 +46,6 @@ {{! outlet for app content }} - {{yield}}
diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss index ee908f6ecf1d..31ca5c0f57c9 100644 --- a/ui/app/styles/components/masked-input.scss +++ b/ui/app/styles/components/masked-input.scss @@ -48,25 +48,19 @@ background-color: transparent; } -.button.masked-input-toggle, -.button.download-button { +.button.masked-input-toggle { min-width: $spacing-xl; border-left: 0; color: $grey; box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12); } -.button.download-button { - border-radius: 0; -} - .button.masked-input-toggle { border-radius: 0 $radius $radius 0; } .display-only { - .button.masked-input-toggle, - .button.download-button { + .button.masked-input-toggle { background: transparent; height: auto; line-height: 1rem; diff --git a/ui/app/styles/components/modal-component.scss b/ui/app/styles/components/modal-component.scss deleted file mode 100644 index 3e4160242862..000000000000 --- a/ui/app/styles/components/modal-component.scss +++ /dev/null @@ -1,157 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -.modal { - align-items: center; - bottom: 0; - left: 0; - right: 0; - top: 0; - display: none; - justify-content: center; - overflow: hidden; - position: fixed; - z-index: 20; - - &.is-active { - display: flex; - } -} - -.modal-background { - background: $ui-gray-100; - bottom: 0; - left: 0; - opacity: 0.9; - position: absolute; - right: 0; - top: 0; -} - -.modal-card { - box-shadow: $box-shadow-highest; - border: 1px solid $grey-light; - display: flex; - flex-direction: column; - max-height: calc(100vh - 70px); - margin-top: 60px; - min-width: calc(100vw * 0.3); - overflow: hidden; - position: relative; - - &-head { - border-radius: 0; - background-color: $grey-lightest; - border-bottom: 1px solid $grey-light; - display: flex; - justify-content: flex-start; - padding: 20px; - } - - &-foot { - border-radius: 0; - border: 0; - background-color: $white; - padding: 20px; - - .button:not(:last-child) { - margin-right: 10px; - } - } - - &-title.title { - margin: 0; - flex-grow: 1; - } - - .copy-text { - background-color: $grey-lightest; - padding: $spacing-s; - margin-bottom: $spacing-s; - - code { - overflow: scroll; - max-width: calc(100% - 36px); - background-color: inherit; - } - } - - .copy-close { - margin-top: $spacing-s; - } -} - -.modal-card-title.title { - display: flex; - align-items: center; -} - -.modal-card-body { - background-color: $white; - flex-grow: 1; - flex-shrink: 1; - overflow: auto; - padding: 20px; -} - -pre { - background-color: inherit; -} - -.is-highlight { - .modal-card-head { - background: $yellow-010; - border: 1px solid $yellow-100; - } - .modal-card-title { - color: $yellow-dark; - } -} - -.is-danger { - .modal-card-head { - background: $red-010; - border: 1px solid $red-100; - } - .modal-card-title { - color: $red-dark; - } -} - -.modal-confirm-section { - margin: $spacing-xl 0 $spacing-m; -} - -.modal-card-foot-outlined { - background: $ui-gray-050; - border-top: $base-border; -} - -// customize spacing (.modal-card-body is restricted to padding: 20px) -.modal-card-custom { - background-color: white; - flex-grow: 1; - flex-shrink: 1; - overflow: auto; - - &.has-padding-m { - padding: $spacing-m; - } - - &.has-padding-btm-left { - padding-bottom: $spacing-m; - padding-left: $spacing-m; - } -} - -// responsive css -@media screen and (min-width: 769px), print { - .modal-card, - .modal-content { - margin: 0 auto; - max-height: calc(100vh - 40px); - width: 640px; - } -} diff --git a/ui/app/styles/components/shamir-modal-flow.scss b/ui/app/styles/components/shamir-modal-flow.scss deleted file mode 100644 index 4a8068a6a68c..000000000000 --- a/ui/app/styles/components/shamir-modal-flow.scss +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -.field-title { - font-weight: 700; - font-size: $size-7; -} diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss index b34184ef42ca..ee7b7a6116af 100644 --- a/ui/app/styles/components/sidebar.scss +++ b/ui/app/styles/components/sidebar.scss @@ -24,29 +24,3 @@ color: $black; } } - -.link-status { - height: 40px; - display: flex; - justify-content: center; - align-items: center; - font-size: $size-7; - font-weight: $font-weight-semibold; - - &.connected { - background-color: var(--token-color-surface-action); - color: var(--token-color-foreground-action-active); - - a { - color: var(--token-color-foreground-action-active); - } - } - &.warning { - background-color: var(--token-color-surface-warning); - color: var(--token-color-palette-amber-300); - - a { - color: var(--token-color-palette-amber-300); - } - } -} diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss index a9f48d6831e4..e65339887447 100644 --- a/ui/app/styles/components/toolbar.scss +++ b/ui/app/styles/components/toolbar.scss @@ -65,6 +65,10 @@ display: flex; flex: 1; white-space: nowrap; + &:has(.hds-modal) { + // toolbar buttons that open/close a modal pass attrs to the modal content + white-space: wrap; + } } .toolbar-filters + .toolbar-actions { diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 2d506f4f97d9..3486b3271d0e 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -80,7 +80,6 @@ @import './components/loader'; @import './components/login-form'; @import './components/masked-input'; -@import './components/modal-component.scss'; @import './components/namespace-picker'; @import './components/namespace-reminder'; @import './components/navigate-input'; @@ -104,7 +103,6 @@ @import './components/secrets-engines-card'; // action-block extends selectable-card @import './components/action-block'; -@import './components/shamir-modal-flow'; @import './components/shamir-progress'; @import './components/sidebar'; @import './components/splash-page'; diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss index 8b8790314314..283ac4e5089b 100644 --- a/ui/app/styles/core/buttons.scss +++ b/ui/app/styles/core/buttons.scss @@ -91,12 +91,6 @@ color: $red-500; } - &.is-warning-outlined { - background-color: $yellow-010; - border: 1px solid $yellow-700; - color: $yellow-700; - } - &.is-flat { min-width: auto; border: none; @@ -332,11 +326,11 @@ a.button.disabled { } } +// TODO HDS adoption cleanup: audit styles with design and see what to keep/remove once buttons are fully HDS // Existing class on component, modifying to match existing UI Structure buttons .hds-copy-button { - font-weight: $font-weight-semibold; - box-shadow: $box-shadow-low; - border-radius: $radius; + font-weight: $font-weight-semibold; // TODO delete + box-shadow: $box-shadow-low; // TODO delete &.white-icon svg { color: $white; @@ -350,15 +344,14 @@ a.button.disabled { color: $ui-gray-500; } - &.icon-only { - margin-right: $spacing-xxs; - margin-left: $spacing-xxs; - } - &.transparent { background: none; - border: none; box-shadow: none; + border: 1px solid transparent; + &:hover { + border: 1px solid $grey-light; + border-color: var(--token-color-border-strong); + } } &.primary { @@ -386,3 +379,20 @@ a.button.disabled { } } } + +// Existing class on component, modifying to match existing UI Structure buttons +.hds-button { + font-weight: $font-weight-semibold; // TODO consult design on font weight after button class audit + // for toolbar-button must pass arg @color="secondary" + &.toolbar-button { + color: $black; + background: none; + border: none; + box-shadow: none; + &:hover:not(.disabled) { + background-color: $ui-gray-100; + border: 0; + color: $blue; + } + } +} diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss index b589069b9017..bca2fbcd401d 100644 --- a/ui/app/styles/core/element-styling.scss +++ b/ui/app/styles/core/element-styling.scss @@ -170,3 +170,27 @@ form { label { cursor: pointer; } + +// HDS modifications and overrides +// * ONLY for universal changes (i.e. to address component functionality) + +// +.hds-modal { + &:has(.hds-dropdown) { + overflow: unset; + } +} +.hds-modal__body { + &:has(.hds-dropdown) { + overflow: unset; + } +} + +// +.hds-dropdown-list-item { + > button:disabled { + color: $black; + opacity: 0.5; + cursor: not-allowed; + } +} diff --git a/ui/app/templates/components/clients/attribution.hbs b/ui/app/templates/components/clients/attribution.hbs index 4faa78f4fafe..7cea4fe50ecb 100644 --- a/ui/app/templates/components/clients/attribution.hbs +++ b/ui/app/templates/components/clients/attribution.hbs @@ -15,14 +15,12 @@
{{#if this.hasCsvData}} - + /> {{/if}}
@@ -91,41 +89,41 @@ {{! MODAL FOR CSV DOWNLOAD }} - -
-

- This export will include the namespace path, authentication method path, and the associated total, entity, and - non-entity clients for the below - {{if this.formattedEndDate "date range" "month"}}. -

-

SELECTED DATE {{if this.formattedEndDate " RANGE"}}

-

{{this.formattedStartDate}} {{if this.formattedEndDate "-"}} {{this.formattedEndDate}}

-
-
- - - {{#if @upgradeExplanation}} -
- - Your data contains an upgrade. - - Learn more here. - - -

{{@upgradeExplanation}}

-
- {{/if}} -
- \ No newline at end of file +{{#if this.showCSVDownloadModal}} + + + Export attribution data + + +

+ This export will include the namespace path, authentication method path, and the associated total, entity, and + non-entity clients for the below + {{if this.formattedEndDate "date range" "month"}}. +

+

SELECTED DATE {{if this.formattedEndDate " RANGE"}}

+

+ {{this.formattedStartDate}} + {{if this.formattedEndDate "-"}} + {{this.formattedEndDate}}

+ + + + + + + {{#if @upgradeExplanation}} +
+ + Your data contains an upgrade. + + Learn more here. + + +

{{@upgradeExplanation}}

+
+ {{/if}} + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/clients/config.hbs b/ui/app/templates/components/clients/config.hbs index 3473ba3c1881..088f68ea2bba 100644 --- a/ui/app/templates/components/clients/config.hbs +++ b/ui/app/templates/components/clients/config.hbs @@ -47,47 +47,34 @@ - -
- {{#if (eq @model.enabled "On")}} -

- Vault will start tracking data starting from today’s date, - {{date-format (now) "MMMM d, yyyy"}}. If you’ve previously enabled usage tracking, that historical data will still - be available to you. -

- {{else}} -

- Turning usage tracking off means that all data for the current month will be deleted. You will still be able to - query previous months. -

-

Are you sure?

- {{/if}} -
-
- - -
- + {{#if this.modalOpen}} + + + {{this.modalTitle}} + + + {{#if (eq @model.enabled "On")}} +

+ Vault will start tracking data starting from today’s date, + {{date-format (now) "MMMM d, yyyy"}}. If you’ve previously enabled usage tracking, that historical data will + still be available to you. +

+ {{else}} +

+ Turning usage tracking off means that all data for the current month will be deleted. You will still be able to + query previous months. +

+

Are you sure?

+ {{/if}} + + + + + + + + + {{/if}} {{else}}
{{#each this.infoRows as |item|}} diff --git a/ui/app/templates/components/clients/dashboard.hbs b/ui/app/templates/components/clients/dashboard.hbs index eb236d70cbb1..2c96204c9a66 100644 --- a/ui/app/templates/components/clients/dashboard.hbs +++ b/ui/app/templates/components/clients/dashboard.hbs @@ -175,26 +175,28 @@ {{/if}} {{/if}} +
- {{! BILLING START DATE MODAL }} - - -
+{{! BILLING START DATE MODAL }} +{{#if this.showBillingStartModal}} + + + Edit start month + +

{{this.versionText.description}}

{{this.versionText.label}}

-
- - - \ No newline at end of file + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs index 85f16b7c74b4..dae1eb023a5c 100644 --- a/ui/app/templates/components/database-connection.hbs +++ b/ui/app/templates/components/database-connection.hbs @@ -352,35 +352,32 @@ {{/each}} {{/if}} - -
-

- It’s best practice to rotate the root credential immediately after the initial configuration of each database. Once - rotated, - only Vault knows the new root password. -

-

Would you like to rotate your new credentials? You can also do this later.

-
-
- - -
- +{{#if this.showSaveModal}} + + + Rotate your root credentials? + + +

+ It’s best practice to rotate the root credential immediately after the initial configuration of each database. Once + rotated, + only Vault knows the new root password. +

+

Would you like to rotate your new credentials? You can also do this later.

+ + + + + + + + +{{/if}} - - - {{or this.selectedMonth.name "Month"}} - - - - - - - - - {{or this.selectedYear "Year"}} - - - - - - - {{#unless @handleCancel}} - - {{/unless}} - {{#if this.invalidDate}} - - {{/if}} - -{{#if @handleCancel}} -
- - -
+ + + + {{#each this.dropdownMonths as |month|}} + + {{/each}} + + + + {{#each this.dropdownYears as |year|}} + + {{/each}} + + + +{{#if this.invalidDate}} + {{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/link-status.hbs b/ui/app/templates/components/link-status.hbs index 1f58ce49a3ec..0e0f913d49da 100644 --- a/ui/app/templates/components/link-status.hbs +++ b/ui/app/templates/components/link-status.hbs @@ -4,9 +4,8 @@ ~}} {{#if (and this.state this.version.isEnterprise)}} -
- -

+ + {{#if (eq this.state "connected")}} This self-managed Vault is linked to @@ -19,49 +18,41 @@ for more information. {{/if}} -

-
+ + {{/if}} - -
-
-

Timestamp

-

- {{or this.timestamp "Not available"}} -

-
-
-

Error

- {{#if this.error}} - - {{this.error}} - - {{else}} -

- Not available +{{#if this.showModal}} + + + HCP Link error + + +

+

Timestamp

+

+ {{or this.timestamp "Not available"}}

- {{/if}} -
-
-

Additional information

-

Check the logs for more information

-
-
-
- -
- \ No newline at end of file + +
+

Error

+ {{#if this.error}} + + {{this.error}} + + {{else}} +

+ Not available +

+ {{/if}} +
+
+

Additional information

+

Check the logs for more information

+
+ + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/oidc/assignment-form.hbs b/ui/app/templates/components/oidc/assignment-form.hbs index df4aec772999..d2f8a068852a 100644 --- a/ui/app/templates/components/oidc/assignment-form.hbs +++ b/ui/app/templates/components/oidc/assignment-form.hbs @@ -23,6 +23,7 @@ @id="entities" @label="Entities" @placeholder="Search" + @renderInPlace={{true}} @models={{array "identity/entity"}} @inputValue={{@model.entityIds}} @shouldRenderName={{true}} @@ -35,6 +36,7 @@ @id="groups" @label="Groups" @placeholder="Search" + @renderInPlace={{true}} @models={{array "identity/group"}} @inputValue={{@model.groupIds}} @shouldRenderName={{true}} diff --git a/ui/app/templates/components/oidc/scope-form.hbs b/ui/app/templates/components/oidc/scope-form.hbs index 51e72319196e..d55a292d400b 100644 --- a/ui/app/templates/components/oidc/scope-form.hbs +++ b/ui/app/templates/components/oidc/scope-form.hbs @@ -29,6 +29,15 @@ Scope + + +
@@ -41,15 +50,8 @@ {{/each}}

- You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field. See - . + You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field. Click 'How to write JSON + template for scopes' to view an example.

@@ -78,40 +80,25 @@ {{/if}} - -
-
-

+{{#if this.showTemplateModal}} + + + Scope template + + +

Example of a JSON template for scopes:

- -
- {{! code-mirror modifier does not render value initially in wormhole until focus event fires }} - {{! wait until the Modal is rendered and then show the JsonEditor }} - {{#if this.showTemplateModal}} - - {{/if}} -

- The full list of template parameters can be found - - here. - -

-
-
- -
- \ No newline at end of file + +

+ The full list of template parameters can be found + + here. + +

+ + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transformation-edit.hbs b/ui/app/templates/components/transformation-edit.hbs index ba67b866c764..0a26fc653657 100644 --- a/ui/app/templates/components/transformation-edit.hbs +++ b/ui/app/templates/components/transformation-edit.hbs @@ -53,14 +53,13 @@ {{/if}} {{#if this.capabilities.canUpdate}} {{#if (gt this.model.allowed_roles.length 0)}} - + /> {{else}} Edit transformation @@ -96,30 +95,27 @@ - -
-

- You’re editing a transformation that is in use by at least one role. Editing it may mean that encode and decode - operations stop working. Are you sure? -

-
-
- - Confirm - - -
- \ No newline at end of file +{{#if this.isEditModalActive}} + + + Edit transformation + + +

+ You’re editing a transformation that is in use by at least one role. Editing it may mean that encode and decode + operations stop working. Are you sure? +

+ + + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/datakey.hbs b/ui/app/templates/components/transit-key-action/datakey.hbs index 3ea93d06f4df..24b8d8cbf2c9 100644 --- a/ui/app/templates/components/transit-key-action/datakey.hbs +++ b/ui/app/templates/components/transit-key-action/datakey.hbs @@ -74,19 +74,27 @@
- -
-
+{{#if @isModalActive}} + + + Copy your generated key + + {{#if (eq @param "plaintext")}}

Plaintext

Plaintext is base64 encoded

- + {{/if}}

Ciphertext

- -
-
-
- -
- \ No newline at end of file + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/decrypt.hbs b/ui/app/templates/components/transit-key-action/decrypt.hbs index 411d9acbb717..84d8f90c7a55 100644 --- a/ui/app/templates/components/transit-key-action/decrypt.hbs +++ b/ui/app/templates/components/transit-key-action/decrypt.hbs @@ -56,16 +56,22 @@ {{#if @isModalActive}} - -
-
-

Plaintext

-

Plaintext is base64 encoded

- -
-
-
- -
- + + + Copy your unwrapped data + + +

Plaintext

+

Plaintext is base64 encoded

+ + + + + + {{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/encrypt.hbs b/ui/app/templates/components/transit-key-action/encrypt.hbs index 3f95aeea2b15..82483bc045b9 100644 --- a/ui/app/templates/components/transit-key-action/encrypt.hbs +++ b/ui/app/templates/components/transit-key-action/encrypt.hbs @@ -69,19 +69,22 @@ - -
-
+{{#if @isModalActive}} + + + Copy your token + +

Ciphertext

- -
-
-
- -
- \ No newline at end of file + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/export.hbs b/ui/app/templates/components/transit-key-action/export.hbs index ae51b0ffe8c5..b14b2d67f88a 100644 --- a/ui/app/templates/components/transit-key-action/export.hbs +++ b/ui/app/templates/components/transit-key-action/export.hbs @@ -65,15 +65,19 @@ - -
-
-

Wrapped Key

+{{#if @isModalActive}} + + + Copy your wrapped key + + +

Wrapped key

{{#if this.wrapTTL}} {{else}} @@ -85,13 +89,14 @@ @text="Copy" @isIconOnly={{true}} @textToCopy={{stringify @keys}} + @container="#transit-export-modal" class="transparent top-right-absolute" />
{{/if}} - -
-
- -
- \ No newline at end of file + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/hmac.hbs b/ui/app/templates/components/transit-key-action/hmac.hbs index 2e30c93376fe..05c674a897d2 100644 --- a/ui/app/templates/components/transit-key-action/hmac.hbs +++ b/ui/app/templates/components/transit-key-action/hmac.hbs @@ -51,14 +51,22 @@ - -
-
+{{#if @isModalActive}} + + + Copy your unwrapped data + +

HMAC

- -
-
-
- -
- \ No newline at end of file + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/rewrap.hbs b/ui/app/templates/components/transit-key-action/rewrap.hbs index ac70546aba3d..7d75bd2ce5d4 100644 --- a/ui/app/templates/components/transit-key-action/rewrap.hbs +++ b/ui/app/templates/components/transit-key-action/rewrap.hbs @@ -63,14 +63,17 @@ - -
-
+{{#if @isModalActive}} + + + Copy your token + +

Ciphertext

- -
-
-
- -
- \ No newline at end of file + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/sign.hbs b/ui/app/templates/components/transit-key-action/sign.hbs index 7bc00e5b4ae5..b14eb7a26c04 100644 --- a/ui/app/templates/components/transit-key-action/sign.hbs +++ b/ui/app/templates/components/transit-key-action/sign.hbs @@ -120,19 +120,22 @@ - -
-
+{{#if @isModalActive}} + + + Copy your signature + +

Signature

- -
-
-
- -
- \ No newline at end of file + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/transit-key-action/verify.hbs b/ui/app/templates/components/transit-key-action/verify.hbs index 2f6d8809f79b..2fdbd63a04db 100644 --- a/ui/app/templates/components/transit-key-action/verify.hbs +++ b/ui/app/templates/components/transit-key-action/verify.hbs @@ -192,16 +192,25 @@ - -
- - {{if @valid "Valid" "Not Valid"}} - - The input is - {{if @valid "valid" "not valid"}} - for the given - {{if @signature "signature." "HMAC."}} - - -
- \ No newline at end of file +{{#if @isModalActive}} + + + Results + + + + The input is + {{if @valid "valid" "not valid"}} + for the given + {{if @signature "signature." "HMAC."}} + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/app/templates/vault/cluster/init.hbs b/ui/app/templates/vault/cluster/init.hbs index 9a79643d6fce..c51d2d08c2b0 100644 --- a/ui/app/templates/vault/cluster/init.hbs +++ b/ui/app/templates/vault/cluster/init.hbs @@ -95,15 +95,13 @@ {{/if}} - - Download keys - + @text="Download keys" + /> diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs index d686e65ddc69..cf028c6b2d8b 100644 --- a/ui/app/templates/vault/cluster/policy/show.hbs +++ b/ui/app/templates/vault/cluster/policy/show.hbs @@ -29,14 +29,13 @@ - Download policy - - + @text="Download policy" + /> {{#if (and (not-eq this.model.id "root") (or this.capabilities.canUpdate this.capabilities.canDelete))}} Edit policy 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 b6683a2c8f39..6952f9123c60 100644 --- a/ui/lib/core/addon/components/choose-pgp-key-form.hbs +++ b/ui/lib/core/addon/components/choose-pgp-key-form.hbs @@ -19,7 +19,7 @@ ) }}

-

+

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

diff --git a/ui/lib/core/addon/components/code-snippet.hbs b/ui/lib/core/addon/components/code-snippet.hbs index 106f71ca4a54..edd1e492f825 100644 --- a/ui/lib/core/addon/components/code-snippet.hbs +++ b/ui/lib/core/addon/components/code-snippet.hbs @@ -14,5 +14,6 @@ @text="Copy" @textToCopy={{or @clipboardCode @codeBlock}} @isIconOnly={{@isIconOnly}} + @container={{@container}} />
\ No newline at end of file diff --git a/ui/lib/core/addon/components/confirmation-modal.hbs b/ui/lib/core/addon/components/confirmation-modal.hbs index 2a32d9184349..6f1eb4ea7dab 100644 --- a/ui/lib/core/addon/components/confirmation-modal.hbs +++ b/ui/lib/core/addon/components/confirmation-modal.hbs @@ -3,40 +3,45 @@ SPDX-License-Identifier: BUSL-1.1 ~}} - -
- {{yield}} -
-

- Confirm -

-

Type - {{this.confirmText}} - to confirm - {{this.toConfirmMsg}}

- -
-
-
- - -
- \ No newline at end of file +{{#if @isActive}} + + + {{@title}} + + + {{yield}} +
+

+ Confirm +

+

Type + {{this.confirmText}} + to confirm + {{@toConfirmMsg}} +

+ +
+ + + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/components/confirmation-modal.js b/ui/lib/core/addon/components/confirmation-modal.js index 3e24fc928a85..06878dfefd35 100644 --- a/ui/lib/core/addon/components/confirmation-modal.js +++ b/ui/lib/core/addon/components/confirmation-modal.js @@ -2,11 +2,11 @@ * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 */ - import Component from '@glimmer/component'; /** * @module ConfirmationModal - * ConfirmationModal components are used to provide an alternative to ConfirmationButton that automatically prompts the user to fill in confirmation text before they can continue with a potentially destructive action. It is built off the Modal component + * ConfirmationModal components wrap the component to present a critical (red) type-to-confirm modal. + * They are used for extremely destructive actions that require extra consideration before confirming. * * @example * ```js @@ -15,6 +15,7 @@ import Component from '@glimmer/component'; * @title="Do Dangerous Thing?" * @isActive={{isModalActive}} * @onClose={{action (mut isModalActive) false}} + * @confirmText="yes" * @onConfirmMsg="deleting this thing to delete." * /> * ``` @@ -23,30 +24,12 @@ import Component from '@glimmer/component'; * @param {boolean} isActive - Controls whether the modal is "active" eg. visible or not. * @param {string} title - Title of the modal * @param {string} [confirmText=Yes] - The confirmation text that the user must type before continuing - * @param {string} [toConfirmMsg=''] - Finishes the sentence "Type to confirm ", default is an empty string (ex. 'secret deletion') + * @param {string} [toConfirmMsg] - Finishes the sentence "Type to confirm ", default is an empty string (ex. 'secret deletion') * @param {string} [buttonText=Confirm] - Button text on the confirm button - * @param {string} [buttonClass=is-danger] - extra class to add to confirm button (eg. "is-danger") - * @param {string} [type=warning] - The header styling based on type, passed into the message-types helper (in the Modal component). */ export default class ConfirmationModal extends Component { - get buttonClass() { - return this.args.buttonClass || 'is-danger'; - } - - get buttonText() { - return this.args.buttonText || 'Confirm'; - } - get confirmText() { return this.args.confirmText || 'Yes'; } - - get type() { - return this.args.type || 'warning'; - } - - get toConfirmMsg() { - return this.args.toConfirmMsg || ''; - } } diff --git a/ui/lib/core/addon/components/download-button.hbs b/ui/lib/core/addon/components/download-button.hbs index 266c6af36d10..52514b0262e5 100644 --- a/ui/lib/core/addon/components/download-button.hbs +++ b/ui/lib/core/addon/components/download-button.hbs @@ -3,6 +3,13 @@ SPDX-License-Identifier: BUSL-1.1 ~}} - \ No newline at end of file + \ No newline at end of file diff --git a/ui/lib/core/addon/components/download-button.js b/ui/lib/core/addon/components/download-button.js index cbfb763ff05f..bacd108c6d3f 100644 --- a/ui/lib/core/addon/components/download-button.js +++ b/ui/lib/core/addon/components/download-button.js @@ -12,22 +12,20 @@ import { tracked } from '@glimmer/tracking'; import { assert } from '@ember/debug'; /** * @module DownloadButton - * DownloadButton components are an action button used to download data. Both the action text and icon are yielded. + * DownloadButton wraps an to perform a download action. * * NOTE: when using in an engine, remember to add the 'download' service to its dependencies (in /engine.js) and map to it in /app.js * [ember-docs](https://ember-engines.com/docs/services) * @example * ```js * - * - * Download - * + * /> * ``` * @param {string} [filename] - name of file that prefixes the ISO timestamp generated at download * @param {string} [data] - data to download @@ -35,6 +33,12 @@ import { assert } from '@ember/debug'; * @param {string} [extension='txt'] - file extension, the download service uses this to determine the mimetype * @param {boolean} [stringify=false] - argument to stringify the data before passing to the File constructor * @param {callback} [onSuccess] - callback from parent to invoke if download is successful + * @param {boolean} [hideIcon=false] - renders the 'download' icon by default, pass true to hide (ex: when download button appears in a dropdown) + * * HDS ARGS https://helios.hashicorp.design/components/button?tab=code + * @param {string} [text="Download"] - button text, defaults to 'Download' + * @param {string} [color] - HDS default is primary, but there are four color options: primary, secondary, tertiary, and critical. + * @param {string} [iconPosition="leading"] - icon position, 'leading' (HDS default) or 'trailing' + * @param {boolean} [isIconOnly] - button only renders an icon, no text */ export default class DownloadButton extends Component { diff --git a/ui/lib/core/addon/components/info-table-row.hbs b/ui/lib/core/addon/components/info-table-row.hbs index 54a603a736f6..4a7d7c95b942 100644 --- a/ui/lib/core/addon/components/info-table-row.hbs +++ b/ui/lib/core/addon/components/info-table-row.hbs @@ -40,7 +40,7 @@ @text="Copy" @isIconOnly={{true}} @textToCopy={{@value}} - class="transparent icon-only is-paddingless" + class="transparent has-padding-xxs" data-test-copy-button /> {{/if}} diff --git a/ui/lib/core/addon/components/masked-input.hbs b/ui/lib/core/addon/components/masked-input.hbs index 3c606b8a9698..e6a0eedbe9e0 100644 --- a/ui/lib/core/addon/components/masked-input.hbs +++ b/ui/lib/core/addon/components/masked-input.hbs @@ -39,14 +39,20 @@ @text="Copy" @isIconOnly={{true}} @textToCopy={{@value}} - class="transparent icon-only is-paddingless" + class="transparent has-padding-xxs" data-test-copy-button /> {{/if}} {{#if @allowDownload}} - + {{/if}} - - + + + + + + + + {{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/components/modal.hbs b/ui/lib/core/addon/components/modal.hbs deleted file mode 100644 index 8309e21f3598..000000000000 --- a/ui/lib/core/addon/components/modal.hbs +++ /dev/null @@ -1,37 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -~}} - - -
-
-
-
-

- {{#if this.glyph}} -

- {{#if this.showCloseButton}} - - {{/if}} -
- {{yield}} -
-
- \ No newline at end of file diff --git a/ui/lib/core/addon/components/modal.js b/ui/lib/core/addon/components/modal.js deleted file mode 100644 index 04a403a75a09..000000000000 --- a/ui/lib/core/addon/components/modal.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import Component from '@glimmer/component'; -import { messageTypes } from 'core/helpers/message-types'; -/** - * @module Modal - * Modal components are used to overlay content on top of the page. Has a darkened background, - * a title, and in order to close it you must pass an onClose function. - * - * @example - * ```js - * - * Whatever content pops up when the modal isActive! - * - * ``` - * @callback onClose - * @param {onClose} onClose - onClose is the action taken when someone clicks the modal background or close button (if shown). - * @param {boolean} isActive=false - whether or not modal displays - * @param {string} [title] - This text shows up in the header section of the modal. Only the first word should be capitalized. - * @param {boolean} [showCloseButton=false] - controls whether the close button in the top right corner shows. - * @param {string} [type=null] - The header styling based on type passed into the message-types helper. - */ - -export default class ModalComponent extends Component { - get isActive() { - return this.args.isActive || false; - } - - get showCloseButton() { - return this.args.showCloseButton || false; - } - - get glyph() { - if (!this.args.type) { - return null; - } - return messageTypes([this.args.type]); - } - - get modalClass() { - if (!this.args.type) { - return 'modal'; - } - return 'modal ' + messageTypes([this.args.type]).class; - } -} diff --git a/ui/lib/core/addon/components/policy-example.hbs b/ui/lib/core/addon/components/policy-example.hbs index 89e5fed21451..638089f7522c 100644 --- a/ui/lib/core/addon/components/policy-example.hbs +++ b/ui/lib/core/addon/components/policy-example.hbs @@ -42,7 +42,14 @@

{{/if}} - +

More information about diff --git a/ui/lib/core/addon/components/policy-example.js b/ui/lib/core/addon/components/policy-example.js index c4f324c19684..0c6fdc3ecb60 100644 --- a/ui/lib/core/addon/components/policy-example.js +++ b/ui/lib/core/addon/components/policy-example.js @@ -14,28 +14,11 @@ import Component from '@glimmer/component'; * @example * - * - * @example (in modal) - * - *

- * {{! code-mirror modifier does not render value initially until focus event fires }} - * {{! wait until the Modal is rendered and then show the PolicyExample (contains JsonEditor) }} - * {{#if this.showTemplateModal}} - * - * {{/if}} - *
- *
- * - *
- * * ``` * @param {string} policyType - policy type to decide which template to render; can either be "acl" or "rgp" + * @param {string} container - selector for the container the example renders inside, passed to the copy button in JsonEditor */ export default class PolicyExampleComponent extends Component { diff --git a/ui/lib/core/addon/components/search-select-with-modal.hbs b/ui/lib/core/addon/components/search-select-with-modal.hbs index e3fe952a6d22..f42fb258d173 100644 --- a/ui/lib/core/addon/components/search-select-with-modal.hbs +++ b/ui/lib/core/addon/components/search-select-with-modal.hbs @@ -83,32 +83,24 @@ {{/each}} - {{/if}} - {{! wait until user has selected 'create a new item' before rendering modal}} - {{#if this.nameInput}} - -
+ {{#if this.showModal}} + + + Create new + {{singularize @id}} + + {{#if @modalSubtext}}

{{@modalSubtext}}

{{/if}} - {{#if (has-block)}} - {{yield}} - {{else}} - {{! dynamically render template from modal-form/ folder}} - {{! form must receive an @onSave and @onCancel arg that executes the callback}} - {{component @modalFormTemplate nameInput=this.nameInput onSave=this.resetModal onCancel=this.resetModal}} - {{/if}} -
- + {{! dynamically render template from modal-form/ folder}} + {{! form must receive an @onSave and @onCancel arg that executes the callback}} + {{component @modalFormTemplate nameInput=this.nameInput onSave=this.resetModal onCancel=this.resetModal}} + + {{/if}}
\ No newline at end of file diff --git a/ui/lib/core/addon/components/search-select.hbs b/ui/lib/core/addon/components/search-select.hbs index 9859aa0e7a6c..de8799c354a0 100644 --- a/ui/lib/core/addon/components/search-select.hbs +++ b/ui/lib/core/addon/components/search-select.hbs @@ -43,6 +43,7 @@ @options={{this.dropdownOptions}} @onChange={{this.selectOrCreate}} @placeholderComponent={{component "search-select-placeholder"}} + @renderInPlace={{@renderInPlace}} @verticalPosition="below" @disabled={{@disabled}} as |option| diff --git a/ui/lib/core/addon/components/search-select.js b/ui/lib/core/addon/components/search-select.js index 5371475c1656..0ce39dc541f3 100644 --- a/ui/lib/core/addon/components/search-select.js +++ b/ui/lib/core/addon/components/search-select.js @@ -53,6 +53,7 @@ import { filterOptions, defaultMatcher } from 'ember-power-select/utils/group-ut * @param {string} [wildcardLabel] - string (singular) for rendering label tag beside a wildcard selection (i.e. 'role*'), for the number of items it includes, e.g. @wildcardLabel="role" -> "includes 4 roles" * @param {string} [placeholder] - text you wish to replace the default "search" with * @param {boolean} [displayInherit=false] - if you need the search select component to display inherit instead of box. + * @param {boolean} [renderInPlace] - pass `true` when power select renders in a modal * @param {function} [renderInfoTooltip] - receives each inputValue string and list of dropdownOptions as args, so parent can determine when to render a tooltip beside a selectedOption and the tooltip text. see 'oidc/provider-form.js' * @param {boolean} [disabled] - if true sets the disabled property on the ember-power-select component and makes it unusable. * 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 e5bf2b8faa67..9365cd78d7ab 100644 --- a/ui/lib/core/addon/components/shamir/dr-token-flow.hbs +++ b/ui/lib/core/addon/components/shamir/dr-token-flow.hbs @@ -2,130 +2,131 @@ Copyright (c) HashiCorp, Inc. SPDX-License-Identifier: BUSL-1.1 ~}} - -
- {{#if this.encodedToken}} -

- Below is the process and the values necessary to generate your operation token. Read the instructions carefully! -

-
-
-

- Encoded operation token -

-

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

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

- One time password (OTP) -

-

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

- -
- {{/if}} +{{! THIS COMPONENT RENDERS INSIDE A MODAL (must pass @container to copy buttons) }} +{{#if this.encodedToken}} +

+ Below is the process and the values necessary to generate your operation token. Read the instructions carefully! +

+
+
+

+ Encoded operation token +

+

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

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

- DR operation token command +

+ One time password (OTP)

- {{#if this.otp}} - This command contains both the encoded token and the OTP. It should be executed on the secondary cluster in order - to generate the operation token. - {{else}} - This command requires the OTP saved earlier. It should be executed on the secondary cluster in order to generate - the operation token. - {{/if}} + This OTP will be used to decode the generated operation token. Please save it.

- {{! 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 }} +
+ {{/if}} +
+

+ DR operation token command +

+

+ {{#if this.otp}} + This command contains both the encoded token and the OTP. It should be executed on the secondary cluster in order + to generate the operation token. + {{else}} + This command requires the OTP saved earlier. It should be executed on the secondary cluster in order to generate + 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| + }} + + {{/let}} + {{! template-lint-enable quotes }}
-
- -
- {{else if this.started}} - -

Generate an operation token by entering a portion of the - primary's root key. Once all portions are entered, the generated token may be used to manage your - secondary Disaster Recovery cluster. +

+
+ +
+{{else if this.started}} + +

Generate an operation token by entering a portion of the + primary's root key. Once all portions are entered, the generated token may be used to manage your + secondary Disaster Recovery cluster. +

+ +{{else if this.generateWithPGP}} + +{{else}} + {{! Generate token flow not started }} +
+ +
+

+ Updating or promoting this cluster requires an operation token, generated by inputting the root key shares. If you'd + like to first encrypt the token with a PGP Key, click "Encrypt with PGP key" below, otherwise we can begin generation + of the operation token.

- - {{else if this.generateWithPGP}} - - {{else}} - {{! Generate token flow not started }} - - -
-

- Updating or promoting this cluster requires an operation token, generated by inputting the root key shares. If - you'd like to first encrypt the token with a PGP Key, click "Encrypt with PGP key" below, otherwise we can begin - generation of the operation token. -

+
+
+
+ +
+
+ + or +
-
-
- -
-
- - or - -
-
- -
+
+
- - {{/if}} -
-
- -
\ No newline at end of file + + +{{/if}} +
+ + \ No newline at end of file diff --git a/ui/lib/core/addon/components/shamir/form.hbs b/ui/lib/core/addon/components/shamir/form.hbs index e79020da83ae..ec22c9440709 100644 --- a/ui/lib/core/addon/components/shamir/form.hbs +++ b/ui/lib/core/addon/components/shamir/form.hbs @@ -21,7 +21,7 @@

One Time Password (otp)

- + {{/if}} diff --git a/ui/lib/core/addon/helpers/message-types.js b/ui/lib/core/addon/helpers/message-types.js index 5fa13a0344ed..72c90a397462 100644 --- a/ui/lib/core/addon/helpers/message-types.js +++ b/ui/lib/core/addon/helpers/message-types.js @@ -37,11 +37,6 @@ export const MESSAGE_TYPES = { glyph: 'loading', text: 'Loading', }, - rotation: { - class: 'is-info', - glyphClass: 'has-text-grey', - glyph: 'rotate-cw', - }, }; export function messageTypes([type]) { diff --git a/ui/lib/core/addon/templates/components/replication-action-demote.hbs b/ui/lib/core/addon/templates/components/replication-action-demote.hbs index 879fd458b2cf..ca48e7a01ed5 100644 --- a/ui/lib/core/addon/templates/components/replication-action-demote.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-demote.hbs @@ -19,7 +19,7 @@ type="button" class="button is-secondary" onclick={{action (mut this.isModalActive) true}} - data-test-replication-action-trigger + data-test-replication-action-trigger="demote" > Demote @@ -30,7 +30,6 @@ @title="Demote to secondary?" @onClose={{action (mut this.isModalActive) false}} @isActive={{this.isModalActive}} - @buttonClass="is-primary" @confirmText={{this.model.replicationModeForDisplay}} @toConfirmMsg="demoting this cluster" @onConfirm={{action "onSubmit" "demote" this.model.replicationAttrs.modeForUrl}} diff --git a/ui/lib/core/addon/templates/components/replication-action-disable.hbs b/ui/lib/core/addon/templates/components/replication-action-disable.hbs index 931dbf323dfb..1808aea887ad 100644 --- a/ui/lib/core/addon/templates/components/replication-action-disable.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-disable.hbs @@ -20,7 +20,7 @@ type="button" class="button is-danger" onclick={{action (mut this.isModalActive) true}} - data-test-replication-action-trigger + data-test-replication-action-trigger="disable" > Disable Replication diff --git a/ui/lib/core/addon/templates/components/replication-action-generate-token.hbs b/ui/lib/core/addon/templates/components/replication-action-generate-token.hbs index f1dc7112659e..3fb5a75abd4a 100644 --- a/ui/lib/core/addon/templates/components/replication-action-generate-token.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-generate-token.hbs @@ -25,16 +25,14 @@ - - {{#if this.isModalActive}} - {{! Wrapped in if statement so the Shamir constructor fires on modal open }} - +{{#if this.isModalActive}} + + + Generate operation token + + + + {{! Section & Footer is in child component since the form must do side effects on cancel }} - {{/if}} - \ No newline at end of file + +{{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/templates/components/replication-action-promote.hbs b/ui/lib/core/addon/templates/components/replication-action-promote.hbs index 3ab7628e6dc3..004f8c78de74 100644 --- a/ui/lib/core/addon/templates/components/replication-action-promote.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-promote.hbs @@ -20,107 +20,106 @@ type="button" class="button is-tertiary" onclick={{action (mut this.isModalActive) true}} - data-test-replication-action-trigger + data-test-replication-action-trigger="promote" > Promote - -
- {{#if (eq this.replicationMode "dr")}} +{{#if this.isModalActive}} + + + Promote cluster? + + + {{#if (eq this.replicationMode "dr")}} +

+ To promote this DR Replication Secondary to a primary, enter the DR Operation token. +

+ {{/if}}

- To promote this DR Replication Secondary to a primary, enter the DR Operation token. + Vault Replication is not designed for active-active usage. Enabling two primaries should never be done, as it can + lead to data loss if they or their secondaries are ever reconnected. If the cluster has a primary, be sure to demote + it before promoting a secondary.

- {{/if}} -

- Vault Replication is not designed for active-active usage. Enabling two primaries should never be done, as it can lead - to data loss if they or their secondaries are ever reconnected. If the cluster has a primary, be sure to demote it - before promoting a secondary. -

-
- {{#if (eq this.replicationMode "dr")}} -
-
-
- - -
- \ No newline at end of file + + + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/templates/components/replication-action-recover.hbs b/ui/lib/core/addon/templates/components/replication-action-recover.hbs index 18f5aae686ef..ece5bc1810a4 100644 --- a/ui/lib/core/addon/templates/components/replication-action-recover.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-recover.hbs @@ -18,36 +18,28 @@ type="button" class="button is-secondary" onclick={{action (mut this.isModalActive) true}} - data-test-replication-action-trigger + data-test-replication-action-trigger="recover" > Recover - -
-

- If replication is in an adverse state, we can begin recovery. This will attempt to recover to continue syncing. -

-
-
- - -
- \ No newline at end of file +{{#if this.isModalActive}} + + + Begin recovery? + + +

+ If replication is in an adverse state, we can begin recovery. This will attempt to recover to continue syncing. +

+ + + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/templates/components/replication-action-reindex.hbs b/ui/lib/core/addon/templates/components/replication-action-reindex.hbs index c4d9a1149f5f..ae97d8c28226 100644 --- a/ui/lib/core/addon/templates/components/replication-action-reindex.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-reindex.hbs @@ -17,41 +17,33 @@ type="button" class="button is-secondary" onclick={{action (mut this.isModalActive) true}} - data-test-replication-action-trigger + data-test-replication-action-trigger="reindex" > Reindex - -
-

- Reindexing can cause a very long delay depending on the number and size of objects in the data store. - {{if this.model.replicationAttrs.isPrimary "You should always re-index your secondary first."}} -

-

- Progress will be shown, and you will - {{if this.model.replicationAttrs.isPrimary "not"}} - be able to use Vault during this time. -

-
-
- - -
- \ No newline at end of file +{{#if this.isModalActive}} + + + Begin reindex? + + +

+ Reindexing can cause a very long delay depending on the number and size of objects in the data store. + {{if this.model.replicationAttrs.isPrimary "You should always re-index your secondary first."}} +

+

+ Progress will be shown, and you will + {{if this.model.replicationAttrs.isPrimary "not"}} + be able to use Vault during this time. +

+ + + + + + + + +{{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs b/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs index eb096b1c0817..6924e8681ad6 100644 --- a/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs +++ b/ui/lib/core/addon/templates/components/replication-action-update-primary.hbs @@ -18,117 +18,111 @@ type="button" class="button is-secondary" onclick={{action (mut this.isModalActive) true}} - data-test-update-primary-action-trigger + data-test-replication-action-trigger="update-primary" > Update - -
-

- Use a secondary activation token to change this secondary’s assigned primary. This does not wipe all data in the - cluster. -

+{{#if this.isModalActive}} + + + Update primary + + +

+ Use a secondary activation token to change this secondary’s assigned primary. This does not wipe all data in the + cluster. +

-
- {{#if (eq this.replicationMode "dr")}} +
+ {{#if (eq this.replicationMode "dr")}} +
+ +
+ +
+
+ {{/if}}
-