SONAR-11321 Improve project page manual fields validate

3 files changed, 43 insertions, 20 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx b/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
index f95fb297879..a0be10383b3 100644
--- a/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
@@ -18,13 +18,16 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import HelpTooltip from './HelpTooltip';
 import AlertErrorIcon from '../icons-components/AlertErrorIcon';
 import AlertSuccessIcon from '../icons-components/AlertSuccessIcon';
 
 interface Props {
   description?: string;
   children: React.ReactNode;
+  className?: string;
   error: string | undefined;
+  help?: string;
   id: string;
   isInvalid: boolean;
   isValid: boolean;
@@ -35,10 +38,13 @@ interface Props {
 export default function ValidationInput(props: Props) {
   const hasError = props.isInvalid && props.error !== undefined;
   return (
-    <div>
+    <div className={props.className}>
       <label htmlFor={props.id}>
-        <strong>{props.label}</strong>
-        {props.required && <em className="mandatory">*</em>}
+        <span className="text-middle">
+          <strong>{props.label}</strong>
+          {props.required && <em className="mandatory">*</em>}
+        </span>
+        {props.help && <HelpTooltip className="spacer-left" overlay={props.help} />}
       </label>
       <div className="little-spacer-top spacer-bottom">
         {props.children}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx
index 37b3d8e6a41..c5245f0d81b 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/ValidationInput-test.tsx
@@ -27,6 +27,7 @@ it('should render', () => {
       <ValidationInput
         description="My description"
         error={undefined}
+        help="Help message"
         id="field-id"
         isInvalid={false}
         isValid={false}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationInput-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationInput-test.tsx.snap
index f49d27a83be..e417b038bc6 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationInput-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ValidationInput-test.tsx.snap
@@ -5,14 +5,22 @@ exports[`should render 1`] = `
   <label
     htmlFor="field-id"
   >
-    <strong>
-      Field label
-    </strong>
-    <em
-      className="mandatory"
+    <span
+      className="text-middle"
     >
-      *
-    </em>
+      <strong>
+        Field label
+      </strong>
+      <em
+        className="mandatory"
+      >
+        *
+      </em>
+    </span>
+    <HelpTooltip
+      className="spacer-left"
+      overlay="Help message"
+    />
   </label>
   <div
     className="little-spacer-top spacer-bottom"
@@ -32,14 +40,18 @@ exports[`should render when valid 1`] = `
   <label
     htmlFor="field-id"
   >
-    <strong>
-      Field label
-    </strong>
-    <em
-      className="mandatory"
+    <span
+      className="text-middle"
     >
-      *
-    </em>
+      <strong>
+        Field label
+      </strong>
+      <em
+        className="mandatory"
+      >
+        *
+      </em>
+    </span>
   </label>
   <div
     className="little-spacer-top spacer-bottom"
@@ -62,9 +74,13 @@ exports[`should render with error 1`] = `
   <label
     htmlFor="field-id"
   >
-    <strong>
-      Field label
-    </strong>
+    <span
+      className="text-middle"
+    >
+      <strong>
+        Field label
+      </strong>
+    </span>
   </label>
   <div
     className="little-spacer-top spacer-bottom"