From f9cd1c331f878eb674109d2e0e2c2a2f35c07b21 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Wed, 17 Apr 2024 12:39:34 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20show=20associated=20alia?=
 =?UTF-8?q?ses=20in=20target=20detail=20page=20(#2249)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 show associated aliases in target detail page
---
 addons/core/translations/resources/en-us.yaml |  1 +
 .../acceptance/host-catalogs/delete-test.js   |  1 -
 ui/desktop/app/styles/app.scss                |  8 ++++++++
 .../scopes/scope/projects/targets/target.hbs  | 19 +++++++++++++++++++
 .../projects/targets/target-test.js           | 11 +++++++++++
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 6caea4291..26c8421e0 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -1014,6 +1014,7 @@ alias:
   title: Alias
   title_plural: Aliases
   description: An Alias is a DNS-like string associated with a destination resource.
+  details: Alias Details
   titles:
     new: New Alias
     resource_id: Resource ID
diff --git a/ui/admin/tests/acceptance/host-catalogs/delete-test.js b/ui/admin/tests/acceptance/host-catalogs/delete-test.js
index f794bad64..5dd54fe72 100644
--- a/ui/admin/tests/acceptance/host-catalogs/delete-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/delete-test.js
@@ -67,7 +67,6 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
 
   test('can delete host catalog', async function (assert) {
     const hostCatalogCount = getHostCatalogCount();
-    console.log(hostCatalogCount);
 
     await visit(urls.hostCatalogs);
     await click(`[href="${urls.hostCatalog}"]`);
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index ff13cc47e..abb7e3111 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -486,6 +486,14 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     margin-bottom: 2.25rem;
   }
 
+  &.aliases {
+    .rose-metadata-list {
+      &.vertical {
+        row-gap: 0.1rem;
+      }
+    }
+  }
+
   .title {
     color: var(--token-color-palette-neutral-600);
     margin-bottom: 0.75rem;
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
index d413b9c53..c402ab5b9 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
@@ -48,6 +48,25 @@
         </Hds::ApplicationState>
       </bc.Body>
       <bc.Sidebar>
+        <div class='details-sidebar aliases'>
+          <div
+            class='title hds-typography-display-200 hds-font-weight-semibold'
+          >
+            {{t 'resources.alias.details'}}
+          </div>
+          <Rose::MetadataList @orientation='vertical' as |list|>
+            {{#each @model.target.aliases as |alias|}}
+              <list.Item @color='faint'>
+                <Hds::Copy::Snippet
+                  @textToCopy={{alias.value}}
+                  @color='secondary'
+                />
+              </list.Item>
+
+            {{/each}}
+
+          </Rose::MetadataList>
+        </div>
         <div class='details-sidebar'>
           <div>
             <div
diff --git a/ui/desktop/tests/acceptance/projects/targets/target-test.js b/ui/desktop/tests/acceptance/projects/targets/target-test.js
index cb9fbe08a..11f566d63 100644
--- a/ui/desktop/tests/acceptance/projects/targets/target-test.js
+++ b/ui/desktop/tests/acceptance/projects/targets/target-test.js
@@ -264,6 +264,17 @@ module('Acceptance | projects | targets | target', function (hooks) {
     assert.strictEqual(currentURL(), urls.targetWithOneHost);
   });
 
+  test('user can visit target details and see the associated aliases', async function (assert) {
+    instances.targetWithOneHost.update({
+      aliases: [{ id: 123, val: 'value' }],
+    });
+    await visit(urls.targets);
+
+    await click(`[href="${urls.targetWithOneHost}"]`);
+
+    assert.strictEqual(currentURL(), urls.targetWithOneHost);
+    assert.dom('.aliases').exists();
+  });
   test('user can connect to a target without read permissions for host-set', async function (assert) {
     assert.expect(1);
     this.server.get('/host-sets/:id', () => new Response(403));