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( ); 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( + + ); 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( + + ); + + expect( + screen.getByLabelText(/all current and future projects/i) + ).not.toBeChecked(); + + rerender( + + ); + + 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 = ({ description, required, }) => { - const [isWildcardSelected, selectWildcard] = useState( - selectedItems.includes(ALL_OPTIONS) - ); const renderInput = (params: AutocompleteRenderInputParams) => ( = ({ selectedItems.length === options.length && selectedItems[0] !== ALL_OPTIONS; + const isWildcardSelected = selectedItems.includes(ALL_OPTIONS); + const onAllItemsChange = ( e: ChangeEvent, checked: boolean ) => { if (checked) { - selectWildcard(true); onChange([ALL_OPTIONS]); } else { - selectWildcard(false); onChange(selectedItems.includes(ALL_OPTIONS) ? [] : selectedItems); } };