EPMRPP-88348 || Implement multiline text field for plugin integrations (

#3733)

* EPMRPP-88348 || Description is not added to plugin issue when posting it if it contains label

* EPMRPP-88348 || code review fixes - 1

(cherry picked from commit 69ceacd)

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,
 };

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,83 @@
   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;
+
+    &: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);
+    }
+  }
 }

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';

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,

app/src/components/fields/dynamicFieldsSection/fields/index.js

@@ -15,6 +15,7 @@
  */
 
 export { TextField } from './textField';
+export { MultilineTextField } from './multilineTextField';
 export { DateField } from './dateField';
 export { DropdownField } from './dropdownField';
 export { ArrayField } from './arrayField';

app/src/components/fields/dynamicFieldsSection/fields/multilineTextField.jsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FieldTextFlex } from 'componentLibrary/fieldTextFlex';
+import { DynamicField } from '../dynamicField';
+
+export const MultilineTextField = (props) => {
+  const { field, darkView, ...rest } = props;
+
+  const formatInputValue = (value) => value?.[0];
+
+  const parseInputValue = (value) => (value ? [value] : []);
+
+  return (
+    <DynamicField
+      field={field}
+      format={formatInputValue}
+      parse={parseInputValue}
+      darkView={darkView}
+      {...rest}
+    >
+      <FieldTextFlex defaultWidth={false} variant={darkView ? 'dark' : 'light'} mobileDisabled />
+    </DynamicField>
+  );
+};
+MultilineTextField.propTypes = {
+  field: PropTypes.object.isRequired,
+  darkView: PropTypes.bool,
+};
+MultilineTextField.defaultProps = {
+  darkView: false,
+};