From 7d3727dc343187ed72685a801b11a1be2018e9f5 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Tue, 13 Dec 2022 17:45:26 -0800
Subject: [PATCH] Radio card migration - hostcatalog hosts host sets (#1503)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 radio card migration
---
 addons/api/addon/models/host-catalog.js       |   5 +-
 addons/api/addon/models/host-set.js           |   4 +-
 addons/core/translations/en-us.yaml           |   1 -
 addons/core/translations/form/en-us.yaml      |   3 +-
 addons/core/translations/resources/en-us.yaml |   4 +-
 .../form/credential/ssh_private_key/index.hbs |   2 +-
 .../credential/username_password/index.hbs    |   2 +-
 .../form/host-catalog/aws/index.hbs           |  91 +++++++---------
 .../components/form/host-catalog/aws/index.js |  16 +++
 .../form/host-catalog/azure/index.hbs         | 102 ++++++++----------
 .../form/host-catalog/azure/index.js          |  20 ++++
 .../form/host-catalog/static/index.hbs        |  89 +++++++--------
 .../form/host-catalog/static/index.js         |  20 ++++
 .../components/form/host-set/aws/index.hbs    |  31 ++----
 .../components/form/host-set/azure/index.hbs  |  31 ++----
 .../app/components/form/host/aws/index.hbs    |  29 ++---
 .../app/components/form/host/azure/index.hbs  |  30 ++----
 .../form/onboarding/choose-path/index.hbs     |  49 +++++----
 .../components/form/target/details/index.hbs  |   2 +-
 .../acceptance/host-catalogs/create-test.js   |  39 +++++--
 .../host-catalogs/host-sets/create-test.js    |   6 +-
 .../host-catalogs/host-sets/update-test.js    |  12 +--
 .../acceptance/onboarding/choose-path-test.js |   8 +-
 .../scope/projects/targets/target/hosts.hbs   |   2 +-
 24 files changed, 308 insertions(+), 290 deletions(-)
 create mode 100644 ui/admin/app/components/form/host-catalog/azure/index.js
 create mode 100644 ui/admin/app/components/form/host-catalog/static/index.js

diff --git a/addons/api/addon/models/host-catalog.js b/addons/api/addon/models/host-catalog.js
index 08e1a7d82..e4b78e95c 100644
--- a/addons/api/addon/models/host-catalog.js
+++ b/addons/api/addon/models/host-catalog.js
@@ -1,6 +1,7 @@
 import GeneratedHostCatalogModel from '../generated/models/host-catalog';
 
-export const types = ['aws', 'azure'];
+export const types = ['static', 'plugin'];
+export const pluginTypes = ['aws', 'azure'];
 
 export default class HostCatalogModel extends GeneratedHostCatalogModel {
   // =attributes
@@ -26,7 +27,7 @@ export default class HostCatalogModel extends GeneratedHostCatalogModel {
    * @type {boolean}
    */
   get isUnknown() {
-    return this.isPlugin && !types.includes(this.plugin?.name);
+    return this.isPlugin && !pluginTypes.includes(this.plugin?.name);
   }
 
   /**
diff --git a/addons/api/addon/models/host-set.js b/addons/api/addon/models/host-set.js
index ed1c0127f..77c3c6c7b 100644
--- a/addons/api/addon/models/host-set.js
+++ b/addons/api/addon/models/host-set.js
@@ -1,5 +1,5 @@
 import GeneratedHostSetModel from '../generated/models/host-set';
-import { types } from './host-catalog';
+import { pluginTypes } from './host-catalog';
 
 export default class HostSetModel extends GeneratedHostSetModel {
   // =attributes
@@ -25,7 +25,7 @@ export default class HostSetModel extends GeneratedHostSetModel {
    * @type {boolean}
    */
   get isUnknown() {
-    return this.isPlugin && !types.includes(this.plugin?.name);
+    return this.isPlugin && !pluginTypes.includes(this.plugin?.name);
   }
 
   /**
diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml
index efa8a811c..35787d6d8 100644
--- a/addons/core/translations/en-us.yaml
+++ b/addons/core/translations/en-us.yaml
@@ -41,7 +41,6 @@ descriptions:
   neither-list-nor-create: You do not have permission to list or create {resource}.
   no-results: We found no matching records.
   choose-a-provider: There are several built-in plugins for the most common providers. You can choose from one of the included plugins or use a custom plugin.
-  choose-a-provider-azure: Boundary does not yet support rotating credentials.
   provider: This is the provider for this host catalog. The format of the host set filters are specific to each provider.
 questions:
   delete-confirm: Are you sure you want to delete this resource?
diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml
index 8a2286444..682bd73f8 100644
--- a/addons/core/translations/form/en-us.yaml
+++ b/addons/core/translations/form/en-us.yaml
@@ -150,6 +150,7 @@ secret:
   help: The client secret value generated by Azure for Boundary to use for authentication.
 disable_credential_rotation:
   label: Disable credential rotation
+  help: Azure host catalogs do not yet support credential rotation.
 dns_names:
   label: Latest DNS Names
 host:
@@ -163,4 +164,4 @@ tags:
   label: Tags
 secret-editor:
   details: This secret is saved but won't be displayed
-  edit: Click to replace this secret
\ No newline at end of file
+  edit: Click to replace this secret
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index b2bfb2a95..46f93a131 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -93,13 +93,13 @@ host-catalog:
     delete: Delete Host Catalog
   help:
     static: Provide a list of hosts and host sets with static addresses
-    dynamic: Automate discovery of target hosts and services on Azure or AWS
+    plugin: Automate discovery of target hosts and services on Azure or AWS
   types:
     static: Static
     unknown: Plugin
     aws: AWS
     azure: Azure
-    dynamic: Dynamic
+    plugin: Dynamic
   form:
     aws_region:
       label: AWS Region
diff --git a/ui/admin/app/components/form/credential/ssh_private_key/index.hbs b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
index f59cd5f9e..bcee4bed2 100644
--- a/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
+++ b/ui/admin/app/components/form/credential/ssh_private_key/index.hbs
@@ -40,7 +40,7 @@
     {{/if}}
   </form.textarea>
   {{#if @model.isNew}}
-    <Hds::Form::RadioCard::Group @name='types' as |G|>
+    <Hds::Form::RadioCard::Group @name='type' as |G|>
       <G.Legend>{{t 'form.type.label'}}</G.Legend>
       {{#each @types as |credentialType|}}
         <G.RadioCard
diff --git a/ui/admin/app/components/form/credential/username_password/index.hbs b/ui/admin/app/components/form/credential/username_password/index.hbs
index 20a7dee8c..b0979a89d 100644
--- a/ui/admin/app/components/form/credential/username_password/index.hbs
+++ b/ui/admin/app/components/form/credential/username_password/index.hbs
@@ -40,7 +40,7 @@
     {{/if}}
   </form.textarea>
   {{#if @model.isNew}}
-    <Hds::Form::RadioCard::Group @name='types' as |G|>
+    <Hds::Form::RadioCard::Group @name='type' as |G|>
       <G.Legend>{{t 'form.type.label'}}</G.Legend>
       {{#each @types as |credentialType|}}
         <G.RadioCard
diff --git a/ui/admin/app/components/form/host-catalog/aws/index.hbs b/ui/admin/app/components/form/host-catalog/aws/index.hbs
index 142ac44fd..601e8f1b7 100644
--- a/ui/admin/app/components/form/host-catalog/aws/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/aws/index.hbs
@@ -44,62 +44,47 @@
   </form.textarea>
 
   {{#if @model.isNew}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:body>
-        <form.radioGroup
-          @name='types'
-          @selectedValue={{@model.type}}
-          @changed={{@changeType}}
-          as |radioGroup|
+
+    <Hds::Form::RadioCard::Group @name='type' as |G|>
+      <G.Legend>{{t 'form.type.label'}}</G.Legend>
+      {{#each this.hostCatalogTypes as |hostCatalogType|}}
+        <G.RadioCard
+          @value={{hostCatalogType}}
+          @maxWidth='20rem'
+          @checked={{eq hostCatalogType @model.type}}
+          {{on 'input' (fn @changeType hostCatalogType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.static'}}
-            @value='static'
-            @helperText={{t 'resources.host-catalog.help.static'}}
-            @layout='wide'
-          />
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.dynamic'}}
-            @value='plugin'
-            @helperText={{t 'resources.host-catalog.help.dynamic'}}
-            @layout='wide'
-          />
-        </form.radioGroup>
-      </:body>
-    </form.fieldset>
+          <R.Label>{{t
+              (concat 'resources.host-catalog.types.' hostCatalogType)
+            }}</R.Label>
+          <R.Description>{{t
+              (concat 'resources.host-catalog.help.' hostCatalogType)
+            }}</R.Description>
+        </G.RadioCard>
+      {{/each}}
+    </Hds::Form::RadioCard::Group>
+    <Hds::Form::RadioCard::Group @name='type' @alignment='center' as |G|>
+      <G.Legend>{{t 'titles.provider'}}</G.Legend>
+      <G.Legend>{{t 'titles.choose-a-provider'}}</G.Legend>
+      <G.HelperText>{{t 'descriptions.choose-a-provider'}}</G.HelperText>
 
-    <Rose::Separator />
-    <form.fieldset>
-      <:title>{{t 'titles.provider'}}</:title>
-    </form.fieldset>
-
-    <form.fieldset>
-      <:title>{{t 'titles.choose-a-provider'}}</:title>
-      <:description>{{t 'descriptions.choose-a-provider'}}</:description>
-
-      <:body>
-        <form.radioGroup
-          @name='provider'
-          @selectedValue={{@model.compositeType}}
-          @changed={{@changeType}}
-          as |radioGroup|
+      {{#each-in this.mapResourceTypeWithIcon as |pluginType icon|}}
+        <G.RadioCard
+          @value={{pluginType}}
+          @maxWidth='20rem'
+          @checked={{eq pluginType @model.compositeType}}
+          {{on 'input' (fn @changeType pluginType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.aws'}}
-            @value='aws'
-            @layout='tile'
-            @icon='flight-icons/svg/aws-color-16'
-          />
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.azure'}}
-            @value='azure'
-            @layout='tile'
-            @icon='flight-icons/svg/azure-color-16'
-          />
-        </form.radioGroup>
-      </:body>
-    </form.fieldset>
+          <R.Label>{{t
+              (concat 'resources.host-catalog.types.' pluginType)
+            }}</R.Label>
+          <R.Icon @name={{icon}} />
+
+        </G.RadioCard>
+      {{/each-in}}
+    </Hds::Form::RadioCard::Group>
   {{else}}
     <InfoField
       @value={{t 'resources.host-catalog.types.aws'}}
diff --git a/ui/admin/app/components/form/host-catalog/aws/index.js b/ui/admin/app/components/form/host-catalog/aws/index.js
index 1d8c7c0f4..5dc24c8e2 100644
--- a/ui/admin/app/components/form/host-catalog/aws/index.js
+++ b/ui/admin/app/components/form/host-catalog/aws/index.js
@@ -1,7 +1,23 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { types, pluginTypes } from 'api/models/host-catalog';
+
+//Note: this is a temporary solution till we have resource type helper in place
+const icons = ['aws-color', 'azure-color'];
 
 export default class FormHostCatalogAwsComponent extends Component {
+  // =properties
+  hostCatalogTypes = types;
+  /**
+   * maps resource type with icon
+   * @type {object}
+   */
+  get mapResourceTypeWithIcon() {
+    return pluginTypes.reduce(
+      (obj, plugin, i) => ({ ...obj, [plugin]: icons[i] }),
+      {}
+    );
+  }
   // =actions
 
   @action
diff --git a/ui/admin/app/components/form/host-catalog/azure/index.hbs b/ui/admin/app/components/form/host-catalog/azure/index.hbs
index a09a3d411..807b18f84 100644
--- a/ui/admin/app/components/form/host-catalog/azure/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/azure/index.hbs
@@ -44,67 +44,47 @@
   </form.textarea>
 
   {{#if @model.isNew}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:body>
-        <form.radioGroup
-          @name='types'
-          @selectedValue={{@model.type}}
-          @changed={{@changeType}}
-          as |radioGroup|
+    <Hds::Form::RadioCard::Group @name='type' as |G|>
+      <G.Legend>{{t 'form.type.label'}}</G.Legend>
+      {{#each this.hostCatalogTypes as |hostCatalogType|}}
+        <G.RadioCard
+          @value={{hostCatalogType}}
+          @maxWidth='20rem'
+          @checked={{eq hostCatalogType @model.type}}
+          {{on 'input' (fn @changeType hostCatalogType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.static'}}
-            @value='static'
-            @helperText={{t 'resources.host-catalog.help.static'}}
-            @layout='wide'
-          />
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.dynamic'}}
-            @value='plugin'
-            @helperText={{t 'resources.host-catalog.help.dynamic'}}
-            @layout='wide'
-          />
-        </form.radioGroup>
-      </:body>
-    </form.fieldset>
-    <Rose::Separator />
-
-    <form.fieldset>
-      <:title>{{t 'titles.provider'}}</:title>
-    </form.fieldset>
-    <form.fieldset>
-      <:title>{{t 'titles.choose-a-provider'}}</:title>
-      <:description>
-        {{concat
+          <R.Label>{{t
+              (concat 'resources.host-catalog.types.' hostCatalogType)
+            }}</R.Label>
+          <R.Description>{{t
+              (concat 'resources.host-catalog.help.' hostCatalogType)
+            }}</R.Description>
+        </G.RadioCard>
+      {{/each}}
+    </Hds::Form::RadioCard::Group>
+    <Hds::Form::RadioCard::Group @name='type' @alignment='center' as |G|>
+      <G.Legend>{{t 'titles.provider'}}</G.Legend>
+      <G.Legend>{{t 'titles.choose-a-provider'}}</G.Legend>
+      <G.HelperText>{{concat
           (t 'descriptions.choose-a-provider')
-          ' '
-          (t 'descriptions.choose-a-provider-azure')
-        }}
-      </:description>
+        }}</G.HelperText>
 
-      <:body>
-        <form.radioGroup
-          @name='provider'
-          @selectedValue={{@model.compositeType}}
-          @changed={{@changeType}}
-          as |radioGroup|
+      {{#each-in this.mapResourceTypeWithIcon as |pluginType icon|}}
+        <G.RadioCard
+          @value={{pluginType}}
+          @maxWidth='20rem'
+          @checked={{eq pluginType @model.compositeType}}
+          {{on 'input' (fn @changeType pluginType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.aws'}}
-            @value='aws'
-            @layout='tile'
-            @icon='flight-icons/svg/aws-color-16'
-          />
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.azure'}}
-            @value='azure'
-            @layout='tile'
-            @icon='flight-icons/svg/azure-color-16'
-          />
-        </form.radioGroup>
-      </:body>
-    </form.fieldset>
+          <R.Label>{{t
+              (concat 'resources.host-catalog.types.' pluginType)
+            }}</R.Label>
+          <R.Icon @name={{icon}} />
+        </G.RadioCard>
+      {{/each-in}}
+    </Hds::Form::RadioCard::Group>
   {{else}}
     <InfoField
       @value={{t 'resources.host-catalog.types.azure'}}
@@ -162,6 +142,14 @@
     readonly={{false}}
   />
 
+  <form.checkbox
+    @name='disable_credential_rotation'
+    @checked={{@model.disable_credential_rotation}}
+    @helperText={{t 'form.disable_credential_rotation.help'}}
+    @label={{t 'form.disable_credential_rotation.label'}}
+    @disabled={{true}}
+  />
+
   {{#if (can 'save model' @model)}}
     <form.actions
       @enableEditText={{t 'actions.edit-form'}}
diff --git a/ui/admin/app/components/form/host-catalog/azure/index.js b/ui/admin/app/components/form/host-catalog/azure/index.js
new file mode 100644
index 000000000..5c8c2b4aa
--- /dev/null
+++ b/ui/admin/app/components/form/host-catalog/azure/index.js
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { types, pluginTypes } from 'api/models/host-catalog';
+
+//Note: this is a temporary solution till we have resource type helper in place
+const icons = ['aws-color', 'azure-color'];
+
+export default class FormAzureHostCatalogAwsComponent extends Component {
+  // =properties
+  hostCatalogTypes = types;
+  /**
+   * maps resource type with icon
+   * @type {object}
+   */
+  get mapResourceTypeWithIcon() {
+    return pluginTypes.reduce(
+      (obj, plugin, i) => ({ ...obj, [plugin]: icons[i] }),
+      {}
+    );
+  }
+}
diff --git a/ui/admin/app/components/form/host-catalog/static/index.hbs b/ui/admin/app/components/form/host-catalog/static/index.hbs
index 2654c6608..3c2245981 100644
--- a/ui/admin/app/components/form/host-catalog/static/index.hbs
+++ b/ui/admin/app/components/form/host-catalog/static/index.hbs
@@ -46,60 +46,51 @@
   </form.textarea>
 
   {{#if @model.isNew}}
-    <form.fieldset>
-      <:title>{{t 'form.type.label'}}</:title>
-      <:body>
-        <form.radioGroup
-          @name='types'
-          @selectedValue={{@model.type}}
-          @changed={{@changeType}}
-          as |radioGroup|
+
+    <Hds::Form::RadioCard::Group @name='type' as |G|>
+      <G.Legend>{{t 'form.type.label'}}</G.Legend>
+      {{#each this.hostCatalogTypes as |hostCatalogType|}}
+        <G.RadioCard
+          @value={{hostCatalogType}}
+          @maxWidth='20rem'
+          @checked={{eq hostCatalogType @model.type}}
+          {{on 'input' (fn @changeType hostCatalogType)}}
+          as |R|
         >
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.static'}}
-            @value='static'
-            @helperText={{t 'resources.host-catalog.help.static'}}
-            @layout='wide'
-          />
-          <radioGroup.card
-            @label={{t 'resources.host-catalog.types.dynamic'}}
-            @value='plugin'
-            @helperText={{t 'resources.host-catalog.help.dynamic'}}
-            @layout='wide'
-          />
-        </form.radioGroup>
-      </:body>
-    </form.fieldset>
+          <R.Label>{{t
+              (concat 'resources.host-catalog.types.' hostCatalogType)
+            }}</R.Label>
+          <R.Description>{{t
+              (concat 'resources.host-catalog.help.' hostCatalogType)
+            }}</R.Description>
+        </G.RadioCard>
+      {{/each}}
+    </Hds::Form::RadioCard::Group>
 
     {{#if @model.isPlugin}}
-      <Rose::Separator />
-      <form.fieldset>
-        <:title>{{t 'titles.provider'}}</:title>
-      </form.fieldset>
 
-      <form.fieldset>
-        <:title>{{t 'titles.choose-a-provider'}}</:title>
-        <:description>{{t 'descriptions.choose-a-provider'}}</:description>
-        <:body>
-          <form.radioGroup
-            @name='provider'
-            @selectedValue={{@model.compositeType}}
-            @changed={{@changeType}}
-            as |radioGroup|
+      <Hds::Form::RadioCard::Group @name='type' as |G|>
+        <G.Legend>{{t 'titles.provider'}}</G.Legend>
+        <G.Legend>{{t 'titles.choose-a-provider'}}</G.Legend>
+        <G.HelperText>{{t 'descriptions.choose-a-provider'}}</G.HelperText>
+
+        {{#each-in this.mapResourceTypeWithIcon as |pluginType|}}
+          <G.RadioCard
+            @value={{pluginType}}
+            @checked={{eq pluginType @model.type}}
+            @maxWidth='20rem'
+            {{on 'input' (fn @changeType pluginType)}}
+            as |R|
           >
-            <radioGroup.card
-              @label={{t 'resources.host-catalog.types.aws'}}
-              @value='aws'
-              @layout='tile'
-            />
-            <radioGroup.card
-              @label={{t 'resources.host-catalog.types.azure'}}
-              @value='azure'
-              @layout='tile'
-            />
-          </form.radioGroup>
-        </:body>
-      </form.fieldset>
+            <R.Label>{{t
+                (concat 'resources.host-catalog.types.' pluginType)
+              }}</R.Label>
+            <R.Description>{{t
+                (concat 'resources.host-catalog.help.' pluginType)
+              }}</R.Description>
+          </G.RadioCard>
+        {{/each-in}}
+      </Hds::Form::RadioCard::Group>
     {{/if}}
   {{/if}}
 
diff --git a/ui/admin/app/components/form/host-catalog/static/index.js b/ui/admin/app/components/form/host-catalog/static/index.js
new file mode 100644
index 000000000..c8f2e50f2
--- /dev/null
+++ b/ui/admin/app/components/form/host-catalog/static/index.js
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { types, pluginTypes } from 'api/models/host-catalog';
+
+//Note: this is a temporary solution till we have resource type helper in place
+const icons = ['aws-color', 'azure-color'];
+
+export default class FormStaticHostCatalogAwsComponent extends Component {
+  // =properties
+  hostCatalogTypes = types;
+  /**
+   * maps resource type with icon
+   * @type {object}
+   */
+  get mapResourceTypeWithIcon() {
+    return pluginTypes.reduce(
+      (obj, plugin, i) => ({ ...obj, [plugin]: icons[i] }),
+      {}
+    );
+  }
+}
diff --git a/ui/admin/app/components/form/host-set/aws/index.hbs b/ui/admin/app/components/form/host-set/aws/index.hbs
index cc131cd79..0f430dabb 100644
--- a/ui/admin/app/components/form/host-set/aws/index.hbs
+++ b/ui/admin/app/components/form/host-set/aws/index.hbs
@@ -53,26 +53,17 @@
     @disabled={{true}}
   />
 
-  <form.fieldset>
-    <:title>{{t 'titles.provider'}}</:title>
-    <:description>{{t 'descriptions.provider'}}</:description>
-
-    <:body>
-      <form.radioGroup
-        @name='provider'
-        @selectedValue={{@model.compositeType}}
-        @disabled={{true}}
-        as |radioGroup|
-      >
-        <radioGroup.card
-          @label={{t 'resources.host-catalog.types.aws'}}
-          @value={{@model.compositeType}}
-          @layout='tile'
-          @icon='flight-icons/svg/aws-color-16'
-        />
-      </form.radioGroup>
-    </:body>
-  </form.fieldset>
+  <InfoField
+    @value={{t 'descriptions.provider'}}
+    @icon='aws-color'
+    disabled={{form.disabled}}
+    as |F|
+  >
+    <F.Label>{{t 'titles.provider'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.host-catalog.types.aws'}}
+    </F.HelperText>
+  </InfoField>
 
   <Rose::Form::Fieldset
     @helperText={{t 'resources.host-set.form.preferred_endpoints.help'}}
diff --git a/ui/admin/app/components/form/host-set/azure/index.hbs b/ui/admin/app/components/form/host-set/azure/index.hbs
index 65071fee4..2bc25171d 100644
--- a/ui/admin/app/components/form/host-set/azure/index.hbs
+++ b/ui/admin/app/components/form/host-set/azure/index.hbs
@@ -53,26 +53,17 @@
     @disabled={{true}}
   />
 
-  <form.fieldset>
-    <:title>{{t 'titles.provider'}}</:title>
-    <:description>{{t 'descriptions.provider'}}</:description>
-
-    <:body>
-      <form.radioGroup
-        @name='provider'
-        @selectedValue={{@model.compositeType}}
-        @disabled={{true}}
-        as |radioGroup|
-      >
-        <radioGroup.card
-          @label={{t 'resources.host-catalog.types.azure'}}
-          @value={{@model.compositeType}}
-          @layout='tile'
-          @icon='flight-icons/svg/azure-color-16'
-        />
-      </form.radioGroup>
-    </:body>
-  </form.fieldset>
+  <InfoField
+    @value={{t 'descriptions.provider'}}
+    @icon='azure-color'
+    disabled={{form.disabled}}
+    as |F|
+  >
+    <F.Label>{{t 'titles.provider'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.host-catalog.types.azure'}}
+    </F.HelperText>
+  </InfoField>
 
   <Rose::Form::Fieldset
     @helperText={{t 'resources.host-set.form.preferred_endpoints.help'}}
diff --git a/ui/admin/app/components/form/host/aws/index.hbs b/ui/admin/app/components/form/host/aws/index.hbs
index 98dd4bcbc..50a44295c 100644
--- a/ui/admin/app/components/form/host/aws/index.hbs
+++ b/ui/admin/app/components/form/host/aws/index.hbs
@@ -52,24 +52,17 @@
     {{/if}}
   </form.textarea>
 
-  <form.fieldset>
-    <:title>{{t 'titles.provider'}}</:title>
-    <:body>
-      <form.radioGroup
-        @name='provider'
-        @selectedValue={{@model.compositeType}}
-        @disabled={{true}}
-        as |radioGroup|
-      >
-        <radioGroup.card
-          @label={{t 'resources.host-catalog.types.aws'}}
-          @value={{@model.compositeType}}
-          @layout='tile'
-          @icon={{concat 'flight-icons/svg/' @model.compositeType '-color-16'}}
-        />
-      </form.radioGroup>
-    </:body>
-  </form.fieldset>
+  <InfoField
+    @value={{t 'descriptions.provider'}}
+    @icon='aws-color'
+    disabled={{form.disabled}}
+    as |F|
+  >
+    <F.Label>{{t 'titles.provider'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.host-catalog.types.aws'}}
+    </F.HelperText>
+  </InfoField>
 
   <form.fieldset>
     <:title>{{t 'form.ip_addresses.label'}}</:title>
diff --git a/ui/admin/app/components/form/host/azure/index.hbs b/ui/admin/app/components/form/host/azure/index.hbs
index c87c94843..348fe2788 100644
--- a/ui/admin/app/components/form/host/azure/index.hbs
+++ b/ui/admin/app/components/form/host/azure/index.hbs
@@ -52,25 +52,17 @@
     {{/if}}
   </form.textarea>
 
-  <form.fieldset>
-    <:title>{{t 'titles.provider'}}</:title>
-    <:body>
-      <form.radioGroup
-        @name='provider'
-        @selectedValue={{@model.compositeType}}
-        @disabled={{true}}
-        as |radioGroup|
-      >
-        <radioGroup.card
-          @label={{t 'resources.host-catalog.types.azure'}}
-          @value={{@model.compositeType}}
-          @layout='tile'
-          @icon={{concat 'flight-icons/svg/' @model.compositeType '-color-16'}}
-        />
-      </form.radioGroup>
-    </:body>
-  </form.fieldset>
-
+  <InfoField
+    @value={{t 'descriptions.provider'}}
+    @icon='azure-color'
+    disabled={{form.disabled}}
+    as |F|
+  >
+    <F.Label>{{t 'titles.provider'}}</F.Label>
+    <F.HelperText>
+      {{t 'resources.host-catalog.types.azure'}}
+    </F.HelperText>
+  </InfoField>
   <form.fieldset>
     <:title>{{t 'form.ip_addresses.label'}}</:title>
     <:body>
diff --git a/ui/admin/app/components/form/onboarding/choose-path/index.hbs b/ui/admin/app/components/form/onboarding/choose-path/index.hbs
index 9e91d69e9..1c4a59b96 100644
--- a/ui/admin/app/components/form/onboarding/choose-path/index.hbs
+++ b/ui/admin/app/components/form/onboarding/choose-path/index.hbs
@@ -5,26 +5,33 @@
   @onSubmit={{fn @submit this.path}}
   as |form|
 >
-  <form.radioGroup
-    @name='paths'
-    @selectedValue={{this.path}}
-    @changed={{this.toggleRadio}}
-    as |radioGroup|
-  >
-    <div class='choose-path-cards'>
-      <radioGroup.card
-        @label={{t 'onboarding.quick-start.titles.quick-setup'}}
-        @value='guided'
-        @helperText={{t 'onboarding.quick-start.descriptions.quick-setup'}}
-        @layout='tile'
-      />
-      <radioGroup.card
-        @label={{t 'onboarding.quick-start.titles.manual'}}
-        @value='manual'
-        @helperText={{t 'onboarding.quick-start.descriptions.manual'}}
-        @layout='tile'
-      />
-    </div>
-  </form.radioGroup>
+
+  <Hds::Form::RadioCard::Group @name='path' as |G|>
+    <G.RadioCard
+      @maxWidth='20rem'
+      @checked={{eq this.path 'guided'}}
+      @value='guided'
+      {{on 'input' (fn this.toggleRadio 'guided')}}
+      as |R|
+    >
+      <R.Label>{{t 'onboarding.quick-start.titles.quick-setup'}}</R.Label>
+      <R.Description>{{t
+          'onboarding.quick-start.descriptions.quick-setup'
+        }}</R.Description>
+    </G.RadioCard>
+    <G.RadioCard
+      @maxWidth='20rem'
+      @checked={{eq this.path 'manual'}}
+      @value='manual'
+      {{on 'input' (fn this.toggleRadio 'manual')}}
+      as |R|
+    >
+      <R.Label>{{t 'onboarding.quick-start.titles.manual'}}</R.Label>
+      <R.Description>{{t
+          'onboarding.quick-start.descriptions.manual'
+        }}</R.Description>
+    </G.RadioCard>
+  </Hds::Form::RadioCard::Group>
+
   <form.actions @submitText={{t 'actions.next'}} @showCancel={{false}} />
 </Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/components/form/target/details/index.hbs b/ui/admin/app/components/form/target/details/index.hbs
index fb6c93641..9bdb90a2b 100644
--- a/ui/admin/app/components/form/target/details/index.hbs
+++ b/ui/admin/app/components/form/target/details/index.hbs
@@ -42,7 +42,7 @@
   </form.textarea>
 
   {{#if (and @model.isNew (feature-flag 'ssh-target'))}}
-    <Hds::Form::RadioCard::Group @name='types' @alignment='center' as |G|>
+    <Hds::Form::RadioCard::Group @name='type' @alignment='center' as |G|>
       <G.Legend>{{t 'form.type.label'}}</G.Legend>
       {{#each-in this.mapResourceTypeWithIcon as |targetType icon|}}
         <G.RadioCard
diff --git a/ui/admin/tests/acceptance/host-catalogs/create-test.js b/ui/admin/tests/acceptance/host-catalogs/create-test.js
index e189f5488..4e83f59ab 100644
--- a/ui/admin/tests/acceptance/host-catalogs/create-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/create-test.js
@@ -32,7 +32,8 @@ module('Acceptance | host-catalogs | create', function (hooks) {
     hostCatalog: null,
     newHostCatalog: null,
     newStaticHostCatalog: null,
-    newDynamicHostCatalog: null,
+    newAWSDynamicHostCatalog: null,
+    newAzureDynamicHostCatalog: null,
   };
 
   hooks.beforeEach(function () {
@@ -67,7 +68,8 @@ module('Acceptance | host-catalogs | create', function (hooks) {
     urls.hostCatalog = `${urls.hostCatalogs}/${instances.hostCatalog.id}`;
     urls.newHostCatalog = `${urls.hostCatalogs}/new`;
     urls.newStaticHostCatalog = `${urls.newHostCatalog}?type=static`;
-    urls.newDynamicHostCatalog = `${urls.newHostCatalog}?type=aws`;
+    urls.newAWSDynamicHostCatalog = `${urls.newHostCatalog}?type=aws`;
+    urls.newAzureDynamicHostCatalog = `${urls.newHostCatalog}?type=azure`;
     // Generate resource couner
     gethostCatalogCount = () =>
       this.server.schema.hostCatalogs.all().models.length;
@@ -81,18 +83,29 @@ module('Acceptance | host-catalogs | create', function (hooks) {
     await visit(urls.newStaticHostCatalog);
     await fillIn('[name="name"]', 'random string');
     await fillIn('[name="description"]', 'random string');
-    await fillIn('[name="types"]', 'static');
+    await fillIn('[name="type"]', 'static');
     await click('[type="submit"]');
     assert.strictEqual(gethostCatalogCount(), count + 1);
   });
 
-  test('Users can create new dynamic host catalogs', async function (assert) {
+  test('Users can create new dynamic aws host catalogs with aws provider', async function (assert) {
     assert.expect(1);
     const count = gethostCatalogCount();
-    await visit(urls.newDynamicHostCatalog);
+    await visit(urls.newAWSDynamicHostCatalog);
     await fillIn('[name="name"]', 'random string');
     await fillIn('[name="description"]', 'random string');
-    await fillIn('[name="types"]', 'aws');
+    await fillIn('[name="type"]', 'aws');
+    await click('[type="submit"]');
+    assert.strictEqual(gethostCatalogCount(), count + 1);
+  });
+
+  test('Users can create new dynamic aws host catalogs with azure provider', async function (assert) {
+    assert.expect(1);
+    const count = gethostCatalogCount();
+    await visit(urls.newAzureDynamicHostCatalog);
+    await fillIn('[name="name"]', 'random string');
+    await fillIn('[name="description"]', 'random string');
+    await fillIn('[name="type"]', 'azure');
     await click('[type="submit"]');
     assert.strictEqual(gethostCatalogCount(), count + 1);
   });
@@ -107,10 +120,20 @@ module('Acceptance | host-catalogs | create', function (hooks) {
     assert.strictEqual(gethostCatalogCount(), count);
   });
 
-  test('Users can cancel creation of new dynamic host catalogs', async function (assert) {
+  test('Users can cancel creation of new dynamic host catalogs with AWS provider', async function (assert) {
     assert.expect(2);
     const count = gethostCatalogCount();
-    await visit(urls.newDynamicHostCatalog);
+    await visit(urls.newAWSDynamicHostCatalog);
+    await fillIn('[name="name"]', 'random string');
+    await click('.rose-form-actions [type="button"]');
+    assert.strictEqual(currentURL(), urls.hostCatalogs);
+    assert.strictEqual(gethostCatalogCount(), count);
+  });
+
+  test('Users can cancel creation of new dynamic host catalogs with Azure provider', async function (assert) {
+    assert.expect(2);
+    const count = gethostCatalogCount();
+    await visit(urls.newAzureDynamicHostCatalog);
     await fillIn('[name="name"]', 'random string');
     await click('.rose-form-actions [type="button"]');
     assert.strictEqual(currentURL(), urls.hostCatalogs);
diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js
index 6aa8fe830..cc0c8891e 100644
--- a/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js
@@ -97,9 +97,9 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
     const name = 'aws host set';
     await fillIn('[name="name"]', name);
     await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(2) [title="Add"]');
+    await click('form fieldset:nth-of-type(1) [title="Add"]');
     await fillIn('[name="filters"]', 'filter');
-    await click('form fieldset:nth-of-type(3) [title="Add"]');
+    await click('form fieldset:nth-of-type(2) [title="Add"]');
     await fillIn('[name="sync_interval_seconds"]', 10);
     await click('[type="submit"]');
 
@@ -128,7 +128,7 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) {
     const name = 'azure host set';
     await fillIn('[name="name"]', name);
     await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(2) [title="Add"]');
+    await click('form fieldset:nth-of-type(1) [title="Add"]');
     await fillIn('[name="filter"]', 'filter');
     await fillIn('[name="sync_interval_seconds"]', 10);
     await click('[type="submit"]');
diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js
index 46864ff1c..669ae7425 100644
--- a/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js
@@ -147,20 +147,20 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
     await fillIn('[name="name"]', name);
     // Remove all the preferred endpoints
     await Promise.all(
-      findAll('form fieldset:nth-of-type(2) [title="Remove"]').map((element) =>
+      findAll('form fieldset:nth-of-type(1) [title="Remove"]').map((element) =>
         click(element)
       )
     );
     await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(2) [title="Add"]');
+    await click('form fieldset:nth-of-type(1) [title="Add"]');
     // Remove all the filters
     await Promise.all(
-      findAll('form fieldset:nth-of-type(3) [title="Remove"]').map((element) =>
+      findAll('form fieldset:nth-of-type(2) [title="Remove"]').map((element) =>
         click(element)
       )
     );
     await fillIn('[name="filters"]', 'filter');
-    await click('form fieldset:nth-of-type(3) [title="Add"]');
+    await click('form fieldset:nth-of-type(2) [title="Add"]');
     await fillIn('[name="sync_interval_seconds"]', 10);
     await click('.rose-form-actions [type="submit"]');
 
@@ -198,12 +198,12 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) {
     await fillIn('[name="name"]', name);
     // Remove all the preferred endpoints
     await Promise.all(
-      findAll('form fieldset:nth-of-type(2) [title="Remove"]').map((element) =>
+      findAll('form fieldset:nth-of-type(1) [title="Remove"]').map((element) =>
         click(element)
       )
     );
     await fillIn('[name="preferred_endpoints"]', 'endpoint');
-    await click('form fieldset:nth-of-type(2) [title="Add"]');
+    await click('form fieldset:nth-of-type(1) [title="Add"]');
     await fillIn('[name="filter"]', 'filter');
     await fillIn('[name="sync_interval_seconds"]', 10);
     await click('.rose-form-actions [type="submit"]');
diff --git a/ui/admin/tests/acceptance/onboarding/choose-path-test.js b/ui/admin/tests/acceptance/onboarding/choose-path-test.js
index 7c4226850..836892631 100644
--- a/ui/admin/tests/acceptance/onboarding/choose-path-test.js
+++ b/ui/admin/tests/acceptance/onboarding/choose-path-test.js
@@ -21,15 +21,15 @@ module('Acceptance | onboarding | choose-path', function (hooks) {
   test('defaults to the guided path', async function (assert) {
     assert.expect(2);
     await visit(urls.choosePath);
-    assert.strictEqual(find('input[name=paths]:checked').value, 'guided');
+    assert.strictEqual(find('input[name=path]:checked').value, 'guided');
     assert.false(find('input[value=manual]').checked);
   });
 
   test('updates to the manual path when manual card clicked', async function (assert) {
     assert.expect(2);
     await visit(urls.choosePath);
-    await click('[name="paths"][value="manual"]');
-    assert.strictEqual(find('input[name=paths]:checked').value, 'manual');
+    await click('[name="path"][value="manual"]');
+    assert.strictEqual(find('input[name=path]:checked').value, 'manual');
     assert.false(find('input[value=guided]').checked);
   });
 
@@ -43,7 +43,7 @@ module('Acceptance | onboarding | choose-path', function (hooks) {
   test('guided path directs user to /global/new route', async function (assert) {
     assert.expect(1);
     await visit(urls.choosePath);
-    await click('[name="paths"][value="manual"]');
+    await click('[name="path"][value="manual"]');
     await click('[type="submit"]');
     assert.strictEqual(currentURL(), urls.newOrg);
   });
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
index 56ee4d216..33d9fe558 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target/hosts.hbs
@@ -30,7 +30,7 @@
             {{#if host.isStatic}}
               {{host.address}}
             {{else}}
-              <Hds::Badge @text={{t 'resources.host-catalog.types.dynamic'}} />
+              <Hds::Badge @text={{t 'resources.host-catalog.types.plugin'}} />
             {{/if}}
           </row.cell>
           <row.cell>