From 4b1cf5be5b01c315bd9c2e109964de0423406b57 Mon Sep 17 00:00:00 2001
From: Lukas Nys <nyslukas@gmail.com>
Date: Fri, 26 Jul 2024 16:51:27 +0200
Subject: [PATCH] Copy custom group properties in `group-utils` copyGroup
 function (#1843)

* fix: copy all properties of the group

* test: write tests for copyGroup function

* revert: revert copyGroup unit tests

* test: write integration test for issue

* test: add a test case for a single select

* fix(test): replace ensure-safe-component with component helper invocation

* ts: change Group interface to allow any property
---
 ember-power-select/src/utils/group-utils.ts   |  5 +-
 .../custom-group-component-with-variant.hbs   |  6 ++
 .../custom-group-component-with-variant.ts    | 16 +++++
 .../tests/integration/components/constants.js | 28 ++++++++
 .../components/power-select/groups-test.js    | 66 ++++++++++++++++++-
 5 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 test-app/app/components/custom-group-component-with-variant.hbs
 create mode 100644 test-app/app/components/custom-group-component-with-variant.ts

diff --git a/ember-power-select/src/utils/group-utils.ts b/ember-power-select/src/utils/group-utils.ts
index 72a20e7c6..439db9039 100644
--- a/ember-power-select/src/utils/group-utils.ts
+++ b/ember-power-select/src/utils/group-utils.ts
@@ -114,12 +114,13 @@ export function optionAtIndex(
 }
 
 export interface Group {
+  groupName: string;
   options: any[];
   disabled?: boolean;
-  groupName: string;
+  [key: string]: unknown;
 }
 function copyGroup(group: Group, suboptions: any[]): Group {
-  const groupCopy: Group = { groupName: group.groupName, options: suboptions };
+  const groupCopy: Group = { ...group, options: suboptions };
   if (Object.prototype.hasOwnProperty.call(group, 'disabled')) {
     groupCopy.disabled = group.disabled;
   }
diff --git a/test-app/app/components/custom-group-component-with-variant.hbs b/test-app/app/components/custom-group-component-with-variant.hbs
new file mode 100644
index 000000000..383f0b318
--- /dev/null
+++ b/test-app/app/components/custom-group-component-with-variant.hbs
@@ -0,0 +1,6 @@
+<div>
+  <span data-test-id="group-component-variant">{{@group.variant}}</span>
+  -
+  <span data-test-id="group-component-group-name">{{@group.groupName}}</span>
+</div>
+<div class="custom-component">{{yield}}</div>
\ No newline at end of file
diff --git a/test-app/app/components/custom-group-component-with-variant.ts b/test-app/app/components/custom-group-component-with-variant.ts
new file mode 100644
index 000000000..4bc721dc4
--- /dev/null
+++ b/test-app/app/components/custom-group-component-with-variant.ts
@@ -0,0 +1,16 @@
+import templateOnly from '@ember/component/template-only';
+
+export interface CustomGroupComponentWithVariantSignature {
+  Element: Element;
+  Args: {
+    group: {
+      groupName: string;
+      variant: string;
+    };
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default templateOnly<CustomGroupComponentWithVariantSignature>();
diff --git a/test-app/tests/integration/components/constants.js b/test-app/tests/integration/components/constants.js
index 217085113..0c35bff8f 100644
--- a/test-app/tests/integration/components/constants.js
+++ b/test-app/tests/integration/components/constants.js
@@ -95,6 +95,34 @@ export const groupedNumbersWithDisabled = [
   'one thousand',
 ];
 
+export const groupedNumbersWithCustomProperty = [
+  { groupName: 'Smalls', variant: 'Primary', options: ['one', 'two', 'three'] },
+  {
+    groupName: 'Mediums',
+    variant: 'Secondary',
+    options: ['four', 'five', 'six'],
+  },
+  {
+    groupName: 'Bigs',
+    variant: 'Primary',
+    options: [
+      {
+        groupName: 'Fairly big',
+        variant: 'Secondary',
+        options: ['seven', 'eight', 'nine'],
+      },
+      {
+        groupName: 'Really big',
+        variant: 'Primary',
+        options: ['ten', 'eleven', 'twelve'],
+      },
+      'thirteen',
+    ],
+  },
+  'one hundred',
+  'one thousand',
+];
+
 export const namesStartingWithA = [
   'Abigail',
   'Abril',
diff --git a/test-app/tests/integration/components/power-select/groups-test.js b/test-app/tests/integration/components/power-select/groups-test.js
index 5e47021c2..34a1ddb71 100644
--- a/test-app/tests/integration/components/power-select/groups-test.js
+++ b/test-app/tests/integration/components/power-select/groups-test.js
@@ -6,7 +6,7 @@ import {
   typeInSearch,
   clickTrigger,
 } from 'ember-power-select/test-support/helpers';
-import { groupedNumbers } from '../constants';
+import { groupedNumbers, groupedNumbersWithCustomProperty } from '../constants';
 
 module(
   'Integration | Component | Ember Power Select (Groups)',
@@ -138,6 +138,70 @@ module(
       );
     });
 
+    test('When filtering, all properties of the options remain available for a single select', async function (assert) {
+      this.groupedNumbersWithCustomProperty = groupedNumbersWithCustomProperty;
+
+      await render(hbs`
+        <PowerSelect @options={{this.groupedNumbersWithCustomProperty}} @onChange={{fn (mut this.foo)}} @searchEnabled={{true}} @groupComponent={{component "custom-group-component-with-variant"}} as |option|>
+          {{option}}
+        </PowerSelect>
+      `);
+
+      await clickTrigger();
+
+      const variants = Array.from(
+        document.querySelectorAll('[data-test-id="group-component-variant"]'),
+      ).map((e) => e.textContent.trim());
+
+      assert.deepEqual(variants, [
+        'Primary',
+        'Secondary',
+        'Primary',
+        'Secondary',
+        'Primary',
+      ]);
+
+      await typeInSearch('one');
+
+      assert
+        .dom('[data-test-id="group-component-variant"]')
+        .exists({ count: 1 });
+
+      assert.dom('[data-test-id="group-component-variant"]').hasText('Primary');
+    });
+
+    test('When filtering, all properties of the options remain available for a multi select', async function (assert) {
+      this.groupedNumbersWithCustomProperty = groupedNumbersWithCustomProperty;
+
+      await render(hbs`
+       <PowerSelectMultiple @options={{this.groupedNumbersWithCustomProperty}} @onChange={{fn (mut this.foo)}} @searchEnabled={{true}} @groupComponent={{component "custom-group-component-with-variant"}} as |option|>
+          {{option}}
+        </PowerSelectMultiple>
+      `);
+
+      await clickTrigger();
+
+      const variants = Array.from(
+        document.querySelectorAll('[data-test-id="group-component-variant"]'),
+      ).map((e) => e.textContent.trim());
+
+      assert.deepEqual(variants, [
+        'Primary',
+        'Secondary',
+        'Primary',
+        'Secondary',
+        'Primary',
+      ]);
+
+      await typeInSearch('one');
+
+      assert
+        .dom('[data-test-id="group-component-variant"]')
+        .exists({ count: 1 });
+
+      assert.dom('[data-test-id="group-component-variant"]').hasText('Primary');
+    });
+
     test('Click on an option of a group select selects the option and closes the dropdown', async function (assert) {
       assert.expect(2);