From 43258c28fa33c8ff29b50edb077e370d3bdc84d2 Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Fri, 6 Oct 2023 15:06:36 -0700 Subject: [PATCH] UI: HDS adoption replace (#23382) * UI: Part 1 - hds adoption replace (#23363) * replace policy-form modal * replace clients/attribution modal * clients/config modal * scope form odal * remove button type * include toolbar to match other example templates * rotate credentials modal * add toolbar button class for hds buttons * transformation-edit modal * add back test selector * add route arg to button! * update link status * fix link-status tests * remove prevent default * update db tests * update tests * use page alert for hcp link status banner * fix scopy button selector * fix sidebar test * change to neutral banner * UI: Part 2 - hds adoption replace (#23398) * upgrade HDS library (adds support for snippet containers * cleanup flight icons * replace transit key action modals * re-add deps as devDeps * remove line * address transit tests * UI: Part 3 - hds adoption replace (#23415) * cleanup css * cleanup extra type attr * masked input download modal * use Hds::Button in download button" * fix size of modal * tiny icon fix * refactor download button to always render download icon * update tests * UI: Part 3.5 - hds adoption replace (#23448) * replication-promote modal * replication component modals * replication add secondary modal * move update text for diff * UI: Part 4 - hds adoption replace (#23451) * k8 configure modal * kv delete modal * ldap modals * pki modals * add trash icon * move deps * UI: Part 5 - hds adoption replace (#23471) * replace confirmation modals --------- * UI: Part 6 - hds adoption replace (#23484) * search select with modal * policy search select modal * replace date dropdown for client dashboard * change padding to top * update policy example args * lolllll test typo wow * update dropdown tests * shamir flow modals! * add one more container * update test selectors * UI: Final hds adoption replace cleanup PR (#23522) * search select with modal * policy search select modal * replace date dropdown for client dashboard * change padding to top * update policy example args * lolllll test typo wow * update dropdown tests * shamir flow modals! * add one more container * update test selectors * remove wormhole and modal component * fix selectors * uninstall wormhole * remove shamir-modal-flow class * fix confirm modal test * fix pki and kv test * fix toolbar selector kv * client and download button test * fix-confirmation-modal-padding * fix replication modal tests so relevant modal opens (#23540) * more confirmation modal tests * adds changelog --- changelog/23382.txt | 3 + ui/app/components/database-connection.js | 8 +- ui/app/components/date-dropdown.js | 9 +- .../components/modal-form/policy-template.hbs | 2 +- ui/app/components/policy-form.hbs | 122 ++++----- ui/app/components/sidebar/frame.hbs | 1 - ui/app/styles/components/masked-input.scss | 10 +- ui/app/styles/components/modal-component.scss | 157 ----------- .../styles/components/shamir-modal-flow.scss | 9 - ui/app/styles/components/sidebar.scss | 26 -- ui/app/styles/components/toolbar.scss | 4 + ui/app/styles/core.scss | 2 - ui/app/styles/core/buttons.scss | 40 +-- ui/app/styles/core/element-styling.scss | 24 ++ .../components/clients/attribution.hbs | 86 +++--- .../templates/components/clients/config.hbs | 69 ++--- .../components/clients/dashboard.hbs | 38 +-- .../components/database-connection.hbs | 55 ++-- ui/app/templates/components/date-dropdown.hbs | 117 +++------ ui/app/templates/components/link-status.hbs | 83 +++--- .../components/oidc/assignment-form.hbs | 2 + .../templates/components/oidc/scope-form.hbs | 75 +++--- .../components/transformation-edit.hbs | 64 +++-- .../components/transit-key-action/datakey.hbs | 30 ++- .../components/transit-key-action/decrypt.hbs | 30 ++- .../components/transit-key-action/encrypt.hbs | 33 +-- .../components/transit-key-action/export.hbs | 25 +- .../components/transit-key-action/hmac.hbs | 28 +- .../components/transit-key-action/rewrap.hbs | 23 +- .../components/transit-key-action/sign.hbs | 33 +-- .../components/transit-key-action/verify.hbs | 35 ++- ui/app/templates/vault/cluster/init.hbs | 8 +- .../templates/vault/cluster/policy/show.hbs | 9 +- .../addon/components/choose-pgp-key-form.hbs | 3 +- ui/lib/core/addon/components/code-snippet.hbs | 1 + .../addon/components/confirmation-modal.hbs | 79 +++--- .../addon/components/confirmation-modal.js | 25 +- .../core/addon/components/download-button.hbs | 13 +- .../core/addon/components/download-button.js | 16 +- .../core/addon/components/info-table-row.hbs | 2 +- ui/lib/core/addon/components/masked-input.hbs | 58 ++-- ui/lib/core/addon/components/modal.hbs | 37 --- ui/lib/core/addon/components/modal.js | 55 ---- .../core/addon/components/policy-example.hbs | 9 +- .../core/addon/components/policy-example.js | 21 +- .../components/search-select-with-modal.hbs | 32 +-- .../core/addon/components/search-select.hbs | 1 + ui/lib/core/addon/components/search-select.js | 1 + .../addon/components/shamir/dr-token-flow.hbs | 247 +++++++++--------- ui/lib/core/addon/components/shamir/form.hbs | 2 +- ui/lib/core/addon/helpers/message-types.js | 5 - .../components/replication-action-demote.hbs | 3 +- .../components/replication-action-disable.hbs | 2 +- .../replication-action-generate-token.hbs | 22 +- .../components/replication-action-promote.hbs | 175 ++++++------- .../components/replication-action-recover.hbs | 46 ++-- .../components/replication-action-reindex.hbs | 58 ++-- .../replication-action-update-primary.hbs | 194 +++++++------- ui/lib/core/app/components/modal.js | 6 - ui/lib/core/package.json | 1 - ui/lib/kmip/addon/templates/configuration.hbs | 9 +- .../addon/components/page/configure.hbs | 31 +-- .../kv/addon/components/kv-delete-modal.hbs | 55 ++-- ui/lib/kv/addon/components/kv-delete-modal.js | 7 +- .../addon/components/page/secret/details.hbs | 8 +- .../page/secret/metadata/details.hbs | 9 +- .../addon/components/accounts-checked-out.hbs | 54 ++-- .../ldap/addon/components/page/configure.hbs | 41 ++- .../page/library/details/accounts.hbs | 35 +-- .../page/pki-configuration-details.hbs | 7 +- .../components/page/pki-issuer-details.hbs | 88 +++---- .../page/pki-issuer-rotate-root.hbs | 12 +- .../addon/components/page/pki-key-details.hbs | 9 +- .../addon/components/page/pki-key-list.hbs | 2 +- .../addon/components/page/pki-tidy-status.hbs | 161 +++++------- .../addon/controllers/application.js | 22 +- .../addon/templates/mode/secondaries/add.hbs | 46 +++- ui/package.json | 5 +- ui/tests/acceptance/client-dashboard-test.js | 4 +- .../acceptance/enterprise-replication-test.js | 12 +- .../pki/pki-engine-workflow-test.js | 2 +- ui/tests/acceptance/pki/pki-tidy-test.js | 1 - .../secrets/backend/database/secret-test.js | 6 +- ui/tests/acceptance/transit-test.js | 35 ++- ui/tests/helpers/clients.js | 4 +- ui/tests/helpers/kv/kv-selectors.js | 2 +- ui/tests/helpers/pki/page/pki-tidy.js | 4 +- .../helpers/pki/pki-delete-all-issuers.js | 6 +- ui/tests/helpers/pki/pki-issuer-details.js | 2 +- ui/tests/index.html | 1 - .../components/clients/attribution-test.js | 13 +- .../components/clients/config-test.js | 14 +- .../components/clients/monthly-usage-test.js | 6 +- .../components/clients/running-total-test.js | 9 +- .../components/confirmation-modal-test.js | 9 +- .../components/date-dropdown-test.js | 36 +-- .../components/download-button-test.js | 38 ++- .../components/keymgmt/key-edit-test.js | 16 +- .../kubernetes/page/configure-test.js | 5 +- .../ldap/accounts-checked-out-test.js | 3 +- .../components/ldap/page/configure-test.js | 9 +- .../page/library/details/accounts-test.js | 3 +- .../components/link-status-test.js | 29 +- .../components/masked-input-test.js | 3 +- .../components/mfa/method-form-test.js | 9 +- ui/tests/integration/components/modal-test.js | 55 ---- .../components/oidc/client-form-test.js | 7 +- .../components/oidc/scope-form-test.js | 25 +- .../pki/page/pki-tidy-status-test.js | 14 +- .../components/pki/pki-issuer-details-test.js | 18 +- .../components/policy-form-test.js | 12 +- .../replication-action-generate-token-test.js | 3 +- .../components/replication-actions-test.js | 52 ++-- .../components/replication-header-test.js | 12 +- .../search-select-with-modal-test.js | 17 +- .../components/sidebar/frame-test.js | 2 +- .../components/sidebar/nav/tools-test.js | 3 +- .../components/transit-key-actions-test.js | 49 ++-- .../components/upgrade-page-test.js | 6 +- ui/yarn.lock | 198 +++++++------- 120 files changed, 1555 insertions(+), 2174 deletions(-) create mode 100644 changelog/23382.txt delete mode 100644 ui/app/styles/components/modal-component.scss delete mode 100644 ui/app/styles/components/shamir-modal-flow.scss delete mode 100644 ui/lib/core/addon/components/modal.hbs delete mode 100644 ui/lib/core/addon/components/modal.js delete mode 100644 ui/lib/core/app/components/modal.js delete mode 100644 ui/tests/integration/components/modal-test.js diff --git a/changelog/23382.txt b/changelog/23382.txt new file mode 100644 index 0000000000..50a7d4773b --- /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 420b83f1f3..060a7702b2 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 be935b1aa0..7fee2b4551 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 ffe085bc10..60f83833dd 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 93266dce07..8511309370 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 ee908f6ecf..31ca5c0f57 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 3e41602428..0000000000 --- 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 4a8068a6a6..0000000000 --- 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 b34184ef42..ee7b7a6116 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 a9f48d6831..e653398874 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 2d506f4f97..3486b3271d 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 8b87903143..283ac4e508 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 b589069b90..bca2fbcd40 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 4faa78f4fa..7cea4fe50e 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 3473ba3c18..088f68ea2b 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 eb236d70cb..2c96204c9a 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 85f16b7c74..dae1eb023a 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 1f58ce49a3..0e0f913d49 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 df4aec7729..d2f8a06885 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 51e7231919..d55a292d40 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 ba67b866c7..0a26fc6536 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 3ea93d06f4..24b8d8cbf2 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 411d9acbb7..84d8f90c7a 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 3f95aeea2b..82483bc045 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 ae51b0ffe8..b14b2d67f8 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 2e30c93376..05c674a897 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 ac70546aba..7d75bd2ce5 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 7bc00e5b4a..b14eb7a26c 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 2f6d8809f7..2fdbd63a04 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 9a79643d6f..c51d2d08c2 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 d686e65ddc..cf028c6b2d 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 b6683a2c8f..6952f9123c 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 106f71ca4a..edd1e492f8 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 2a32d91843..6f1eb4ea7d 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 3e24fc928a..06878dfefd 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 266c6af36d..52514b0262 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 cbfb763ff0..bacd108c6d 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 54a603a736..4a7d7c95b9 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 3c606b8a96..e6a0eedbe9 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 8309e21f35..0000000000 --- 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 04a403a75a..0000000000 --- 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 89e5fed214..638089f752 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 c4f324c196..0c6fdc3ecb 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 e3fe952a6d..f42fb258d1 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 9859aa0e7a..de8799c354 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 5371475c16..0ce39dc541 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 e5bf2b8faa..9365cd78d7 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}} -
-

- 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. +{{! 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.

- - {{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. + +

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

+ One time password (OTP) +

+

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

+
-
-
- -
-
- - or - -
-
- -
+ {{/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.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. +

+
+
+
+
- - {{/if}} -
-
- -
\ No newline at end of file +
+ + or + +
+
+ +
+ + +{{/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 e79020da83..ec22c94407 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 5fa13a0344..72c90a3974 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 879fd458b2..ca48e7a01e 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 931dbf323d..1808aea887 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 f1dc711265..3fb5a75abd 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 3ab7628e6d..004f8c78de 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")}} -

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

- {{/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 this.isModalActive}} + + + Promote cluster? + + {{#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 18f5aae686..ece5bc1810 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 c4d9a1149f..ae97d8c282 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 eb096b1c08..6924e8681a 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}}
-