EPMRPP-87336 || Add BTS field description

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 EPAM Systems
+ * Copyright 2023 EPAM Systems
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,7 +16,7 @@
 
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
-import { FormField } from 'components/fields/formField';
+import { FieldElement } from 'pages/inside/projectSettingsPageContainer/content/elements';
 import { FieldErrorHint } from 'components/fields/fieldErrorHint';
 import { dynamicFieldShape } from '../dynamicFieldShape';
 import styles from './dynamicField.scss';
@@ -26,7 +26,6 @@ const cx = classNames.bind(styles);
 export const DynamicField = ({
   field,
   customBlock,
-  customFieldWrapper: FieldWrapper,
   withValidation,
   children,
   darkView,
@@ -40,30 +39,30 @@ export const DynamicField = ({
   );
   const fieldCommonProps = {
     name: field.id,
-    label: field.fieldName,
     required: field.required,
     disabled: field.disabled,
-    customBlock,
     ...rest,
   };
 
-  return FieldWrapper ? (
-    <FieldWrapper {...fieldCommonProps}>{fieldChildren}</FieldWrapper>
-  ) : (
-    <FormField
+  return (
+    <FieldElement
+      label={field.fieldName}
+      isRequired={field.required}
+      descriptionSecondary={field.description}
+      className={cx('dynamic-field')}
+      additionalInfo={customBlock}
+      normalize={(value) => value}
+      format={(value) => value}
+      parse={(value) => value}
       {...fieldCommonProps}
-      fieldWrapperClassName={cx('field-wrapper')}
-      containerClassName={cx('form-field-item')}
-      labelClassName={cx('form-group-label', { 'dark-view': darkView, 'modal-view': modalView })}
     >
       {fieldChildren}
-    </FormField>
+    </FieldElement>
   );
 };
 DynamicField.propTypes = {
   field: dynamicFieldShape,
-  customBlock: PropTypes.object,
-  customFieldWrapper: PropTypes.func,
+  customBlock: PropTypes.node,
   withValidation: PropTypes.bool,
   children: PropTypes.any,
   darkView: PropTypes.bool,
@@ -72,7 +71,6 @@ DynamicField.propTypes = {
 DynamicField.defaultProps = {
   field: {},
   customBlock: null,
-  customFieldWrapper: null,
   withValidation: false,
   children: null,
   darkView: false,

app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2019 EPAM Systems
+ * Copyright 2023 EPAM Systems
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,45 +14,9 @@
  * limitations under the License.
  */
 
-.form-group-label {
-  min-width: 182px;
-  padding-right: 30px;
-  font-size: 13px;
-  line-height: 20px;
-  text-indent: 1px;
-  font-family: $FONT-ROBOTO-MEDIUM;
-  color: $COLOR--almost-black;
-  text-align: right;
-  &.dark-view {
-    min-width: 160px;
-    width: 160px;
-    text-align: left;
-    margin-right: 16px;
-    padding-right: 0;
-    color: $COLOR--dirty-gray;
-  }
-
-  &.modal-view {
-    font-size: 13px;
-    font-family: $FONT-REGULAR;
-    text-align: left;
-    line-height: 16px;
-  }
-
-  @media (max-width: $SCREEN_XS_MAX) {
-    width: 100%;
-    margin-bottom: 8px;
-    padding: 0;
-    text-align: left;
-  }
-}
-
-.field-wrapper {
-  width: 280px;
-  padding: 0;
-  margin: 0;
-  @media (max-width: $SCREEN_XS_MAX) {
-    max-width: 100%;
-    margin-bottom: 8px;
-  }
+.dynamic-field {
+  box-sizing: border-box;
+  margin-bottom: 24px;
+  padding-right: 45px;
+  position: relative;
 }

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

@@ -28,7 +28,13 @@ export const dynamicFieldShape = PropTypes.shape({
     }),
   ),
   required: PropTypes.bool,
-  value: PropTypes.array,
+  value: PropTypes.arrayOf(
+    PropTypes.oneOf([
+      PropTypes.string,
+      PropTypes.shape({ id: PropTypes.string, name: PropTypes.string }),
+    ]),
+  ),
   disabled: PropTypes.bool,
+  description: PropTypes.string,
   defaultOptionValueKey: PropTypes.oneOf([VALUE_ID_KEY, VALUE_NAME_KEY]),
 });

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

@@ -32,7 +32,6 @@ export class DynamicFieldsSection extends Component {
     fields: PropTypes.arrayOf(dynamicFieldShape),
     withValidation: PropTypes.bool,
     customBlockCreator: PropTypes.func,
-    customFieldWrapper: PropTypes.func,
     // default field property to use as value (depends on different sets of fields)
     defaultOptionValueKey: PropTypes.oneOf([VALUE_ID_KEY, VALUE_NAME_KEY]),
     darkView: PropTypes.bool,
@@ -45,15 +44,14 @@ export class DynamicFieldsSection extends Component {
     fields: [],
     withValidation: false,
     customBlockCreator: null,
-    customFieldWrapper: null,
     defaultOptionValueKey: VALUE_NAME_KEY,
     darkView: false,
     children: null,
     modalView: false,
     integrationInfo: {},
   };
 
-  getCustomBlockConfig = (field) => {
+  getCustomBlock = (field) => {
     if (this.props.customBlockCreator) {
       return this.props.customBlockCreator(field);
     }
@@ -64,7 +62,6 @@ export class DynamicFieldsSection extends Component {
   createFields = () => {
     const {
       fields = [],
-      customFieldWrapper,
       withValidation,
       defaultOptionValueKey,
       darkView,
@@ -79,9 +76,8 @@ export class DynamicFieldsSection extends Component {
         <FieldComponent
           key={field.id}
           field={field}
-          customBlock={this.getCustomBlockConfig(field)}
+          customBlock={this.getCustomBlock(field)}
           withValidation={withValidation}
-          customFieldWrapper={customFieldWrapper}
           defaultOptionValueKey={defaultOptionValueKey}
           modalView={modalView}
           darkView={darkView}

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

@@ -17,12 +17,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AsyncAutocomplete } from 'componentLibrary/autocompletes/asyncAutocomplete';
-import { connect } from 'react-redux';
-import { projectInfoSelector } from 'controllers/project';
 import { URLS } from 'common/urls';
 import { DynamicField } from '../dynamicField';
 
-const AutocompleteFieldComponent = ({ field, darkView, modalView, integrationInfo, ...rest }) => {
+export const AutocompleteField = ({ field, darkView, modalView, integrationInfo, ...rest }) => {
   const getUri = () =>
     URLS.projectIntegrationByIdCommand(
       integrationInfo.projectName,
@@ -56,18 +54,15 @@ const AutocompleteFieldComponent = ({ field, darkView, modalView, integrationInf
     </DynamicField>
   );
 };
-AutocompleteFieldComponent.propTypes = {
+AutocompleteField.propTypes = {
   field: PropTypes.object.isRequired,
   defaultOptionValueKey: PropTypes.string.isRequired,
   darkView: PropTypes.bool,
   modalView: PropTypes.bool,
   integrationInfo: PropTypes.object,
 };
-AutocompleteFieldComponent.defaultProps = {
+AutocompleteField.defaultProps = {
   darkView: false,
   modalView: false,
   integrationInfo: {},
 };
-export const AutocompleteField = connect((state) => ({
-  projectName: projectInfoSelector(state).projectName,
-}))(AutocompleteFieldComponent);

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

@@ -18,11 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { AsyncMultipleAutocomplete } from 'componentLibrary/autocompletes/asyncMultipleAutocomplete';
 import { URLS } from 'common/urls';
-import { connect } from 'react-redux';
-import { projectInfoSelector } from 'controllers/project/selectors';
 import { DynamicField } from '../dynamicField';
 
-const MultipleAutocompleteFieldComponent = ({
+export const MultipleAutocompleteField = ({
   field,
   darkView,
   modalView,
@@ -52,19 +50,15 @@ const MultipleAutocompleteFieldComponent = ({
     </DynamicField>
   );
 };
-MultipleAutocompleteFieldComponent.propTypes = {
+MultipleAutocompleteField.propTypes = {
   field: PropTypes.object.isRequired,
   defaultOptionValueKey: PropTypes.string.isRequired,
   darkView: PropTypes.bool,
   modalView: PropTypes.bool,
   integrationInfo: PropTypes.object,
 };
-MultipleAutocompleteFieldComponent.defaultProps = {
+MultipleAutocompleteField.defaultProps = {
   darkView: false,
   modalView: false,
   integrationInfo: {},
 };
-
-export const MultipleAutocompleteField = connect((state) => ({
-  projectName: projectInfoSelector(state).projectName,
-}))(MultipleAutocompleteFieldComponent);

app/src/components/integrations/elements/bts/btsPropertiesForIssueForm/btsPropertiesForIssueForm.jsx

@@ -45,7 +45,6 @@ import {
 } from 'components/fields/dynamicFieldsSection/utils';
 import { PLUGINS_PAGE_EVENTS, SETTINGS_PAGE_EVENTS } from 'components/main/analytics/events';
 import { getDefaultOptionValueKey } from 'pages/inside/stepPage/modals/postIssueModal/utils';
-import { IntegrationFormField } from '../../integrationFormField';
 import { ISSUE_TYPE_FIELD_KEY } from '../constants';
 import styles from './btsPropertiesForIssueForm.scss';
 
@@ -225,18 +224,16 @@ export class BtsPropertiesForIssueForm extends Component {
       .catch(this.catchError);
   };
 
-  getCustomBLockConfig = (field) => {
-    const customBlock = (
-      <InputWithEye
-        onChange={() => this.onChangeFieldCheckbox(field.id, field.fieldName)}
-        value={field.checked}
-        disabled={field.required || this.props.disabled}
-      />
+  getAvailabilityControl = (field) => {
+    return (
+      <div className={cx('checkbox-wrapper')}>
+        <InputWithEye
+          onChange={() => this.onChangeFieldCheckbox(field.id, field.fieldName)}
+          value={field.checked}
+          disabled={field.required || this.props.disabled}
+        />
+      </div>
     );
-    return {
-      node: customBlock,
-      wrapperClassName: cx('checkbox-wrapper'),
-    };
   };
 
   setupInitialFieldsConfig = () => {
@@ -463,8 +460,7 @@ export class BtsPropertiesForIssueForm extends Component {
               <Fragment>
                 <DynamicFieldsSection
                   fields={preparedFields}
-                  customBlockCreator={this.getCustomBLockConfig}
-                  customFieldWrapper={IntegrationFormField}
+                  customBlockCreator={this.getAvailabilityControl}
                   defaultOptionValueKey={this.defaultOptionValueKey}
                   integrationInfo={integrationInfo}
                 >

app/src/components/integrations/elements/bts/btsPropertiesForIssueForm/btsPropertiesForIssueForm.scss

@@ -77,8 +77,9 @@
 
 .checkbox-wrapper {
   position: absolute;
-  top: 38px;
+  top: 40px;
   right: 5px;
+  padding: 0 15px;
 
   @media (max-width: $SCREEN_XS_MAX) {
     display: none;

app/src/components/integrations/elements/bts/utils.js

@@ -25,9 +25,9 @@ export const getDefectFormFields = (fields, checkedFieldsIds, values) =>
     .map((item) => {
       const isAutocomplete =
         item.fieldType === AUTOCOMPLETE_TYPE || item.fieldType === MULTIPLE_AUTOCOMPLETE_TYPE;
+      const valueKey = isAutocomplete ? 'namedValue' : 'value';
       return {
         ...item,
-        value: isAutocomplete ? undefined : values[item.id],
-        namedValue: isAutocomplete ? values[item.id] : undefined,
+        [valueKey]: values[item.id],
       };
     });

app/src/pages/inside/projectSettingsPageContainer/content/elements/fieldElement/fieldElement.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 EPAM Systems
+ * Copyright 2023 EPAM Systems
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26,12 +26,14 @@ export const FieldElement = (props) => {
   const {
     label,
     description,
+    descriptionSecondary,
     children,
     className,
     childrenClassName,
     withoutProvider,
     dataAutomationId,
     isRequired,
+    additionalInfo,
     ...rest
   } = props;
   const getChildren = () =>
@@ -46,20 +48,26 @@ export const FieldElement = (props) => {
           </span>
           {description && <span className={cx('description')}>{description}</span>}
           <div className={cx(childrenClassName)}>{getChildren()}</div>
+          {descriptionSecondary && (
+            <span className={cx('description-alt')}>{descriptionSecondary}</span>
+          )}
         </>
       ) : (
         <>
           {getChildren()}
           {description && <span className={cx('description-alt')}>{description}</span>}
         </>
       )}
+      {additionalInfo}
     </div>
   );
 };
 FieldElement.propTypes = {
   children: PropTypes.node.isRequired,
   label: PropTypes.string,
   description: PropTypes.string,
+  descriptionSecondary: PropTypes.string,
+  additionalInfo: PropTypes.node,
   className: PropTypes.string,
   childrenClassName: PropTypes.string,
   withoutProvider: PropTypes.bool,
@@ -69,6 +77,8 @@ FieldElement.propTypes = {
 FieldElement.defaultProps = {
   label: '',
   description: '',
+  descriptionSecondary: '',
+  additionalInfo: null,
   className: '',
   childrenClassName: '',
   withoutProvider: false,