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

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