From 69ceacdca6f4f33a966c0063a0510f4adc2a8e63 Mon Sep 17 00:00:00 2001
From: Vadim73i <55870906+Vadim73i@users.noreply.github.com>
Date: Tue, 23 Jan 2024 12:58:42 +0300
Subject: [PATCH] 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
---
 .../fieldTextFlex/fieldTextFlex.jsx           | 15 ++-
 .../fieldTextFlex/fieldTextFlex.scss          | 99 ++++++++++++++-----
 .../fields/dynamicFieldsSection/constants.js  |  1 +
 .../dynamicFieldsSection/dynamicFieldMap.js   |  3 +
 .../dynamicFieldsSection/fields/index.js      |  1 +
 .../fields/multilineTextField.jsx             | 47 +++++++++
 6 files changed, 134 insertions(+), 32 deletions(-)
 create mode 100644 app/src/components/fields/dynamicFieldsSection/fields/multilineTextField.jsx

diff --git a/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.jsx b/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.jsx
index 2a38f69029..1b6477b597 100644
--- 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,6 +40,7 @@ export const FieldTextFlex = ({
   className,
   label,
   helpText,
+  variant,
 }) => {
   const resizeHeight = (e) => {
     e.target.style.height = `${HEIGHT}px`;
@@ -45,10 +48,10 @@ export const FieldTextFlex = ({
   };
   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
index 107254534d..8f282cd5c8 100644
--- 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,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);
+    }
+  }
 }
diff --git a/app/src/components/fields/dynamicFieldsSection/constants.js b/app/src/components/fields/dynamicFieldsSection/constants.js
index d24da3c762..412e51bee9 100644
--- 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
index 02fee5fe2a..4a30211fb8 100644
--- 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,
diff --git a/app/src/components/fields/dynamicFieldsSection/fields/index.js b/app/src/components/fields/dynamicFieldsSection/fields/index.js
index 94c6024f6e..18ca803859 100644
--- a/app/src/components/fields/dynamicFieldsSection/fields/index.js
+++ b/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';
diff --git a/app/src/components/fields/dynamicFieldsSection/fields/multilineTextField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/multilineTextField.jsx
new file mode 100644
index 0000000000..cdb35a2afb
--- /dev/null
+++ b/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,
+};