FIX: Pipelines edit filter return empty filter (#8055)

* fix: fix pipeline add and edit form flow

* test: update test cases

---------

Co-authored-by: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>
Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/index.tsx

@@ -1,6 +1,6 @@
-import { Button, Divider, Form, Modal } from 'antd';
+import { Button, Divider, Form, FormInstance, Modal } from 'antd';
 import { useAppContext } from 'providers/App/App';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionMode, ActionType, PipelineData } from 'types/api/pipeline/def';
 import { v4 } from 'uuid';
@@ -10,6 +10,7 @@ import { getEditedDataSource, getRecordIndex } from '../utils';
 import { renderPipelineForm } from './utils';
 
 function AddNewPipeline({
+	form,
 	isActionType,
 	setActionType,
 	selectedPipelineData,
@@ -17,22 +18,12 @@ function AddNewPipeline({
 	setCurrPipelineData,
 	currPipelineData,
 }: AddNewPipelineProps): JSX.Element {
-	const [form] = Form.useForm();
 	const { t } = useTranslation('pipeline');
 	const { user } = useAppContext();
 
 	const isEdit = isActionType === 'edit-pipeline';
 	const isAdd = isActionType === 'add-pipeline';
 
-	useEffect(() => {
-		if (isEdit) {
-			form.setFieldsValue(selectedPipelineData);
-		}
-		if (isAdd) {
-			form.resetFields();
-		}
-	}, [form, isEdit, isAdd, selectedPipelineData]);
-
 	const onFinish = (values: PipelineData): void => {
 		const newPipeLineData: PipelineData = {
 			id: v4(),
@@ -135,6 +126,7 @@ function AddNewPipeline({
 }
 
 interface AddNewPipelineProps {
+	form: FormInstance<PipelineData>;
 	isActionType: string;
 	setActionType: (actionType?: ActionType) => void;
 	selectedPipelineData: PipelineData | undefined;

frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx

@@ -1,7 +1,7 @@
 import './styles.scss';
 
 import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Card, Modal, Table, Typography } from 'antd';
+import { Card, Form, Modal, Table, Typography } from 'antd';
 import { ExpandableConfig } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import savePipeline from 'api/pipeline/post';
@@ -95,6 +95,7 @@ function PipelineListsView({
 	pipelineData,
 	refetchPipelineLists,
 }: PipelineListsViewProps): JSX.Element {
+	const [pipelineForm] = Form.useForm<PipelineData>();
 	const { t } = useTranslation(['pipeline', 'common']);
 	const [modal, contextHolder] = Modal.useModal();
 	const { notifications } = useNotifications();
@@ -179,8 +180,9 @@ function PipelineListsView({
 		(record: PipelineData) => (): void => {
 			setActionType(ActionType.EditPipeline);
 			setSelectedPipelineData(record);
+			pipelineForm.setFieldsValue(record);
 		},
-		[setActionType],
+		[setActionType, pipelineForm],
 	);
 
 	const pipelineDeleteHandler = useCallback(
@@ -382,12 +384,13 @@ function PipelineListsView({
 
 	const addNewPipelineHandler = useCallback((): void => {
 		setActionType(ActionType.AddPipeline);
+		pipelineForm.resetFields();
 
 		logEvent('Logs: Pipelines: Clicked Add New Pipeline', {
 			source: 'signoz-ui',
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [setActionType]);
+	}, [setActionType, pipelineForm]);
 
 	const footer = useCallback((): JSX.Element | undefined => {
 		if (isEditingActionMode) {
@@ -495,6 +498,7 @@ function PipelineListsView({
 		<>
 			{contextHolder}
 			<AddNewPipeline
+				form={pipelineForm}
 				isActionType={isActionType}
 				setActionType={setActionType}
 				selectedPipelineData={selectedPipelineData}

frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx

@@ -1,4 +1,6 @@
+import { Form } from 'antd';
 import { render } from 'tests/test-utils';
+import { PipelineData } from 'types/api/pipeline/def';
 
 import { pipelineMockData } from '../mocks/pipeline';
 import AddNewPipeline from '../PipelineListsView/AddNewPipeline';
@@ -36,22 +38,28 @@ beforeAll(() => {
 	matchMedia();
 });
 
+function AddNewPipelineWrapper(): JSX.Element {
+	const setActionType = jest.fn();
+	const selectedPipelineData = pipelineMockData[0];
+	const isActionType = 'add-pipeline';
+	const [pipelineForm] = Form.useForm<PipelineData>();
+
+	return (
+		<AddNewPipeline
+			isActionType={isActionType}
+			setActionType={setActionType}
+			selectedPipelineData={selectedPipelineData}
+			setShowSaveButton={jest.fn()}
+			setCurrPipelineData={jest.fn()}
+			currPipelineData={pipelineMockData}
+			form={pipelineForm}
+		/>
+	);
+}
+
 describe('PipelinePage container test', () => {
 	it('should render AddNewPipeline section', () => {
-		const setActionType = jest.fn();
-		const selectedPipelineData = pipelineMockData[0];
-		const isActionType = 'add-pipeline';
-
-		const { asFragment } = render(
-			<AddNewPipeline
-				isActionType={isActionType}
-				setActionType={setActionType}
-				selectedPipelineData={selectedPipelineData}
-				setShowSaveButton={jest.fn()}
-				setCurrPipelineData={jest.fn()}
-				currPipelineData={pipelineMockData}
-			/>,
-		);
+		const { asFragment } = render(<AddNewPipelineWrapper />);
 		expect(asFragment()).toMatchSnapshot();
 	});
 });

frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
+import { screen } from '@testing-library/react';
 import { findByText, fireEvent, render, waitFor } from 'tests/test-utils';
 
 import { pipelineApiResponseMockData } from '../mocks/pipeline';
@@ -243,4 +244,34 @@ describe('PipelinePage container test', () => {
 		expect(saveBtn).toBeInTheDocument();
 		await fireEvent.click(saveBtn);
 	});
+
+	it('should have populated form fields when edit pipeline is clicked', async () => {
+		render(
+			<PipelineListsView
+				setActionType={jest.fn()}
+				isActionMode="editing-mode"
+				setActionMode={jest.fn()}
+				pipelineData={pipelineApiResponseMockData}
+				isActionType="edit-pipeline"
+				refetchPipelineLists={jest.fn()}
+			/>,
+		);
+
+		// content assertion
+		expect(document.querySelectorAll('[data-icon="edit"]').length).toBe(2);
+
+		// expand action
+		const expandIcon = document.querySelectorAll(
+			'.ant-table-row-expand-icon-cell > span[class*="anticon-right"]',
+		);
+		expect(expandIcon.length).toBe(2);
+		await fireEvent.click(expandIcon[0]);
+
+		const editBtn = document.querySelectorAll('[data-icon="edit"]');
+		// click on edit btn
+		await fireEvent.click(editBtn[0] as HTMLElement);
+
+		// to have length 2
+		expect(screen.queryAllByText('source = nginx').length).toBe(2);
+	});
 });