Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-19 01:17:18 +02:00
Code Issues Projects Releases Wiki Activity

fix: integration multiselector (#4683)

Browse Source 
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.
This commit is contained in:
Tymoteusz Czech 2023-09-14 14:01:40 +02:00 committed by GitHub
parent e8d5f0cf56
commit 257013c56a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.test.tsx
View File

@ -51,25 +51,21 @@ describe('AddonMultiSelector', () => {
it('can toggle "ALL" checkbox', async () => { it('can toggle "ALL" checkbox', async () => {
const user = userEvent.setup(); const user = userEvent.setup();
render( const { rerender } = render(
<IntegrationMultiSelector {...mockProps} selectedItems={['*']} /> <IntegrationMultiSelector {...mockProps} selectedItems={['*']} />
); );
await user.click(screen.getByTestId('select-all-projects')); await user.click(screen.getByTestId('select-all-projects'));
expect( expect(onChange).toHaveBeenCalledWith([]);
screen.getByLabelText(/all current and future projects/i)
).not.toBeChecked();
expect(screen.getByLabelText('Projects')).toBeEnabled(); rerender(
<IntegrationMultiSelector {...mockProps} selectedItems={[]} />
);
await user.click(screen.getByTestId('select-all-projects')); await user.click(screen.getByTestId('select-all-projects'));
expect( expect(onChange).toHaveBeenCalledWith(['*']);
screen.getByLabelText(/all current and future projects/i)
).toBeChecked();
expect(screen.getByLabelText('Projects')).toBeDisabled();
}); });
it('renders with autocomplete enabled if default value is not a wildcard', () => { it('renders with autocomplete enabled if default value is not a wildcard', () => {
@ -151,4 +147,22 @@ describe('AddonMultiSelector', () => {
expect(screen.queryByText('Alpha')).not.toBeInTheDocument(); 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();
});
}); });

9
frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
View File

@ -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 { IAutocompleteBoxOption } from '../../../common/AutocompleteBox/AutocompleteBox';
import { import {
AutocompleteRenderGroupParams, AutocompleteRenderGroupParams,
@ -55,9 +55,6 @@ export const IntegrationMultiSelector: VFC<IIntegrationMultiSelectorProps> = ({
description, description,
required, required,
}) => { }) => {
const [isWildcardSelected, selectWildcard] = useState(
selectedItems.includes(ALL_OPTIONS)
);
const renderInput = (params: AutocompleteRenderInputParams) => ( const renderInput = (params: AutocompleteRenderInputParams) => (
<TextField <TextField
{...params} {...params}
@ -76,15 +73,15 @@ export const IntegrationMultiSelector: VFC<IIntegrationMultiSelectorProps> = ({
selectedItems.length === options.length && selectedItems.length === options.length &&
selectedItems[0] !== ALL_OPTIONS; selectedItems[0] !== ALL_OPTIONS;
const isWildcardSelected = selectedItems.includes(ALL_OPTIONS);
const onAllItemsChange = ( const onAllItemsChange = (
e: ChangeEvent<HTMLInputElement>, e: ChangeEvent<HTMLInputElement>,
checked: boolean checked: boolean
) => { ) => {
if (checked) { if (checked) {
selectWildcard(true);
onChange([ALL_OPTIONS]); onChange([ALL_OPTIONS]);
} else { } else {
selectWildcard(false);
onChange(selectedItems.includes(ALL_OPTIONS) ? [] : selectedItems); onChange(selectedItems.includes(ALL_OPTIONS) ? [] : selectedItems);
} }
}; };