* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import Select from '../../../../components/controls/Select';
import { applyTemplateToProject, getPermissionTemplates } from '../../../../api/permissions';
import { ResetButtonLink, SubmitButton } from '../../../../components/controls/buttons';
-import SelectLegacy from '../../../../components/controls/SelectLegacy';
import SimpleModal from '../../../../components/controls/SimpleModal';
import { Alert } from '../../../../components/ui/Alert';
import DeferredSpinner from '../../../../components/ui/DeferredSpinner';
import MandatoryFieldsExplanation from '../../../../components/ui/MandatoryFieldsExplanation';
import { translate, translateWithParameters } from '../../../../helpers/l10n';
import { PermissionTemplate } from '../../../../types/types';
+import { components, OptionProps } from 'react-select';
interface Props {
onApply?: () => void;
this.mounted = false;
}
+ optionRenderer = (props: OptionProps<{ value: string }, false>) => (
+ // This class is added for the integration test.
+ <components.Option {...props} className="Select-option" />
+ );
+
fetchPermissionTemplates = () => {
getPermissionTemplates().then(
({ permissionTemplates }) => {
this.props.project.name
);
+ const options = this.state.permissionTemplates
+ ? this.state.permissionTemplates.map(permissionTemplate => ({
+ label: permissionTemplate.name,
+ value: permissionTemplate.id
+ }))
+ : [];
+
return (
<SimpleModal
header={header}
<>
<MandatoryFieldsExplanation className="modal-field" />
<div className="modal-field">
- <label htmlFor="project-permissions-template">
+ <label htmlFor="project-permissions-template-input">
{translate('template')}
<MandatoryFieldMarker />
</label>
{this.state.permissionTemplates && (
- <SelectLegacy
- clearable={false}
+ <Select
id="project-permissions-template"
+ className="Select"
+ inputId="project-permissions-template-input"
onChange={this.handlePermissionTemplateChange}
- options={this.state.permissionTemplates.map(permissionTemplate => ({
- label: permissionTemplate.name,
- value: permissionTemplate.id
- }))}
- value={this.state.permissionTemplate}
+ components={{
+ Option: this.optionRenderer
+ }}
+ options={options}
+ value={options.filter(o => o.value === this.state.permissionTemplate)}
/>
)}
</div>
*/
import { shallow } from 'enzyme';
import * as React from 'react';
+import { mockReactSelectOptionProps } from '../../../../../helpers/mocks/react-select';
import { waitAndUpdate } from '../../../../../helpers/testUtils';
import ApplyTemplate from '../ApplyTemplate';
await waitAndUpdate(wrapper);
expect(wrapper.dive()).toMatchSnapshot();
});
+
+it('should render option correctly', () => {
+ const wrapper = shallow<ApplyTemplate>(
+ <ApplyTemplate onClose={jest.fn()} project={{ key: 'foo', name: 'Foo' }} />
+ );
+ const OptionRendererer = wrapper.instance().optionRenderer;
+ expect(
+ shallow(<OptionRendererer {...mockReactSelectOptionProps({ value: 'val' })} />)
+ ).toMatchSnapshot('option renderer');
+});
className="modal-field"
>
<label
- htmlFor="project-permissions-template"
+ htmlFor="project-permissions-template-input"
>
template
<MandatoryFieldMarker />
</label>
- <SelectLegacy
- clearable={false}
+ <Select
+ className="Select"
+ components={
+ Object {
+ "Option": [Function],
+ }
+ }
id="project-permissions-template"
+ inputId="project-permissions-template-input"
onChange={[Function]}
options={
Array [
},
]
}
+ value={Array []}
/>
</div>
</div>
</form>
</Modal>
`;
+
+exports[`should render option correctly: option renderer 1`] = `
+<Option
+ className="Select-option"
+ data={
+ Object {
+ "value": "val",
+ }
+ }
+/>
+`;
+++ /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 * as React from 'react';
-
-export interface Option {
- label: string;
- value: string;
-}
-
-interface Props {
- option: Option;
- children?: Element | Text;
- className?: string;
- isFocused?: boolean;
- onFocus: (option: Option, event: React.MouseEvent<HTMLDivElement>) => void;
- onSelect: (option: Option, event: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-export default class ProjectActivityEventSelectOption extends React.PureComponent<Props> {
- handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
- event.preventDefault();
- event.stopPropagation();
- this.props.onSelect(this.props.option, event);
- };
-
- handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
- this.props.onFocus(this.props.option, event);
- };
-
- handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
- if (this.props.isFocused) {
- return;
- }
- this.props.onFocus(this.props.option, event);
- };
-
- render() {
- const { option } = this.props;
- return (
- <div
- className={this.props.className}
- onMouseDown={this.handleMouseDown}
- onMouseEnter={this.handleMouseEnter}
- onMouseMove={this.handleMouseMove}
- role="link"
- tabIndex={0}
- title={option.label}>
- {this.props.children}
- </div>
- );
- }
-}
*/
import classNames from 'classnames';
import * as React from 'react';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
+import Select from '../../../components/controls/Select';
import { translate } from '../../../helpers/l10n';
import { Component } from '../../../types/types';
import { APPLICATION_EVENT_TYPES, EVENT_TYPES, Query } from '../utils';
import ProjectActivityDateInput from './ProjectActivityDateInput';
-import ProjectActivityEventSelectOption from './ProjectActivityEventSelectOption';
interface Props {
category?: string;
return (
<header className="page-header">
{!['VW', 'SVW'].includes(this.props.project.qualifier) && (
- <SelectLegacy
+ <Select
className={classNames('pull-left big-spacer-right', {
'input-medium': !isApp,
'input-large': isApp
})}
- clearable={true}
+ placeholder={translate('project_activity.filter_events') + '...'}
+ isClearable={true}
+ isSearchable={false}
onChange={this.handleCategoryChange}
- optionComponent={ProjectActivityEventSelectOption}
options={options}
- placeholder={translate('project_activity.filter_events') + '...'}
- searchable={false}
- value={this.props.category}
+ value={options.filter(o => o.value === this.props.category)}
/>
)}
<ProjectActivityDateInput
+++ /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 ProjectActivityEventSelectOption from '../ProjectActivityEventSelectOption';
-
-it('should render correctly', () => {
- expect(shallowRender()).toMatchSnapshot();
-});
-
-function shallowRender(props: Partial<ProjectActivityEventSelectOption['props']> = {}) {
- return shallow(
- <ProjectActivityEventSelectOption
- onFocus={jest.fn()}
- onSelect={jest.fn()}
- option={{ label: 'Foo', value: 'foo' }}
- {...props}
- />
- );
-}
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
- onMouseDown={[Function]}
- onMouseEnter={[Function]}
- onMouseMove={[Function]}
- role="link"
- tabIndex={0}
- title="Foo"
-/>
-`;
<header
className="page-header"
>
- <SelectLegacy
+ <Select
className="pull-left big-spacer-right input-medium"
- clearable={true}
+ isClearable={true}
+ isSearchable={false}
onChange={[Function]}
- optionComponent={[Function]}
options={
Array [
Object {
]
}
placeholder="project_activity.filter_events..."
- searchable={false}
- value=""
+ value={Array []}
/>
<ProjectActivityDateInput
from={2016-10-27T10:21:15.000Z}
*/
import classNames from 'classnames';
import * as React from 'react';
+import Select from '../../../components/controls/Select';
import Radio from '../../../components/controls/Radio';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
import Tooltip from '../../../components/controls/Tooltip';
import DateFormatter from '../../../components/intl/DateFormatter';
import TimeFormatter from '../../../components/intl/TimeFormatter';
byVersionByDay.length > 1 ||
(byVersionByDay.length === 1 && Object.keys(byVersionByDay[0].byDay).length > 0);
+ const options = [
+ {
+ label: translate('baseline.branch_analyses.ranges.30days'),
+ value: 30
+ },
+ {
+ label: translate('baseline.branch_analyses.ranges.allTime'),
+ value: 0
+ }
+ ];
+
return (
<>
<div className="spacer-bottom">
- {translate('baseline.analysis_from')}
- <SelectLegacy
+ <label htmlFor="branch-analysis-from-input" className="spacer-right">
+ {translate('baseline.analysis_from')}
+ </label>
+ <Select
autoBlur={true}
+ inputId="branch-analysis-from-input"
className="input-medium spacer-left"
- clearable={false}
onChange={props.handleRangeChange}
- options={[
- {
- label: translate('baseline.branch_analyses.ranges.30days'),
- value: 30
- },
- {
- label: translate('baseline.branch_analyses.ranges.allTime'),
- value: 0
- }
- ]}
- searchable={false}
- value={range}
+ options={options}
+ isSearchable={false}
+ value={options.filter(o => o.value === range)}
/>
</div>
<div className="branch-analysis-list-wrapper">
<div
className="spacer-bottom"
>
- baseline.analysis_from
- <SelectLegacy
+ <label
+ className="spacer-right"
+ htmlFor="branch-analysis-from-input"
+ >
+ baseline.analysis_from
+ </label>
+ <Select
autoBlur={true}
className="input-medium spacer-left"
- clearable={false}
+ inputId="branch-analysis-from-input"
+ isSearchable={false}
onChange={[MockFunction]}
options={
Array [
},
]
}
- searchable={false}
- value={30}
+ value={
+ Array [
+ Object {
+ "label": "baseline.branch_analyses.ranges.30days",
+ "value": 30,
+ },
+ ]
+ }
/>
</div>
<div
<div
className="spacer-bottom"
>
- baseline.analysis_from
- <SelectLegacy
+ <label
+ className="spacer-right"
+ htmlFor="branch-analysis-from-input"
+ >
+ baseline.analysis_from
+ </label>
+ <Select
autoBlur={true}
className="input-medium spacer-left"
- clearable={false}
+ inputId="branch-analysis-from-input"
+ isSearchable={false}
onChange={[MockFunction]}
options={
Array [
},
]
}
- searchable={false}
- value={30}
+ value={
+ Array [
+ Object {
+ "label": "baseline.branch_analyses.ranges.30days",
+ "value": 30,
+ },
+ ]
+ }
/>
</div>
<div
<div
className="spacer-bottom"
>
- baseline.analysis_from
- <SelectLegacy
+ <label
+ className="spacer-right"
+ htmlFor="branch-analysis-from-input"
+ >
+ baseline.analysis_from
+ </label>
+ <Select
autoBlur={true}
className="input-medium spacer-left"
- clearable={false}
+ inputId="branch-analysis-from-input"
+ isSearchable={false}
onChange={[MockFunction]}
options={
Array [
},
]
}
- searchable={false}
- value={30}
+ value={
+ Array [
+ Object {
+ "label": "baseline.branch_analyses.ranges.30days",
+ "value": 30,
+ },
+ ]
+ }
/>
</div>
<div
projects / sonarqube.git / commitdiff