EPMRPP-87043 || Fix inconsistencies in Post issue modal

reportportal · Oct 23, 2023 · cee757c · cee757c
1 parent 841163a
commit cee757c
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 10 deletions.
diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.jsx b/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.jsx
@@ -30,6 +30,7 @@ export const DynamicField = ({
   withValidation,
   children,
   darkView,
+  modalView,
   ...rest
 }) => {
   const fieldChildren = withValidation ? (
@@ -53,27 +54,27 @@ export const DynamicField = ({
       {...fieldCommonProps}
       fieldWrapperClassName={cx('field-wrapper')}
       containerClassName={cx('form-field-item')}
-      labelClassName={cx('form-group-label', { 'dark-view': darkView })}
+      labelClassName={cx('form-group-label', { 'dark-view': darkView, 'modal-view': modalView })}
     >
       {fieldChildren}
     </FormField>
   );
 };
-
 DynamicField.propTypes = {
   field: dynamicFieldShape,
   customBlock: PropTypes.object,
   customFieldWrapper: PropTypes.func,
   withValidation: PropTypes.bool,
   children: PropTypes.any,
   darkView: PropTypes.bool,
+  modalView: PropTypes.bool,
 };
-
 DynamicField.defaultProps = {
   field: {},
   customBlock: null,
   customFieldWrapper: null,
   withValidation: false,
   children: null,
   darkView: false,
+  modalView: false,
 };
diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss b/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss
@@ -31,6 +31,14 @@
     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;

diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicFieldsSection.jsx b/app/src/components/fields/dynamicFieldsSection/dynamicFieldsSection.jsx
@@ -37,6 +37,7 @@ export class DynamicFieldsSection extends Component {
     defaultOptionValueKey: PropTypes.oneOf([VALUE_ID_KEY, VALUE_NAME_KEY]),
     darkView: PropTypes.bool,
     children: PropTypes.node,
+    modalView: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -47,6 +48,7 @@ export class DynamicFieldsSection extends Component {
     defaultOptionValueKey: VALUE_NAME_KEY,
     darkView: false,
     children: null,
+    modalView: false,
   };
 
   getCustomBlockConfig = (field) => {
@@ -64,6 +66,7 @@ export class DynamicFieldsSection extends Component {
       withValidation,
       defaultOptionValueKey,
       darkView,
+      modalView,
     } = this.props;
 
     return fields.map((field) => {
@@ -77,6 +80,7 @@ export class DynamicFieldsSection extends Component {
           withValidation={withValidation}
           customFieldWrapper={customFieldWrapper}
           defaultOptionValueKey={defaultOptionValueKey}
+          modalView={modalView}
           darkView={darkView}
         />
       );

diff --git a/app/src/components/fields/dynamicFieldsSection/fields/arrayField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/arrayField.jsx
@@ -24,10 +24,12 @@ export class ArrayField extends Component {
     field: PropTypes.object.isRequired,
     defaultOptionValueKey: PropTypes.string.isRequired,
     darkView: PropTypes.bool,
+    modalView: PropTypes.bool,
   };
 
   static defaultProps = {
     darkView: false,
+    modalView: false,
   };
 
   formatOptions = (values = []) =>
@@ -56,14 +58,15 @@ export class ArrayField extends Component {
   parseTags = (options) => (options && options.map(this.parseValueToString)) || undefined;
 
   render() {
-    const { field, darkView, ...rest } = this.props;
+    const { field, darkView, modalView, ...rest } = this.props;
 
     return (
       <DynamicField
         field={field}
         format={this.creatable ? this.formatOptions : this.formatTags}
         parse={this.parseTags}
         darkView={darkView}
+        modalView={modalView}
         {...rest}
       >
         <MultipleAutocomplete

diff --git a/app/src/components/fields/dynamicFieldsSection/fields/dateField/dateField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/dateField/dateField.jsx
@@ -30,25 +30,28 @@ export class DateField extends Component {
   static propTypes = {
     field: PropTypes.object.isRequired,
     darkView: PropTypes.bool,
+    modalView: PropTypes.bool,
   };
 
   static defaultProps = {
     darkView: false,
+    modalView: false,
   };
 
   parseDateValue = (value) => [(value && moment(value).format(DATE_FORMAT)) || ''];
 
   formatDateValue = (value) => value && value[0];
 
   render() {
-    const { field, darkView, ...rest } = this.props;
+    const { field, darkView, modalView, ...rest } = this.props;
     return (
       <div className={cx('date-field')}>
         <DynamicField
           field={field}
           parse={this.parseDateValue}
           format={this.formatDateValue}
           darkView={darkView}
+          modalView={modalView}
           {...rest}
         >
           <DatePicker

diff --git a/app/src/components/fields/dynamicFieldsSection/fields/dropdownField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/dropdownField.jsx
@@ -17,13 +17,19 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown } from 'componentLibrary/dropdown';
+import { InputDropdown } from 'components/inputs/inputDropdown';
 import { DynamicField } from '../dynamicField';
 
 export class DropdownField extends Component {
   static propTypes = {
     field: PropTypes.object.isRequired,
     defaultOptionValueKey: PropTypes.string.isRequired,
     darkView: PropTypes.bool,
+    modalView: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    modalView: false,
   };
 
   getInputOptions = (values = []) =>
@@ -37,16 +43,19 @@ export class DropdownField extends Component {
   formatDropdownValue = (value) => value && value[0];
 
   render() {
-    const { field, darkView, ...rest } = this.props;
+    const { field, darkView, modalView, ...rest } = this.props;
+    const DropdownComponent = modalView ? InputDropdown : Dropdown;
+
     return (
       <DynamicField
         field={field}
         parse={this.parseDropdownValue}
         format={this.formatDropdownValue}
         darkView={darkView}
+        modalView={modalView}
         {...rest}
       >
-        <Dropdown
+        <DropdownComponent
           mobileDisabled
           options={this.getInputOptions(field.definedValues)}
           customClasses={

diff --git a/app/src/components/fields/dynamicFieldsSection/fields/textField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/textField.jsx
@@ -17,33 +17,39 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FieldText } from 'componentLibrary/fieldText';
+import { Input } from 'components/inputs/input';
 import { DynamicField } from '../dynamicField';
 
 export class TextField extends Component {
   static propTypes = {
     field: PropTypes.object.isRequired,
     darkView: PropTypes.bool,
+    modalView: PropTypes.bool,
   };
 
   static defaultProps = {
     darkView: false,
+    modalView: false,
   };
 
   formatInputValue = (value) => value && value[0];
 
   parseInputValue = (value) => (value ? [value] : []);
 
   render() {
-    const { field, darkView, ...rest } = this.props;
+    const { field, darkView, modalView, ...rest } = this.props;
+    const FieldComponent = modalView ? Input : FieldText;
+
     return (
       <DynamicField
         field={field}
         format={this.formatInputValue}
         parse={this.parseInputValue}
         darkView={darkView}
+        modalView={modalView}
         {...rest}
       >
-        <FieldText defaultWidth={false} className={darkView && 'dark-view'} mobileDisabled />
+        <FieldComponent defaultWidth={false} className={darkView && 'dark-view'} mobileDisabled />
       </DynamicField>
     );
   }

diff --git a/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.jsx b/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.jsx
@@ -446,6 +446,7 @@ export class PostIssueModal extends Component {
               fields={fields}
               defaultOptionValueKey={getDefaultOptionValueKey(pluginName)}
               darkView
+              modalView
             />
           ) : (
             <div className={cx('no-default-properties-message')}>

diff --git a/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.scss b/app/src/pages/inside/stepPage/modals/postIssueModal/postIssueModal.scss
@@ -94,7 +94,6 @@
   font-size: 12px;
   color: $COLOR--gray-47;
   font-family: $FONT-REGULAR;
-  text-transform: uppercase;
   &.dark-view {
     color: $COLOR--dirty-gray;
   }