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

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Unified search] Fixes the comma delimeter copy paste on multifields
(#153772)](https://github.com/elastic/kibana/pull/153772)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Stratoula
Kalafateli","email":"efstratia.kalafateli@elastic.co"},"sourceCommit":{"committedDate":"2023-03-29T08:00:15Z","message":"[Unified
search] Fixes the comma delimeter copy paste on multifields
(#153772)\n\n## Summary\r\n\r\nIt fixes the problem with copying pasting
comma delimeter values on the\r\nunified search
fiters.\r\n\r\n\r\n![uni](https://user-images.githubusercontent.com/17003240/228158378-44c768d3-967f-4131-a01f-2fb5707fd026.gif)","sha":"c48098d8da3e4832b70d84156fafcb8fcf364cb5","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Feature:Unified
search","backport:prev-minor","v8.8.0","v8.7.1"],"number":153772,"url":"https://github.com/elastic/kibana/pull/153772","mergeCommit":{"message":"[Unified
search] Fixes the comma delimeter copy paste on multifields
(#153772)\n\n## Summary\r\n\r\nIt fixes the problem with copying pasting
comma delimeter values on the\r\nunified search
fiters.\r\n\r\n\r\n![uni](https://user-images.githubusercontent.com/17003240/228158378-44c768d3-967f-4131-a01f-2fb5707fd026.gif)","sha":"c48098d8da3e4832b70d84156fafcb8fcf364cb5"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/153772","number":153772,"mergeCommit":{"message":"[Unified
search] Fixes the comma delimeter copy paste on multifields
(#153772)\n\n## Summary\r\n\r\nIt fixes the problem with copying pasting
comma delimeter values on the\r\nunified search
fiters.\r\n\r\n\r\n![uni](https://user-images.githubusercontent.com/17003240/228158378-44c768d3-967f-4131-a01f-2fb5707fd026.gif)","sha":"c48098d8da3e4832b70d84156fafcb8fcf364cb5"}},{"branch":"8.7","label":"v8.7.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>

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

@@ -366,12 +366,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 {