feat: 🎸 move channel info to HDS table (#154)

* feat: 🎸 move channel info to HDS table

✅ Closes: ICU-8609

* refactor: 💡 change standalone link to hds.button

* refactor: 💡 use hds typography tokens for table titles

addons/core/translations/resources/en-us.yaml

@@ -217,6 +217,13 @@ session-recording:
   connection:
     title: Connection
     title_plural: Connections
+    form:
+      channel:
+        label: Channel
+      type:
+        label: Type
+      summary:
+        label: Summary
   channels-by-connection:
     title: Channels by connection
   channel:

ui/admin/app/styles/app.scss

@@ -804,3 +804,10 @@
     align-items: center;
   }
 }
+
+// Channels by Connection
+.channels-by-connection {
+  &-connection-header {
+    padding: 0.875rem 1rem;
+  }
+}

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs

@@ -8,32 +8,78 @@
   </page.header>
 
   <page.body>
-    <Layout::Sidebar as |sb|>
-      <sb.Body>
-        <p>
-          {{t 'resources.session-recording.title'}}
-          {{@model.id}}
-        </p>
-
-        {{#each @model.connection_recordings as |connection|}}
-          <p>{{t 'resources.session-recording.connection.title'}}
-            {{connection.id}}</p>
-          {{#each connection.channel_recordings as |channel|}}
-            <p>
-              <LinkTo
-                @route='scopes.scope.session-recordings.session-recording.channels-by-connection.channel'
-                @model={{channel.id}}
-              >
-                {{channel.id}}
-              </LinkTo>
-            </p>
+    <div class='channels-by-connection'>
+      <Layout::Sidebar as |sb|>
+        <sb.Body>
+          {{#each @model.connection_recordings as |connection|}}
+            <div class='channels-by-connection-connection-header'>
+              <p class='hds-typography-display-300 hds-font-weight-semibold'>
+                {{t 'resources.session-recording.connection.title'}}
+                {{connection.id}}
+              </p>
+            </div>
+            <Hds::Table
+              @model={{connection.channel_recordings}}
+              @density='tall'
+              @columns={{array
+                (hash
+                  label=(t
+                    'resources.session-recording.connection.form.channel.label'
+                  )
+                )
+                (hash
+                  label=(t
+                    'resources.session-recording.connection.form.type.label'
+                  )
+                )
+                (hash
+                  label=(t
+                    'resources.session-recording.connection.form.summary.label'
+                  )
+                )
+                (hash label='' align='right')
+              }}
+            >
+              <:body as |B|>
+                <B.Tr>
+                  <B.Td>
+                    <span>{{B.data.id}}</span>
+                  </B.Td>
+                  <B.Td>
+                    <span>{{B.data.type}}</span>
+                  </B.Td>
+                  <B.Td>
+                    <span><FlightIcon @name='arrow-up' /></span>
+                    <span>{{B.data.bytes_up}}</span>
+                    <span><FlightIcon @name='arrow-down' /></span>
+                    <span>{{B.data.bytes_down}}</span>
+                    <span
+                      class='session-recording-list-cell-item hds-foreground-faint'
+                    >
+                      <span><FlightIcon @name='clock' /></span>
+                      <span>
+                        {{format-time-duration B.data.duration}}
+                      </span>
+                    </span>
+                  </B.Td>
+                  <B.Td align='right'>
+                    <Hds::Button
+                      @icon='play'
+                      @color='secondary'
+                      @text='Play'
+                      @route='scopes.scope.session-recordings.session-recording.channels-by-connection.channel'
+                      @model={{B.data.id}}
+                    />
+                  </B.Td>
+                </B.Tr>
+              </:body>
+            </Hds::Table>
           {{/each}}
-        {{/each}}
-      </sb.Body>
-
-      <sb.Sidebar>
-        <p>{{t 'actions.help'}}</p>
-      </sb.Sidebar>
-    </Layout::Sidebar>
+        </sb.Body>
+        <sb.Sidebar>
+          <p>{{t 'actions.help'}}</p>
+        </sb.Sidebar>
+      </Layout::Sidebar>
+    </div>
   </page.body>
 </Rose::Layout::Page>

ui/admin/tests/acceptance/session-recordings/session-recording/session-recording-test.js

@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { visit, currentURL } from '@ember/test-helpers';
+import { visit, currentURL, click } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { authenticateSession } from 'ember-simple-auth/test-support';
@@ -8,6 +8,10 @@ module('Acceptance | session recordings | session recording', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  // Selectors
+  const LIST_CHANNEL_RECORDING_BUTTON =
+    'table > tbody > tr > td:last-child > a';
+
   // Instances
   const instances = {
     scopes: {
@@ -21,6 +25,7 @@ module('Acceptance | session recordings | session recording', function (hooks) {
     globalScope: null,
     sessionRecordings: null,
     sessionRecording: null,
+    channelRecording: null,
   };
 
   hooks.beforeEach(function () {
@@ -32,9 +37,16 @@ module('Acceptance | session recordings | session recording', function (hooks) {
     instances.sessionRecording = this.server.create('session-recording', {
       scope: instances.scopes.global,
     });
+    instances.connectionRecording = this.server.create('connection-recording', {
+      session_recording: instances.sessionRecording,
+    });
+    instances.channelRecording = this.server.create('channel-recording', {
+      connection_recording: instances.connectionRecording,
+    });
     urls.globalScope = `/scopes/global`;
     urls.sessionRecordings = `${urls.globalScope}/session-recordings`;
     urls.sessionRecording = `${urls.sessionRecordings}/${instances.sessionRecording.id}`;
+    urls.channelRecording = `${urls.sessionRecording}/channels-by-connection/${instances.channelRecording.id}`;
     authenticateSession({});
   });
 
@@ -45,4 +57,15 @@ module('Acceptance | session recordings | session recording', function (hooks) {
     await visit(urls.sessionRecording);
     assert.strictEqual(currentURL(), urls.sessionRecording);
   });
+
+  test('user can navigate to a channel recording', async function (assert) {
+    assert.expect(2);
+
+    // Visit session recording
+    await visit(urls.sessionRecording);
+    assert.dom('table').hasClass('hds-table');
+    // Click a channel recording and check it navigates properly
+    await click(LIST_CHANNEL_RECORDING_BUTTON);
+    assert.strictEqual(currentURL(), urls.channelRecording);
+  });
 });