From 57d31d4ccf300c09f407ad97ce52a15e157e672a Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <ccorvo@hashicorp.com>
Date: Mon, 20 Mar 2023 13:27:24 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Session=20recordings=20l?=
 =?UTF-8?q?ist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add session recordings list

✅ Closes: ICU-8419
---
 addons/core/translations/resources/en-us.yaml |  9 +++
 ui/admin/app/formats.js                       |  7 ++
 ui/admin/app/styles/app.scss                  | 11 +++
 .../scopes/scope/session-recordings/index.hbs | 69 ++++++++++++++++---
 4 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 9f2fb54f8..1deee0f25 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -222,6 +222,15 @@ session-recording:
     title_plural: Channels
   session:
     title: Session Playback
+  form:
+    time:
+      label: Time
+    user:
+      label: User
+    target:
+      label: Target
+    duration:
+      label: Duration
 storage-bucket:
   title: Storage Bucket
   title_plural: Storage Buckets
diff --git a/ui/admin/app/formats.js b/ui/admin/app/formats.js
index 3d6cb9a0b..197e8f054 100644
--- a/ui/admin/app/formats.js
+++ b/ui/admin/app/formats.js
@@ -34,6 +34,13 @@ export default {
       minute: 'numeric',
       timeZoneName: 'short',
     },
+    mmddyyhhmm: {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: 'numeric',
+      minute: 'numeric',
+    },
   },
   number: {
     compact: { notation: 'compact' },
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index c1bc62db0..cf263297c 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -776,3 +776,14 @@
       'sidebar';
   }
 }
+
+// Session recording - List
+.session-recording-list-cell-item {
+  display: flex;
+  gap: sizing.rems(xs);
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+}
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 5762bc212..8d423682f 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs
@@ -4,15 +4,64 @@
   </page.header>
 
   <page.body>
-    {{#each @model as |recording|}}
-      <p>
-        <LinkTo
-          @route='scopes.scope.session-recordings.session-recording'
-          @model={{recording.id}}
-        >
-          {{recording.id}}
-        </LinkTo>
-      </p>
-    {{/each}}
+    {{#if @model}}
+      <Hds::Table
+        @model={{@model}}
+        @density='tall'
+        @columns={{array
+          (hash label=(t 'resources.session-recording.form.time.label'))
+          (hash label=(t 'resources.session-recording.form.user.label'))
+          (hash label=(t 'resources.session-recording.form.target.label'))
+          (hash label=(t 'resources.session-recording.form.duration.label'))
+          (hash label='' align='right')
+        }}
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              <span class='hds-foreground-faint'>
+                {{format-date B.data.started_time format='mmddyyhhmm'}}
+              </span>
+            </B.Td>
+            <B.Td>
+              <div class='session-recording-list-cell-item'>
+                <span><FlightIcon @name='user' /></span>
+                <span
+                  class='hds-font-weight-semibold'
+                >{{B.data.user.name}}</span>
+              </div>
+            </B.Td>
+            <B.Td>
+              <div class='session-recording-list-cell-item'>
+                <span><FlightIcon @name='target' /></span>
+                <span
+                  class='hds-font-weight-semibold'
+                >{{B.data.target.name}}</span>
+              </div>
+            </B.Td>
+            <B.Td>
+              <div
+                class='session-recording-list-cell-item hds-foreground-faint'
+              >
+                <span><FlightIcon @name='clock' /></span>
+                <span>
+                  {{format-time-duration B.data.duration}}
+                </span>
+              </div>
+            </B.Td>
+            <B.Td align='right'>
+              <Hds::Link::Standalone
+                @icon='arrow-right'
+                @iconPosition='trailing'
+                @color='secondary'
+                @text=''
+                @route='scopes.scope.session-recordings.session-recording'
+                @model={{B.data.id}}
+              />
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
+    {{/if}}
   </page.body>
 </Rose::Layout::Page>
\ No newline at end of file