From 1102c94875b05546dc258a82d7de1393fa117881 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Fri, 8 Sep 2023 17:34:35 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20move=20sidebar=20int?=
 =?UTF-8?q?o=20session=20details=20tab=20(#1892)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-10961
---
 .../app/components/session/tabs/index.hbs     | 130 +++++++++++++++---
 .../scope/projects/sessions/session.hbs       |  86 +-----------
 2 files changed, 112 insertions(+), 104 deletions(-)

diff --git a/ui/desktop/app/components/session/tabs/index.hbs b/ui/desktop/app/components/session/tabs/index.hbs
index 8b55303cb..f9f3713ee 100644
--- a/ui/desktop/app/components/session/tabs/index.hbs
+++ b/ui/desktop/app/components/session/tabs/index.hbs
@@ -1,29 +1,119 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <Hds::Tabs as |T|>
   <T.Tab>{{t 'titles.details'}} </T.Tab>
   <T.Tab @icon='terminal' {{on 'click' this.openTerminal}}>
     {{t 'resources.session.shell'}}
   </T.Tab>
   <T.Panel>
-    {{#if (and @model.proxy_address @model.proxy_port)}}
-      <Session::ProxyUrl
-        @proxyAddress={{@model.proxy_address}}
-        @proxyPort={{@model.proxy_port}}
-        @isSSHTarget={{@model.target.isSSH}}
-      />
-    {{/if}}
-    {{#if @model.credentials}}
-      <CredentialsPanel @credentials={{@model.credentials}} />
-    {{else}}
-      <Hds::ApplicationState data-test-no-credentials as |A|>
-        <A.Header @title={{t 'resources.session.messages.connected.title'}} />
-        <A.Body
-          @text={{t
-            'resources.session.messages.connected.description'
-            targetDisplayName=@model.target.displayName
-          }}
-        />
-      </Hds::ApplicationState>
-    {{/if}}</T.Panel>
+    <Rose::Layout::BodyContent as |bc|>
+      <bc.Body>
+        {{#if (and @model.proxy_address @model.proxy_port)}}
+          <Session::ProxyUrl
+            @proxyAddress={{@model.proxy_address}}
+            @proxyPort={{@model.proxy_port}}
+            @isSSHTarget={{@model.target.isSSH}}
+          />
+        {{/if}}
+        {{#if @model.credentials}}
+          <CredentialsPanel @credentials={{@model.credentials}} />
+        {{else}}
+          <Hds::ApplicationState data-test-no-credentials as |A|>
+            <A.Header
+              @title={{t 'resources.session.messages.connected.title'}}
+            />
+            <A.Body
+              @text={{t
+                'resources.session.messages.connected.description'
+                targetDisplayName=@model.target.displayName
+              }}
+            />
+          </Hds::ApplicationState>
+        {{/if}}
+      </bc.Body>
+      <bc.Sidebar>
+        <div class='details-sidebar'>
+          {{#if @model.host}}
+            <div>
+              <div
+                class='title hds-typography-display-200 hds-font-weight-semibold'
+              >
+                {{t 'resources.host.details'}}
+              </div>
+              <Rose::MetadataList @orientation='vertical' as |list|>
+                {{! Host name }}
+                {{#if @model.host.name}}
+                  <list.Item @icon='network-alt' @color='faint'>
+                    {{@model.host.name}}
+                  </list.Item>
+                {{/if}}
+                {{! Host description }}
+                {{#if @model.host.description}}
+                  <list.Item @icon='message-circle-fill' @color='faint'>
+                    {{@model.host.description}}
+                  </list.Item>
+                {{/if}}
+                {{! Host ID }}
+                <list.Item @icon='hash' @color='faint'>
+                  <Copyable
+                    @text={{@model.host.id}}
+                    @buttonText={{t 'actions.copy-to-clipboard'}}
+                    @acknowledgeText={{t 'states.copied'}}
+                  >
+                    {{@model.host.id}}
+                  </Copyable>
+                </list.Item>
+              </Rose::MetadataList>
+            </div>
+          {{/if}}
+          <div>
+            <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>
+        </div>
+      </bc.Sidebar>
+    </Rose::Layout::BodyContent>
+  </T.Panel>
   <T.Panel>
     <div id='terminal-container'></div>
   </T.Panel>
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs
index f077c81b2..949943d37 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs
@@ -2,6 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
+
 {{page-title @model.displayName}}
 
 <Rose::Layout::Page as |page|>
@@ -25,90 +26,7 @@
   </page.actions>
 
   <page.body class='details-screen-body'>
-
-    <Rose::Layout::BodyContent as |bc|>
-      <bc.Body>
-        <Session::Tabs @model={{@model}} />
-      </bc.Body>
-      <bc.Sidebar>
-        <div class='details-sidebar'>
-          {{#if @model.host}}
-            <div>
-              <div
-                class='title hds-typography-display-200 hds-font-weight-semibold'
-              >
-                {{t 'resources.host.details'}}
-              </div>
-              <Rose::MetadataList @orientation='vertical' as |list|>
-                {{! Host name }}
-                {{#if @model.host.name}}
-                  <list.Item @icon='network-alt' @color='faint'>
-                    {{@model.host.name}}
-                  </list.Item>
-                {{/if}}
-                {{! Host description }}
-                {{#if @model.host.description}}
-                  <list.Item @icon='message-circle-fill' @color='faint'>
-                    {{@model.host.description}}
-                  </list.Item>
-                {{/if}}
-                {{! Host ID }}
-                <list.Item @icon='hash' @color='faint'>
-                  <Copyable
-                    @text={{@model.host.id}}
-                    @buttonText={{t 'actions.copy-to-clipboard'}}
-                    @acknowledgeText={{t 'states.copied'}}
-                  >
-                    {{@model.host.id}}
-                  </Copyable>
-                </list.Item>
-              </Rose::MetadataList>
-            </div>
-          {{/if}}
-          <div>
-            <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>
-        </div>
-      </bc.Sidebar>
-    </Rose::Layout::BodyContent>
+    <Session::Tabs @model={{@model}} />
   </page.body>
 
 </Rose::Layout::Page>
\ No newline at end of file