From 7c06d7f2d41a1672d8ee5b74d56f8faf4a53e243 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 3 May 2023 11:03:48 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Update=20Channel=20ident?=
 =?UTF-8?q?ifiers=20and=20breadcrumb=20(#235)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 Update Channel identifiers and breadcrumb

* refactor: 💡 updates after PR feedback

* refactor: 💡 remove unneeded function

* refactor: 💡 move all of indexedDisplayName into plain function
---
 addons/core/addon/helpers/indexed-display-name.js | 15 +++++++++------
 addons/core/translations/resources/en-us.yaml     |  1 +
 .../channels-by-connection/channel.js             |  9 ++++++++-
 .../channels-by-connection/channel.hbs            |  8 +++++++-
 .../channels-by-connection/index.hbs              |  8 +++++++-
 5 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/addons/core/addon/helpers/indexed-display-name.js b/addons/core/addon/helpers/indexed-display-name.js
index 858880472..71eafbcfc 100644
--- a/addons/core/addon/helpers/indexed-display-name.js
+++ b/addons/core/addon/helpers/indexed-display-name.js
@@ -1,7 +1,14 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 
-export default class extends Helper {
+export function indexedDisplayName(intl, translation, array, item) {
+  let index = array.indexOf(item) + 1;
+  if (index === 0) index = null;
+
+  return intl.t(translation, { index });
+}
+
+export default class IndexedDisplayName extends Helper {
   // =services
   @service intl;
 
@@ -15,10 +22,6 @@ export default class extends Helper {
    * @returns localized name for resource with indexed position. For example, "Channel 1" for first item in a list.
    */
   compute([translation, array, item]) {
-    let index = array.indexOf(item) + 1;
-    if (index === 0) {
-      index = null;
-    }
-    return this.intl.t(translation, { index });
+    return indexedDisplayName(this.intl, translation, array, item);
   }
 }
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index ce6d8dc69..deb15d17b 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -230,6 +230,7 @@ session-recording:
     title: Channels by connection
   channel:
     title: Channel
+    title_index: Channel {index}
     title_plural: Channels
     details: Channel details
     messages:
diff --git a/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js
index 941c9f3a0..9d06e0ba8 100644
--- a/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js
+++ b/ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js
@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { indexedDisplayName } from 'core/helpers/indexed-display-name';
 
 export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConnectionChannelController extends Controller {
   // =services
@@ -10,6 +11,12 @@ export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConne
    * Session recording channel breadcrumb
    */
   get breadCrumb() {
-    return this.model.channelRecording.id;
+    return indexedDisplayName(
+      this.intl,
+      'resources.session-recording.channel.title_index',
+      this.model.channelRecording.connection_recording
+        .sortedChannelsByStartTimeDesc,
+      this.model.channelRecording
+    );
   }
 }
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 eefef0468..cc3831041 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
@@ -6,7 +6,13 @@
   </page.breadcrumbs>
 
   <page.header class='channel-header'>
-    <h2>{{t 'resources.session-recording.channel.title'}}</h2>
+    <h2>
+      {{indexed-display-name
+        'resources.session-recording.channel.title_index'
+        @model.channelRecording.connection_recording.sortedChannelsByStartTimeDesc
+        @model.channelRecording
+      }}
+    </h2>
     <Copyable
       @text={{@model.channelRecording.id}}
       @buttonText={{t 'actions.copy-to-clipboard'}}
diff --git a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
index d8a1748f9..97bdb5a59 100644
--- a/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs
@@ -52,7 +52,13 @@
               <:body as |B|>
                 <B.Tr>
                   <B.Td>
-                    <span>{{B.data.id}}</span>
+                    <span>
+                      {{indexed-display-name
+                        'resources.session-recording.channel.title_index'
+                        connection.sortedChannelsByStartTimeDesc
+                        B.data
+                      }}
+                    </span>
                   </B.Td>
                   <B.Td>
                     <MetadataList as |list|>