Merge pull request #11830 from marshmalien/fix-duplicate-keys-subscription-modal

Add unique row id to subscription modal list items
This commit is contained in:
Tiago Góes 2022-03-08 11:48:58 -03:00 committed by GitHub
commit 82d91f8dbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 21 deletions

View File

@ -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>

View File

@ -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);
});
});

View File

@ -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)}
/>