feat: 🎸 Add MetadataList component (#193)

Add MetadataList component and use of it within session-recordings

✅ Closes: ICU-8232

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

@@ -0,0 +1,3 @@
+<ul class='metadata-list {{@orientation}}'>
+  {{yield (hash Item=(component 'metadata-list/item' icon=@icon color=@color))}}
+</ul>

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

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

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;
+  }
+}

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

@@ -24,35 +24,28 @@
         {{! Channel details information }}
         <div>
           <h3>{{t 'resources.session-recording.channel.details'}}</h3>
-          {{! Start time }}
-          <p>
-            <FlightIcon @name='calendar' />
-            {{@model.channelRecording.start_time}}
-          </p>
-
-          {{! Type }}
-          <p>
-            <FlightIcon @name='terminal-screen' />
-            {{@model.sessionRecording.type}}
-          </p>
-
-          {{! Duration }}
-          <p>
-            <FlightIcon @name='clock' />
-            {{@model.channelRecording.duration}}
-          </p>
-
-          {{! Bytes up }}
-          <p>
-            <FlightIcon @name='arrow-up' />
-            {{format-bytes-size @model.channelRecording.bytes_up}}
-          </p>
-
-          {{! Bytes down }}
-          <p>
-            <FlightIcon @name='arrow-down' />
-            {{format-bytes-size @model.channelRecording.bytes_down}}
-          </p>
+          <MetadataList @orientation='vertical' as |list|>
+            {{! Start time }}
+            <list.Item @icon='calendar' @color='faint'>
+              {{@model.sessionRecording.start_time}}
+            </list.Item>
+            {{! Type }}
+            <list.Item @icon='terminal-screen' @color='faint'>
+              {{@model.sessionRecording.type}}
+            </list.Item>
+            {{! Duration }}
+            <list.Item @icon='clock' @color='faint'>
+              {{format-time-duration @model.sessionRecording.duration}}
+            </list.Item>
+            {{! Bytes up }}
+            <list.Item @icon='arrow-up' @color='success'>
+              {{format-bytes-size @model.sessionRecording.bytes_up}}
+            </list.Item>
+            {{! Bytes down }}
+            <list.Item @icon='arrow-down' @color='action'>
+              {{format-bytes-size @model.sessionRecording.bytes_down}}
+            </list.Item>
+          </MetadataList>
         </div>
 
         {{! Channel related information }}

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

@@ -52,18 +52,22 @@
                     <span>{{B.data.type}}</span>
                   </B.Td>
                   <B.Td>
-                    <span><FlightIcon @name='arrow-up' /></span>
-                    <span>{{format-bytes-size B.data.bytes_up}}</span>
-                    <span><FlightIcon @name='arrow-down' /></span>
-                    <span>{{format-bytes-size B.data.bytes_down}}</span>
-                    <span
-                      class='session-recording-list-cell-item hds-foreground-faint'
-                    >
-                      <span><FlightIcon @name='clock' /></span>
-                      <span>
-                        {{format-time-duration B.data.duration}}
-                      </span>
-                    </span>
+                    <MetadataList as |list|>
+                      {{! Bytes up }}
+                      <list.Item @icon='arrow-up' @color='success'>
+                        {{format-bytes-size @model.sessionRecording.bytes_up}}
+                      </list.Item>
+                      {{! Bytes down }}
+                      <list.Item @icon='arrow-down' @color='action'>
+                        {{format-bytes-size @model.sessionRecording.bytes_down}}
+                      </list.Item>
+                      {{! Duration }}
+                      <list.Item @icon='clock' @color='faint'>
+                        {{format-time-duration
+                          @model.sessionRecording.duration
+                        }}
+                      </list.Item>
+                    </MetadataList>
                   </B.Td>
                   <B.Td align='right'>
                     <Hds::Button
@@ -82,28 +86,25 @@
         <sb.Sidebar>
           <div>
             <h3>{{t 'resources.session-recording.details'}}</h3>
-            {{! Start time }}
-            <p>
-              <FlightIcon @name='calendar' />
-              {{@model.sessionRecording.start_time}}
-            </p>
-            {{! Duration }}
-            <p>
-              <FlightIcon @name='clock' />
-              {{@model.sessionRecording.duration}}
-            </p>
 
-            {{! Bytes up }}
-            <p>
-              <FlightIcon @name='arrow-up' />
-              {{format-bytes-size @model.sessionRecording.bytes_up}}
-            </p>
-
-            {{! Bytes down }}
-            <p>
-              <FlightIcon @name='arrow-down' />
-              {{format-bytes-size @model.sessionRecording.bytes_down}}
-            </p>
+            <MetadataList @orientation='vertical' as |list|>
+              {{! Start time }}
+              <list.Item @icon='calendar' @color='faint'>
+                {{@model.sessionRecording.start_time}}
+              </list.Item>
+              {{! Duration }}
+              <list.Item @icon='clock' @color='faint'>
+                {{format-time-duration @model.sessionRecording.duration}}
+              </list.Item>
+              {{! Bytes up }}
+              <list.Item @icon='arrow-up' @color='success'>
+                {{format-bytes-size @model.sessionRecording.bytes_up}}
+              </list.Item>
+              {{! Bytes down }}
+              <list.Item @icon='arrow-down' @color='action'>
+                {{format-bytes-size @model.sessionRecording.bytes_down}}
+              </list.Item>
+            </MetadataList>
           </div>
           {{! Related }}
           <div>

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`
+      <MetadataList as |list|>
+        <list.Item
+          @icon='arrow-up'
+          @color='success'
+        >
+          Sample text
+        </list.Item>
+      </MetadataList>
+    `);
+
+    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`
+      <MetadataList @orientation='vertical' as |list|>
+        <list.Item
+          @icon='arrow-down'
+          @color='action'
+        >
+          Sample text 2
+        </list.Item>
+      </MetadataList>
+    `);
+
+    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');
+  });
+});