Icu 10495 session detail sidebar content (#1837)

* chore: 🤖 fix model hook signature

* feat: 🎸 add target details to session details page

✅ Closes: ICU-10495

* style: 💄 fix missing "}" in model signature

ui/desktop/app/routes/scopes/scope/projects/sessions/session.js

@@ -17,9 +17,25 @@ export default class ScopesScopeProjectsSessionsSessionRoute extends Route {
    * Load a session
    * @param {object} params
    * @param {string} params.session_id
-   * @return {TargetModel}
+   * @return {{session: SessionModel, target: TargetModel}}
    */
-  model({ session_id }) {
-    return this.store.findRecord('session', session_id, { reload: true });
+  async model({ session_id }) {
+    let target = null;
+    const session = await this.store.findRecord('session', session_id, {
+      reload: true,
+    });
+
+    try {
+      if (session.target_id) {
+        target = await this.store.findRecord('target', session.target_id);
+      }
+    } catch (e) {
+      // no op
+    }
+
+    return {
+      session,
+      target,
+    };
   }
 }

ui/desktop/app/styles/app.scss

@@ -512,7 +512,7 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   }
 }
 
-.target-details-sidebar {
+.details-sidebar-target-details {
   background-color: var(--token-color-palette-neutral-50);
   border-radius: 0.313rem;
   padding: 1.5rem 2.5rem;

ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs

@@ -2,14 +2,14 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-{{page-title @model.displayName}}
+{{page-title @model.session.displayName}}
 
 <Rose::Layout::Page as |page|>
 
   <page.header>
     <h1 class='session-details-header'>
       <Hds::IconTile @color='boundary' @icon='terminal' />
-      {{@model.displayName}}
+      {{@model.session.displayName}}
     </h1>
   </page.header>
 
@@ -18,7 +18,7 @@
       @text={{t 'resources.session.actions.end'}}
       @icon='x'
       @color='secondary'
-      {{on 'click' (route-action 'cancelSession' @model)}}
+      {{on 'click' (route-action 'cancelSession' @model.session)}}
     />
   </page.actions>
 
@@ -28,7 +28,49 @@
       <bc.Body class='session-details-body'>
         {{t 'resources.session.description'}}
       </bc.Body>
-      <bc.Sidebar class='session-details-sidebar'>{{@model.id}}</bc.Sidebar>
+      <bc.Sidebar>
+        <div class='details-sidebar-target-details'>
+          <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.target.name}}
+            </list.Item>
+            {{! Project name }}
+            <list.Item @icon='grid' @color='faint'>
+              {{@model.target.project.displayName}}
+            </list.Item>
+            {{! Target description }}
+            {{#if @model.target.description}}
+              <list.Item @icon='message-circle-fill' @color='faint'>
+                {{@model.target.description}}
+              </list.Item>
+            {{/if}}
+            {{! Target type }}
+            <list.Item class='resource-type' @icon='terminal' @color='faint'>
+              {{#if @model.target.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.target.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                {{@model.target.id}}
+              </Copyable>
+            </list.Item>
+          </Rose::MetadataList>
+        </div>
+      </bc.Sidebar>
     </Rose::Layout::BodyContent>
   </page.body>
 

ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs

@@ -38,7 +38,7 @@
         </Hds::ApplicationState>
       </bc.Body>
       <bc.Sidebar>
-        <div class='target-details-sidebar'>
+        <div class='details-sidebar-target-details'>
           <div
             class='title hds-typography-display-200 hds-font-weight-semibold'
           >