diff --git a/.changelog/24320.txt b/.changelog/24320.txt new file mode 100644 index 000000000..9152496a9 --- /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 74e2728f3..074086001 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 d1408a3c4..f88163b4b 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 9e9d08be1..a26dee23e 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 5c3eafb1e..9d9817295 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 2067aa081..0e780ae61 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 48ccdda3b..a17529fd3 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 3fbca6063..d521bd382 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 c7d57b51f..d6437ac0e 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;