feat: 🎸 Update Channel identifiers and breadcrumb (#235)

* 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

@@ -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);
   }
 }

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:

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

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'}}

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|>