SONAR-12056 Indicate required fields for forms

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}

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}

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}

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">

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}

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')}

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"

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}

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}

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}

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}

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}

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}

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}

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>

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}

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>

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}

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}

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}

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}

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}

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')}

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]}

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"

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"

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">

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"

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}

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"

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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>
 

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}

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"

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"

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"

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>
 

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"

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"

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}

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={

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}

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" />

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" />

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"

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"

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"

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"

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"

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -79,6 +79,8 @@ explore=Explore
 extend=Extend
 false=False
 favorite=Favorite
+field_required=This field is required
+fields_marked_with_x_required=All fields marked with {star} are required
 file=File
 files=Files
 filters=Filters