ui: wan federation message dc-dropdown (#13753)

* Only display dc dropdown when more than one dc is available

* Add wan federation message to dc dropdown

* Add test for conditionally displaying dc dropdown

* Move single datacenter indicator into datacenter selector

* Add `DATACENTERS` seperator dc dropdown

* "fix" unnecessary margin-top in dc dropdown

ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs

@@ -2,49 +2,60 @@
   class="dcs"
   data-test-datacenter-menu
 >
-  <DisclosureMenu
-    aria-label="Datacenter"
-    @items={{sort-by 'Primary:desc' 'Local:desc' 'Name:asc' @dcs}}
-  as |disclosure|>
-    <disclosure.Action
-      {{on 'click' disclosure.toggle}}
-    >
-      {{@dc.Name}}
-    </disclosure.Action>
-    <disclosure.Menu as |panel|>
-      <DataSource
-        @src={{uri '/*/*/*/datacenters'}}
-        @onchange={{action (mut @dcs) value="data"}}
-      />
-        <panel.Menu as |menu|>
-          {{#each menu.items as |item|}}
-            <menu.Item
-              aria-current={{if (eq @dc.Name item.Name) 'true'}}
-              class={{class-map
-                (array 'is-local' item.Local)
-                (array 'is-primary' item.Primary)
-              }}
-            >
-              <menu.Action
-                {{on 'click' disclosure.close}}
-                @href={{href-to '.' params=(hash
-                  dc=item.Name
-                  partition=undefined
-                  nspace=(if (gt @nspace.length 0) @nspace undefined)
-                )}}
+  {{#if (gt @dcs.length 1)}}
+    <DisclosureMenu
+      aria-label="Datacenter"
+      @items={{sort-by 'Primary:desc' 'Local:desc' 'Name:asc' @dcs}}
+      data-test-datacenter-disclosure-menu
+    as |disclosure|>
+      <disclosure.Action
+        {{on 'click' disclosure.toggle}}
+      >
+        {{@dc.Name}}
+      </disclosure.Action>
+      <disclosure.Menu as |panel|>
+        <DataSource
+          @src={{uri '/*/*/*/datacenters'}}
+          @onchange={{action (mut @dcs) value="data"}}
+        />
+          <p class="dcs-message">
+            Datacenters shown in this dropdown are available through WAN Federation.
+          </p>
+          <panel.Menu as |menu|>
+            <menu.Separator>
+              DATACENTERS
+            </menu.Separator>
+            {{#each menu.items as |item|}}
+              <menu.Item
+                aria-current={{if (eq @dc.Name item.Name) 'true'}}
+                class={{class-map
+                  (array 'is-local' item.Local)
+                  (array 'is-primary' item.Primary)
+                }}
               >
-                {{item.Name}}
-              {{#if item.Primary}}
-                <span>Primary</span>
-              {{/if}}
-              {{#if item.Local}}
-                <span>Local</span>
-              {{/if}}
-              </menu.Action>
-            </menu.Item>
-          {{/each}}
-        </panel.Menu>
-    </disclosure.Menu>
-  </DisclosureMenu>
+                <menu.Action
+                  {{on 'click' disclosure.close}}
+                  @href={{href-to '.' params=(hash
+                    dc=item.Name
+                    partition=undefined
+                    nspace=(if (gt @nspace.length 0) @nspace undefined)
+                  )}}
+                >
+                  {{item.Name}}
+                {{#if item.Primary}}
+                  <span>Primary</span>
+                {{/if}}
+                {{#if item.Local}}
+                  <span>Local</span>
+                {{/if}}
+                </menu.Action>
+              </menu.Item>
+            {{/each}}
+          </panel.Menu>
+      </disclosure.Menu>
+    </DisclosureMenu>
+  {{else}}
+    <li class="dc-name" data-test-datacenter-single>{{@dcs.firstObject.Name}}</li>
+  {{/if}}
 </li>
 

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

@@ -87,12 +87,12 @@
 
   <:main-nav>
     <ul>
-      <Consul::Datacenter::Selector
-        @dc={{@dc}}
-        @partition={{@partition}}
-        @nspace={{@nspace}}
-        @dcs={{@dcs}}
-      />
+        <Consul::Datacenter::Selector
+          @dc={{@dc}}
+          @partition={{@partition}}
+          @nspace={{@nspace}}
+          @dcs={{@dcs}}
+        />
       <Consul::Partition::Selector
         @dc={{@dc}}
         @partition={{@partition}}

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

@@ -2,6 +2,12 @@
   nav .dcs {
     @extend %main-nav-vertical-hoisted;
     left: 100px;
+
+    .dcs-message {
+      padding: 8px 12px;
+      border-bottom: 1px solid rgb(var(--tone-gray-400));
+      max-width: fit-content;
+    }
   }
   nav .dcs li.is-primary span,
   nav .dcs li.is-local span {
@@ -44,6 +50,11 @@
     top: 2px;
     margin-left: 2px;
   }
+  .dc-name {
+    color: rgb(var(--tone-gray-600));
+    padding: 3.25px 0px;
+    font-weight: var(--typo-weight-semibold)
+  }
 }
 .hashicorp-consul {
   @extend %hashicorp-consul;

ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss

@@ -36,7 +36,7 @@
   display: block;
   padding: 7px 25px;
 }
-%main-nav-vertical [role='separator'] {
+%main-nav-vertical > ul > [role='separator'] {
   margin-top: 0.7rem;
   padding-bottom: 0;
 }

ui/packages/consul-ui/tests/integration/components/consul/datacenter/selector-test.js

@@ -0,0 +1,49 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { render } from '@ember/test-helpers';
+
+module('Integration | Component | consul datacenter selector', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it does not display a dropdown when only one dc is available', async function(assert) {
+    const dcs = [
+      {
+        Name: 'dc-1',
+      },
+    ];
+    this.set('dcs', dcs);
+    this.set('dc', dcs[0]);
+
+    await render(hbs`<Consul::Datacenter::Selector @dcs={{this.dcs}} @dc={{this.dc}} />`);
+
+    assert
+      .dom('[data-test-datacenter-disclosure-menu]')
+      .doesNotExist('datacenter dropdown is not displayed in nav');
+
+    assert
+      .dom('[data-test-datacenter-single]')
+      .hasText('dc-1', 'Datecenter name is displayed in nav');
+  });
+
+  test('it does displays a dropdown when more than one dc is available', async function(assert) {
+    const dcs = [
+      {
+        Name: 'dc-1',
+      },
+      {
+        Name: 'dc-2',
+      },
+    ];
+    this.set('dcs', dcs);
+    this.set('dc', dcs[0]);
+
+    await render(hbs`<Consul::Datacenter::Selector @dcs={{this.dcs}} @dc={{this.dc}} />`);
+
+    assert
+      .dom('[data-test-datacenter-single]')
+      .doesNotExist('we are displaying more than just the name of the first dc');
+
+    assert.dom('[data-test-datacenter-disclosure-menu]').exists('datacenter dropdown is displayed');
+  });
+});

ui/packages/consul-ui/tests/integration/components/hashicorp-consul-test.js

@@ -1,6 +1,7 @@
-import { module, skip } from 'qunit';
+import { module, skip, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { render } from '@ember/test-helpers';
 
 module('Integration | Component | hashicorp consul', function(hooks) {
   setupRenderingTest(hooks);