SONAR-12056 Indicate required fields for forms

diff --git a/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx b/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx
index 756866c99092e09583dda597b93415be2e12b7e3..b46fbcfba604de6b708d3fcec1c567b2b0e7d81c 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx
+++ b/server/sonar-web/src/main/js/app/components/extensions/CreateApplicationForm.tsx
@@ -22,6 +22,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro
 import Radio from 'sonar-ui-common/components/controls/Radio';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createApplication } from '../../../api/application';
 import { ComponentQualifier, Visibility } from '../../../types/component';
@@ -107,9 +109,12 @@ export default class CreateApplicationForm extends React.PureComponent<Props, St
             </div>
 
             <div className="modal-body">
+              <MandatoryFieldsExplanation className="modal-field" />
+
               <div className="modal-field">
                 <label htmlFor="view-edit-name">
-                  {translate('name')} <em className="mandatory">*</em>
+                  {translate('name')}
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={true}

diff --git a/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap b/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap
index dae7cc69a986bea622bfe6daeed2192a23a02bdc..eca852deb5190e686b73b4169e2b48dee66bf23e 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/extensions/__tests__/__snapshots__/CreateApplicationForm-test.tsx.snap
@@ -31,6 +31,9 @@ exports[`should render correctly: form 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -38,12 +41,7 @@ exports[`should render correctly: form 1`] = `
           htmlFor="view-edit-name"
         >
           name
-           
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx b/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx
index 172be29752a48d5962681c9906a8fcecd8e1ca2f..c040d48a7983322a6ea1828f3be0a0e506199d13 100644 (file)
--- a/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx
+++ b/server/sonar-web/src/main/js/apps/application-console/CreateBranchForm.tsx
@@ -22,6 +22,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import {
   addApplicationBranch,
@@ -258,9 +260,11 @@ export default class CreateBranchForm extends React.PureComponent<Props, State>
                 </div>
               ) : (
                 <>
+                  <MandatoryFieldsExplanation className="modal-field" />
                   <div className="modal-field">
                     <label htmlFor="view-edit-name">
-                      {translate('name')} <em className="mandatory">*</em>
+                      {translate('name')}
+                      <MandatoryFieldMarker />
                     </label>
                     <input
                       autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
index 73a1d18c789b4a4ad8b4dc7b5c02f5b8a3c2bd1c..738187b2be771c2b484e3d8b26774f3964805fc7 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
@@ -23,6 +23,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import Select from 'sonar-ui-common/components/controls/Select';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { csvEscape } from 'sonar-ui-common/helpers/csv';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { latinize } from 'sonar-ui-common/helpers/strings';
@@ -154,7 +156,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
   renderNameField = () => (
     <div className="modal-field">
       <label htmlFor="coding-rules-custom-rule-creation-name">
-        {translate('name')} <em className="mandatory">*</em>
+        {translate('name')} <MandatoryFieldMarker />
       </label>
       <input
         autoFocus={true}
@@ -171,7 +173,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
   renderKeyField = () => (
     <div className="modal-field">
       <label htmlFor="coding-rules-custom-rule-creation-key">
-        {translate('key')} {!this.props.customRule && <em className="mandatory">*</em>}
+        {translate('key')} {!this.props.customRule && <MandatoryFieldMarker />}
       </label>
 
       {this.props.customRule ? (
@@ -194,7 +196,8 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
   renderDescriptionField = () => (
     <div className="modal-field">
       <label htmlFor="coding-rules-custom-rule-creation-html-description">
-        {translate('description')} <em className="mandatory">*</em>
+        {translate('description')}
+        <MandatoryFieldMarker />
       </label>
       <textarea
         disabled={this.state.submitting}
@@ -332,6 +335,8 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
               <Alert variant="warning">{translate('coding_rules.reactivate.help')}</Alert>
             )}
 
+            <MandatoryFieldsExplanation className="spacer-bottom" />
+
             {this.renderNameField()}
             {this.renderKeyField()}
             <div className="display-flex-space-between">

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
index e51c719d869d8adfb6fe5fb568ff830371fdb213..426e1a46317dcca67c259dfe5b774d45f4032cd0 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CustomRuleFormModal-test.tsx.snap
@@ -23,6 +23,9 @@ exports[`should handle re-activation 1`] = `
       >
         coding_rules.reactivate.help
       </Alert>
+      <MandatoryFieldsExplanation
+        className="spacer-bottom"
+      />
       <div
         className="modal-field"
       >
@@ -31,11 +34,7 @@ exports[`should handle re-activation 1`] = `
         >
           name
            
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -55,11 +54,7 @@ exports[`should handle re-activation 1`] = `
         >
           key
            
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           disabled={false}
@@ -196,12 +191,7 @@ exports[`should handle re-activation 1`] = `
           htmlFor="coding-rules-custom-rule-creation-html-description"
         >
           description
-           
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <textarea
           disabled={false}
@@ -254,6 +244,9 @@ exports[`should render correctly 1`] = `
     <div
       className="modal-body modal-container"
     >
+      <MandatoryFieldsExplanation
+        className="spacer-bottom"
+      />
       <div
         className="modal-field"
       >
@@ -262,11 +255,7 @@ exports[`should render correctly 1`] = `
         >
           name
            
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -286,11 +275,7 @@ exports[`should render correctly 1`] = `
         >
           key
            
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           disabled={false}
@@ -427,12 +412,7 @@ exports[`should render correctly 1`] = `
           htmlFor="coding-rules-custom-rule-creation-html-description"
         >
           description
-           
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <textarea
           disabled={false}

diff --git a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
index b61cca8fe70b160f1e0d16d786cf3b9c234a6a96..858d4464fa064974cd6ecead34706d98f24da556 100644 (file)
--- a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
@@ -23,6 +23,7 @@ import * as React from 'react';
 import { SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createProject, doesComponentExists } from '../../../api/components';
 import ProjectKeyInput from '../../../components/common/ProjectKeyInput';
@@ -190,6 +191,8 @@ export default class ManualProjectCreate extends React.PureComponent<Props, Stat
         <div className="create-project-manual">
           <div className="flex-1 huge-spacer-right">
             <form className="manual-project-create" onSubmit={this.handleFormSubmit}>
+              <MandatoryFieldsExplanation className="big-spacer-bottom" />
+
               <ProjectKeyInput
                 error={projectKeyError}
                 help={translate('onboarding.create_project.project_key.help')}

diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap
index 9d81986e63a509e6d45c35d906d810b406d0fdcc..419e388a868585a2894069c0a85b906c1922b131 100644 (file)
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/ManualProjectCreate-test.tsx.snap
@@ -15,6 +15,9 @@ exports[`should render correctly 1`] = `
         className="manual-project-create"
         onSubmit={[Function]}
       >
+        <MandatoryFieldsExplanation
+          className="big-spacer-bottom"
+        />
         <ProjectKeyInput
           help="onboarding.create_project.project_key.help"
           label="onboarding.create_project.project_key"

diff --git a/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx b/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx
index fa5a386e57b27c1856fdca62004ce8932513b662..766f7ba9ae8a4ddd939ad84632e106fee5d8ed93 100644 (file)
--- a/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/custom-measures/components/Form.tsx
@@ -23,6 +23,7 @@ import Select from 'sonar-ui-common/components/controls/Select';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getAllMetrics } from '../../../api/metrics';
 
@@ -115,7 +116,7 @@ export default class Form extends React.PureComponent<Props, State> {
       <div className="modal-field">
         <label htmlFor="create-custom-measure-metric">
           {translate('custom_measures.metric')}
-          <em className="mandatory">*</em>
+          <MandatoryFieldMarker />
         </label>
         {this.state.loading ? (
           <i className="spinner" />
@@ -159,7 +160,7 @@ export default class Form extends React.PureComponent<Props, State> {
               <div className="modal-field">
                 <label htmlFor="create-custom-measure-value">
                   {translate('value')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={this.props.measure !== undefined}

diff --git a/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap b/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap
index cd4b411c460924c8d271bd2b35d056e5076c6006..09df42c1d2c05ccff5c156153557578a0abc3b65 100644 (file)
--- a/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/custom-measures/components/__tests__/__snapshots__/Form-test.tsx.snap
@@ -26,11 +26,7 @@ exports[`should render form 1`] = `
           htmlFor="create-custom-measure-metric"
         >
           custom_measures.metric
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <i
           className="spinner"
@@ -43,11 +39,7 @@ exports[`should render form 1`] = `
           htmlFor="create-custom-measure-value"
         >
           value
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={false}
@@ -127,11 +119,7 @@ exports[`should render form 2`] = `
           htmlFor="create-custom-measure-metric"
         >
           custom_measures.metric
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <Select
           autoFocus={true}
@@ -155,11 +143,7 @@ exports[`should render form 2`] = `
           htmlFor="create-custom-measure-value"
         >
           value
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={false}

diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
index 598b8b6318ccabbe4e1a2defe1fc81540c1d33ec..7d564cd2533c05c01e96ad22c28c2c40df8b5a0b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
@@ -22,6 +22,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro
 import Select, { Creatable } from 'sonar-ui-common/components/controls/Select';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 export interface MetricProps {
@@ -107,10 +109,12 @@ export default class Form extends React.PureComponent<Props, State> {
             </header>
 
             <div className="modal-body modal-container">
+              <MandatoryFieldsExplanation className="modal-field" />
+
               <div className="modal-field">
                 <label htmlFor="create-metric-key">
                   {translate('key')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={true}
@@ -126,7 +130,7 @@ export default class Form extends React.PureComponent<Props, State> {
               <div className="modal-field">
                 <label htmlFor="create-metric-name">
                   {translate('name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   id="create-metric-name"
@@ -159,7 +163,7 @@ export default class Form extends React.PureComponent<Props, State> {
               <div className="modal-field">
                 <label htmlFor="create-metric-type">
                   {translate('type')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <Select
                   clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap
index daf655407d52e58fbefe65e0736d746b0d0e9dab..f1997db2310fadb029729964010080dd70968208 100644 (file)
--- a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/__snapshots__/Form-test.tsx.snap
@@ -19,6 +19,9 @@ exports[`should render form 1`] = `
     <div
       className="modal-body modal-container"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -26,11 +29,7 @@ exports[`should render form 1`] = `
           htmlFor="create-metric-key"
         >
           key
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -50,11 +49,7 @@ exports[`should render form 1`] = `
           htmlFor="create-metric-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           id="create-metric-name"
@@ -113,11 +108,7 @@ exports[`should render form 1`] = `
           htmlFor="create-metric-type"
         >
           type
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <Select
           clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/groups/components/Form.tsx b/server/sonar-web/src/main/js/apps/groups/components/Form.tsx
index ba48ae8c5abf8e13843b841992d53a1098802855..978b7ce181fbfc882fbe697bbd3ca226a9667609 100644 (file)
--- a/server/sonar-web/src/main/js/apps/groups/components/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/Form.tsx
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 interface Props {
@@ -73,10 +75,11 @@ export default class Form extends React.PureComponent<Props, State> {
             </header>
 
             <div className="modal-body">
+              <MandatoryFieldsExplanation className="modal-field" />
               <div className="modal-field">
                 <label htmlFor="create-group-name">
                   {translate('name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap
index 04064d25ea2abf05174a028112806aedfa9310ce..1f5ac9699d76875e339dc4a627704b7ae2c92a22 100644 (file)
--- a/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/groups/components/__tests__/__snapshots__/Form-test.tsx.snap
@@ -19,6 +19,9 @@ exports[`should render form 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -26,11 +29,7 @@ exports[`should render form 1`] = `
           htmlFor="create-group-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx b/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx
index 7bcfa6140ee649f49cad22d38bcaa355f08bfbcf..2b3dd4b272df24435471ea5c0613d61de39b9f41 100644 (file)
--- a/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/permission-templates/components/Form.tsx
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 interface Props {
@@ -90,10 +92,11 @@ export default class Form extends React.PureComponent<Props, State> {
             </header>
 
             <div className="modal-body">
+              <MandatoryFieldsExplanation className="modal-field" />
               <div className="modal-field">
                 <label htmlFor="permission-template-name">
                   {translate('name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx b/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx
index 541ff8a140f7b194500db06f1f95463a2ef7733a..de448687c5d76a1d2607722b1b0848597ef7e6a3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/ApplyTemplate.tsx
@@ -23,6 +23,8 @@ import Select from 'sonar-ui-common/components/controls/Select';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { applyTemplateToProject, getPermissionTemplates } from '../../../../api/permissions';
 
@@ -108,32 +110,33 @@ export default class ApplyTemplate extends React.PureComponent<Props, State> {
             </header>
 
             <div className="modal-body">
-              {this.state.done ? (
+              {this.state.done && (
                 <Alert variant="success">{translate('projects_role.apply_template.success')}</Alert>
-              ) : (
+              )}
+
+              {this.state.loading && <i className="spinner" />}
+
+              {!this.state.done && !this.state.loading && (
                 <>
-                  {this.state.loading ? (
-                    <i className="spinner" />
-                  ) : (
-                    <div className="modal-field">
-                      <label htmlFor="project-permissions-template">
-                        {translate('template')}
-                        <em className="mandatory">*</em>
-                      </label>
-                      {this.state.permissionTemplates && (
-                        <Select
-                          clearable={false}
-                          id="project-permissions-template"
-                          onChange={this.handlePermissionTemplateChange}
-                          options={this.state.permissionTemplates.map(permissionTemplate => ({
-                            label: permissionTemplate.name,
-                            value: permissionTemplate.id
-                          }))}
-                          value={this.state.permissionTemplate}
-                        />
-                      )}
-                    </div>
-                  )}
+                  <MandatoryFieldsExplanation className="modal-field" />
+                  <div className="modal-field">
+                    <label htmlFor="project-permissions-template">
+                      {translate('template')}
+                      <MandatoryFieldMarker />
+                    </label>
+                    {this.state.permissionTemplates && (
+                      <Select
+                        clearable={false}
+                        id="project-permissions-template"
+                        onChange={this.handlePermissionTemplateChange}
+                        options={this.state.permissionTemplates.map(permissionTemplate => ({
+                          label: permissionTemplate.name,
+                          value: permissionTemplate.id
+                        }))}
+                        value={this.state.permissionTemplate}
+                      />
+                    )}
+                  </div>
                 </>
               )}
             </div>

diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap b/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap
index af33a0929193696828443f135e8959eaee2c679d..89b3a52452031bba5cd0e3b6567c5bd39ae14540 100644 (file)
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/__snapshots__/ApplyTemplate-test.tsx.snap
@@ -31,6 +31,9 @@ exports[`render correctly 2`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -38,11 +41,7 @@ exports[`render correctly 2`] = `
           htmlFor="project-permissions-template"
         >
           template
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <Select
           clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx
index cab759a2ff12caeeed9ad3184b68394e37648336..b8d7b0817024124920d9baeefae88fcfabd360d0 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingDays.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import RadioCard from 'sonar-ui-common/components/controls/RadioCard';
 import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 export interface Props {
@@ -45,15 +46,19 @@ export default function BaselineSettingDays(props: Props) {
       <>
         <p className="big-spacer-bottom">{translate('baseline.number_days.description')}</p>
         {selected && (
-          <ValidationInput
-            error={undefined}
-            id="baseline_number_of_days"
-            isInvalid={isChanged && !isValid}
-            isValid={isChanged && isValid}
-            label={translate('baseline.specify_days')}
-            required={true}>
-            <input onChange={e => onChangeDays(e.currentTarget.value)} type="text" value={days} />
-          </ValidationInput>
+          <>
+            <MandatoryFieldsExplanation />
+
+            <ValidationInput
+              error={undefined}
+              id="baseline_number_of_days"
+              isInvalid={isChanged && !isValid}
+              isValid={isChanged && isValid}
+              label={translate('baseline.specify_days')}
+              required={true}>
+              <input onChange={e => onChangeDays(e.currentTarget.value)} type="text" value={days} />
+            </ValidationInput>
+          </>
         )}
       </>
     </RadioCard>

diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
index a4409d9fea0be67f2da1fed6915292c44321c7b9..1d9db7939a9bc445b9aa7a332be2cabdc6d391f4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
@@ -22,6 +22,8 @@ import RadioCard from 'sonar-ui-common/components/controls/RadioCard';
 import SearchSelect from 'sonar-ui-common/components/controls/SearchSelect';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 
 export interface BaselineSettingReferenceBranchProps {
@@ -90,9 +92,10 @@ export default function BaselineSettingReferenceBranch(props: BaselineSettingRef
               <p className="spacer-top">{translate('baseline.reference_branch.description2')}</p>
             )}
             <div className="big-spacer-top display-flex-column">
+              <MandatoryFieldsExplanation className="spacer-bottom" />
               <label className="text-middle" htmlFor="reference_branch">
                 <strong>{translate('baseline.reference_branch.choose')}</strong>
-                <em className="mandatory">*</em>
+                <MandatoryFieldMarker />
               </label>
               <SearchSelect<BranchOption>
                 autofocus={false}

diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap
index aabe88a94a84071e1b2d4baeb12bcacd33ee30a2..5b8599e0aba1a5b57d53e2f98c7737e97cad2726 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingDays-test.tsx.snap
@@ -11,6 +11,7 @@ exports[`should render correctly 1`] = `
   >
     baseline.number_days.description
   </p>
+  <MandatoryFieldsExplanation />
   <ValidationInput
     id="baseline_number_of_days"
     isInvalid={false}
@@ -38,6 +39,7 @@ exports[`should render correctly 2`] = `
   >
     baseline.number_days.description
   </p>
+  <MandatoryFieldsExplanation />
   <ValidationInput
     id="baseline_number_of_days"
     isInvalid={false}
@@ -65,6 +67,7 @@ exports[`should render correctly 3`] = `
   >
     baseline.number_days.description
   </p>
+  <MandatoryFieldsExplanation />
   <ValidationInput
     id="baseline_number_of_days"
     isInvalid={true}

diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
index c7478b0de430ebe42c71871d975bcb100318566d..7ebf3e41e4f13fffbb1ddbc98a73fe1d574d6745 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
@@ -55,6 +55,9 @@ exports[`should render correctly: Branch level - no other branches 1`] = `
   <div
     className="big-spacer-top display-flex-column"
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <label
       className="text-middle"
       htmlFor="reference_branch"
@@ -62,11 +65,7 @@ exports[`should render correctly: Branch level - no other branches 1`] = `
       <strong>
         baseline.reference_branch.choose
       </strong>
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <SearchSelect
       autofocus={false}
@@ -106,6 +105,9 @@ exports[`should render correctly: Branch level 1`] = `
   <div
     className="big-spacer-top display-flex-column"
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <label
       className="text-middle"
       htmlFor="reference_branch"
@@ -113,11 +115,7 @@ exports[`should render correctly: Branch level 1`] = `
       <strong>
         baseline.reference_branch.choose
       </strong>
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <SearchSelect
       autofocus={false}
@@ -166,6 +164,9 @@ exports[`should render correctly: Project level 1`] = `
   <div
     className="big-spacer-top display-flex-column"
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <label
       className="text-middle"
       htmlFor="reference_branch"
@@ -173,11 +174,7 @@ exports[`should render correctly: Project level 1`] = `
       <strong>
         baseline.reference_branch.choose
       </strong>
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <SearchSelect
       autofocus={false}

diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx
index 50a229d6157a2b0d58290fb588a3ec50c6c0f5fc..eb160154d1b909c9e98447548fe4fd38443b4054 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { renameBranch } from '../../../api/branches';
 import { MainBranch } from '../../../types/branch-like';
@@ -86,10 +88,11 @@ export default class RenameBranchModal extends React.PureComponent<Props, State>
         </header>
         <form onSubmit={this.handleSubmit}>
           <div className="modal-body">
+            <MandatoryFieldsExplanation className="modal-field" />
             <div className="modal-field">
               <label htmlFor="rename-branch-name">
                 {translate('new_name')}
-                <em className="mandatory">*</em>
+                <MandatoryFieldMarker />
               </label>
               <input
                 autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap
index af1f6b1baf442c894387253977e6d58928399cf1..d86464ad0746350d9a1dbf617c8cb0e9b2d14387 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/RenameBranchModal-test.tsx.snap
@@ -19,6 +19,9 @@ exports[`renders 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -26,11 +29,7 @@ exports[`renders 1`] = `
           htmlFor="rename-branch-name"
         >
           new_name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -82,6 +81,9 @@ exports[`renders 2`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -89,11 +91,7 @@ exports[`renders 2`] = `
           htmlFor="rename-branch-name"
         >
           new_name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -145,6 +143,9 @@ exports[`renders 3`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -152,11 +153,7 @@ exports[`renders 3`] = `
           htmlFor="rename-branch-name"
         >
           new_name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx
index 1177f119bfd1e9f90c90ac8e258bbf24aa9431e8..b27d7eb96a25a8bdc50000ad46b09493172bccee 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx
+++ b/server/sonar-web/src/main/js/apps/projectKey/UpdateForm.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { Button, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import ConfirmButton from 'sonar-ui-common/components/controls/ConfirmButton';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import ProjectKeyInput from '../../components/common/ProjectKeyInput';
 import { validateProjectKey } from '../../helpers/projects';
@@ -65,6 +66,8 @@ export default function UpdateForm(props: UpdateFormProps) {
       onConfirm={props.onKeyChange}>
       {({ onFormSubmit }) => (
         <form onSubmit={onFormSubmit}>
+          <MandatoryFieldsExplanation className="spacer-bottom" />
+
           <ProjectKeyInput
             error={error}
             label={translate('update_key.new_key')}

diff --git a/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap
index ed6ab1774aa6bb59307e55e6213b163c2c1972ba..20f72690d423a0cb86c39b975a728f759cdfd620 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectKey/__tests__/__snapshots__/UpdateForm-test.tsx.snap
@@ -36,6 +36,9 @@ exports[`should render: form 1`] = `
   <form
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <ProjectKeyInput
       label="update_key.new_key"
       onProjectKeyChange={[Function]}

diff --git a/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx b/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx
index 9ed9bbec733b753b89c76cbf82cbe7a7809010a5..39f1a38fa572facefd07443092c6638893636211 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectLinks/CreationModal.tsx
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 interface Props {
@@ -64,10 +66,12 @@ export default class CreationModal extends React.PureComponent<Props, State> {
             </header>
 
             <div className="modal-body">
+              <MandatoryFieldsExplanation className="modal-field" />
+
               <div className="modal-field">
                 <label htmlFor="create-link-name">
                   {translate('project_links.name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={true}
@@ -84,7 +88,7 @@ export default class CreationModal extends React.PureComponent<Props, State> {
               <div className="modal-field">
                 <label htmlFor="create-link-url">
                   {translate('project_links.url')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   id="create-link-url"

diff --git a/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap
index a5a8cac07a2fd6cf0b9b7503674d71515316b114..3eefed9e759ee12643c2f960e149b69fd0b9624a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectLinks/__tests__/__snapshots__/CreationModal-test.tsx.snap
@@ -19,6 +19,9 @@ exports[`should create link 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -26,11 +29,7 @@ exports[`should create link 1`] = `
           htmlFor="create-link-name"
         >
           project_links.name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -50,11 +49,7 @@ exports[`should create link 1`] = `
           htmlFor="create-link-url"
         >
           project_links.url
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           id="create-link-url"

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx
index 67c7befa262eb2ad5f76b8553f463a63a96a1ff5..3db935d400ca569a0915cdcc3e4abcccadf0197a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/BulkApplyTemplateModal.tsx
@@ -22,6 +22,8 @@ import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/contro
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import Select from 'sonar-ui-common/components/controls/Select';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { toNotSoISOString } from 'sonar-ui-common/helpers/dates';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { bulkApplyTemplate, getPermissionTemplates } from '../../api/permissions';
@@ -133,7 +135,7 @@ export default class BulkApplyTemplateModal extends React.PureComponent<Props, S
     <div className="modal-field">
       <label>
         {translate('template')}
-        <em className="mandatory">*</em>
+        <MandatoryFieldMarker />
       </label>
       <Select
         clearable={false}
@@ -162,8 +164,13 @@ export default class BulkApplyTemplateModal extends React.PureComponent<Props, S
 
           {loading && <i className="spinner" />}
 
-          {!loading && !done && permissionTemplates && this.renderWarning()}
-          {!loading && !done && permissionTemplates && this.renderSelect()}
+          {!loading && !done && permissionTemplates && (
+            <>
+              <MandatoryFieldsExplanation className="spacer-bottom" />
+              {this.renderWarning()}
+              {this.renderSelect()}
+            </>
+          )}
         </div>
 
         <footer className="modal-foot">

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx
index b5382597a685183ef61b6d8e0290ebab5bfa9627..8b8437c8dcec67039c52ffd4a1bbbfc247d50c58 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/CreateProjectForm.tsx
@@ -23,6 +23,8 @@ import { Link } from 'react-router';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createProject } from '../../api/components';
 import VisibilitySelector from '../../components/common/VisibilitySelector';
@@ -153,10 +155,11 @@ export default class CreateProjectForm extends React.PureComponent<Props, State>
             </header>
 
             <div className="modal-body">
+              <MandatoryFieldsExplanation className="modal-field" />
               <div className="modal-field">
                 <label htmlFor="create-project-name">
                   {translate('name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={true}
@@ -172,7 +175,7 @@ export default class CreateProjectForm extends React.PureComponent<Props, State>
               <div className="modal-field">
                 <label htmlFor="create-project-key">
                   {translate('key')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   id="create-project-key"

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap
index f8d509985e5ef73ccdfa7e4f2b9dfcbbc3ed2ad5..a7320df017c52daf2e97fda3e139e29a95e75791 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/BulkApplyTemplateModal-test.tsx.snap
@@ -48,6 +48,9 @@ exports[`bulk applies template to all results 2`] = `
   <div
     className="modal-body"
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <Alert
       variant="warning"
     >
@@ -58,11 +61,7 @@ exports[`bulk applies template to all results 2`] = `
     >
       <label>
         template
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <Select
         clearable={false}
@@ -118,6 +117,9 @@ exports[`bulk applies template to all results 3`] = `
   <div
     className="modal-body"
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <Alert
       variant="warning"
     >
@@ -128,11 +130,7 @@ exports[`bulk applies template to all results 3`] = `
     >
       <label>
         template
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <Select
         clearable={false}
@@ -257,6 +255,9 @@ exports[`bulk applies template to selected results 2`] = `
   <div
     className="modal-body"
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <Alert
       variant="warning"
     >
@@ -267,11 +268,7 @@ exports[`bulk applies template to selected results 2`] = `
     >
       <label>
         template
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <Select
         clearable={false}
@@ -327,6 +324,9 @@ exports[`bulk applies template to selected results 3`] = `
   <div
     className="modal-body"
   >
+    <MandatoryFieldsExplanation
+      className="spacer-bottom"
+    />
     <Alert
       variant="warning"
     >
@@ -337,11 +337,7 @@ exports[`bulk applies template to selected results 3`] = `
     >
       <label>
         template
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <Select
         clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap
index a5346ffd55e7053f8e9253124a8ed4af98dac4c7..d7c8b42fb8f2c68bdeed68d6053c01ae9e735923 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/CreateProjectForm-test.tsx.snap
@@ -19,6 +19,9 @@ exports[`creates project 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -26,11 +29,7 @@ exports[`creates project 1`] = `
           htmlFor="create-project-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -50,11 +49,7 @@ exports[`creates project 1`] = `
           htmlFor="create-project-key"
         >
           key
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           id="create-project-key"
@@ -119,6 +114,9 @@ exports[`creates project 2`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -126,11 +124,7 @@ exports[`creates project 2`] = `
           htmlFor="create-project-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -150,11 +144,7 @@ exports[`creates project 2`] = `
           htmlFor="create-project-key"
         >
           key
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           id="create-project-key"
@@ -219,6 +209,9 @@ exports[`creates project 3`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -226,11 +219,7 @@ exports[`creates project 3`] = `
           htmlFor="create-project-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -250,11 +239,7 @@ exports[`creates project 3`] = `
           htmlFor="create-project-key"
         >
           key
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           id="create-project-key"

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx
index d8d950846bc9edd68a9b6965ad664bb2e8e2e686..d40627a6aa8012a8cb7ed3f8024f08291cc30e1b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CopyQualityGateForm.tsx
@@ -19,6 +19,8 @@
  */
 import * as React from 'react';
 import ConfirmModal from 'sonar-ui-common/components/controls/ConfirmModal';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { copyQualityGate } from '../../../api/quality-gates';
 import { Router, withRouter } from '../../../components/hoc/withRouter';
@@ -72,10 +74,11 @@ export class CopyQualityGateForm extends React.PureComponent<Props, State> {
         onClose={this.props.onClose}
         onConfirm={this.handleCopy}
         size="small">
+        <MandatoryFieldsExplanation className="modal-field" />
         <div className="modal-field">
           <label htmlFor="quality-gate-form-name">
             {translate('name')}
-            <em className="mandatory">*</em>
+            <MandatoryFieldMarker />
           </label>
           <input
             autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx
index f4ed7c95b3f44875eced3c49a0e880a56df1473d..d61759f97973c8d4d7f39b5dd0a93532edc9ab9d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CreateQualityGateForm.tsx
@@ -19,6 +19,8 @@
  */
 import * as React from 'react';
 import ConfirmModal from 'sonar-ui-common/components/controls/ConfirmModal';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createQualityGate } from '../../../api/quality-gates';
 import { Router, withRouter } from '../../../components/hoc/withRouter';
@@ -63,10 +65,11 @@ export class CreateQualityGateForm extends React.PureComponent<Props, State> {
         onClose={this.props.onClose}
         onConfirm={this.handleCreate}
         size="small">
+        <MandatoryFieldsExplanation className="modal-field" />
         <div className="modal-field">
           <label htmlFor="quality-gate-form-name">
             {translate('name')}
-            <em className="mandatory">*</em>
+            <MandatoryFieldMarker />
           </label>
           <input
             autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx
index 41f1d8da1efdf900ce4d272aaf23044185f3387a..b719aade82e3a892722b0275244fcf5337248008 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/RenameQualityGateForm.tsx
@@ -19,6 +19,8 @@
  */
 import * as React from 'react';
 import ConfirmModal from 'sonar-ui-common/components/controls/ConfirmModal';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { renameQualityGate } from '../../../api/quality-gates';
 
@@ -66,10 +68,11 @@ export default class RenameQualityGateForm extends React.PureComponent<Props, St
         onClose={this.props.onClose}
         onConfirm={this.handleRename}
         size="small">
+        <MandatoryFieldsExplanation className="modal-field" />
         <div className="modal-field">
           <label htmlFor="quality-gate-form-name">
             {translate('name')}
-            <em className="mandatory">*</em>
+            <MandatoryFieldMarker />
           </label>
           <input
             autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap
index 556ab1bdd5e276fe6676405f594380691cb3edc6..f3607739dd5f426d025967d7ba5ed94298462049 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CopyQualityGateForm-test.tsx.snap
@@ -9,6 +9,9 @@ exports[`should render correctly 1`] = `
   onConfirm={[Function]}
   size="small"
 >
+  <MandatoryFieldsExplanation
+    className="modal-field"
+  />
   <div
     className="modal-field"
   >
@@ -16,11 +19,7 @@ exports[`should render correctly 1`] = `
       htmlFor="quality-gate-form-name"
     >
       name
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <input
       autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap
index 49ae3943d43ce099330fe8ee12e41dd15c6695a5..f81416622fd81ad243c483d5460eda3e8e49f11e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/CreateQualityGateForm-test.tsx.snap
@@ -9,6 +9,9 @@ exports[`should render correctly 1`] = `
   onConfirm={[Function]}
   size="small"
 >
+  <MandatoryFieldsExplanation
+    className="modal-field"
+  />
   <div
     className="modal-field"
   >
@@ -16,11 +19,7 @@ exports[`should render correctly 1`] = `
       htmlFor="quality-gate-form-name"
     >
       name
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <input
       autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap
index 3a7393891bffbe14f7d501ebd189a150f7a107b7..b0220d9f9ed61ed0258ee6115e1b0872f35e2d00 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/RenameQualityGateForm-test.tsx.snap
@@ -9,6 +9,9 @@ exports[`should render correctly 1`] = `
   onConfirm={[Function]}
   size="small"
 >
+  <MandatoryFieldsExplanation
+    className="modal-field"
+  />
   <div
     className="modal-field"
   >
@@ -16,11 +19,7 @@ exports[`should render correctly 1`] = `
       htmlFor="quality-gate-form-name"
     >
       name
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <input
       autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx
index d02e0f9afb98ad305a245d0d9df7d76cbed82a75..b375c9af3f6f25da54229c4c3385d66fdaabf34d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/CopyProfileForm.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { copyProfile } from '../../../api/quality-profiles';
 import { Profile } from '../types';
@@ -86,10 +88,11 @@ export default class CopyProfileForm extends React.PureComponent<Props, State> {
             <h2>{header}</h2>
           </div>
           <div className="modal-body">
+            <MandatoryFieldsExplanation className="modal-field" />
             <div className="modal-field">
               <label htmlFor="copy-profile-name">
                 {translate('quality_profiles.copy_new_name')}
-                <em className="mandatory">*</em>
+                <MandatoryFieldMarker />
               </label>
               <input
                 autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx
index 3eec5f91eb09a2d9f29444551e23dbbabe5f57fb..2317d7edeb179681ef19f17ebba3abacea0c160f 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/ExtendProfileForm.tsx
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { changeProfileParent, createQualityProfile } from '../../../api/quality-profiles';
 import { Profile } from '../types';
@@ -98,10 +100,11 @@ export default class ExtendProfileForm extends React.PureComponent<Props, State>
             <h2>{header}</h2>
           </div>
           <div className="modal-body">
+            <MandatoryFieldsExplanation className="modal-field" />
             <div className="modal-field">
               <label htmlFor="extend-profile-name">
                 {translate('quality_profiles.copy_new_name')}
-                <em className="mandatory">*</em>
+                <MandatoryFieldMarker />
               </label>
               <input
                 autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx
index 2d0d44ad44fcada84e009d85292d39b5a56cd8ac..43ef7a02c94de01fcf185462d5da0793e9e5879d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/RenameProfileForm.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { renameProfile } from '../../../api/quality-profiles';
 import { Profile } from '../types';
@@ -86,10 +88,11 @@ export default class RenameProfileForm extends React.PureComponent<Props, State>
             <h2>{header}</h2>
           </div>
           <div className="modal-body">
+            <MandatoryFieldsExplanation className="modal-field" />
             <div className="modal-field">
               <label htmlFor="rename-profile-name">
                 {translate('quality_profiles.new_name')}
-                <em className="mandatory">*</em>
+                <MandatoryFieldMarker />
               </label>
               <input
                 autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap
index add52e476b9791097f6787c38f763cca5490a8f1..227de4584d05d584808a4a61ec6cd464f72a7c28 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/__tests__/__snapshots__/ExtendProfileForm-test.tsx.snap
@@ -19,6 +19,9 @@ exports[`should render correctly 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -26,11 +29,7 @@ exports[`should render correctly 1`] = `
           htmlFor="extend-profile-name"
         >
           quality_profiles.copy_new_name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx
index d7a22ff9b2a38bf04f97e20f73271b98bc19bc99..849bdeb5f052910a0728b679b71ec3f5dc7d6f33 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeParentForm.tsx
@@ -22,6 +22,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import Select from 'sonar-ui-common/components/controls/Select';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { changeProfileParent } from '../../../api/quality-profiles';
 import { Profile } from '../types';
@@ -100,9 +102,11 @@ export default class ChangeParentForm extends React.PureComponent<Props, State>
             <h2>{translate('quality_profiles.change_parent')}</h2>
           </div>
           <div className="modal-body">
+            <MandatoryFieldsExplanation className="modal-field" />
             <div className="modal-field">
               <label htmlFor="change-profile-parent">
-                {translate('quality_profiles.parent')} <em className="mandatory">*</em>
+                {translate('quality_profiles.parent')}
+                <MandatoryFieldMarker />
               </label>
               <Select
                 clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap
index 81929a3bd56ed144f6caa1ba5a3f14c51abb7ebe..95203d35adb4a2b963580583aab8d7f1224d7f38 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeParentForm-test.tsx.snap
@@ -20,6 +20,9 @@ exports[`should render correctly 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -27,12 +30,7 @@ exports[`should render correctly 1`] = `
           htmlFor="change-profile-parent"
         >
           quality_profiles.parent
-           
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <Select
           clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx
index d4b7f7ceaf7aad8ddcd62aab7e749b42f089aa51..fe139e165eab7402f0871fb57c88a25dc9098024 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx
@@ -22,6 +22,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import Select from 'sonar-ui-common/components/controls/Select';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { parseAsOptionalString } from 'sonar-ui-common/helpers/query';
 import {
@@ -149,10 +151,11 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
             </div>
           ) : (
             <div className="modal-body">
+              <MandatoryFieldsExplanation className="modal-field" />
               <div className="modal-field">
                 <label htmlFor="create-profile-name">
                   {translate('name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <input
                   autoFocus={true}
@@ -169,7 +172,7 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
               <div className="modal-field">
                 <label htmlFor="create-profile-language">
                   {translate('language')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 <Select
                   clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx
index ccbe9171c4d889a94036d76698d359c434b4984f..761394e6a664e6946205f79baa7b2a377f84c9ec 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/RestoreProfileForm.tsx
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { restoreQualityProfile } from '../../../api/quality-profiles';
 
@@ -112,13 +114,16 @@ export default class RestoreProfileForm extends React.PureComponent<Props, State
             {profile != null && ruleSuccesses != null ? (
               this.renderAlert(profile, ruleFailures, ruleSuccesses)
             ) : (
-              <div className="modal-field">
-                <label htmlFor="restore-profile-backup">
-                  {translate('backup')}
-                  <em className="mandatory">*</em>
-                </label>
-                <input id="restore-profile-backup" name="backup" required={true} type="file" />
-              </div>
+              <>
+                <MandatoryFieldsExplanation className="modal-field" />
+                <div className="modal-field">
+                  <label htmlFor="restore-profile-backup">
+                    {translate('backup')}
+                    <MandatoryFieldMarker />
+                  </label>
+                  <input id="restore-profile-backup" name="backup" required={true} type="file" />
+                </div>
+              </>
             )}
           </div>
 

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap
index c05fa79501e7c2deb58084d7d454fd3f9b887259..cab26031cd21bece003ddff5a5deea1148af2269 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/CreateProfileForm-test.tsx.snap
@@ -20,6 +20,9 @@ exports[`should render correctly: default 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -27,11 +30,7 @@ exports[`should render correctly: default 1`] = `
           htmlFor="create-profile-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -52,11 +51,7 @@ exports[`should render correctly: default 1`] = `
           htmlFor="create-profile-language"
         >
           language
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <Select
           clearable={false}
@@ -152,6 +147,9 @@ exports[`should render correctly: with query filter 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -159,11 +157,7 @@ exports[`should render correctly: with query filter 1`] = `
           htmlFor="create-profile-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           autoFocus={true}
@@ -184,11 +178,7 @@ exports[`should render correctly: with query filter 1`] = `
           htmlFor="create-profile-language"
         >
           language
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <Select
           clearable={false}

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap
index 565666717c615f40597d027fc5feb0d1418568b9..725377d8d2a9f1d803dbf8972cbb2e88d8635b40 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/__tests__/__snapshots__/RestoreProfileForm-test.tsx.snap
@@ -20,6 +20,9 @@ exports[`should render correctly 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -27,11 +30,7 @@ exports[`should render correctly 1`] = `
           htmlFor="restore-profile-backup"
         >
           backup
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           id="restore-profile-backup"

diff --git a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx
index ce089bf42dab7ebff1c7783930cb674e6d0ec98b..cfc14b0b3ea8c743908008ff644bd545facd11e3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { parseError } from 'sonar-ui-common/helpers/request';
 import { sendTestEmail } from '../../../api/settings';
@@ -116,10 +118,12 @@ export class EmailForm extends React.PureComponent<Props, State> {
             </div>
           )}
 
+          <MandatoryFieldsExplanation className="form-field" />
+
           <div className="form-field">
             <label htmlFor="test-email-to">
               {translate('email_configuration.test.to_address')}
-              <em className="mandatory">*</em>
+              <MandatoryFieldMarker />
             </label>
             <input
               className="settings-large-input"
@@ -147,7 +151,7 @@ export class EmailForm extends React.PureComponent<Props, State> {
           <div className="form-field">
             <label htmlFor="test-email-message">
               {translate('email_configuration.test.message')}
-              <em className="mandatory">*</em>
+              <MandatoryFieldMarker />
             </label>
             <textarea
               className="settings-large-input"

diff --git a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap
index 96b6595eb05a4e6357ceeae2946632acaa3aa348..a27318bce98b519beebb6205e4fd2d73fbab1bfd 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap
@@ -17,6 +17,9 @@ exports[`should render correctly: default 1`] = `
     className="settings-definition-right"
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -24,11 +27,7 @@ exports[`should render correctly: default 1`] = `
         htmlFor="test-email-to"
       >
         email_configuration.test.to_address
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <input
         className="settings-large-input"
@@ -64,11 +63,7 @@ exports[`should render correctly: default 1`] = `
         htmlFor="test-email-message"
       >
         email_configuration.test.message
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <textarea
         className="settings-large-input"
@@ -115,6 +110,9 @@ exports[`should render correctly: error 1`] = `
         Some error message
       </Alert>
     </div>
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -122,11 +120,7 @@ exports[`should render correctly: error 1`] = `
         htmlFor="test-email-to"
       >
         email_configuration.test.to_address
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <input
         className="settings-large-input"
@@ -162,11 +156,7 @@ exports[`should render correctly: error 1`] = `
         htmlFor="test-email-message"
       >
         email_configuration.test.message
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <textarea
         className="settings-large-input"
@@ -204,6 +194,9 @@ exports[`should render correctly: sending 1`] = `
     className="settings-definition-right"
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -211,11 +204,7 @@ exports[`should render correctly: sending 1`] = `
         htmlFor="test-email-to"
       >
         email_configuration.test.to_address
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <input
         className="settings-large-input"
@@ -251,11 +240,7 @@ exports[`should render correctly: sending 1`] = `
         htmlFor="test-email-message"
       >
         email_configuration.test.message
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <textarea
         className="settings-large-input"
@@ -305,6 +290,9 @@ exports[`should render correctly: success 1`] = `
         email_configuration.test.email_was_sent_to_x.email@example.com
       </Alert>
     </div>
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -312,11 +300,7 @@ exports[`should render correctly: success 1`] = `
         htmlFor="test-email-to"
       >
         email_configuration.test.to_address
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <input
         className="settings-large-input"
@@ -352,11 +336,7 @@ exports[`should render correctly: success 1`] = `
         htmlFor="test-email-message"
       >
         email_configuration.test.message
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <textarea
         className="settings-large-input"

diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx
index 9b4570231456024f5937d746cb84f0a581f7af8f..de5693da0f355d1e334635b2cdd4514afb5ec8a9 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionFormField.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { AlmBindingDefinition } from '../../../../types/alm-settings';
 
@@ -56,7 +57,7 @@ export function AlmBindingDefinitionFormField<B extends AlmBindingDefinition>(
     <div className="modal-field">
       <label className="display-flex-center" htmlFor={id}>
         {translate('settings.almintegration.form', id)}
-        {!optional && <em className="mandatory">*</em>}
+        {!optional && <MandatoryFieldMarker />}
         {help && <HelpTooltip className="spacer-left" overlay={help} placement="right" />}
       </label>
 

diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap
index ccc7252b6919d88924a9adbc789c1019bd795762..e07b3cf23ca8795ee65dee60dfd7bef3ff515911 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmBindingDefinitionFormField-test.tsx.snap
@@ -9,11 +9,7 @@ exports[`should render correctly: default 1`] = `
     htmlFor="key"
   >
     settings.almintegration.form.key
-    <em
-      className="mandatory"
-    >
-      *
-    </em>
+    <MandatoryFieldMarker />
   </label>
   <input
     className="input-super-large"
@@ -60,11 +56,7 @@ exports[`should render correctly: secret 1`] = `
     htmlFor="key"
   >
     settings.almintegration.form.key
-    <em
-      className="mandatory"
-    >
-      *
-    </em>
+    <MandatoryFieldMarker />
   </label>
   <div>
     <p>
@@ -88,11 +80,7 @@ exports[`should render correctly: textarea 1`] = `
     htmlFor="key"
   >
     settings.almintegration.form.key
-    <em
-      className="mandatory"
-    >
-      *
-    </em>
+    <MandatoryFieldMarker />
   </label>
   <textarea
     className="settings-large-input"
@@ -115,11 +103,7 @@ exports[`should render correctly: with help 1`] = `
     htmlFor="key"
   >
     settings.almintegration.form.key
-    <em
-      className="mandatory"
-    >
-      *
-    </em>
+    <MandatoryFieldMarker />
     <HelpTooltip
       className="spacer-left"
       overlay="help"

diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
index c6d297e1564b995b90028d719940534cb183d56f..7e1ce81ba09ce4e1c99520fc33b722cfdf3f328e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/AlmSpecificForm.tsx
@@ -22,6 +22,7 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import { AlmKeys, ProjectAlmBindingResponse } from '../../../../types/alm-settings';
@@ -51,7 +52,7 @@ function renderLabel(props: LabelProps) {
   return (
     <label className="display-flex-center" htmlFor={id}>
       {translate('settings.pr_decoration.binding.form', id)}
-      {!optional && <em className="mandatory">*</em>}
+      {!optional && <MandatoryFieldMarker />}
       {help && (
         <HelpTooltip
           className="spacer-left"

diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
index e76452194c9a16872ce7346fc0c71009722884d2..d2d2c62bf56fc19734af829bf67e7cb9ef04ad52 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/PRDecorationBindingRenderer.tsx
@@ -25,6 +25,8 @@ import Select from 'sonar-ui-common/components/controls/Select';
 import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { AlmSettingsInstance, ProjectAlmBindingResponse } from '../../../../types/alm-settings';
 import AlmSpecificForm from './AlmSpecificForm';
@@ -110,10 +112,12 @@ export default function PRDecorationBindingRenderer(props: PRDecorationBindingRe
           event.preventDefault();
           props.onSubmit();
         }}>
+        <MandatoryFieldsExplanation className="form-field" />
+
         <div className="form-field">
           <label htmlFor="name">
             {translate('settings.pr_decoration.binding.form.name')}
-            <em className="mandatory spacer-right">*</em>
+            <MandatoryFieldMarker className="spacer-right" />
           </label>
           <Select
             autosize={true}

diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap
index 572d371879f836af019bea054c335368b00af10d..73200b8716060418204e1e1c0c78a2c0753273e6 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/AlmSpecificForm-test.tsx.snap
@@ -10,11 +10,7 @@ exports[`it should render correctly for azure and monorepo=false 1`] = `
       htmlFor="azure.project"
     >
       settings.pr_decoration.binding.form.azure.project
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -45,11 +41,7 @@ exports[`it should render correctly for azure and monorepo=false 1`] = `
       htmlFor="azure.repository"
     >
       settings.pr_decoration.binding.form.azure.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -85,11 +77,7 @@ exports[`it should render correctly for azure and monorepo=true 1`] = `
       htmlFor="azure.project"
     >
       settings.pr_decoration.binding.form.azure.project
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -120,11 +108,7 @@ exports[`it should render correctly for azure and monorepo=true 1`] = `
       htmlFor="azure.repository"
     >
       settings.pr_decoration.binding.form.azure.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -202,11 +186,7 @@ exports[`it should render correctly for bitbucket and monorepo=false 1`] = `
       htmlFor="bitbucket.repository"
     >
       settings.pr_decoration.binding.form.bitbucket.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -247,11 +227,7 @@ exports[`it should render correctly for bitbucket and monorepo=false 1`] = `
       htmlFor="bitbucket.slug"
     >
       settings.pr_decoration.binding.form.bitbucket.slug
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -297,11 +273,7 @@ exports[`it should render correctly for bitbucket and monorepo=true 1`] = `
       htmlFor="bitbucket.repository"
     >
       settings.pr_decoration.binding.form.bitbucket.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -342,11 +314,7 @@ exports[`it should render correctly for bitbucket and monorepo=true 1`] = `
       htmlFor="bitbucket.slug"
     >
       settings.pr_decoration.binding.form.bitbucket.slug
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -434,11 +402,7 @@ exports[`it should render correctly for bitbucketcloud and monorepo=false 1`] =
       htmlFor="bitbucketcloud.repository"
     >
       settings.pr_decoration.binding.form.bitbucketcloud.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -483,11 +447,7 @@ exports[`it should render correctly for github and monorepo=false 1`] = `
       htmlFor="github.repository"
     >
       settings.pr_decoration.binding.form.github.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -558,11 +518,7 @@ exports[`it should render correctly for github and monorepo=true 1`] = `
       htmlFor="github.repository"
     >
       settings.pr_decoration.binding.form.github.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -675,11 +631,7 @@ exports[`it should render correctly for gitlab and monorepo=false 1`] = `
       htmlFor="gitlab.repository"
     >
       settings.pr_decoration.binding.form.gitlab.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <input
       className="input-super-large"
@@ -704,11 +656,7 @@ exports[`it should render correctly for gitlab and monorepo=true 1`] = `
       htmlFor="gitlab.repository"
     >
       settings.pr_decoration.binding.form.gitlab.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
     </label>
     <input
       className="input-super-large"
@@ -775,11 +723,7 @@ exports[`should render an alert for azure when the monorepo option is activated
       htmlFor="azure.project"
     >
       settings.pr_decoration.binding.form.azure.project
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={
@@ -810,11 +754,7 @@ exports[`should render an alert for azure when the monorepo option is activated
       htmlFor="azure.repository"
     >
       settings.pr_decoration.binding.form.azure.repository
-      <em
-        className="mandatory"
-      >
-        *
-      </em>
+      <MandatoryFieldMarker />
       <HelpTooltip
         className="spacer-left"
         overlay={

diff --git a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap
index 8ab91f7af9a9802b963dcd48037b890c035b5dfa..35bf2eecea1420e9b9542a97665c3b2a96001f12 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/pullRequestDecorationBinding/__tests__/__snapshots__/PRDecorationBindingRenderer-test.tsx.snap
@@ -19,6 +19,9 @@ exports[`should display action state correctly 1`] = `
   <form
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -26,11 +29,9 @@ exports[`should display action state correctly 1`] = `
         htmlFor="name"
       >
         settings.pr_decoration.binding.form.name
-        <em
-          className="mandatory spacer-right"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker
+          className="spacer-right"
+        />
       </label>
       <Select
         autosize={true}
@@ -91,6 +92,9 @@ exports[`should display action state correctly 2`] = `
   <form
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -98,11 +102,9 @@ exports[`should display action state correctly 2`] = `
         htmlFor="name"
       >
         settings.pr_decoration.binding.form.name
-        <em
-          className="mandatory spacer-right"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker
+          className="spacer-right"
+        />
       </label>
       <Select
         autosize={true}
@@ -171,6 +173,9 @@ exports[`should display action state correctly 3`] = `
   <form
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -178,11 +183,9 @@ exports[`should display action state correctly 3`] = `
         htmlFor="name"
       >
         settings.pr_decoration.binding.form.name
-        <em
-          className="mandatory spacer-right"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker
+          className="spacer-right"
+        />
       </label>
       <Select
         autosize={true}
@@ -270,6 +273,9 @@ exports[`should render multiple instances correctly 1`] = `
   <form
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -277,11 +283,9 @@ exports[`should render multiple instances correctly 1`] = `
         htmlFor="name"
       >
         settings.pr_decoration.binding.form.name
-        <em
-          className="mandatory spacer-right"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker
+          className="spacer-right"
+        />
       </label>
       <Select
         autosize={true}
@@ -356,6 +360,9 @@ exports[`should render multiple instances correctly 2`] = `
   <form
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -363,11 +370,9 @@ exports[`should render multiple instances correctly 2`] = `
         htmlFor="name"
       >
         settings.pr_decoration.binding.form.name
-        <em
-          className="mandatory spacer-right"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker
+          className="spacer-right"
+        />
       </label>
       <Select
         autosize={true}
@@ -483,6 +488,9 @@ exports[`should render single instance correctly 1`] = `
   <form
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -490,11 +498,9 @@ exports[`should render single instance correctly 1`] = `
         htmlFor="name"
       >
         settings.pr_decoration.binding.form.name
-        <em
-          className="mandatory spacer-right"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker
+          className="spacer-right"
+        />
       </label>
       <Select
         autosize={true}

diff --git a/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx b/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx
index 5090a81e154048ff512768609eca037c7595e012..13aa843062e3be50134376ae3e30ebbcc6efe7ec 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/PasswordForm.tsx
@@ -21,6 +21,8 @@ import * as React from 'react';
 import { ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { parseError } from 'sonar-ui-common/helpers/request';
 import { changePassword } from '../../../api/users';
@@ -108,11 +110,14 @@ export default class PasswordForm extends React.PureComponent<Props, State> {
           </header>
           <div className="modal-body">
             {error && <Alert variant="error">{error}</Alert>}
+
+            <MandatoryFieldsExplanation className="modal-field" />
+
             {this.props.isCurrentUser && (
               <div className="modal-field">
                 <label htmlFor="old-user-password">
                   {translate('my_profile.password.old')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 {/* keep this fake field to hack browser autofill */}
                 <input className="hidden" name="old-password-fake" type="password" />
@@ -129,7 +134,7 @@ export default class PasswordForm extends React.PureComponent<Props, State> {
             <div className="modal-field">
               <label htmlFor="user-password">
                 {translate('my_profile.password.new')}
-                <em className="mandatory">*</em>
+                <MandatoryFieldMarker />
               </label>
               {/* keep this fake field to hack browser autofill */}
               <input className="hidden" name="password-fake" type="password" />
@@ -145,7 +150,7 @@ export default class PasswordForm extends React.PureComponent<Props, State> {
             <div className="modal-field">
               <label htmlFor="confirm-user-password">
                 {translate('my_profile.password.confirm')}
-                <em className="mandatory">*</em>
+                <MandatoryFieldMarker />
               </label>
               {/* keep this fake field to hack browser autofill */}
               <input className="hidden" name="confirm-password-fake" type="password" />

diff --git a/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx b/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx
index 36e527409bda4f870595c3c8b7d8b690584e609c..6ab6b9e2c4fec586e8e2c3cd2568abb59575db89 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserForm.tsx
@@ -22,6 +22,8 @@ import * as React from 'react';
 import { Button, ResetButtonLink, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import SimpleModal from 'sonar-ui-common/components/controls/SimpleModal';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { parseError } from 'sonar-ui-common/helpers/request';
 import { createUser, updateUser } from '../../../api/users';
@@ -165,11 +167,13 @@ export default class UserForm extends React.PureComponent<Props, State> {
                 <Alert variant="warning">{translate('users.cannot_update_delegated_user')}</Alert>
               )}
 
+              <MandatoryFieldsExplanation className="modal-field" />
+
               {!user && (
                 <div className="modal-field">
                   <label htmlFor="create-user-login">
                     {translate('login')}
-                    <em className="mandatory">*</em>
+                    <MandatoryFieldMarker />
                   </label>
                   {/* keep this fake field to hack browser autofill */}
                   <input className="hidden" name="login-fake" type="text" />
@@ -190,7 +194,7 @@ export default class UserForm extends React.PureComponent<Props, State> {
               <div className="modal-field">
                 <label htmlFor="create-user-name">
                   {translate('name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
                 {/* keep this fake field to hack browser autofill */}
                 <input className="hidden" name="name-fake" type="text" />
@@ -224,7 +228,7 @@ export default class UserForm extends React.PureComponent<Props, State> {
                 <div className="modal-field">
                   <label htmlFor="create-user-password">
                     {translate('password')}
-                    <em className="mandatory">*</em>
+                    <MandatoryFieldMarker />
                   </label>
                   {/* keep this fake field to hack browser autofill */}
                   <input className="hidden" name="password-fake" type="password" />

diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap
index 339b1f60693a3fdc3da10b9cdb25872b7808e4af..680f7a1d7fdba444065f228ecad1a0abd327847b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/PasswordForm-test.tsx.snap
@@ -21,6 +21,9 @@ exports[`should render correctly 1`] = `
     <div
       className="modal-body"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -28,11 +31,7 @@ exports[`should render correctly 1`] = `
           htmlFor="old-user-password"
         >
           my_profile.password.old
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           className="hidden"
@@ -55,11 +54,7 @@ exports[`should render correctly 1`] = `
           htmlFor="user-password"
         >
           my_profile.password.new
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           className="hidden"
@@ -82,11 +77,7 @@ exports[`should render correctly 1`] = `
           htmlFor="confirm-user-password"
         >
           my_profile.password.confirm
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           className="hidden"

diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap
index 97a534726aa11de35ca55aec278e83de958b33c4..793ddc69999d5342e552736c62be8079405d303c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UserForm-test.tsx.snap
@@ -21,6 +21,9 @@ exports[`should render correctly 1`] = `
     <div
       className="modal-body modal-container"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -28,11 +31,7 @@ exports[`should render correctly 1`] = `
           htmlFor="create-user-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           className="hidden"
@@ -136,6 +135,9 @@ exports[`should render correctly 2`] = `
     <div
       className="modal-body modal-container"
     >
+      <MandatoryFieldsExplanation
+        className="modal-field"
+      />
       <div
         className="modal-field"
       >
@@ -143,11 +145,7 @@ exports[`should render correctly 2`] = `
           htmlFor="create-user-login"
         >
           login
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           className="hidden"
@@ -178,11 +176,7 @@ exports[`should render correctly 2`] = `
           htmlFor="create-user-name"
         >
           name
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           className="hidden"
@@ -229,11 +223,7 @@ exports[`should render correctly 2`] = `
           htmlFor="create-user-password"
         >
           password
-          <em
-            className="mandatory"
-          >
-            *
-          </em>
+          <MandatoryFieldMarker />
         </label>
         <input
           className="hidden"

diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx
index 8403dbdf686298339feb2a8fdfa4a1edf02f2581..8aa607080c8bbd3fa19f780e86cb13b24a0dbe1b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx
+++ b/server/sonar-web/src/main/js/apps/webhooks/components/CreateWebhookForm.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import InputValidationField from 'sonar-ui-common/components/controls/InputValidationField';
 import ValidationModal from 'sonar-ui-common/components/controls/ValidationModal';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { isWebUri } from 'valid-url';
 
@@ -82,6 +84,8 @@ export default class CreateWebhookForm extends React.PureComponent<Props> {
         validate={this.handleValidate}>
         {({ dirty, errors, handleBlur, handleChange, isSubmitting, touched, values }) => (
           <>
+            <MandatoryFieldsExplanation className="big-spacer-bottom" />
+
             <InputValidationField
               autoFocus={true}
               dirty={dirty}
@@ -91,7 +95,7 @@ export default class CreateWebhookForm extends React.PureComponent<Props> {
               label={
                 <label htmlFor="webhook-name">
                   {translate('webhooks.name')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
               }
               name="name"
@@ -110,7 +114,7 @@ export default class CreateWebhookForm extends React.PureComponent<Props> {
               label={
                 <label htmlFor="webhook-url">
                   {translate('webhooks.url')}
-                  <em className="mandatory">*</em>
+                  <MandatoryFieldMarker />
                 </label>
               }
               name="url"

diff --git a/server/sonar-web/src/main/js/components/common/ResetPassword.tsx b/server/sonar-web/src/main/js/components/common/ResetPassword.tsx
index 47efdb10df967a4a2b8b38480ae594fb62cc93f3..ff59d0a1173b3c5848bbb26170edd5518eccae44 100644 (file)
--- a/server/sonar-web/src/main/js/components/common/ResetPassword.tsx
+++ b/server/sonar-web/src/main/js/components/common/ResetPassword.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import { SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
+import MandatoryFieldMarker from 'sonar-ui-common/components/ui/MandatoryFieldMarker';
+import MandatoryFieldsExplanation from 'sonar-ui-common/components/ui/MandatoryFieldsExplanation';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { changePassword } from '../../api/users';
 
@@ -99,10 +101,12 @@ export default class ResetPassword extends React.Component<Props, State> {
               </Alert>
             ))}
 
+          <MandatoryFieldsExplanation className="form-field" />
+
           <div className="form-field">
             <label htmlFor="old_password">
               {translate('my_profile.password.old')}
-              <em className="mandatory">*</em>
+              <MandatoryFieldMarker />
             </label>
             <input
               autoComplete="off"
@@ -116,7 +120,7 @@ export default class ResetPassword extends React.Component<Props, State> {
           <div className="form-field">
             <label htmlFor="password">
               {translate('my_profile.password.new')}
-              <em className="mandatory">*</em>
+              <MandatoryFieldMarker />
             </label>
             <input
               autoComplete="off"
@@ -130,7 +134,7 @@ export default class ResetPassword extends React.Component<Props, State> {
           <div className="form-field">
             <label htmlFor="password_confirmation">
               {translate('my_profile.password.confirm')}
-              <em className="mandatory">*</em>
+              <MandatoryFieldMarker />
             </label>
             <input
               autoComplete="off"

diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap
index e4983b61dc33f3fb9c5d196fbc2e35f50c6c3bc6..f2fbe03c0939c02578bc5a4380f817343a402e3f 100644 (file)
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ResetPassword-test.tsx.snap
@@ -13,6 +13,9 @@ exports[`renders correctly 1`] = `
     className="boxed-group-inner"
     onSubmit={[Function]}
   >
+    <MandatoryFieldsExplanation
+      className="form-field"
+    />
     <div
       className="form-field"
     >
@@ -20,11 +23,7 @@ exports[`renders correctly 1`] = `
         htmlFor="old_password"
       >
         my_profile.password.old
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <input
         autoComplete="off"
@@ -41,11 +40,7 @@ exports[`renders correctly 1`] = `
         htmlFor="password"
       >
         my_profile.password.new
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <input
         autoComplete="off"
@@ -62,11 +57,7 @@ exports[`renders correctly 1`] = `
         htmlFor="password_confirmation"
       >
         my_profile.password.confirm
-        <em
-          className="mandatory"
-        >
-          *
-        </em>
+        <MandatoryFieldMarker />
       </label>
       <input
         autoComplete="off"

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index dec3019c2c780c19dbd6bb860dbf794a116a91e8..fa3795f1dc0cb702434fb98ed250854ee9a13726 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/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