Add description to NavSelector

hashicorp · Nov 6, 2023 · 0b10672 · 0b10672
1 parent d1c6f00
commit 0b10672
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
@@ -13,6 +13,7 @@
       @key='Name'
       @icon='server-cluster'
       @placeholder='Search datacenters'
+      @description="WAN federated datacenters"
       class='consul-datacenter-selector'
       data-test-datacenter-disclosure-menu
       as |Dropdown item|

diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -63,6 +63,7 @@
 
       .hds-dropdown__content {
         min-width: 15.5rem;
+        max-height: 500px;
       }
     }
 
@@ -95,6 +96,10 @@
     .consul-side-nav__selector-title {
       margin-top: 0.5rem;
     }
+
+    .consul-side-nav__selector-description {
+      padding-top: 0.5rem;
+    }
   }
 }
 

diff --git a/ui/packages/consul-ui/app/components/nav-selector/index.hbs b/ui/packages/consul-ui/app/components/nav-selector/index.hbs
@@ -19,7 +19,11 @@
         @text={{get @item @key}}
       />
       <DD.Header @hasDivider={{true}}>
-        {{! <Hds::Text::Body @size='100' @color='faint'>WAN federated datacenters</Hds::Text::Body> }}
+        {{#if @description}}
+          <div class='consul-side-nav__selector-description'>
+            <Hds::Text::Body @size='100' @color='faint'>{{@description}}</Hds::Text::Body>
+          </div>
+        {{/if}}
         <Hds::Form::TextInput::Base
           @type='search'
           @value={{this.search}}
@@ -29,7 +33,7 @@
         />
       </DD.Header>
       {{#if (eq this.filteredItems.length 0)}}
-        <DD.Description @text="No results" />
+        <DD.Description @text='No results' />
       {{else}}
         {{#each this.filteredItems as |item|}}
           {{yield DD item}}