From c4f027fa0d596dab1bc34d39ec3ea185ac41b874 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 26 Oct 2020 16:51:53 +0000 Subject: [PATCH] ui: Upgrade the rest of the UI to use the new Notice component (#9035) --- .../app/components/auth-form/index.hbs | 57 +++++++++------- .../consul/intention/form/fieldsets/index.hbs | 9 +-- .../consul/intention/form/index.hbs | 4 +- .../notice/custom-resource/index.hbs | 4 +- .../intention/notice/permissions/index.hbs | 15 ++++ .../consul/intention/view/index.hbs | 10 +-- .../consul-ui/app/components/notice/index.hbs | 1 + .../app/components/notice/index.scss | 32 +++++++++ .../base => }/components/notice/layout.scss | 0 .../consul-ui/app/components/notice/skin.scss | 68 +++++++++++++++++++ .../app/styles/base/components/index.scss | 1 - .../styles/base/components/notice/index.scss | 2 - .../styles/base/components/notice/skin.scss | 42 ------------ .../consul-ui/app/styles/components.scss | 7 +- .../app/styles/components/notice.scss | 37 ---------- .../app/templates/dc/acls/policies/-view.hbs | 14 +++- .../app/templates/dc/acls/tokens/edit.hbs | 13 +++- .../app/templates/dc/acls/tokens/index.hbs | 11 ++- .../consul-ui/app/templates/dc/kv/edit.hbs | 12 +++- .../consul-ui/app/templates/settings.hbs | 18 +++-- 20 files changed, 213 insertions(+), 144 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/consul/intention/notice/permissions/index.hbs create mode 100644 ui/packages/consul-ui/app/components/notice/index.scss rename ui/packages/consul-ui/app/{styles/base => }/components/notice/layout.scss (100%) create mode 100644 ui/packages/consul-ui/app/components/notice/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/base/components/notice/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/base/components/notice/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/notice.scss diff --git a/ui/packages/consul-ui/app/components/auth-form/index.hbs b/ui/packages/consul-ui/app/components/auth-form/index.hbs index e83e3f05ce..9b47405fd8 100644 --- a/ui/packages/consul-ui/app/components/auth-form/index.hbs +++ b/ui/packages/consul-ui/app/components/auth-form/index.hbs @@ -9,31 +9,38 @@
{{#if error.status}} - + + +

+ {{#if value.Name}} + {{#if (eq error.status '403')}} + Consul login failed
+ We received a token from your OIDC provider but could not log in to Consul with it. + {{else if (eq error.status '401')}} + Could not log in to provider
+ The OIDC provider has rejected this access token. Please have an administrator check your auth method configuration. + {{else if (eq error.status '499')}} + SSO log in window closed
+ The OIDC provider window was closed. Please try again. + {{else}} + Error
+ {{error.detail}} + {{/if}} + {{else}} + {{#if (eq error.status '403')}} + Invalid token
+ The token entered does not exist. Please enter a valid token to log in. + {{else}} + Error
+ {{error.detail}} + {{/if}} + {{/if}} +

+ + {{/if}}
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs index 1adf4ba9c8..96e89dc75c 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs @@ -153,14 +153,7 @@

Permissions

{{#if (gt item.Permissions.length 0) }} -
-

- Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above. -

-

- documentation -

-
+

This Intention is view only because it is managed through an Intention Custom Resource in your Kubernetes cluster.

+ +

Learn more about CRDs

- + {{/if}}

Some of your intentions are being managed through an Intention Custom Resource in your Kubernetes cluster. Those managed intentions will be view only in the UI. Any intentions created in the UI will work but will not be synced to the Custom Resource Definition (CRD) datastore.

+ +

Learn more about CRDs

- + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/intention/notice/permissions/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/notice/permissions/index.hbs new file mode 100644 index 0000000000..4aac229f4b --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/intention/notice/permissions/index.hbs @@ -0,0 +1,15 @@ + + +

+ Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above. +

+ + +

+ Learn more about permissions +

+ + + diff --git a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs index bad52c24a3..4e875f45ac 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs @@ -25,15 +25,7 @@ {{#if (gt item.Permissions.length 0) }}

Permissions

-
-

- Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above. -

-

- Learn more about permissions -

-
- + diff --git a/ui/packages/consul-ui/app/components/notice/index.hbs b/ui/packages/consul-ui/app/components/notice/index.hbs index f3ddfaf5d3..905f87f2d4 100644 --- a/ui/packages/consul-ui/app/components/notice/index.hbs +++ b/ui/packages/consul-ui/app/components/notice/index.hbs @@ -5,5 +5,6 @@ {{yield (hash Header=(component 'anonymous' tagName="header") Body=(component 'anonymous') + Footer=(component 'anonymous' tagName="footer") )}}
diff --git a/ui/packages/consul-ui/app/components/notice/index.scss b/ui/packages/consul-ui/app/components/notice/index.scss new file mode 100644 index 0000000000..242df9cd5a --- /dev/null +++ b/ui/packages/consul-ui/app/components/notice/index.scss @@ -0,0 +1,32 @@ +@import './skin'; +@import './layout'; + +%notice { + margin: 1em 0; +} +/**/ +.notice.success { + @extend %notice-success; +} +.notice.warning { + @extend %notice-warning; +} +.notice.error { + @extend %notice-error; +} +.notice.info { + @extend %notice-info; +} +.notice.highlight { + @extend %notice-highlight; +} +.notice.policy-management { + @extend %notice-highlight; +} +.notice.crd::before { + -webkit-mask-image: none; + mask-image: none; + background-color: transparent; + @extend %with-logo-kubernetes-color-icon; +} + diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/layout.scss b/ui/packages/consul-ui/app/components/notice/layout.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/base/components/notice/layout.scss rename to ui/packages/consul-ui/app/components/notice/layout.scss diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss new file mode 100644 index 0000000000..c3bcf37e0c --- /dev/null +++ b/ui/packages/consul-ui/app/components/notice/skin.scss @@ -0,0 +1,68 @@ +%notice { + border-radius: $decor-radius-100; + border: $decor-border-100; + color: $black; +} +%notice::before { + @extend %as-pseudo; +} +%notice footer * { + @extend %p3; + font-weight: $typo-weight-bold; +} +%notice-success, +%notice-info, +%notice-highlight, +%notice-error, +%notice-warning { + @extend %notice; +} +%notice-success { + background-color: $green-050; + border-color: $green-500; +} +%notice-info { + border-color: $blue-100; + background-color: $gray-010; +} +%notice-info header * { + color: $blue-700; +} +%notice-highlight { + background-color: $gray-050; + border-color: $gray-300; +} +%notice-info header * { + color: $gray-700; +} +%notice-warning { + border-color: $yellow-100; + background-color: $yellow-050; +} +%notice-warning header * { + color: $yellow-800; +} +%notice-error { + background-color: $red-050; + border-color: $red-500; +} +%notice-success::before { + @extend %with-check-circle-fill-color-mask; + color: $green-500; +} +%notice-info::before { + @extend %with-info-circle-fill-color-mask; + color: $blue-500; +} +%notice-highlight::before { + @extend %with-star-fill-mask; + color: $yellow-500; +} +%notice-warning::before { + @extend %with-alert-triangle-color-mask; + color: $orange-500; +} +%notice-error::before { + @extend %with-cancel-square-fill-color-mask; + color: $red-500; +} diff --git a/ui/packages/consul-ui/app/styles/base/components/index.scss b/ui/packages/consul-ui/app/styles/base/components/index.scss index da964526ce..d8ca3d7628 100644 --- a/ui/packages/consul-ui/app/styles/base/components/index.scss +++ b/ui/packages/consul-ui/app/styles/base/components/index.scss @@ -8,7 +8,6 @@ @import './inline-alert/index'; @import './menu-panel/index'; @import './modal-dialog/index'; -@import './notice/index'; @import './pill/index'; @import './popover-menu/index'; @import './radio-group/index'; diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/index.scss b/ui/packages/consul-ui/app/styles/base/components/notice/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/notice/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss b/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss deleted file mode 100644 index 049f425565..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss +++ /dev/null @@ -1,42 +0,0 @@ -%notice { - border-radius: $decor-radius-100; - border: 1px solid; - color: $black; -} -%notice p:last-child a:only-child { - @extend %p3; - font-weight: $typo-weight-bold; -} -%notice-success, -%notice-info, -%notice-highlight, -%notice-error, -%notice-warning { - @extend %notice; -} -%notice::before { - @extend %as-pseudo; -} -%notice-success { - @extend %frame-green-500; -} -%notice-info { - border-color: $blue-100; - background-color: $gray-010; -} -%notice-info header * { - color: $blue-700; -} -%notice-highlight { - @extend %frame-gray-800; -} -%notice-warning { - border-color: $yellow-100; - background-color: $yellow-050; -} -%notice-warning header * { - color: $yellow-800; -} -%notice-error { - @extend %frame-red-500; -} diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index 254c98bd32..20b97eba6c 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -29,7 +29,6 @@ @import './components/modal-dialog'; @import './components/auth-form'; @import './components/auth-modal'; -@import './components/notice'; @import './components/oidc-select'; @import './components/discovery-chain'; @import './components/empty-state'; @@ -55,11 +54,7 @@ /**/ -/** - * Migration: We are migrating our consul-* styles to use colocated styles - * consul-* component styles should be moved or added under here - * when convienient - **/ +@import 'consul-ui/components/notice'; @import 'consul-ui/components/consul/exposed-path/list'; @import 'consul-ui/components/consul/external-source'; diff --git a/ui/packages/consul-ui/app/styles/components/notice.scss b/ui/packages/consul-ui/app/styles/components/notice.scss deleted file mode 100644 index 7241720cc4..0000000000 --- a/ui/packages/consul-ui/app/styles/components/notice.scss +++ /dev/null @@ -1,37 +0,0 @@ -%notice { - margin: 1em 0; -} -%notice-success::before { - @extend %with-check-circle-fill-color-icon; -} -%notice-info::before { - @extend %with-info-circle-fill-color-icon; -} -%notice-highlight::before { - @extend %with-star-icon; -} -%notice-warning::before { - @extend %with-alert-triangle-color-icon; -} -%notice-error::before { - @extend %with-cancel-square-fill-color-icon; -} -/**/ -.notice.success { - @extend %notice-success; -} -.notice.warning { - @extend %notice-warning; -} -.notice.error { - @extend %notice-error; -} -.notice.info { - @extend %notice-info; -} -.notice.policy-management { - @extend %notice-highlight; -} -.notice.crd::before { - @extend %with-logo-kubernetes-color-icon; -} diff --git a/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs b/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs index bbdfe74222..33cc7ffede 100644 --- a/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs +++ b/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs @@ -1,4 +1,16 @@ -

Management This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens. Learn more in our documentation.

+ + +

Management

+ + +

+ This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens. Learn more in our documentation. +

+ +
Name
diff --git a/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs b/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs index 09e5f1a950..c3b89f99be 100644 --- a/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs +++ b/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs @@ -60,7 +60,18 @@ {{#if (token/is-legacy item)}} -

Update. We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our documentation.

+ + +

Update

+ + +

+ We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our documentation. +

+ + {{/if}} {{#if (not create) }}
diff --git a/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs b/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs index 8a9b6e1626..06c07ebaf6 100644 --- a/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs @@ -51,7 +51,16 @@ {{#if (token/is-legacy items)}} -

Update. We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our documentation.

+ + +

Update

+ + +

We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our documentation.

+ + {{/if}} {{#let (filter (filter-predicate 'token' filters) items) as |filtered|}} {{#let (sort-by (comparator 'token' sort) filtered) as |sorted|}} diff --git a/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs b/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs index 5311dbc353..59a89c43bc 100644 --- a/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs +++ b/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs @@ -25,9 +25,15 @@ {{#if session}} -

- Warning. This KV has a lock session. You can edit KV's with lock sessions, but we recommend doing so with care, or not doing so at all. It may negatively impact the active node it's associated with. See below for more details on the Lock Session and see our documentation for more information. -

+ + +

+ Warning. This KV has a lock session. You can edit KV's with lock sessions, but we recommend doing so with care, or not doing so at all. It may negatively impact the active node it's associated with. See below for more details on the Lock Session and see our documentation for more information. +

+ + {{/if}} -
-

Local Storage

-

- These settings are immediately saved to local storage and persisted through browser usage. -

-
+ + +

Local Storage

+ + +

+ These settings are immediately saved to local storage and persisted through browser usage. +

+ + {{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}