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,9 +2,11 @@
   class="dcs"
   data-test-datacenter-menu
 >
+  {{#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}}
@@ -16,7 +18,13 @@
           @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'}}
@@ -46,5 +54,8 @@
           </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.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);