feat: 🎸 Session recordings list

Add session recordings list

✅ Closes: ICU-8419

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

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' },

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

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>