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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: add permanently visible indicator when ACLs are disabled
+```

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');
+  }
 }

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -125,11 +125,18 @@
               <a href={{href-to 'dc.intentions' @dc.Name}}>Intentions</a>
           </li>
 {{/if}}
-{{#if (can "read acls")}}
-          <li role="separator">Access Controls</li>
+          <li class="acls-separator" role="separator">
+            Access Controls
+{{#if (not (can "use acls"))}}
+            <span
+              {{tooltip "ACLs are not currently enabled in this cluster"}}
+            ></span>
+{{/if}}
+          </li>
           <li data-test-main-nav-tokens class={{if (is-href 'dc.acls.tokens' @dc.Name) 'is-active'}}>
               <a href={{href-to 'dc.acls.tokens' @dc.Name}}>Tokens</a>
           </li>
+{{#if (can "read acls")}}
           <li data-test-main-nav-policies class={{if (is-href 'dc.acls.policies' @dc.Name) 'is-active'}}>
               <a href={{href-to 'dc.acls.policies' @dc.Name}}>Policies</a>
           </li>
@@ -139,6 +146,16 @@
           <li data-test-main-nav-auth-methods class={{if (is-href 'dc.acls.auth-methods' @dc.Name) 'is-active'}}>
               <a href={{href-to 'dc.acls.auth-methods' @dc.Name}}>Auth Methods</a>
           </li>
+{{else if (not (can "use acls"))}}
+          <li data-test-main-nav-policies class={{if (is-href 'dc.acls.policies' @dc.Name) 'is-active'}}>
+              <span>Policies</span>
+          </li>
+          <li data-test-main-nav-roles class={{if (is-href 'dc.acls.roles' @dc.Name) 'is-active'}}>
+              <span>Roles</span>
+          </li>
+          <li data-test-main-nav-auth-methods class={{if (is-href 'dc.acls.auth-methods' @dc.Name) 'is-active'}}>
+              <span>Auth Methods</span>
+          </li>
 {{/if}}
       </ul>
   {{/if}}

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;
+  }
 }

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;
 }
 

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;

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);
 }

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;

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;
+}