hashicorp · WenInCode · Oct 12, 2023 · Oct 12, 2023 · Oct 12, 2023 · Oct 12, 2023
@@ -7,34 +7,29 @@
   class="consul-lock-session-list"
   ...attributes
   @items={{@items}}
-as |item index|>
+  as |item index|
+>
   <BlockSlot @name="header">
-  {{#if item.Name}}
-    <span>{{item.Name}}</span>
-  {{else}}
-    <span>
-      {{item.ID}}
-      <CopyButton
-        @value={{item.ID}}
-        @name="ID"
-      />
-    </span>
-  {{/if}}
+    {{#if item.Name}}
+      <span>{{item.Name}}</span>
+    {{else}}
+      <span>
+        {{item.ID}}
+        <ConsulCopyButton @value={{item.ID}} @name="ID" />
+      </span>
+    {{/if}}
   </BlockSlot>
   <BlockSlot @name="details">
     {{#if item.Name}}
-    <dl>
-      <dt>
-        ID
-      </dt>
-      <dd>
-        <CopyButton
-          @value={{item.ID}}
-          @name="ID"
-        />
-        {{item.ID}}
-      </dd>
-    </dl>
+      <dl>
+        <dt>
+          ID
+        </dt>
+        <dd>
+          <ConsulCopyButton @value={{item.ID}} @name="ID" />
+          {{item.ID}}
+        </dd>
+      </dl>
     {{/if}}
     <dl class="lock-delay">
       <dt {{tooltip}}>
@@ -43,54 +38,48 @@ as |item index|>
       <dd data-test-session-delay>{{duration-from item.LockDelay}}</dd>
     </dl>
     <dl class="ttl">
-      <dt
-        {{tooltip}}
-      >
+      <dt {{tooltip}}>
         TTL
       </dt>
-    {{#if (eq item.TTL "")}}
-      <dd data-test-session-ttl={{item.TTL}}>-</dd>
-    {{else}}
-      <dd data-test-session-ttl={{item.TTL}}>{{item.TTL}}</dd>
-    {{/if}}
+      {{#if (eq item.TTL "")}}
+        <dd data-test-session-ttl={{item.TTL}}>-</dd>
+      {{else}}
+        <dd data-test-session-ttl={{item.TTL}}>{{item.TTL}}</dd>
+      {{/if}}
     </dl>
     <dl class="behavior">
-      <dt
-        {{tooltip}}
-      >
+      <dt {{tooltip}}>
         Behavior
       </dt>
       <dd>{{item.Behavior}}</dd>
     </dl>
-{{#let (union item.NodeChecks item.ServiceChecks) as |checks|}}
-    <dl class="checks">
-      <dt
-        {{tooltip}}
-      >
-        Checks
-      </dt>
-      <dd>
-{{#if (gt checks.length 0)}}
-      {{#each checks as |item|}}
-        <span>{{item}}</span>
-      {{/each}}
-{{else}}
-        -
-{{/if}}
-      </dd>
-    </dl>
-{{/let}}
+    {{#let (union item.NodeChecks item.ServiceChecks) as |checks|}}
+      <dl class="checks">
+        <dt {{tooltip}}>
+          Checks
+        </dt>
+        <dd>
+          {{#if (gt checks.length 0)}}
+            {{#each checks as |item|}}
+              <span>{{item}}</span>
+            {{/each}}
+          {{else}}
+            -
+          {{/if}}
+        </dd>
+      </dl>
+    {{/let}}
   </BlockSlot>
   <BlockSlot @name="actions">
     <ConfirmationDialog
       @message="Are you sure you want to invalidate this session?"
     >
       <BlockSlot @name="action" as |confirm|>
         <Hds::Button
-          @text='Invalidate'
-          @color='critical'
+          @text="Invalidate"
+          @color="critical"
           data-test-delete
-          {{on 'click' (fn confirm (fn @ondelete item))}}
+          {{on "click" (fn confirm (fn @ondelete item))}}
         />
       </BlockSlot>
       <BlockSlot @name="dialog" as |execute cancel message|>
@@ -99,15 +88,15 @@ as |item index|>
         </p>
         <Hds::ButtonSet>
           <Hds::Button
-            @text='Confirm Invalidate'
-            @color='critical'
+            @text="Confirm Invalidate"
+            @color="critical"
             data-test-delete
-            {{on 'click' (fn execute)}}
+            {{on "click" (fn execute)}}
           />
           <Hds::Button
-            @text='Cancel'
-            @color='secondary'
-            {{on 'click' (fn cancel)}}
+            @text="Cancel"
+            @color="secondary"
+            {{on "click" (fn cancel)}}
           />
         </Hds::ButtonSet>
       </BlockSlot>

@@ -18,7 +18,7 @@
           <div
             class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold"
           >{{address}}</div>
-          <CopyButton
+          <ConsulCopyButton
             @value={{address}}
             @name="Address"
             class="opacity-0 group-hover:opacity-100"

@@ -3,102 +3,74 @@
   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|}}
 
-<div
-  class="app"
-  ...attributes
->
+  <div class='app' ...attributes>
 
-  <div
-    class="skip-links"
-    {{on "click" this.focus}}
-  >
-    <PortalTarget
-      @name="app-before-skip-links"
-      @multiple={{true}}
-    ></PortalTarget>
-    <a href={{concat '#' exported.main}}>{{t 'components.app.skip_to_content'}}</a>
-    {{!--
+    <div class='skip-links' {{on 'click' this.focus}}>
+      <PortalTarget @name='app-before-skip-links' @multiple={{true}} />
+      <a href={{concat '#' exported.main}}>{{t 'components.app.skip_to_content'}}</a>
+      {{!
       In order to add further skip links from within other templates use:
       <Portal @target="app-skip-links">
         <a href="#sub-content">Skip to subcontent</a>
       </Portal>
       from within your template
-    --}}
-    <PortalTarget
-      @name="app-after-skip-links"
-      @multiple={{true}}
-    ></PortalTarget>
-  </div>
+    }}
+      <PortalTarget @name='app-after-skip-links' @multiple={{true}} />
+    </div>
 
-  <ModalLayer />
+    <ModalLayer />
 
-  <input
-    type="checkbox"
-    id={{concat guid "-main-nav-toggle"}}
-  />
-  <header
-    role="banner"
-  >
-    <label
-      tabindex="0"
-      for={{concat guid "-main-nav-toggle"}}
-      aria-label={{t 'components.app.toggle_menu'}}
-      {{on "keypress" this.keypressClick}}
-      {{on "mouseup" this.unfocus}}
-    ></label>
-      {{yield exported to="home-nav"}}
-      <div
-        data-test-navigation
-      >
-{{!--
+    <input type='checkbox' id={{concat guid '-main-nav-toggle'}} />
+    <header role='banner'>
+      <label
+        tabindex='0'
+        for={{concat guid '-main-nav-toggle'}}
+        aria-label={{t 'components.app.toggle_menu'}}
+        {{on 'keypress' this.keypressClick}}
+        {{on 'mouseup' this.unfocus}}
+      ></label>
+      {{yield exported to='home-nav'}}
+      <div data-test-navigation>
+        {{!
   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
---}}
+}}
         <nav
           aria-label={{t 'components.app.main'}}
           class={{if this.navInViewport 'in-viewport'}}
           {{in-viewport
             onEnter=(set this 'navInViewport' true)
             onExit=(set this 'navInViewport' false)
-            viewportTolerance=(hash top=-10 bottom =-10 left=-10 right=-10)
+            viewportTolerance=(hash top=-10 bottom=-10 left=-10 right=-10)
           }}
         >
-          {{yield exported to="main-nav"}}
+          {{yield exported to='main-nav'}}
         </nav>
-{{!--
+        {{!
   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.
---}}
+}}
         <nav aria-label={{t 'components.app.complementary'}}>
-          {{yield exported to="complementary-nav"}}
+          {{yield exported to='complementary-nav'}}
         </nav>
 
       </div>
-  </header>
-  <main id={{concat guid '-main'}}>
-    <div class="notifications">
-      {{yield exported to="notifications"}}
-      <PortalTarget
-        @name="app-notifications"
-        @multiple={{true}}
-      ></PortalTarget>
-    </div>
-    {{yield exported to="main"}}
-  </main>
-  <footer
-    role="contentinfo"
-    data-test-footer
-  >
-    {{yield exported to="content-info"}}
-  </footer>
-</div>
+    </header>
+    <main id={{concat guid '-main'}}>
+      <div class='notifications'>
+        {{yield exported to='notifications'}}
+        <PortalTarget @name='app-notifications' @multiple={{true}} />
+      </div>
+      {{yield exported to='main'}}
+    </main>
+    <footer role='contentinfo' data-test-footer>
+      {{yield exported to='content-info'}}
+    </footer>
+  </div>
 
 {{/let}}
@@ -6,41 +6,39 @@ state: needs-love
 # CodeEditor
 
 ```hbs preview-template
-<CodeEditor
-    @readonly={{true}}
-    @name={{concat name "[Rules]"}}
-    @syntax="hcl"
-    @oninput={{noop}}
->
-    <:label>
-    Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
-    </:label>
-    <:content>
-      {"content": "Initial Content"}
-    </:content>
+<CodeEditor @readonly={{true}} @name={{concat name '[Rules]'}} @syntax='hcl' @oninput={{noop}}>
+  <:label>
+    Rules
+    <a
+      href='{{env "CONSUL_DOCS_URL"}}/guides/acl.html#rule-specification'
+      rel='help noopener noreferrer'
+      target='_blank'
+    >(HCL Format)</a>
+  </:label>
+  <:content>
+    {"content": "Initial Content"}
+  </:content>
 </CodeEditor>
 ```
 
 A code-editor with syntax highlighting supporting multiple languages (JSON, HCL, YAML), validation and simple tools such as "Copy to clipboard"
 
-
 ### Arguments
 
-| Argument | Type | Default | Description |
-| --- | --- | --- | --- |
-| `readonly` | `Boolean` | false | If true, the content (value) of the CodeEditor cannot be changed by the user |
-| `name` | `String` |  | The name attribute of the form element |
-| `syntax` | `String` |  | Identifies the language used to validate/syntax highlight the code (possible values: hcl, json, yaml) |
-| `oninput` | `Action` | noop | Action/callback that is triggered when the user inputs data |
+| Argument   | Type      | Default | Description                                                                                           |
+| ---------- | --------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `readonly` | `Boolean` | false   | If true, the content (value) of the CodeEditor cannot be changed by the user                          |
+| `name`     | `String`  |         | The name attribute of the form element                                                                |
+| `syntax`   | `String`  |         | Identifies the language used to validate/syntax highlight the code (possible values: hcl, json, yaml) |
+| `oninput`  | `Action`  | noop    | Action/callback that is triggered when the user inputs data                                           |
 
 ### Named Blocks
 
-| Name | Description | Behaviour if empty |
-| --- | --- | --- |
-| `:label` | Used to define the title that's displayed on the left inside the toolbar above the CodeEditor | Nothing is displayed |
-| `:tools` | Used to define tools, buttons, widgets that will be displayed on the right inside the toolbar above the CodeEditor | By default it renders a `language selector` dropdown (if `readonly`== false and `syntax` is falsy) and a `CopyButton`
-| `:content` | Used to display specific content such as code templates inside the CodeEditor | if the block is defined, @value will be displayed instead |
-
+| Name       | Description                                                                                                        | Behaviour if empty                                                                                                          |
+| ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| `:label`   | Used to define the title that's displayed on the left inside the toolbar above the CodeEditor                      | Nothing is displayed                                                                                                        |
+| `:tools`   | Used to define tools, buttons, widgets that will be displayed on the right inside the toolbar above the CodeEditor | By default it renders a `language selector` dropdown (if `readonly`== false and `syntax` is falsy) and a `ConsulCopyButton` |
+| `:content` | Used to display specific content such as code templates inside the CodeEditor                                      | if the block is defined, @value will be displayed instead                                                                   |
 
 ### See