From 23e004299e1afbd685a13511a0482007345f5b09 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Wed, 31 Oct 2018 16:08:25 -0600 Subject: [PATCH 1/3] Style Alert Banners --- .../{message-in-page.js => alert-banner.js} | 2 - ui/app/styles/components/login-form.scss | 1 + ui/app/styles/components/message-in-page.scss | 10 --- ui/app/styles/components/splash-page.scss | 6 +- .../components/token-expire-warning.scss | 4 +- ui/app/styles/components/unseal-warning.scss | 8 +- ui/app/styles/core.scss | 1 - ui/app/styles/core/message.scss | 84 +++++++++++++------ ui/app/styles/core/notification.scss | 4 +- ui/app/styles/utils/_colors.scss | 7 ++ ui/app/templates/components/alert-banner.hbs | 31 +++++++ ui/app/templates/components/config-pki-ca.hbs | 16 ++-- .../components/generate-credentials.hbs | 8 +- .../components/identity/edit-form.hbs | 7 +- .../components/identity/item-details.hbs | 72 ++++++++-------- .../templates/components/kv-object-editor.hbs | 9 +- ui/app/templates/components/license-info.hbs | 16 ++-- ui/app/templates/components/message-error.hbs | 8 +- .../templates/components/message-in-page.hbs | 22 ----- ui/app/templates/components/shamir-flow.hbs | 23 +++-- ui/app/templates/components/string-list.hbs | 7 +- ui/app/templates/partials/role-aws/form.hbs | 9 +- ui/app/templates/partials/role-aws/show.hbs | 9 +- .../templates/partials/secret-form-edit.hbs | 8 +- .../vault/cluster/policies/create.hbs | 2 +- .../vault/cluster/replication-dr-promote.hbs | 10 ++- .../vault/cluster/secrets/backend/sign.hbs | 8 +- ui/app/templates/vault/cluster/unseal.hbs | 16 ++-- 28 files changed, 238 insertions(+), 170 deletions(-) rename ui/app/components/{message-in-page.js => alert-banner.js} (93%) create mode 100644 ui/app/templates/components/alert-banner.hbs delete mode 100644 ui/app/templates/components/message-in-page.hbs diff --git a/ui/app/components/message-in-page.js b/ui/app/components/alert-banner.js similarity index 93% rename from ui/app/components/message-in-page.js rename to ui/app/components/alert-banner.js index e5e5c59c7..155757d9b 100644 --- a/ui/app/components/message-in-page.js +++ b/ui/app/components/alert-banner.js @@ -17,6 +17,4 @@ export default Component.extend({ alertType: computed('type', function() { return messageTypes([this.get('type')]); }), - - messageClass: 'message-body', }); diff --git a/ui/app/styles/components/login-form.scss b/ui/app/styles/components/login-form.scss index 897e73ded..2740bf944 100644 --- a/ui/app/styles/components/login-form.scss +++ b/ui/app/styles/components/login-form.scss @@ -1,3 +1,4 @@ .login-form { box-shadow: $box-shadow, $box-shadow-high; + overflow: auto; } diff --git a/ui/app/styles/components/message-in-page.scss b/ui/app/styles/components/message-in-page.scss index e766d8826..e69de29bb 100644 --- a/ui/app/styles/components/message-in-page.scss +++ b/ui/app/styles/components/message-in-page.scss @@ -1,10 +0,0 @@ -.message-in-page { - margin-bottom: 1rem; - position: relative; - - .close-button { - position: absolute; - right: 1rem; - top: $size-10; - } -} diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss index 4338ca80f..2ea99593d 100644 --- a/ui/app/styles/components/splash-page.scss +++ b/ui/app/styles/components/splash-page.scss @@ -19,9 +19,7 @@ .splash-page-container { margin: $size-2 0; } + .splash-page-header { padding: $size-6 $size-5; -} -.splash-page-sub-header { - margin: 0 $size-5 $size-6; -} +} \ No newline at end of file diff --git a/ui/app/styles/components/token-expire-warning.scss b/ui/app/styles/components/token-expire-warning.scss index d761b9f70..844e71bbc 100644 --- a/ui/app/styles/components/token-expire-warning.scss +++ b/ui/app/styles/components/token-expire-warning.scss @@ -11,9 +11,7 @@ .token-expire-warning .content p { padding-right: $size-6; } -.token-expire-warning .message-in-page { - margin: 0; -} .token-expire-warning .message { + margin: 0; width: 100%; } diff --git a/ui/app/styles/components/unseal-warning.scss b/ui/app/styles/components/unseal-warning.scss index 817a67a37..9d9c11f6d 100644 --- a/ui/app/styles/components/unseal-warning.scss +++ b/ui/app/styles/components/unseal-warning.scss @@ -1,5 +1,3 @@ -.unseal-warning.message, -.unseal-warning .message-body { - border-radius: 0; - margin-bottom: 0; -} +.unseal-warning.message { + margin: -1px -1px 0; +} \ No newline at end of file diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 73b633193..3c395c50d 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -63,7 +63,6 @@ @import "./components/loader"; @import "./components/login-form"; @import "./components/masked-input"; -@import "./components/message-in-page"; @import "./components/namespace-picker"; @import "./components/namespace-reminder"; @import "./components/page-header"; diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index a3bcbc34f..70a895b93 100644 --- a/ui/app/styles/core/message.scss +++ b/ui/app/styles/core/message.scss @@ -1,38 +1,72 @@ .message { - &.is-list { - margin: $size-10 0; + margin-bottom: $spacing-s; + padding: $spacing-m $spacing-m $spacing-m $spacing-s; + position: relative; + + .close-button { + position: absolute; + right: 1rem; + top: $size-10; } - &.is-warning { - .message-body { - color: $yellow-darkest; - padding: 0.75rem 1.25rem; + .message-icon { + margin-right: $spacing-xs; + } + + .message-title { + font-size: 16px; + font-weight: $font-weight-bold; + } + + .message-body { + border: 0; + margin-top: $spacing-xxs; + } + + p { + font-size: $size-8; + border: 0; + padding: 0; + } + + .message-actions { + margin-top: $spacing-xs; + + a, + a:not(.button):not(.file-delete-button):not(.tag) { + color: $blue; + font-weight: $font-weight-semibold; + text-decoration: none; + } + + > * + * { + margin-left: $spacing-xs; } } &.is-highlight { - background: $yellow-lightest; - .message-body { - border: none; - box-shadow: 0 0 0 1px $yellow; - color: $yellow-darkest; + background: $yellow-010; + border: 1px solid $yellow-100; + + .message-icon { + color: $yellow-500; } - .has-text-highlight, - .close-button { - color: $yellow; - } - .title, - code { - background: none; - color: inherit; - } - .content .button { - border-color: $yellow; - color: $yellow-darkest; + + .message-title { + color: $orange-700; } } - .content { - margin-bottom: 0; + &.is-danger { + background: $red-010; + border: 1px solid $red-050; + + .message-icon { + color: $red-500; + } + + .message-title { + color: $red-700; + } } } diff --git a/ui/app/styles/core/notification.scss b/ui/app/styles/core/notification.scss index 1273e643f..4bc10defb 100644 --- a/ui/app/styles/core/notification.scss +++ b/ui/app/styles/core/notification.scss @@ -1,8 +1,10 @@ .notification { - padding: 1rem 2.5rem 1rem 1.5rem; + padding: $spacing-m $spacing-m $spacing-m $spacing-s; + .title { font-weight: $weight-bold; } + &.has-border { border: 1px solid currentColor; border-left-width: 10px; diff --git a/ui/app/styles/utils/_colors.scss b/ui/app/styles/utils/_colors.scss index 245d7407d..fb70aca50 100644 --- a/ui/app/styles/utils/_colors.scss +++ b/ui/app/styles/utils/_colors.scss @@ -1,6 +1,7 @@ // Colors that will eventually be in Structure package // Vault Gray +$vault-gray-010: #FDFDFE; $vault-gray-050: #F7FAFC; $vault-gray-100: #EBEEF5; $vault-gray-200: #D3DBE6; @@ -15,6 +16,7 @@ $vault-gray: $vault-gray-500; $vault-gray-dark: $vault-gray-700; // UI Gray +$ui-gray-010: #FBFBFC; $ui-gray-050: #F7F8FA; $ui-gray-100: #EBEEF2; $ui-gray-200: #DCE0E6; @@ -30,6 +32,7 @@ $grey-dark: $ui-gray-700; $grey-darkest: $ui-gray-900; // Blue +$blue-010: #FBFCFF; $blue-050: #F0F5FF; $blue-100: #BFD4FF; $blue-300: #5B92FF; @@ -43,6 +46,7 @@ $blue-dark: $blue-700; $blue-darkest: $blue-900; // Red +$red-010: #FDFAFB; $red-050: #F9ECEE; $red-100: #EFC7CC; $red-300: #DB7D88; @@ -56,6 +60,7 @@ $red-dark: $red-700; $red-darkest: $red-900; // Green +$green-010: #FAFDFA; $green-050: #ECF7ED; $green-100: #C6E9C9; $green-300: #7ACC81; @@ -69,6 +74,7 @@ $green-dark: $green-700; $green-darkest: $green-900; // Orange +$orange-010: #FFFCFA; $orange-050: #FEF4EC; $orange-100: #FDE0C8; $orange-300: #FBB77F; @@ -82,6 +88,7 @@ $orange-dark: $orange-700; $orange-darkest: $orange-900; // Yellow +$yellow-010: #FFFDF6; $yellow-050: #FFFBED; $yellow-100: #FDEEBA; $yellow-300: #FBD95E; diff --git a/ui/app/templates/components/alert-banner.hbs b/ui/app/templates/components/alert-banner.hbs new file mode 100644 index 000000000..5ee42039a --- /dev/null +++ b/ui/app/templates/components/alert-banner.hbs @@ -0,0 +1,31 @@ +
+
+
+ {{i-con + glyph=alertType.glyph + class=alertType.glyphClass + size=22 + excludeIconClass=true + }} +
+ {{#if yieldWithoutColumn}} + {{yield}} + {{else}} +
+
+ {{or title alertType.text}} +
+ {{#if message}} +

+ {{message}} +

+ {{/if}} + {{#if hasBlock}} +

+ {{yield}} +

+ {{/if}} +
+ {{/if}} +
+
diff --git a/ui/app/templates/components/config-pki-ca.hbs b/ui/app/templates/components/config-pki-ca.hbs index 328bfd2c6..276fa424a 100644 --- a/ui/app/templates/components/config-pki-ca.hbs +++ b/ui/app/templates/components/config-pki-ca.hbs @@ -32,9 +32,11 @@
{{#if model.uploadPemBundle}} - {{#message-in-page type="warning" data-test-warning=true}} - If you have already set a certificate and key, they will be overridden with the successful saving of a new PEM bundle. - {{/message-in-page}} + {{/if}} {{partial "partials/form-field-groups-loop"}}
@@ -67,9 +69,11 @@ {{/if}} {{else if signIntermediate}} {{#if (or model.certificate)}} - {{#message-in-page data-test-warning type="warning"}} - If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint. - {{/message-in-page}} + {{#each model.attrs as |attr|}} {{info-table-row data-test-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name)}} {{/each}} diff --git a/ui/app/templates/components/generate-credentials.hbs b/ui/app/templates/components/generate-credentials.hbs index 377f645cd..408d12cb0 100644 --- a/ui/app/templates/components/generate-credentials.hbs +++ b/ui/app/templates/components/generate-credentials.hbs @@ -34,9 +34,11 @@
{{message-error model=model}} {{#unless model.isError}} - {{#message-in-page type="warning" data-test-warning=true}} - You will not be able to access this information later, so please copy the information below. - {{/message-in-page}} + {{/unless}} {{#each model.attrs as |attr|}} {{#if (eq attr.type "object")}} diff --git a/ui/app/templates/components/identity/edit-form.hbs b/ui/app/templates/components/identity/edit-form.hbs index f7c8c8e67..c0ca88971 100644 --- a/ui/app/templates/components/identity/edit-form.hbs +++ b/ui/app/templates/components/identity/edit-form.hbs @@ -3,9 +3,10 @@ {{message-error model=model}} {{#if (eq mode "merge")}} - {{#message-in-page type="warning"}} - Metadata on merged entities is not preserved, you will need to recreate it on the entity you merge to. - {{/message-in-page}} + {{/if}} {{#each model.fields as |attr|}} {{form-field data-test-field attr=attr model=model}} diff --git a/ui/app/templates/components/identity/item-details.hbs b/ui/app/templates/components/identity/item-details.hbs index 55ecb3d59..3baa2609d 100644 --- a/ui/app/templates/components/identity/item-details.hbs +++ b/ui/app/templates/components/identity/item-details.hbs @@ -1,38 +1,38 @@ -{{#if model.disabled}} -
- {{#message-in-page type="warning" yieldWithoutColumn=true messageClass="message-body is-marginless" data-test-disabled-warning=true}} -
- Attention This {{model.identityType}} is disabled. All associated tokens cannot be used, but are not revoked. -
+
+ {{#if model.disabled}} + {{#if model.canEdit}} -
- -
+ {{#link-to 'vault.cluster.access.identity.show' invokeAction=(action 'enable' model) data-test-enable=true}} + Enable + {{/link-to}} {{/if}} - {{/message-in-page}} -
-{{/if}} -{{info-table-row label="Name" value=model.name data-test-identity-item-name=true}} -{{info-table-row label="Type" value=model.type }} -{{info-table-row label="ID" value=model.id }} -{{#info-table-row label="Merged Ids" value=model.mergedEntityIds }} -
- {{#each model.mergedEntityIds as |id|}} -
- {{id}} -
- {{/each}} -
-{{/info-table-row}} -{{#info-table-row label="Created" value=model.creationTime}} - -{{/info-table-row}} -{{#info-table-row label="Last Updated" value=model.lastUpdateTime}} - -{{/info-table-row}} + + {{/if}} + {{info-table-row label="Name" value=model.name data-test-identity-item-name=true}} + {{info-table-row label="Type" value=model.type }} + {{info-table-row label="ID" value=model.id }} + {{#info-table-row label="Merged Ids" value=model.mergedEntityIds }} +
+ {{#each model.mergedEntityIds as |id|}} +
+ {{id}} +
+ {{/each}} +
+ {{/info-table-row}} + {{#info-table-row label="Created" value=model.creationTime}} + + {{/info-table-row}} + {{#info-table-row label="Last Updated" value=model.lastUpdateTime}} + + {{/info-table-row}} +
\ No newline at end of file diff --git a/ui/app/templates/components/kv-object-editor.hbs b/ui/app/templates/components/kv-object-editor.hbs index 275bf9754..9b216b829 100644 --- a/ui/app/templates/components/kv-object-editor.hbs +++ b/ui/app/templates/components/kv-object-editor.hbs @@ -51,7 +51,10 @@
{{/each}} {{#if kvHasDuplicateKeys}} - {{#message-in-page type="warning" class="is-marginless" data-test-duplicate-error-warnings=true}} - More than one key shares the same name. Please be sure to have unique key names or some data may be lost when saving. - {{/message-in-page}} + {{/if}} diff --git a/ui/app/templates/components/license-info.hbs b/ui/app/templates/components/license-info.hbs index d958249da..942698a10 100644 --- a/ui/app/templates/components/license-info.hbs +++ b/ui/app/templates/components/license-info.hbs @@ -5,10 +5,14 @@ {{#if isTemporary}} -
- - Your temporary license expires {{moment-from-now expirationTime}} and your vault will seal. Please enter a valid license below. - +
+ Temporary License
@@ -27,7 +31,7 @@
{{else}} -
+
Details {{#if showForm}}
@@ -61,7 +65,7 @@ {{/if}}
{{/if}} -
+
Features
{{#each featuresInfo as |info|}} diff --git a/ui/app/templates/components/message-error.hbs b/ui/app/templates/components/message-error.hbs index e3244b258..316dfe21a 100644 --- a/ui/app/templates/components/message-error.hbs +++ b/ui/app/templates/components/message-error.hbs @@ -1,7 +1,9 @@ {{#if displayErrors.length}} {{#each displayErrors as |error|}} - {{#message-in-page type="danger" data-test-error=true}} - {{error}} - {{/message-in-page}} + {{/each}} {{/if}} diff --git a/ui/app/templates/components/message-in-page.hbs b/ui/app/templates/components/message-in-page.hbs deleted file mode 100644 index 2052b226c..000000000 --- a/ui/app/templates/components/message-in-page.hbs +++ /dev/null @@ -1,22 +0,0 @@ -
-
-
- {{i-con - glyph=alertType.glyph - class=alertType.glyphClass - size=22 - excludeIconClass=true - }} -
- {{#if yieldWithoutColumn}} - {{yield}} - {{else}} -
-

- {{alertType.text}} - {{yield}} -

-
- {{/if}} -
-
diff --git a/ui/app/templates/components/shamir-flow.hbs b/ui/app/templates/components/shamir-flow.hbs index d1cf0518a..c9afb7613 100644 --- a/ui/app/templates/components/shamir-flow.hbs +++ b/ui/app/templates/components/shamir-flow.hbs @@ -149,15 +149,22 @@ {{else}}
-
- {{message-error errors=errors}} - {{#if hasBlock}} - {{yield}} - {{else}} -

{{formText}}

- {{/if}} -
+ {{#if errors}} +
+ {{message-error errors=errors}} +
+ {{/if}} + {{#if hasBlock}} +
+ {{yield}} +
+ {{/if}} + {{#if formText}} +
+ {{formText}} +
+ {{/if}}
{{/if}} {{#if warning}} - {{#message-in-page type="warning"}} - {{warning}} - {{/message-in-page}} + {{/if}} {{#each inputList as |data index|}}
diff --git a/ui/app/templates/partials/role-aws/form.hbs b/ui/app/templates/partials/role-aws/form.hbs index d077ffa14..3d676c9ce 100644 --- a/ui/app/templates/partials/role-aws/form.hbs +++ b/ui/app/templates/partials/role-aws/form.hbs @@ -3,10 +3,11 @@ {{message-error model=model}} {{#if (gt model.credentialTypes.length 1)}} - {{#message-in-page type="warning"}} - This role has more than one credential_type, currently: {{join ', ' model.credentialTypes}}. - Multiple credential types is deprecated and you must choose one in order to save this role. - {{/message-in-page}} + {{/if}} {{#each (if (eq mode 'edit') (drop 1 model.fields) model.fields) as |attr|}} {{form-field data-test-field attr=attr model=model}} diff --git a/ui/app/templates/partials/role-aws/show.hbs b/ui/app/templates/partials/role-aws/show.hbs index 7d032fa46..1bf2653c8 100644 --- a/ui/app/templates/partials/role-aws/show.hbs +++ b/ui/app/templates/partials/role-aws/show.hbs @@ -1,9 +1,10 @@
{{#if (gt model.credentialTypes.length 1)}} - {{#message-in-page type="warning"}} - This role has more than one credential_type, currently: {{join ', ' model.credentialTypes}}. - When you next edit this role, you will have to choose a single credential type. - {{/message-in-page}} + {{/if}} {{#each model.fields as |attr|}} {{#if (eq attr.name "policyDocument")}} diff --git a/ui/app/templates/partials/secret-form-edit.hbs b/ui/app/templates/partials/secret-form-edit.hbs index 77c8d1b9b..c8b7cda98 100644 --- a/ui/app/templates/partials/secret-form-edit.hbs +++ b/ui/app/templates/partials/secret-form-edit.hbs @@ -4,9 +4,11 @@ {{#if (not-eq model.selectedVersion.version model.currentVersion)}}
- - You are creating a new version based on data from Version {{model.selectedVersion.version}}. The current version for {{model.id}} is Version {{model.currentVersion}}. - +
{{/if}} - +
{{message-error model=model}} diff --git a/ui/app/templates/vault/cluster/replication-dr-promote.hbs b/ui/app/templates/vault/cluster/replication-dr-promote.hbs index a2fc06535..e4aecfe3b 100644 --- a/ui/app/templates/vault/cluster/replication-dr-promote.hbs +++ b/ui/app/templates/vault/cluster/replication-dr-promote.hbs @@ -25,9 +25,13 @@ {{#if (eq action 'promote')}} - - Caution: Vault replication is not designed for active-active usage and enabling two performance primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected. - + - {{#message-in-page type="warning" data-test-warning=true}} - You will not be able to access this information later, so please copy the information below. - {{/message-in-page}} + {{#each model.attrs as |attr|}} {{#if (eq attr.type "object")}} {{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(stringify (get model attr.name))}} diff --git a/ui/app/templates/vault/cluster/unseal.hbs b/ui/app/templates/vault/cluster/unseal.hbs index 88a8cdd33..86be949bf 100644 --- a/ui/app/templates/vault/cluster/unseal.hbs +++ b/ui/app/templates/vault/cluster/unseal.hbs @@ -5,9 +5,13 @@ - - {{capitalize model.name}} is {{if model.unsealed 'unsealed' 'sealed'}} - + -

- Unseal the vault by entering a portion of the master key. Once all portions are entered, the vault will be unsealed. -

-
+ />
From fd7891427d66a15a7b45d519d2ec592e54971977 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Thu, 1 Nov 2018 23:27:39 -0600 Subject: [PATCH 2/3] Style popup alerts --- ui/app/components/flash-message.js | 2 +- ui/app/styles/components/global-flash.scss | 14 +++---- ui/app/styles/core/message.scss | 40 ++++++++++++++++---- ui/app/templates/components/alert-banner.hbs | 12 +++--- ui/app/templates/svg/icons/enable/jwt.hbs | 1 + ui/app/templates/vault/cluster.hbs | 29 +++++++++----- 6 files changed, 66 insertions(+), 32 deletions(-) create mode 100644 ui/app/templates/svg/icons/enable/jwt.hbs diff --git a/ui/app/components/flash-message.js b/ui/app/components/flash-message.js index 30379488d..814fd3e15 100644 --- a/ui/app/components/flash-message.js +++ b/ui/app/components/flash-message.js @@ -7,7 +7,7 @@ export default FlashMessage.extend({ alertType: computed('flash.type', { get() { const flashType = getWithDefault(this, 'flash.type', ''); - let prefix = 'notification has-border is-'; + let prefix = 'is-'; return `${prefix}${flashType}`; }, diff --git a/ui/app/styles/components/global-flash.scss b/ui/app/styles/components/global-flash.scss index 3c4b5e044..8450efd6c 100644 --- a/ui/app/styles/components/global-flash.scss +++ b/ui/app/styles/components/global-flash.scss @@ -1,17 +1,13 @@ .global-flash { - position: fixed; - max-width: 450px; - width: 95%; bottom: 0; - left: 0; + left: $spacing-s; margin: 10px; + max-width: $drawer-width; + position: fixed; + width: 95%; z-index: 300; - .notification { + .message { box-shadow: $box-shadow-high; - margin: 20px; - @include until($desktop) { - margin: 1rem 0; - } } } diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index 70a895b93..fc8129b67 100644 --- a/ui/app/styles/core/message.scss +++ b/ui/app/styles/core/message.scss @@ -1,21 +1,34 @@ .message { + background: $blue-010; + border: 1px solid $blue-100; margin-bottom: $spacing-s; - padding: $spacing-m $spacing-m $spacing-m $spacing-s; + padding: $spacing-s $spacing-m $spacing-m $spacing-s; position: relative; - .close-button { - position: absolute; - right: 1rem; - top: $size-10; - } - .message-icon { + color: $blue; margin-right: $spacing-xs; } + .close-button { + background: transparent; + border: 0; + color: $grey; + cursor: pointer; + position: absolute; + right: $spacing-s; + top: $spacing-m; + } + .message-title { + color: $blue-500; font-size: 16px; font-weight: $font-weight-bold; + line-height: 1.25; + } + + .close-button + .message-title { + padding-right: $spacing-m; } .message-body { @@ -57,6 +70,19 @@ } } + &.is-success { + background: $green-010; + border: 1px solid $green-100; + + .message-icon { + color: $green-500; + } + + .message-title { + color: $green-700; + } + } + &.is-danger { background: $red-010; border: 1px solid $red-050; diff --git a/ui/app/templates/components/alert-banner.hbs b/ui/app/templates/components/alert-banner.hbs index 5ee42039a..5287fa018 100644 --- a/ui/app/templates/components/alert-banner.hbs +++ b/ui/app/templates/components/alert-banner.hbs @@ -1,12 +1,12 @@
- {{i-con - glyph=alertType.glyph - class=alertType.glyphClass - size=22 - excludeIconClass=true - }} +
{{#if yieldWithoutColumn}} {{yield}} diff --git a/ui/app/templates/svg/icons/enable/jwt.hbs b/ui/app/templates/svg/icons/enable/jwt.hbs new file mode 100644 index 000000000..f3187ea9f --- /dev/null +++ b/ui/app/templates/svg/icons/enable/jwt.hbs @@ -0,0 +1 @@ + diff --git a/ui/app/templates/vault/cluster.hbs b/ui/app/templates/vault/cluster.hbs index 57201a461..0afadf6d1 100644 --- a/ui/app/templates/vault/cluster.hbs +++ b/ui/app/templates/vault/cluster.hbs @@ -85,15 +85,26 @@ {{#if flash.componentName}} {{component flash.componentName content=flash.content}} {{else}} -
- {{get (message-types flash.type) "text"}} -
- - {{flash.message}} - - +
+
+
+ +
+
+ +
+ {{get (message-types flash.type) "text"}} +
+ {{#if flash.message}} +

+ {{flash.message}} +

+ {{/if}} +
+
+
{{/if}} {{/flash-message}} {{/each}} From b7fab9b3cdcd194333f2ab0d516188e7b1e6843a Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Fri, 2 Nov 2018 10:02:45 -0600 Subject: [PATCH 3/3] Add Inline Alert component --- ui/app/components/alert-inline.js | 22 ++++++++ ui/app/styles/components/message-in-page.scss | 0 ui/app/styles/components/splash-page.scss | 2 +- ui/app/styles/components/unseal-warning.scss | 2 +- ui/app/styles/core/message.scss | 15 ++++++ ui/app/templates/components/alert-inline.hbs | 8 +++ ui/app/templates/components/form-field.hbs | 7 +-- ui/app/templates/components/message-error.hbs | 2 +- ui/app/templates/components/string-list.hbs | 2 +- .../templates/partials/replication/demote.hbs | 20 +++++--- .../partials/replication/disable.hbs | 8 +-- .../templates/partials/replication/enable.hbs | 7 +-- .../partials/replication/promote.hbs | 27 +++++----- ui/app/templates/partials/role-aws/form.hbs | 4 +- .../vault/cluster/access/leases/error.hbs | 50 ++++++++----------- .../vault/cluster/policies/create.hbs | 2 +- .../components/alert-inline-test.js | 17 +++++++ .../{message-in-page.js => alert-banner.js} | 0 .../pages/components/mount-backend-form.js | 2 +- 19 files changed, 131 insertions(+), 66 deletions(-) create mode 100644 ui/app/components/alert-inline.js delete mode 100644 ui/app/styles/components/message-in-page.scss create mode 100644 ui/app/templates/components/alert-inline.hbs create mode 100644 ui/tests/integration/components/alert-inline-test.js rename ui/tests/pages/components/{message-in-page.js => alert-banner.js} (100%) diff --git a/ui/app/components/alert-inline.js b/ui/app/components/alert-inline.js new file mode 100644 index 000000000..99a90ae7f --- /dev/null +++ b/ui/app/components/alert-inline.js @@ -0,0 +1,22 @@ +import Component from '@ember/component'; +import { computed } from '@ember/object'; + +import { messageTypes } from 'vault/helpers/message-types'; + +export default Component.extend({ + type: null, + + classNames: ['message-inline'], + + textClass: computed('type', function() { + if (this.get('type') == 'danger') { + return messageTypes([this.get('type')]).glyphClass; + } + + return + }), + + alertType: computed('type', function() { + return messageTypes([this.get('type')]); + }), +}); diff --git a/ui/app/styles/components/message-in-page.scss b/ui/app/styles/components/message-in-page.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss index 2ea99593d..2b6c887ba 100644 --- a/ui/app/styles/components/splash-page.scss +++ b/ui/app/styles/components/splash-page.scss @@ -22,4 +22,4 @@ .splash-page-header { padding: $size-6 $size-5; -} \ No newline at end of file +} diff --git a/ui/app/styles/components/unseal-warning.scss b/ui/app/styles/components/unseal-warning.scss index 9d9c11f6d..8a65b54df 100644 --- a/ui/app/styles/components/unseal-warning.scss +++ b/ui/app/styles/components/unseal-warning.scss @@ -1,3 +1,3 @@ .unseal-warning.message { margin: -1px -1px 0; -} \ No newline at end of file +} diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss index fc8129b67..3ae4df4aa 100644 --- a/ui/app/styles/core/message.scss +++ b/ui/app/styles/core/message.scss @@ -96,3 +96,18 @@ } } } + +.message-inline { + display: flex; + margin: -$spacing-xs 0 $spacing-l; + + .icon { + flex: 0; + margin: 0 $spacing-xxs 0 0; + min-width: fit-content; + } + + .p { + margin: 0; + } +} diff --git a/ui/app/templates/components/alert-inline.hbs b/ui/app/templates/components/alert-inline.hbs new file mode 100644 index 000000000..ea2976495 --- /dev/null +++ b/ui/app/templates/components/alert-inline.hbs @@ -0,0 +1,8 @@ + +

+ {{message}} +

diff --git a/ui/app/templates/components/form-field.hbs b/ui/app/templates/components/form-field.hbs index d0ad5de17..147a3c10a 100644 --- a/ui/app/templates/components/form-field.hbs +++ b/ui/app/templates/components/form-field.hbs @@ -125,9 +125,10 @@ /> {{#if attr.options.validationAttr}} {{#if (and (get model valuePath) (not (get model attr.options.validationAttr)))}} -

- {{attr.options.invalidMessage}} -

+ {{/if}} {{/if}} {{/if}} diff --git a/ui/app/templates/components/message-error.hbs b/ui/app/templates/components/message-error.hbs index 316dfe21a..1b56db2a8 100644 --- a/ui/app/templates/components/message-error.hbs +++ b/ui/app/templates/components/message-error.hbs @@ -2,7 +2,7 @@ {{#each displayErrors as |error|}} {{/each}} diff --git a/ui/app/templates/components/string-list.hbs b/ui/app/templates/components/string-list.hbs index 6d3076c69..43a7a73b3 100644 --- a/ui/app/templates/components/string-list.hbs +++ b/ui/app/templates/components/string-list.hbs @@ -11,7 +11,7 @@ {{#if warning}} {{/if}} {{#each inputList as |data index|}} diff --git a/ui/app/templates/partials/replication/demote.hbs b/ui/app/templates/partials/replication/demote.hbs index 5b3013dbf..48f517596 100644 --- a/ui/app/templates/partials/replication/demote.hbs +++ b/ui/app/templates/partials/replication/demote.hbs @@ -7,14 +7,18 @@ (not model.performance.replicationDisabled) ) }} -

- Caution: Demoting this DR primary cluster - would result in a DR secondary and in that mode Vault is read-only. This - cluster is also currently operating as a Performance - {{capitalize model.performance.modeForUrl}}, demoting it will leave your - replication setup without a performance primary cluster until a new - cluster is promoted. -

+ +
+ +
{{/if}}

Demote this {{replicationDisplayMode}} primary cluster to a {{replicationDisplayMode}} secondary. The resulting secondary cluster will not diff --git a/ui/app/templates/partials/replication/disable.hbs b/ui/app/templates/partials/replication/disable.hbs index 466d7fbf6..091e6ede6 100644 --- a/ui/app/templates/partials/replication/disable.hbs +++ b/ui/app/templates/partials/replication/disable.hbs @@ -31,10 +31,10 @@ The cluster will no longer be able to connect to the primary. {{/if}}

-

- Caution: re-enabling this node as a primary or secondary will - change its cluster ID. -

+

In the secondary case this means a wipe of the underlying storage when connected to a primary, and in the primary case, diff --git a/ui/app/templates/partials/replication/enable.hbs b/ui/app/templates/partials/replication/enable.hbs index a474e37f3..4c0d5dc9b 100644 --- a/ui/app/templates/partials/replication/enable.hbs +++ b/ui/app/templates/partials/replication/enable.hbs @@ -141,9 +141,10 @@

{{#if (eq mode 'secondary')}} -

- Caution: this will immediately clear all data in this cluster! -

+ {{/if}}
{{#if (eq mode 'primary')}} diff --git a/ui/app/templates/partials/replication/promote.hbs b/ui/app/templates/partials/replication/promote.hbs index 8f16b6f79..59c94c4ee 100644 --- a/ui/app/templates/partials/replication/promote.hbs +++ b/ui/app/templates/partials/replication/promote.hbs @@ -45,10 +45,11 @@ Force promotion of this cluster
-

- Caution: Forcing promotion could result in data loss if data isn't fully replicated. Force promotion - promotes the cluster even if certain safety checks fail. -

+
{{/if}} @@ -74,10 +75,11 @@

Promote the cluster to primary.

-

- Caution: Vault replication is not designed for active-active usage and 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. -

+
-

- Caution: Forcing promotion could result in data loss if data isn't fully replicated. Force promotion - promotes the cluster even if certain safety checks fail. -

+
diff --git a/ui/app/templates/partials/role-aws/form.hbs b/ui/app/templates/partials/role-aws/form.hbs index 3d676c9ce..bd4285ad8 100644 --- a/ui/app/templates/partials/role-aws/form.hbs +++ b/ui/app/templates/partials/role-aws/form.hbs @@ -5,8 +5,8 @@ {{#if (gt model.credentialTypes.length 1)}} {{/if}} {{#each (if (eq mode 'edit') (drop 1 model.fields) model.fields) as |attr|}} diff --git a/ui/app/templates/vault/cluster/access/leases/error.hbs b/ui/app/templates/vault/cluster/access/leases/error.hbs index a632e211e..05c759f90 100644 --- a/ui/app/templates/vault/cluster/access/leases/error.hbs +++ b/ui/app/templates/vault/cluster/access/leases/error.hbs @@ -11,34 +11,28 @@ {{/unless}}
-
-
-
- {{#if (eq model.httpStatus 400)}} -

- {{i-con glyph='close'}} - {{model.keyId}} is not a valid lease ID -

- {{else if (eq model.httpStatus 404)}} -

- Unable to find lease for the id: {{model.keyId}}. Try going back to the - {{#link-to "vault.cluster.access.leases"}}lookup{{/link-to}} - and re-entering the id. -

- {{else if (eq model.httpStatus 403)}} -

- You don't have access to {{model.keyId}}. If you think you've reached this page in error, please contact your administrator. -

- {{else}} - {{#each model.errors as |error|}} -

- {{error}} -

- {{/each}} - {{/if}} -
-
-
+ {{#if (eq model.httpStatus 400)}} + + {{else if (eq model.httpStatus 404)}} +

+ Unable to find lease for the id: {{model.keyId}}. Try going back to the + {{#link-to "vault.cluster.access.leases"}}lookup{{/link-to}} + and re-entering the id. +

+ {{else if (eq model.httpStatus 403)}} +

+ You don't have access to {{model.keyId}}. If you think you've reached this page in error, please contact your administrator. +

+ {{else}} + {{#each model.errors as |error|}} +

+ {{error}} +

+ {{/each}} + {{/if}}
{{#link-to "vault.cluster.access.leases" class="button"}} diff --git a/ui/app/templates/vault/cluster/policies/create.hbs b/ui/app/templates/vault/cluster/policies/create.hbs index a369925ad..0128aec87 100644 --- a/ui/app/templates/vault/cluster/policies/create.hbs +++ b/ui/app/templates/vault/cluster/policies/create.hbs @@ -14,7 +14,7 @@ - +
{{message-error model=model}} diff --git a/ui/tests/integration/components/alert-inline-test.js b/ui/tests/integration/components/alert-inline-test.js new file mode 100644 index 000000000..2e2971090 --- /dev/null +++ b/ui/tests/integration/components/alert-inline-test.js @@ -0,0 +1,17 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | alert-inline', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs`{{alert-inline type="danger" message="test message"}}`); + + assert.equal(this.element.textContent.trim(), 'test message'); + }); +}); diff --git a/ui/tests/pages/components/message-in-page.js b/ui/tests/pages/components/alert-banner.js similarity index 100% rename from ui/tests/pages/components/message-in-page.js rename to ui/tests/pages/components/alert-banner.js diff --git a/ui/tests/pages/components/mount-backend-form.js b/ui/tests/pages/components/mount-backend-form.js index 05035335c..43ea859ca 100644 --- a/ui/tests/pages/components/mount-backend-form.js +++ b/ui/tests/pages/components/mount-backend-form.js @@ -1,6 +1,6 @@ import { clickable, collection, fillable, text, value } from 'ember-cli-page-object'; import fields from './form-field'; -import errorText from './message-in-page'; +import errorText from './alert-banner'; export default { ...fields,