Add session-recording status component (#278)

* Add status component

* Update ui/admin/app/components/session-recording/status/index.js

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>

* refactor: 💡 update SessionRecording::Status component

* refactor: 💡 fix linting issues

---------

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>

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

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

ui/admin/app/components/session-recording/status/index.hbs

@@ -0,0 +1,5 @@
+<Hds::Badge
+  @icon={{this.status.icon}}
+  @color={{this.status.color}}
+  @text={{this.status.text}}
+/>

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'),
+        };
+    }
+  }
+}

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;
 

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 @@
                 </span>
               {{/if}}
             </B.Td>
+            {{! Status }}
+            <B.Td class='status-column'>
+              <SessionRecording::Status @status={{B.data.state}} />
+            </B.Td>
             {{! User }}
             <B.Td>
               <div

ui/admin/tests/integration/components/session-recording/status-test.js

@@ -0,0 +1,73 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import {
+  STATE_SESSION_RECORDING_STARTED,
+  STATE_SESSION_RECORDING_AVAILABLE,
+  STATE_SESSION_RECORDING_UNKNOWN,
+} from 'api/models/session-recording';
+
+module('Integration | Component | session-recording/status', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  const BADGE_ICON_SELECTOR = '.hds-badge__icon svg';
+  const BADGE_TEXT_SELECTOR = '.hds-badge__text';
+
+  test('it renders a completed status badge', async function (assert) {
+    assert.expect(2);
+    this.status = STATE_SESSION_RECORDING_AVAILABLE;
+
+    await render(hbs`
+      <SessionRecording::Status @status={{this.status}} />
+    `);
+
+    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`
+      <SessionRecording::Status @status={{this.status}} />
+    `);
+
+    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`
+      <SessionRecording::Status @status={{this.status}} />
+    `);
+
+    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`
+      <SessionRecording::Status @status='wat' />
+    `);
+
+    assert
+      .dom(BADGE_ICON_SELECTOR)
+      .hasAttribute('data-test-icon', 'alert-triangle');
+    assert.dom(BADGE_TEXT_SELECTOR).hasText('Failed');
+  });
+});