diff --git a/.changelog/24320.txt b/.changelog/24320.txt new file mode 100644 index 00000000000..9152496a96f --- /dev/null +++ b/.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 +``` diff --git a/ui/app/controllers/settings/tokens.js b/ui/app/controllers/settings/tokens.js index 74e2728f3d2..074086001e5 100644 --- a/ui/app/controllers/settings/tokens.js +++ b/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); }, diff --git a/ui/app/services/system.js b/ui/app/services/system.js index d1408a3c4f2..f88163b4bb0 100644 --- a/ui/app/services/system.js +++ b/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 ( diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 9e9d08be16d..a26dee23ef4 100644 --- a/ui/app/styles/core/navbar.scss +++ b/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; diff --git a/ui/app/templates/components/region-switcher.hbs b/ui/app/templates/components/region-switcher.hbs index 5c3eafb1e42..9d9817295b8 100644 --- a/ui/app/templates/components/region-switcher.hbs +++ b/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|> - Region: {{region}} + {{#if this.system.activeRegion}} + Region: + {{/if}} + {{region}} +{{else if this.system.hasNonDefaultRegion}} + {{/if}} diff --git a/ui/mirage/config.js b/ui/mirage/config.js index 2067aa081a6..0e780ae612f 100644 --- a/ui/mirage/config.js +++ b/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, diff --git a/ui/tests/acceptance/regions-test.js b/ui/tests/acceptance/regions-test.js index 48ccdda3bb4..a17529fd3b9 100644 --- a/ui/tests/acceptance/regions-test.js +++ b/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' + ); + }); }); diff --git a/ui/tests/pages/layout.js b/ui/tests/pages/layout.js index 3fbca6063f8..d521bd382a0 100644 --- a/ui/tests/pages/layout.js +++ b/ui/tests/pages/layout.js @@ -28,6 +28,11 @@ export default create({ }), }, + singleRegion: { + scope: '.single-region', + text: text(), + }, + search: { scope: '[data-test-search-parent]', diff --git a/ui/tests/unit/adapters/job-test.js b/ui/tests/unit/adapters/job-test.js index c7d57b51f31..d6437ac0e21 100644 --- a/ui/tests/unit/adapters/job-test.js +++ b/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;