Feat(ui) : Enhance UI input method for multiple filter conditions when configuring ingestion pipelines (#21392)

* support to enter multiple filter conditions at a time in select input

* added unit test

* added copy paste functionality

* fix copy styles

* update paste functionality

* update the parsing and added test

* minor fix

* fix for pasting duplicate values

* address pr comments

* minor fix

---------

Co-authored-by: Shailesh Parmar <[email protected]>

Author: shrushti2000

openmetadata-ui/src/main/resources/ui/src/assets/svg/copy-left.svg

@@ -12,7 +12,7 @@
  */
 
 import { FieldProps, IdSchema, Registry } from '@rjsf/utils';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { t } from 'i18next';
 import React from 'react';
 import { MOCK_WORKFLOW_ARRAY_FIELD_TEMPLATE } from '../../../../../mocks/Templates.mock';
@@ -146,4 +146,66 @@ describe('Test WorkflowArrayFieldTemplate Component', () => {
 
     expect(placeholderText).toHaveTextContent('');
   });
+
+  it('Should call onChange with correct value when comma seperated values are entered', async () => {
+    render(
+      <WorkflowArrayFieldTemplate
+        {...mockWorkflowArrayFieldTemplateProps}
+        formData={[]}
+      />
+    );
+
+    const select = screen.getByTestId('workflow-array-field-template');
+    const input = within(select).getByRole('combobox');
+
+    // Test basic comma-separated values
+    fireEvent.change(input, { target: { value: 'value1,value2,value3' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(mockWorkflowArrayFieldTemplateProps.onChange).toHaveBeenCalledWith([
+      'value1',
+      'value2',
+      'value3',
+    ]);
+
+    // Test values with spaces
+    fireEvent.change(input, {
+      target: { value: 'value 1, value 2 , value 3 ' },
+    });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(mockWorkflowArrayFieldTemplateProps.onChange).toHaveBeenCalledWith([
+      'value 1',
+      'value 2',
+      'value 3',
+    ]);
+
+    // Test empty values
+    fireEvent.change(input, { target: { value: 'value1,,value3' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(mockWorkflowArrayFieldTemplateProps.onChange).toHaveBeenCalledWith([
+      'value1',
+      '',
+      'value3',
+    ]);
+
+    // Test value with comma
+    fireEvent.change(input, { target: { value: 'value1,"value,e3"' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(mockWorkflowArrayFieldTemplateProps.onChange).toHaveBeenCalledWith([
+      'value1',
+      'value,e3',
+    ]);
+
+    // Test value which has double quotes in the middle
+    fireEvent.change(input, { target: { value: `Test1,"random,\\"abc\\""` } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(mockWorkflowArrayFieldTemplateProps.onChange).toHaveBeenCalledWith([
+      'Test1',
+      'random,"abc"',
+    ]);
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/common/Form/JSONSchema/JSONSchemaTemplate/WorkflowArrayFieldTemplate.test.tsx

@@ -12,10 +12,14 @@
  */
 
 import { FieldProps } from '@rjsf/utils';
-import { Col, Row, Select, Typography } from 'antd';
+import { Button, Col, Row, Select, Tooltip, Typography } from 'antd';
 import { t } from 'i18next';
-import { isArray, isObject, startCase } from 'lodash';
-import React from 'react';
+import { isArray, isEmpty, isObject, startCase } from 'lodash';
+import React, { useCallback } from 'react';
+import { ReactComponent as CopyLeft } from '../../../../../assets/svg/copy-left.svg';
+import { useClipboard } from '../../../../../hooks/useClipBoard';
+import { splitCSV } from '../../../../../utils/CSV/CSV.utils';
+import './workflow-array-field-template.less';
 
 const WorkflowArrayFieldTemplate = (props: FieldProps) => {
   const isFilterPatternField = (id: string) => {
@@ -53,6 +57,57 @@ const WorkflowArrayFieldTemplate = (props: FieldProps) => {
     ? t('message.filter-pattern-placeholder')
     : '';
   const options = generateOptions();
+  const { onCopyToClipBoard, onPasteFromClipBoard, hasCopied } = useClipboard(
+    JSON.stringify(value)
+  );
+
+  const handleCopy = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      await onCopyToClipBoard();
+    },
+    [value, onCopyToClipBoard]
+  );
+
+  const handlePaste = useCallback(async () => {
+    const text = await onPasteFromClipBoard();
+    if (!text) {
+      return;
+    }
+
+    let processedValues: string[] = [];
+
+    // Try to parse as JSON array
+    try {
+      const parsed = JSON.parse(text);
+      if (Array.isArray(parsed)) {
+        processedValues = parsed.map((item) => String(item));
+      }
+    } catch {
+      // Fallback to existing logic if not a JSON array
+      processedValues = splitCSV(text);
+    }
+
+    if (!isEmpty(processedValues)) {
+      // Use Set to ensure unique values
+      const uniqueValues = Array.from(new Set([...value, ...processedValues]));
+      props.onChange(uniqueValues);
+    }
+  }, [onPasteFromClipBoard, props.onChange, value]);
+
+  const handleInputSplit = useCallback(
+    (inputValue: string) => {
+      if (isEmpty(inputValue)) {
+        return;
+      }
+      const processedValues = splitCSV(inputValue);
+
+      // Use Set to ensure unique values
+      const uniqueValues = Array.from(new Set([...value, ...processedValues]));
+      props.onChange(uniqueValues);
+    },
+    [value, props.onChange]
+  );
 
   return (
     <Row>
@@ -63,7 +118,7 @@ const WorkflowArrayFieldTemplate = (props: FieldProps) => {
           <Typography>{startCase(props.name)}</Typography>
         )}
       </Col>
-      <Col span={24}>
+      <Col className="select-container" span={24}>
         <Select
           className="m-t-xss w-full"
           data-testid="workflow-array-field-template"
@@ -77,7 +132,38 @@ const WorkflowArrayFieldTemplate = (props: FieldProps) => {
           onBlur={() => props.onBlur(id, value)}
           onChange={(value) => props.onChange(value)}
           onFocus={handleFocus}
+          onKeyDown={(e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'v' && !options) {
+              e.preventDefault();
+              handlePaste();
+            }
+            if (!options && e.key === 'Enter') {
+              // If there are no options(mode is tags), we need to split the input value by comma
+              e.preventDefault();
+              const inputValue = (e.target as HTMLInputElement).value;
+              if (inputValue) {
+                handleInputSplit(inputValue);
+              }
+            }
+          }}
         />
+
+        <div className="workflow-array-field-divider" />
+        <Tooltip
+          overlayClassName="custom-tooltip"
+          placement="top"
+          title={hasCopied ? 'Copied to clipboard' : 'Copy'}>
+          <Button
+            className="workflow-array-field-copy-button remove-button-default-styling"
+            icon={<CopyLeft height={20} />}
+            size="small"
+            type="text"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCopy(e);
+            }}
+          />
+        </Tooltip>
       </Col>
     </Row>
   );

openmetadata-ui/src/main/resources/ui/src/components/common/Form/JSONSchema/JSONSchemaTemplate/WorkflowArrayFieldTemplate.tsx

@@ -0,0 +1,70 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+@import (reference) url('../../../../../styles/variables.less');
+
+.workflow-array-field {
+  &-container {
+    position: relative;
+  }
+
+  &-divider {
+    position: absolute;
+    right: 36px;
+    top: 0;
+    min-height: 32px;
+    height: 100%;
+    border-left: 1px solid @grey-22;
+    margin-top: @size-xxs;
+  }
+
+  &-copy-button {
+    position: absolute;
+    right: 0;
+    &.ant-btn-icon-only.ant-btn-sm {
+      padding: 10px 0px;
+      text-align: center;
+      &:hover,
+      &:focus,
+      &:active {
+        svg path {
+          stroke: @grey-500;
+        }
+      }
+    }
+  }
+}
+.select-container {
+  position: relative;
+  overflow: hidden;
+  .ant-select-selection-overflow {
+    padding-right: @size-md;
+  }
+}
+.custom-tooltip {
+  .ant-tooltip-inner {
+    padding: 4px 8px;
+    font-size: 12px;
+    min-height: auto;
+    background-color: @grey-900;
+    color: @white;
+    font-weight: 600;
+    margin-top: -8px;
+  }
+
+  &.ant-tooltip {
+    padding: 0;
+  }
+  &.ant-tooltip-placement-top {
+    padding-bottom: 0;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/components/common/Form/JSONSchema/JSONSchemaTemplate/workflow-array-field-template.less

@@ -39,6 +39,16 @@ export const useClipboard = (
     }
   }, [valueState]);
 
+  const handlePaste = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+
+      return text;
+    } catch (error) {
+      return null;
+    }
+  }, []);
+
   // side effects
   useEffect(() => setValueState(value), [value]);
 
@@ -62,6 +72,7 @@ export const useClipboard = (
 
   return {
     onCopyToClipBoard: handleCopy,
+    onPasteFromClipBoard: handlePaste,
     hasCopied,
   };
 };

openmetadata-ui/src/main/resources/ui/src/hooks/useClipBoard.ts

@@ -24,6 +24,7 @@ import {
   getColumnConfig,
   getCSVStringFromColumnsAndDataSource,
   getEntityColumnsAndDataSourceFromCSV,
+  splitCSV,
 } from './CSV.utils';
 
 describe('CSVUtils', () => {
@@ -174,4 +175,79 @@ describe('CSVUtils', () => {
       expect(convertedCSVEntities).toStrictEqual(`dateCp:undefined`);
     });
   });
+
+  describe('splitCSV', () => {
+    it('should split simple CSV string correctly', () => {
+      const input = 'value1,value2,value3';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['value1', 'value2', 'value3']);
+    });
+
+    it('should handle quoted values with commas', () => {
+      const input = 'value1,"value,2",value3';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['value1', 'value,2', 'value3']);
+    });
+
+    it('should handle escaped quotes within quoted values', () => {
+      const input = 'value1,"value "quoted" here",value3';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['value1', 'value "quoted" here', 'value3']);
+    });
+
+    it('should handle empty values', () => {
+      const input = 'value1,,value3';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['value1', '', 'value3']);
+    });
+
+    it('should handle values with spaces', () => {
+      const input = ' value1 , value2 , value3 ';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['value1', 'value2', 'value3']);
+    });
+
+    it('should handle empty string input', () => {
+      const input = '';
+      const result = splitCSV(input);
+
+      expect(result).toEqual([]);
+    });
+
+    it('should handle complex quoted values with multiple commas', () => {
+      const input = '"value,1,2,3","another,value","last,value"';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['value,1,2,3', 'another,value', 'last,value']);
+    });
+
+    it('should convert numbers to strings', () => {
+      const input = '1,2,3,4,5';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['1', '2', '3', '4', '5']);
+
+      // Verify each value is a string
+      result.forEach((value) => {
+        expect(typeof value).toBe('string');
+      });
+    });
+
+    it('should handle mixed number and string values', () => {
+      const input = '1,hello,3,world,5';
+      const result = splitCSV(input);
+
+      expect(result).toEqual(['1', 'hello', '3', 'world', '5']);
+
+      // Verify each value is a string
+      result.forEach((value) => {
+        expect(typeof value).toBe('string');
+      });
+    });
+  });
 });