feat: 🎸 add target details sidebar panel to target detail page (#1832)

✅ Closes: ICU-10302

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

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

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>
 

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

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