From db408a9acd01e743be281700706a6e18397a14fb Mon Sep 17 00:00:00 2001
From: Carlos Alcaide Corvo <ccorvo@hashicorp.com>
Date: Mon, 24 Apr 2023 08:17:27 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20related=20info=20t?=
 =?UTF-8?q?o=20session=20recording=20and=20player=20(#195)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 Add related info to session recording and player

---------

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
---
 .../components/link-list-panel/item/index.hbs | 39 ++++++---
 .../channels-by-connection/channel.hbs        | 60 ++++++++++----
 .../session-recording/index.hbs               | 61 ++++++++++----
 .../components/link-list-panel/index-test.js  | 82 +++++++++++++++++++
 4 files changed, 199 insertions(+), 43 deletions(-)

diff --git a/ui/admin/app/components/link-list-panel/item/index.hbs b/ui/admin/app/components/link-list-panel/item/index.hbs
index a7d185b5f..38456f6d6 100644
--- a/ui/admin/app/components/link-list-panel/item/index.hbs
+++ b/ui/admin/app/components/link-list-panel/item/index.hbs
@@ -1,19 +1,36 @@
 <li class='link-list-item'>
   {{#if @route}}
-    <LinkTo @route={{@route}} @model={{@model}}>
-      <div class='link-list-item__info'>
-        {{#if @icon}}
-          <Hds::IconTile @color={{@color}} @icon={{@icon}} @size='small' />
-        {{/if}}
+    {{#if (is-array @model)}}
+      <LinkTo @route={{@route}} @models={{@model}}>
+        <div class='link-list-item__info'>
+          {{#if @icon}}
+            <Hds::IconTile @color={{@color}} @icon={{@icon}} @size='small' />
+          {{/if}}
 
-        <div>
-          <p class='link-list-item__text'>{{@text}}</p>
-          {{yield}}
+          <div>
+            <p class='link-list-item__text'>{{@text}}</p>
+            {{yield}}
+          </div>
         </div>
-      </div>
 
-      <FlightIcon @name='arrow-right' />
-    </LinkTo>
+        <FlightIcon @name='arrow-right' />
+      </LinkTo>
+    {{else}}
+      <LinkTo @route={{@route}} @model={{@model}}>
+        <div class='link-list-item__info'>
+          {{#if @icon}}
+            <Hds::IconTile @color={{@color}} @icon={{@icon}} @size='small' />
+          {{/if}}
+
+          <div>
+            <p class='link-list-item__text'>{{@text}}</p>
+            {{yield}}
+          </div>
+        </div>
+
+        <FlightIcon @name='arrow-right' />
+      </LinkTo>
+    {{/if}}
   {{else}}
     <div class='link-list-item__info'>
       {{#if @icon}}
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
index 102cb0625..472d54987 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs
@@ -44,26 +44,54 @@
           </MetadataList>
         </div>
 
-        {{! Channel related information }}
+        {{! Related information }}
         <div>
           <h3>{{t 'resources.session-recording.related'}}</h3>
-          {{! User name }}
-          <p>
-            <FlightIcon @name='user' />
+          <LinkListPanel as |list|>
+            {{! User name }}
             {{#if @model.sessionRecording.user}}
-              {{@model.sessionRecording.userDisplayName}}
+              <list.Item
+                @icon='user'
+                @color='boundary'
+                @route='scopes.scope.users.user'
+                @model={{array
+                  @model.sessionRecording.user.scopeId
+                  @model.sessionRecording.user.id
+                }}
+                @text={{@model.sessionRecording.userDisplayName}}
+              />
             {{/if}}
-          </p>
-          {{! Target name }}
-          <p>
-            <FlightIcon @name='target' />
-            {{@model.sessionRecording.target.name}}
-          </p>
-          {{! Bucket name }}
-          <p>
-            <FlightIcon @name='cloud-check' />
-            {{@model.storageBucket.name}}
-          </p>
+            {{! Target name }}
+            {{#if @model.sessionRecording.target}}
+              <list.Item
+                @icon='target'
+                @color='boundary'
+                @route='scopes.scope.targets.target'
+                @model={{array
+                  @model.sessionRecording.target.scopeId
+                  @model.sessionRecording.target.id
+                }}
+                @text={{@model.sessionRecording.target.name}}
+              >
+                {{#if @model.sessionRecording.target.type}}
+                  <Hds::Badge @text={{@model.sessionRecording.target.type}} />
+                {{/if}}
+              </list.Item>
+            {{/if}}
+            {{! Bucket name }}
+            {{#if @model.storageBucket}}
+              <list.Item
+                @icon='cloud-check'
+                @color='boundary'
+                @route='scopes.scope.storage-buckets.storage-bucket'
+                @model={{array
+                  @model.storageBucket.scope.id
+                  @model.storageBucket.id
+                }}
+                @text={{@model.storageBucket.name}}
+              />
+            {{/if}}
+          </LinkListPanel>
         </div>
       </sb.Sidebar>
     </Layout::Sidebar>
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
index 9c110729d..763f0ce11 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/index.hbs
@@ -93,26 +93,55 @@
               </list.Item>
             </MetadataList>
           </div>
-          {{! Related }}
+
+          {{! Related information }}
           <div>
             <h3>{{t 'resources.session-recording.related'}}</h3>
-            {{! User name }}
-            <p>
-              <FlightIcon @name='user' />
+            <LinkListPanel as |list|>
+              {{! User name }}
               {{#if @model.sessionRecording.user}}
-                {{@model.sessionRecording.userDisplayName}}
+                <list.Item
+                  @icon='user'
+                  @color='boundary'
+                  @route='scopes.scope.users.user'
+                  @model={{array
+                    @model.sessionRecording.user.scopeId
+                    @model.sessionRecording.user.id
+                  }}
+                  @text={{@model.sessionRecording.userDisplayName}}
+                />
               {{/if}}
-            </p>
-            {{! Target name }}
-            <p>
-              <FlightIcon @name='target' />
-              {{@model.sessionRecording.target.name}}
-            </p>
-            {{! Bucket name }}
-            <p>
-              <FlightIcon @name='cloud-check' />
-              {{@model.storageBucket.name}}
-            </p>
+              {{! Target name }}
+              {{#if @model.sessionRecording.target}}
+                <list.Item
+                  @icon='target'
+                  @color='boundary'
+                  @route='scopes.scope.targets.target'
+                  @model={{array
+                    @model.sessionRecording.target.scopeId
+                    @model.sessionRecording.target.id
+                  }}
+                  @text={{@model.sessionRecording.target.name}}
+                >
+                  {{#if @model.sessionRecording.target.type}}
+                    <Hds::Badge @text={{@model.sessionRecording.target.type}} />
+                  {{/if}}
+                </list.Item>
+              {{/if}}
+              {{! Bucket name }}
+              {{#if @model.storageBucket}}
+                <list.Item
+                  @icon='cloud-check'
+                  @color='boundary'
+                  @route='scopes.scope.storage-buckets.storage-bucket'
+                  @model={{array
+                    @model.storageBucket.scope.id
+                    @model.storageBucket.id
+                  }}
+                  @text={{@model.storageBucket.name}}
+                />
+              {{/if}}
+            </LinkListPanel>
           </div>
         </sb.Sidebar>
       </Layout::Sidebar>
diff --git a/ui/admin/tests/integration/components/link-list-panel/index-test.js b/ui/admin/tests/integration/components/link-list-panel/index-test.js
index f7133e2f2..14a47344a 100644
--- a/ui/admin/tests/integration/components/link-list-panel/index-test.js
+++ b/ui/admin/tests/integration/components/link-list-panel/index-test.js
@@ -47,4 +47,86 @@ module('Integration | Component | link-list-panel/index', function (hooks) {
     assert.dom('.link-list-item__text').hasText('Storage Bucket');
     assert.dom('li.link-list-item > a').doesNotExist();
   });
+
+  test('it renders link correctly supplying a single model', async function (assert) {
+    assert.expect(2);
+
+    // ScopeId global
+    this.modelA = { scopeId: 'global' };
+    await render(hbs`
+      <LinkListPanel as |P|>
+        <P.Item @route='scopes.scope.users' @model={{this.modelA.scopeId}}></P.Item>
+      </LinkListPanel>
+    `);
+    assert
+      .dom('li.link-list-item > a')
+      .hasAttribute('href', `/scopes/${this.modelA.scopeId}/users`);
+
+    // ScopeId org
+    this.modelB = { scopeId: 's_id6ozx3wue' };
+    await render(hbs`
+      <LinkListPanel as |P|>
+        <P.Item @route='scopes.scope.users' @model={{this.modelB.scopeId}}></P.Item>
+      </LinkListPanel>
+    `);
+    assert
+      .dom('li.link-list-item > a')
+      .hasAttribute('href', `/scopes/${this.modelB.scopeId}/users`);
+  });
+
+  test('it renders a link correctly supplying multiple models', async function (assert) {
+    assert.expect(2);
+    // ScopeId global
+    this.modelA = { scopeId: 'global', id: 'u_umasjqde46' };
+    await render(hbs`
+      <LinkListPanel as |P|>
+        <P.Item @route='scopes.scope.users.user' @model={{array this.modelA.scopeId this.modelA.id}}></P.Item>
+      </LinkListPanel>
+    `);
+    assert
+      .dom('li.link-list-item > a')
+      .hasAttribute(
+        'href',
+        `/scopes/${this.modelA.scopeId}/users/${this.modelA.id}`
+      );
+
+    // ScopeId org
+    this.modelB = { scopeId: 's_id6ozx3wue', id: 'u_umasjqde46' };
+    await render(hbs`
+      <LinkListPanel as |P|>
+        <P.Item @route='scopes.scope.users.user' @model={{array this.modelB.scopeId this.modelB.id}}></P.Item>
+      </LinkListPanel>
+    `);
+    assert
+      .dom('li.link-list-item > a')
+      .hasAttribute(
+        'href',
+        `/scopes/${this.modelB.scopeId}/users/${this.modelB.id}`
+      );
+  });
+
+  test('it renders multiple links correctly supplying a combination of single and multiple models', async function (assert) {
+    this.modelA = { scopeId: 's_id6ozx3wue' };
+    this.modelB = { scopeId: 's_id6ozx3wue', id: 'u_umasjqde46' };
+    this.modelC = { scopeId: 'global' };
+    await render(hbs`
+      <LinkListPanel as |P|>
+        <P.Item @route='scopes.scope.users' @model={{array this.modelA.scopeId}}></P.Item>
+        <P.Item @route='scopes.scope.users.user' @model={{array this.modelB.scopeId this.modelB.id}}></P.Item>
+        <P.Item @route='scopes.scope.users' @model={{array this.modelC.scopeId}}></P.Item>
+      </LinkListPanel>
+    `);
+    assert
+      .dom('li.link-list-item:nth-child(1) > a')
+      .hasAttribute('href', `/scopes/${this.modelA.scopeId}/users`);
+    assert
+      .dom('li.link-list-item:nth-child(2) > a')
+      .hasAttribute(
+        'href',
+        `/scopes/${this.modelB.scopeId}/users/${this.modelB.id}`
+      );
+    assert
+      .dom('li.link-list-item:nth-child(3) > a')
+      .hasAttribute('href', `/scopes/${this.modelC.scopeId}/users`);
+  });
 });