From 85c8ea475ae5aa7e26261633be4b6186c4f68d3d Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Thu, 22 Aug 2024 14:58:58 -0500
Subject: [PATCH] UI: bump HDS to 4.7.0 (#28151)

* update HDS to 4.7 and flight icons to 5.1.3

* Update input with HDS
---
 ui/app/components/clients/date-range.hbs      | 26 +++++++------
 ui/package.json                               |  4 +-
 .../components/confirm-action-test.js         | 22 ++++-------
 ui/yarn.lock                                  | 39 ++++++++++---------
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/ui/app/components/clients/date-range.hbs b/ui/app/components/clients/date-range.hbs
index b3ef8489ea..8e86b82dbd 100644
--- a/ui/app/components/clients/date-range.hbs
+++ b/ui/app/components/clients/date-range.hbs
@@ -51,30 +51,32 @@
         </p>
         <div class="clients-date-range-display">
           <div>
-            <Hds::Form::Label for="start-month">Start</Hds::Form::Label>
-            <input
-              class="hds-form-text-input"
-              type="month"
-              value={{this.startDate}}
+            <Hds::Form::TextInput::Field
+              @type="month"
+              @value={{this.startDate}}
               max={{this.currentMonth}}
               id="start-month"
               name="start"
               {{on "change" this.updateDate}}
               data-test-date-edit="start"
-            />
+              as |F|
+            >
+              <F.Label>Start</F.Label>
+            </Hds::Form::TextInput::Field>
           </div>
           <div>
-            <Hds::Form::Label for="end-month">End</Hds::Form::Label>
-            <input
-              class="hds-form-text-input"
-              type="month"
-              value={{this.endDate}}
+            <Hds::Form::TextInput::Field
+              @type="month"
+              @value={{this.endDate}}
               max={{this.currentMonth}}
               id="end-month"
               name="end"
               {{on "change" this.updateDate}}
               data-test-date-edit="end"
-            />
+              as |F|
+            >
+              <F.Label>End</F.Label>
+            </Hds::Form::TextInput::Field>
           </div>
           <Hds::Button
             @text="Reset"
diff --git a/ui/package.json b/ui/package.json
index 5860a7c334..c34b5f8a62 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -233,8 +233,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.24.0",
-    "@hashicorp/design-system-components": "^4.6.0",
-    "@hashicorp/ember-flight-icons": "^5.0.1",
+    "@hashicorp/design-system-components": "~4.7.0",
+    "@hashicorp/ember-flight-icons": "^5.1.3",
     "ember-auto-import": "^2.7.2",
     "handlebars": "4.7.7",
     "highlight.js": "^10.4.1",
diff --git a/ui/tests/integration/components/confirm-action-test.js b/ui/tests/integration/components/confirm-action-test.js
index 2bf6bbc492..0883b8e153 100644
--- a/ui/tests/integration/components/confirm-action-test.js
+++ b/ui/tests/integration/components/confirm-action-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, find } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
@@ -34,12 +34,9 @@ module('Integration | Component | confirm-action', function (hooks) {
 
     assert.dom(SELECTORS.modalToggle).hasText('DELETE', 'renders button text');
     await click(SELECTORS.modalToggle);
-    // hasClass assertion wasn't working so this is the workaround
-    assert.strictEqual(
-      find('#confirm-action-modal').className,
-      'hds-modal hds-modal--size-small hds-modal--color-critical has-text-left',
-      'renders critical modal color by default'
-    );
+    assert
+      .dom('#confirm-action-modal')
+      .hasClass('hds-modal--color-critical', 'renders critical modal color by default');
     assert.dom(SELECTORS.confirm).hasClass('hds-button--color-critical', 'renders critical confirm button');
     assert.dom(SELECTORS.title).hasText('Are you sure?', 'renders default title');
     assert
@@ -99,23 +96,20 @@ module('Integration | Component | confirm-action', function (hooks) {
   });
 
   test('it renders disabledMessage modal', async function (assert) {
-    this.condition = true;
     await render(hbs`
       <ConfirmAction
         @buttonText="Open!"
         @onConfirmAction={{this.onConfirm}}
         @confirmTitle="Do this?"
         @confirmMessage="Are you really, really sure?"
-        @disabledMessage={{if this.condition "This is the reason you cannot do the thing"}}
+        @disabledMessage="This is the reason you cannot do the thing"
       />
       `);
 
     await click(SELECTORS.modalToggle);
-    assert.strictEqual(
-      find('#confirm-action-modal').className,
-      'hds-modal hds-modal--size-small hds-modal--color-neutral has-text-left',
-      'renders critical modal color by default'
-    );
+    assert
+      .dom('#confirm-action-modal')
+      .hasClass('hds-modal--color-neutral', 'renders neutral modal because disabledMessage is present');
     assert.dom(SELECTORS.title).hasText('Not allowed', 'renders disabled title');
     assert
       .dom(SELECTORS.message)
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 69aac92e1e..960417b5dc 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2458,9 +2458,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hashicorp/design-system-components@npm:^4.6.0":
-  version: 4.6.0
-  resolution: "@hashicorp/design-system-components@npm:4.6.0"
+"@hashicorp/design-system-components@npm:~4.7.0":
+  version: 4.7.0
+  resolution: "@hashicorp/design-system-components@npm:4.7.0"
   dependencies:
     "@ember/render-modifiers": ^2.0.5
     "@ember/string": ^3.1.1
@@ -2468,7 +2468,8 @@ __metadata:
     "@embroider/addon-shim": ^1.8.7
     "@floating-ui/dom": ^1.6.3
     "@hashicorp/design-system-tokens": ^2.1.0
-    "@hashicorp/ember-flight-icons": ^5.1.2
+    "@hashicorp/ember-flight-icons": ^5.1.3
+    "@hashicorp/flight-icons": ^3.5.0
     decorator-transforms: ^1.1.0
     ember-a11y-refocus: ^4.1.0
     ember-cli-sass: ^11.0.1
@@ -2486,33 +2487,33 @@ __metadata:
     tippy.js: ^6.3.7
   peerDependencies:
     ember-source: ^3.28.0 || ^4.0.0 || ^5.3.0
-  checksum: da5b83f03b1ed4d70ba79a011c51e45bd7a1688c95a589bd486ee5f31300a2a6e2d0f47a29e0ecc1f5dc39d1c389ce7ba4f3f2737bf289398a657b2199d0eb9e
+  checksum: 88cafa21f11d761a226d9b065af715d632b1ea38699aac8294d035a7f7ab5518263c894813d0d4dc23f11dea440aaf6e58408531c7bbb3d9b2455a9dc9a9ba5c
   languageName: node
   linkType: hard
 
 "@hashicorp/design-system-tokens@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@hashicorp/design-system-tokens@npm:2.1.0"
-  checksum: 4a30f55691267cb962f6f37733b7dc6e2c4ff09d48576c3844e3c9d8a0765bfa49252fd5c6d94434b30a6f015e0b21cd67571e814986e0457eb5a379c9976964
+  version: 2.2.0
+  resolution: "@hashicorp/design-system-tokens@npm:2.2.0"
+  checksum: 654978be98a94c1f478e472793b9c1b62762bb30f9e0a097c2e1effd4fb2b4619eeef347e39599aea4dd63c451e0f41e698d887827ca2496de83a9e1e1dd8525
   languageName: node
   linkType: hard
 
-"@hashicorp/ember-flight-icons@npm:^5.0.1, @hashicorp/ember-flight-icons@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "@hashicorp/ember-flight-icons@npm:5.1.2"
+"@hashicorp/ember-flight-icons@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "@hashicorp/ember-flight-icons@npm:5.1.3"
   dependencies:
     "@embroider/addon-shim": ^1.8.7
-    "@hashicorp/flight-icons": ^3.4.0
+    "@hashicorp/flight-icons": ^3.5.0
     decorator-transforms: ^1.1.0
     ember-get-config: ^2.1.1
-  checksum: 06bbb7df851070b2094ac40e9c8b3a1a848a77acd336ebfcbb5cba4d8eeecce6e0cdc35f92cf78893ccca721039ef6fba3a30e290ec71426aefc224c85cfd6fc
+  checksum: 62a6f4bcd6f1826afb1d9f3a52e073983ddca402f50217f9a2df20e42df44803d84b5bd7dc512c083e9b81b896f12243f433cbec77236a9010ac8ed183dde5b6
   languageName: node
   linkType: hard
 
-"@hashicorp/flight-icons@npm:^3.4.0":
-  version: 3.4.0
-  resolution: "@hashicorp/flight-icons@npm:3.4.0"
-  checksum: d758637138bcce06f0efa43870e7397ac61dffbe00a5ed09e4eaa585edf343c610ab78a4f4f62e8689e823c655fa21fb5adf49f54cb009fd72d4faca0abe9e10
+"@hashicorp/flight-icons@npm:^3.5.0":
+  version: 3.5.0
+  resolution: "@hashicorp/flight-icons@npm:3.5.0"
+  checksum: a06f6606d4df682d2756eddebf92765b18774cdcc8e2050e440c85cff16126ae72455869b967e2aef15d97a5caf517578d66cf6fc098f1d3564a9deec9a95ebf
   languageName: node
   linkType: hard
 
@@ -19021,8 +19022,8 @@ __metadata:
     "@ember/test-waiters": ^3.1.0
     "@glimmer/component": ^1.1.2
     "@glimmer/tracking": ^1.1.2
-    "@hashicorp/design-system-components": ^4.6.0
-    "@hashicorp/ember-flight-icons": ^5.0.1
+    "@hashicorp/design-system-components": ~4.7.0
+    "@hashicorp/ember-flight-icons": ^5.1.3
     "@icholy/duration": ^5.1.0
     "@lineal-viz/lineal": ^0.5.1
     "@tsconfig/ember": ^2.0.0