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

app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.scss

@@ -19,6 +19,7 @@
   top: 100%;
   display: none;
   width: 100%;
+  max-width: 405px;
   border-radius: 3px;
   margin-top: 4px;
   font-family: $FONT-ROBOTO-MEDIUM;
@@ -32,4 +33,8 @@
   &.opened {
     display: block;
   }
+
+  @media (max-width: $SCREEN_XS_MAX) {
+    max-width: 100%;
+  }
 }

app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.jsx

@@ -30,34 +30,43 @@ export const AutocompleteOption = ({
   isNew,
   disabled,
   variant,
+  hideSelected,
   ...props
 }) => {
-  return isNew ? (
-    <>
-      <div className={cx('divider')} />
+  let option;
+  if (isNew) {
+    option = (
+      <>
+        <div className={cx('divider')} />
+        <li
+          className={cx('new-item', variant, { active: isActive, selected: isSelected, disabled })}
+          {...props}
+        >
+          <span className={cx('value')}>{children}</span>
+          <Button
+            {...(!disabled ? props : {})}
+            customClassName={cx({ 'button-active': isActive })}
+            startIcon={PlusIcon}
+            variant={'text'}
+          >
+            {variant === 'key-variant' ? 'New key' : 'New value'}
+          </Button>
+        </li>
+      </>
+    );
+  } else if (isSelected && hideSelected) {
+    option = null;
+  } else {
+    option = (
       <li
-        className={cx('new-item', variant, { active: isActive, selected: isSelected, disabled })}
-        {...props}
+        className={cx('item', variant, { active: isActive, selected: isSelected, disabled })}
+        {...(!disabled ? props : {})}
       >
-        <span className={cx('value')}>{children}</span>
-        <Button
-          {...(!disabled ? props : {})}
-          customClassName={cx({ 'button-active': isActive })}
-          startIcon={PlusIcon}
-          variant={'text'}
-        >
-          {variant === 'key-variant' ? 'New key' : 'New value'}
-        </Button>
+        <span className={cx('label', 'tag')}>{children}</span>
       </li>
-    </>
-  ) : (
-    <li
-      className={cx('item', variant, { active: isActive, selected: isSelected, disabled })}
-      {...(!disabled ? props : {})}
-    >
-      <span className={cx('label', 'tag')}>{children}</span>
-    </li>
-  );
+    );
+  }
+  return option;
 };
 
 AutocompleteOption.propTypes = {
@@ -67,6 +76,7 @@ AutocompleteOption.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
   variant: PropTypes.string,
+  hideSelected: PropTypes.bool,
 };
 
 AutocompleteOption.defaultProps = {
@@ -76,4 +86,5 @@ AutocompleteOption.defaultProps = {
   children: null,
   disabled: false,
   variant: '',
+  hideSelected: false,
 };

app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.jsx

@@ -52,6 +52,7 @@ export const MultipleAutocomplete = ({
   handleUnStoredItemCb,
   dataAutomationId,
   existingItemsMap,
+  hideSelected,
   ...props
 }) => {
   let updatePosition;
@@ -72,6 +73,7 @@ export const MultipleAutocomplete = ({
       index,
       isActive: highlightedIndex === index,
       isSelected: selectedItems.some((selectedItem) => isEqual(selectedItem, item)),
+      hideSelected,
       ...rest,
     });
   const removeItemByBackspace = ({ event, removeItem, inputValue }) => {
@@ -266,6 +268,7 @@ MultipleAutocomplete.propTypes = {
   existingItemsMap: PropTypes.shape({
     value: PropTypes.bool,
   }),
+  hideSelected: PropTypes.bool,
 };
 
 MultipleAutocomplete.defaultProps = {
@@ -297,4 +300,5 @@ MultipleAutocomplete.defaultProps = {
   handleUnStoredItemCb: null,
   dataAutomationId: '',
   existingItemsMap: {},
+  hideSelected: false,
 };

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;

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,
+    creatable: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -78,6 +79,7 @@ export class SingleAutocomplete extends Component {
     icon: null,
     isOptionUnique: null,
     refFunction: () => {},
+    creatable: false,
   };
 
   getOptionProps = (getItemProps, highlightedIndex, selectedItem) => ({ item, index, ...rest }) =>
@@ -119,6 +121,7 @@ export class SingleAutocomplete extends Component {
       options,
       isOptionUnique,
       refFunction,
+      creatable,
       ...props
     } = this.props;
     return (
@@ -167,10 +170,12 @@ export class SingleAutocomplete extends Component {
                             selectItem(newValue);
                           }
 
-                          if (createWithoutConfirmation) {
+                          if (createWithoutConfirmation && (creatable || newValue === '')) {
                             selectItem(newValue);
                           }
-                          onBlur(e);
+
+                          (creatable || newValue === '') && onBlur(e);
+
                           isOptionUnique &&
                             isOptionUnique(newValue ? !options.find((v) => v === newValue) : null);
                           setTouch(true);

app/src/componentLibrary/autocompletes/withAsyncLoading.jsx

@@ -22,13 +22,15 @@ export const WithAsyncLoading = (AutocompleteComponent) =>
   class WrappedAutocomplete extends Component {
     static propTypes = {
       getURI: PropTypes.func,
+      getRequestParams: PropTypes.func,
       makeOptions: PropTypes.func,
       filterOption: PropTypes.func,
       minLength: PropTypes.number,
     };
 
     static defaultProps = {
       getURI: () => '',
+      getRequestParams: () => {},
       makeOptions: (values) => values,
       filterOption: () => true,
       minLength: 1,
@@ -47,16 +49,21 @@ export const WithAsyncLoading = (AutocompleteComponent) =>
     }
 
     debouncedFetch = debounce((inputValue) => {
-      const { getURI, makeOptions, filterOption } = this.props;
+      const { getURI, getRequestParams, makeOptions, filterOption } = this.props;
+
       if (this.cancelToken) {
         this.cancelToken();
       }
+
       const value = (inputValue || '').trim();
       const uri = getURI(value);
+      const requestParams = getRequestParams(value);
+
       fetch(uri, {
         abort: (cancelToken) => {
           this.cancelToken = cancelToken;
         },
+        ...requestParams,
       })
         .then((response) => {
           this.cancelToken = null;

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 = 'multiAutocomplete';
 
 export const VALUE_NAME_KEY = 'valueName';
 export const VALUE_ID_KEY = 'valueId';

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

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

@@ -38,6 +38,8 @@ export class DynamicFieldsSection extends Component {
     darkView: PropTypes.bool,
     children: PropTypes.node,
     modalView: PropTypes.bool,
+    pluginName: PropTypes.string,
+    integrationId: PropTypes.number,
   };
 
   static defaultProps = {
@@ -49,6 +51,8 @@ export class DynamicFieldsSection extends Component {
     darkView: false,
     children: null,
     modalView: false,
+    pluginName: '',
+    integrationId: undefined,
   };
 
   getCustomBlockConfig = (field) => {
@@ -67,6 +71,8 @@ export class DynamicFieldsSection extends Component {
       defaultOptionValueKey,
       darkView,
       modalView,
+      pluginName,
+      integrationId,
     } = this.props;
 
     return fields.map((field) => {
@@ -82,6 +88,8 @@ export class DynamicFieldsSection extends Component {
           defaultOptionValueKey={defaultOptionValueKey}
           modalView={modalView}
           darkView={darkView}
+          pluginName={pluginName}
+          integrationId={integrationId}
         />
       );
     });

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

@@ -0,0 +1,51 @@
+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,
+  integrationId,
+  projectName,
+  ...rest
+}) => {
+  const getUri = () =>
+    URLS.projectIntegrationByIdCommand(projectName, integrationId, field.commandName);
+
+  const getRequestParams = (term) => ({ method: 'PUT', data: { term } });
+
+  const parseValueToString = (user) => (user ? user.name : '');
+
+  return (
+    <DynamicField field={field} darkView={darkView} modalView={modalView} {...rest}>
+      <AsyncAutocomplete
+        getURI={getUri}
+        getRequestParams={getRequestParams}
+        parseValueToString={parseValueToString}
+        createWithoutConfirmation
+        onBlur={() => {}}
+      />
+    </DynamicField>
+  );
+};
+AutocompleteFieldComponent.propTypes = {
+  field: PropTypes.object.isRequired,
+  defaultOptionValueKey: PropTypes.string.isRequired,
+  darkView: PropTypes.bool,
+  modalView: PropTypes.bool,
+  projectName: PropTypes.number,
+  integrationId: PropTypes.number,
+};
+AutocompleteFieldComponent.defaultProps = {
+  darkView: false,
+  modalView: false,
+  integrationId: undefined,
+};
+export const AutocompleteField = connect((state) => ({
+  projectName: projectInfoSelector(state).projectName,
+}))(AutocompleteFieldComponent);

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