CC-5545: Side Nav (#19342)

* Initial work for sidenav

* Use HDS::Text

* Add resolution for ember-element-helper

* WIP dc selector

* Update HCP Home link

* DC selector

* Hook up remaining selectors

* Fix settings and tutorial links

* Remove comments

* Remove skip-links

* Replace auth with new dropdown

* Use href-to helper for sidenav links

* Changelog

* Add description to NavSelector

* Wrap version in footer and role

* Fix login tests

* Add data-test selectors for namespaces

* Fix datacenter disclosure menu test

* Stop rendering auth dialog if acls are disabled

* Update disabled selector state and token selector

* Fix logic in ACL selector

* Fix HCP Home integration test

* Remove toggling the sidenav in tests

* Add sidenav to eng docs

* Re-add debug navigation for eng docs

* Remove ember-in-viewport

* Remove unused styles

* Upgrade @hashicorp/design-system-componentseee

* Add translations for side-nav

* Only show back to hcp link if url is present

* Disable responsive due to a11y-dialog issue

.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.
+```

ui/packages/consul-acls/app/components/consul/acl/selector/index.hbs

@@ -3,82 +3,54 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<li 
-  class="acls-separator"
-  role="separator"
->
-  Access Controls
-{{#if (not (can "use acls"))}}
-  <span
-    {{tooltip "ACLs are not currently enabled in this cluster"}}
-  ></span>
-{{/if}}
-</li>
-<li 
-  data-test-main-nav-tokens
-  class={{if (is-href 'dc.acls.tokens' @dc.Name) 'is-active'}}
->
-    <a 
-      href={{href-to 'dc.acls.tokens' @dc.Name}}
-    >
-      Tokens
-    </a>
-</li>
-{{#if (can "read acls")}}
-<li 
-  data-test-main-nav-policies
-  class={{if (is-href 'dc.acls.policies' @dc.Name) 'is-active'}}
->
-    <a 
-      href={{href-to 'dc.acls.policies' @dc.Name}}
-    >
-      Policies
-    </a>
-</li>
-<li
-  data-test-main-nav-roles
-  class={{if (is-href 'dc.acls.roles' @dc.Name) 'is-active'}}
->
-    <a
-      href={{href-to 'dc.acls.roles' @dc.Name}}
-    >
-      Roles
-    </a>
-</li>
-<li 
-  data-test-main-nav-auth-methods
-  class={{if (is-href 'dc.acls.auth-methods' @dc.Name) 'is-active'}}
->
-    <a 
-      href={{href-to 'dc.acls.auth-methods' @dc.Name}}
-    >
-      Auth Methods
-    </a>
-</li>
-{{else if (not (can "use acls"))}}
-<li 
-  data-test-main-nav-policies
-  class={{if (is-href 'dc.acls.policies' @dc.Name) 'is-active'}}
->
-    <span>
-      Policies
-    </span>
-</li>
-<li 
-  data-test-main-nav-roles
-  class={{if (is-href 'dc.acls.roles' @dc.Name) 'is-active'}}
->
-    <span>
-      Roles
-    </span>
-</li>
-<li
-  data-test-main-nav-auth-methods
-  class={{if (is-href 'dc.acls.auth-methods' @dc.Name) 'is-active'}}
->
-    <span>
-      Auth Methods
-    </span>
-</li>
-{{/if}}
+{{#let @list as |SNL|}}
+  {{#if (can "use acls")}}
+    <SNL.Title>{{t "components.hashicorp-consul.side-nav.acls.title"}}</SNL.Title>
+  {{else}}
+    <SNL.Title {{tooltip (t "components.hashicorp-consul.side-nav.acls.tooltip")}}>
+      {{t "components.hashicorp-consul.side-nav.acls.title"}}
+    </SNL.Title>
+  {{/if}}
 
+  <SNL.Link
+    @text={{t "components.hashicorp-consul.side-nav.acls.tokens"}}
+    @href={{href-to "dc.acls.tokens" @dc.Name}}
+    @isHrefExternal={{false}}
+    @isActive={{is-href "dc.acls.tokens" @dc.Name}}
+    data-test-main-nav-tokens
+  />
+
+  {{#if (can "read acls")}}
+    <SNL.Link
+      @text={{t "components.hashicorp-consul.side-nav.acls.policies"}}
+      @href={{href-to "dc.acls.policies" @dc.Name}}
+      @isHrefExternal={{false}}
+      @isActive={{is-href "dc.acls.policies" @dc.Name}}
+      data-test-main-nav-policies
+    />
+    <SNL.Link
+      @text={{t "components.hashicorp-consul.side-nav.acls.roles"}}
+      @href={{href-to "dc.acls.roles" @dc.Name}}
+      @isHrefExternal={{false}}
+      @isActive={{is-href "dc.acls.roles" @dc.Name}}
+      data-test-main-nav-roles
+    />
+    <SNL.Link
+      @text={{t "components.hashicorp-consul.side-nav.acls.auth-methods"}}
+      @href={{href-to "dc.acls.auth-methods" @dc.Name}}
+      @isHrefExternal={{false}}
+      @isActive={{is-href "dc.acls.auth-methods" @dc.Name}}
+      data-test-main-nav-auth-methods
+    />
+  {{else if (not (can "use acls"))}}
+    <SNL.Item class="consul-disabled-nav" data-test-main-nav-policies>
+      {{t "components.hashicorp-consul.side-nav.acls.policies"}}
+    </SNL.Item>
+    <SNL.Item class="consul-disabled-nav" data-test-main-nav-roles>
+      {{t "components.hashicorp-consul.side-nav.acls.roles"}}
+    </SNL.Item>
+    <SNL.Item class="consul-disabled-nav" data-test-main-nav-auth-methods>
+      {{t "components.hashicorp-consul.side-nav.acls.auth-methods"}}
+    </SNL.Item>
+  {{/if}}
+{{/let}}

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 `<AuthDialog
-/>`, `<AuthForm />`, `<AuthProfile />` and `<ModalDialog />`. The majority of
+/>`, `<AuthForm />`, and `<ModalDialog />`. The majority of
 the functionality is contained in those other components. This composition
 mostly orchestrates the interactions between them i.e. wires them together.