refactor: 💡 fix indexed-display-name for readability (#323)

* refactor: 💡 fix indexed-display-name for readability

* refactor: 💡 rename reverse-indexed-display-name helper

from indexed-display-name to reverse-indexed-display-name

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

@@ -1,16 +1,21 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 
-export function indexedDisplayName(intl, translation, array, item) {
+export function reverseIndexedDisplayName(intl, translation, array, item) {
   const length = array.length;
+  const position = array.indexOf(item);
+  let index = length - position;
 
-  let index = length - array.indexOf(item);
-  if (index > length) index = null;
+  // indexOf will return -1 if item not in array; if item not found
+  // in array index set to null to avoid displaying incorrect index
+  if (position === -1) {
+    index = null;
+  }
 
   return intl.t(translation, { index });
 }
 
-export default class IndexedDisplayName extends Helper {
+export default class ReverseIndexedDisplayName extends Helper {
   // =services
   @service intl;
 
@@ -21,9 +26,9 @@ export default class IndexedDisplayName extends Helper {
    * @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.
+   * @returns localized name for resource with indexed position. For example, "Channel 1" for last item in a list.
    */
   compute([translation, array, item]) {
-    return indexedDisplayName(this.intl, translation, array, item);
+    return reverseIndexedDisplayName(this.intl, translation, array, item);
   }
 }

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

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

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

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

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

@@ -4,14 +4,14 @@ 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) {
+module('Integration | Helper | reverse-indexed-display-name', function (hooks) {
   setupRenderingTest(hooks);
   setupIntl(hooks);
 
   test('it renders the resource name with its position in parent array reversed', async function (assert) {
     this.set('array', ['Boundary', 'is', 'cool!']);
 
-    await render(hbs`{{indexed-display-name
+    await render(hbs`{{reverse-indexed-display-name
       'resources.session-recording.connection.title_index'
       this.array
       'Boundary'
@@ -19,7 +19,7 @@ module('Integration | Helper | indexed-display-name', function (hooks) {
 
     assert.dom(this.element).hasText('Connection 3');
 
-    await render(hbs`{{indexed-display-name
+    await render(hbs`{{reverse-indexed-display-name
       'resources.session-recording.connection.title_index'
       this.array
       'is'
@@ -27,7 +27,7 @@ module('Integration | Helper | indexed-display-name', function (hooks) {
 
     assert.dom(this.element).hasText('Connection 2');
 
-    await render(hbs`{{indexed-display-name
+    await render(hbs`{{reverse-indexed-display-name
       'resources.session-recording.connection.title_index'
       this.array
       'cool!'
@@ -39,7 +39,7 @@ module('Integration | Helper | indexed-display-name', function (hooks) {
   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
+    await render(hbs`{{reverse-indexed-display-name
       'resources.session-recording.connection.title_index'
       this.array
       'Watchtower'

ui/admin/app/controllers/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { indexedDisplayName } from 'core/helpers/indexed-display-name';
+import { reverseIndexedDisplayName } from 'core/helpers/reverse-indexed-display-name';
 
 export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConnectionChannelController extends Controller {
   // =services
@@ -11,7 +11,7 @@ export default class ScopesScopeSessionRecordingsSessionRecordingChannelsByConne
    * Session recording channel breadcrumb
    */
   get breadCrumb() {
-    return indexedDisplayName(
+    return reverseIndexedDisplayName(
       this.intl,
       'resources.session-recording.channel.title_index',
       this.model.channelRecording.connection_recording.channel_recordings,

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

@@ -7,7 +7,7 @@
 
   <page.header class='channel-header'>
     <h2>
-      {{indexed-display-name
+      {{reverse-indexed-display-name
         'resources.session-recording.channel.title_index'
         @model.channelRecording.connection_recording.channel_recordings
         @model.channelRecording

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

@@ -46,7 +46,7 @@
             }}
               <div class='channels-by-connection-connection-header'>
                 <p class='hds-typography-display-300 hds-font-weight-semibold'>
-                  {{indexed-display-name
+                  {{reverse-indexed-display-name
                     'resources.session-recording.connection.title_index'
                     @model.sessionRecording.connection_recordings
                     connection
@@ -83,7 +83,7 @@
                     <B.Tr>
                       <B.Td>
                         <span>
-                          {{indexed-display-name
+                          {{reverse-indexed-display-name
                             'resources.session-recording.channel.title_index'
                             connection.channel_recordings
                             B.data