* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import { components, InputProps, OptionProps } from 'react-select';
+import Select from '../../../components/controls/Select';
import { translate } from '../../../helpers/l10n';
import { Dict, RawQuery } from '../../../types/types';
this.props.onQueryChange({ [this.props.property]: urlOptions });
};
+ optionRenderer = (props: OptionProps<{ value: string }, false>) => (
+ <components.Option
+ {...props}
+ className={'Select-option ' + (props.isFocused ? 'is-focused' : '')}
+ />
+ );
+
+ inputRenderer = (props: InputProps) => (
+ <components.Input {...props} className="it__searchable-footer-select-input" />
+ );
+
render() {
return (
<div className="search-navigator-facet-footer projects-facet-footer">
- <SelectLegacy
+ <Select
className="input-super-large"
- clearable={false}
isLoading={this.props.isLoading}
onChange={this.handleOptionChange}
onInputChange={this.props.onInputChange}
onOpen={this.props.onOpen}
+ components={{
+ Option: this.optionRenderer,
+ Input: this.inputRenderer
+ }}
options={this.props.options}
placeholder={translate('search_verb')}
- searchable={true}
/>
</div>
);
*/
import { shallow } from 'enzyme';
import * as React from 'react';
-import SelectLegacy from '../../../../components/controls/SelectLegacy';
+import { SelectComponentsProps } from 'react-select/src/Select';
+import {
+ mockReactSelectInputProps,
+ mockReactSelectOptionProps
+} from '../../../../helpers/mocks/react-select';
+import Select from '../../../../components/controls/Select';
import SearchableFilterFooter from '../SearchableFilterFooter';
const options = [
query={{ languages: ['java'] }}
/>
);
- expect(wrapper.find(SelectLegacy).prop('options')).toMatchSnapshot();
+ expect(wrapper.find<SelectComponentsProps>(Select).props().options).toMatchSnapshot();
});
it('should properly handle a change of the facet value', () => {
query={{ languages: ['java'] }}
/>
);
- (wrapper.find(SelectLegacy).prop('onChange') as Function)({ value: 'js' });
+ wrapper.find(Select).simulate('change', { value: 'js' });
expect(onQueryChange).toBeCalledWith({ languages: 'java,js' });
});
+
+it('renders optionrenderer and inputrenderer', () => {
+ const wrapper = shallow<SearchableFilterFooter>(
+ <SearchableFilterFooter
+ onQueryChange={jest.fn()}
+ options={options}
+ property="languages"
+ query={{ languages: ['java'] }}
+ />
+ );
+ const OptionRendererer = wrapper.instance().optionRenderer;
+ const InputRendererer = wrapper.instance().inputRenderer;
+ expect(
+ shallow(<OptionRendererer {...mockReactSelectOptionProps({ value: 'val' })} />)
+ ).toMatchSnapshot('option renderer');
+ expect(shallow(<InputRendererer {...mockReactSelectInputProps()} />)).toMatchSnapshot(
+ 'input renderer'
+ );
+});
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`renders optionrenderer and inputrenderer: input renderer 1`] = `
+<Input
+ className="it__searchable-footer-select-input"
+/>
+`;
+
+exports[`renders optionrenderer and inputrenderer: option renderer 1`] = `
+<Option
+ className="Select-option "
+ data={
+ Object {
+ "value": "val",
+ }
+ }
+/>
+`;
+
exports[`should render items without the ones in the facet 1`] = `
Array [
Object {
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { components, OptionProps } from 'react-select';
import { bulkApplyTemplate, getPermissionTemplates } from '../../api/permissions';
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 MandatoryFieldMarker from '../../components/ui/MandatoryFieldMarker';
import MandatoryFieldsExplanation from '../../components/ui/MandatoryFieldsExplanation';
</Alert>
);
- renderSelect = () => (
- <div className="modal-field">
- <label>
- {translate('template')}
- <MandatoryFieldMarker />
- </label>
- <SelectLegacy
- clearable={false}
- disabled={this.state.submitting}
- onChange={this.handlePermissionTemplateChange}
- options={this.state.permissionTemplates!.map(t => ({ label: t.name, value: t.id }))}
- value={this.state.permissionTemplate}
- />
- </div>
- );
+ renderSelect = () => {
+ const options =
+ this.state.permissionTemplates !== undefined
+ ? this.state.permissionTemplates.map(t => ({ label: t.name, value: t.id }))
+ : [];
+ return (
+ <div className="modal-field">
+ <label htmlFor="bulk-apply-template-input">
+ {translate('template')}
+ <MandatoryFieldMarker />
+ </label>
+ <Select
+ id="bulk-apply-template"
+ inputId="bulk-apply-template-input"
+ className="Select Select-value"
+ isDisabled={this.state.submitting}
+ onChange={this.handlePermissionTemplateChange}
+ components={{
+ Option: (props: OptionProps<{ value: string }, false>) => (
+ <components.Option {...props} className="Select-option" />
+ )
+ }}
+ options={options}
+ value={options.find(option => option.value === this.state.permissionTemplate)}
+ />
+ </div>
+ );
+ };
render() {
const { done, loading, permissionTemplates, submitting } = this.state;
*/
import { sortBy } from 'lodash';
import * as React from 'react';
+import { components, OptionProps, SingleValueProps } from 'react-select';
import { Project } from '../../api/components';
import withAppStateContext from '../../app/components/app-state/withAppStateContext';
import { Button } from '../../components/controls/buttons';
import DateInput from '../../components/controls/DateInput';
import HelpTooltip from '../../components/controls/HelpTooltip';
import SearchBox from '../../components/controls/SearchBox';
-import SelectLegacy from '../../components/controls/SelectLegacy';
+import Select from '../../components/controls/Select';
import QualifierIcon from '../../components/icons/QualifierIcon';
import { translate } from '../../helpers/l10n';
import { AppState } from '../../types/appstate';
handleVisibilityChange = ({ value }: { value: string }) => this.props.onVisibilityChanged(value);
+ optionRenderer = (props: OptionProps<{ value: string }, false>) => (
+ <components.Option {...props} className="Select-option">
+ {this.renderQualifierOption(props.data)}
+ </components.Option>
+ );
+
+ singleValueRenderer = (props: SingleValueProps<{ value: string }>) => (
+ <components.SingleValue {...props}>
+ {this.renderQualifierOption(props.data as { value: string; label: string })}
+ </components.SingleValue>
+ );
+
renderCheckbox = () => {
const isAllChecked =
this.props.projects.length > 0 && this.props.selection.length === this.props.projects.length;
};
renderQualifierOption = (option: { label: string; value: string }) => (
- <span>
+ <div className="display-flex-center">
<QualifierIcon className="little-spacer-right" qualifier={option.value} />
{option.label}
- </span>
+ </div>
);
renderQualifierFilter = () => {
}
return (
<td className="thin nowrap text-middle">
- <SelectLegacy
- className="input-medium"
- clearable={false}
+ <Select
+ className="input-medium Select"
disabled={!this.props.ready}
name="projects-qualifier"
onChange={this.handleQualifierChange}
- optionRenderer={this.renderQualifierOption}
+ isSearchable={false}
+ components={{
+ Option: this.optionRenderer,
+ SingleValue: this.singleValueRenderer
+ }}
options={this.getQualifierOptions()}
searchable={false}
- value={this.props.qualifiers}
- valueRenderer={this.renderQualifierOption}
+ value={options.find(option => option.value === this.props.qualifiers)}
/>
</td>
);
};
renderVisibilityFilter = () => {
+ const options = [
+ { value: 'all', label: translate('visibility.both') },
+ { value: 'public', label: translate('visibility.public') },
+ { value: 'private', label: translate('visibility.private') }
+ ];
return (
<td className="thin nowrap text-middle">
- <SelectLegacy
- className="input-small"
- clearable={false}
- disabled={!this.props.ready}
+ <Select
+ className="input-small Select"
+ isDisabled={!this.props.ready}
name="projects-visibility"
onChange={this.handleVisibilityChange}
- options={[
- { value: 'all', label: translate('visibility.both') },
- { value: 'public', label: translate('visibility.public') },
- { value: 'private', label: translate('visibility.private') }
- ]}
- searchable={false}
- value={this.props.visibility || 'all'}
+ components={{
+ Option: (props: OptionProps<{ value: string }, false>) => (
+ <components.Option {...props} className="Select-option" />
+ )
+ }}
+ options={options}
+ isSearchable={false}
+ value={options.find(option => option.value === (this.props.visibility || 'all'))}
/>
</td>
);
*/
import { shallow } from 'enzyme';
import * as React from 'react';
+import { SelectComponentsProps } from 'react-select/src/Select';
+import { mockReactSelectOptionProps } from '../../../helpers/mocks/react-select';
+import Select from '../../../components/controls/Select';
import { parseDate } from '../../../helpers/dates';
import { click, waitAndUpdate } from '../../../helpers/testUtils';
import BulkApplyTemplateModal, { Props } from '../BulkApplyTemplateModal';
expect(wrapper).toMatchSnapshot();
});
+it('renders optionrenderer', () => {
+ const wrapper = shallow(render({ qualifier: 'VW', selection: ['proj1', 'proj2'] }));
+ wrapper.setState({
+ loading: false,
+ permissionTemplate: 'foo',
+ permissionTemplates: [
+ { id: 'foo', name: 'Foo' },
+ { id: 'bar', name: 'Bar' }
+ ]
+ });
+ const wrapperSelect = wrapper.find<SelectComponentsProps>(Select);
+
+ const { Option } = wrapperSelect.props().components;
+
+ expect(<Option {...mockReactSelectOptionProps({ val: 'val' })} />).toMatchSnapshot(
+ 'option renderer'
+ );
+});
+
it('closes', () => {
const onClose = jest.fn();
const wrapper = shallow(render({ onClose }));
*/
import { shallow } from 'enzyme';
import * as React from 'react';
+import { mockReactSelectOptionProps } from '../../../helpers/mocks/react-select';
import { mockAppState } from '../../../helpers/testMocks';
import { click } from '../../../helpers/testUtils';
import { Props, Search } from '../Search';
onQualifierChanged,
appState: mockAppState({ qualifiers: ['TRK', 'VW', 'APP'] })
});
- wrapper.find('SelectLegacy[name="projects-qualifier"]').prop<Function>('onChange')({
+ wrapper.find('Select[name="projects-qualifier"]').simulate('change', {
value: 'VW'
});
expect(onQualifierChanged).toBeCalledWith('VW');
});
+it('renders optionrenderer and singlevaluerenderer', () => {
+ const wrapper = shallowRender({
+ appState: mockAppState({ qualifiers: ['TRK', 'VW', 'APP'] })
+ });
+ const OptionRendererer = wrapper.instance().optionRenderer;
+ const SingleValueRendererer = wrapper.instance().singleValueRenderer;
+ expect(
+ shallow(<OptionRendererer {...mockReactSelectOptionProps({ value: 'val' })} />)
+ ).toMatchSnapshot('option renderer');
+ expect(
+ shallow(<SingleValueRendererer {...mockReactSelectOptionProps({ value: 'val' })} />)
+ ).toMatchSnapshot('single value renderer');
+});
+
it('selects provisioned', () => {
const onProvisionedChanged = jest.fn();
const wrapper = shallowRender({ onProvisionedChanged });
});
function shallowRender(props?: { [P in keyof Props]?: Props[P] }) {
- return shallow(
+ return shallow<Search>(
<Search
analyzedBefore={undefined}
onAllDeselected={jest.fn()}
<div
className="modal-field"
>
- <label>
+ <label
+ htmlFor="bulk-apply-template-input"
+ >
template
<MandatoryFieldMarker />
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
+ <Select
+ className="Select Select-value"
+ components={
+ Object {
+ "Option": [Function],
+ }
+ }
+ id="bulk-apply-template"
+ inputId="bulk-apply-template-input"
+ isDisabled={false}
onChange={[Function]}
options={
Array [
},
]
}
- value="foo"
+ value={
+ Object {
+ "label": "Foo",
+ "value": "foo",
+ }
+ }
/>
</div>
</div>
<div
className="modal-field"
>
- <label>
+ <label
+ htmlFor="bulk-apply-template-input"
+ >
template
<MandatoryFieldMarker />
</label>
- <SelectLegacy
- clearable={false}
- disabled={true}
+ <Select
+ className="Select Select-value"
+ components={
+ Object {
+ "Option": [Function],
+ }
+ }
+ id="bulk-apply-template"
+ inputId="bulk-apply-template-input"
+ isDisabled={true}
onChange={[Function]}
options={
Array [
},
]
}
- value="foo"
+ value={
+ Object {
+ "label": "Foo",
+ "value": "foo",
+ }
+ }
/>
</div>
</div>
<div
className="modal-field"
>
- <label>
+ <label
+ htmlFor="bulk-apply-template-input"
+ >
template
<MandatoryFieldMarker />
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
+ <Select
+ className="Select Select-value"
+ components={
+ Object {
+ "Option": [Function],
+ }
+ }
+ id="bulk-apply-template"
+ inputId="bulk-apply-template-input"
+ isDisabled={false}
onChange={[Function]}
options={
Array [
},
]
}
- value="foo"
+ value={
+ Object {
+ "label": "Foo",
+ "value": "foo",
+ }
+ }
/>
</div>
</div>
<div
className="modal-field"
>
- <label>
+ <label
+ htmlFor="bulk-apply-template-input"
+ >
template
<MandatoryFieldMarker />
</label>
- <SelectLegacy
- clearable={false}
- disabled={true}
+ <Select
+ className="Select Select-value"
+ components={
+ Object {
+ "Option": [Function],
+ }
+ }
+ id="bulk-apply-template"
+ inputId="bulk-apply-template-input"
+ isDisabled={true}
onChange={[Function]}
options={
Array [
},
]
}
- value="foo"
+ value={
+ Object {
+ "label": "Foo",
+ "value": "foo",
+ }
+ }
/>
</div>
</div>
</footer>
</Modal>
`;
+
+exports[`renders optionrenderer: option renderer 1`] = `
+<Option
+ data={
+ Object {
+ "val": "val",
+ }
+ }
+/>
+`;
<td
className="thin nowrap text-middle"
>
- <SelectLegacy
- className="input-medium"
- clearable={false}
+ <Select
+ className="input-medium Select"
+ components={
+ Object {
+ "Option": [Function],
+ "SingleValue": [Function],
+ }
+ }
disabled={false}
+ isSearchable={false}
name="projects-qualifier"
onChange={[Function]}
- optionRenderer={[Function]}
options={
Array [
Object {
]
}
searchable={false}
- value="TRK"
- valueRenderer={[Function]}
+ value={
+ Object {
+ "label": "qualifiers.TRK",
+ "value": "TRK",
+ }
+ }
/>
</td>
<td
<td
className="thin nowrap text-middle"
>
- <SelectLegacy
- className="input-small"
- clearable={false}
- disabled={false}
+ <Select
+ className="input-small Select"
+ components={
+ Object {
+ "Option": [Function],
+ }
+ }
+ isDisabled={false}
+ isSearchable={false}
name="projects-visibility"
onChange={[Function]}
options={
},
]
}
- searchable={false}
- value="all"
+ value={
+ Object {
+ "label": "visibility.both",
+ "value": "all",
+ }
+ }
/>
</td>
<td
<td
className="thin nowrap text-middle"
>
- <SelectLegacy
- className="input-small"
- clearable={false}
- disabled={false}
+ <Select
+ className="input-small Select"
+ components={
+ Object {
+ "Option": [Function],
+ }
+ }
+ isDisabled={false}
+ isSearchable={false}
name="projects-visibility"
onChange={[Function]}
options={
},
]
}
- searchable={false}
- value="all"
+ value={
+ Object {
+ "label": "visibility.both",
+ "value": "all",
+ }
+ }
/>
</td>
<td
</table>
</div>
`;
+
+exports[`renders optionrenderer and singlevaluerenderer: option renderer 1`] = `
+<Option
+ className="Select-option"
+ data={
+ Object {
+ "value": "val",
+ }
+ }
+>
+ <div
+ className="display-flex-center"
+ >
+ <QualifierIcon
+ className="little-spacer-right"
+ qualifier="val"
+ />
+ </div>
+</Option>
+`;
+
+exports[`renders optionrenderer and singlevaluerenderer: single value renderer 1`] = `
+<SingleValue
+ data={
+ Object {
+ "value": "val",
+ }
+ }
+>
+ <div
+ className="display-flex-center"
+ >
+ <QualifierIcon
+ className="little-spacer-right"
+ qualifier="val"
+ />
+ </div>
+</SingleValue>
+`;
projects / sonarqube.git / commitdiff