Chore tweak target type content (#1529)

* fix: 🐛 refactor info-field component

Overall context of how the `<InfoField/>` was changed to the correct
order.  Corrected css grid to have the order of
`label,input-field,helper-text`. Also refactored all component instances
affected by the change.

* refactor: 💡 refactor styling for icon to be center

refactor will get the icon as close to center as possible.

* chore: 🤖 ssh type first; update names and descriptions

* chore: 🤖 tweak info field styles

* chore: 🤖 fix formatting/linting issue

* refactor: 💡 credential stylistic changes per PR feedback

* chore: 🤖 reuse configPath

* fix: 🐛 fix lint error

* chore: 🤖 add target type field helper text

Co-authored-by: dvonanderson <devon.anderson@hashicorp.com>

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

@@ -304,11 +304,15 @@ target:
     add-brokered-credential-sources: Add Brokered Credentials
     add-injected-application-credential-sources: Add Injected Application Credentials
   types:
-    tcp: TCP
+    tcp: Generic TCP
     ssh: SSH
   help:
-    tcp: Connections are made over TCP to support a broad range of protocols, including SSH, RDP, databases, and more.  This is the most general-purpose type.
-    ssh: Protocol-aware connections are made over SSH.  Use when requiring SSH connections to remote hosts.
+    tcp: Generic TCP supports a broad range of connection types.
+    ssh: Protocol-aware SSH with support for credential injection.
+  form:
+    type:
+      label: Type
+      help: Target type is the protocol with which end users should connect to this target.  Choose Generic TCP for broad support of common protocols including RDP, K8s, many databases, and more.
   host-source:
     title: Host Source
     title_plural: Host Sources

addons/rose/addon/modifiers/code-mirror.js

@@ -9,8 +9,8 @@ import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/display/autorefresh';
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/lint/json-lint'
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/json-lint';
 
 // Here we define default options for the editor.
 // These should follow the codemirror configuration types

ui/admin/app/components/form/target/details/index.hbs

@@ -43,25 +43,25 @@
 
   {{#if (and @model.isNew (feature-flag 'ssh-target'))}}
     <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.Legend>{{t 'resources.target.form.type.label'}}</G.Legend>
+      <G.HelperText>{{t 'resources.target.form.type.help'}}</G.HelperText>
+      {{#each this.typeMetas as |type|}}
         <G.RadioCard
-          @name={{targetType}}
-          @value={{targetType}}
+          @value={{type.type}}
           @maxWidth='20rem'
-          @checked={{eq targetType @model.type}}
-          {{on 'input' (fn @changeType targetType)}}
+          @checked={{eq type.type @model.type}}
+          {{on 'input' (fn @changeType type.type)}}
           as |R|
         >
-          <R.Label>{{t (concat 'resources.target.types.' targetType)}}</R.Label>
+          <R.Label>{{t (concat 'resources.target.types.' type.type)}}</R.Label>
           <R.Description>{{t
-              (concat 'resources.target.help.' targetType)
+              (concat 'resources.target.help.' type.type)
             }}</R.Description>
-          <R.Icon @name={{icon}} />
+          <R.Icon @name={{type.icon}} />
         </G.RadioCard>
-      {{/each-in}}
+      {{/each}}
     </Hds::Form::RadioCard::Group>
-
+    <br />
   {{else}}
     <InfoField
       @value={{t (concat 'resources.target.types.' @model.type)}}
@@ -69,7 +69,8 @@
       as |F|
     >
       <F.Label>{{t 'form.type.label'}}</F.Label>
-      <F.HelperText>{{t (concat 'resources.target.help.' @model.type)}}
+      <F.HelperText>
+        {{t (concat 'resources.target.help.' @model.type)}}
       </F.HelperText>
     </InfoField>
   {{/if}}

ui/admin/app/components/form/target/details/index.js

@@ -2,7 +2,10 @@ import Component from '@glimmer/component';
 import { types } from 'api/models/target';
 
 //Note: this is a temporary solution till we have resource type helper in place
-const icons = ['network', 'terminal'];
+const icons = {
+  ssh: 'terminal-screen',
+  tcp: 'network',
+};
 
 export default class FormTargetComponent extends Component {
   // =properties
@@ -10,8 +13,12 @@ export default class FormTargetComponent extends Component {
    * maps resource type with icon
    * @type {object}
    */
-  get mapResourceTypeWithIcon() {
-    return types.reduce((obj, type, i) => ({ ...obj, [type]: icons[i] }), {});
+  get typeMetas() {
+    const reversedTypes = [...types].reverse();
+    return reversedTypes.map((type) => ({
+      type,
+      icon: icons[type],
+    }));
   }
 
   /**
@@ -20,10 +27,6 @@ export default class FormTargetComponent extends Component {
    * @type {string}
    */
   get icon() {
-    if (this.args.model.type === 'tcp') {
-      return icons[0];
-    } else {
-      return icons[1];
-    }
+    return icons[this.args.model.type];
   }
 }

ui/admin/app/routes/scopes/scope/targets/new.js

@@ -7,6 +7,7 @@ export default class ScopesScopeTargetsNewRoute extends Route {
 
   @service store;
   @service router;
+  @service features;
 
   // =methods
 
@@ -23,9 +24,13 @@ export default class ScopesScopeTargetsNewRoute extends Route {
    * @return {TargetModel}
    */
 
-  model({ type = 'tcp' }) {
-    const scopeModel = this.modelFor('scopes.scope');
+  model({ type }) {
     let name, description;
+    const scopeModel = this.modelFor('scopes.scope');
+
+    // default type is SSH if the feature is enabled, otherwise TCP
+    if (!type) type = this.features.isEnabled('ssh-target') ? 'ssh' : 'tcp';
+
     if (this.currentModel?.isNew) {
       ({ name, description } = this.currentModel);
       this.currentModel.rollbackAttributes();

ui/admin/tests/acceptance/targets/create-test.js

@@ -77,25 +77,26 @@ module('Acceptance | targets | create', function (hooks) {
     authenticateSession({});
   });
 
-  test('defaults to a new TCP target when no query param provided', async function (assert) {
+  test('defaults to type `ssh` when no query param provided', async function (assert) {
     assert.expect(1);
     await visit(urls.newTarget);
-    assert.strictEqual(find('input[name=tcp]:checked').value, 'tcp');
+    assert.strictEqual(find('[name="type"]:checked').value, 'ssh');
   });
 
-  test('can create new targets of type TCP', async function (assert) {
+  test('can create type `ssh`', async function (assert) {
     assert.expect(4);
     const targetCount = getTargetCount();
-    const tcpTargetCount = getTCPTargetCount();
+    const sshTargetCount = getSSHTargetCount();
     await visit(urls.targets);
 
     await click(`[href="${urls.newTarget}"]`);
+    await click('[value="ssh"]');
     await fillIn('[name="name"]', 'random string');
     await fillIn('[name="worker_filter"]', 'random filter');
     await click('[type="submit"]');
 
+    assert.strictEqual(getSSHTargetCount(), sshTargetCount + 1);
     assert.strictEqual(getTargetCount(), targetCount + 1);
-    assert.strictEqual(getTCPTargetCount(), tcpTargetCount + 1);
     assert.strictEqual(
       this.server.schema.targets.all().models[getTargetCount() - 1].name,
       'random string'
@@ -107,20 +108,20 @@ module('Acceptance | targets | create', function (hooks) {
     );
   });
 
-  test('can create new targets of type SSH', async function (assert) {
+  test('can create type `tcp`', async function (assert) {
     assert.expect(4);
     const targetCount = getTargetCount();
-    const sshTargetCount = getSSHTargetCount();
+    const tcpTargetCount = getTCPTargetCount();
     await visit(urls.targets);
 
     await click(`[href="${urls.newTarget}"]`);
+    await click('[value="tcp"]');
     await fillIn('[name="name"]', 'random string');
-    await click('[value="ssh"]');
     await fillIn('[name="worker_filter"]', 'random filter');
     await click('[type="submit"]');
 
-    assert.strictEqual(getSSHTargetCount(), sshTargetCount + 1);
     assert.strictEqual(getTargetCount(), targetCount + 1);
+    assert.strictEqual(getTCPTargetCount(), tcpTargetCount + 1);
     assert.strictEqual(
       this.server.schema.targets.all().models[getTargetCount() - 1].name,
       'random string'