Merge pull request #3779 from reportportal/feature/EPMRPP-90023-Cherr…

…y-pick EPMRPP-90023 || Cherry-pick several stories from develop to upcoming hotfix release
reportportal · Mar 27, 2024 · 1ee6c16 · 1ee6c16
2 parents 373d76f + bd86375
commit 1ee6c16
Show file tree

Hide file tree

Showing 16 changed files with 247 additions and 122 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/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.jsx b/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.jsx
@@ -22,6 +22,8 @@ const cx = classNames.bind(styles);
 
 const HEIGHT = 72;
 const BORDER = 2;
+const LIGHT_VARIANT = 'light';
+const DARK_VARIANT = 'dark';
 
 export const FieldTextFlex = ({
   value,
@@ -38,17 +40,18 @@ export const FieldTextFlex = ({
   className,
   label,
   helpText,
+  variant,
 }) => {
   const resizeHeight = (e) => {
     e.target.style.height = `${HEIGHT}px`;
     e.target.style.height = `${e.target.scrollHeight + BORDER}px`;
   };
   return (
     <>
-      {label && <span className={cx('label', { disabled })}>{label}</span>}
+      {label && <span className={cx('label', variant, { disabled })}>{label}</span>}
       <textarea
         ref={refFunction}
-        className={cx('text-area', className, {
+        className={cx('text-area', variant, className, {
           disabled,
           error,
           touched,
@@ -66,9 +69,9 @@ export const FieldTextFlex = ({
         {value}
       </textarea>
       {((error && touched) || helpText) && (
-        <div className={cx('additional-content', { disabled })}>
-          {error && touched && <span className={cx('error-text')}>{error}</span>}
-          {helpText && <span className={cx('help-text')}>{helpText}</span>}
+        <div className={cx('additional-content', variant, { disabled })}>
+          {error && touched && <span className={cx('error-text', variant)}>{error}</span>}
+          {helpText && <span className={cx('help-text', variant)}>{helpText}</span>}
         </div>
       )}
     </>
@@ -90,6 +93,7 @@ FieldTextFlex.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
   helpText: PropTypes.string,
+  variant: PropTypes.oneOf([LIGHT_VARIANT, DARK_VARIANT]),
 };
 
 FieldTextFlex.defaultProps = {
@@ -107,4 +111,5 @@ FieldTextFlex.defaultProps = {
   refFunction: () => {},
   label: '',
   helpText: '',
+  variant: LIGHT_VARIANT,
 };
diff --git a/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss b/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss
@@ -25,7 +25,6 @@
 .text-area {
   width: 100%;
   min-height: 72px;
-  padding: 9px 12px 7px;
   outline: none;
   border: 1px solid $COLOR--e-200;
   border-radius: 3px;
@@ -35,23 +34,6 @@
   line-height: 20px;
   color: $COLOR--almost-black;
   resize: vertical;
-
-  &:hover {
-    border-color: $COLOR--e-300;
-  }
-
-  &:focus:not(.error.touched) {
-    border: 1px solid $COLOR--topaz-hover-2;
-    box-shadow: 0 0 0 1px $COLOR--topaz-hover-2;
-  }
-
-  &.error.touched {
-    border: 1px solid $COLOR--red-failed-2;
-  }
-
-  &::placeholder {
-    color: $COLOR--e-300;
-  }
 }
 
 .label {
@@ -60,20 +42,89 @@
   font-family: $FONT-ROBOTO-MEDIUM;
   font-size: 13px;
   line-height: 20px;
-  color: $COLOR--almost-black;
 }
 
-.additional-content {
-  .error-text {
-    @include additional-text($COLOR--red-failed-2);
+.light {
+  &.text-area {
+    padding: 9px 12px 7px;
+    border: 1px solid $COLOR--e-200;
+    color: $COLOR--almost-black;
+
+    &.disabled {
+      pointer-events: none;
+      background-color: $COLOR--bg-100;
+      color: $COLOR--e-300;
+    }
+
+    &:hover {
+      border-color: $COLOR--e-300;
+    }
+
+    &:focus:not(.error.touched) {
+      border: 1px solid $COLOR--topaz-hover-2;
+      box-shadow: 0 0 0 1px $COLOR--topaz-hover-2;
+    }
+
+    &.error.touched {
+      border: 1px solid $COLOR--red-failed-2;
+    }
+
+    &::placeholder {
+      color: $COLOR--e-300;
+    }
   }
 
-  .help-text {
-    @include additional-text($COLOR--e-300);
+  &.label {
+    color: $COLOR--almost-black;
+  }
+
+  &.additional-content {
+    .error-text {
+      @include additional-text($COLOR--red-failed-2);
+    }
+
+    .help-text {
+      @include additional-text($COLOR--e-300);
+    }
   }
 }
 
-.disabled {
-  opacity: 0.3;
-  pointer-events: none;
+.dark {
+  &.text-area {
+    padding: 7px 12px;
+    border: 1px solid $COLOR--darkmode-gray-200;
+    color: $COLOR--bg-000;
+    background-color: $COLOR--darkmode-bg-solid-96;
+
+    &:hover {
+      border-color: $COLOR--darkmode-gray-150;
+    }
+
+    &:focus:not(.error.touched) {
+      border: 2px solid $COLOR--darkmode-topaz-focused;
+      box-shadow: none;
+    }
+
+    &.error.touched {
+      border: 1px solid $COLOR--red-failed-2;
+    }
+
+    &::placeholder {
+      color: $COLOR--darkmode-gray-200;
+    }
+  }
+
+  &.label {
+    color: $COLOR--darkmode-gray-100;
+  }
+
+  &.additional-content {
+    .error-text {
+      @include additional-text($COLOR--red-failed-2);
+    }
+
+    .help-text {
+      @include additional-text($COLOR--e-300);
+    }
+  }
 }
diff --git a/app/src/componentLibrary/popover/popover.jsx b/app/src/componentLibrary/popover/popover.jsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { useOnClickOutside } from 'common/hooks';
@@ -39,7 +39,7 @@ export const Popover = ({
 
   useOnClickOutside(popoverRef, onClose);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const { current: parent } = parentRef;
     const parentTop = parent.offsetTop;
     const parentLeft = parent.offsetLeft;

diff --git a/app/src/components/fields/dynamicFieldsSection/constants.js b/app/src/components/fields/dynamicFieldsSection/constants.js
@@ -15,6 +15,7 @@
  */
 
 export const TEXT_TYPE = 'text';
+export const MULTILINE_TEXT_TYPE = 'multilineText';
 export const ARRAY_TYPE = 'array';
 export const DROPDOWN_TYPE = 'dropdown';
 export const DATE_TYPE = 'date';

diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js b/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js
@@ -22,6 +22,7 @@ import {
   MultipleAutocompleteField,
   CreatableMultipleAutocompleteField,
   TextField,
+  MultilineTextField,
 } from './fields';
 import {
   ARRAY_TYPE,
@@ -31,10 +32,12 @@ import {
   MULTIPLE_AUTOCOMPLETE_TYPE,
   CREATABLE_MULTIPLE_AUTOCOMPLETE_TYPE,
   TEXT_TYPE,
+  MULTILINE_TEXT_TYPE,
 } from './constants';
 
 export const FIELDS_MAP = {
   [TEXT_TYPE]: TextField,
+  [MULTILINE_TEXT_TYPE]: MultilineTextField,
   [DROPDOWN_TYPE]: DropdownField,
   [DATE_TYPE]: DateField,
   [ARRAY_TYPE]: ArrayField,