EPMRPP-87316 || Implement functionality to add Assignee and Milestone…

… for GitLab issue by typing its name EPMRPP-87317 || Implement functionality to add Epic and Assignees for GitLab issue by typing its name
reportportal · Nov 9, 2023 · 4c0fff4 · 4c0fff4
1 parent 573fffa
commit 4c0fff4
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 4 deletions.
diff --git a/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.scss b/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.scss
@@ -56,6 +56,10 @@
   @include hover-state($COLOR--e-300);
   @include focus-state($COLOR--topaz-focused);
 
+  &.disabled {
+    background-color: $COLOR--bg-100;
+  }
+
   &.error.touched {
     @include error-state($COLOR--red-failed-2);
   }
@@ -88,6 +92,7 @@
   color: $COLOR--almost-black;
   box-sizing: border-box;
   outline: none;
+  background-color: transparent;
 
   &::placeholder {
     font-family: inherit;

diff --git a/app/src/componentLibrary/autocompletes/singleAutocomplete/singleAutocomplete.jsx b/app/src/componentLibrary/autocompletes/singleAutocomplete/singleAutocomplete.jsx
@@ -51,6 +51,7 @@ export class SingleAutocomplete extends Component {
     icon: PropTypes.string,
     isOptionUnique: PropTypes.func,
     refFunction: PropTypes.func,
+    prohibitCreateOnBlur: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -78,6 +79,7 @@ export class SingleAutocomplete extends Component {
     icon: null,
     isOptionUnique: null,
     refFunction: () => {},
+    prohibitCreateOnBlur: false,
   };
 
   getOptionProps = (getItemProps, highlightedIndex, selectedItem) => ({ item, index, ...rest }) =>
@@ -119,6 +121,7 @@ export class SingleAutocomplete extends Component {
       options,
       isOptionUnique,
       refFunction,
+      prohibitCreateOnBlur,
       ...props
     } = this.props;
     return (
@@ -167,10 +170,17 @@ export class SingleAutocomplete extends Component {
                             selectItem(newValue);
                           }
 
-                          if (createWithoutConfirmation) {
+                          // check me
+                          if (
+                            createWithoutConfirmation &&
+                            (!prohibitCreateOnBlur || newValue === '')
+                          ) {
                             selectItem(newValue);
                           }
-                          onBlur(e);
+
+                          // check me
+                          (!prohibitCreateOnBlur || newValue === '') && onBlur(e);
+
                           isOptionUnique &&
                             isOptionUnique(newValue ? !options.find((v) => v === newValue) : null);
                           setTouch(true);

diff --git a/app/src/components/fields/dynamicFieldsSection/constants.js b/app/src/components/fields/dynamicFieldsSection/constants.js
@@ -18,6 +18,8 @@ export const TEXT_TYPE = 'text';
 export const ARRAY_TYPE = 'array';
 export const DROPDOWN_TYPE = 'dropdown';
 export const DATE_TYPE = 'date';
+export const AUTOCOMPLETE_TYPE = 'autocomplete';
+export const MULTIPLE_AUTOCOMPLETE_TYPE = 'multipleAutocomplete';
 
 export const VALUE_NAME_KEY = 'valueName';
 export const VALUE_ID_KEY = 'valueId';
diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js b/app/src/components/fields/dynamicFieldsSection/dynamicFieldMap.js
@@ -14,12 +14,28 @@
  *  limitations under the License.
  */
 
-import { ArrayField, DateField, DropdownField, TextField } from './fields';
-import { ARRAY_TYPE, DATE_TYPE, DROPDOWN_TYPE, TEXT_TYPE } from './constants';
+import {
+  ArrayField,
+  AutocompleteField,
+  DateField,
+  DropdownField,
+  MultipleAutocompleteField,
+  TextField,
+} from './fields';
+import {
+  ARRAY_TYPE,
+  AUTOCOMPLETE_TYPE,
+  DATE_TYPE,
+  DROPDOWN_TYPE,
+  MULTIPLE_AUTOCOMPLETE_TYPE,
+  TEXT_TYPE,
+} from './constants';
 
 export const FIELDS_MAP = {
   [TEXT_TYPE]: TextField,
   [DROPDOWN_TYPE]: DropdownField,
   [DATE_TYPE]: DateField,
   [ARRAY_TYPE]: ArrayField,
+  [AUTOCOMPLETE_TYPE]: AutocompleteField,
+  [MULTIPLE_AUTOCOMPLETE_TYPE]: MultipleAutocompleteField,
 };
diff --git a/app/src/components/fields/dynamicFieldsSection/fields/autocompleteField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/autocompleteField.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AsyncAutocomplete } from 'componentLibrary/autocompletes/asyncAutocomplete';
+import { DynamicField } from '../dynamicField';
+
+export const AutocompleteField = ({ field, darkView, modalView, ...rest }) => {
+  // todo change to command
+  const getUri = (val) => `${field.url}${val}`;
+
+  return (
+    <DynamicField field={field} darkView={darkView} modalView={modalView} {...rest}>
+      <AsyncAutocomplete
+        getURI={getUri}
+        minLength={3}
+        createWithoutConfirmation
+        prohibitCreateOnBlur
+        onBlur={() => {}}
+      />
+    </DynamicField>
+  );
+};
+AutocompleteField.propTypes = {
+  field: PropTypes.object.isRequired,
+  defaultOptionValueKey: PropTypes.string.isRequired,
+  darkView: PropTypes.bool,
+  modalView: PropTypes.bool,
+};
+AutocompleteField.defaultProps = {
+  darkView: false,
+  modalView: false,
+};
diff --git a/app/src/components/fields/dynamicFieldsSection/fields/index.js b/app/src/components/fields/dynamicFieldsSection/fields/index.js
@@ -18,3 +18,5 @@ export { TextField } from './textField';
 export { DateField } from './dateField';
 export { DropdownField } from './dropdownField';
 export { ArrayField } from './arrayField';
+export { AutocompleteField } from './autocompleteField';
+export { MultipleAutocompleteField } from './multipleAutocompleteField';
diff --git a/app/src/components/fields/dynamicFieldsSection/fields/multipleAutocompleteField.jsx b/app/src/components/fields/dynamicFieldsSection/fields/multipleAutocompleteField.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AsyncMultipleAutocomplete } from 'componentLibrary/autocompletes/asyncMultipleAutocomplete';
+import { DynamicField } from '../dynamicField';
+
+export const MultipleAutocompleteField = ({ field, darkView, modalView, ...rest }) => {
+  // todo change to command
+  const getUri = (val) => `${field.url}${val}`;
+
+  return (
+    <DynamicField field={field} darkView={darkView} modalView={modalView} {...rest}>
+      <AsyncMultipleAutocomplete getURI={getUri} minLength={3} createWithoutConfirmation editable />
+    </DynamicField>
+  );
+};
+MultipleAutocompleteField.propTypes = {
+  field: PropTypes.object.isRequired,
+  defaultOptionValueKey: PropTypes.string.isRequired,
+  darkView: PropTypes.bool,
+  modalView: PropTypes.bool,
+};
+MultipleAutocompleteField.defaultProps = {
+  darkView: false,
+  modalView: false,
+};
diff --git a/app/src/components/fields/dynamicFieldsSection/utils.js b/app/src/components/fields/dynamicFieldsSection/utils.js
@@ -21,6 +21,8 @@ import {
   TEXT_TYPE,
   VALUE_ID_KEY,
   VALUE_NAME_KEY,
+  AUTOCOMPLETE_TYPE,
+  MULTIPLE_AUTOCOMPLETE_TYPE,
 } from './constants';
 import { FIELDS_MAP } from './dynamicFieldMap';
 
@@ -65,6 +67,10 @@ export const getFieldComponent = (field) => {
     fieldType = DATE_TYPE;
   } else if (field.definedValues && field.definedValues.length && field.fieldType !== ARRAY_TYPE) {
     fieldType = DROPDOWN_TYPE;
+  } else if (field.fieldType === AUTOCOMPLETE_TYPE && field.url) {
+    fieldType = AUTOCOMPLETE_TYPE;
+  } else if (field.fieldType === MULTIPLE_AUTOCOMPLETE_TYPE && field.url) {
+    fieldType = MULTIPLE_AUTOCOMPLETE_TYPE;
   } else {
     fieldType = TEXT_TYPE;
   }

diff --git a/...ponents/integrations/elements/bts/btsPropertiesForIssueForm/btsPropertiesForIssueForm.jsx b/...ponents/integrations/elements/bts/btsPropertiesForIssueForm/btsPropertiesForIssueForm.jsx
@@ -302,6 +302,26 @@ export class BtsPropertiesForIssueForm extends Component {
     this.fetchFieldsSet(issueTypeValue).then((fetchedFields) => {
       const { defectFormFields } = this.props.initialData;
       let fields = normalizeFieldsWithOptions(fetchedFields, this.defaultOptionValueKey);
+      // todo remove me
+      console.log('normalizeFieldsWithOptions');
+      console.log(fields);
+      fields.push({
+        fieldName: 'Assignee2',
+        id: 'assignee2',
+        fieldType: 'autocomplete',
+        required: false,
+        url: '../api/v1/project_1698394355/launch/names?filter.cnt.name=',
+      });
+      fields.push({
+        fieldName: 'Epic2',
+        id: 'epic2',
+        fieldType: 'multipleAutocomplete',
+        required: false,
+        url: '../api/v1/project_1698394355/launch/names?filter.cnt.name=',
+      });
+      console.log('fields after additional fields push');
+      console.log(fields);
+
       let checkedFieldsIds = {};
 
       if (defectFormFields && defectFormFields.length) {