ui: show region in header gutter when only one region exists (#24320)

* 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] Signing in with a token explicitly sets the region dropdown activeRegion (#24347)

* Signing in with a token explicitly sets the region dropdown activeREgion

* Test and Select a Region default text

* Account for 403 on mocked agent members req

* Dont show the region if it isnt set in agent config

* Small padding css change

* unit test condition moved to stubbable acceptance test

---------

Co-authored-by: Phil Renaud <phil.renaud@hashicorp.com>

.changelog/24320.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Show region in header when only one region exists, and set it immediately upon logging in with a token
+```

ui/app/controllers/settings/tokens.js

@@ -23,7 +23,7 @@ export default class Tokens extends Controller {
   @service token;
   @service store;
   @service router;
-
+  @service system;
   queryParams = ['code', 'state', 'jwtAuthMethod'];
 
   @tracked secret = this.token.secret;
@@ -164,6 +164,14 @@ export default class Tokens extends Controller {
           // Refetch the token and associated policies
           this.token.get('fetchSelfTokenAndPolicies').perform().catch();
 
+          if (!this.system.activeRegion) {
+            this.system.get('defaultRegion').then((res) => {
+              if (res.region) {
+                this.system.set('activeRegion', res.region);
+              }
+            });
+          }
+
           this.signInStatus = 'success';
           this.token.set('tokenNotFound', false);
         },

ui/app/services/system.js

@@ -57,7 +57,7 @@ export default class SystemService extends Service {
     });
   }
 
-  @computed
+  @computed('token.selfToken')
   get defaultRegion() {
     const token = this.token;
     return PromiseObject.create({
@@ -110,6 +110,12 @@ export default class SystemService extends Service {
     return this.get('regions.length') > 1;
   }
 
+  get hasNonDefaultRegion() {
+    return this.get('regions')
+      .toArray()
+      .some((region) => region !== 'global');
+  }
+
   @computed('activeRegion', 'defaultRegion.region', 'shouldShowRegions')
   get shouldIncludeRegion() {
     return (

ui/app/styles/core/navbar.scss

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

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

@@ -12,10 +12,17 @@
       @tagName="div"
       @triggerClass={{this.decoration}}
       @options={{this.sortedRegions}}
-      @selected={{this.system.activeRegion}}
+      @selected={{or this.system.activeRegion 'Select a Region'}}
       @searchEnabled={{false}}
       @onChange={{action this.gotoRegion}} as |region|>
-      <span class="ember-power-select-prefix">Region: </span>{{region}}
+      {{#if this.system.activeRegion}}
+        <span class="ember-power-select-prefix">Region: </span>
+      {{/if}}
+      {{region}}
     </PowerSelect>
   </span>
+{{else if this.system.hasNonDefaultRegion}}
+  <div class="navbar-item single-region">
+    <span>Region: </span>{{this.system.activeRegion}}
+  </div>
 {{/if}}

ui/mirage/config.js

@@ -708,7 +708,12 @@ export default function () {
     return this.serialize(volume);
   });
 
-  this.get('/agent/members', function ({ agents, regions }) {
+  this.get('/agent/members', function ({ agents, regions }, req) {
+    const tokenPresent = req.requestHeaders['X-Nomad-Token'];
+    if (!tokenPresent) {
+      return new Response(403, {}, 'Forbidden');
+    }
+
     const firstRegion = regions.first();
     return {
       ServerRegion: firstRegion ? firstRegion.id : null,

ui/tests/acceptance/regions-test.js

@@ -15,6 +15,7 @@ import JobsList from 'nomad-ui/tests/pages/jobs/list';
 import ClientsList from 'nomad-ui/tests/pages/clients/list';
 import Layout from 'nomad-ui/tests/pages/layout';
 import Allocation from 'nomad-ui/tests/pages/allocations/detail';
+import Tokens from 'nomad-ui/tests/pages/settings/tokens';
 
 module('Acceptance | regions (only one)', function (hooks) {
   setupApplicationTest(hooks);
@@ -35,21 +36,23 @@ module('Acceptance | regions (only one)', function (hooks) {
     await a11yAudit(assert);
   });
 
-  test('when there is only one region, the region switcher is not shown in the nav bar and the region is not in the page title', async function (assert) {
+  test('when there is only one region, and it is the default one, the region switcher is not shown in the nav bar and the region is not in the page title', async function (assert) {
     server.create('region', { id: 'global' });
 
     await JobsList.visit();
 
     assert.notOk(Layout.navbar.regionSwitcher.isPresent, 'No region switcher');
+    assert.notOk(Layout.navbar.singleRegion.isPresent, 'No single region');
     assert.ok(document.title.includes('Jobs'));
   });
 
-  test('when the only region is not named "global", the region switcher still is not shown', async function (assert) {
+  test('when the only region is not named "global", the region switcher still is not shown, but the single region name is', async function (assert) {
     server.create('region', { id: 'some-region' });
 
     await JobsList.visit();
 
     assert.notOk(Layout.navbar.regionSwitcher.isPresent, 'No region switcher');
+    assert.ok(Layout.navbar.singleRegion.isPresent, 'Single region');
   });
 
   test('pages do not include the region query param', async function (assert) {
@@ -218,4 +221,26 @@ module('Acceptance | regions (many)', function (hooks) {
       }
     });
   });
+
+  test('Signing in sets the active region', async function (assert) {
+    window.localStorage.clear();
+    let managementToken = server.create('token');
+    await Tokens.visit();
+    assert.equal(
+      Layout.navbar.regionSwitcher.text,
+      'Select a Region',
+      'Region picker says "Select a Region" before signing in'
+    );
+    await Tokens.secret(managementToken.secretId).submit();
+    assert.equal(
+      window.localStorage.nomadActiveRegion,
+      'global',
+      'Region is set in localStorage after signing in'
+    );
+    assert.equal(
+      Layout.navbar.regionSwitcher.text,
+      'Region: global',
+      'Region picker says "Region: global" after signing in'
+    );
+  });
 });

ui/tests/pages/layout.js

@@ -28,6 +28,11 @@ export default create({
       }),
     },
 
+    singleRegion: {
+      scope: '.single-region',
+      text: text(),
+    },
+
     search: {
       scope: '[data-test-search-parent]',
 

ui/tests/unit/adapters/job-test.js

@@ -468,6 +468,9 @@ module('Unit | Adapter | Job', function (hooks) {
   });
 
   test('when the region is set to the default region, requests are made without the region query param', async function (assert) {
+    const secret = 'here is the secret';
+    this.subject().set('token.secret', secret);
+
     await this.initializeUI({ region: 'region-1' });
 
     const { pretender } = this.server;