EPMRPP-87316 || Implement multiple and single autocomplete fields for…

… BTS issue form (#3644) * 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 * 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 * EPMRPP-87316 || code review fixes - 1 EPMRPP-87317 || code review fixes - 1 * EPMRPP-87316 || code review fixes - 2 EPMRPP-87317 || code review fixes - 2 * EPMRPP-87316 || code review fixes - 3 EPMRPP-87317 || code review fixes - 3
reportportal · Nov 21, 2023 · 6cbdec4 · 6cbdec4
1 parent 6ff8ae8
commit 6cbdec4
Show file tree

Hide file tree

Showing 26 changed files with 441 additions and 34 deletions.
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.jsx b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.jsx
@@ -26,19 +26,20 @@ const isReadyForSearch = (minLength, inputValue) =>
   !minLength || minLength <= inputValue.trim().length;
 
 export const AutocompleteMenu = React.forwardRef(
-  ({ isOpen, placement, style, minLength, inputValue, className, ...props }, ref) => {
+  ({ isOpen, placement, style, minLength, inputValue, className, darkView, ...props }, ref) => {
     return (
       <ul
         ref={ref}
         className={cx(
           'menu',
+          { 'dark-view': darkView },
           { opened: isOpen && isReadyForSearch(minLength, inputValue) },
           className,
         )}
         placement={placement}
         style={style}
       >
-        <AutocompleteOptions inputValue={inputValue} {...props} />
+        <AutocompleteOptions inputValue={inputValue} darkView={darkView} {...props} />
       </ul>
     );
   },
@@ -51,6 +52,7 @@ AutocompleteMenu.propTypes = {
   minLength: PropTypes.number,
   inputValue: PropTypes.string,
   className: PropTypes.string,
+  darkView: PropTypes.bool,
 };
 
 AutocompleteMenu.defaultProps = {
@@ -60,4 +62,5 @@ AutocompleteMenu.defaultProps = {
   minLength: 1,
   inputValue: '',
   className: '',
+  darkView: false,
 };
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.scss b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.scss
@@ -32,4 +32,10 @@
   &.opened {
     display: block;
   }
+
+  &.dark-view {
+    margin-top: 5px;
+    border-radius: 0;
+    background-color: $COLOR--darkmode-gray-400;
+  }
 }
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.jsx b/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.jsx
@@ -30,13 +30,19 @@ export const AutocompleteOption = ({
   isNew,
   disabled,
   variant,
+  darkView,
   ...props
 }) => {
   return isNew ? (
     <>
       <div className={cx('divider')} />
       <li
-        className={cx('new-item', variant, { active: isActive, selected: isSelected, disabled })}
+        className={cx(
+          'new-item',
+          variant,
+          { 'dark-view': darkView },
+          { active: isActive, selected: isSelected, disabled },
+        )}
         {...props}
       >
         <span className={cx('value')}>{children}</span>
@@ -52,7 +58,12 @@ export const AutocompleteOption = ({
     </>
   ) : (
     <li
-      className={cx('item', variant, { active: isActive, selected: isSelected, disabled })}
+      className={cx(
+        'item',
+        variant,
+        { 'dark-view': darkView },
+        { active: isActive, selected: isSelected, disabled },
+      )}
       {...(!disabled ? props : {})}
     >
       <span className={cx('label', 'tag')}>{children}</span>
@@ -67,6 +78,7 @@ AutocompleteOption.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
   variant: PropTypes.string,
+  darkView: PropTypes.bool,
 };
 
 AutocompleteOption.defaultProps = {
@@ -76,4 +88,5 @@ AutocompleteOption.defaultProps = {
   children: null,
   disabled: false,
   variant: '',
+  darkView: false,
 };
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.scss b/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.scss
@@ -81,13 +81,30 @@
     background-color: $COLOR--bg-100;
   }
 
-  &.active:not(:hover) {
+  &.active:not(:hover):not(.dark-view) {
     background-color: $COLOR--bg-100;
     border: 1px solid $COLOR--topaz-focused;
     padding: 3px 11px;
   }
 }
 
+.dark-view {
+  &.item {
+    background-color: transparent;
+    color: $COLOR--darkmode-gray-100;
+    min-height: 30px;
+    font-family: $FONT-REGULAR;
+
+    &:hover {
+      background-color: $COLOR--darkmode-bg-solid-98;
+    }
+
+    &.active {
+      color: $COLOR--darkmode-topaz-text;
+    }
+  }
+}
+
 .divider {
   display: block;
   height: 1px;

diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOptions.jsx b/app/src/componentLibrary/autocompletes/common/autocompleteOptions.jsx
@@ -37,6 +37,7 @@ export class AutocompleteOptions extends Component {
     async: PropTypes.bool,
     autocompleteVariant: PropTypes.string,
     createWithoutConfirmation: PropTypes.bool,
+    darkView: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -50,6 +51,7 @@ export class AutocompleteOptions extends Component {
     async: false,
     autocompleteVariant: '',
     createWithoutConfirmation: false,
+    darkView: false,
   };
 
   filterStaticOptions = () => {
@@ -63,11 +65,11 @@ export class AutocompleteOptions extends Component {
   };
 
   getPrompt = (options) => {
-    const { loading, createWithoutConfirmation } = this.props;
+    const { loading, createWithoutConfirmation, darkView } = this.props;
     if (loading) {
       return (
         <>
-          <AutocompletePrompt>
+          <AutocompletePrompt darkView={darkView}>
             <BubblesPreloader />
           </AutocompletePrompt>
           {!createWithoutConfirmation && this.renderNewItem(options)}
@@ -78,7 +80,7 @@ export class AutocompleteOptions extends Component {
   };
 
   renderItem = (item, index, isNew = false) => {
-    const { getItemProps, renderOption, autocompleteVariant } = this.props;
+    const { getItemProps, renderOption, autocompleteVariant, darkView } = this.props;
     return renderOption ? (
       renderOption(item, index, isNew, getItemProps)
     ) : (
@@ -87,6 +89,7 @@ export class AutocompleteOptions extends Component {
         variant={autocompleteVariant}
         {...getItemProps({ item, index })}
         isNew={isNew}
+        darkView={darkView}
       >
         {this.props.parseValueToString(item)}
       </AutocompleteOption>
@@ -98,7 +101,7 @@ export class AutocompleteOptions extends Component {
   };
 
   renderNewItem = (options) => {
-    const { inputValue, getItemProps, autocompleteVariant } = this.props;
+    const { inputValue, getItemProps, autocompleteVariant, darkView } = this.props;
     const index = options.length;
     const isNew = true;
     return (
@@ -108,6 +111,7 @@ export class AutocompleteOptions extends Component {
           variant={autocompleteVariant}
           {...getItemProps({ item: inputValue, index })}
           isNew={isNew}
+          darkView={darkView}
         >
           {this.props.parseValueToString(inputValue)}
         </AutocompleteOption>

diff --git a/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.jsx b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.jsx
@@ -21,12 +21,16 @@ import styles from './autocompletePrompt.scss';
 
 const cx = classNames.bind(styles);
 
-export const AutocompletePrompt = ({ children }) => <div className={cx('prompt')}>{children}</div>;
+export const AutocompletePrompt = ({ children, darkView }) => (
+  <div className={cx('prompt', { 'dark-view': darkView })}>{children}</div>
+);
 
 AutocompletePrompt.propTypes = {
   children: PropTypes.node,
+  darkView: PropTypes.bool,
 };
 
 AutocompletePrompt.defaultProps = {
   children: null,
+  darkView: false,
 };
diff --git a/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.scss b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.scss
@@ -23,4 +23,8 @@
   border-radius: 3px;
   padding-right: 42px;
   box-sizing: border-box;
+
+  &.dark-view {
+    background-color: transparent;
+  }
 }
diff --git a/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.jsx b/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.jsx
@@ -52,6 +52,7 @@ export const MultipleAutocomplete = ({
   handleUnStoredItemCb,
   dataAutomationId,
   existingItemsMap,
+  darkView,
   ...props
 }) => {
   let updatePosition;
@@ -134,6 +135,7 @@ export const MultipleAutocomplete = ({
                       error,
                       touched,
                       disabled,
+                      'dark-view': darkView,
                     })}
                   >
                     <div
@@ -153,6 +155,7 @@ export const MultipleAutocomplete = ({
                         getAdditionalCreationCondition={getAdditionalCreationCondition}
                         storedItemsMap={storedItemsMap}
                         highlightUnStoredItem={highlightUnStoredItem}
+                        darkView={darkView}
                       />
                       <input
                         {...getInputProps({
@@ -211,7 +214,9 @@ export const MultipleAutocomplete = ({
             >
               {({ placement, ref, style, scheduleUpdate }) => {
                 updatePosition = scheduleUpdate;
-                const filteredOptions = options.filter((option) => value.indexOf(option) < 0);
+                const filteredOptions = options.filter((option) =>
+                  value.every((val) => !isEqual(val, option)),
+                );
 
                 return (
                   <AutocompleteMenu
@@ -224,6 +229,7 @@ export const MultipleAutocomplete = ({
                     parseValueToString={parseValueToString}
                     createWithoutConfirmation={createWithoutConfirmation}
                     options={filteredOptions}
+                    darkView={darkView}
                     {...props}
                   />
                 );
@@ -266,6 +272,7 @@ MultipleAutocomplete.propTypes = {
   existingItemsMap: PropTypes.shape({
     value: PropTypes.bool,
   }),
+  darkView: PropTypes.bool,
 };
 
 MultipleAutocomplete.defaultProps = {
@@ -297,4 +304,5 @@ MultipleAutocomplete.defaultProps = {
   handleUnStoredItemCb: null,
   dataAutomationId: '',
   existingItemsMap: {},
+  darkView: false,
 };
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;
@@ -123,3 +128,11 @@
   line-height: 16px;
   color: $COLOR--red-failed-2;
 }
+
+.dark-view {
+  &.autocomplete {
+    border-radius: 4px;
+    background-color: $COLOR--darkmode-bg-solid-98;
+    border-color: $COLOR--darkmode-gray-200;
+  }
+}
diff --git a/app/src/componentLibrary/autocompletes/multipleAutocomplete/selectedItems/selectedItems.jsx b/app/src/componentLibrary/autocompletes/multipleAutocomplete/selectedItems/selectedItems.jsx
@@ -35,6 +35,7 @@ const SelectedItem = ({
   getAdditionalCreationCondition,
   storedOption,
   highlightUnStoredItem,
+  darkView,
 }) => {
   const [editMode, setEditMode] = useState(false);
   const [value, setValue] = useState('');
@@ -76,6 +77,7 @@ const SelectedItem = ({
         disabled,
         'mobile-disabled': mobileDisabled,
         'highlight-un-stored-item': highlightUnStoredItem && !storedOption,
+        'dark-view': darkView,
       })}
       onClick={!disabled && editable && !storedOption ? changeEditMode : null}
     >
@@ -110,6 +112,7 @@ SelectedItem.propTypes = {
   getAdditionalCreationCondition: PropTypes.func,
   storedOption: PropTypes.bool,
   highlightUnStoredItem: PropTypes.bool,
+  darkView: PropTypes.bool,
 };
 
 SelectedItem.defaultProps = {
@@ -121,6 +124,7 @@ SelectedItem.defaultProps = {
   getAdditionalCreationCondition: () => true,
   storedOption: true,
   highlightUnStoredItem: false,
+  darkView: false,
 };
 
 export const SelectedItems = ({

diff --git a/app/src/componentLibrary/autocompletes/multipleAutocomplete/selectedItems/selectedItems.scss b/app/src/componentLibrary/autocompletes/multipleAutocomplete/selectedItems/selectedItems.scss
@@ -100,3 +100,13 @@
   box-sizing: border-box;
   outline: none;
 }
+
+.dark-view {
+  background-color: $COLOR--darkmode-gray-400;
+  color: $COLOR--darkmode-gray-100;
+  font-family: $FONT-REGULAR;
+
+  .cross-icon {
+    @include fill-svg($COLOR--darkmode-gray-50);
+  }
+}