From 23e004299e1afbd685a13511a0482007345f5b09 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Wed, 31 Oct 2018 16:08:25 -0600 Subject: [PATCH] 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. -

- + />