From 983eee2742575f1109c6d830e4b31672a100075f Mon Sep 17 00:00:00 2001 From: Cameron Perera Date: Mon, 27 Mar 2023 11:43:05 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20move=20channel=20info=20?= =?UTF-8?q?to=20HDS=20table=20(#154)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 7 ++ ui/admin/app/styles/app.scss | 7 ++ .../session-recording/index.hbs | 98 ++++++++++++++----- .../session-recording-test.js | 25 ++++- 4 files changed, 110 insertions(+), 27 deletions(-) diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml index 75cda1d12..89bff1130 100644 --- a/addons/core/translations/resources/en-us.yaml +++ b/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: diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 4090dac4f..24532d74a 100644 --- a/ui/admin/app/styles/app.scss +++ b/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; + } +} diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs index acd86daed..5c89e63a4 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs @@ -8,32 +8,78 @@ - - -

- {{t 'resources.session-recording.title'}} - {{@model.id}} -

- - {{#each @model.connection_recordings as |connection|}} -

{{t 'resources.session-recording.connection.title'}} - {{connection.id}}

- {{#each connection.channel_recordings as |channel|}} -

- - {{channel.id}} - -

+
+ + + {{#each @model.connection_recordings as |connection|}} +
+

+ {{t 'resources.session-recording.connection.title'}} + {{connection.id}} +

+
+ + <:body as |B|> + + + {{B.data.id}} + + + {{B.data.type}} + + + + {{B.data.bytes_up}} + + {{B.data.bytes_down}} + + + + {{format-time-duration B.data.duration}} + + + + + + + + + {{/each}} - {{/each}} - - - -

{{t 'actions.help'}}

- - + + +

{{t 'actions.help'}}

+ + +
\ No newline at end of file diff --git a/ui/admin/tests/acceptance/session-recordings/session-recording/session-recording-test.js b/ui/admin/tests/acceptance/session-recordings/session-recording/session-recording-test.js index 5177f2a56..0a91ad99d 100644 --- a/ui/admin/tests/acceptance/session-recordings/session-recording/session-recording-test.js +++ b/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); + }); });