ui: show region in header gutter when only one region exists

This PR adds a plain text label of the region to the header when there is
only one region present. Before, nothing was showin in this case, and a
dropdown was shown on federated clusters.

The use case here is for operators of multiple non-federated Nomad clusters,
when all the UI's involved otherwise look identical.

ui/app/styles/core/navbar.scss

@@ -142,6 +142,18 @@ $secondaryNavbarHeight: 4.5rem;
     display: flex;
     align-items: center;
 
+    &.is-region {
+      display: block;
+      padding: 0 1rem;
+      font-size: 1em;
+      color: rgba($primary-invert, 0.9);
+
+      > span {
+        padding-right: 0.4em;
+        font-weight: 500;
+      }
+    }
+
     &.is-gutter {
       width: $gutter-width;
       display: block;

ui/app/templates/components/region-switcher.hbs

@@ -18,4 +18,8 @@
       <span class="ember-power-select-prefix">Region: </span>{{region}}
     </PowerSelect>
   </span>
+{{else}}
+  <div class="navbar-item is-region">
+    <span>Region: </span>{{this.system.activeRegion}}
+  </div>
 {{/if}}

ui/tests/unit/components/region-switcher-test.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Unit | Component | region-switcher', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('displays single region', async function (assert) {
+    const system = {
+      shouldShowRegions: false,
+    };
+
+    this.set('system', system);
+
+    await render(hbs`<RegionSwitcher/>`);
+
+    assert.dom('.is-region').exists();
+  });
+});