From a65948de6970cfb386ed0558bc0ac122cddfdf4c Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Mon, 28 Feb 2022 14:45:52 -0500
Subject: [PATCH] Add unique row id to subscription modal list items

---
 .../SubscriptionEdit/SubscriptionModal.js     | 32 +++++++++----------
 .../SubscriptionModal.test.js                 |  8 ++---
 .../SubscriptionEdit/SubscriptionStep.js      |  2 +-
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js
index 69ef9dc029..99a9c993af 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.js
@@ -47,6 +47,15 @@ function SubscriptionModal({
         subscriptionCreds.username,
         subscriptionCreds.password
       );
+
+      // Ensure unique ids for each subscription
+      // because it is possible to have multiple
+      // subscriptions with the same pool_id
+      let repeatId = 1;
+      data.forEach((i) => {
+        i.id = repeatId++;
+      });
+
       return data;
     }, []), // eslint-disable-line react-hooks/exhaustive-deps
     []
@@ -64,17 +73,9 @@ function SubscriptionModal({
     fetchSubscriptions();
   }, [fetchSubscriptions]);
 
-  const handleSelect = (item) => {
-    if (selected.some((s) => s.pool_id === item.pool_id)) {
-      setSelected(selected.filter((s) => s.pool_id !== item.pool_id));
-    } else {
-      setSelected(selected.concat(item));
-    }
-  };
-
   useEffect(() => {
-    if (selectedSubscription?.pool_id) {
-      handleSelect({ pool_id: selectedSubscription.pool_id });
+    if (selectedSubscription?.id) {
+      setSelected([selectedSubscription]);
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -150,19 +151,18 @@ function SubscriptionModal({
           <Tbody>
             {subscriptions.map((subscription) => (
               <Tr
-                key={`row-${subscription.pool_id}`}
-                id={subscription.pool_id}
+                key={`row-${subscription.id}`}
+                id={`row-${subscription.id}`}
                 ouiaId={`subscription-row-${subscription.pool_id}`}
               >
                 <Td
-                  key={`row-${subscription.pool_id}`}
                   select={{
-                    onSelect: () => handleSelect(subscription),
+                    onSelect: () => setSelected([subscription]),
                     isSelected: selected.some(
-                      (row) => row.pool_id === subscription.pool_id
+                      (row) => row.id === subscription.id
                     ),
                     variant: 'radio',
-                    rowIndex: `row-${subscription.pool_id}`,
+                    rowIndex: `row-${subscription.id}`,
                   }}
                 />
                 <Td dataLabel={t`Trial`}>{subscription.subscription_name}</Td>
diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.test.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.test.js
index 6667a776ff..4c8fa843f2 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.test.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.test.js
@@ -125,14 +125,14 @@ describe('<SubscriptionModal />', () => {
             password: '$encrypted',
           }}
           selectedSubscription={{
-            pool_id: 8,
+            id: 2,
           }}
         />
       );
       await waitForElement(wrapper, 'table');
-      expect(wrapper.find('tr[id=7] input').prop('checked')).toBe(false);
-      expect(wrapper.find('tr[id=8] input').prop('checked')).toBe(true);
-      expect(wrapper.find('tr[id=9] input').prop('checked')).toBe(false);
+      expect(wrapper.find('tr[id="row-1"] input').prop('checked')).toBe(false);
+      expect(wrapper.find('tr[id="row-2"] input').prop('checked')).toBe(true);
+      expect(wrapper.find('tr[id="row-3"] input').prop('checked')).toBe(false);
     });
   });
 
diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js
index 2d9aebc631..333a7939fd 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionStep.js
@@ -227,7 +227,7 @@ function SubscriptionStep() {
                   username: username.value,
                   password: password.value,
                 }}
-                selectedSubscripion={subscription?.value}
+                selectedSubscription={subscription?.value}
                 onClose={closeModal}
                 onConfirm={(value) => subscriptionHelpers.setValue(value)}
               />