refactor: 💡 Add Project name to session-recordings list (#152)

* refactor: 💡 Add Project name to session-recordings list

addons/api/addon/models/session-recording.js

@@ -27,4 +27,8 @@ export default class SessionRecordingModel extends GeneratedSessionRecordingMode
   get isUnknown() {
     return !TYPES_SESSION_RECORDING.includes(this.type);
   }
+
+  get targetScopeDisplayName() {
+    return this.target?.scope?.name || this.target?.scope?.id;
+  }
 }

addons/api/tests/unit/models/session-recording-test.js

@@ -50,4 +50,38 @@ module('Unit | Model | session-recording', function (hooks) {
     const connection_recordings = await model.connection_recordings;
     assert.strictEqual(connection_recordings.length, 1);
   });
+
+  test('it has targetScopeDisplayName and returns the expected values', async function (assert) {
+    assert.expect(2);
+    const store = this.owner.lookup('service:store');
+    const fakeName = 'Scope name';
+    const fakeId = 's_123456789';
+    // Scope models: A has just name, B has just id.
+    const scopeModelA = await store.createRecord('scope', {
+      type: 'global',
+      name: fakeName,
+      id: 's_1234567890',
+    });
+    const scopeModelB = await store.createRecord('scope', {
+      type: 'org',
+      id: fakeId,
+    });
+
+    const targetModelA = await store.createRecord('target', {
+      scope: scopeModelA,
+    });
+    const targetModelB = await store.createRecord('target', {
+      scope: scopeModelB,
+    });
+
+    const modelA = store.createRecord('session-recording', {
+      target: targetModelA,
+    });
+    const modelB = store.createRecord('session-recording', {
+      target: targetModelB,
+    });
+
+    assert.strictEqual(modelA.targetScopeDisplayName, fakeName);
+    assert.strictEqual(modelB.targetScopeDisplayName, fakeId);
+  });
 });

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

@@ -22,11 +22,13 @@
       >
         <:body as |B|>
           <B.Tr>
+            {{! Time }}
             <B.Td>
               <span class='hds-foreground-faint'>
                 {{format-date B.data.start_time format='mmddyyhhmm'}}
               </span>
             </B.Td>
+            {{! User }}
             <B.Td>
               <div
                 class='session-recording-list-cell-item hds-font-weight-semibold'
@@ -35,14 +37,19 @@
                 <span>{{B.data.user.name}}</span>
               </div>
             </B.Td>
+            {{! Target }}
             <B.Td>
               <div
                 class='session-recording-list-cell-item hds-font-weight-semibold'
               >
+                <span><FlightIcon @name='grid' /></span>
+                <span>{{B.data.targetScopeDisplayName}}</span>
+                <span class='hds-foreground-faint'>/</span>
                 <span><FlightIcon @name='target' /></span>
                 <span>{{B.data.target.name}}</span>
               </div>
             </B.Td>
+            {{! Duration }}
             <B.Td>
               <div
                 class='session-recording-list-cell-item hds-foreground-faint'

ui/admin/tests/acceptance/session-recordings/list-test.js

@@ -34,9 +34,12 @@ module('Acceptance | session recordings | list', function (hooks) {
       type: 'org',
       scope: { id: 'global', type: 'global' },
     });
-    instances.sessionRecording = this.server.create('session-recording', {
+    instances.scopes.targetModel = this.server.create('target', {
       scope: instances.scopes.global,
     });
+    instances.sessionRecording = this.server.create('session-recording', {
+      target: instances.scopes.targetModel,
+    });
     urls.globalScope = `/scopes/global`;
     urls.sessionRecordings = `${urls.globalScope}/session-recordings`;
     urls.sessionRecording = `${urls.sessionRecordings}/${instances.sessionRecording.id}`;