From 0c59d51e3adb57a97c2c8f1ad1130e9697b18aaf Mon Sep 17 00:00:00 2001 From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:23:55 -0500 Subject: [PATCH] UI: Replace buttons for HDS in component templates (#23698) --- ui/app/components/loading-dropdown-option.hbs | 1 + ui/app/models/role-jwt.js | 6 +- ui/app/styles/components/auth-buttons.scss | 27 ------ ui/app/styles/components/calendar-widget.scss | 13 +-- ui/app/styles/components/popup-menu.scss | 4 + ui/app/styles/core.scss | 1 - ui/app/templates/components/alphabet-edit.hbs | 53 +++++++----- .../components/auth-button-auth0.hbs | 24 ------ .../components/auth-button-gitlab.hbs | 53 ------------ .../components/auth-button-google.hbs | 75 ----------------- .../components/auth-config-form/config.hbs | 9 +- .../components/auth-config-form/options.hbs | 9 +- ui/app/templates/components/auth-form.hbs | 9 +- ui/app/templates/components/auth-jwt.hbs | 38 +++++---- ui/app/templates/components/auth-saml.hbs | 9 +- .../templates/components/calendar-widget.hbs | 44 +++++----- .../templates/components/clients/config.hbs | 4 +- .../components/clients/dashboard.hbs | 12 ++- .../components/configure-aws-secret.hbs | 8 +- .../components/configure-ssh-secret.hbs | 9 +- .../components/control-group-success.hbs | 8 +- ui/app/templates/components/control-group.hbs | 24 +++--- .../dashboard/quick-actions-card.hbs | 10 +-- .../components/database-connection.hbs | 51 ++++++----- .../components/database-role-edit.hbs | 84 +++++++++---------- ui/app/templates/components/date-dropdown.hbs | 4 +- .../components/file-to-array-buffer.hbs | 12 +-- .../generate-credentials-database.hbs | 9 +- .../components/generate-credentials.hbs | 18 ++-- .../templates/components/generated-item.hbs | 9 +- .../components/identity/edit-form.hbs | 34 +++----- .../components/identity/lookup-input.hbs | 2 +- .../components/identity/popup-alias.hbs | 4 +- .../components/keymgmt/distribute.hbs | 4 +- .../templates/components/keymgmt/key-edit.hbs | 59 +++++++------ .../components/keymgmt/provider-edit.hbs | 40 ++++----- ui/app/templates/components/link-status.hbs | 48 ++--------- .../templates/components/mfa/method-form.hbs | 23 ++--- ui/app/templates/components/mfa/mfa-form.hbs | 9 +- .../mfa/mfa-login-enforcement-form.hbs | 57 ++++++------- .../components/mfa/mfa-setup-step-one.hbs | 12 +-- .../components/mfa/mfa-setup-step-two.hbs | 14 +--- .../components/mount-backend-form.hbs | 17 ++-- .../templates/components/namespace-picker.hbs | 14 ++-- .../components/oidc/assignment-form.hbs | 20 ++--- .../templates/components/oidc/client-form.hbs | 20 ++--- ui/app/templates/components/oidc/key-form.hbs | 20 ++--- .../components/oidc/provider-form.hbs | 20 ++--- .../templates/components/oidc/scope-form.hbs | 20 ++--- .../components/okta-number-challenge.hbs | 8 +- ui/app/templates/components/pgp-file.hbs | 12 ++- ui/app/templates/components/raft-join.hbs | 4 +- .../components/raft-storage-overview.hbs | 12 ++- .../components/raft-storage-restore.hbs | 4 +- ui/app/templates/components/role-aws-edit.hbs | 30 ++++--- ui/app/templates/components/role-ssh-edit.hbs | 31 ++++--- .../components/secret-create-or-update.hbs | 74 ++++++---------- .../components/secret-list/aws-role-item.hbs | 12 +-- .../secret-list/database-list-item.hbs | 29 ++++--- .../templates/components/secret-list/item.hbs | 4 +- .../transform-transformation-item.hbs | 4 +- ui/app/templates/components/tool-hash.hbs | 8 +- ui/app/templates/components/tool-lookup.hbs | 8 +- ui/app/templates/components/tool-random.hbs | 8 +- ui/app/templates/components/tool-rewrap.hbs | 8 +- ui/app/templates/components/tool-unwrap.hbs | 6 +- ui/app/templates/components/tool-wrap.hbs | 8 +- .../components/transform-create-form.hbs | 21 ++--- .../components/transform-edit-form.hbs | 26 ++---- .../components/transform-role-edit.hbs | 41 ++++----- .../components/transform-template-edit.hbs | 53 +++++++----- .../components/transformation-edit.hbs | 19 +++-- .../components/transit-form-create.hbs | 9 +- .../components/transit-form-edit.hbs | 9 +- .../components/transit-key-action/datakey.hbs | 4 +- .../components/transit-key-action/decrypt.hbs | 4 +- .../components/transit-key-action/encrypt.hbs | 4 +- .../components/transit-key-action/export.hbs | 4 +- .../components/transit-key-action/hmac.hbs | 4 +- .../components/transit-key-action/rewrap.hbs | 4 +- .../components/transit-key-action/sign.hbs | 4 +- .../components/transit-key-action/verify.hbs | 4 +- .../templates/components/wizard-content.hbs | 4 +- .../vault/cluster/access/identity/index.hbs | 4 +- .../vault/cluster/policies/index.hbs | 8 +- ui/lib/core/addon/components/menu-loader.hbs | 4 +- ui/scripts/codemods/hds/button.js | 14 ++++ ui/tests/acceptance/mfa-login-test.js | 4 +- ui/tests/acceptance/mfa-method-test.js | 2 +- .../secrets/backend/database/secret-test.js | 6 +- .../components/link-status-test.js | 53 +++++++----- .../integration/components/mfa-form-test.js | 4 +- ui/tests/unit/models/role-jwt-test.js | 20 ++--- 93 files changed, 673 insertions(+), 1004 deletions(-) create mode 100644 ui/app/components/loading-dropdown-option.hbs delete mode 100644 ui/app/styles/components/auth-buttons.scss delete mode 100644 ui/app/templates/components/auth-button-auth0.hbs delete mode 100644 ui/app/templates/components/auth-button-gitlab.hbs delete mode 100644 ui/app/templates/components/auth-button-google.hbs diff --git a/ui/app/components/loading-dropdown-option.hbs b/ui/app/components/loading-dropdown-option.hbs new file mode 100644 index 0000000000..8f93edc19d --- /dev/null +++ b/ui/app/components/loading-dropdown-option.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/app/models/role-jwt.js b/ui/app/models/role-jwt.js index 9a68051a48..0d8e2ec1a2 100644 --- a/ui/app/models/role-jwt.js +++ b/ui/app/models/role-jwt.js @@ -15,7 +15,7 @@ const DOMAIN_STRINGS = { 'auth0.com': 'Auth0', }; -const PROVIDER_WITH_LOGO = ['GitLab', 'Google', 'Auth0']; +const PROVIDER_WITH_LOGO = ['GitHub', 'GitLab', 'Google', 'Okta', 'Auth0']; export { DOMAIN_STRINGS, PROVIDER_WITH_LOGO }; @@ -28,8 +28,8 @@ export default class RoleJwtModel extends Model { return DOMAIN_STRINGS[firstMatch] || null; } - get providerButtonComponent() { + get providerIcon() { const { providerName } = this; - return PROVIDER_WITH_LOGO.includes(providerName) ? `auth-button-${providerName.toLowerCase()}` : null; + return PROVIDER_WITH_LOGO.includes(providerName) ? providerName.toLowerCase() : null; } } diff --git a/ui/app/styles/components/auth-buttons.scss b/ui/app/styles/components/auth-buttons.scss deleted file mode 100644 index 84310f7c07..0000000000 --- a/ui/app/styles/components/auth-buttons.scss +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -.auth-button-tile { - height: 31px; - width: 31px; - background: $white; - border-radius: 1px; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); -} -.auth-button-type-google { - position: relative; - top: -10px; - left: -1.05rem; -} - -.auth-button-type-auth0, -.auth-button-type-gitlab { - position: relative; - top: -6px; - left: -0.75rem; -} -[class*='auth-button-type'] .text { - padding-left: $spacing-m; -} diff --git a/ui/app/styles/components/calendar-widget.scss b/ui/app/styles/components/calendar-widget.scss index f7de7a1625..9fe4a848fe 100644 --- a/ui/app/styles/components/calendar-widget.scss +++ b/ui/app/styles/components/calendar-widget.scss @@ -23,22 +23,11 @@ $dark-gray: #535f73; .select-year { grid-area: select-year; - margin-left: 24px; - margin-top: 10px; + margin: 10px 24px; font-weight: $font-weight-bold; display: flex; justify-content: space-between; align-items: first baseline; - - // spacing of < year > icons when the tooltip is added or removed from DOM. - > .padding-right { - // if no tooltip - padding-right: 26px; - } - > .negative-margin { - // if tooltip - margin-right: -50px; - } } .calendar-widget { diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss index 68db72abbd..325b138379 100644 --- a/ui/app/styles/components/popup-menu.scss +++ b/ui/app/styles/components/popup-menu.scss @@ -83,6 +83,10 @@ cursor: default; } } + &.loading-dropdown { + display: flex; + align-items: center; + } } .menu-label { diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index a062572629..1dca67e697 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -52,7 +52,6 @@ @import './helper-classes/typography'; // Component specific styling -@import './components/auth-buttons'; @import './components/auth-form'; @import './components/autocomplete-input'; @import './components/b64-toggle'; diff --git a/ui/app/templates/components/alphabet-edit.hbs b/ui/app/templates/components/alphabet-edit.hbs index 66b20c7e0c..f35121b10c 100644 --- a/ui/app/templates/components/alphabet-edit.hbs +++ b/ui/app/templates/components/alphabet-edit.hbs @@ -31,9 +31,13 @@ {{#if this.capabilities.canDelete}} - +
{{/if}} {{#if this.capabilities.canUpdate}} @@ -79,27 +83,30 @@ {{/each}}
-
- - - Cancel - -
+ data-test-alphabet-transform-create + /> + {{#if (eq this.mode "create")}} + + {{else}} + + {{/if}} +
{{else}} diff --git a/ui/app/templates/components/auth-button-auth0.hbs b/ui/app/templates/components/auth-button-auth0.hbs deleted file mode 100644 index 0a4e4154e8..0000000000 --- a/ui/app/templates/components/auth-button-auth0.hbs +++ /dev/null @@ -1,24 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -~}} - -
-
- {{! template-lint-disable no-forbidden-elements }} - - - - - - - - {{! template-lint-enable no-forbidden-elements }} -
-
- Sign in with Auth0 -
-
\ No newline at end of file diff --git a/ui/app/templates/components/auth-button-gitlab.hbs b/ui/app/templates/components/auth-button-gitlab.hbs deleted file mode 100644 index 16e48fe664..0000000000 --- a/ui/app/templates/components/auth-button-gitlab.hbs +++ /dev/null @@ -1,53 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -~}} - -
- {{! template-lint-disable no-forbidden-elements }} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{! template-lint-enable no-forbidden-elements }} -
- Sign in with GitLab -
-
\ No newline at end of file diff --git a/ui/app/templates/components/auth-button-google.hbs b/ui/app/templates/components/auth-button-google.hbs deleted file mode 100644 index c8c96ad817..0000000000 --- a/ui/app/templates/components/auth-button-google.hbs +++ /dev/null @@ -1,75 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -~}} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Sign in with Google -
-
\ No newline at end of file diff --git a/ui/app/templates/components/auth-config-form/config.hbs b/ui/app/templates/components/auth-config-form/config.hbs index e245a51e66..d0aa09c9e9 100644 --- a/ui/app/templates/components/auth-config-form/config.hbs +++ b/ui/app/templates/components/auth-config-form/config.hbs @@ -16,13 +16,12 @@ {{/if}}
- + />
\ No newline at end of file diff --git a/ui/app/templates/components/auth-config-form/options.hbs b/ui/app/templates/components/auth-config-form/options.hbs index 35e6f0909a..eaef6e030d 100644 --- a/ui/app/templates/components/auth-config-form/options.hbs +++ b/ui/app/templates/components/auth-config-form/options.hbs @@ -12,13 +12,12 @@ {{/each}}
- + />
\ No newline at end of file diff --git a/ui/app/templates/components/auth-form.hbs b/ui/app/templates/components/auth-form.hbs index cb56335804..35506c5cb3 100644 --- a/ui/app/templates/components/auth-form.hbs +++ b/ui/app/templates/components/auth-form.hbs @@ -181,15 +181,14 @@ @selectedAuthIsPath={{this.selectedAuthIsPath}} /> {{/if}} - + /> {{#if (and this.delayAuthMessageReminder.isIdle this.showLoading)}} {{yield}} - + + {{#if this.isOIDC}} + + {{else}} + + {{/if}} \ No newline at end of file diff --git a/ui/app/templates/components/auth-saml.hbs b/ui/app/templates/components/auth-saml.hbs index a3d0059268..37ebf14037 100644 --- a/ui/app/templates/components/auth-saml.hbs +++ b/ui/app/templates/components/auth-saml.hbs @@ -31,15 +31,14 @@
{{yield}}
- + /> {{else}} diff --git a/ui/app/templates/components/calendar-widget.hbs b/ui/app/templates/components/calendar-widget.hbs index 242cf6362f..3fbbf964b1 100644 --- a/ui/app/templates/components/calendar-widget.hbs +++ b/ui/app/templates/components/calendar-widget.hbs @@ -15,6 +15,7 @@
DATE OPTIONS
+ {{! TODO Hds::Dropdown swapout }}