SONAR-17838 Portfolio creation: invalid characters in the key should prevent form submission (#7329)

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"