ui: Adds unique-id helper (#9676)

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -1,7 +1,8 @@
-<App
+{{#let (unique-id) as |guid|}}
+  <App
     class="hashicorp-consul"
     ...attributes
->
+  >
 
     <:home-nav>
       <a
@@ -14,7 +15,7 @@
     </:home-nav>
 
     <:main-nav>
-{{#if @dc}}
+  {{#if @dc}}
       <ul>
     {{#let (or this.nspaces @nspaces) as |nspaces|}}
     {{#if (and (env 'CONSUL_NSPACES_ENABLED') (gt nspaces.length 0))}}
@@ -126,7 +127,7 @@
               <a href={{href-to 'dc.acls.roles' @dc.Name}}>Roles</a>
           </li>
       </ul>
-{{/if}}
+  {{/if}}
 
     </:main-nav>
 
@@ -171,7 +172,7 @@
           <li data-test-main-nav-settings class={{if (is-href 'settings') 'is-active'}}>
               <a href={{href-to 'settings'}}>Settings</a>
           </li>
-{{#if (env 'CONSUL_ACLS_ENABLED')}}
+  {{#if (env 'CONSUL_ACLS_ENABLED')}}
           <li data-test-main-nav-auth>
             <AuthDialog
               @dc={{@dc.Name}}
@@ -223,13 +224,13 @@
                     </BlockSlot>
                     <BlockSlot @name="menu">
                       {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
-{{!TODO: It might be nice to use one of our recursive components here}}
-{{#if authDialog.token.AccessorID}}
+  {{!TODO: It might be nice to use one of our recursive components here}}
+  {{#if authDialog.token.AccessorID}}
                           <li role="none">
                             <AuthProfile />
                           </li>
                           <MenuSeparator />
-{{/if}}
+  {{/if}}
                           <MenuItem
                             class="dangerous"
                             @onclick={{action authDialog.logout}}
@@ -245,7 +246,7 @@
               {{/let}}
             </AuthDialog>
           </li>
-{{/if}}
+  {{/if}}
       </ul>
     </:complementary-nav>
 
@@ -271,4 +272,5 @@
       </Action>
       {{{concat '<!-- ' (env 'CONSUL_GIT_SHA') '-->'}}}
     </:content-info>
-</App>
+  </App>
+{{/let}}

ui/packages/consul-ui/app/components/hashicorp-consul/index.js

@@ -1,15 +1,7 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class HashiCorpConsul extends Component {
-  @service('dom') dom;
-
-  constructor(args, owner) {
-    super(...arguments);
-    this.guid = this.dom.guid(this);
-  }
-
   // TODO: Right now this is the only place where we need permissions
   // but we are likely to need it elsewhere, so probably need a nice helper
   get canManageNspaces() {

ui/packages/consul-ui/app/helpers/unique-id.js

@@ -0,0 +1,10 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+
+export default class UniqueIdHelper extends Helper {
+  @service('dom') dom;
+
+  compute(params, hash) {
+    return this.dom.guid({});
+  }
+}