Icu 9442 add session recording status to details sidebar (#284)

* refactor: 💡 make icon not required for metadata list items

* refactor: 💡 update class name for SessionRecording Status badge

* feat: 🎸 display SessionRecording Status on Details sidebar

✅ Closes: ICU-9442

ui/admin/app/components/metadata-list/item/index.hbs

@@ -1,4 +1,6 @@
 <li class='metadata-list-item {{(concat "hds-foreground-" @color)}}'>
-  <FlightIcon @name={{@icon}} />
+  {{#if @icon}}
+    <FlightIcon @name={{@icon}} />
+  {{/if}}
   {{yield}}
 </li>

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

@@ -1,4 +1,5 @@
 <Hds::Badge
+  class='session-recording-status-badge'
   @icon={{this.status.icon}}
   @color={{this.status.color}}
   @text={{this.status.text}}

ui/admin/app/styles/app.scss

@@ -913,16 +913,6 @@
   }
 }
 
-// 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;
 
@@ -965,3 +955,14 @@
     column-gap: 0.3rem;
   }
 }
+
+// Session Recording Status
+// overwrites recording badge icon to red
+.session-recording-status-badge {
+  /* stylelint-disable selector-class-pattern */
+  div.hds-badge__icon {
+    svg.flight-icon-circle-dot {
+      color: var(--token-color-palette-red-200);
+    }
+  }
+}

ui/admin/app/templates/scopes/scope/session-recordings/index.hbs

@@ -34,7 +34,7 @@
               {{/if}}
             </B.Td>
             {{! Status }}
-            <B.Td class='status-column'>
+            <B.Td>
               <SessionRecording::Status @status={{B.data.state}} />
             </B.Td>
             {{! User }}

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs

@@ -114,6 +114,12 @@
             <h2>{{t 'resources.session-recording.details'}}</h2>
 
             <MetadataList @orientation='vertical' as |list|>
+              {{! Session Recording Status }}
+              <list.Item>
+                <SessionRecording::Status
+                  @status={{@model.sessionRecording.state}}
+                />
+              </list.Item>
               {{! Start time }}
               {{#if @model.sessionRecording.start_time}}
                 <list.Item @icon='calendar' @color='faint'>

ui/admin/tests/integration/components/metadata-list/index-test.js

@@ -42,4 +42,20 @@ module('Integration | Component | metadata-list/item', function (hooks) {
     assert.dom('li.metadata-list-item').hasClass('hds-foreground-action');
     assert.dom('li.metadata-list-item').hasText('Sample text 2');
   });
+
+  test('it renders no icon if @icon not provided', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <MetadataList as |list|>
+        <list.Item
+          @color='action'
+        >
+          Sample text 3
+        </list.Item>
+      </MetadataList>
+    `);
+
+    assert.dom('.flight-icon').isNotVisible();
+    assert.dom('li.metadata-list-item').hasText('Sample text 3');
+  });
 });