From afd89bddb35efcc65c6deed79e887f6da674239a Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Corvo Date: Mon, 17 Apr 2023 12:49:08 -0700 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20MetadataList=20com?= =?UTF-8?q?ponent=20(#193)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add MetadataList component and use of it within session-recordings ✅ Closes: ICU-8232 --- .../app/components/metadata-list/index.hbs | 3 + .../components/metadata-list/item/index.hbs | 4 ++ ui/admin/app/styles/app.scss | 18 +++++ .../channels-by-connection/channel.hbs | 51 ++++++-------- .../session-recording/index.hbs | 67 ++++++++++--------- .../components/metadata-list/index-test.js | 45 +++++++++++++ 6 files changed, 126 insertions(+), 62 deletions(-) create mode 100644 ui/admin/app/components/metadata-list/index.hbs create mode 100644 ui/admin/app/components/metadata-list/item/index.hbs create mode 100644 ui/admin/tests/integration/components/metadata-list/index-test.js diff --git a/ui/admin/app/components/metadata-list/index.hbs b/ui/admin/app/components/metadata-list/index.hbs new file mode 100644 index 000000000..1d4834598 --- /dev/null +++ b/ui/admin/app/components/metadata-list/index.hbs @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/ui/admin/app/components/metadata-list/item/index.hbs b/ui/admin/app/components/metadata-list/item/index.hbs new file mode 100644 index 000000000..05244849e --- /dev/null +++ b/ui/admin/app/components/metadata-list/item/index.hbs @@ -0,0 +1,4 @@ +
  • + + {{yield}} +
    • \ No newline at end of file diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 8068f309e..d4ad4d21c 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -861,3 +861,21 @@ padding: 0.875rem 1rem; } } + +// Metadata List +.metadata-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + + &.vertical { + flex-direction: column; + row-gap: 1rem; + } + + .metadata-list-item { + display: flex; + column-gap: 0.3rem; + } +} diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs index db8e1ca49..238948d80 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs @@ -24,35 +24,28 @@ {{! Channel details information }}

    {{t 'resources.session-recording.channel.details'}}

    - {{! Start time }} -

    - - {{@model.channelRecording.start_time}} -

    - - {{! Type }} -

    - - {{@model.sessionRecording.type}} -

    - - {{! Duration }} -

    - - {{@model.channelRecording.duration}} -

    - - {{! Bytes up }} -

    - - {{format-bytes-size @model.channelRecording.bytes_up}} -

    - - {{! Bytes down }} -

    - - {{format-bytes-size @model.channelRecording.bytes_down}} -

    + + {{! Start time }} + + {{@model.sessionRecording.start_time}} + + {{! Type }} + + {{@model.sessionRecording.type}} + + {{! Duration }} + + {{format-time-duration @model.sessionRecording.duration}} + + {{! Bytes up }} + + {{format-bytes-size @model.sessionRecording.bytes_up}} + + {{! Bytes down }} + + {{format-bytes-size @model.sessionRecording.bytes_down}} + +
    {{! Channel related information }} 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 fb69f47f7..86efd4d5d 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 @@ -52,18 +52,22 @@ {{B.data.type}} - - {{format-bytes-size B.data.bytes_up}} - - {{format-bytes-size B.data.bytes_down}} - - - - {{format-time-duration B.data.duration}} - - + + {{! Bytes up }} + + {{format-bytes-size @model.sessionRecording.bytes_up}} + + {{! Bytes down }} + + {{format-bytes-size @model.sessionRecording.bytes_down}} + + {{! Duration }} + + {{format-time-duration + @model.sessionRecording.duration + }} + +

    {{t 'resources.session-recording.details'}}

    - {{! Start time }} -

    - - {{@model.sessionRecording.start_time}} -

    - {{! Duration }} -

    - - {{@model.sessionRecording.duration}} -

    - {{! Bytes up }} -

    - - {{format-bytes-size @model.sessionRecording.bytes_up}} -

    - - {{! Bytes down }} -

    - - {{format-bytes-size @model.sessionRecording.bytes_down}} -

    + + {{! Start time }} + + {{@model.sessionRecording.start_time}} + + {{! Duration }} + + {{format-time-duration @model.sessionRecording.duration}} + + {{! Bytes up }} + + {{format-bytes-size @model.sessionRecording.bytes_up}} + + {{! Bytes down }} + + {{format-bytes-size @model.sessionRecording.bytes_down}} + +
    {{! Related }}
    diff --git a/ui/admin/tests/integration/components/metadata-list/index-test.js b/ui/admin/tests/integration/components/metadata-list/index-test.js new file mode 100644 index 000000000..91cb1d7c2 --- /dev/null +++ b/ui/admin/tests/integration/components/metadata-list/index-test.js @@ -0,0 +1,45 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'admin/tests/helpers'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | metadata-list/item', function (hooks) { + setupRenderingTest(hooks); + + test('it renders horizontal (default) with icon, color and text', async function (assert) { + assert.expect(3); + await render(hbs` + + + Sample text + + + `); + + assert.dom('[data-test-icon="arrow-up"]').isVisible(); + assert.dom('li.metadata-list-item').hasClass('hds-foreground-success'); + assert.dom('li.metadata-list-item').hasText('Sample text'); + }); + + test('it renders vertical with icon, color and text', async function (assert) { + assert.expect(4); + await render(hbs` + + + Sample text 2 + + + `); + + assert.dom('ul.metadata-list').hasClass('vertical'); + assert.dom('[data-test-icon="arrow-down"]').isVisible(); + assert.dom('li.metadata-list-item').hasClass('hds-foreground-action'); + assert.dom('li.metadata-list-item').hasText('Sample text 2'); + }); +});