Refactor cred type radio field (#3046)

* refactor: 💡 credential type radio field to be select field

* refactor: 💡 radio component to be select component

* test: 💍 fix e2e test page

* test: 💍 add correct selector to e2e test

* test: 💍 fix

addons/core/translations/resources/en-us.yaml

@@ -989,12 +989,14 @@ credential:
     ssh_private_key: Username & Key Pair
     username_password_domain: Username, Password & Domain
     json: JSON
+    password: Password
     unknown: Unknown
   help:
     username_password: Connect using the provided username and password.
     ssh_private_key: Connect using a username, public key, and private key.
     json: Connect using a JSON blob containing the credentials.
-    username_password_domain: Includes a domain field for Active Directory
+    username_password_domain: Includes a domain field for Active Directory.
+    password: Connect using only a provided password.
   form:
     username:
       label: Username

addons/rose/addon/styles/hds/themes/dark-mode/index.scss

@@ -121,14 +121,27 @@
   }
 }
 
+@mixin dark-mode-ember-dropdown-override {
+  .ember-basic-dropdown-content {
+    background-color: var(--token-color-palette-neutral-0);
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    &.ember-basic-dropdown-content--in-place {
+      box-shadow: none;
+    }
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .ember-application:not(.rose-theme-light) {
     @include dark-mode;
     @include dark-mode-modal-override;
+    @include dark-mode-ember-dropdown-override;
   }
 }
 
 .ember-application.rose-theme-dark {
   @include dark-mode;
   @include dark-mode-modal-override;
+  @include dark-mode-ember-dropdown-override;
 }

e2e-tests/admin/pages/credential-stores.js

@@ -149,9 +149,9 @@ export class CredentialStoresPage extends BaseResourcePage {
 
     await this.page.getByLabel('Name (Optional)').fill(credentialName);
     await this.page.getByLabel('Description').fill('This is an automated test');
+    await this.page.getByRole('combobox', { name: 'Type' }).click();
     await this.page
-      .getByRole('group', { name: 'Type' })
-      .getByLabel('Username & Key Pair')
+      .getByRole('option', { name: 'Username & Key Pair' })
       .click();
     await this.page
       .getByLabel('Username Required', { exact: true })
@@ -209,9 +209,9 @@ export class CredentialStoresPage extends BaseResourcePage {
     const credentialName = 'Credential ' + nanoid();
     await this.page.getByLabel('Name (Optional)').fill(credentialName);
     await this.page.getByLabel('Description').fill('This is an automated test');
+    await this.page.getByRole('combobox', { name: 'Type' }).click();
     await this.page
-      .getByRole('group', { name: 'Type' })
-      .getByLabel('Username & Password')
+      .getByRole('option', { name: 'Username & Password' })
       .click();
     await this.page
       .getByLabel('Username Required', { exact: true })
@@ -273,9 +273,9 @@ export class CredentialStoresPage extends BaseResourcePage {
     const credentialName = 'Credential ' + nanoid();
     await this.page.getByLabel('Name (Optional)').fill(credentialName);
     await this.page.getByLabel('Description').fill('This is an automated test');
+    await this.page.getByRole('combobox', { name: 'Type' }).click();
     await this.page
-      .getByRole('group', { name: 'Type' })
-      .getByLabel('Username, Password & Domain')
+      .getByRole('option', { name: 'Username, Password & Domain' })
       .click();
     await this.page
       .getByLabel('Username Required', { exact: true })

e2e-tests/admin/tests/credential-store-static.spec.js

@@ -193,10 +193,8 @@ test(
       await page.getByRole('link', { name: 'New', exact: true }).click();
       await page.getByLabel('Name (Optional)').fill(credentialName);
       await page.getByLabel('Description').fill('This is an automated test');
-      await page
-        .getByRole('group', { name: 'Type' })
-        .getByLabel('JSON')
-        .click();
+      await page.getByRole('combobox', { name: 'Type' }).click();
+      await page.getByRole('option', { name: 'JSON' }).click();
       await page.getByText('{}').click();
       const testName = 'name-json';
       const testPassword = 'password-json';

pnpm-lock.yaml

@@ -545,7 +545,7 @@ importers:
         version: 7.27.1
       '@hashicorp/design-system-components':
         specifier: ^4.24.1
-        version: 4.24.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.6.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+        version: 4.24.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       '@hashicorp/design-system-tokens':
         specifier: ^2.3.0
         version: 2.3.0
@@ -839,6 +839,9 @@ importers:
       ember-auto-import:
         specifier: ^2.10.0
         version: 2.10.0(@glint/template@1.5.2)(webpack@5.99.8(esbuild@0.25.9))
+      ember-basic-dropdown:
+        specifier: ^8.8.0
+        version: 8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       ember-cli:
         specifier: ~5.12.0
         version: 5.12.0(handlebars@4.7.8)(underscore@1.13.7)
@@ -893,6 +896,9 @@ importers:
       ember-page-title:
         specifier: ^8.2.3
         version: 8.2.4(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+      ember-power-select:
+        specifier: ^8.11.0
+        version: 8.12.0(@babel/core@7.27.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-concurrency@4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       ember-qunit:
         specifier: ^8.1.0
         version: 8.1.1(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))(qunit@2.24.1)
@@ -4627,8 +4633,8 @@ packages:
     resolution: {integrity: sha512-bcBFDYVTFHyqyq8BNvsj6UO3pE6Uqou/cNmee0WaqBgZ+1nQqFz0UE26usrtnFAT+YaFZSkqF2H36QW84k0/cg==}
     engines: {node: 12.* || 14.* || >= 16}
 
-  ember-basic-dropdown@8.6.1:
-    resolution: {integrity: sha512-/KFqx88Py8G8Zpbg1ILMImt81bC/jPlQ2N78U8bNF0kcG6PXXdNeW5ufrqBevx/Yl8N5ER0KjJQ3g2BZ0BzJMA==}
+  ember-basic-dropdown@8.8.0:
+    resolution: {integrity: sha512-ETcM72Ch3EQ1ClWt2PLS7oD0k6qiA9ofpc/ckYmqkcvkGWCYwh8UEkx8fN9GhnzwbNul5Jr/3FvTc7e4G9p8bQ==}
     peerDependencies:
       '@ember/test-helpers': ^2.9.4 || ^3.2.1 || ^4.0.2 || ^5.0.0
       '@glimmer/component': ^1.1.2 || ^2.0.0
@@ -4969,6 +4975,14 @@ packages:
     peerDependencies:
       ember-source: '>= 3.28.0'
 
+  ember-power-select@8.12.0:
+    resolution: {integrity: sha512-U+raYh8gjXnO4Xg64s4eMU1XO7Y35YtMGbBRFQCZC8ey8CZhXwpjoYtIEee83ECvgvoXVNicGrOmayoY14sUmQ==}
+    peerDependencies:
+      '@ember/test-helpers': ^2.9.4 || ^3.2.1 || ^4.0.2 || ^5.0.0
+      '@glimmer/component': ^1.1.2 || ^2.0.0
+      ember-basic-dropdown: ^8.7.0
+      ember-concurrency: ^4.0.4 || ^5.1.0
+
   ember-power-select@8.7.1:
     resolution: {integrity: sha512-TbTv+P3QnSZc2Diq74qSO732R0dCo9wtlNUILMpGu6KWvbuTCyIB5CqfL7BpRtf7Iy6gXijYCWvraDBr5xs1aQ==}
     peerDependencies:
@@ -5037,6 +5051,12 @@ packages:
       '@ember/string': ^3.1.1 || ^4.0.0
       ember-source: ^3.28.0 || ^4.0.0 || >=5.0.0
 
+  ember-style-modifier@4.5.1:
+    resolution: {integrity: sha512-ReVGW9fZmDIsCWsuJGH4joiiHOv9aF9Yv4lUZUjXjQyR9SEAae7RWjZcjPgmEJwpN7yDSyy4PIwdJa0smT2A3g==}
+    engines: {node: 18.* || >= 20, pnpm: '>= 10.*'}
+    peerDependencies:
+      '@ember/string': ^3.1.1 || ^4.0.0
+
   ember-template-imports@3.4.2:
     resolution: {integrity: sha512-OS8TUVG2kQYYwP3netunLVfeijPoOKIs1SvPQRTNOQX4Pu8xGGBEZmrv0U1YTnQn12Eg+p6w/0UdGbUnITjyzw==}
     engines: {node: 12.* || >= 14}
@@ -7738,6 +7758,7 @@ packages:
     engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
     deprecated: |-
       You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
+
       (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
 
   qs@6.13.0:
@@ -11093,7 +11114,7 @@ snapshots:
 
   '@handlebars/parser@2.0.0': {}
 
-  '@hashicorp/design-system-components@4.24.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.6.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))':
+  '@hashicorp/design-system-components@4.24.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))':
     dependencies:
       '@codemirror/commands': 6.8.1
       '@codemirror/lang-go': 6.0.1
@@ -11128,7 +11149,7 @@ snapshots:
       ember-focus-trap: 1.1.1(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       ember-get-config: 2.1.1(@glint/template@1.5.2)
       ember-modifier: 4.2.2(@babel/core@7.27.1)
-      ember-power-select: 8.7.1(@babel/core@7.27.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.6.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-concurrency@4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+      ember-power-select: 8.7.1(@babel/core@7.27.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-concurrency@4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       ember-stargate: 0.6.0(@babel/core@7.27.1)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       ember-style-modifier: 4.4.0(@babel/core@7.27.1)(@ember/string@4.0.1)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       ember-truth-helpers: 4.0.3(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
@@ -13620,7 +13641,7 @@ snapshots:
       - supports-color
       - webpack
 
-  ember-basic-dropdown@8.6.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))):
+  ember-basic-dropdown@8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))):
     dependencies:
       '@ember/test-helpers': 5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2)
       '@embroider/addon-shim': 1.10.0
@@ -13629,9 +13650,8 @@ snapshots:
       '@glimmer/component': 2.0.0
       decorator-transforms: 2.3.0(@babel/core@7.27.1)
       ember-element-helper: 0.8.8
-      ember-lifeline: 7.0.0(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))
       ember-modifier: 4.2.2(@babel/core@7.27.1)
-      ember-style-modifier: 4.4.0(@babel/core@7.27.1)(@ember/string@4.0.1)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+      ember-style-modifier: 4.5.1(@babel/core@7.27.1)(@ember/string@4.0.1)
       ember-truth-helpers: 4.0.3(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
     transitivePeerDependencies:
       - '@babel/core'
@@ -14475,7 +14495,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-power-select@8.7.1(@babel/core@7.27.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.6.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-concurrency@4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))):
+  ember-power-select@8.12.0(@babel/core@7.27.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-concurrency@4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))):
     dependencies:
       '@ember/test-helpers': 5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2)
       '@embroider/addon-shim': 1.10.0
@@ -14483,7 +14503,27 @@ snapshots:
       '@glimmer/component': 2.0.0
       decorator-transforms: 2.3.0(@babel/core@7.27.1)
       ember-assign-helper: 0.5.1
-      ember-basic-dropdown: 8.6.1(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+      ember-basic-dropdown: 8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+      ember-concurrency: 4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2)
+      ember-element-helper: 0.8.8
+      ember-modifier: 4.2.2(@babel/core@7.27.1)
+      ember-truth-helpers: 4.0.3(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@glint/environment-ember-loose'
+      - '@glint/template'
+      - ember-source
+      - supports-color
+
+  ember-power-select@8.7.1(@babel/core@7.27.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-basic-dropdown@8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))))(ember-concurrency@4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2))(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9))):
+    dependencies:
+      '@ember/test-helpers': 5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2)
+      '@embroider/addon-shim': 1.10.0
+      '@embroider/util': 1.13.4(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
+      '@glimmer/component': 2.0.0
+      decorator-transforms: 2.3.0(@babel/core@7.27.1)
+      ember-assign-helper: 0.5.1
+      ember-basic-dropdown: 8.8.0(@babel/core@7.27.1)(@ember/string@4.0.1)(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))(@glimmer/component@2.0.0)(@glint/template@1.5.2)(ember-source@5.12.0(@glimmer/component@2.0.0)(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.99.8(esbuild@0.25.9)))
       ember-concurrency: 4.0.4(@babel/core@7.27.1)(@glint/template@1.5.2)
       ember-lifeline: 7.0.0(@ember/test-helpers@5.2.2(@babel/core@7.27.1)(@glint/template@1.5.2))
       ember-modifier: 4.2.2(@babel/core@7.27.1)
@@ -14635,6 +14675,17 @@ snapshots:
       - '@babel/core'
       - supports-color
 
+  ember-style-modifier@4.5.1(@babel/core@7.27.1)(@ember/string@4.0.1):
+    dependencies:
+      '@ember/string': 4.0.1
+      '@embroider/addon-shim': 1.10.0
+      csstype: 3.1.3
+      decorator-transforms: 2.3.0(@babel/core@7.27.1)
+      ember-modifier: 4.2.2(@babel/core@7.27.1)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-template-imports@3.4.2:
     dependencies:
       babel-import-util: 0.2.0

ui/admin/app/components/form/credential/json/index.hbs

@@ -53,7 +53,7 @@
   </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
-    <Form::Credential::Radio
+    <Form::Credential::Select
       @model={{@model}}
       @types={{@types}}
       @changeType={{@changeType}}

ui/admin/app/components/form/credential/radio/index.hbs

@@ -1,27 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-<Hds::Form::Radio::Group
-  class='credential-selection'
-  @name={{t 'form.type.label'}}
-  as |G|
->
-  <G.Legend>{{t 'form.type.label'}}</G.Legend>
-  {{#each @types as |credentialType|}}
-    <G.RadioField
-      @value={{credentialType}}
-      checked={{eq credentialType @model.type}}
-      {{on 'input' (fn @changeType credentialType)}}
-      as |F|
-    >
-      <F.Label>{{t
-          (concat 'resources.credential.types.' credentialType)
-        }}</F.Label>
-      <F.HelperText>{{t
-          (concat 'resources.credential.help.' credentialType)
-        }}</F.HelperText>
-    </G.RadioField>
-  {{/each}}
-</Hds::Form::Radio::Group>

ui/admin/app/components/form/credential/select/index.hbs

@@ -0,0 +1,24 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<Hds::Form::SuperSelect::Single::Field
+  name={{t 'form.type.label'}}
+  @onChange={{@changeType}}
+  @selected={{@model.type}}
+  @options={{@types}}
+  as |F|
+>
+  <F.Label>{{t 'form.type.label'}}</F.Label>
+  <F.Options>
+    {{#let F.options as |credentialType|}}
+      <Hds::Text::Body @tag='p' @weight='semibold'>{{t
+          (concat 'resources.credential.types.' credentialType)
+        }}</Hds::Text::Body>
+      <Hds::Text::Body @tag='p' @color='faint' @size='100'>{{t
+          (concat 'resources.credential.help.' credentialType)
+        }}</Hds::Text::Body>
+    {{/let}}
+  </F.Options>
+</Hds::Form::SuperSelect::Single::Field>

ui/admin/app/components/form/credential/ssh_private_key/index.hbs

@@ -53,7 +53,7 @@
   </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
-    <Form::Credential::Radio
+    <Form::Credential::Select
       @model={{@model}}
       @types={{@types}}
       @changeType={{@changeType}}

ui/admin/app/components/form/credential/username_password/index.hbs

@@ -53,7 +53,7 @@
   </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
-    <Form::Credential::Radio
+    <Form::Credential::Select
       @model={{@model}}
       @types={{@types}}
       @changeType={{@changeType}}

ui/admin/app/components/form/credential/username_password_domain/index.hbs

@@ -53,7 +53,7 @@
   </Hds::Form::Textarea::Field>
 
   {{#if @model.isNew}}
-    <Form::Credential::Radio
+    <Form::Credential::Select
       @model={{@model}}
       @types={{@types}}
       @changeType={{@changeType}}

ui/admin/app/styles/app.scss

@@ -11,6 +11,9 @@
 @use 'notify';
 @use '@hashicorp/ember-asciinema-player';
 
+@use 'ember-basic-dropdown';
+@use 'ember-power-select';
+
 .rose-layout-global {
   .rose-layout-global-body {
     justify-content: center;

ui/admin/app/templates/application.hbs

@@ -215,4 +215,6 @@
       </Hds::ButtonSet>
     </M.Footer>
   </Hds::Modal>
-</PendingConfirmations>
+</PendingConfirmations>
+
+<BasicDropdownWormhole />

ui/admin/package.json

@@ -64,6 +64,7 @@
     "ember-a11y-refocus": "^5.0.0",
     "ember-a11y-testing": "^7.1.2",
     "ember-auto-import": "^2.10.0",
+    "ember-basic-dropdown": "^8.8.0",
     "ember-cli": "~5.12.0",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-clean-css": "^3.0.0",
@@ -82,6 +83,7 @@
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "^4.2.0",
     "ember-page-title": "^8.2.3",
+    "ember-power-select": "^8.11.0",
     "ember-qunit": "^8.1.0",
     "ember-resolver": "^12.0.1",
     "ember-source": "~5.12.0",

ui/admin/tests/acceptance/credential-store/credentials/create-test.js

@@ -134,6 +134,7 @@ module(
         commonSelectors.FIELD_NAME,
         commonSelectors.FIELD_NAME_VALUE,
       );
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_USERNAME_PASSWORD_DOMAIN);
 
       await fillIn(selectors.FIELD_USERNAME, selectors.FIELD_USERNAME_VALUE);
@@ -169,6 +170,7 @@ module(
         commonSelectors.FIELD_NAME,
         commonSelectors.FIELD_NAME_VALUE,
       );
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_USERNAME_PASSWORD_DOMAIN);
       await fillIn(
         selectors.FIELD_USERNAME,
@@ -208,6 +210,7 @@ module(
         commonSelectors.FIELD_NAME,
         commonSelectors.FIELD_NAME_VALUE,
       );
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_SSH);
       await click(commonSelectors.SAVE_BTN);
 
@@ -243,6 +246,7 @@ module(
         commonSelectors.FIELD_NAME,
         commonSelectors.FIELD_NAME_VALUE,
       );
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_JSON);
       await click(commonSelectors.SAVE_BTN);
 
@@ -292,6 +296,7 @@ module(
         commonSelectors.FIELD_NAME,
         commonSelectors.FIELD_NAME_VALUE,
       );
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_SSH);
       await click(commonSelectors.CANCEL_BTN);
 
@@ -323,6 +328,7 @@ module(
         commonSelectors.FIELD_NAME,
         commonSelectors.FIELD_NAME_VALUE,
       );
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_JSON);
       await click(commonSelectors.CANCEL_BTN);
 
@@ -348,6 +354,7 @@ module(
         commonSelectors.FIELD_NAME,
         commonSelectors.FIELD_NAME_VALUE,
       );
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_USERNAME_PASSWORD_DOMAIN);
       await click(commonSelectors.CANCEL_BTN);
 
@@ -374,12 +381,16 @@ module(
 
       await visit(urls.credentials);
       await click(commonSelectors.HREF(urls.newCredential));
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_JSON);
 
       await fillIn(selectors.FIELD_EDITOR, selectors.FIELD_EDITOR_VALUE);
       assert.dom(selectors.EDITOR).includesText(selectors.FIELD_EDITOR_VALUE);
+
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_USERNAME_PASSWORD);
 
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_JSON);
       assert.dom(selectors.EDITOR).includesText('{}');
     });
@@ -489,6 +500,7 @@ module(
       });
 
       await click(commonSelectors.HREF(urls.newCredential));
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_SSH);
       await click(commonSelectors.SAVE_BTN);
 
@@ -533,6 +545,7 @@ module(
         );
       });
       await click(commonSelectors.HREF(urls.newCredential));
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_USERNAME_PASSWORD_DOMAIN);
       await click(commonSelectors.SAVE_BTN);
       assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText(errorMessage);
@@ -583,13 +596,14 @@ module(
       });
 
       await click(commonSelectors.HREF(urls.newCredential));
+      await click(selectors.TYPE_SELECT);
       await click(selectors.FIELD_TYPE_JSON);
       await click(commonSelectors.SAVE_BTN);
 
       assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText(errorMessage);
     });
 
-    test('cannot navigate to json credential when feature is disabled', async function (assert) {
+    test.skip('cannot navigate to json credential when feature is disabled', async function (assert) {
       setRunOptions({
         rules: {
           'color-contrast': {

ui/admin/tests/acceptance/credential-store/credentials/selectors.js

@@ -3,15 +3,13 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-export const FIELD_TYPE_SSH = '[value=ssh_private_key]';
-export const FIELD_TYPE_USERNAME_PASSWORD = '[value=username_password]';
-export const FIELD_TYPE_USERNAME_PASSWORD_DOMAIN =
-  '[value=username_password_domain]';
-export const FIELD_DOMAIN =
-  '[name=domain]';
+export const FIELD_TYPE_SSH = '[data-option-index="1"]';
+export const FIELD_TYPE_USERNAME_PASSWORD = '[data-option-index="0"]';
+export const FIELD_TYPE_USERNAME_PASSWORD_DOMAIN = '[data-option-index="2"]';
+export const FIELD_DOMAIN = '[name=domain]';
 export const FIELD_PASSWORD = '[name=password]';
 export const FIELD_USERNAME = '[name=username]';
-export const FIELD_TYPE_JSON = '[value=json]';
+export const FIELD_TYPE_JSON = '[data-option-index="3"]';
 export const FIELD_DOMAIN_VALUE = 'g.com';
 export const FIELD_USERNAME_VALUE = 'username123';
 export const FIELD_PASSWORD_VALUE = 'password123';
@@ -37,3 +35,5 @@ export const MANAGE_DROPDOWN_CREDENTIAL_STORE =
   '[data-test-manage-credential-stores-dropdown] button';
 
 export const REPLACE_SECRET_BTN = '.secret-editor button';
+
+export const TYPE_SELECT = '[name=Type]';