EPMRPP-89125 || Analyzer no any tooltip if invalid value (#3738)

* EPMRPP-89125 || Analyzer no any tooltip if invalid value * EPMRPP-89125 || Code Review fix - 1 (cherry picked from commit 4ab3912)
reportportal · Mar 26, 2024 · bd86375 · bd86375
1 parent 12e5209
commit bd86375
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 52 deletions.
diff --git a/app/src/componentLibrary/fieldNumber/fieldNumber.jsx b/app/src/componentLibrary/fieldNumber/fieldNumber.jsx
@@ -38,7 +38,6 @@ export const FieldNumber = ({
   max,
   title,
   error,
-  touched,
 }) => {
   const inputRef = useRef();
   const handleChange = (event) => {
@@ -91,51 +90,57 @@ export const FieldNumber = ({
   };
 
   return (
-    <div className={cx('container', { disabled })}>
-      {label && <span className={cx('label')}>{label}</span>}
-      <div
-        className={cx('input-container', {
-          filled: !!value || value === 0,
-          error,
-          disabled,
-          touched,
-        })}
-        title={title}
-      >
-        <span
-          className={cx('sign', { disabled })}
-          onClick={disabled ? null : handleDecrease}
-          data-automation-id={'minusIcon'}
+    <>
+      <div className={cx('container', { disabled })}>
+        {label && <span className={cx('label')}>{label}</span>}
+        <div
+          className={cx('input-container', {
+            filled: !!value || value === 0,
+            error,
+            disabled,
+          })}
+          title={title}
         >
-          {Parser(MinusIcon)}
-        </span>
-        <span className={cx('input-field', { disabled })} onClick={handleInputFieldClick}>
-          <input
-            ref={inputRef}
-            className={cx('input')}
-            type="number"
-            value={value}
-            placeholder={placeholderValue}
-            disabled={disabled}
-            min={min}
-            max={max}
-            onKeyDown={disabled ? null : handleKeyDown}
-            onChange={disabled ? null : handleChange}
-            onFocus={disabled ? null : onFocus}
-            onBlur={disabled ? null : onBlur}
-            style={{ width: inputWidth }}
-          />
-          {!!postfix && (value === 0 || !!value) && <span>{postfix.slice(0, 1)}</span>}
-        </span>
-        <span
-          className={cx('sign', { disabled })}
-          onClick={disabled ? null : handleIncrease}
-          data-automation-id={'plusIcon'}
-        >
-          {Parser(PlusIcon)}
-        </span>
+          <span
+            className={cx('sign', { disabled })}
+            onClick={disabled ? null : handleDecrease}
+            data-automation-id={'minusIcon'}
+          >
+            {Parser(MinusIcon)}
+          </span>
+          <span className={cx('input-field', { disabled })} onClick={handleInputFieldClick}>
+            <input
+              ref={inputRef}
+              className={cx('input')}
+              type="number"
+              value={value}
+              placeholder={placeholderValue}
+              disabled={disabled}
+              min={min}
+              max={max}
+              onKeyDown={disabled ? null : handleKeyDown}
+              onChange={disabled ? null : handleChange}
+              onFocus={disabled ? null : onFocus}
+              onBlur={disabled ? null : onBlur}
+              style={{ width: inputWidth }}
+            />
+            {!!postfix && (value === 0 || !!value) && <span>{postfix.slice(0, 1)}</span>}
+          </span>
+          <span
+            className={cx('sign', { disabled })}
+            onClick={disabled ? null : handleIncrease}
+            data-automation-id={'plusIcon'}
+          >
+            {Parser(PlusIcon)}
+          </span>
+        </div>
       </div>
-    </div>
+      {error && (
+        <div className={cx('additional-content')}>
+          <span className={cx('error-text')}>{error}</span>
+        </div>
+      )}
+    </>
   );
 };
 FieldNumber.propTypes = {
@@ -151,7 +156,6 @@ FieldNumber.propTypes = {
   max: PropTypes.number,
   title: PropTypes.string,
   error: PropTypes.string,
-  touched: PropTypes.bool,
 };
 FieldNumber.defaultProps = {
   value: '',
@@ -166,5 +170,4 @@ FieldNumber.defaultProps = {
   max: Number.MAX_SAFE_INTEGER,
   title: '',
   error: '',
-  touched: false,
 };
diff --git a/app/src/componentLibrary/fieldNumber/fieldNumber.scss b/app/src/componentLibrary/fieldNumber/fieldNumber.scss
@@ -71,18 +71,18 @@
   background: $COLOR--bg-000;
   user-select: none;
 
-  &:focus-within:not(.error.touched) {
+  &:focus-within:not(.error) {
     padding: 5px 7px;
     border-width: 2px;
     border-color: $COLOR--topaz-focused;
   }
 
-  &:hover:not(.disabled):not(:focus-within):not(.error.touched),
-  &.filled:not(:focus-within) {
+  &:hover:not(.disabled):not(:focus-within):not(.error),
+  &.filled {
     border-color: $COLOR--e-300;
   }
 
-  &.error.touched {
+  &.error {
     border-color: $COLOR--red-failed-2;
   }
 }
@@ -134,3 +134,14 @@
     margin: 0;
   }
 }
+
+.additional-content {
+  margin-top: 4px;
+}
+
+.error-text {
+  font-family: $FONT-ROBOTO-REGULAR;
+  font-size: 11px;
+  line-height: 16px;
+  color: $COLOR--red-failed-2;
+}
diff --git a/...side/projectSettingsPageContainer/content/analyzerContainer/autoAnalysis/autoAnalysis.jsx b/...side/projectSettingsPageContainer/content/analyzerContainer/autoAnalysis/autoAnalysis.jsx
@@ -173,7 +173,7 @@ const AutoAnalysis = ({
           disabled={isFieldDisabled}
           dataAutomationId={MIN_SHOULD_MATCH + FIELD}
         >
-          <FieldErrorHint>
+          <FieldErrorHint provideHint={false}>
             <FieldNumber postfix="%" max={100} />
           </FieldErrorHint>
         </FieldElement>

diff --git a/...side/projectSettingsPageContainer/content/analyzerContainer/similarItems/similarItems.jsx b/...side/projectSettingsPageContainer/content/analyzerContainer/similarItems/similarItems.jsx
@@ -84,7 +84,7 @@ const SimilarItems = ({
           disabled={isFieldDisabled}
           dataAutomationId={SEARCH_LOGS_MIN_SHOULD_MATCH + FIELD}
         >
-          <FieldErrorHint>
+          <FieldErrorHint provideHint={false}>
             <FieldNumber postfix="%" max={100} />
           </FieldErrorHint>
         </FieldElement>