From 45afd2388de53b34f291c3c712455b8409bab55b Mon Sep 17 00:00:00 2001
From: David Cho-Lerat
 <117642976+david-cho-lerat-sonarsource@users.noreply.github.com>
Date: Wed, 11 Jan 2023 13:51:36 +0100
Subject: SONAR-17838 Portfolio creation: invalid characters in the key should
 prevent form submission (#7329)

---
 server/sonar-web/src/main/js/components/controls/Modal.css     |  4 ++++
 .../src/main/js/components/controls/ValidationInput.tsx        | 10 +++++++---
 .../__tests__/__snapshots__/ValidationInput-test.tsx.snap      |  5 +++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/controls/Modal.css b/server/sonar-web/src/main/js/components/controls/Modal.css
index e42b029ac0a..5d322e04089 100644
--- a/server/sonar-web/src/main/js/components/controls/Modal.css
+++ b/server/sonar-web/src/main/js/components/controls/Modal.css
@@ -196,6 +196,10 @@
   margin-top: 2px;
 }
 
+.modal-field input[type='text'].invalid {
+  border-color: var(--red);
+}
+
 .modal-foot {
   padding: var(--pagePadding) calc(4 * var(--gridSize));
   border-top: 1px solid var(--barBorderColor);
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 507470f88ce..a853ef3fbef 100644
--- a/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ValidationInput.tsx
@@ -36,6 +36,7 @@ export interface ValidationInputProps {
   isValid: boolean;
   label?: React.ReactNode;
   required?: boolean;
+  showValidIcon?: boolean;
 }
 
 export enum ValidationInputErrorPlacement {
@@ -56,15 +57,18 @@ export default function ValidationInput(props: ValidationInputProps) {
     isValid,
     label,
     required,
+    showValidIcon = true,
   } = props;
+
   const hasError = isInvalid && error !== undefined;
 
   let childrenWithStatus: React.ReactNode;
+
   if (errorPlacement === ValidationInputErrorPlacement.Right) {
     childrenWithStatus = (
       <>
         {children}
-        {isValid && (
+        {showValidIcon && isValid && (
           <AlertSuccessIcon
             ariaLabel={translate('valid_input')}
             className="spacer-left text-middle"
@@ -78,13 +82,13 @@ export default function ValidationInput(props: ValidationInputProps) {
     childrenWithStatus = (
       <>
         {children}
-        {isValid && (
+        {showValidIcon && isValid && (
           <AlertSuccessIcon
             ariaLabel={translate('valid_input')}
             className="spacer-left text-middle"
           />
         )}
-        <div className="spacer-top">
+        <div className="spacer-top" style={{ display: 'flex' }}>
           {isInvalid && <AlertErrorIcon className="text-middle" />}
           {hasError && <span className="little-spacer-left text-danger text-middle">{error}</span>}
         </div>
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 b6494ce70b2..2233f79b19f 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
@@ -51,6 +51,11 @@ exports[`should render correctly: error under the input 1`] = `
     <div />
     <div
       className="spacer-top"
+      style={
+        {
+          "display": "flex",
+        }
+      }
     >
       <AlertErrorIcon
         className="text-middle"
-- 
cgit v1.2.3