From 054881dc4ee26f9dc13bc7a977bad0cce272ce24 Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Mon, 17 Apr 2023 13:22:32 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20support=20to=20dis?=
 =?UTF-8?q?play=20external=20name=20for=20dynamic=20hosts=20(#1664)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 Add support to display external name for dynamic hosts

✅ Closes: ICU-8795
---
 addons/api/addon/models/host.js               |  11 ++
 addons/api/mirage/factories/host.js           |  14 +-
 addons/api/mirage/generated/factories/host.js |   1 -
 addons/core/translations/form/en-us.yaml      |   8 ++
 addons/core/translations/resources/en-us.yaml |   1 +
 .../app/components/form/host/aws/index.hbs    | 133 +++++++++++-------
 .../app/components/form/host/azure/index.hbs  | 112 +++++++++------
 .../host-sets/host-set/hosts/index.hbs        |   8 +-
 8 files changed, 183 insertions(+), 105 deletions(-)

diff --git a/addons/api/addon/models/host.js b/addons/api/addon/models/host.js
index 93c9632cb..aa6ab14af 100644
--- a/addons/api/addon/models/host.js
+++ b/addons/api/addon/models/host.js
@@ -29,6 +29,12 @@ export default class HostModel extends GeneratedHostModel {
   })
   external_id;
 
+  @attr('string', {
+    description: 'The external facing name for the plugin based host.',
+    readOnly: true,
+  })
+  external_name;
+
   // Aws specific
   @attr({
     readOnly: true,
@@ -89,4 +95,9 @@ export default class HostModel extends GeneratedHostModel {
       this.plugin = { name: type };
     }
   }
+
+  // Plugin hosts can support an external name
+  get displayName() {
+    return this.name || this.external_name || this.id;
+  }
 }
diff --git a/addons/api/mirage/factories/host.js b/addons/api/mirage/factories/host.js
index 8d07fb4c3..c2abaa1cf 100644
--- a/addons/api/mirage/factories/host.js
+++ b/addons/api/mirage/factories/host.js
@@ -10,7 +10,9 @@ import generateId from '../helpers/id';
 
 export default factory.extend({
   id: () => generateId('h_'),
-
+  name() {
+    if (this.type === 'static') return faker.random.words();
+  },
   type() {
     return this.hostCatalog?.type || factory.attrs.type;
   },
@@ -34,8 +36,16 @@ export default factory.extend({
     }
     return result;
   },
+  // Return external fields only for plugins
   external_id() {
-    return faker.datatype.uuid();
+    if (this.type === 'plugin') {
+      return faker.datatype.uuid();
+    }
+  },
+  external_name(i) {
+    if (this.type === 'plugin') {
+      return `${this.plugin.name} provided name ${i}`;
+    }
   },
   // Only aws plugins have dns_names
   dns_names() {
diff --git a/addons/api/mirage/generated/factories/host.js b/addons/api/mirage/generated/factories/host.js
index 423a520bd..4b3f64498 100644
--- a/addons/api/mirage/generated/factories/host.js
+++ b/addons/api/mirage/generated/factories/host.js
@@ -11,7 +11,6 @@ import { faker } from '@faker-js/faker';
  */
 export default Factory.extend({
   type: 'static',
-  name: () => faker.random.words(),
   description: () => faker.random.words(),
   created_time: () => faker.date.recent(),
   updated_time: () => faker.date.recent(),
diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml
index 3abfd6419..9d76fa1f4 100644
--- a/addons/core/translations/form/en-us.yaml
+++ b/addons/core/translations/form/en-us.yaml
@@ -3,9 +3,15 @@
 
 id:
   label: ID
+external_id:
+  label: External ID
+  help: A read-only ID given by the plugin host catalog provider
 name:
   label: Name
   help: Name for identification purposes
+external_name:
+  label: External Name
+  help: A read-only name given by the plugin host catalog provider
 description:
   label: Description
   help: Description for identification purposes
@@ -153,10 +159,12 @@ disable_credential_rotation:
   help: Azure host catalogs do not yet support credential rotation.
 dns_names:
   label: Latest DNS Names
+  help: Read-only DNS names given by the plugin host catalog provider
 host:
   label: Host
 ip_addresses:
   label: Latest IP Addresses
+  help: Read-only public and private IP addresses given by the plugin host catalog provider
 sync-interval:
   label: Sync Interval
   help: Optional. Number of seconds between the time Boundary syncs hosts in this set.
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 68932b448..f9cba0b87 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -149,6 +149,7 @@ host-set:
 host:
   title: Host
   title_plural: Hosts
+  no_name_title: Unnamed Host
   description: A host is a resource that may be accessed by a Boundary target.
   messages:
     welcome:
diff --git a/ui/admin/app/components/form/host/aws/index.hbs b/ui/admin/app/components/form/host/aws/index.hbs
index 2ca63199f..1b7c4944d 100644
--- a/ui/admin/app/components/form/host/aws/index.hbs
+++ b/ui/admin/app/components/form/host/aws/index.hbs
@@ -11,51 +11,70 @@
   as |form|
 >
 
-  <form.input
+  <Hds::Form::TextInput::Field
     @value={{@model.type}}
-    @label={{t 'form.type.label'}}
-    readonly={{true}}
-    @disabled={{true}}
-  />
-
-  <form.input
-    @name='name'
-    @type='name'
-    @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @error={{@model.errors.name}}
-    @helperText={{t 'form.name.help'}}
-    readonly={{false}}
-    as |field|
+    name='type'
+    disabled={{true}}
+    as |F|
   >
-    {{#if @model.errors.name}}
-      <field.errors as |errors|>
-        {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
+    <F.Label>{{t 'form.type.label'}}</F.Label>
+  </Hds::Form::TextInput::Field>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  {{#if @model.external_name}}
+    <Hds::Form::TextInput::Field
+      @value={{@model.external_name}}
+      @isInvalid={{@model.errors.external_name}}
+      name='external_name'
+      disabled={{true}}
+      as |F|
+    >
+      <F.Label>{{t 'form.external_name.label'}}</F.Label>
+      <F.HelperText>{{t 'form.external_name.help'}}</F.HelperText>
+      {{#if @model.errors.external_name}}
+        <F.Error as |E|>
+          {{#each @model.errors.external_name as |error|}}
+            <E.Message>{{error.message}}</E.Message>
+          {{/each}}
+        </F.Error>
+      {{/if}}
+    </Hds::Form::TextInput::Field>
+  {{/if}}
+
+  <Hds::Form::TextInput::Field
+    @value={{@model.external_id}}
+    @isInvalid={{@model.errors.external_id}}
+    name='external_id'
+    disabled={{true}}
+    as |F|
+  >
+    <F.Label>{{t 'form.external_id.label'}}</F.Label>
+    <F.HelperText>{{t 'form.external_id.help'}}</F.HelperText>
+    {{#if @model.errors.external_id}}
+      <F.Error as |E|>
+        {{#each @model.errors.external_id as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::TextInput::Field>
+
+  <Hds::Form::Textarea::Field
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{true}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <InfoField
     @value={{t 'descriptions.provider'}}
@@ -69,27 +88,33 @@
     </F.HelperText>
   </InfoField>
 
-  <form.fieldset>
-    <:title>{{t 'form.ip_addresses.label'}}</:title>
-    <:body>
-      {{#each @model.ip_addresses as |ip_address|}}
-        <form.input
+  <Hds::Form::Fieldset as |F|>
+    <F.Legend>{{t 'form.ip_addresses.label'}}</F.Legend>
+    <F.HelperText>{{t 'form.ip_addresses.help'}} </F.HelperText>
+    {{#each @model.ip_addresses as |ip_address|}}
+      <F.Control>
+        <Hds::Form::TextInput::Base
           @value={{ip_address}}
-          readonly={{true}}
-          @disabled={{true}}
+          disabled={{true}}
+          @width='unset'
         />
-      {{/each}}
-    </:body>
-  </form.fieldset>
+      </F.Control>
+    {{/each}}
+  </Hds::Form::Fieldset>
 
-  <form.fieldset>
-    <:title>{{t 'form.dns_names.label'}}</:title>
-    <:body>
-      {{#each @model.dns_names as |dns_name|}}
-        <form.input @value={{dns_name}} readonly={{true}} @disabled={{true}} />
-      {{/each}}
-    </:body>
-  </form.fieldset>
+  <Hds::Form::Fieldset as |F|>
+    <F.Legend>{{t 'form.dns_names.label'}}</F.Legend>
+    <F.HelperText>{{t 'form.dns_names.help'}} </F.HelperText>
+    {{#each @model.dns_names as |dns_name|}}
+      <F.Control>
+        <Hds::Form::TextInput::Base
+          @value={{dns_name}}
+          disabled={{true}}
+          @width='unset'
+        />
+      </F.Control>
+    {{/each}}
+  </Hds::Form::Fieldset>
 
   {{#if (can 'save model' @model)}}
     <form.actions
diff --git a/ui/admin/app/components/form/host/azure/index.hbs b/ui/admin/app/components/form/host/azure/index.hbs
index 820ffcc19..46529119b 100644
--- a/ui/admin/app/components/form/host/azure/index.hbs
+++ b/ui/admin/app/components/form/host/azure/index.hbs
@@ -11,51 +11,70 @@
   as |form|
 >
 
-  <form.input
+  <Hds::Form::TextInput::Field
     @value={{@model.type}}
-    @label={{t 'form.type.label'}}
-    readonly={{true}}
-    @disabled={{true}}
-  />
-
-  <form.input
-    @name='name'
-    @type='name'
-    @value={{@model.name}}
-    @label={{t 'form.name.label'}}
-    @error={{@model.errors.name}}
-    @helperText={{t 'form.name.help'}}
-    readonly={{false}}
-    as |field|
+    name='type'
+    disabled={{true}}
+    as |F|
   >
-    {{#if @model.errors.name}}
-      <field.errors as |errors|>
-        {{#each @model.errors.name as |error|}}
-          <errors.message>{{error.message}}</errors.message>
-        {{/each}}
-      </field.errors>
-    {{/if}}
-  </form.input>
+    <F.Label>{{t 'form.type.label'}}</F.Label>
+  </Hds::Form::TextInput::Field>
 
-  <form.textarea
-    @name='description'
-    @type='description'
+  {{#if @model.external_name}}
+    <Hds::Form::TextInput::Field
+      @value={{@model.external_name}}
+      @isInvalid={{@model.errors.external_name}}
+      name='external_name'
+      disabled={{true}}
+      as |F|
+    >
+      <F.Label>{{t 'form.external_name.label'}}</F.Label>
+      <F.HelperText>{{t 'form.external_name.help'}}</F.HelperText>
+      {{#if @model.errors.external_name}}
+        <F.Error as |E|>
+          {{#each @model.errors.external_name as |error|}}
+            <E.Message>{{error.message}}</E.Message>
+          {{/each}}
+        </F.Error>
+      {{/if}}
+    </Hds::Form::TextInput::Field>
+  {{/if}}
+
+  <Hds::Form::TextInput::Field
+    @value={{@model.external_id}}
+    @isInvalid={{@model.errors.external_id}}
+    name='external_id'
+    disabled={{true}}
+    as |F|
+  >
+    <F.Label>{{t 'form.external_id.label'}}</F.Label>
+    <F.HelperText>{{t 'form.external_id.help'}}</F.HelperText>
+    {{#if @model.errors.external_id}}
+      <F.Error as |E|>
+        {{#each @model.errors.external_id as |error|}}
+          <E.Message>{{error.message}}</E.Message>
+        {{/each}}
+      </F.Error>
+    {{/if}}
+  </Hds::Form::TextInput::Field>
+
+  <Hds::Form::Textarea::Field
     @value={{@model.description}}
-    @label={{t 'form.description.label'}}
-    @error={{@model.errors.description}}
-    @helperText={{t 'form.description.help'}}
-    disabled={{@model.isSaving}}
-    readonly={{false}}
-    as |field|
+    @isInvalid={{@model.errors.description}}
+    name='description'
+    disabled={{true}}
+    as |F|
   >
+    <F.Label>{{t 'form.description.label'}}</F.Label>
+    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
     {{#if @model.errors.description}}
-      <field.errors as |errors|>
+      <F.Error as |E|>
         {{#each @model.errors.description as |error|}}
-          <errors.message>{{error.message}}</errors.message>
+          <E.Message>{{error.message}}</E.Message>
         {{/each}}
-      </field.errors>
+      </F.Error>
     {{/if}}
-  </form.textarea>
+  </Hds::Form::Textarea::Field>
 
   <InfoField
     @value={{t 'descriptions.provider'}}
@@ -68,19 +87,20 @@
       {{t 'resources.host-catalog.types.azure'}}
     </F.HelperText>
   </InfoField>
-  <form.fieldset>
-    <:title>{{t 'form.ip_addresses.label'}}</:title>
-    <:body>
-      {{#each @model.ip_addresses as |ip_address|}}
 
-        <form.input
+  <Hds::Form::Fieldset as |F|>
+    <F.Legend>{{t 'form.ip_addresses.label'}}</F.Legend>
+    <F.HelperText>{{t 'form.ip_addresses.help'}} </F.HelperText>
+    {{#each @model.ip_addresses as |ip_address|}}
+      <F.Control>
+        <Hds::Form::TextInput::Base
           @value={{ip_address}}
-          readonly={{true}}
-          @disabled={{true}}
+          disabled={{true}}
+          @width='unset'
         />
-      {{/each}}
-    </:body>
-  </form.fieldset>
+      </F.Control>
+    {{/each}}
+  </Hds::Form::Fieldset>
 
   {{#if (can 'save model' @model)}}
     <form.actions
diff --git a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs
index 1032fb2e3..14fcd6d3d 100644
--- a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs
@@ -31,10 +31,14 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            {{#if @model.hostSet.isStatic}}
+              <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            {{else}}
+              <row.headerCell>{{t 'form.external_name.label'}}</row.headerCell>
+            {{/if}}
             <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
             <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-            {{#if @model.isStatic}}
+            {{#if @model.hostSet.isStatic}}
               <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
             {{/if}}
           </header.row>