diff --git a/changelog/21520.txt b/changelog/21520.txt new file mode 100644 index 000000000000..38ab73523ba4 --- /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 ae966e676f6f..b01e6b518422 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 fb49462ab4fa..fc8592a54f1f 100644 --- a/ui/app/components/sidebar/user-menu.hbs +++ b/ui/app/components/sidebar/user-menu.hbs @@ -15,83 +15,78 @@ - - \ 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 65f56a6291a0..000000000000 --- 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 1ce0216cd4f5..94071a2fae45 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 e0fced4b6fba..92d50091f681 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 38abccf77e7d..25e8d199321a 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 54795e0e626d..fef202ec9e64 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 be4a6c00fd9c..8e63faebe02d 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 ecb9bdf61c54..1ab971cd03cf 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 5b0692116f21..71706bfa52a7 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 78817fb173ce..0bd09e6325ea 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 f58728a13560..7a9312b0c749 100644 --- a/ui/app/templates/components/identity/popup-members.hbs +++ b/ui/app/templates/components/identity/popup-members.hbs @@ -8,13 +8,12 @@ diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs index d47b3d060ec6..00e65b6c86f7 100644 --- a/ui/app/templates/components/identity/popup-metadata.hbs +++ b/ui/app/templates/components/identity/popup-metadata.hbs @@ -8,14 +8,12 @@ diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs index 7783f7fcf64c..674198f008cc 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 40d9037d47af..7b05249809e5 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 dd3a64cf6edb..d657a83384fc 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}}