feat: 🎸 change Connection titles to Connection 1 vs the ID (#234)

* feat: 🎸 change Connection titles to Connection 1 vs the ID

✅ Closes: ICU-8667

* refactor: 💡 address PR feedback

addons/core/addon/helpers/indexed-display-name.js

@@ -0,0 +1,24 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+
+export default class extends Helper {
+  // =services
+  @service intl;
+
+  // =methods
+  /**
+   *
+   * @param {string} translation
+   * @param {Array} array parent array of item
+   * @param {object} item object that you want to find the index of
+   * indexOf will not do a deep equality check with item, just if the object exist in the array
+   * @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 });
+  }
+}

addons/core/app/helpers/indexed-display-name.js

@@ -0,0 +1 @@
+export { default } from 'core/helpers/indexed-display-name';

addons/core/tests/integration/helpers/indexed-display-name-test.js

@@ -0,0 +1,50 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Helper | indexed-display-name', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  test('it renders the resource name with its position in parent array', async function (assert) {
+    this.set('array', ['Boundary', 'is', 'cool!']);
+
+    await render(hbs`{{indexed-display-name
+      'resources.session-recording.connection.title_index'
+      this.array
+      'Boundary'
+    }}`);
+
+    assert.dom(this.element).hasText('Connection 1');
+
+    await render(hbs`{{indexed-display-name
+      'resources.session-recording.connection.title_index'
+      this.array
+      'is'
+    }}`);
+
+    assert.dom(this.element).hasText('Connection 2');
+
+    await render(hbs`{{indexed-display-name
+      'resources.session-recording.connection.title_index'
+      this.array
+      'cool!'
+    }}`);
+
+    assert.dom(this.element).hasText('Connection 3');
+  });
+
+  test('it does not render the position if the index cannot be found', async function (assert) {
+    this.set('array', ['Boundary', 'is', 'cool!']);
+
+    await render(hbs`{{indexed-display-name
+      'resources.session-recording.connection.title_index'
+      this.array
+      'Watchtower'
+    }}`);
+
+    assert.dom(this.element).hasText('Connection');
+  });
+});

addons/core/translations/resources/en-us.yaml

@@ -219,6 +219,7 @@ session-recording:
   related: Related
   connection:
     title: Connection
+    title_index: Connection {index}
     title_plural: Connections
     form:
       channel:

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs

@@ -17,7 +17,11 @@
           }}
             <div class='channels-by-connection-connection-header'>
               <p class='hds-typography-display-300 hds-font-weight-semibold'>
-                {{t 'resources.session-recording.connection.title'}}
+                {{indexed-display-name
+                  'resources.session-recording.connection.title_index'
+                  @model.sessionRecording.sortedConnectionsByStartTimeDesc
+                  connection
+                }}
               </p>
               <Copyable
                 @text={{connection.id}}