diff --git a/.changelog/19342.txt b/.changelog/19342.txt new file mode 100644 index 000000000000..ac8559fd482d --- /dev/null +++ b/.changelog/19342.txt @@ -0,0 +1,3 @@ +```release-note:improvement +Replaces UI Side Nav with Helios Design System Side Nav. Adds dc/partition/namespace searching in Side Nav. +``` diff --git a/ui/packages/consul-acls/app/components/consul/acl/selector/index.hbs b/ui/packages/consul-acls/app/components/consul/acl/selector/index.hbs index a13efa37c19d..cbee305c31bf 100644 --- a/ui/packages/consul-acls/app/components/consul/acl/selector/index.hbs +++ b/ui/packages/consul-acls/app/components/consul/acl/selector/index.hbs @@ -3,82 +3,54 @@ SPDX-License-Identifier: BUSL-1.1 }} - -
  • - - Tokens - -
    • -{{#if (can "read acls")}} -
  • - - Policies - -
    • -
  • - - Roles - -
    • -
  • - - Auth Methods - -
    • -{{else if (not (can "use acls"))}} -
  • - - Policies - -
    • -
  • - - Roles - -
    • -
  • - - Auth Methods - -
    • -{{/if}} +{{#let @list as |SNL|}} + {{#if (can "use acls")}} + {{t "components.hashicorp-consul.side-nav.acls.title"}} + {{else}} + + {{t "components.hashicorp-consul.side-nav.acls.title"}} + + {{/if}} + + + {{#if (can "read acls")}} + + + + {{else if (not (can "use acls"))}} + + {{t "components.hashicorp-consul.side-nav.acls.policies"}} + + + {{t "components.hashicorp-consul.side-nav.acls.roles"}} + + + {{t "components.hashicorp-consul.side-nav.acls.auth-methods"}} + + {{/if}} +{{/let}} \ No newline at end of file diff --git a/ui/packages/consul-acls/app/components/consul/token/selector/README.mdx b/ui/packages/consul-acls/app/components/consul/token/selector/README.mdx index ecb6933c3468..17b3f7cde72c 100644 --- a/ui/packages/consul-acls/app/components/consul/token/selector/README.mdx +++ b/ui/packages/consul-acls/app/components/consul/token/selector/README.mdx @@ -2,7 +2,7 @@ A self-contained component to allow the user to 'select' their token a.k.a. log in. The component is mostly a wrapper around a composition of ``, ``, `` and ``. The majority of +/>`, ``, and ``. The majority of the functionality is contained in those other components. This composition mostly orchestrates the interactions between them i.e. wires them together. diff --git a/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs b/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs index 1ded54b9434d..89485ce0cffd 100644 --- a/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs +++ b/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs @@ -3,163 +3,162 @@ SPDX-License-Identifier: BUSL-1.1 }} -{{#if (can 'use acls')}} -
  • +{{#if (can "use acls")}} + + <:unauthorized as |authDialog|> - - <:unauthorized as |authDialog|> - - + + +

    + Log in to Consul +

    +     + + - Login -     -     - - Log in - - - + {{#if (can "use SSO")}} + + + + {{/if}} + + + + - -

    - Log in to Consul -

    -     - - - - {{#if (can "use SSO")}} - - - - {{/if}} - - - - - -     - - <:authorized as |authDialog|> - + + + + + + - - -

    - Log in with a different token -

    -     - - - - - - - - - - - - Logout - - - - - Logout - - - {{#if authDialog.token.AccessorID}} - - {{/if}} - - - - - Logout - - - - - - -     + @text={{t "components.hashicorp-consul.side-nav.user-menu.settings"}} + @isHrefExternal={{false}} + /> + + + + <:authorized as |authDialog|> -
    • -{{yield - (hash - open=this.modal.open - close=this.model.close - ) -}} -{{/if}} + + + +

    + Log in with a different token +

    +     + + + + + + + + +     + + + {{#if authDialog.token.AccessorID}} + + {{/if}} + + + + + +     + {{yield (hash open=this.modal.open close=this.model.close)}} +{{else}} + + + + +{{/if}} \ No newline at end of file diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs index bb5a1fc32a98..5f8dfc5b5510 100644 --- a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs +++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs @@ -3,11 +3,14 @@ SPDX-License-Identifier: BUSL-1.1 }} -
    - - Back to HCP - -
    +{{#let @list (env "CONSUL_HCP_URL") as |SNL hcpUrl|}} + {{log hcpUrl}} + {{#if (and SNL hcpUrl)}} + + {{/if}} +{{/let}} \ No newline at end of file diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss deleted file mode 100644 index 5d268de6dd6d..000000000000 --- a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -.consul-hcp-home { - position: relative; - top: -22px; -} -.consul-hcp-home a::before { - content: ''; - --icon-name: icon-arrow-left; - --icon-size: icon-300; - margin-right: 8px; -} - diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.test.js b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.test.js index 962a7c7c4a8a..0ffb7c48583f 100644 --- a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.test.js +++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.test.js @@ -35,9 +35,46 @@ module('Integration | Component | consul hcp home', function(hooks) { } ); - await render(hbs``); + await render(hbs` + + + + `); + assert.dom('[data-test-back-to-hcp]').isVisible(); assert.dom('a').hasAttribute('href', 'http://hcp'); }); + + test('it does not output the Back to HCP link if CONSUL_HCP_URL is not present', async function(assert) { + // temporary registration until we are running as separate applications + this.owner.register( + 'component:consul/hcp/home', + ConsulHcpHome + ); + // + + const Helper = this.owner.resolveRegistration('helper:env'); + this.owner.register( + 'helper:env', + class extends Helper { + compute([name, def]) { + switch(name) { + case 'CONSUL_HCP_URL': + return undefined; + } + return super.compute(...arguments); + } + } + ); + + await render(hbs` + + + + `); + + assert.dom('[data-test-back-to-hcp]').doesNotExist(); + assert.dom('a').doesNotExist(); + }); }); diff --git a/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs b/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs index 8ddb666e13c5..5dec44b8f919 100644 --- a/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs +++ b/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs @@ -3,93 +3,58 @@ SPDX-License-Identifier: BUSL-1.1 }} -{{#if (can "use nspaces")}} - {{#if (can "choose nspaces")}} - {{#let - (or @nspace 'default') - (is-href 'dc.nspaces' @dc.Name) - as |nspace isManaging|}} -
  • - - - {{if isManaging 'Manage Namespaces' nspace}} - - - {{#if (gt @nspaces.length 0)}} - - {{else}} - - {{/if}} - - {{#each menu.items as |item|}} - - - - {{item.Name}} - - - {{/each}} - - - -
    • - {{/let}} - {{/if}} -{{/if}} +{{#if (and (can "use nspaces") (can "choose nspaces"))}} + + {{#let + @list + (if @nspace (hash Name=@nspace) (hash Name="default")) + (is-href "dc.nspaces" @dc.Name) + as |SNL nspace isManaging| + }} + {{t "components.hashicorp-consul.side-nav.nspaces.title"}} + + + {{item.Name}} + + + {{/let}} +{{/if}} \ No newline at end of file diff --git a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs index b9727a9de96e..9031fd0e8fff 100644 --- a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs +++ b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs @@ -4,71 +4,50 @@ }} {{#let - (or @partition "default") + @list + (if @partition (hash Name=@partition) (hash Name="default")) (is-href "dc.partitions" @dc.Name) - as |partition isManaging| + (can "choose partitions" dc=@dc) + as |SNL partition isManaging canChoose| }} - {{#if (can "choose partitions" dc=@dc)}} -
  • - + {{t "components.hashicorp-consul.side-nav.partitions.title"}} + + {{#if canChoose}} + - - {{if isManaging "Manage Partition" partition}} - - - - - {{#each menu.items as |item|}} - - - {{item.Name}} - - - {{/each}} - - - -
    • - {{else}} -
  • - {{"default"}} -
    • - {{/if}} + {{item.Name}} + + {{/if}} + {{/let}} diff --git a/ui/packages/consul-peerings/app/components/consul/peer/selector/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/selector/index.hbs index 2fe51c760c68..0813a973ce46 100644 --- a/ui/packages/consul-peerings/app/components/consul/peer/selector/index.hbs +++ b/ui/packages/consul-peerings/app/components/consul/peer/selector/index.hbs @@ -3,23 +3,14 @@ SPDX-License-Identifier: BUSL-1.1 }} - -
  • - - Peers - -
    • - +{{#let @list as |SNL|}} + {{t "components.hashicorp-consul.side-nav.organization.title"}} + +{{/let}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/app/index.hbs b/ui/packages/consul-ui/app/components/app/index.hbs index ba7daf4be232..08f7efdf5b85 100644 --- a/ui/packages/consul-ui/app/components/app/index.hbs +++ b/ui/packages/consul-ui/app/components/app/index.hbs @@ -3,102 +3,19 @@ SPDX-License-Identifier: BUSL-1.1 }} -{{#let (hash - main=(concat guid '-main') - Notification=(component 'app/notification') -) as |exported|}} +{{#let (hash main=(concat guid '-main') Notification=(component 'app/notification')) as |exported|}} -
    - -
    - - {{t 'components.app.skip_to_content'}} - {{!-- - In order to add further skip links from within other templates use: - - Skip to subcontent - - from within your template - --}} - -
    - - - - -
    - - {{yield exported to="home-nav"}} -
    -{{!-- - The viewport tolerances here give us a 10 pixel buffer to make sure the menu - is marked as out of the viewport, we use all sides so we don't need to change - this should any CSS change ---}} - -{{!-- - Whilst this has a role of navigation, it is 'complementary navigation' we - don't want to change the navigation role here, but we do want to label it as - 'complementary' to the main content. The phrase 'complementary navigation' as - read by a screenreader should convey the meaning we are after here. ---}} - +
    + + {{yield exported to='side-nav'}} +
    +
    + {{yield exported to='notifications'}} +
    -
    -
    -
    - {{yield exported to="notifications"}} - -
    - {{yield exported to="main"}} -
    -
    - {{yield exported to="content-info"}} -
    -
    + {{yield exported to='main'}} + + {{/let}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/app/index.scss b/ui/packages/consul-ui/app/components/app/index.scss index 7de7fa108413..59f28c60258f 100644 --- a/ui/packages/consul-ui/app/components/app/index.scss +++ b/ui/packages/consul-ui/app/components/app/index.scss @@ -3,9 +3,6 @@ * SPDX-License-Identifier: BUSL-1.1 */ -.app .skip-links { - @extend %skip-links; -} .app .notifications { @extend %app-notifications; } @@ -28,125 +25,3 @@ max-width: 80%; pointer-events: auto; } - -[role='contentinfo'] { - @extend %footer; -} -[role='banner'] { - @extend %main-header-horizontal; -} -[role='banner'] > label { - @extend %main-nav-horizontal-toggle-button; -} -.app > input[id] { - @extend %main-nav-horizontal-toggle; -} -%main-header-horizontal > div { - @extend %main-nav-horizontal-panel; -} - -%main-header-horizontal nav:first-of-type { - @extend %main-nav-vertical, %main-nav-sidebar; -} -%main-header-horizontal nav:last-of-type { - @extend %main-nav-horizontal; - margin-left: auto; -} -%main-nav-vertical-hoisted { - top: 18px; -} -%main-nav-vertical-hoisted [aria-label]::before { - display: none !important; -} -%main-nav-horizontal [aria-haspopup='menu'] ~ * { - position: absolute; - right: 0; - min-width: 192px; -} -%main-nav-horizontal [aria-expanded], -%main-nav-vertical-hoisted [aria-expanded] { - @extend %main-nav-horizontal-popover-menu-trigger; - @extend %main-nav-horizontal-action; -} -%main-nav-horizontal-popover-menu-trigger { - @extend %main-nav-horizontal-action-active; -} -%footer, -%main-nav-sidebar, -%main-notifications, -main { - @extend %transition-pushover; -} -%footer { - @extend %body-100-regular; - position: fixed; - z-index: 50; - - color: var(--token-color-foreground-disabled); - width: 250px; - padding-left: 25px; -} -%footer { - top: calc(100vh - 42px); - top: calc(max(100vh, 460px) - 42px); -} -html.has-partitions.has-nspaces .app [role='contentinfo'] { - top: calc(100vh - 42px); - top: calc(max(100vh, 640px) - 42px); -} -%main-nav-sidebar { - z-index: 10; -} -%footer, -%main-nav-sidebar { - transition-property: left; -} -%app-notifications, -main { - margin-top: var(--chrome-height, 64px); - transition-property: margin-left; -} -%app-notifications { - transition-property: margin-left, width; -} - -@media #{$--sidebar-open} { - %main-nav-horizontal-toggle ~ main .notifications { - width: calc(100% - var(--chrome-width)); - } - %main-nav-horizontal-toggle:checked ~ main .notifications { - width: 100%; - } - %main-nav-horizontal-toggle ~ footer, - %main-nav-horizontal-toggle + header > div > nav:first-of-type { - left: 0; - } - %main-nav-horizontal-toggle:checked ~ footer, - %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type { - left: calc(var(--chrome-width, 280px) * -1); - } - %main-nav-horizontal-toggle ~ main { - margin-left: var(--chrome-width, 280px); - } - %main-nav-horizontal-toggle:checked ~ main .notifications, - %main-nav-horizontal-toggle:checked ~ main { - margin-left: 0; - } -} -@media #{$--lt-sidebar-open} { - %main-nav-horizontal-toggle ~ main .notifications { - width: 100%; - } - %main-nav-horizontal-toggle:checked ~ footer, - %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type { - left: 0; - } - %main-nav-horizontal-toggle ~ footer, - %main-nav-horizontal-toggle + header > div > nav:first-of-type { - left: calc(var(--chrome-width, 280px) * -1); - } - %main-nav-horizontal-toggle ~ main .notifications, - %main-nav-horizontal-toggle ~ main { - margin-left: 0; - } -} diff --git a/ui/packages/consul-ui/app/components/auth-dialog/README.mdx b/ui/packages/consul-ui/app/components/auth-dialog/README.mdx index da916cbb34ad..c1094621f70a 100644 --- a/ui/packages/consul-ui/app/components/auth-dialog/README.mdx +++ b/ui/packages/consul-ui/app/components/auth-dialog/README.mdx @@ -14,9 +14,6 @@ A component to help orchestrate a login/logout flow. /> <:authorized as |api|> -