mirror of
https://github.com/ansible/awx.git
synced 2024-10-30 22:21:13 +03:00
Merge pull request #4511 from AlexSCorey/multiSelecBug
Allows user to hit enter to create label, fixes console errors. Reviewed-by: Jake McDermott <yo@jakemcdermott.me> https://github.com/jakemcdermott
This commit is contained in:
commit
3d4cd1b575
@ -86,7 +86,7 @@ class MultiSelect extends Component {
|
||||
this.handleSelection(e, option);
|
||||
}
|
||||
} else {
|
||||
this.setState({ isExpanded: false });
|
||||
this.setState({ input: '', isExpanded: false });
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,17 +105,30 @@ class MultiSelect extends Component {
|
||||
handleAddItem(event) {
|
||||
const { input, chipItems } = this.state;
|
||||
const { onAddNewItem } = this.props;
|
||||
const newChip = { name: input, id: Math.random() };
|
||||
if (event.key !== 'Tab') {
|
||||
const isIncluded = chipItems.some(chipItem => chipItem.name === input);
|
||||
|
||||
if (!input) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
chipItems: chipItems.concat(newChip),
|
||||
isExpanded: false,
|
||||
input: '',
|
||||
});
|
||||
|
||||
onAddNewItem(input);
|
||||
if (isIncluded) {
|
||||
// This event.preventDefault prevents the form from submitting
|
||||
// if the user tries to create 2 chips of the same name
|
||||
event.preventDefault();
|
||||
this.setState({ input: '', isExpanded: false });
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
this.setState({
|
||||
chipItems: chipItems.concat({ name: input, id: input }),
|
||||
isExpanded: false,
|
||||
input: '',
|
||||
});
|
||||
onAddNewItem(input);
|
||||
} else if (event.key === 'Tab') {
|
||||
this.setState({ input: '' });
|
||||
}
|
||||
}
|
||||
|
||||
handleInputChange(e) {
|
||||
|
@ -40,10 +40,10 @@ describe('<MultiSelect />', () => {
|
||||
const component = wrapper.find('MultiSelect');
|
||||
component
|
||||
.find('input[aria-label="labels"]')
|
||||
.simulate('keydown', { key: 'Tab' });
|
||||
.simulate('keydown', { key: 'Enter' });
|
||||
component.update();
|
||||
await sleep(1);
|
||||
expect(component.state().chipItems.length).toBe(3);
|
||||
expect(component.state().chipItems.length).toBe(2);
|
||||
});
|
||||
test('handleAddItem adds a chip only when Tab is pressed', () => {
|
||||
const onAddNewItem = jest.fn();
|
||||
@ -57,7 +57,7 @@ describe('<MultiSelect />', () => {
|
||||
);
|
||||
const event = {
|
||||
preventDefault: () => {},
|
||||
key: 'Tab',
|
||||
key: 'Enter',
|
||||
};
|
||||
const component = wrapper.find('MultiSelect');
|
||||
|
||||
|
@ -14,21 +14,47 @@ import JobTemplateForm from '../shared/JobTemplateForm';
|
||||
import { JobTemplatesAPI } from '@api';
|
||||
|
||||
function JobTemplateAdd({ history, i18n }) {
|
||||
const [error, setError] = useState(null);
|
||||
const [formSubmitError, setFormSubmitError] = useState(null);
|
||||
|
||||
const handleSubmit = async values => {
|
||||
setError(null);
|
||||
async function handleSubmit(values) {
|
||||
const { newLabels, removedLabels } = values;
|
||||
delete values.newLabels;
|
||||
delete values.removedLabels;
|
||||
|
||||
setFormSubmitError(null);
|
||||
try {
|
||||
const { data } = await JobTemplatesAPI.create(values);
|
||||
history.push(`/templates/${data.type}/${data.id}/details`);
|
||||
} catch (err) {
|
||||
setError(err);
|
||||
const {
|
||||
data: { id, type },
|
||||
} = await JobTemplatesAPI.create(values);
|
||||
await Promise.all([submitLabels(id, newLabels, removedLabels)]);
|
||||
history.push(`/templates/${type}/${id}/details`);
|
||||
} catch (error) {
|
||||
setFormSubmitError(error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
async function submitLabels(id, newLabels = [], removedLabels = []) {
|
||||
const disassociationPromises = removedLabels.map(label =>
|
||||
JobTemplatesAPI.disassociateLabel(id, label)
|
||||
);
|
||||
const associationPromises = newLabels
|
||||
.filter(label => !label.organization)
|
||||
.map(label => JobTemplatesAPI.associateLabel(id, label));
|
||||
const creationPromises = newLabels
|
||||
.filter(label => label.organization)
|
||||
.map(label => JobTemplatesAPI.generateLabel(id, label));
|
||||
|
||||
const results = await Promise.all([
|
||||
...disassociationPromises,
|
||||
...associationPromises,
|
||||
...creationPromises,
|
||||
]);
|
||||
return results;
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
history.push(`/templates`);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<PageSection>
|
||||
@ -44,7 +70,7 @@ function JobTemplateAdd({ history, i18n }) {
|
||||
handleSubmit={handleSubmit}
|
||||
/>
|
||||
</CardBody>
|
||||
{error ? <div>error</div> : ''}
|
||||
{formSubmitError ? <div>formSubmitError</div> : ''}
|
||||
</Card>
|
||||
</PageSection>
|
||||
);
|
||||
|
@ -158,7 +158,7 @@ describe('<JobTemplateForm />', () => {
|
||||
_JobTemplateForm.prototype,
|
||||
'handleNewLabel'
|
||||
);
|
||||
const event = { key: 'Tab' };
|
||||
const event = { key: 'Enter', preventDefault: () => {} };
|
||||
const wrapper = mountWithContexts(
|
||||
<JobTemplateForm
|
||||
template={mockData}
|
||||
|
Loading…
Reference in New Issue
Block a user