From eb4ec5f6de97b6e20612b773a6d8da4a893b3e96 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Thu, 4 Apr 2024 15:54:23 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20update=20Dropdown=20?=
 =?UTF-8?q?component=20to=20have=20name=20&=20toggleText=20(#2218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 update Dropdown component to have name & toggleText

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13336

* test: 💍 remove hds class selector

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13336
---
 .../core/addon/components/dropdown/index.hbs  |  4 +--
 .../components/dropdown/index-test.js         | 30 ++++++++++++-------
 .../scopes/scope/credential-stores/index.hbs  |  3 +-
 .../templates/scopes/scope/sessions/index.hbs |  9 ++++--
 .../templates/scopes/scope/targets/index.hbs  |  6 ++--
 .../acceptance/credential-store/list-test.js  |  2 +-
 .../tests/acceptance/sessions/list-test.js    | 12 ++++----
 .../tests/acceptance/targets/list-test.js     |  8 ++---
 .../scopes/scope/projects/sessions/index.hbs  |  9 ++++--
 .../scopes/scope/projects/targets/index.hbs   |  9 ++++--
 10 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/addons/core/addon/components/dropdown/index.hbs b/addons/core/addon/components/dropdown/index.hbs
index a17ef41b9..e48b0dee4 100644
--- a/addons/core/addon/components/dropdown/index.hbs
+++ b/addons/core/addon/components/dropdown/index.hbs
@@ -4,15 +4,15 @@
 }}
 
 <Hds::Dropdown
+  ...attributes
   @height='314px'
   @onClose={{this.close}}
   @listPosition={{@listPosition}}
-  name={{@name}}
   as |DD|
 >
   <DD.ToggleButton
     @color='secondary'
-    @text={{@name}}
+    @text={{@toggleText}}
     @count={{@checkedItems.length}}
     {{on 'click' this.open}}
   />
diff --git a/addons/core/tests/integration/components/dropdown/index-test.js b/addons/core/tests/integration/components/dropdown/index-test.js
index 13f6a6656..62ee9f84a 100644
--- a/addons/core/tests/integration/components/dropdown/index-test.js
+++ b/addons/core/tests/integration/components/dropdown/index-test.js
@@ -23,17 +23,19 @@ module('Integration | Component | dropdown/index', function (hooks) {
     name: 'Fake Project',
     displayName: 'Fake Project',
   };
-  const name = 'Click Me';
+  const name = 'test';
+  const toggleText = 'Click Me';
 
   const FIRST_ITEM_SELECTOR = `[data-test-checkbox="${firstItem.id}"]`;
   const SECOND_ITEM_SELECTOR = `[data-test-checkbox="${secondItem.id}"]`;
-  const TOGGLE_DROPDOWN_SELECTOR = '.hds-dropdown-toggle-button';
+  const TOGGLE_DROPDOWN_SELECTOR = `[name=${name}] button`;
   const SEARCH_INPUT_SELECTOR = '[data-test-dropdown-search]';
-  const COUNT_SELECTOR = '.hds-dropdown-toggle-button__count';
-  const ITEM_SELECTOR = '.hds-dropdown-list-item';
+  const COUNT_SELECTOR = `[name=${name}] button div:nth-child(2)`;
+  const ITEM_SELECTOR = 'li';
 
   hooks.beforeEach(function () {
     this.set('name', name);
+    this.set('toggleText', toggleText);
     this.set('array', [firstItem, secondItem]);
     this.set('checkedItems', [firstItem.id]);
     this.set('applyFilter', () => {});
@@ -41,14 +43,15 @@ module('Integration | Component | dropdown/index', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`<Dropdown
-  @name={{this.name}}
+  name={{this.name}}
+  @toggleText={{this.toggleText}}
   @itemOptions={{this.array}}
   @checkedItems={{this.checkedItems}}
   @applyFilter={{this.applyFilter}}
 />`);
     await click(TOGGLE_DROPDOWN_SELECTOR);
 
-    assert.dom('.hds-dropdown-toggle-button__text').hasText(name);
+    assert.dom(TOGGLE_DROPDOWN_SELECTOR).includesText(toggleText);
     assert.dom(FIRST_ITEM_SELECTOR).isVisible();
     assert.dom(FIRST_ITEM_SELECTOR).isChecked();
     assert.dom(SECOND_ITEM_SELECTOR).isVisible();
@@ -58,7 +61,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
 
   test('it renders a search input when isSearchable is true', async function (assert) {
     await render(hbs`<Dropdown
-  @name={{this.name}}
+  name={{this.name}}
+  @toggleText={{this.toggleText}}
   @itemOptions={{this.array}}
   @checkedItems={{this.checkedItems}}
   @applyFilter={{this.applyFilter}}
@@ -71,7 +75,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
 
   test('it renders the correct count of checked items', async function (assert) {
     await render(hbs`<Dropdown
-  @name={{this.name}}
+  name={{this.name}}
+  @toggleText={{this.toggleText}}
   @itemOptions={{this.array}}
   @checkedItems={{this.checkedItems}}
   @applyFilter={{this.applyFilter}}
@@ -87,7 +92,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
     });
 
     await render(hbs`<Dropdown
-  @name={{this.name}}
+  name={{this.name}}
+  @toggleText={{this.toggleText}}
   @itemOptions={{this.array}}
   @checkedItems={{this.checkedItems}}
   @applyFilter={{this.applyFilter}}
@@ -102,7 +108,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
     this.set('checkedItems', []);
 
     await render(hbs`<Dropdown
-  @name={{this.name}}
+  name={{this.name}}
+  @toggleText={{this.toggleText}}
   @itemOptions={{this.array}}
   @checkedItems={{this.checkedItems}}
   @applyFilter={{this.applyFilter}}
@@ -128,7 +135,8 @@ module('Integration | Component | dropdown/index', function (hooks) {
     );
 
     await render(hbs`<Dropdown
-  @name={{this.name}}
+  name={{this.name}}
+  @toggleText={{this.toggleText}}
   @itemOptions={{this.itemOptions}}
   @checkedItems={{this.checkedItems}}
   @applyFilter={{this.applyFilter}}
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
index c1b8545bd..8a1ab57e3 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/index.hbs
@@ -42,7 +42,8 @@
         />
         <S.Generic>
           <Dropdown
-            @name={{t 'form.type.label'}}
+            name='type'
+            @toggleText={{t 'form.type.label'}}
             @itemOptions={{this.credStoreTypeOptions}}
             @checkedItems={{this.types}}
             @applyFilter={{fn this.applyFilter 'types'}}
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index 827a7570d..528e5ac6e 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -30,7 +30,8 @@
           />
           <S.Generic>
             <Dropdown
-              @name={{t 'resources.user.title'}}
+              name='user'
+              @toggleText={{t 'resources.user.title'}}
               @itemOptions={{@model.associatedUsers}}
               @checkedItems={{this.users}}
               @applyFilter={{fn this.applyFilter 'users'}}
@@ -50,7 +51,8 @@
           </S.Generic>
           <S.Generic>
             <Dropdown
-              @name={{t 'resources.target.title'}}
+              name='target'
+              @toggleText={{t 'resources.target.title'}}
               @itemOptions={{@model.associatedTargets}}
               @checkedItems={{this.targets}}
               @applyFilter={{fn this.applyFilter 'targets'}}
@@ -59,7 +61,8 @@
           </S.Generic>
           <S.Generic>
             <Dropdown
-              @name={{t 'form.status.label'}}
+              name='status'
+              @toggleText={{t 'form.status.label'}}
               @itemOptions={{this.sessionStatusOptions}}
               @checkedItems={{this.status}}
               @applyFilter={{fn this.applyFilter 'status'}}
diff --git a/ui/admin/app/templates/scopes/scope/targets/index.hbs b/ui/admin/app/templates/scopes/scope/targets/index.hbs
index be2bc44e7..b09726036 100644
--- a/ui/admin/app/templates/scopes/scope/targets/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/index.hbs
@@ -40,7 +40,8 @@
         />
         <S.Generic>
           <Dropdown
-            @name={{t 'resources.target.titles.active-sessions'}}
+            name='active-sessions'
+            @toggleText={{t 'resources.target.titles.active-sessions'}}
             @itemOptions={{this.availableSessionOptions}}
             @checkedItems={{this.availableSessions}}
             @applyFilter={{fn this.applyFilter 'availableSessions'}}
@@ -49,7 +50,8 @@
         {{#if (feature-flag 'ssh-target')}}
           <S.Generic>
             <Dropdown
-              @name={{t 'form.type.label'}}
+              name='type'
+              @toggleText={{t 'form.type.label'}}
               @itemOptions={{this.targetTypeOptions}}
               @checkedItems={{this.types}}
               @applyFilter={{fn this.applyFilter 'types'}}
diff --git a/ui/admin/tests/acceptance/credential-store/list-test.js b/ui/admin/tests/acceptance/credential-store/list-test.js
index bc87a063c..6a7278a27 100644
--- a/ui/admin/tests/acceptance/credential-store/list-test.js
+++ b/ui/admin/tests/acceptance/credential-store/list-test.js
@@ -174,7 +174,7 @@ module('Acceptance | credential-stores | list', function (hooks) {
     assert.dom(`[href="${urls.staticCredentialStore}"]`).exists();
     assert.dom(`[href="${urls.vaultCredentialStore}"]`).exists();
 
-    await click(FILTER_DROPDOWN_SELECTOR('Type'));
+    await click(FILTER_DROPDOWN_SELECTOR('type'));
     await click(`input[value="${TYPE_CREDENTIAL_STORE_VAULT}"]`);
     await click(FILTER_APPLY_BUTTON_SELECTOR);
 
diff --git a/ui/admin/tests/acceptance/sessions/list-test.js b/ui/admin/tests/acceptance/sessions/list-test.js
index cf6d46cd2..85b9e9afe 100644
--- a/ui/admin/tests/acceptance/sessions/list-test.js
+++ b/ui/admin/tests/acceptance/sessions/list-test.js
@@ -221,9 +221,9 @@ module('Acceptance | sessions | list', function (hooks) {
     });
 
     await click(`[href="${urls.sessions}"]`);
-    await click(FILTER_TOGGLE_SELECTOR('User'));
+    await click(FILTER_TOGGLE_SELECTOR('user'));
     await click(`input[value="${instances.dev.id}"]`);
-    await click(FILTER_APPLY_BUTTON('User'));
+    await click(FILTER_APPLY_BUTTON('user'));
 
     assert.dom(SESSION_ID_SELECTOR(instances.sessions[2].id)).exists();
     assert.dom('tbody tr').exists({ count: 1 });
@@ -236,9 +236,9 @@ module('Acceptance | sessions | list', function (hooks) {
     });
 
     await click(`[href="${urls.sessions}"]`);
-    await click(FILTER_TOGGLE_SELECTOR('Target'));
+    await click(FILTER_TOGGLE_SELECTOR('target'));
     await click(`input[value="${instances.sshTarget.id}"]`);
-    await click(FILTER_APPLY_BUTTON('Target'));
+    await click(FILTER_APPLY_BUTTON('target'));
 
     assert.dom(SESSION_ID_SELECTOR(instances.sessions[2].id)).exists();
     assert.dom('tbody tr').exists({ count: 1 });
@@ -248,9 +248,9 @@ module('Acceptance | sessions | list', function (hooks) {
     await visit(urls.projectScope);
 
     await click(`[href="${urls.sessions}"]`);
-    await click(FILTER_TOGGLE_SELECTOR('Status'));
+    await click(FILTER_TOGGLE_SELECTOR('status'));
     await click('input[value="active"]');
-    await click(FILTER_APPLY_BUTTON('Status'));
+    await click(FILTER_APPLY_BUTTON('status'));
 
     assert.dom(NO_RESULTS_MSG_SELECTOR).includesText('No results found');
   });
diff --git a/ui/admin/tests/acceptance/targets/list-test.js b/ui/admin/tests/acceptance/targets/list-test.js
index c3bf05be5..d80e4d6e7 100644
--- a/ui/admin/tests/acceptance/targets/list-test.js
+++ b/ui/admin/tests/acceptance/targets/list-test.js
@@ -24,15 +24,15 @@ module('Acceptance | targets | list', function (hooks) {
   const SEARCH_INPUT_SELECTOR = '.search-filtering [type="search"]';
   const NO_RESULTS_MSG_SELECTOR = '[data-test-no-target-results]';
   const TYPE_FILTER_DROPDOWN_SELECTOR =
-    '.search-filtering [name="Type"] button';
+    '.search-filtering [name="type"] button';
   const TCP_TYPE_FILTER_OPTION_SELECTOR =
-    '.search-filtering [name="Type"] [data-test-checkbox="tcp"]';
+    '.search-filtering [name="type"] [data-test-checkbox="tcp"]';
   const FILTER_APPLY_BUTTON_SELECTOR =
     '.search-filtering [data-test-dropdown-apply-button]';
   const ACTIVE_SESSIONS_FILTER_DROPDOWN_SELECTOR =
-    '.search-filtering [name="Active sessions"] button';
+    '.search-filtering [name="active-sessions"] button';
   const YES_FILTER_OPTION_SELECTOR =
-    '.search-filtering [name="Active sessions"] [data-test-checkbox="yes"]';
+    '.search-filtering [name="active-sessions"] [data-test-checkbox="yes"]';
 
   const instances = {
     scopes: {
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index f4106c820..7782a52eb 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -9,7 +9,8 @@
       <Hds::SegmentedGroup as |S|>
         <S.Generic>
           <Dropdown
-            @name={{t 'resources.target.title'}}
+            name='target'
+            @toggleText={{t 'resources.target.title'}}
             @itemOptions={{this.availableTargets}}
             @checkedItems={{this.targets}}
             @applyFilter={{fn this.applyFilter 'targets'}}
@@ -19,7 +20,8 @@
         </S.Generic>
         <S.Generic>
           <Dropdown
-            @name={{t 'form.status.label'}}
+            name='status'
+            @toggleText={{t 'form.status.label'}}
             @itemOptions={{this.sessionStatusOptions}}
             @checkedItems={{this.status}}
             @applyFilter={{fn this.applyFilter 'status'}}
@@ -27,7 +29,8 @@
         </S.Generic>
         <S.Generic>
           <Dropdown
-            @name={{t 'resources.scope.title'}}
+            name='scope'
+            @toggleText={{t 'resources.scope.title'}}
             @itemOptions={{this.availableScopes}}
             @checkedItems={{this.scopes}}
             @applyFilter={{fn this.applyFilter 'scopes'}}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
index f2ac61e1d..1b27913ee 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
@@ -16,7 +16,8 @@
         />
         <S.Generic>
           <Dropdown
-            @name={{t 'resources.target.titles.active-sessions'}}
+            name='active-sessions'
+            @toggleText={{t 'resources.target.titles.active-sessions'}}
             @itemOptions={{this.availableSessionOptions}}
             @checkedItems={{this.availableSessions}}
             @applyFilter={{fn this.applyFilter 'availableSessions'}}
@@ -24,7 +25,8 @@
         </S.Generic>
         <S.Generic>
           <Dropdown
-            @name={{t 'form.type.label'}}
+            name='type'
+            @toggleText={{t 'form.type.label'}}
             @itemOptions={{this.targetTypeOptions}}
             @checkedItems={{this.types}}
             @applyFilter={{fn this.applyFilter 'types'}}
@@ -32,7 +34,8 @@
         </S.Generic>
         <S.Generic>
           <Dropdown
-            @name={{t 'resources.scope.title'}}
+            name='scope'
+            @toggleText={{t 'resources.scope.title'}}
             @itemOptions={{this.availableScopes}}
             @checkedItems={{this.scopes}}
             @applyFilter={{fn this.applyFilter 'scopes'}}