fix: integration multiselector (#4683)

Input should use state set outside and derive "all selected" from it. This was not the case causing issues when loading a form with "wildcard" pre-selected.
Unleash · Sep 14, 2023 · 257013c · 257013c
1 parent e8d5f0c
commit 257013c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/...t/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.test.tsx b/...t/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.test.tsx
@@ -51,25 +51,21 @@ describe('AddonMultiSelector', () => {
 
     it('can toggle "ALL" checkbox', async () => {
         const user = userEvent.setup();
-        render(
+        const { rerender } = render(
             <IntegrationMultiSelector {...mockProps} selectedItems={['*']} />
         );
 
         await user.click(screen.getByTestId('select-all-projects'));
 
-        expect(
-            screen.getByLabelText(/all current and future projects/i)
-        ).not.toBeChecked();
+        expect(onChange).toHaveBeenCalledWith([]);
 
-        expect(screen.getByLabelText('Projects')).toBeEnabled();
+        rerender(
+            <IntegrationMultiSelector {...mockProps} selectedItems={[]} />
+        );
 
         await user.click(screen.getByTestId('select-all-projects'));
 
-        expect(
-            screen.getByLabelText(/all current and future projects/i)
-        ).toBeChecked();
-
-        expect(screen.getByLabelText('Projects')).toBeDisabled();
+        expect(onChange).toHaveBeenCalledWith(['*']);
     });
 
     it('renders with autocomplete enabled if default value is not a wildcard', () => {
@@ -151,4 +147,22 @@ describe('AddonMultiSelector', () => {
             expect(screen.queryByText('Alpha')).not.toBeInTheDocument();
         });
     });
+
+    it('will load wildcard status from props', async () => {
+        const { rerender } = render(
+            <IntegrationMultiSelector {...mockProps} selectedItems={[]} />
+        );
+
+        expect(
+            screen.getByLabelText(/all current and future projects/i)
+        ).not.toBeChecked();
+
+        rerender(
+            <IntegrationMultiSelector {...mockProps} selectedItems={['*']} />
+        );
+
+        expect(
+            screen.getByLabelText(/all current and future projects/i)
+        ).toBeChecked();
+    });
 });
diff --git a/...ponent/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx b/...ponent/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, Fragment, useState, VFC } from 'react';
+import React, { ChangeEvent, Fragment, VFC } from 'react';
 import { IAutocompleteBoxOption } from '../../../common/AutocompleteBox/AutocompleteBox';
 import {
     AutocompleteRenderGroupParams,
@@ -55,9 +55,6 @@ export const IntegrationMultiSelector: VFC<IIntegrationMultiSelectorProps> = ({
     description,
     required,
 }) => {
-    const [isWildcardSelected, selectWildcard] = useState(
-        selectedItems.includes(ALL_OPTIONS)
-    );
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <TextField
             {...params}
@@ -76,15 +73,15 @@ export const IntegrationMultiSelector: VFC<IIntegrationMultiSelectorProps> = ({
         selectedItems.length === options.length &&
         selectedItems[0] !== ALL_OPTIONS;
 
+    const isWildcardSelected = selectedItems.includes(ALL_OPTIONS);
+
     const onAllItemsChange = (
         e: ChangeEvent<HTMLInputElement>,
         checked: boolean
     ) => {
         if (checked) {
-            selectWildcard(true);
             onChange([ALL_OPTIONS]);
         } else {
-            selectWildcard(false);
             onChange(selectedItems.includes(ALL_OPTIONS) ? [] : selectedItems);
         }
     };