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:
parent
7123aaad92
commit
5ff1897070
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: add permanently visible indicator when ACLs are disabled
|
||||
```
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue