From aca7976580df06e96f0b0dd81432b3922baca8f7 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 17 Mar 2021 11:23:00 +0000 Subject: [PATCH] ui: Adds warning icon to side menu when ACLs are disabled (#9864) * ui: Adds warning icon to side menu when ACLs are are disabled --- .changelog/9864.txt | 3 +++ ui/packages/consul-ui/app/abilities/acl.js | 6 +++++ .../app/components/hashicorp-consul/index.hbs | 21 +++++++++++++-- .../components/hashicorp-consul/index.scss | 8 ++++++ .../components/main-nav-vertical/index.scss | 9 +++---- .../components/main-nav-vertical/layout.scss | 1 + .../components/main-nav-vertical/skin.scss | 3 +++ .../consul-ui/app/modifiers/disabled.js | 2 +- .../styles/base/icons/base-placeholders.scss | 26 +++++++++++++++++++ 9 files changed, 70 insertions(+), 9 deletions(-) create mode 100644 .changelog/9864.txt diff --git a/.changelog/9864.txt b/.changelog/9864.txt new file mode 100644 index 0000000000..33e5f118b8 --- /dev/null +++ b/.changelog/9864.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: add permanently visible indicator when ACLs are disabled +``` diff --git a/ui/packages/consul-ui/app/abilities/acl.js b/ui/packages/consul-ui/app/abilities/acl.js index ae584a0665..4e6f8ae162 100644 --- a/ui/packages/consul-ui/app/abilities/acl.js +++ b/ui/packages/consul-ui/app/abilities/acl.js @@ -10,10 +10,16 @@ export default class ACLAbility extends BaseAbility { get canRead() { return this.env.var('CONSUL_ACLS_ENABLED') && super.canRead; } + get canDuplicate() { return this.env.var('CONSUL_ACLS_ENABLED') && super.canWrite; } + get canDelete() { return this.env.var('CONSUL_ACLS_ENABLED') && this.item.ID !== 'anonymous' && super.canWrite; } + + get canUse() { + return this.env.var('CONSUL_ACLS_ENABLED'); + } } diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs index ca42f64db2..5819452934 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs @@ -125,11 +125,18 @@ Intentions {{/if}} -{{#if (can "read acls")}} -
  • Access Controls
    • +
  • Tokens
    • +{{#if (can "read acls")}}
  • Policies
    • @@ -139,6 +146,16 @@
  • Auth Methods
    • +{{else if (not (can "use acls"))}} +
  • + Policies +
    • +
  • + Roles +
    • +
  • + Auth Methods +
    • {{/if}} {{/if}} diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss index 0acde58158..84f5a8bda8 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss @@ -11,4 +11,12 @@ .feedback-link a::after { @extend %with-logo-github-monochrome-mask, %as-pseudo; } + .acls-separator span { + @extend %led-icon; + color: $red-500; + display: inline-block; + position: relative; + top: 2px; + margin-left: 2px; + } } diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss index 9aeca69e95..3505d894f0 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss @@ -1,8 +1,7 @@ @import './skin'; @import './layout'; /* things that should look like nav buttons */ -%main-nav-vertical > ul > li > a, -%main-nav-vertical > ul > li > span { +%main-nav-vertical > ul > li > a { @extend %main-nav-vertical-action; } %main-nav-vertical > ul > li.is-active > a { @@ -14,10 +13,8 @@ @extend %main-nav-vertical-action-active-intent; } -/* Whilst we want spans to look the same as actions */ -/* we don't want them to act the same */ -%main-nav-vertical-action:not(span):hover, -%main-nav-vertical-action:not(span):focus { +%main-nav-vertical-action:hover, +%main-nav-vertical-action:focus { @extend %main-nav-vertical-action-intent; } diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss index 7dfe157913..04d016a405 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss @@ -27,6 +27,7 @@ margin-left: .5rem; } %main-nav-vertical-action, +%main-nav-vertical li:not([role="separator"]) > span, %main-nav-vertical [role="separator"] { display: block; padding: 7px 25px; diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss index 5e2060ae40..d816bcc8f8 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss @@ -23,6 +23,9 @@ background-color: var(--gray-050); color: var(--gray-700); } +%main-nav-vertical li:not([role="separator"]) > span { + color: var(--gray-300); +} %main-nav-vertical [role="separator"] { color: var(--gray-600); } diff --git a/ui/packages/consul-ui/app/modifiers/disabled.js b/ui/packages/consul-ui/app/modifiers/disabled.js index 3e58276463..2205a496a3 100644 --- a/ui/packages/consul-ui/app/modifiers/disabled.js +++ b/ui/packages/consul-ui/app/modifiers/disabled.js @@ -1,6 +1,6 @@ import { modifier } from 'ember-modifier'; -export default modifier(function enabled($element, [bool], hash) { +export default modifier(function enabled($element, [bool = true], hash) { if (['input', 'textarea', 'select', 'button'].includes($element.nodeName.toLowerCase())) { if (bool) { $element.disabled = bool; diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss index 37988e6278..15919996ae 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss @@ -22,3 +22,29 @@ height: 1.2em; vertical-align: text-top; } +%led-icon { + position: relative; + box-sizing: border-box; + width: 12px; + height: 12px; +} +%led-icon::after, +%led-icon::before { + content: ''; + display: block; + width: 100%; + height: 100%; + border-radius: 100%; +} +%led-icon::before { + border: 1px solid currentColor; + opacity: 0.5; +} +%led-icon::after { + position: absolute; + top: 2px; + left: 2px; + width: calc(100% - 4px); + height: calc(100% - 4px); + background-color: currentColor; +}