refactor: 💡 update Dropdown component to have name & toggleText (#2218)

* 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

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'}}

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'}}

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'}}

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);
 

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');
   });

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: {