ui: Adds warning icon to side menu when ACLs are disabled (#9864)

* ui: Adds warning icon to side menu when ACLs are are disabled
This commit is contained in:
John Cowen 2021-03-17 11:23:00 +00:00 committed by GitHub
parent 7123aaad92
commit 5ff1897070
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 70 additions and 9 deletions

3
.changelog/9864.txt Normal file
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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