feat: 🎸 show associated aliases in target detail page (#2249)

* feat: 🎸 show associated aliases in target detail page

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}"]`);

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;

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

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));