From 4ac07e1d97236af2ff675d2863a5acb010f3eaff Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:44:21 -0600 Subject: [PATCH] UI: HDS adoption replace component (#21520) * replace confirm-action dropdown with button+modal * add modal frame to sidebar * fix weird paragraph indent * pass button text as arg * add warning color to rotate modals * update seal action and config ssh * cleanup confirm action * edit form * add dropdown arg * put back seal text * put back confirm button text * fix toolbar stylinggp * popup member group * move up title * finish popup- components * keymgmt * fix modal button logic * remaining app template components * add period for angel * vault cluster items * add button text assertion * remaining instances * remove arg for passing confirm text * contextual confirm action components * delete old components * update docs * ammend dropdown loading states, add getter for confirm button color * address feedback * remove @disabled arg and add @disabledMessage * add changelog; * mfa tests * update test selectors * lol cleanup selectors * start confirm action tests WIP * move dropdown class directly to component * add default color of isInDropdown * final cleanup * add tests * remove @buttonColor as arg for dropdown * update confirm action tests * updae modals with disabled message * refactor provider edit test --- changelog/21520.txt | 3 + ui/app/components/seal-action.hbs | 8 +- ui/app/components/sidebar/user-menu.hbs | 141 +++++++-------- ui/app/styles/components/confirm.scss | 139 -------------- ui/app/styles/components/popup-menu.scss | 13 ++ ui/app/styles/core.scss | 1 - .../components/configure-ssh-secret.hbs | 13 +- .../components/database-connection.hbs | 19 +- .../components/database-role-edit.hbs | 9 +- .../components/generated-item-list.hbs | 37 ++-- .../templates/components/generated-item.hbs | 13 +- .../components/identity/edit-form.hbs | 10 +- .../components/identity/popup-alias.hbs | 65 +++---- .../components/identity/popup-members.hbs | 9 +- .../components/identity/popup-metadata.hbs | 8 +- .../components/identity/popup-policy.hbs | 10 +- .../templates/components/keymgmt/key-edit.hbs | 20 +- .../components/keymgmt/provider-edit.hbs | 37 ++-- .../mfa/mfa-login-enforcement-form.hbs | 3 +- .../components/raft-storage-overview.hbs | 27 ++- ui/app/templates/components/role-aws-edit.hbs | 9 +- ui/app/templates/components/role-ssh-edit.hbs | 9 +- .../components/secret-edit-toolbar.hbs | 10 +- .../components/secret-list/aws-role-item.hbs | 85 ++++----- .../templates/components/secret-list/item.hbs | 90 +++++---- .../components/secret-list/ssh-role-item.hbs | 141 ++++++++------- .../components/transform-role-edit.hbs | 10 +- .../components/transit-form-edit.hbs | 4 +- .../components/transit-key-actions.hbs | 10 +- .../vault/cluster/access/identity/index.hbs | 107 +++++------ .../vault/cluster/access/leases/list.hbs | 26 ++- .../vault/cluster/access/leases/show.hbs | 13 +- .../vault/cluster/access/methods.hbs | 48 +++-- .../access/mfa/methods/method/index.hbs | 16 +- .../vault/cluster/access/namespaces/index.hbs | 35 ++-- .../oidc/assignments/assignment/details.hbs | 9 +- .../access/oidc/clients/client/details.hbs | 9 +- .../cluster/access/oidc/keys/key/details.hbs | 43 ++--- .../oidc/providers/provider/details.hbs | 33 +--- .../access/oidc/scopes/scope/details.hbs | 9 +- .../vault/cluster/policies/index.hbs | 85 +++++---- .../templates/vault/cluster/policy/edit.hbs | 11 +- .../vault/cluster/secrets/backends.hbs | 42 ++--- .../core/addon/components/confirm-action.hbs | 114 ++++++------ .../core/addon/components/confirm-action.js | 102 +++++------ ui/lib/core/addon/components/confirm.js | 72 -------- .../core/addon/components/confirm/message.js | 59 ------ ui/lib/core/addon/components/menu-loader.hbs | 12 -- .../addon/templates/components/confirm.hbs | 23 --- .../templates/components/confirm/message.hbs | 40 ---- .../components/list-item/popup-menu.hbs | 12 +- ui/lib/core/app/components/confirm.js | 6 - ui/lib/core/app/components/confirm/message.js | 6 - ui/lib/core/app/components/menu-loader.js | 6 - .../addon/templates/credentials/index.hbs | 43 ++--- .../kmip/addon/templates/credentials/show.hbs | 10 +- ui/lib/kmip/addon/templates/role.hbs | 11 +- ui/lib/kmip/addon/templates/scope/roles.hbs | 30 +-- ui/lib/kmip/addon/templates/scopes/index.hbs | 45 ++--- .../addon/components/page/role/details.hbs | 10 +- .../addon/components/page/roles.hbs | 19 +- ui/lib/kv/addon/components/page/list.hbs | 17 +- .../addon/components/page/configuration.hbs | 12 +- .../ldap/addon/components/page/libraries.hbs | 20 +- .../addon/components/page/library/details.hbs | 10 +- .../addon/components/page/role/details.hbs | 22 ++- ui/lib/ldap/addon/components/page/roles.hbs | 39 ++-- .../page/pki-certificate-details.hbs | 9 +- .../addon/components/page/pki-key-details.hbs | 9 +- .../components/page/pki-role-details.hbs | 9 +- .../templates/mode/secondaries/index.hbs | 9 +- .../templates/mode/secondaries/revoke.hbs | 11 +- ui/tests/acceptance/mfa-method-test.js | 8 +- .../oidc-config/clients-keys-test.js | 2 +- .../oidc-config/providers-scopes-test.js | 2 +- .../pki/pki-engine-workflow-test.js | 4 +- ui/tests/acceptance/policies-acl-old-test.js | 2 +- .../secrets/backend/kubernetes/roles-test.js | 2 +- ui/tests/acceptance/unseal-test.js | 2 +- ui/tests/helpers/oidc-config.js | 14 +- ui/tests/helpers/pki/page/pki-keys.js | 2 +- .../components/confirm-action-test.js | 171 ++++++++++++++---- .../integration/components/confirm-test.js | 107 ----------- .../components/keymgmt/provider-edit-test.js | 69 +++++-- .../kubernetes/page/role/details-test.js | 4 +- .../components/kv/page/kv-page-list-test.js | 4 +- .../ldap/page/configuration-test.js | 2 +- .../ldap/page/library/details-test.js | 4 +- .../components/ldap/page/role/details-test.js | 4 +- .../components/seal-action-test.js | 4 +- ui/tests/pages/policies/index.js | 8 +- ui/tests/pages/policy/edit.js | 2 +- ui/tests/pages/secrets/backend/kv/show.js | 2 +- ui/tests/pages/secrets/backend/list.js | 8 +- ui/tests/pages/secrets/backends.js | 8 +- 95 files changed, 1118 insertions(+), 1543 deletions(-) create mode 100644 changelog/21520.txt delete mode 100644 ui/app/styles/components/confirm.scss delete mode 100644 ui/lib/core/addon/components/confirm.js delete mode 100644 ui/lib/core/addon/components/confirm/message.js delete mode 100644 ui/lib/core/addon/components/menu-loader.hbs delete mode 100644 ui/lib/core/addon/templates/components/confirm.hbs delete mode 100644 ui/lib/core/addon/templates/components/confirm/message.hbs delete mode 100644 ui/lib/core/app/components/confirm.js delete mode 100644 ui/lib/core/app/components/confirm/message.js delete mode 100644 ui/lib/core/app/components/menu-loader.js delete mode 100644 ui/tests/integration/components/confirm-test.js diff --git a/changelog/21520.txt b/changelog/21520.txt new file mode 100644 index 0000000000..38ab73523b --- /dev/null +++ b/changelog/21520.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Replace inline confirm alert inside a popup-menu dropdown with confirm alert modal +``` diff --git a/ui/app/components/seal-action.hbs b/ui/app/components/seal-action.hbs index ae966e676f..b01e6b5184 100644 --- a/ui/app/components/seal-action.hbs +++ b/ui/app/components/seal-action.hbs @@ -21,14 +21,10 @@
- Seal - + />
\ No newline at end of file diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs index fb49462ab4..fc8592a54f 100644 --- a/ui/app/components/sidebar/user-menu.hbs +++ b/ui/app/components/sidebar/user-menu.hbs @@ -15,83 +15,78 @@ - -
-
-
- {{capitalize this.auth.authData.displayName}} -
-
- +
\ No newline at end of file diff --git a/ui/app/styles/components/confirm.scss b/ui/app/styles/components/confirm.scss deleted file mode 100644 index 65f56a6291..0000000000 --- a/ui/app/styles/components/confirm.scss +++ /dev/null @@ -1,139 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -.confirm-wrapper { - position: relative; - overflow: hidden; - border-radius: $radius; - box-shadow: $box-shadow, $box-shadow-middle; -} - -.confirm { - transition: transform $speed; - padding-top: 2px; -} - -.show-confirm { - transform: translateX(-100%); - transition: transform $speed; -} - -.confirm.show-confirm { - visibility: hidden; -} - -.confirm-overlay { - position: absolute; - background-color: white; - top: 0; - left: 100%; - width: 100%; -} - -.confirm, -.confirm-overlay { - button.link, - a { - background-color: $white; - color: $grey-darkest; - - &:hover { - background-color: $ui-gray-050; - color: $ui-gray-900; - } - - &.is-active { - background-color: $blue-500; - color: $blue; - } - - &.is-destroy { - color: $red; - - &:hover { - background-color: $red; - color: $white; - } - } - - &.disabled { - opacity: 0.5; - - &:hover { - background: transparent; - cursor: default; - } - } - } -} - -.confirm-action span .button { - display: block; - margin: 0.25rem auto; - width: 95%; -} - -.confirm-action > span { - @include from($mobile) { - align-items: center; - display: flex; - } - - * { - margin-left: $spacing-12; - } - - .confirm-action-text:not(.is-block) { - text-align: right; - - @include until($mobile) { - display: block; - margin-bottom: $spacing-12; - text-align: left; - } - } - .confirm-action-text.is-block { - text-align: left; - } -} - -.confirm-action-message { - margin: 0; - - .message { - border: 0; - font-size: $size-8; - line-height: 1.33; - margin: 0; - } - - .message-title { - font-size: 1rem; - } - - .hs-icon { - color: $yellow; - } - - p { - font-weight: $font-weight-semibold; - margin-left: $spacing-24; - padding-left: $spacing-4; - padding-top: 0; - } - - .confirm-action-options { - border-top: $light-border; - display: flex; - padding: $spacing-4; - - .link { - flex: 1; - text-align: center; - width: auto; - padding: $spacing-8; - } - } -} diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss index 1ce0216cd4..94071a2fae 100644 --- a/ui/app/styles/components/popup-menu.scss +++ b/ui/app/styles/components/popup-menu.scss @@ -48,6 +48,19 @@ width: 100%; } + // TODO HDS polish - temp styling fix for ConfirmAction dropdown buttons + // so they match other dropdown elements until we replace popup-menu with Hds::Dropdown + .hds-confirm-action-critical { + &:hover { + background-color: $ui-gray-050; + } + div { + margin-left: -$spacing-4; + font-size: $size-7; + font-weight: $font-weight-semibold; + } + } + button.link, .ember-power-select-option, .ember-power-select-option[aria-current='true'], diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index e0fced4b6f..92d50091f6 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -61,7 +61,6 @@ @import './components/calendar-widget'; @import './components/cluster-banners'; @import './components/codemirror'; -@import './components/confirm'; @import './components/console-ui-panel'; @import './components/control-group'; @import './components/doc-link'; diff --git a/ui/app/templates/components/configure-ssh-secret.hbs b/ui/app/templates/components/configure-ssh-secret.hbs index 38abccf77e..25e8d19932 100644 --- a/ui/app/templates/components/configure-ssh-secret.hbs +++ b/ui/app/templates/components/configure-ssh-secret.hbs @@ -22,18 +22,15 @@
-
+ -
-
- Delete - -
+ /> +
{{else}}
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs index 54795e0e62..fef202ec9e 100644 --- a/ui/app/templates/components/database-connection.hbs +++ b/ui/app/templates/components/database-connection.hbs @@ -35,15 +35,14 @@ {{/if}} {{#if @model.canReset}} - Reset connection - + /> {{/if}} {{#if (or @model.canReset @model.canDelete)}}
@@ -51,15 +50,15 @@ {{#if @model.canRotateRoot}} {{! template-lint-disable quotes }} - Rotate root credentials - + /> {{! template-lint-enable }} {{/if}} {{#if @model.canAddRole}} diff --git a/ui/app/templates/components/database-role-edit.hbs b/ui/app/templates/components/database-role-edit.hbs index be4a6c00fd..8e63faebe0 100644 --- a/ui/app/templates/components/database-role-edit.hbs +++ b/ui/app/templates/components/database-role-edit.hbs @@ -25,15 +25,14 @@ {{#if @model.canDelete}} - Delete role - + />
{{/if}} {{#if (and @model.canRotateRoleCredentials (eq @model.type "static"))}} diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs index ecb9bdf61c..1ab971cd03 100644 --- a/ui/app/templates/components/generated-item-list.hbs +++ b/ui/app/templates/components/generated-item-list.hbs @@ -75,7 +75,7 @@ {{list.item.id}} - +
  • View @@ -88,25 +88,22 @@ {{singularize this.itemType}}
    • -
  • - -
    • +     {{/if}} diff --git a/ui/app/templates/components/generated-item.hbs b/ui/app/templates/components/generated-item.hbs index 5b0692116f..71706bfa52 100644 --- a/ui/app/templates/components/generated-item.hbs +++ b/ui/app/templates/components/generated-item.hbs @@ -38,15 +38,12 @@ - Delete - {{this.itemType}} - + @confirmMessage="Are you sure you want to delete {{this.itemType}} {{this.model.id}}?" + />
    - Delete - {{this.model.identityType}} - + />     {{/if}} diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs index 78817fb173..0bd09e6325 100644 --- a/ui/app/templates/components/identity/popup-alias.hbs +++ b/ui/app/templates/components/identity/popup-alias.hbs @@ -4,41 +4,42 @@ ~}} - - {{#let (get this.params "0") as |item|}} - + {{/let}} \ No newline at end of file diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs index f58728a135..7a9312b0c7 100644 --- a/ui/app/templates/components/identity/popup-members.hbs +++ b/ui/app/templates/components/identity/popup-members.hbs @@ -8,13 +8,12 @@
    • - Remove - + />
    diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs index d47b3d060e..00e65b6c86 100644 --- a/ui/app/templates/components/identity/popup-metadata.hbs +++ b/ui/app/templates/components/identity/popup-metadata.hbs @@ -8,14 +8,12 @@
    • - Remove - + />
    diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs index 7783f7fcf6..674198f008 100644 --- a/ui/app/templates/components/identity/popup-policy.hbs +++ b/ui/app/templates/components/identity/popup-policy.hbs @@ -18,14 +18,12 @@
  • - Remove from - {{this.model.identityType}} - + />
    • diff --git a/ui/app/templates/components/keymgmt/key-edit.hbs b/ui/app/templates/components/keymgmt/key-edit.hbs index 40d9037d47..7b05249809 100644 --- a/ui/app/templates/components/keymgmt/key-edit.hbs +++ b/ui/app/templates/components/keymgmt/key-edit.hbs @@ -75,31 +75,31 @@ {{/if}} {{#if @model.provider}} - Remove key - + /> {{/if}} {{#if (or @model.canDelete @model.provider)}}
    {{/if}} - Rotate key - + /> {{#if @model.canEdit}} {{#if @model.canDelete}} - - - - Delete provider - - - {{#if @model.keys.length}} - -
    - This provider cannot be deleted until all - {{@model.keys.length}} - key(s) distributed to it are revoked. This can be done from the Keys tab. -
    -     - {{/if}} -     + {{/if}} {{#if (and @model.canDelete (or @model.canListKeys @model.canEdit))}}
    diff --git a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs index dd3a64cf6e..d657a83384 100644 --- a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs +++ b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs @@ -78,6 +78,7 @@ {{/each}}