diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 9e9d08be16d..2906aa1ed45 100644 --- a/ui/app/styles/core/navbar.scss +++ b/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; diff --git a/ui/app/templates/components/region-switcher.hbs b/ui/app/templates/components/region-switcher.hbs index 5c3eafb1e42..b7c0d9ced99 100644 --- a/ui/app/templates/components/region-switcher.hbs +++ b/ui/app/templates/components/region-switcher.hbs @@ -18,4 +18,8 @@ Region: {{region}} +{{else}} +
{{/if}} diff --git a/ui/tests/unit/components/region-switcher-test.js b/ui/tests/unit/components/region-switcher-test.js new file mode 100644 index 00000000000..15a67b847ee --- /dev/null +++ b/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`