<section className="big-spacer-top big-spacer-bottom">
<ul className="bt-search-form">
<li>
- <h6 className="bt-search-form-label">{translate('status')}</h6>
+ <h6 id="background-task-status-filter-label" className="bt-search-form-label">
+ {translate('status')}
+ </h6>
<StatusFilter onChange={this.handleStatusChange} value={status} />
</li>
{types.length > 1 && (
<li>
- <h6 className="bt-search-form-label">{translate('type')}</h6>
+ <h6 id="background-task-type-filter-label" className="bt-search-form-label">
+ {translate('type')}
+ </h6>
<TypesFilter onChange={this.handleTypeChange} types={types} value={taskType} />
</li>
)}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import Select, { BasicSelectOption } from '../../../components/controls/Select';
import { translate } from '../../../helpers/l10n';
import { TaskStatuses } from '../../../types/tasks';
import { STATUSES } from '../constants';
}
export default class StatusFilter extends React.PureComponent<Props> {
- handleChange = ({ value }: { value: string }) => {
+ handleChange = ({ value }: BasicSelectOption) => {
this.props.onChange(value);
};
render() {
- const options = [
+ const options: BasicSelectOption[] = [
{ value: STATUSES.ALL, label: translate('background_task.status.ALL') },
{
value: STATUSES.ALL_EXCEPT_PENDING,
];
return (
- <SelectLegacy
+ <Select
+ aria-labelledby="background-task-status-filter-label"
className="input-medium"
- clearable={false}
onChange={this.handleChange}
options={options}
searchable={false}
- value={this.props.value}
+ value={options.find(o => o.value === this.props.value)}
/>
);
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import Select, { BasicSelectOption } from '../../../components/controls/Select';
import { translate } from '../../../helpers/l10n';
import { ALL_TYPES } from '../constants';
}
export default class TypesFilter extends React.PureComponent<Props> {
- handleChange = ({ value }: { value: string }) => {
+ handleChange = ({ value }: BasicSelectOption) => {
this.props.onChange(value);
};
};
});
- const allOptions = [
+ const allOptions: BasicSelectOption[] = [
{ value: ALL_TYPES, label: translate('background_task.type.ALL') },
...options
];
return (
- <SelectLegacy
+ <Select
+ aria-labelledby="background-task-type-filter-label"
className="input-large"
clearable={false}
onChange={this.handleChange}
options={allOptions}
searchable={false}
- value={value}
+ value={allOptions.find(o => o.value === value)}
/>
);
}
import { setWorkerCount } from '../../../api/ce';
import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
import Modal from '../../../components/controls/Modal';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import Select from '../../../components/controls/Select';
import { Alert } from '../../../components/ui/Alert';
import { translate } from '../../../helpers/l10n';
contentLabel={translate('background_tasks.change_number_of_workers')}
onRequestClose={this.handleClose}>
<header className="modal-head">
- <h2>{translate('background_tasks.change_number_of_workers')}</h2>
+ <h2 id="background-task-workers-label">
+ {translate('background_tasks.change_number_of_workers')}
+ </h2>
</header>
<form onSubmit={this.handleSubmit}>
<div className="modal-body">
- <SelectLegacy
+ <Select
+ aria-labelledby="background-task-workers-label"
className="input-tiny spacer-top"
- clearable={false}
+ isSearchable={false}
onChange={this.handleWorkerCountChange}
options={options}
- searchable={false}
- value={this.state.newWorkerCount}
+ value={options.find(o => o.value === this.state.newWorkerCount)}
/>
<Alert className="big-spacer-top" variant="info">
{translate('background_tasks.change_number_of_workers.hint')}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import StatusFilter from '../StatusFilter';
+
+it('should render correctly', () => {
+ expect(shallowRender()).toMatchSnapshot('default');
+});
+
+it('should handle change', () => {
+ const onChange = jest.fn();
+ const wrapper = shallowRender({ onChange });
+
+ const newValue = 'status1';
+
+ wrapper.instance().handleChange({ value: newValue, label: 'Status 1' });
+
+ expect(onChange).toBeCalledWith(newValue);
+});
+
+function shallowRender(overrides: Partial<StatusFilter['props']> = {}) {
+ return shallow<StatusFilter>(<StatusFilter onChange={jest.fn()} {...overrides} />);
+}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2022 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import TypesFilter from '../TypesFilter';
+
+it('should render correctly', () => {
+ expect(shallowRender()).toMatchSnapshot('default');
+});
+
+it('should handle change', () => {
+ const onChange = jest.fn();
+ const wrapper = shallowRender({ onChange });
+
+ const newValue = 't1';
+
+ wrapper.instance().handleChange({ value: newValue, label: 'Type 1' });
+
+ expect(onChange).toBeCalledWith(newValue);
+});
+
+function shallowRender(overrides: Partial<TypesFilter['props']> = {}) {
+ return shallow<TypesFilter>(
+ <TypesFilter onChange={jest.fn()} types={['t1', 't2']} value="t2" {...overrides} />
+ );
+}
import { shallow } from 'enzyme';
import * as React from 'react';
-import SelectLegacy from '../../../../components/controls/SelectLegacy';
+import Select from '../../../../components/controls/Select';
import { submit } from '../../../../helpers/testUtils';
import WorkersForm from '../WorkersForm';
const wrapper = shallow(<WorkersForm onClose={jest.fn()} workerCount={1} />);
expect(wrapper).toMatchSnapshot();
- wrapper.find(SelectLegacy).prop<Function>('onChange')({ value: 7 });
+ wrapper.find(Select).prop<Function>('onChange')({ value: 7 });
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
const onClose = jest.fn();
const wrapper = shallow(<WorkersForm onClose={onClose} workerCount={1} />);
(wrapper.instance() as WorkersForm).mounted = true;
- wrapper.find(SelectLegacy).prop<Function>('onChange')({ value: 7 });
+ wrapper.find(Select).prop<Function>('onChange')({ value: 7 });
wrapper.update();
submit(wrapper.find('form'));
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: default 1`] = `
+<Select
+ aria-labelledby="background-task-status-filter-label"
+ className="input-medium"
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "background_task.status.ALL",
+ "value": "__ALL__",
+ },
+ Object {
+ "label": "background_task.status.ALL_EXCEPT_PENDING",
+ "value": "__ALL_EXCEPT_PENDING__",
+ },
+ Object {
+ "label": "background_task.status.PENDING",
+ "value": "PENDING",
+ },
+ Object {
+ "label": "background_task.status.IN_PROGRESS",
+ "value": "IN_PROGRESS",
+ },
+ Object {
+ "label": "background_task.status.SUCCESS",
+ "value": "SUCCESS",
+ },
+ Object {
+ "label": "background_task.status.FAILED",
+ "value": "FAILED",
+ },
+ Object {
+ "label": "background_task.status.CANCELED",
+ "value": "CANCELED",
+ },
+ ]
+ }
+ searchable={false}
+/>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly: default 1`] = `
+<Select
+ aria-labelledby="background-task-type-filter-label"
+ className="input-large"
+ clearable={false}
+ onChange={[Function]}
+ options={
+ Array [
+ Object {
+ "label": "background_task.type.ALL",
+ "value": "ALL_TYPES",
+ },
+ Object {
+ "label": "background_task.type.t1",
+ "value": "t1",
+ },
+ Object {
+ "label": "background_task.type.t2",
+ "value": "t2",
+ },
+ ]
+ }
+ searchable={false}
+ value={
+ Object {
+ "label": "background_task.type.t2",
+ "value": "t2",
+ }
+ }
+/>
+`;
<header
className="modal-head"
>
- <h2>
+ <h2
+ id="background-task-workers-label"
+ >
background_tasks.change_number_of_workers
</h2>
</header>
<div
className="modal-body"
>
- <SelectLegacy
+ <Select
+ aria-labelledby="background-task-workers-label"
className="input-tiny spacer-top"
- clearable={false}
+ isSearchable={false}
onChange={[Function]}
options={
Array [
},
]
}
- searchable={false}
- value={1}
+ value={
+ Object {
+ "label": "1",
+ "value": 1,
+ }
+ }
/>
<Alert
className="big-spacer-top"
<header
className="modal-head"
>
- <h2>
+ <h2
+ id="background-task-workers-label"
+ >
background_tasks.change_number_of_workers
</h2>
</header>
<div
className="modal-body"
>
- <SelectLegacy
+ <Select
+ aria-labelledby="background-task-workers-label"
className="input-tiny spacer-top"
- clearable={false}
+ isSearchable={false}
onChange={[Function]}
options={
Array [
},
]
}
- searchable={false}
- value={7}
+ value={
+ Object {
+ "label": "7",
+ "value": 7,
+ }
+ }
/>
<Alert
className="big-spacer-top"