From 7e2af274532b01d196ec9c4050bfd4cc21e0643c Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Corvo Date: Wed, 24 May 2023 09:28:18 -0700 Subject: [PATCH] Add session-recording status component (#278) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add status component * Update ui/admin/app/components/session-recording/status/index.js Co-authored-by: Dharini Jeeva * refactor: 💡 update SessionRecording::Status component * refactor: 💡 fix linting issues --------- Co-authored-by: Cameron Perera Co-authored-by: Dharini Jeeva --- addons/core/translations/resources/en-us.yaml | 2 + addons/core/translations/states/en-us.yaml | 3 + .../session-recording/status/index.hbs | 5 ++ .../session-recording/status/index.js | 37 ++++++++++ ui/admin/app/styles/app.scss | 10 +++ .../scopes/scope/session-recordings/index.hbs | 5 ++ .../session-recording/status-test.js | 73 +++++++++++++++++++ 7 files changed, 135 insertions(+) create mode 100644 ui/admin/app/components/session-recording/status/index.hbs create mode 100644 ui/admin/app/components/session-recording/status/index.js create mode 100644 ui/admin/tests/integration/components/session-recording/status-test.js diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml index 329849d75..e125579c1 100644 --- a/addons/core/translations/resources/en-us.yaml +++ b/addons/core/translations/resources/en-us.yaml @@ -256,6 +256,8 @@ session-recording: label: Target duration: label: Duration + status: + label: Status messages: none: title: Welcome to session recording diff --git a/addons/core/translations/states/en-us.yaml b/addons/core/translations/states/en-us.yaml index 07721a51a..94875ceb9 100644 --- a/addons/core/translations/states/en-us.yaml +++ b/addons/core/translations/states/en-us.yaml @@ -11,3 +11,6 @@ primary: Primary inactive: Inactive active-private: Private active-public: Public +recording: Recording +completed: Completed +failed: Failed diff --git a/ui/admin/app/components/session-recording/status/index.hbs b/ui/admin/app/components/session-recording/status/index.hbs new file mode 100644 index 000000000..555142b31 --- /dev/null +++ b/ui/admin/app/components/session-recording/status/index.hbs @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/ui/admin/app/components/session-recording/status/index.js b/ui/admin/app/components/session-recording/status/index.js new file mode 100644 index 000000000..47a7a153e --- /dev/null +++ b/ui/admin/app/components/session-recording/status/index.js @@ -0,0 +1,37 @@ +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; +import { + STATE_SESSION_RECORDING_STARTED, + STATE_SESSION_RECORDING_AVAILABLE, + STATE_SESSION_RECORDING_UNKNOWN, +} from 'api/models/session-recording'; + +export default class SessionRecordingStatusComponent extends Component { + // =services + @service intl; + + // =attributes + get status() { + switch (this.args.status) { + case STATE_SESSION_RECORDING_STARTED: // In progress + return { + icon: 'circle-dot', + color: 'neutral', + text: this.intl.t('states.recording'), + }; + case STATE_SESSION_RECORDING_AVAILABLE: // Completed + return { + icon: 'check-circle', + color: 'success', + text: this.intl.t('states.completed'), + }; + case STATE_SESSION_RECORDING_UNKNOWN: // Error + default: + return { + icon: 'alert-triangle', + color: 'critical', + text: this.intl.t('states.failed'), + }; + } + } +} diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 0d36229a9..9d64157a7 100644 --- a/ui/admin/app/styles/app.scss +++ b/ui/admin/app/styles/app.scss @@ -913,6 +913,16 @@ } } +// overwrites recording badge icon to red +.status-column { + /* stylelint-disable selector-class-pattern */ + div.hds-badge__icon { + svg.flight-icon-circle-dot { + color: var(--token-color-palette-red-200); + } + } +} + .session-recording-list-cell-item.target-column { flex-direction: column; diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs index 82d593904..dc1f2b694 100644 --- a/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs +++ b/ui/admin/app/templates/scopes/scope/session-recordings/index.hbs @@ -14,6 +14,7 @@ @density='tall' @columns={{array (hash label=(t 'resources.session-recording.form.time.label')) + (hash label=(t 'resources.session-recording.form.status.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')) @@ -32,6 +33,10 @@ {{/if}} + {{! Status }} + + + {{! User }}
+ `); + + assert + .dom(BADGE_ICON_SELECTOR) + .hasAttribute('data-test-icon', 'check-circle'); + assert.dom(BADGE_TEXT_SELECTOR).hasText('Completed'); + }); + + test('it renders an in-progress status badge', async function (assert) { + assert.expect(2); + this.status = STATE_SESSION_RECORDING_STARTED; + + await render(hbs` + + `); + + assert + .dom(BADGE_ICON_SELECTOR) + .hasAttribute('data-test-icon', 'circle-dot'); + assert.dom(BADGE_TEXT_SELECTOR).hasText('Recording'); + }); + + test('it renders a failed status badge', async function (assert) { + assert.expect(2); + this.status = STATE_SESSION_RECORDING_UNKNOWN; + + await render(hbs` + + `); + + assert + .dom(BADGE_ICON_SELECTOR) + .hasAttribute('data-test-icon', 'alert-triangle'); + assert.dom(BADGE_TEXT_SELECTOR).hasText('Failed'); + }); + + test('it renders a failed status badge when the status does not match any known states', async function (assert) { + assert.expect(2); + + await render(hbs` + + `); + + assert + .dom(BADGE_ICON_SELECTOR) + .hasAttribute('data-test-icon', 'alert-triangle'); + assert.dom(BADGE_TEXT_SELECTOR).hasText('Failed'); + }); +});