Update disabled selector state and token selector

hashicorp · Nov 6, 2023 · 47d53a8 · 47d53a8
1 parent 4f9a509
commit 47d53a8
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 46 deletions.
diff --git a/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs b/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
@@ -72,8 +72,8 @@
           @isHrefExternal={{false}}
         />
         <dd.Interactive
-          @text="Sign in"
-          data-test-auth-menu-signin
+          @text="Log in"
+          data-test-auth-menu-login
           {{on "click" (optional this.modal.open)}}
         />
       </Hds::Dropdown>
@@ -120,11 +120,14 @@
       >
         <dd.ToggleIcon @icon="user" @text="Auth menu" data-test-auth-menu />
         {{#if authDialog.token.AccessorID}}
-          <dd.Title @text="Signed in with ACL Token" />
           <dd.Description
-            @text={{string-substring
-              authDialog.token.AccessorID
-              (sub authDialog.token.AccessorID.length 8)
+            @text={{t
+              "components.consul.token.selector.logged-in"
+              token=(string-substring
+                authDialog.token.AccessorID
+                (sub authDialog.token.AccessorID.length 8)
+              )
+              htmlSafe=true
             }}
           />
         {{/if}}
@@ -138,8 +141,8 @@
           @isHrefExternal={{false}}
         />
         <dd.Interactive
-          @text="Sign out"
-          data-test-auth-menu-signout
+          @text="Log out"
+          data-test-auth-menu-logout
           {{on "click" (optional authDialog.logout)}}
         />
       </Hds::Dropdown>

diff --git a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
@@ -7,26 +7,28 @@
   @list
   (if @partition (hash Name=@partition) (hash Name="default"))
   (is-href "dc.partitions" @dc.Name)
-  as |SNL partition isManaging|
+  (can "choose partitions" dc=@dc)
+  as |SNL partition isManaging canChoose|
 }}
-  {{#if (can "choose partitions" dc=@dc)}}
-    <DataSource
-      @src={{uri "/*/*/${dc}/partitions" (hash dc=@dc.Name)}}
-      @onchange={{fn (optional @onchange)}}
-    />
-    <SNL.Title class="consul-side-nav__selector-title">Admin partition</SNL.Title>
-    <NavSelector
-      @list={{@list}}
-      @items={{sort-by "Name:asc" (reject-by "DeletedAt" @partitions)}}
-      @item={{partition}}
-      @key="Name"
-      @icon="users"
-      @placeholder="Search partitions"
-      @footerLink={{href-to "dc.partitions" @dc.Name}}
-      @footerLinkText="View all partitions"
-      data-test-datacenter-disclosure-menu
-      as |Dropdown item|
-    >
+  <DataSource
+    @src={{uri "/*/*/${dc}/partitions" (hash dc=@dc.Name)}}
+    @onchange={{fn (optional @onchange)}}
+  />
+  <SNL.Title class="consul-side-nav__selector-title">Admin partition</SNL.Title>
+  <NavSelector
+    @list={{@list}}
+    @items={{sort-by "Name:asc" (reject-by "DeletedAt" @partitions)}}
+    @item={{partition}}
+    @key="Name"
+    @icon="users"
+    @placeholder="Search partitions"
+    @footerLink={{href-to "dc.partitions" @dc.Name}}
+    @footerLinkText="View all partitions"
+    @disabled={{not canChoose}}
+    data-test-datacenter-disclosure-menu
+    as |Dropdown item|
+  >
+    {{#if canChoose}}
       <Dropdown.Checkmark
         @selected={{eq partition.Name item.Name}}
         @href={{if
@@ -46,21 +48,8 @@
       >
         {{item.Name}}
       </Dropdown.Checkmark>
-    </NavSelector>
-
-  {{else}}
-    <SNL.Title class="consul-side-nav__selector-title">Admin partition</SNL.Title>
-    <SNL.Item class="consul-side-nav__datacenter">
-      <FlightIcon
-        @name="users"
-        @color="var(--token-form-control-disabled-foreground-color)"
-      />
-      <Hds::Text::Display
-        @size="200"
-        @color="disabled"
-      >{{partition.Name}}</Hds::Text::Display>
-    </SNL.Item>
-  {{/if}}
+    {{/if}}
+  </NavSelector>
 {{/let}}
 {{!-- 
 {{#let

diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -73,7 +73,7 @@
   </:notifications>
 
   <:side-nav>
-    <Hds::SideNav @isResponsive={{true}} @isCollapsible={{true}} class='consul-side-nav' data-test-navigation>
+    <Hds::SideNav @isResponsive={{true}} class='consul-side-nav' data-test-navigation>
       <:header>
         <Hds::SideNav::Header>
           <:logo>
@@ -87,7 +87,6 @@
           <:actions>
             <Hds::Dropdown class='hds-side-nav__dropdown' @listPosition='left' as |dd|>
               <dd.ToggleIcon @icon='help' @text='Help & Support menu' />
-              <dd.Title @text='Help & Support' />
               <dd.Interactive
                 @href={{env 'CONSUL_DOCS_URL'}}
                 @isHrefExternal={{true}}
@@ -98,7 +97,6 @@
                 @isHrefExternal={{true}}
                 @text='Tutorials'
               />
-              <dd.Separator />
               <dd.Interactive
                 @href={{env 'CONSUL_REPO_ISSUES_URL'}}
                 @isHrefExternal={{true}}

diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -59,6 +59,15 @@
     li.consul-side-nav__selector {
       .consul-side-nav__selector-toggle {
         min-width: 15.5rem;
+
+        &:disabled {
+          color: var(--token-color-foreground-disabled);
+          border-color: var(--token-color-border-primary);
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
       }
 
       .hds-dropdown__content {

diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js b/ui/packages/consul-ui/app/components/hashicorp-consul/pageobject.js
@@ -43,7 +43,7 @@ export default (collection, clickable, attribute, is, authForm, emptyState) => (
     },
   };
   page.navigation.authMenu = clickable('[data-test-auth-menu]');
-  page.navigation.login = clickable('[data-test-auth-menu-signin]');
+  page.navigation.login = clickable('[data-test-auth-menu-login]');
   page.navigation.dc = clickable('[data-test-datacenter-menu] button');
   page.navigation.nspace = clickable('[data-test-nspace-menu] button');
   page.navigation.manageNspaces = clickable(

diff --git a/ui/packages/consul-ui/app/components/nav-selector/index.hbs b/ui/packages/consul-ui/app/components/nav-selector/index.hbs
@@ -17,6 +17,7 @@
         class='consul-side-nav__selector-toggle'
         @icon={{@icon}}
         @text={{get @item @key}}
+        disabled={{eq @disabled true}}
       />
       <DD.Header @hasDivider={{true}}>
         {{#if @description}}

diff --git a/ui/packages/consul-ui/translations/components/consul/en-us.yaml b/ui/packages/consul-ui/translations/components/consul/en-us.yaml
@@ -70,6 +70,8 @@ acl:
         management: Management
         client: Client
 token:
+  selector:
+    logged-in:  "Logged in with ACL Token'<br><'b class=consul-side-nav__acl-logged-in'>'{token}'<'/b'>'"
   search-bar:
     kind:
       name: Type