*/
import classNames from 'classnames';
import * as React from 'react';
-import { components, OptionProps, OptionTypeBase, SingleValueProps } from 'react-select';
+import { OptionTypeBase } from 'react-select';
import { activateRule, Profile } from '../../../api/quality-profiles';
import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
import Modal from '../../../components/controls/Modal';
import Select from '../../../components/controls/Select';
-import SeverityHelper from '../../../components/shared/SeverityHelper';
import { Alert } from '../../../components/ui/Alert';
-import { SEVERITIES } from '../../../helpers/constants';
import { translate } from '../../../helpers/l10n';
import { sanitizeString } from '../../../helpers/sanitize';
import { Dict, Rule, RuleActivation, RuleDetails } from '../../../types/types';
import { sortProfiles } from '../../quality-profiles/utils';
+import { SeveritySelect } from './SeveritySelect';
interface Props {
activation?: RuleActivation;
const isCustomRule = !!(rule as RuleDetails).templateKey;
const activeInAllProfiles = profilesWithDepth.length <= 0;
const isUpdateMode = !!activation;
- const serverityOption = SEVERITIES.map(severity => ({
- label: translate('severity', severity),
- value: severity
- }));
-
- function Option(props: OptionProps<OptionTypeBase, false>) {
- return (
- <components.Option {...props}>
- <SeverityHelper severity={props.data.value} />
- </components.Option>
- );
- }
-
- function SingleValue(props: SingleValueProps<OptionTypeBase>) {
- return (
- <components.SingleValue {...props}>
- <SeverityHelper className="coding-rules-severity-value" severity={props.data.value} />
- </components.SingleValue>
- );
- }
return (
<Modal contentLabel={this.props.modalHeader} onRequestClose={this.props.onClose} size="small">
</div>
<div className="modal-field">
<label id="coding-rules-severity-select">{translate('severity')}</label>
- <Select
- className="js-severity"
- isClearable={false}
+ <SeveritySelect
isDisabled={submitting}
- aria-labelledby="coding-rules-severity-select"
+ ariaLabelledby="coding-rules-severity-select"
onChange={this.handleSeverityChange}
- components={{ Option, SingleValue }}
- options={serverityOption}
- isSearchable={false}
- value={serverityOption.find(s => s.value === severity)}
+ severity={severity}
/>
</div>
{isCustomRule ? (
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { components, OptionProps, OptionTypeBase, SingleValueProps } from 'react-select';
import { createRule, updateRule } from '../../../api/rules';
import FormattingTips from '../../../components/common/FormattingTips';
import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
import Modal from '../../../components/controls/Modal';
-import SelectLegacy from '../../../components/controls/SelectLegacy';
-import SeverityHelper from '../../../components/shared/SeverityHelper';
+import Select from '../../../components/controls/Select';
import TypeHelper from '../../../components/shared/TypeHelper';
import { Alert } from '../../../components/ui/Alert';
import MandatoryFieldMarker from '../../../components/ui/MandatoryFieldMarker';
import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation';
-import { RULE_STATUSES, RULE_TYPES, SEVERITIES } from '../../../helpers/constants';
+import { RULE_STATUSES, RULE_TYPES } from '../../../helpers/constants';
import { csvEscape } from '../../../helpers/csv';
import { translate } from '../../../helpers/l10n';
import { sanitizeString } from '../../../helpers/sanitize';
import { latinize } from '../../../helpers/strings';
-import { Dict, RuleDetails, RuleParameter, RuleType } from '../../../types/types';
+import { Dict, RuleDetails, RuleParameter } from '../../../types/types';
+import { SeveritySelect } from './SeveritySelect';
interface Props {
customRule?: RuleDetails;
</div>
);
- renderTypeOption = ({ value }: { value: RuleType }) => {
- return <TypeHelper type={value} />;
+ renderTypeOption = (props: OptionProps<OptionTypeBase, false>) => {
+ return (
+ <components.Option {...props}>
+ <TypeHelper type={props.data.value} />
+ </components.Option>
+ );
};
- renderTypeField = () => (
- <div className="modal-field flex-1 spacer-right">
- <label htmlFor="coding-rules-custom-rule-type">{translate('type')}</label>
- <SelectLegacy
- clearable={false}
- disabled={this.state.submitting}
- id="coding-rules-custom-rule-type"
- onChange={this.handleTypeChange}
- optionRenderer={this.renderTypeOption}
- options={RULE_TYPES.map(type => ({
- label: translate('issue.type', type),
- value: type
- }))}
- searchable={false}
- value={this.state.type}
- valueRenderer={this.renderTypeOption}
- />
- </div>
- );
+ renderTypeSingleValue = (props: SingleValueProps<OptionTypeBase>) => {
+ return (
+ <components.SingleValue {...props}>
+ <TypeHelper className="display-flex-center" type={props.data.value} />
+ </components.SingleValue>
+ );
+ };
- renderSeverityOption = ({ value }: { value: string }) => <SeverityHelper severity={value} />;
+ renderTypeField = () => {
+ const ruleTypeOption = RULE_TYPES.map(type => ({
+ label: translate('issue.type', type),
+ value: type
+ }));
+ return (
+ <div className="modal-field flex-1 spacer-right">
+ <label id="coding-rules-custom-rule-type">{translate('type')}</label>
+ <Select
+ aria-labelledby="coding-rules-custom-rule-type"
+ isClearable={false}
+ isDisabled={this.state.submitting}
+ isSearchable={false}
+ onChange={this.handleTypeChange}
+ components={{
+ Option: this.renderTypeOption,
+ SingleValue: this.renderTypeSingleValue
+ }}
+ options={ruleTypeOption}
+ value={ruleTypeOption.find(t => t.value === this.state.type)}
+ />
+ </div>
+ );
+ };
renderSeverityField = () => (
<div className="modal-field flex-1 spacer-right">
- <label htmlFor="coding-rules-custom-rule-severity">{translate('severity')}</label>
- <SelectLegacy
- clearable={false}
- disabled={this.state.submitting}
- id="coding-rules-custom-rule-severity"
+ <label id="coding-rules-custom-rule-severity">{translate('severity')}</label>
+ <SeveritySelect
+ ariaLabelledby="coding-rules-custom-rule-severity"
+ isDisabled={this.state.submitting}
onChange={this.handleSeverityChange}
- optionRenderer={this.renderSeverityOption}
- options={SEVERITIES.map(severity => ({
- label: translate('severity', severity),
- value: severity
- }))}
- searchable={false}
- value={this.state.severity}
- valueRenderer={this.renderSeverityOption}
+ severity={this.state.severity}
/>
</div>
);
- renderStatusField = () => (
- <div className="modal-field flex-1">
- <label htmlFor="coding-rules-custom-rule-status">
- {translate('coding_rules.filters.status')}
- </label>
- <SelectLegacy
- clearable={false}
- disabled={this.state.submitting}
- id="coding-rules-custom-rule-status"
- onChange={this.handleStatusChange}
- options={RULE_STATUSES.map(status => ({
- label: translate('rules.status', status),
- value: status
- }))}
- searchable={false}
- value={this.state.status}
- />
- </div>
- );
+ renderStatusField = () => {
+ const statusesOptions = RULE_STATUSES.map(status => ({
+ label: translate('rules.status', status),
+ value: status
+ }));
+ return (
+ <div className="modal-field flex-1">
+ <label id="coding-rules-custom-rule-status">
+ {translate('coding_rules.filters.status')}
+ </label>
+ <Select
+ isClearable={false}
+ isDisabled={this.state.submitting}
+ aria-labelledby="coding-rules-custom-rule-status"
+ onChange={this.handleStatusChange}
+ options={statusesOptions}
+ searchable={false}
+ value={statusesOptions.find(s => s.value === this.state.status)}
+ />
+ </div>
+ );
+ };
renderParameterField = (param: RuleParameter) => (
<div className="modal-field" key={param.key}>
--- /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';
+import { components, OptionProps, OptionTypeBase, SingleValueProps } from 'react-select';
+import Select from '../../../components/controls/Select';
+import SeverityHelper from '../../../components/shared/SeverityHelper';
+import { SEVERITIES } from '../../../helpers/constants';
+import { translate } from '../../../helpers/l10n';
+
+export interface SeveritySelectProps {
+ isDisabled: boolean;
+ severity: string;
+ ariaLabelledby: string;
+ onChange: (value: OptionTypeBase) => void;
+}
+
+export function SeveritySelect(props: SeveritySelectProps) {
+ const { isDisabled, severity, ariaLabelledby } = props;
+ const serverityOption = SEVERITIES.map(severity => ({
+ label: translate('severity', severity),
+ value: severity
+ }));
+
+ function Option(props: OptionProps<OptionTypeBase, false>) {
+ return (
+ <components.Option {...props}>
+ <SeverityHelper className="display-flex-center" severity={props.data.value} />
+ </components.Option>
+ );
+ }
+
+ function SingleValue(props: SingleValueProps<OptionTypeBase>) {
+ return (
+ <components.SingleValue {...props}>
+ <SeverityHelper className="display-flex-center" severity={props.data.value} />
+ </components.SingleValue>
+ );
+ }
+
+ return (
+ <Select
+ className="js-severity"
+ aria-labelledby={ariaLabelledby}
+ isDisabled={isDisabled}
+ onChange={props.onChange}
+ components={{ Option, SingleValue }}
+ options={serverityOption}
+ isSearchable={false}
+ value={serverityOption.find(s => s.value === severity)}
+ />
+ );
+}
>
severity
</label>
- <Select
- aria-labelledby="coding-rules-severity-select"
- className="js-severity"
- components={
- Object {
- "Option": [Function],
- "SingleValue": [Function],
- }
- }
- isClearable={false}
+ <SeveritySelect
+ ariaLabelledby="coding-rules-severity-select"
isDisabled={false}
- isSearchable={false}
onChange={[Function]}
- options={
- Array [
- Object {
- "label": "severity.BLOCKER",
- "value": "BLOCKER",
- },
- Object {
- "label": "severity.CRITICAL",
- "value": "CRITICAL",
- },
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- },
- Object {
- "label": "severity.MINOR",
- "value": "MINOR",
- },
- Object {
- "label": "severity.INFO",
- "value": "INFO",
- },
- ]
- }
- value={
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- }
- }
+ severity="MAJOR"
/>
</div>
<div
>
severity
</label>
- <Select
- aria-labelledby="coding-rules-severity-select"
- className="js-severity"
- components={
- Object {
- "Option": [Function],
- "SingleValue": [Function],
- }
- }
- isClearable={false}
+ <SeveritySelect
+ ariaLabelledby="coding-rules-severity-select"
isDisabled={false}
- isSearchable={false}
onChange={[Function]}
- options={
- Array [
- Object {
- "label": "severity.BLOCKER",
- "value": "BLOCKER",
- },
- Object {
- "label": "severity.CRITICAL",
- "value": "CRITICAL",
- },
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- },
- Object {
- "label": "severity.MINOR",
- "value": "MINOR",
- },
- Object {
- "label": "severity.INFO",
- "value": "INFO",
- },
- ]
- }
- value={
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- }
- }
+ severity="MAJOR"
/>
</div>
<div
>
severity
</label>
- <Select
- aria-labelledby="coding-rules-severity-select"
- className="js-severity"
- components={
- Object {
- "Option": [Function],
- "SingleValue": [Function],
- }
- }
- isClearable={false}
+ <SeveritySelect
+ ariaLabelledby="coding-rules-severity-select"
isDisabled={true}
- isSearchable={false}
onChange={[Function]}
- options={
- Array [
- Object {
- "label": "severity.BLOCKER",
- "value": "BLOCKER",
- },
- Object {
- "label": "severity.CRITICAL",
- "value": "CRITICAL",
- },
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- },
- Object {
- "label": "severity.MINOR",
- "value": "MINOR",
- },
- Object {
- "label": "severity.INFO",
- "value": "INFO",
- },
- ]
- }
- value={
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- }
- }
+ severity="MAJOR"
/>
</div>
<div
>
severity
</label>
- <Select
- aria-labelledby="coding-rules-severity-select"
- className="js-severity"
- components={
- Object {
- "Option": [Function],
- "SingleValue": [Function],
- }
- }
- isClearable={false}
+ <SeveritySelect
+ ariaLabelledby="coding-rules-severity-select"
isDisabled={false}
- isSearchable={false}
onChange={[Function]}
- options={
- Array [
- Object {
- "label": "severity.BLOCKER",
- "value": "BLOCKER",
- },
- Object {
- "label": "severity.CRITICAL",
- "value": "CRITICAL",
- },
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- },
- Object {
- "label": "severity.MINOR",
- "value": "MINOR",
- },
- Object {
- "label": "severity.INFO",
- "value": "INFO",
- },
- ]
- }
- value={
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- }
- }
+ severity="MAJOR"
/>
</div>
<div
>
severity
</label>
- <Select
- aria-labelledby="coding-rules-severity-select"
- className="js-severity"
- components={
- Object {
- "Option": [Function],
- "SingleValue": [Function],
- }
- }
- isClearable={false}
+ <SeveritySelect
+ ariaLabelledby="coding-rules-severity-select"
isDisabled={false}
- isSearchable={false}
onChange={[Function]}
- options={
- Array [
- Object {
- "label": "severity.BLOCKER",
- "value": "BLOCKER",
- },
- Object {
- "label": "severity.CRITICAL",
- "value": "CRITICAL",
- },
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- },
- Object {
- "label": "severity.MINOR",
- "value": "MINOR",
- },
- Object {
- "label": "severity.INFO",
- "value": "INFO",
- },
- ]
- }
- value={
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- }
- }
+ severity="MAJOR"
/>
</div>
<div
className="modal-field flex-1 spacer-right"
>
<label
- htmlFor="coding-rules-custom-rule-type"
+ id="coding-rules-custom-rule-type"
>
type
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
- id="coding-rules-custom-rule-type"
+ <Select
+ aria-labelledby="coding-rules-custom-rule-type"
+ components={
+ Object {
+ "Option": [Function],
+ "SingleValue": [Function],
+ }
+ }
+ isClearable={false}
+ isDisabled={false}
+ isSearchable={false}
onChange={[Function]}
- optionRenderer={[Function]}
options={
Array [
Object {
},
]
}
- searchable={false}
- value="CODE_SMELL"
- valueRenderer={[Function]}
+ value={
+ Object {
+ "label": "issue.type.CODE_SMELL",
+ "value": "CODE_SMELL",
+ }
+ }
/>
</div>
<div
className="modal-field flex-1 spacer-right"
>
<label
- htmlFor="coding-rules-custom-rule-severity"
+ id="coding-rules-custom-rule-severity"
>
severity
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
- id="coding-rules-custom-rule-severity"
+ <SeveritySelect
+ ariaLabelledby="coding-rules-custom-rule-severity"
+ isDisabled={false}
onChange={[Function]}
- optionRenderer={[Function]}
- options={
- Array [
- Object {
- "label": "severity.BLOCKER",
- "value": "BLOCKER",
- },
- Object {
- "label": "severity.CRITICAL",
- "value": "CRITICAL",
- },
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- },
- Object {
- "label": "severity.MINOR",
- "value": "MINOR",
- },
- Object {
- "label": "severity.INFO",
- "value": "INFO",
- },
- ]
- }
- searchable={false}
- value="MAJOR"
- valueRenderer={[Function]}
+ severity="MAJOR"
/>
</div>
<div
className="modal-field flex-1"
>
<label
- htmlFor="coding-rules-custom-rule-status"
+ id="coding-rules-custom-rule-status"
>
coding_rules.filters.status
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
- id="coding-rules-custom-rule-status"
+ <Select
+ aria-labelledby="coding-rules-custom-rule-status"
+ isClearable={false}
+ isDisabled={false}
onChange={[Function]}
options={
Array [
]
}
searchable={false}
- value="READY"
+ value={
+ Object {
+ "label": "rules.status.READY",
+ "value": "READY",
+ }
+ }
/>
</div>
</div>
className="modal-field flex-1 spacer-right"
>
<label
- htmlFor="coding-rules-custom-rule-type"
+ id="coding-rules-custom-rule-type"
>
type
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
- id="coding-rules-custom-rule-type"
+ <Select
+ aria-labelledby="coding-rules-custom-rule-type"
+ components={
+ Object {
+ "Option": [Function],
+ "SingleValue": [Function],
+ }
+ }
+ isClearable={false}
+ isDisabled={false}
+ isSearchable={false}
onChange={[Function]}
- optionRenderer={[Function]}
options={
Array [
Object {
},
]
}
- searchable={false}
- value="CODE_SMELL"
- valueRenderer={[Function]}
+ value={
+ Object {
+ "label": "issue.type.CODE_SMELL",
+ "value": "CODE_SMELL",
+ }
+ }
/>
</div>
<div
className="modal-field flex-1 spacer-right"
>
<label
- htmlFor="coding-rules-custom-rule-severity"
+ id="coding-rules-custom-rule-severity"
>
severity
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
- id="coding-rules-custom-rule-severity"
+ <SeveritySelect
+ ariaLabelledby="coding-rules-custom-rule-severity"
+ isDisabled={false}
onChange={[Function]}
- optionRenderer={[Function]}
- options={
- Array [
- Object {
- "label": "severity.BLOCKER",
- "value": "BLOCKER",
- },
- Object {
- "label": "severity.CRITICAL",
- "value": "CRITICAL",
- },
- Object {
- "label": "severity.MAJOR",
- "value": "MAJOR",
- },
- Object {
- "label": "severity.MINOR",
- "value": "MINOR",
- },
- Object {
- "label": "severity.INFO",
- "value": "INFO",
- },
- ]
- }
- searchable={false}
- value="MAJOR"
- valueRenderer={[Function]}
+ severity="MAJOR"
/>
</div>
<div
className="modal-field flex-1"
>
<label
- htmlFor="coding-rules-custom-rule-status"
+ id="coding-rules-custom-rule-status"
>
coding_rules.filters.status
</label>
- <SelectLegacy
- clearable={false}
- disabled={false}
- id="coding-rules-custom-rule-status"
+ <Select
+ aria-labelledby="coding-rules-custom-rule-status"
+ isClearable={false}
+ isDisabled={false}
onChange={[Function]}
options={
Array [
]
}
searchable={false}
- value="READY"
+ value={
+ Object {
+ "label": "rules.status.READY",
+ "value": "READY",
+ }
+ }
/>
</div>
</div>
line-height: 1;
}
-.coding-rules-details-tag-edit-cancel,
-.coding-rules-severity-value svg {
+.coding-rules-details-tag-edit-cancel {
vertical-align: middle;
}
projects / sonarqube.git / commitdiff