From 257013c56acdfaadd628067ee6bc0baf7ff8c60c Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 14 Sep 2023 14:01:40 +0200
Subject: [PATCH] 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.
---
 .../IntegrationMultiSelector.test.tsx         | 34 +++++++++++++------
 .../IntegrationMultiSelector.tsx              |  9 ++---
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.test.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.test.tsx
index f08ca7fe98..93c8349feb 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.test.tsx
+++ b/frontend/src/component/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/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
index 50d63e01cf..fa4591f455 100644
--- a/frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
+++ b/frontend/src/component/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);
         }
     };