diff options
| author | Wouter Admiraal <wouter.admiraal@sonarsource.com> | 2021-02-25 13:53:01 +0100 |
|---|---|---|
| committer | sonartech <sonartech@sonarsource.com> | 2021-03-03 20:12:51 +0000 |
| commit | 68292ece44a35c142bf116db50989c03bc33e522 (patch) | |
| tree | d9ddfce70b03f065cecd3396cac6b488e01db41c /server/sonar-web/src | |
| parent | 986a6793f9d19e5ff93c3e340589a5abc16626c3 (diff) | |
| download | sonarqube-68292ece44a35c142bf116db50989c03bc33e522.tar.gz sonarqube-68292ece44a35c142bf116db50989c03bc33e522.zip | |
SONAR-12056 Indicate required fields for forms
Diffstat (limited to 'server/sonar-web/src')
61 files changed, 436 insertions, 525 deletions
diff --git a/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx b/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx index 756866c9909..b46fbcfba60 100644 --- a/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx +++ b/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx @@ -22,6 +22,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro import Radio from 'sonar-ui-common/components/controls/Radio'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { createApplication } from '../../../api/application'; import { ComponentQualifier, Visibility } from '../../../types/component'; @@ -107,9 +109,12 @@ export default class CreateApplicationForm extends React.PureComponent<Props, St </div> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> + <div className="modal-field"> <label htmlFor="view-edit-name"> - {translate('name')} <em className="mandatory">*</em> + {translate('name')} + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap b/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap index dae7cc69a98..eca852deb51 100644 --- a/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap @@ -31,6 +31,9 @@ exports[`should render correctly: form 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -38,12 +41,7 @@ exports[`should render correctly: form 1`] = ` htmlFor="view-edit-name" > name - - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx b/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx index 172be29752a..c040d48a798 100644 --- a/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx +++ b/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx @@ -22,6 +22,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { addApplicationBranch, @@ -258,9 +260,11 @@ export default class CreateBranchForm extends React.PureComponent<Props, State> </div> ) : ( <> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="view-edit-name"> - {translate('name')} <em className="mandatory">*</em> + {translate('name')} + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx index 73a1d18c789..738187b2be7 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx @@ -23,6 +23,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro import Modal from 'sonar-ui-common/components/controls/Modal'; import Select from 'sonar-ui-common/components/controls/Select'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { csvEscape } from 'sonar-ui-common/helpers/csv'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { latinize } from 'sonar-ui-common/helpers/strings'; @@ -154,7 +156,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat renderNameField = () => ( <div className="modal-field"> <label htmlFor="coding-rules-custom-rule-creation-name"> - {translate('name')} <em className="mandatory">*</em> + {translate('name')} <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -171,7 +173,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat renderKeyField = () => ( <div className="modal-field"> <label htmlFor="coding-rules-custom-rule-creation-key"> - {translate('key')} {!this.props.customRule && <em className="mandatory">*</em>} + {translate('key')} {!this.props.customRule && <MandatoryFieldMarker />} </label> {this.props.customRule ? ( @@ -194,7 +196,8 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat renderDescriptionField = () => ( <div className="modal-field"> <label htmlFor="coding-rules-custom-rule-creation-html-description"> - {translate('description')} <em className="mandatory">*</em> + {translate('description')} + <MandatoryFieldMarker /> </label> <textarea disabled={this.state.submitting} @@ -332,6 +335,8 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat <Alert variant="warning">{translate('coding_rules.reactivate.help')}</Alert> )} + <MandatoryFieldsExplanation className="spacer-bottom" /> + {this.renderNameField()} {this.renderKeyField()} <div className="display-flex-space-between"> diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap index e51c719d869..426e1a46317 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap @@ -23,6 +23,9 @@ exports[`should handle re-activation 1`] = ` > coding_rules.reactivate.help </Alert> + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <div className="modal-field" > @@ -31,11 +34,7 @@ exports[`should handle re-activation 1`] = ` > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -55,11 +54,7 @@ exports[`should handle re-activation 1`] = ` > key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input disabled={false} @@ -196,12 +191,7 @@ exports[`should handle re-activation 1`] = ` htmlFor="coding-rules-custom-rule-creation-html-description" > description - - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <textarea disabled={false} @@ -254,6 +244,9 @@ exports[`should render correctly 1`] = ` <div className="modal-body modal-container" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <div className="modal-field" > @@ -262,11 +255,7 @@ exports[`should render correctly 1`] = ` > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -286,11 +275,7 @@ exports[`should render correctly 1`] = ` > key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input disabled={false} @@ -427,12 +412,7 @@ exports[`should render correctly 1`] = ` htmlFor="coding-rules-custom-rule-creation-html-description" > description - - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <textarea disabled={false} diff --git a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx index b61cca8fe70..858d4464fa0 100644 --- a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx @@ -23,6 +23,7 @@ import * as React from 'react'; import { SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { createProject, doesComponentExists } from '../../../api/components'; import ProjectKeyInput from '../../../components/common/ProjectKeyInput'; @@ -190,6 +191,8 @@ export default class ManualProjectCreate extends React.PureComponent<Props, Stat <div className="create-project-manual"> <div className="flex-1 huge-spacer-right"> <form className="manual-project-create" onSubmit={this.handleFormSubmit}> + <MandatoryFieldsExplanation className="big-spacer-bottom" /> + <ProjectKeyInput error={projectKeyError} help={translate('onboarding.create_project.project_key.help')} diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap index 9d81986e63a..419e388a868 100644 --- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap @@ -15,6 +15,9 @@ exports[`should render correctly 1`] = ` className="manual-project-create" onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="big-spacer-bottom" + /> <ProjectKeyInput help="onboarding.create_project.project_key.help" label="onboarding.create_project.project_key" diff --git a/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx b/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx index fa5a386e57b..766f7ba9ae8 100644 --- a/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx +++ b/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx @@ -23,6 +23,7 @@ import Select from 'sonar-ui-common/components/controls/Select'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { getAllMetrics } from '../../../api/metrics'; @@ -115,7 +116,7 @@ export default class Form extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="create-custom-measure-metric"> {translate('custom_measures.metric')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> {this.state.loading ? ( <i className="spinner" /> @@ -159,7 +160,7 @@ export default class Form extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="create-custom-measure-value"> {translate('value')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={this.props.measure !== undefined} diff --git a/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap b/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap index cd4b411c460..09df42c1d2c 100644 --- a/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap @@ -26,11 +26,7 @@ exports[`should render form 1`] = ` htmlFor="create-custom-measure-metric" > custom_measures.metric - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <i className="spinner" @@ -43,11 +39,7 @@ exports[`should render form 1`] = ` htmlFor="create-custom-measure-value" > value - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={false} @@ -127,11 +119,7 @@ exports[`should render form 2`] = ` htmlFor="create-custom-measure-metric" > custom_measures.metric - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select autoFocus={true} @@ -155,11 +143,7 @@ exports[`should render form 2`] = ` htmlFor="create-custom-measure-value" > value - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={false} diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx index 598b8b6318c..7d564cd2533 100644 --- a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx +++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx @@ -22,6 +22,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro import Select, { Creatable } from 'sonar-ui-common/components/controls/Select'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; export interface MetricProps { @@ -107,10 +109,12 @@ export default class Form extends React.PureComponent<Props, State> { </header> <div className="modal-body modal-container"> + <MandatoryFieldsExplanation className="modal-field" /> + <div className="modal-field"> <label htmlFor="create-metric-key"> {translate('key')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -126,7 +130,7 @@ export default class Form extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="create-metric-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input id="create-metric-name" @@ -159,7 +163,7 @@ export default class Form extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="create-metric-type"> {translate('type')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap index daf655407d5..f1997db2310 100644 --- a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap @@ -19,6 +19,9 @@ exports[`should render form 1`] = ` <div className="modal-body modal-container" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -26,11 +29,7 @@ exports[`should render form 1`] = ` htmlFor="create-metric-key" > key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -50,11 +49,7 @@ exports[`should render form 1`] = ` htmlFor="create-metric-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input id="create-metric-name" @@ -113,11 +108,7 @@ exports[`should render form 1`] = ` htmlFor="create-metric-type" > type - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/groups/components/Form.tsx b/server/sonar-web/src/main/js/apps/groups/components/Form.tsx index ba48ae8c5ab..978b7ce181f 100644 --- a/server/sonar-web/src/main/js/apps/groups/components/Form.tsx +++ b/server/sonar-web/src/main/js/apps/groups/components/Form.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; interface Props { @@ -73,10 +75,11 @@ export default class Form extends React.PureComponent<Props, State> { </header> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="create-group-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap index 04064d25ea2..1f5ac9699d7 100644 --- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap @@ -19,6 +19,9 @@ exports[`should render form 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -26,11 +29,7 @@ exports[`should render form 1`] = ` htmlFor="create-group-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx index 7bcfa6140ee..2b3dd4b272d 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx +++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; interface Props { @@ -90,10 +92,11 @@ export default class Form extends React.PureComponent<Props, State> { </header> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="permission-template-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx b/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx index 541ff8a140f..de448687c5d 100644 --- a/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx +++ b/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx @@ -23,6 +23,8 @@ import Select from 'sonar-ui-common/components/controls/Select'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { applyTemplateToProject, getPermissionTemplates } from '../../../../api/permissions'; @@ -108,32 +110,33 @@ export default class ApplyTemplate extends React.PureComponent<Props, State> { </header> <div className="modal-body"> - {this.state.done ? ( + {this.state.done && ( <Alert variant="success">{translate('projects_role.apply_template.success')}</Alert> - ) : ( + )} + + {this.state.loading && <i className="spinner" />} + + {!this.state.done && !this.state.loading && ( <> - {this.state.loading ? ( - <i className="spinner" /> - ) : ( - <div className="modal-field"> - <label htmlFor="project-permissions-template"> - {translate('template')} - <em className="mandatory">*</em> - </label> - {this.state.permissionTemplates && ( - <Select - clearable={false} - id="project-permissions-template" - onChange={this.handlePermissionTemplateChange} - options={this.state.permissionTemplates.map(permissionTemplate => ({ - label: permissionTemplate.name, - value: permissionTemplate.id - }))} - value={this.state.permissionTemplate} - /> - )} - </div> - )} + <MandatoryFieldsExplanation className="modal-field" /> + <div className="modal-field"> + <label htmlFor="project-permissions-template"> + {translate('template')} + <MandatoryFieldMarker /> + </label> + {this.state.permissionTemplates && ( + <Select + clearable={false} + id="project-permissions-template" + onChange={this.handlePermissionTemplateChange} + options={this.state.permissionTemplates.map(permissionTemplate => ({ + label: permissionTemplate.name, + value: permissionTemplate.id + }))} + value={this.state.permissionTemplate} + /> + )} + </div> </> )} </div> diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap b/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap index af33a092919..89b3a524520 100644 --- a/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap @@ -31,6 +31,9 @@ exports[`render correctly 2`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -38,11 +41,7 @@ exports[`render correctly 2`] = ` htmlFor="project-permissions-template" > template - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx index cab759a2ff1..b8d7b081702 100644 --- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx +++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx @@ -20,6 +20,7 @@ import * as React from 'react'; import RadioCard from 'sonar-ui-common/components/controls/RadioCard'; import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; export interface Props { @@ -45,15 +46,19 @@ export default function BaselineSettingDays(props: Props) { <> <p className="big-spacer-bottom">{translate('baseline.number_days.description')}</p> {selected && ( - <ValidationInput - error={undefined} - id="baseline_number_of_days" - isInvalid={isChanged && !isValid} - isValid={isChanged && isValid} - label={translate('baseline.specify_days')} - required={true}> - <input onChange={e => onChangeDays(e.currentTarget.value)} type="text" value={days} /> - </ValidationInput> + <> + <MandatoryFieldsExplanation /> + + <ValidationInput + error={undefined} + id="baseline_number_of_days" + isInvalid={isChanged && !isValid} + isValid={isChanged && isValid} + label={translate('baseline.specify_days')} + required={true}> + <input onChange={e => onChangeDays(e.currentTarget.value)} type="text" value={days} /> + </ValidationInput> + </> )} </> </RadioCard> diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx index a4409d9fea0..1d9db7939a9 100644 --- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx +++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx @@ -22,6 +22,8 @@ import RadioCard from 'sonar-ui-common/components/controls/RadioCard'; import SearchSelect from 'sonar-ui-common/components/controls/SearchSelect'; import Tooltip from 'sonar-ui-common/components/controls/Tooltip'; import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; export interface BaselineSettingReferenceBranchProps { @@ -90,9 +92,10 @@ export default function BaselineSettingReferenceBranch(props: BaselineSettingRef <p className="spacer-top">{translate('baseline.reference_branch.description2')}</p> )} <div className="big-spacer-top display-flex-column"> + <MandatoryFieldsExplanation className="spacer-bottom" /> <label className="text-middle" htmlFor="reference_branch"> <strong>{translate('baseline.reference_branch.choose')}</strong> - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <SearchSelect<BranchOption> autofocus={false} diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap index aabe88a94a8..5b8599e0aba 100644 --- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap @@ -11,6 +11,7 @@ exports[`should render correctly 1`] = ` > baseline.number_days.description </p> + <MandatoryFieldsExplanation /> <ValidationInput id="baseline_number_of_days" isInvalid={false} @@ -38,6 +39,7 @@ exports[`should render correctly 2`] = ` > baseline.number_days.description </p> + <MandatoryFieldsExplanation /> <ValidationInput id="baseline_number_of_days" isInvalid={false} @@ -65,6 +67,7 @@ exports[`should render correctly 3`] = ` > baseline.number_days.description </p> + <MandatoryFieldsExplanation /> <ValidationInput id="baseline_number_of_days" isInvalid={true} diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap index c7478b0de43..7ebf3e41e4f 100644 --- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap @@ -55,6 +55,9 @@ exports[`should render correctly: Branch level - no other branches 1`] = ` <div className="big-spacer-top display-flex-column" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <label className="text-middle" htmlFor="reference_branch" @@ -62,11 +65,7 @@ exports[`should render correctly: Branch level - no other branches 1`] = ` <strong> baseline.reference_branch.choose </strong> - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <SearchSelect autofocus={false} @@ -106,6 +105,9 @@ exports[`should render correctly: Branch level 1`] = ` <div className="big-spacer-top display-flex-column" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <label className="text-middle" htmlFor="reference_branch" @@ -113,11 +115,7 @@ exports[`should render correctly: Branch level 1`] = ` <strong> baseline.reference_branch.choose </strong> - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <SearchSelect autofocus={false} @@ -166,6 +164,9 @@ exports[`should render correctly: Project level 1`] = ` <div className="big-spacer-top display-flex-column" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <label className="text-middle" htmlFor="reference_branch" @@ -173,11 +174,7 @@ exports[`should render correctly: Project level 1`] = ` <strong> baseline.reference_branch.choose </strong> - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <SearchSelect autofocus={false} diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx index 50a229d6157..eb160154d1b 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { renameBranch } from '../../../api/branches'; import { MainBranch } from '../../../types/branch-like'; @@ -86,10 +88,11 @@ export default class RenameBranchModal extends React.PureComponent<Props, State> </header> <form onSubmit={this.handleSubmit}> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="rename-branch-name"> {translate('new_name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap index af1f6b1baf4..d86464ad074 100644 --- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap @@ -19,6 +19,9 @@ exports[`renders 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -26,11 +29,7 @@ exports[`renders 1`] = ` htmlFor="rename-branch-name" > new_name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -82,6 +81,9 @@ exports[`renders 2`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -89,11 +91,7 @@ exports[`renders 2`] = ` htmlFor="rename-branch-name" > new_name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -145,6 +143,9 @@ exports[`renders 3`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -152,11 +153,7 @@ exports[`renders 3`] = ` htmlFor="rename-branch-name" > new_name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx index 1177f119bfd..b27d7eb96a2 100644 --- a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx @@ -20,6 +20,7 @@ import * as React from 'react'; import { Button, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import ConfirmButton from 'sonar-ui-common/components/controls/ConfirmButton'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import ProjectKeyInput from '../../components/common/ProjectKeyInput'; import { validateProjectKey } from '../../helpers/projects'; @@ -65,6 +66,8 @@ export default function UpdateForm(props: UpdateFormProps) { onConfirm={props.onKeyChange}> {({ onFormSubmit }) => ( <form onSubmit={onFormSubmit}> + <MandatoryFieldsExplanation className="spacer-bottom" /> + <ProjectKeyInput error={error} label={translate('update_key.new_key')} diff --git a/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap index ed6ab1774aa..20f72690d42 100644 --- a/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap @@ -36,6 +36,9 @@ exports[`should render: form 1`] = ` <form onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <ProjectKeyInput label="update_key.new_key" onProjectKeyChange={[Function]} diff --git a/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx b/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx index 9ed9bbec733..39f1a38fa57 100644 --- a/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; interface Props { @@ -64,10 +66,12 @@ export default class CreationModal extends React.PureComponent<Props, State> { </header> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> + <div className="modal-field"> <label htmlFor="create-link-name"> {translate('project_links.name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -84,7 +88,7 @@ export default class CreationModal extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="create-link-url"> {translate('project_links.url')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input id="create-link-url" diff --git a/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap index a5a8cac07a2..3eefed9e759 100644 --- a/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap @@ -19,6 +19,9 @@ exports[`should create link 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -26,11 +29,7 @@ exports[`should create link 1`] = ` htmlFor="create-link-name" > project_links.name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -50,11 +49,7 @@ exports[`should create link 1`] = ` htmlFor="create-link-url" > project_links.url - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input id="create-link-url" diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx index 67c7befa262..3db935d400c 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx @@ -22,6 +22,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro import Modal from 'sonar-ui-common/components/controls/Modal'; import Select from 'sonar-ui-common/components/controls/Select'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { toNotSoISOString } from 'sonar-ui-common/helpers/dates'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { bulkApplyTemplate, getPermissionTemplates } from '../../api/permissions'; @@ -133,7 +135,7 @@ export default class BulkApplyTemplateModal extends React.PureComponent<Props, S <div className="modal-field"> <label> {translate('template')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <Select clearable={false} @@ -162,8 +164,13 @@ export default class BulkApplyTemplateModal extends React.PureComponent<Props, S {loading && <i className="spinner" />} - {!loading && !done && permissionTemplates && this.renderWarning()} - {!loading && !done && permissionTemplates && this.renderSelect()} + {!loading && !done && permissionTemplates && ( + <> + <MandatoryFieldsExplanation className="spacer-bottom" /> + {this.renderWarning()} + {this.renderSelect()} + </> + )} </div> <footer className="modal-foot"> diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx index b5382597a68..8b8437c8dce 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx +++ b/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx @@ -23,6 +23,8 @@ import { Link } from 'react-router'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { createProject } from '../../api/components'; import VisibilitySelector from '../../components/common/VisibilitySelector'; @@ -153,10 +155,11 @@ export default class CreateProjectForm extends React.PureComponent<Props, State> </header> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="create-project-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -172,7 +175,7 @@ export default class CreateProjectForm extends React.PureComponent<Props, State> <div className="modal-field"> <label htmlFor="create-project-key"> {translate('key')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input id="create-project-key" diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap index f8d509985e5..a7320df017c 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap @@ -48,6 +48,9 @@ exports[`bulk applies template to all results 2`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <Alert variant="warning" > @@ -58,11 +61,7 @@ exports[`bulk applies template to all results 2`] = ` > <label> template - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} @@ -118,6 +117,9 @@ exports[`bulk applies template to all results 3`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <Alert variant="warning" > @@ -128,11 +130,7 @@ exports[`bulk applies template to all results 3`] = ` > <label> template - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} @@ -257,6 +255,9 @@ exports[`bulk applies template to selected results 2`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <Alert variant="warning" > @@ -267,11 +268,7 @@ exports[`bulk applies template to selected results 2`] = ` > <label> template - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} @@ -327,6 +324,9 @@ exports[`bulk applies template to selected results 3`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="spacer-bottom" + /> <Alert variant="warning" > @@ -337,11 +337,7 @@ exports[`bulk applies template to selected results 3`] = ` > <label> template - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap index a5346ffd55e..d7c8b42fb8f 100644 --- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap @@ -19,6 +19,9 @@ exports[`creates project 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -26,11 +29,7 @@ exports[`creates project 1`] = ` htmlFor="create-project-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -50,11 +49,7 @@ exports[`creates project 1`] = ` htmlFor="create-project-key" > key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input id="create-project-key" @@ -119,6 +114,9 @@ exports[`creates project 2`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -126,11 +124,7 @@ exports[`creates project 2`] = ` htmlFor="create-project-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -150,11 +144,7 @@ exports[`creates project 2`] = ` htmlFor="create-project-key" > key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input id="create-project-key" @@ -219,6 +209,9 @@ exports[`creates project 3`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -226,11 +219,7 @@ exports[`creates project 3`] = ` htmlFor="create-project-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -250,11 +239,7 @@ exports[`creates project 3`] = ` htmlFor="create-project-key" > key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input id="create-project-key" diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx index d8d950846bc..d40627a6aa8 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx @@ -19,6 +19,8 @@ */ import * as React from 'react'; import ConfirmModal from 'sonar-ui-common/components/controls/ConfirmModal'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { copyQualityGate } from '../../../api/quality-gates'; import { Router, withRouter } from '../../../components/hoc/withRouter'; @@ -72,10 +74,11 @@ export class CopyQualityGateForm extends React.PureComponent<Props, State> { onClose={this.props.onClose} onConfirm={this.handleCopy} size="small"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="quality-gate-form-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx index f4ed7c95b3f..d61759f9797 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx @@ -19,6 +19,8 @@ */ import * as React from 'react'; import ConfirmModal from 'sonar-ui-common/components/controls/ConfirmModal'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { createQualityGate } from '../../../api/quality-gates'; import { Router, withRouter } from '../../../components/hoc/withRouter'; @@ -63,10 +65,11 @@ export class CreateQualityGateForm extends React.PureComponent<Props, State> { onClose={this.props.onClose} onConfirm={this.handleCreate} size="small"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="quality-gate-form-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx index 41f1d8da1ef..b719aade82e 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx @@ -19,6 +19,8 @@ */ import * as React from 'react'; import ConfirmModal from 'sonar-ui-common/components/controls/ConfirmModal'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { renameQualityGate } from '../../../api/quality-gates'; @@ -66,10 +68,11 @@ export default class RenameQualityGateForm extends React.PureComponent<Props, St onClose={this.props.onClose} onConfirm={this.handleRename} size="small"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="quality-gate-form-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap index 556ab1bdd5e..f3607739dd5 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap @@ -9,6 +9,9 @@ exports[`should render correctly 1`] = ` onConfirm={[Function]} size="small" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -16,11 +19,7 @@ exports[`should render correctly 1`] = ` htmlFor="quality-gate-form-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap index 49ae3943d43..f81416622fd 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap @@ -9,6 +9,9 @@ exports[`should render correctly 1`] = ` onConfirm={[Function]} size="small" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -16,11 +19,7 @@ exports[`should render correctly 1`] = ` htmlFor="quality-gate-form-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap index 3a7393891bf..b0220d9f9ed 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap @@ -9,6 +9,9 @@ exports[`should render correctly 1`] = ` onConfirm={[Function]} size="small" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -16,11 +19,7 @@ exports[`should render correctly 1`] = ` htmlFor="quality-gate-form-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx index d02e0f9afb9..b375c9af3f6 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { copyProfile } from '../../../api/quality-profiles'; import { Profile } from '../types'; @@ -86,10 +88,11 @@ export default class CopyProfileForm extends React.PureComponent<Props, State> { <h2>{header}</h2> </div> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="copy-profile-name"> {translate('quality_profiles.copy_new_name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx index 3eec5f91eb0..2317d7edeb1 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { changeProfileParent, createQualityProfile } from '../../../api/quality-profiles'; import { Profile } from '../types'; @@ -98,10 +100,11 @@ export default class ExtendProfileForm extends React.PureComponent<Props, State> <h2>{header}</h2> </div> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="extend-profile-name"> {translate('quality_profiles.copy_new_name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx index 2d0d44ad44f..43ef7a02c94 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { renameProfile } from '../../../api/quality-profiles'; import { Profile } from '../types'; @@ -86,10 +88,11 @@ export default class RenameProfileForm extends React.PureComponent<Props, State> <h2>{header}</h2> </div> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="rename-profile-name"> {translate('quality_profiles.new_name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap index add52e476b9..227de4584d0 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap @@ -19,6 +19,9 @@ exports[`should render correctly 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -26,11 +29,7 @@ exports[`should render correctly 1`] = ` htmlFor="extend-profile-name" > quality_profiles.copy_new_name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx index d7a22ff9b2a..849bdeb5f05 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx @@ -22,6 +22,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; import Select from 'sonar-ui-common/components/controls/Select'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { changeProfileParent } from '../../../api/quality-profiles'; import { Profile } from '../types'; @@ -100,9 +102,11 @@ export default class ChangeParentForm extends React.PureComponent<Props, State> <h2>{translate('quality_profiles.change_parent')}</h2> </div> <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="change-profile-parent"> - {translate('quality_profiles.parent')} <em className="mandatory">*</em> + {translate('quality_profiles.parent')} + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap index 81929a3bd56..95203d35adb 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap @@ -20,6 +20,9 @@ exports[`should render correctly 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -27,12 +30,7 @@ exports[`should render correctly 1`] = ` htmlFor="change-profile-parent" > quality_profiles.parent - - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx index d4b7f7ceaf7..fe139e165ea 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx @@ -22,6 +22,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; import Select from 'sonar-ui-common/components/controls/Select'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { parseAsOptionalString } from 'sonar-ui-common/helpers/query'; import { @@ -149,10 +151,11 @@ export default class CreateProfileForm extends React.PureComponent<Props, State> </div> ) : ( <div className="modal-body"> + <MandatoryFieldsExplanation className="modal-field" /> <div className="modal-field"> <label htmlFor="create-profile-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -169,7 +172,7 @@ export default class CreateProfileForm extends React.PureComponent<Props, State> <div className="modal-field"> <label htmlFor="create-profile-language"> {translate('language')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx index ccbe9171c4d..761394e6a66 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { restoreQualityProfile } from '../../../api/quality-profiles'; @@ -112,13 +114,16 @@ export default class RestoreProfileForm extends React.PureComponent<Props, State {profile != null && ruleSuccesses != null ? ( this.renderAlert(profile, ruleFailures, ruleSuccesses) ) : ( - <div className="modal-field"> - <label htmlFor="restore-profile-backup"> - {translate('backup')} - <em className="mandatory">*</em> - </label> - <input id="restore-profile-backup" name="backup" required={true} type="file" /> - </div> + <> + <MandatoryFieldsExplanation className="modal-field" /> + <div className="modal-field"> + <label htmlFor="restore-profile-backup"> + {translate('backup')} + <MandatoryFieldMarker /> + </label> + <input id="restore-profile-backup" name="backup" required={true} type="file" /> + </div> + </> )} </div> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap index c05fa79501e..cab26031cd2 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap @@ -20,6 +20,9 @@ exports[`should render correctly: default 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -27,11 +30,7 @@ exports[`should render correctly: default 1`] = ` htmlFor="create-profile-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -52,11 +51,7 @@ exports[`should render correctly: default 1`] = ` htmlFor="create-profile-language" > language - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} @@ -152,6 +147,9 @@ exports[`should render correctly: with query filter 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -159,11 +157,7 @@ exports[`should render correctly: with query filter 1`] = ` htmlFor="create-profile-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoFocus={true} @@ -184,11 +178,7 @@ exports[`should render correctly: with query filter 1`] = ` htmlFor="create-profile-language" > language - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <Select clearable={false} diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap index 565666717c6..725377d8d2a 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap @@ -20,6 +20,9 @@ exports[`should render correctly 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -27,11 +30,7 @@ exports[`should render correctly 1`] = ` htmlFor="restore-profile-backup" > backup - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input id="restore-profile-backup" diff --git a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx index ce089bf42da..cfc14b0b3ea 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { parseError } from 'sonar-ui-common/helpers/request'; import { sendTestEmail } from '../../../api/settings'; @@ -116,10 +118,12 @@ export class EmailForm extends React.PureComponent<Props, State> { </div> )} + <MandatoryFieldsExplanation className="form-field" /> + <div className="form-field"> <label htmlFor="test-email-to"> {translate('email_configuration.test.to_address')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input className="settings-large-input" @@ -147,7 +151,7 @@ export class EmailForm extends React.PureComponent<Props, State> { <div className="form-field"> <label htmlFor="test-email-message"> {translate('email_configuration.test.message')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <textarea className="settings-large-input" diff --git a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap index 96b6595eb05..a27318bce98 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap @@ -17,6 +17,9 @@ exports[`should render correctly: default 1`] = ` className="settings-definition-right" onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -24,11 +27,7 @@ exports[`should render correctly: default 1`] = ` htmlFor="test-email-to" > email_configuration.test.to_address - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="settings-large-input" @@ -64,11 +63,7 @@ exports[`should render correctly: default 1`] = ` htmlFor="test-email-message" > email_configuration.test.message - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <textarea className="settings-large-input" @@ -115,6 +110,9 @@ exports[`should render correctly: error 1`] = ` Some error message </Alert> </div> + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -122,11 +120,7 @@ exports[`should render correctly: error 1`] = ` htmlFor="test-email-to" > email_configuration.test.to_address - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="settings-large-input" @@ -162,11 +156,7 @@ exports[`should render correctly: error 1`] = ` htmlFor="test-email-message" > email_configuration.test.message - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <textarea className="settings-large-input" @@ -204,6 +194,9 @@ exports[`should render correctly: sending 1`] = ` className="settings-definition-right" onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -211,11 +204,7 @@ exports[`should render correctly: sending 1`] = ` htmlFor="test-email-to" > email_configuration.test.to_address - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="settings-large-input" @@ -251,11 +240,7 @@ exports[`should render correctly: sending 1`] = ` htmlFor="test-email-message" > email_configuration.test.message - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <textarea className="settings-large-input" @@ -305,6 +290,9 @@ exports[`should render correctly: success 1`] = ` email_configuration.test.email_was_sent_to_x.email@example.com </Alert> </div> + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -312,11 +300,7 @@ exports[`should render correctly: success 1`] = ` htmlFor="test-email-to" > email_configuration.test.to_address - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="settings-large-input" @@ -352,11 +336,7 @@ exports[`should render correctly: success 1`] = ` htmlFor="test-email-message" > email_configuration.test.message - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <textarea className="settings-large-input" diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx index 9b457023145..de5693da0f3 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx @@ -20,6 +20,7 @@ import * as React from 'react'; import { ButtonLink } from 'sonar-ui-common/components/controls/buttons'; import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { AlmBindingDefinition } from '../../../../types/alm-settings'; @@ -56,7 +57,7 @@ export function AlmBindingDefinitionFormField<B extends AlmBindingDefinition>( <div className="modal-field"> <label className="display-flex-center" htmlFor={id}> {translate('settings.almintegration.form', id)} - {!optional && <em className="mandatory">*</em>} + {!optional && <MandatoryFieldMarker />} {help && <HelpTooltip className="spacer-left" overlay={help} placement="right" />} </label> diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap index ccc7252b691..e07b3cf23ca 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap @@ -9,11 +9,7 @@ exports[`should render correctly: default 1`] = ` htmlFor="key" > settings.almintegration.form.key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="input-super-large" @@ -60,11 +56,7 @@ exports[`should render correctly: secret 1`] = ` htmlFor="key" > settings.almintegration.form.key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <div> <p> @@ -88,11 +80,7 @@ exports[`should render correctly: textarea 1`] = ` htmlFor="key" > settings.almintegration.form.key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <textarea className="settings-large-input" @@ -115,11 +103,7 @@ exports[`should render correctly: with help 1`] = ` htmlFor="key" > settings.almintegration.form.key - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay="help" diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx index c6d297e1564..7e1ce81ba09 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx @@ -22,6 +22,7 @@ import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router'; import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants'; import { AlmKeys, ProjectAlmBindingResponse } from '../../../../types/alm-settings'; @@ -51,7 +52,7 @@ function renderLabel(props: LabelProps) { return ( <label className="display-flex-center" htmlFor={id}> {translate('settings.pr_decoration.binding.form', id)} - {!optional && <em className="mandatory">*</em>} + {!optional && <MandatoryFieldMarker />} {help && ( <HelpTooltip className="spacer-left" diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx index e76452194c9..d2d2c62bf56 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx @@ -25,6 +25,8 @@ import Select from 'sonar-ui-common/components/controls/Select'; import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { AlmSettingsInstance, ProjectAlmBindingResponse } from '../../../../types/alm-settings'; import AlmSpecificForm from './AlmSpecificForm'; @@ -110,10 +112,12 @@ export default function PRDecorationBindingRenderer(props: PRDecorationBindingRe event.preventDefault(); props.onSubmit(); }}> + <MandatoryFieldsExplanation className="form-field" /> + <div className="form-field"> <label htmlFor="name"> {translate('settings.pr_decoration.binding.form.name')} - <em className="mandatory spacer-right">*</em> + <MandatoryFieldMarker className="spacer-right" /> </label> <Select autosize={true} diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap index 572d371879f..73200b87160 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap @@ -10,11 +10,7 @@ exports[`it should render correctly for azure and monorepo=false 1`] = ` htmlFor="azure.project" > settings.pr_decoration.binding.form.azure.project - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -45,11 +41,7 @@ exports[`it should render correctly for azure and monorepo=false 1`] = ` htmlFor="azure.repository" > settings.pr_decoration.binding.form.azure.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -85,11 +77,7 @@ exports[`it should render correctly for azure and monorepo=true 1`] = ` htmlFor="azure.project" > settings.pr_decoration.binding.form.azure.project - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -120,11 +108,7 @@ exports[`it should render correctly for azure and monorepo=true 1`] = ` htmlFor="azure.repository" > settings.pr_decoration.binding.form.azure.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -202,11 +186,7 @@ exports[`it should render correctly for bitbucket and monorepo=false 1`] = ` htmlFor="bitbucket.repository" > settings.pr_decoration.binding.form.bitbucket.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -247,11 +227,7 @@ exports[`it should render correctly for bitbucket and monorepo=false 1`] = ` htmlFor="bitbucket.slug" > settings.pr_decoration.binding.form.bitbucket.slug - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -297,11 +273,7 @@ exports[`it should render correctly for bitbucket and monorepo=true 1`] = ` htmlFor="bitbucket.repository" > settings.pr_decoration.binding.form.bitbucket.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -342,11 +314,7 @@ exports[`it should render correctly for bitbucket and monorepo=true 1`] = ` htmlFor="bitbucket.slug" > settings.pr_decoration.binding.form.bitbucket.slug - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -434,11 +402,7 @@ exports[`it should render correctly for bitbucketcloud and monorepo=false 1`] = htmlFor="bitbucketcloud.repository" > settings.pr_decoration.binding.form.bitbucketcloud.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -483,11 +447,7 @@ exports[`it should render correctly for github and monorepo=false 1`] = ` htmlFor="github.repository" > settings.pr_decoration.binding.form.github.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -558,11 +518,7 @@ exports[`it should render correctly for github and monorepo=true 1`] = ` htmlFor="github.repository" > settings.pr_decoration.binding.form.github.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -675,11 +631,7 @@ exports[`it should render correctly for gitlab and monorepo=false 1`] = ` htmlFor="gitlab.repository" > settings.pr_decoration.binding.form.gitlab.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="input-super-large" @@ -704,11 +656,7 @@ exports[`it should render correctly for gitlab and monorepo=true 1`] = ` htmlFor="gitlab.repository" > settings.pr_decoration.binding.form.gitlab.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="input-super-large" @@ -775,11 +723,7 @@ exports[`should render an alert for azure when the monorepo option is activated htmlFor="azure.project" > settings.pr_decoration.binding.form.azure.project - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ @@ -810,11 +754,7 @@ exports[`should render an alert for azure when the monorepo option is activated htmlFor="azure.repository" > settings.pr_decoration.binding.form.azure.repository - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> <HelpTooltip className="spacer-left" overlay={ diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap index 8ab91f7af9a..35bf2eecea1 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap @@ -19,6 +19,9 @@ exports[`should display action state correctly 1`] = ` <form onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -26,11 +29,9 @@ exports[`should display action state correctly 1`] = ` htmlFor="name" > settings.pr_decoration.binding.form.name - <em - className="mandatory spacer-right" - > - * - </em> + <MandatoryFieldMarker + className="spacer-right" + /> </label> <Select autosize={true} @@ -91,6 +92,9 @@ exports[`should display action state correctly 2`] = ` <form onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -98,11 +102,9 @@ exports[`should display action state correctly 2`] = ` htmlFor="name" > settings.pr_decoration.binding.form.name - <em - className="mandatory spacer-right" - > - * - </em> + <MandatoryFieldMarker + className="spacer-right" + /> </label> <Select autosize={true} @@ -171,6 +173,9 @@ exports[`should display action state correctly 3`] = ` <form onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -178,11 +183,9 @@ exports[`should display action state correctly 3`] = ` htmlFor="name" > settings.pr_decoration.binding.form.name - <em - className="mandatory spacer-right" - > - * - </em> + <MandatoryFieldMarker + className="spacer-right" + /> </label> <Select autosize={true} @@ -270,6 +273,9 @@ exports[`should render multiple instances correctly 1`] = ` <form onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -277,11 +283,9 @@ exports[`should render multiple instances correctly 1`] = ` htmlFor="name" > settings.pr_decoration.binding.form.name - <em - className="mandatory spacer-right" - > - * - </em> + <MandatoryFieldMarker + className="spacer-right" + /> </label> <Select autosize={true} @@ -356,6 +360,9 @@ exports[`should render multiple instances correctly 2`] = ` <form onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -363,11 +370,9 @@ exports[`should render multiple instances correctly 2`] = ` htmlFor="name" > settings.pr_decoration.binding.form.name - <em - className="mandatory spacer-right" - > - * - </em> + <MandatoryFieldMarker + className="spacer-right" + /> </label> <Select autosize={true} @@ -483,6 +488,9 @@ exports[`should render single instance correctly 1`] = ` <form onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -490,11 +498,9 @@ exports[`should render single instance correctly 1`] = ` htmlFor="name" > settings.pr_decoration.binding.form.name - <em - className="mandatory spacer-right" - > - * - </em> + <MandatoryFieldMarker + className="spacer-right" + /> </label> <Select autosize={true} diff --git a/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx b/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx index 5090a81e154..13aa843062e 100644 --- a/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx +++ b/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx @@ -21,6 +21,8 @@ import * as React from 'react'; import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import Modal from 'sonar-ui-common/components/controls/Modal'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { parseError } from 'sonar-ui-common/helpers/request'; import { changePassword } from '../../../api/users'; @@ -108,11 +110,14 @@ export default class PasswordForm extends React.PureComponent<Props, State> { </header> <div className="modal-body"> {error && <Alert variant="error">{error}</Alert>} + + <MandatoryFieldsExplanation className="modal-field" /> + {this.props.isCurrentUser && ( <div className="modal-field"> <label htmlFor="old-user-password"> {translate('my_profile.password.old')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> {/* keep this fake field to hack browser autofill */} <input className="hidden" name="old-password-fake" type="password" /> @@ -129,7 +134,7 @@ export default class PasswordForm extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="user-password"> {translate('my_profile.password.new')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> {/* keep this fake field to hack browser autofill */} <input className="hidden" name="password-fake" type="password" /> @@ -145,7 +150,7 @@ export default class PasswordForm extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="confirm-user-password"> {translate('my_profile.password.confirm')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> {/* keep this fake field to hack browser autofill */} <input className="hidden" name="confirm-password-fake" type="password" /> diff --git a/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx b/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx index 36e527409bd..6ab6b9e2c4f 100644 --- a/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx +++ b/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx @@ -22,6 +22,8 @@ import * as React from 'react'; import { Button, ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n'; import { parseError } from 'sonar-ui-common/helpers/request'; import { createUser, updateUser } from '../../../api/users'; @@ -165,11 +167,13 @@ export default class UserForm extends React.PureComponent<Props, State> { <Alert variant="warning">{translate('users.cannot_update_delegated_user')}</Alert> )} + <MandatoryFieldsExplanation className="modal-field" /> + {!user && ( <div className="modal-field"> <label htmlFor="create-user-login"> {translate('login')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> {/* keep this fake field to hack browser autofill */} <input className="hidden" name="login-fake" type="text" /> @@ -190,7 +194,7 @@ export default class UserForm extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="create-user-name"> {translate('name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> {/* keep this fake field to hack browser autofill */} <input className="hidden" name="name-fake" type="text" /> @@ -224,7 +228,7 @@ export default class UserForm extends React.PureComponent<Props, State> { <div className="modal-field"> <label htmlFor="create-user-password"> {translate('password')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> {/* keep this fake field to hack browser autofill */} <input className="hidden" name="password-fake" type="password" /> diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap index 339b1f60693..680f7a1d7fd 100644 --- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap @@ -21,6 +21,9 @@ exports[`should render correctly 1`] = ` <div className="modal-body" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -28,11 +31,7 @@ exports[`should render correctly 1`] = ` htmlFor="old-user-password" > my_profile.password.old - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="hidden" @@ -55,11 +54,7 @@ exports[`should render correctly 1`] = ` htmlFor="user-password" > my_profile.password.new - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="hidden" @@ -82,11 +77,7 @@ exports[`should render correctly 1`] = ` htmlFor="confirm-user-password" > my_profile.password.confirm - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="hidden" diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap index 97a534726aa..793ddc69999 100644 --- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap @@ -21,6 +21,9 @@ exports[`should render correctly 1`] = ` <div className="modal-body modal-container" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -28,11 +31,7 @@ exports[`should render correctly 1`] = ` htmlFor="create-user-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="hidden" @@ -136,6 +135,9 @@ exports[`should render correctly 2`] = ` <div className="modal-body modal-container" > + <MandatoryFieldsExplanation + className="modal-field" + /> <div className="modal-field" > @@ -143,11 +145,7 @@ exports[`should render correctly 2`] = ` htmlFor="create-user-login" > login - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="hidden" @@ -178,11 +176,7 @@ exports[`should render correctly 2`] = ` htmlFor="create-user-name" > name - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="hidden" @@ -229,11 +223,7 @@ exports[`should render correctly 2`] = ` htmlFor="create-user-password" > password - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input className="hidden" diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx index 8403dbdf686..8aa607080c8 100644 --- a/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx +++ b/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import InputValidationField from 'sonar-ui-common/components/controls/InputValidationField'; import ValidationModal from 'sonar-ui-common/components/controls/ValidationModal'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { isWebUri } from 'valid-url'; @@ -82,6 +84,8 @@ export default class CreateWebhookForm extends React.PureComponent<Props> { validate={this.handleValidate}> {({ dirty, errors, handleBlur, handleChange, isSubmitting, touched, values }) => ( <> + <MandatoryFieldsExplanation className="big-spacer-bottom" /> + <InputValidationField autoFocus={true} dirty={dirty} @@ -91,7 +95,7 @@ export default class CreateWebhookForm extends React.PureComponent<Props> { label={ <label htmlFor="webhook-name"> {translate('webhooks.name')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> } name="name" @@ -110,7 +114,7 @@ export default class CreateWebhookForm extends React.PureComponent<Props> { label={ <label htmlFor="webhook-url"> {translate('webhooks.url')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> } name="url" diff --git a/server/sonar-web/src/main/js/components/common/ResetPassword.tsx b/server/sonar-web/src/main/js/components/common/ResetPassword.tsx index 47efdb10df9..ff59d0a1173 100644 --- a/server/sonar-web/src/main/js/components/common/ResetPassword.tsx +++ b/server/sonar-web/src/main/js/components/common/ResetPassword.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import { SubmitButton } from 'sonar-ui-common/components/controls/buttons'; import { Alert } from 'sonar-ui-common/components/ui/Alert'; +import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker'; +import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { changePassword } from '../../api/users'; @@ -99,10 +101,12 @@ export default class ResetPassword extends React.Component<Props, State> { </Alert> ))} + <MandatoryFieldsExplanation className="form-field" /> + <div className="form-field"> <label htmlFor="old_password"> {translate('my_profile.password.old')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoComplete="off" @@ -116,7 +120,7 @@ export default class ResetPassword extends React.Component<Props, State> { <div className="form-field"> <label htmlFor="password"> {translate('my_profile.password.new')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoComplete="off" @@ -130,7 +134,7 @@ export default class ResetPassword extends React.Component<Props, State> { <div className="form-field"> <label htmlFor="password_confirmation"> {translate('my_profile.password.confirm')} - <em className="mandatory">*</em> + <MandatoryFieldMarker /> </label> <input autoComplete="off" diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap index e4983b61dc3..f2fbe03c093 100644 --- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap @@ -13,6 +13,9 @@ exports[`renders correctly 1`] = ` className="boxed-group-inner" onSubmit={[Function]} > + <MandatoryFieldsExplanation + className="form-field" + /> <div className="form-field" > @@ -20,11 +23,7 @@ exports[`renders correctly 1`] = ` htmlFor="old_password" > my_profile.password.old - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoComplete="off" @@ -41,11 +40,7 @@ exports[`renders correctly 1`] = ` htmlFor="password" > my_profile.password.new - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoComplete="off" @@ -62,11 +57,7 @@ exports[`renders correctly 1`] = ` htmlFor="password_confirmation" > my_profile.password.confirm - <em - className="mandatory" - > - * - </em> + <MandatoryFieldMarker /> </label> <input autoComplete="off" |