From d08e4be0c6b3a624c207fbcab49caa11597794de Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Fri, 5 May 2023 13:49:57 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20update=20how=20proje?=
 =?UTF-8?q?ct=20&=20target=20are=20displayed=20in=20table=20(#242)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 update how project & target are displayed in table

✅ Closes: ICU-9165

* refactor: 💡 update gap to use rem

* refactor: 💡 update with PR feedback

* refactor: 💡 use flex-direction column instead of display block
---
 ui/admin/app/styles/app.scss                    | 10 +++++++++-
 .../scopes/scope/session-recordings/index.hbs   | 17 +++++++++++------
 .../acceptance/session-recordings/read-test.js  |  4 ++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index b10796305..7bae02b8f 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -901,7 +901,7 @@
 // Session recording - List
 .session-recording-list-cell-item {
   display: flex;
-  gap: sizing.rems(xs);
+  gap: 0.5rem;
 
   span {
     display: flex;
@@ -909,6 +909,14 @@
   }
 }
 
+.session-recording-list-cell-item.target-column {
+  flex-direction: column;
+
+  span {
+    gap: 0.5rem;
+  }
+}
+
 // Channels by Connection
 .channels-by-connection {
   &-connection-header {
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
index 4e8aba857..c444b55da 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
@@ -42,13 +42,18 @@
             {{! Target }}
             <B.Td>
               <div
-                class='session-recording-list-cell-item hds-font-weight-semibold'
+                class='session-recording-list-cell-item target-column hds-font-weight-semibold'
               >
-                <span><FlightIcon @name='grid' /></span>
-                <span>{{B.data.targetScopeDisplayName}}</span>
-                <span class='hds-foreground-faint'>/</span>
-                <span><FlightIcon @name='target' /></span>
-                <span>{{B.data.target.name}}</span>
+                <span>
+                  <FlightIcon @name='target' />
+                  {{B.data.target.name}}
+                </span>
+                <span>
+                  <Hds::Badge
+                    @text={{B.data.targetScopeDisplayName}}
+                    @icon='grid'
+                  />
+                </span>
               </div>
             </B.Td>
             {{! Duration }}
diff --git a/ui/admin/tests/acceptance/session-recordings/read-test.js b/ui/admin/tests/acceptance/session-recordings/read-test.js
index efba8a5ac..e6b0b9f85 100644
--- a/ui/admin/tests/acceptance/session-recordings/read-test.js
+++ b/ui/admin/tests/acceptance/session-recordings/read-test.js
@@ -39,8 +39,12 @@ module('Acceptance | session recordings | read', function (hooks) {
       type: 'org',
       scope: { id: 'global', type: 'global' },
     });
+    instances.target = this.server.create('target', {
+      scope: instances.scopes.global,
+    });
     instances.sessionRecording = this.server.create('session-recording', {
       scope: instances.scopes.global,
+      target: instances.target.attrs,
     });
     instances.connectionRecording = this.server.create('connection-recording', {
       session_recording: instances.sessionRecording,