From 3f131dcf34500381dba6abaf62e9c9226639ca54 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 24 Nov 2021 18:14:07 +0000 Subject: [PATCH] ui: Notifications re-organization/re-style (#11577) - Moves where they appear up to the component. - Instead of a wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers. - Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing component for all our global UI notifications (this is the user visible change here) --- .changelog/11577.txt | 3 + .../app/components/app-view/README.mdx | 12 +-- .../app/components/app-view/index.hbs | 83 +----------------- .../app/components/app-view/index.js | 2 - .../consul-ui/app/components/app/index.hbs | 12 ++- .../consul-ui/app/components/app/index.scss | 44 ++++++++++ .../app/components/app/notification/index.hbs | 19 +++++ .../app/components/auth-dialog/index.hbs | 2 +- .../consul/intention/form/index.hbs | 50 ++++++++--- .../app/components/data-loader/index.hbs | 22 +++-- .../app/components/data-writer/index.hbs | 85 ++++++++++++++----- .../app/components/flash-message/README.mdx | 35 -------- .../app/components/flash-message/index.scss | 19 ----- .../app/components/flash-message/layout.scss | 12 --- .../app/components/flash-message/skin.scss | 28 ------ .../app/components/hashicorp-consul/index.hbs | 74 ++++++++++++++++ .../app/components/hashicorp-consul/index.js | 3 + .../consul-ui/app/components/notice/skin.scss | 10 ++- .../app/components/notification/index.hbs | 3 - .../app/components/notification/index.js | 40 --------- .../app/mixins/with-blocking-actions.js | 8 +- .../consul-ui/app/modifiers/notification.js | 37 ++++++++ .../consul-ui/app/modifiers/notification.mdx | 34 ++++++++ ui/packages/consul-ui/app/modifiers/style.js | 52 ++++++++++++ .../consul-ui/app/services/feedback.js | 14 +-- .../consul-ui/app/styles/components.scss | 1 - .../app/templates/dc/acls/policies/edit.hbs | 8 -- .../app/templates/dc/acls/policies/index.hbs | 8 -- .../app/templates/dc/acls/roles/edit.hbs | 8 -- .../app/templates/dc/acls/roles/index.hbs | 8 -- .../app/templates/dc/acls/tokens/edit.hbs | 8 -- .../app/templates/dc/acls/tokens/index.hbs | 8 -- .../consul-ui/app/templates/dc/kv/index.hbs | 62 ++++++++++---- .../consul-ui/app/templates/dc/nodes/show.hbs | 62 ++++++++++---- .../app/templates/dc/services/instance.hbs | 62 ++++++++++---- .../app/templates/dc/services/show.hbs | 62 ++++++++++---- ui/packages/consul-ui/app/templates/debug.hbs | 14 +++ 37 files changed, 618 insertions(+), 396 deletions(-) create mode 100644 .changelog/11577.txt create mode 100644 ui/packages/consul-ui/app/components/app/notification/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/flash-message/README.mdx delete mode 100644 ui/packages/consul-ui/app/components/flash-message/index.scss delete mode 100644 ui/packages/consul-ui/app/components/flash-message/layout.scss delete mode 100644 ui/packages/consul-ui/app/components/flash-message/skin.scss delete mode 100644 ui/packages/consul-ui/app/components/notification/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/notification/index.js create mode 100644 ui/packages/consul-ui/app/modifiers/notification.js create mode 100644 ui/packages/consul-ui/app/modifiers/notification.mdx create mode 100644 ui/packages/consul-ui/app/modifiers/style.js diff --git a/.changelog/11577.txt b/.changelog/11577.txt new file mode 100644 index 0000000000..14fe7b0148 --- /dev/null +++ b/.changelog/11577.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Update global notification styling +``` diff --git a/ui/packages/consul-ui/app/components/app-view/README.mdx b/ui/packages/consul-ui/app/components/app-view/README.mdx index b7681597bd..da5e92de42 100644 --- a/ui/packages/consul-ui/app/components/app-view/README.mdx +++ b/ui/packages/consul-ui/app/components/app-view/README.mdx @@ -8,9 +8,7 @@ state: needs-love the app chrome), every 'top level main section/template' should have one of these. -It contains legacy authorization code (that can probably be removed now), and -our flash messages (that should be moved to the `` or `` component and potentially be renamed to `Page` or `View` or similar now +This component will potentially be renamed to `Page` or `View` or similar now that we don't need two words. Other than that it provides the basic layout/slots for our main title, search @@ -86,20 +84,12 @@ breadcrumbs and back again. ``` -## Arguments - -| Argument | Type | Default | Description | -| --- | --- | --- | --- | -| `authorized` | `Boolean` | `true` | Whether the View is authorized or not | -| `enabled` | `Boolean` | `true` | Whether ACLs are enabled or not | - ## Slots | Name | Description | | --- | --- | | `header` | The main title of the page, you probably want to put a `

` in here | | `content` | The main content of the page, and potentially an `` somewhere | -| `notification` | Old style notifications, also see `` | | `breadcrumbs` | Any breadcrumbs, you probably want an `ol/li/a` in here | | `actions` | Any actions relevant for the entire page, probably using `` | | `nav` | Secondary navigation goes in here, also see `` | diff --git a/ui/packages/consul-ui/app/components/app-view/index.hbs b/ui/packages/consul-ui/app/components/app-view/index.hbs index c23fea5396..c40e715eba 100644 --- a/ui/packages/consul-ui/app/components/app-view/index.hbs +++ b/ui/packages/consul-ui/app/components/app-view/index.hbs @@ -4,74 +4,23 @@ > {{yield}}
- {{#each flashMessages.queue as |flash|}} - - {{#if flash.dom}} - {{{flash.dom}}} - {{else}} - {{#let (lowercase component.flashType) (lowercase flash.action) as |status type|}} - {{! flashes automatically ucfirst the type }} - - - {{/let}} - {{/if}} - - {{/each}}
- {{#if authorized}} - {{/if}}
{{yield}}
- {{#if authorized}} {{yield}} - {{/if}}
@@ -79,42 +28,12 @@
- {{#if authorized}} {{yield}} - {{/if}}
- {{#if (not enabled) }} - - -

Welcome to ACLs

- - -

- ACLs are not enabled in this Consul cluster. We strongly encourage the use of ACLs in production environments for the best security practices. -

- - -
  • - Read the documentation -
    • -
  • - Follow the guide -
    • -     -     - {{else if (not authorized)}} - - {{else}} - {{yield}} - {{/if}} + {{yield}}
    diff --git a/ui/packages/consul-ui/app/components/app-view/index.js b/ui/packages/consul-ui/app/components/app-view/index.js index ee99672aaf..b868ab70ee 100644 --- a/ui/packages/consul-ui/app/components/app-view/index.js +++ b/ui/packages/consul-ui/app/components/app-view/index.js @@ -2,6 +2,4 @@ import Component from '@ember/component'; import SlotsMixin from 'block-slots'; export default Component.extend(SlotsMixin, { tagName: '', - authorized: true, - enabled: true, }); diff --git a/ui/packages/consul-ui/app/components/app/index.hbs b/ui/packages/consul-ui/app/components/app/index.hbs index 726f03c61e..68498d61f0 100644 --- a/ui/packages/consul-ui/app/components/app/index.hbs +++ b/ui/packages/consul-ui/app/components/app/index.hbs @@ -1,5 +1,6 @@ {{#let (hash main=(concat guid '-main') + Notification=(component 'app/notification') ) as |exported|}}
    {{t 'components.app.skip_to_content'}} {{!-- @@ -25,7 +26,7 @@ --}}
    @@ -78,6 +79,13 @@
    +
    + {{yield exported to="notifications"}} + +
    {{yield exported to="main"}}