[Unified search] Fixes the comma delimeter copy paste on multifields (#153772)

## Summary

It fixes the problem with copying pasting comma delimeter values on the
unified search fiters.


![uni](https://user-images.githubusercontent.com/17003240/228158378-44c768d3-967f-4131-a01f-2fb5707fd026.gif)

packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx

@@ -373,12 +373,13 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         values={{ searchValue }}
       />
     ),
-    'euiComboBoxOptionsList.delimiterMessage': ({ delimiter }: EuiValues) =>
-      i18n.translate('core.euiComboBoxOptionsList.delimiterMessage', {
-        defaultMessage: 'Add each item separated by {delimiter}',
-        values: { delimiter },
-        description: 'Screen reader text describing adding delimited options',
-      }),
+    'euiComboBoxOptionsList.delimiterMessage': ({ delimiter }: EuiValues) => (
+      <FormattedMessage
+        id="core.euiComboBoxOptionsList.delimiterMessage"
+        defaultMessage="Add each item separated by {delimiter}"
+        values={{ delimiter }}
+      />
+    ),
     'euiComboBoxPill.removeSelection': ({ children }: EuiValues) =>
       i18n.translate('core.euiComboBoxPill.removeSelection', {
         defaultMessage: 'Remove {children} from selection in this group',

src/plugins/unified_search/public/filters_builder/filter_item/filter_item.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import {
   EuiDraggable,
   EuiDroppable,
@@ -111,6 +111,9 @@ export function FilterItem({
       params = getFilterParams(filter);
     }
   }
+  const [multiValueFilterParams, setMultiValueFilterParams] = useState<
+    Array<Filter | boolean | string | number>
+  >([]);
 
   const onHandleField = useCallback(
     (selectedField: DataViewField) => {
@@ -134,6 +137,9 @@ export function FilterItem({
 
   const onHandleParamsChange = useCallback(
     (selectedParams: Filter['meta']['params']) => {
+      if (Array.isArray(selectedParams)) {
+        setMultiValueFilterParams(selectedParams);
+      }
       dispatch({
         type: 'updateFilter',
         payload: { dest: { path, index }, field, operator, params: selectedParams },
@@ -143,19 +149,27 @@ export function FilterItem({
   );
 
   const onHandleParamsUpdate = useCallback(
-    (value: Filter['meta']['params']) => {
-      const paramsValues = Array.isArray(params) ? params : [];
+    (value: Filter | boolean | string | number) => {
+      const paramsValues: Array<Filter | boolean | string | number> = Array.isArray(
+        multiValueFilterParams
+      )
+        ? multiValueFilterParams
+        : [];
+      if (value) {
+        paramsValues.push(value);
+        setMultiValueFilterParams(paramsValues);
+      }
       dispatch({
         type: 'updateFilter',
         payload: {
           dest: { path, index },
           field,
           operator,
-          params: [...paramsValues, value] as Filter['meta']['params'],
+          params: paramsValues as Filter['meta']['params'],
         },
       });
     },
-    [dispatch, path, index, field, operator, params]
+    [dispatch, path, index, field, operator, multiValueFilterParams]
   );
 
   const onRemoveFilter = useCallback(() => {

test/functional/apps/context/_filters.ts

@@ -215,5 +215,17 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         '(NOT clientip: exists OR extension: is one of png, jpeg) AND bytes: 1,000B to 2KB'
       );
     });
+
+    it('should add comma delimiter values', async () => {
+      await filterBar.addFilter({ field: 'extension', operation: 'is one of', value: 'png, jpeg' });
+
+      await PageObjects.context.waitUntilContextLoadingHasFinished();
+      expect(await filterBar.getFilterCount()).to.be(1);
+      expect(await filterBar.hasFilterWithId('0')).to.be(true);
+
+      await filterBar.clickEditFilterById('0');
+
+      expect(await filterBar.getFilterEditorPreview()).to.equal('extension: is one of png, jpeg');
+    });
   });
 }

test/functional/services/filter_bar.ts

@@ -33,7 +33,7 @@ interface BasicFilter {
 
 interface FilterWithMultipleValues extends BasicFilter {
   operation: typeof Operation.IS_ONE_OF | typeof Operation.IS_NOT_ONE_OF;
-  value: string[];
+  value: string[] | string;
 }
 
 interface FilterWithRange extends BasicFilter {