Merge pull request #134 from hashicorp/feat-ICU-8419-session-recordings-list

feat: 🎸 Session recordings list

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/controllers/scopes/scope/session-recordings.js

@@ -0,0 +1,16 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeSessionRecordingsController extends Controller {
+  // =services
+
+  @service intl;
+
+  //= attributes
+  /**
+   * Translated breadcrumb
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.session-recording.title_plural');
+  }
+}

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

@@ -1,18 +1,71 @@
 <Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
   <page.header>
     <h2>{{t 'resources.session-recording.title_plural'}}</h2>
   </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 hds-font-weight-semibold'
+              >
+                <span><FlightIcon @name='user' /></span>
+                <span>{{B.data.user.name}}</span>
+              </div>
+            </B.Td>
+            <B.Td>
+              <div
+                class='session-recording-list-cell-item hds-font-weight-semibold'
+              >
+                <span><FlightIcon @name='target' /></span>
+                <span>{{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>

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

@@ -0,0 +1,62 @@
+import { module, test } from 'qunit';
+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';
+
+module('Acceptance | session recordings | list', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  // Selectors
+  const LIST_SESSION_RECORDING_BUTTON =
+    'table > tbody > tr > td:last-child > a';
+
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+    },
+    sessionRecording: null,
+  };
+
+  const urls = {
+    globalScope: null,
+    sessionRecordings: null,
+    sessionRecording: null,
+  };
+
+  hooks.beforeEach(function () {
+    instances.scopes.global = this.server.create('scope', { id: 'global' });
+    instances.scopes.org = this.server.create('scope', {
+      type: 'org',
+      scope: { id: 'global', type: 'global' },
+    });
+    instances.sessionRecording = this.server.create('session-recording', {
+      scope: instances.scopes.global,
+    });
+    urls.globalScope = `/scopes/global`;
+    urls.sessionRecordings = `${urls.globalScope}/session-recordings`;
+    urls.sessionRecording = `${urls.sessionRecordings}/${instances.sessionRecording.id}`;
+    authenticateSession({});
+  });
+
+  // TODO: When we add abilities to session-recordings this test will be refactor to account for it.
+  test('users can navigate to session-recordings', async function (assert) {
+    assert.expect(1);
+    // Visit session recordings
+    await visit(urls.sessionRecordings);
+    assert.strictEqual(currentURL(), urls.sessionRecordings);
+  });
+
+  // TODO: When we add abilities to session-recordings this test will be refactor to account for it.
+  test('user can navigate to a session recording', async function (assert) {
+    assert.expect(2);
+    // Visit session recordings
+    await visit(urls.sessionRecordings);
+    assert.dom('table').hasClass('hds-table');
+    // Click a session recording and check it navigates properly
+    await click(LIST_SESSION_RECORDING_BUTTON);
+    assert.strictEqual(currentURL(), urls.sessionRecording);
+  });
+});

ui/admin/tests/unit/controllers/scopes/scope/session-recordings-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'admin/tests/helpers';
+
+module('Unit | Controller | scopes/scope/session-recordings', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let controller = this.owner.lookup(
+      'controller:scopes/scope/session-recordings'
+    );
+    assert.ok(controller);
+  });
+});