From 0100f8b49790a5dab5620be86e418c7c67dadc7b Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 9 Aug 2023 11:33:47 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20target=20details?=
 =?UTF-8?q?=20sidebar=20panel=20to=20target=20detail=20page=20(#1832)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-10302
---
 addons/core/translations/resources/en-us.yaml |  1 +
 ui/desktop/app/styles/app.scss                | 19 ++++++++
 .../scopes/scope/projects/targets/target.hbs  | 44 ++++++++++++++++++-
 .../tests/acceptance/projects/targets-test.js |  2 +-
 ui/desktop/tests/acceptance/scopes-test.js    |  2 +-
 5 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index a2d87fec2..538830480 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -524,6 +524,7 @@ target:
   title: Target
   title_plural: Targets
   description: A target is a logical collection of host sets which may be used to initiate sessions.
+  details: Target details
   messages:
     welcome:
       title: Welcome to Targets
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 911120fe3..409f4682f 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -515,3 +515,22 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     margin-right: 1rem;
   }
 }
+
+.target-details-sidebar {
+  background-color: var(--token-color-palette-neutral-50);
+  border-radius: 0.313rem;
+  padding: 1.5rem 2.5rem;
+
+  .title {
+    color: var(--token-color-palette-neutral-600);
+    margin-bottom: 0.75rem;
+  }
+
+  .resource-type {
+    text-transform: capitalize;
+  }
+
+  .copyable-button {
+    background-color: var(--token-color-palette-neutral-50);
+  }
+}
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 22db74c94..1c406bad2 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
@@ -37,7 +37,49 @@
           />
         </Hds::ApplicationState>
       </bc.Body>
-      <bc.Sidebar class='target-details-sidebar'>{{@model.id}}</bc.Sidebar>
+      <bc.Sidebar>
+        <div class='target-details-sidebar'>
+          <div
+            class='title hds-typography-display-200 hds-font-weight-semibold'
+          >
+            {{t 'resources.target.details'}}
+          </div>
+          <Rose::MetadataList @orientation='vertical' as |list|>
+            {{! Target name }}
+            <list.Item @icon='target' @color='faint'>
+              {{@model.name}}
+            </list.Item>
+            {{! Project name }}
+            <list.Item @icon='grid' @color='faint'>
+              {{@model.project.displayName}}
+            </list.Item>
+            {{! Target description }}
+            {{#if @model.description}}
+              <list.Item @icon='message-circle-fill' @color='faint'>
+                {{@model.description}}
+              </list.Item>
+            {{/if}}
+            {{! Target type }}
+            <list.Item class='resource-type' @icon='terminal' @color='faint'>
+              {{#if @model.isSSH}}
+                {{t 'resources.target.types.ssh'}}
+              {{else}}
+                {{t 'resources.target.types.tcp'}}
+              {{/if}}
+            </list.Item>
+            {{! Target ID }}
+            <list.Item @icon='hash' @color='faint'>
+              <Copyable
+                @text={{@model.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                {{@model.id}}
+              </Copyable>
+            </list.Item>
+          </Rose::MetadataList>
+        </div>
+      </bc.Sidebar>
     </Rose::Layout::BodyContent>
   </page.body>
 
diff --git a/ui/desktop/tests/acceptance/projects/targets-test.js b/ui/desktop/tests/acceptance/projects/targets-test.js
index 643475d36..aa04ff91b 100644
--- a/ui/desktop/tests/acceptance/projects/targets-test.js
+++ b/ui/desktop/tests/acceptance/projects/targets-test.js
@@ -178,7 +178,7 @@ module('Acceptance | projects | targets', function (hooks) {
     assert.expect(1);
     await visit(urls.targets);
     await click('tbody tr td span a');
-    assert.strictEqual(currentURL(), urls.sessions);
+    assert.strictEqual(currentURL(), urls.target);
   });
 
   test('visiting empty targets', async function (assert) {
diff --git a/ui/desktop/tests/acceptance/scopes-test.js b/ui/desktop/tests/acceptance/scopes-test.js
index 3b2aa720f..02e13501f 100644
--- a/ui/desktop/tests/acceptance/scopes-test.js
+++ b/ui/desktop/tests/acceptance/scopes-test.js
@@ -231,7 +231,7 @@ module('Acceptance | scopes', function (hooks) {
     assert.expect(1);
     await visit(urls.targets);
     await click('tbody tr td span a');
-    assert.strictEqual(currentURL(), urls.targetSessions);
+    assert.strictEqual(currentURL(), urls.target);
   });
 
   test('visiting empty targets', async function (assert) {