From 49fb722a6849496b650fcfefccf990567fe9c3ea Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Tue, 2 May 2023 12:59:30 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20change=20Connection=20ti?=
 =?UTF-8?q?tles=20to=20Connection=201=20vs=20the=20ID=20(#234)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

✅ Closes: ICU-8667

* refactor: 💡 address PR feedback
---
 .../addon/helpers/indexed-display-name.js     | 24 +++++++++
 .../core/app/helpers/indexed-display-name.js  |  1 +
 .../helpers/indexed-display-name-test.js      | 50 +++++++++++++++++++
 addons/core/translations/resources/en-us.yaml |  1 +
 .../channels-by-connection/index.hbs          |  6 ++-
 5 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 addons/core/addon/helpers/indexed-display-name.js
 create mode 100644 addons/core/app/helpers/indexed-display-name.js
 create mode 100644 addons/core/tests/integration/helpers/indexed-display-name-test.js

diff --git a/addons/core/addon/helpers/indexed-display-name.js b/addons/core/addon/helpers/indexed-display-name.js
new file mode 100644
index 000000000..858880472
--- /dev/null
+++ b/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 });
+  }
+}
diff --git a/addons/core/app/helpers/indexed-display-name.js b/addons/core/app/helpers/indexed-display-name.js
new file mode 100644
index 000000000..f64b9508e
--- /dev/null
+++ b/addons/core/app/helpers/indexed-display-name.js
@@ -0,0 +1 @@
+export { default } from 'core/helpers/indexed-display-name';
diff --git a/addons/core/tests/integration/helpers/indexed-display-name-test.js b/addons/core/tests/integration/helpers/indexed-display-name-test.js
new file mode 100644
index 000000000..9e8c12950
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 29a308b23..ce6d8dc69 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/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:
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 60ba4d419..d8a1748f9 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
@@ -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}}