Cc 5545: Upgrade HDS packages and modifiers (#19226)

* Upgrade @hashicorp/design-system-tokens to 1.9.0 * Upgrade @hashicorp/design-system-components to 1.8.1 * Upgrade @hashicorp/design-system-components and ember-in-viewport * Explicitly install [email protected] * rename copy-button * Fix how cleanup is done in with-copyable * Update aria-menu modifier for new structure * Update css-prop modifier to new structure * Convert did-upsert to regular class modifier * Update notification modifier for new structure * Update on-oustside modifier for new structure * Move destroy handler registration in with-copyable * Update style modifier for new structure * Update validate modifier for new structure * Guard against setting on destroyed object * Upgrade @hashicorp/design-system-components to 2.14.1 * Remove debugger * Guard against null in aria-menu * Fix undefined hash in validate addon * Upgrade ember-on-resize-modifier * Fix copy button import, missing import and array destructuring --------- Co-authored-by: wenincode <[email protected]>
hashicorp · Oct 17, 2023 · a6c990c · a6c990c
1 parent 9f4f99c
commit a6c990c
Show file tree

Hide file tree

Showing 36 changed files with 525 additions and 308 deletions.
diff --git a/ui/packages/consul-lock-sessions/app/components/consul/lock-session/list/index.hbs b/ui/packages/consul-lock-sessions/app/components/consul/lock-session/list/index.hbs
@@ -14,7 +14,7 @@ as |item index|>
   {{else}}
     <span>
       {{item.ID}}
-      <CopyButton
+      <ConsulCopyButton
         @value={{item.ID}}
         @name="ID"
       />
@@ -28,7 +28,7 @@ as |item index|>
         ID
       </dt>
       <dd>
-        <CopyButton
+        <ConsulCopyButton
           @value={{item.ID}}
           @name="ID"
         />

diff --git a/ui/packages/consul-peerings/app/components/consul/peer/address/list/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/address/list/index.hbs
@@ -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"

diff --git a/ui/packages/consul-ui/app/components/code-editor/README.mdx b/ui/packages/consul-ui/app/components/code-editor/README.mdx
@@ -38,7 +38,7 @@ A code-editor with syntax highlighting supporting multiple languages (JSON, HCL,
 | 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`
+| `: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 |
 
 

diff --git a/ui/packages/consul-ui/app/components/code-editor/index.hbs b/ui/packages/consul-ui/app/components/code-editor/index.hbs
@@ -23,7 +23,7 @@
             {{mode.name}}
           </PowerSelect>
           <div class="toolbar-separator"></div>
-          <CopyButton
+          <ConsulCopyButton
             @value={{value}}
             @name="value"
           />

diff --git a/ui/packages/consul-ui/app/components/code-editor/index.js b/ui/packages/consul-ui/app/components/code-editor/index.js
@@ -36,22 +36,24 @@ export default Component.extend({
     }
   },
   setMode: function (mode) {
-    let options = {
-      ...DEFAULTS,
-      mode: mode.mime,
-      readOnly: this.readonly,
-    };
-    if (mode.name === 'XML') {
-      options.htmlMode = mode.htmlMode;
-      options.matchClosing = mode.matchClosing;
-      options.alignCDATA = mode.alignCDATA;
-    }
-    set(this, 'options', options);
+    if (!this.isDestroying && !this.isDestroyed) {
+      let options = {
+        ...DEFAULTS,
+        mode: mode.mime,
+        readOnly: this.readonly,
+      };
+      if (mode.name === 'XML') {
+        options.htmlMode = mode.htmlMode;
+        options.matchClosing = mode.matchClosing;
+        options.alignCDATA = mode.alignCDATA;
+      }
+      set(this, 'options', options);
 
-    const editor = this.editor;
-    editor.setOption('mode', mode.mime);
-    this.helper.lint(editor, mode.mode);
-    set(this, 'mode', mode);
+      const editor = this.editor;
+      editor.setOption('mode', mode.mime);
+      this.helper.lint(editor, mode.mode);
+      set(this, 'mode', mode);
+    }
   },
   willDestroyElement: function () {
     this._super(...arguments);

diff --git a/...-ui/app/components/copy-button/README.mdx → .../components/consul-copy-button/README.mdx b/...-ui/app/components/copy-button/README.mdx → .../components/consul-copy-button/README.mdx
@@ -1,4 +1,4 @@
-# CopyButton
+# ConsulCopyButton
 
 Button component used for copy-to-clipboard functionality so the user can easily copy specified text to their clipboard, along with tooltip-like notifications so the user has some sort of feedback to know the value has been copied.
 
@@ -10,7 +10,7 @@ Can be used inline to render only a small icon for the button with no other text
 <figure>
   <figcaption>Icon only</figcaption>
 
-  <CopyButton
+  <ConsulCopyButton
     @value={{'stringToCopy'}}
     @name="Thing"
   />
@@ -20,12 +20,12 @@ Can be used inline to render only a small icon for the button with no other text
 <figure>
   <figcaption>Icon and text</figcaption>
 
-  <CopyButton
+  <ConsulCopyButton
     @value={{'stringToCopy'}}
     @name="Thing"
   >
     Copy me!
-  </CopyButton>
+  </ConsulCopyButton>
 </figure>
 ```
 

diff --git a/...pp/components/copy-button/chart.xstate.js → ...onents/consul-copy-button/chart.xstate.js b/...pp/components/copy-button/chart.xstate.js → ...onents/consul-copy-button/chart.xstate.js
diff --git a/...l-ui/app/components/copy-button/index.hbs → ...p/components/consul-copy-button/index.hbs b/...l-ui/app/components/copy-button/index.hbs → ...p/components/consul-copy-button/index.hbs
@@ -14,12 +14,12 @@
 {{#let (fn dispatch 'SUCCESS') (fn dispatch 'ERROR') (fn dispatch 'RESET') as |success error reset|}}
     <button
       {{with-copyable @value success=success error=error}}
-      aria-label={{t 'components.copy-button.title' name=@name}}
+      aria-label={{t 'components.consul-copy-button.title' name=@name}}
       type="button"
       class="copy-btn"
       ...attributes
       {{tooltip
-        (if (state-matches state 'success') (t 'components.copy-button.success' name=@name) (t 'components.copy-button.error'))
+        (if (state-matches state 'success') (t 'components.consul-copy-button.success' name=@name) (t 'components.consul-copy-button.error'))
         options=(hash
           trigger='manual'
           showOnCreate=(not (state-matches state 'idle'))

diff --git a/...ul-ui/app/components/copy-button/index.js → ...pp/components/consul-copy-button/index.js b/...ul-ui/app/components/copy-button/index.js → ...pp/components/consul-copy-button/index.js
@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import chart from './chart.xstate';
 
-export default class CopyButton extends Component {
+export default class ConsulCopyButton extends Component {
   constructor() {
     super(...arguments);
     this.chart = chart;

diff --git a/...-ui/app/components/copy-button/index.scss → .../components/consul-copy-button/index.scss b/...-ui/app/components/copy-button/index.scss → .../components/consul-copy-button/index.scss
diff --git a/...ui/app/components/copy-button/layout.scss → ...components/consul-copy-button/layout.scss b/...ui/app/components/copy-button/layout.scss → ...components/consul-copy-button/layout.scss
diff --git a/...l-ui/app/components/copy-button/skin.scss → ...p/components/consul-copy-button/skin.scss b/...l-ui/app/components/copy-button/skin.scss → ...p/components/consul-copy-button/skin.scss
diff --git a/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.hbs b/ui/packages/consul-ui/app/components/consul/exposed-path/list/index.hbs
@@ -18,7 +18,7 @@
           <span>
             {{combinedAddress}}
           </span>
-          <CopyButton
+          <ConsulCopyButton
             @value={{combinedAddress}}
             @name="Address"
           />

diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs b/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
@@ -47,7 +47,7 @@
           <dt>Output</dt>
           <dd>
               <pre><code>{{item.Output}}</code></pre>
-              <CopyButton @value={{item.Output}} @name="output" />
+              <ConsulCopyButton @value={{item.Output}} @name="output" />
           </dd>
         </dl>
       </div>

diff --git a/ui/packages/consul-ui/app/components/consul/node/list/index.hbs b/ui/packages/consul-ui/app/components/consul/node/list/index.hbs
@@ -43,7 +43,7 @@ as |item index|>
         <span>Address</span>
       </dt>
       <dd>
-        <CopyButton
+        <ConsulCopyButton
           @value={{item.Address}}
           @name="Address"
         />

diff --git a/ui/packages/consul-ui/app/components/consul/token/list/index.hbs b/ui/packages/consul-ui/app/components/consul/token/list/index.hbs
@@ -36,12 +36,12 @@ as |item|>
     </BlockSlot>
     <BlockSlot @name="actions" as |Actions|>
     {{#if item.hasSecretID}}
-      <CopyButton
+      <ConsulCopyButton
         @value={{item.SecretID}}
         @name={{t "components.consul.token.secretID"}}
       >
         {{t "components.consul.token.secretID"}}
-      </CopyButton>
+      </ConsulCopyButton>
     {{/if}}
       <Actions as |Action|>
         <Action data-test-edit-action @href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>

diff --git a/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.hbs
@@ -49,7 +49,7 @@
               Local bind socket path
           </dt>
           <dd>
-            <CopyButton
+            <ConsulCopyButton
               @value={{item.LocalBindSocketPath}}
               @name="Local bind socket path"
             />
@@ -73,7 +73,7 @@
             Address
           </dt>
           <dd>
-            <CopyButton
+            <ConsulCopyButton
               @value={{combinedAddress}}
               @name="Address"
             />

diff --git a/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs b/ui/packages/consul-ui/app/components/consul/upstream/list/index.hbs
@@ -66,7 +66,7 @@ as |item index|>
         Address
       </dt>
       <dd>
-        <CopyButton
+        <ConsulCopyButton
           @value={{address}}
           @name="Address"
         />

diff --git a/ui/packages/consul-ui/app/components/copyable-code/index.hbs b/ui/packages/consul-ui/app/components/copyable-code/index.hbs
@@ -33,15 +33,15 @@
     </disclosure.Details>
   </Disclosure>
 
-  <CopyButton
+  <ConsulCopyButton
     @value={{@value}}
     @name={{@name}}
   />
 
 {{else}}
   <pre><code
   >{{@value}}</code></pre>
-  <CopyButton
+  <ConsulCopyButton
     @value={{@value}}
     @name={{@name}}
   />

diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
@@ -4,27 +4,21 @@
 }}
 
 <@disclosure.Details as |details|>
-  <PagedCollection
-    @items={{or @items (array)}}
-  as |pager|>
+  <PagedCollection @items={{or @items (array)}} as |pager|>
     <div
       {{on-outside 'click' @disclosure.close}}
       {{did-insert pager.viewport}}
       {{on-resize pager.resize}}
       {{css-prop '--paged-row-height' returns=pager.rowHeight}}
       {{css-prop 'max-height' returns=pager.maxHeight}}
       class={{class-map
-        (array 'paged-collection-scroll' (includes pager.type (array 'virtual-scroll' 'native-scroll')))
+        (array
+          'paged-collection-scroll' (includes pager.type (array 'virtual-scroll' 'native-scroll'))
+        )
       }}
       ...attributes
     >
-      {{yield (hash
-        Menu=(component 'menu'
-          disclosure=@disclosure
-          pager=pager
-        )
-      )}}
+      {{yield (hash Menu=(component 'menu' disclosure=@disclosure pager=pager))}}
     </div>
   </PagedCollection>
-</@disclosure.Details>
-
+</@disclosure.Details>
diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx
@@ -19,7 +19,7 @@ to provide a textual tooltip for the icon. Using the `{{tooltip}}` modifier
 with no arguments will make it use the text/DOM content of the DOM element it
 is attached to, see below for a full usage example.
 
-`<CopyButton />` components are commonly added to the value, and can be added
+`<ConsulCopyButton />` components are commonly added to the value, and can be added
 to the left or right of the value.
 
 ```hbs preview-template
@@ -49,7 +49,7 @@ to the left or right of the value.
       TTL
     </dt>
     <dd>
-      <CopyButton
+      <ConsulCopyButton
         @value={{"1m30s10ms"}}
         @name="TTL"
       />
@@ -96,7 +96,7 @@ to the left or right of the value.
     </dt>
     <dd>
       1m30s10ms
-      <CopyButton
+      <ConsulCopyButton
         @value={{"1m30s10ms"}}
         @name="TTL"
       />
@@ -147,7 +147,7 @@ to the left or right of the value.
       TTL
     </dt>
     <dd>
-      <CopyButton
+      <ConsulCopyButton
         @value={{"1m30s10ms"}}
         @name="TTL"
       />

diff --git a/ui/packages/consul-ui/app/components/menu/index.hbs b/ui/packages/consul-ui/app/components/menu/index.hbs
@@ -4,21 +4,22 @@
 }}
 
 <ul
-  role="menu"
+  role='menu'
   style={{{style-map
     (array 'height' (if (and @pager (not-eq @pager.type 'native-scroll')) @pager.totalHeight) 'px')
-    (array '--paged-start' (if (and @pager (not-eq @pager.type 'native-scroll')) @pager.startHeight) 'px')
+    (array
+      '--paged-start' (if (and @pager (not-eq @pager.type 'native-scroll')) @pager.startHeight) 'px'
+    )
   }}}
   {{did-insert (optional @pager.pane)}}
-  {{aria-menu
-    onclose=(or @onclose @disclosure.close)
-    openEvent=(or @event @disclosure.event)
-  }}
+  {{aria-menu onclose=(or @onclose @disclosure.close) openEvent=(or @event @disclosure.event)}}
 >
-  {{yield (hash
-    Action=(component 'menu/action' disclosure=@disclosure)
-    Item=(component 'menu/item')
-    Separator=(component 'menu/separator')
-    items=@pager.items
-  )}}
+  {{yield
+    (hash
+      Action=(component 'menu/action' disclosure=@disclosure)
+      Item=(component 'menu/item')
+      Separator=(component 'menu/separator')
+      items=@pager.items
+    )
+  }}
 </ul>