From c08d1bccaf68c5ab3c0002ad0935ff02f90eb794 Mon Sep 17 00:00:00 2001 From: Aditya Singh Date: Fri, 30 May 2025 15:47:26 +0530 Subject: [PATCH] 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 Co-authored-by: Vishal Sharma --- .../AddNewPipeline/index.tsx | 16 +++------ .../PipelineListsView/PipelineListsView.tsx | 10 ++++-- .../tests/AddNewPipeline.test.tsx | 36 +++++++++++-------- .../tests/PipelineListsView.test.tsx | 31 ++++++++++++++++ 4 files changed, 64 insertions(+), 29 deletions(-) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/index.tsx index ba2938251c..a52858645d 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/index.tsx +++ b/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; isActionType: string; setActionType: (actionType?: ActionType) => void; selectedPipelineData: PipelineData | undefined; diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx index 43051f894c..71b353defe 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx +++ b/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(); 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} { matchMedia(); }); +function AddNewPipelineWrapper(): JSX.Element { + const setActionType = jest.fn(); + const selectedPipelineData = pipelineMockData[0]; + const isActionType = 'add-pipeline'; + const [pipelineForm] = Form.useForm(); + + return ( + + ); +} + describe('PipelinePage container test', () => { it('should render AddNewPipeline section', () => { - const setActionType = jest.fn(); - const selectedPipelineData = pipelineMockData[0]; - const isActionType = 'add-pipeline'; - - const { asFragment } = render( - , - ); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx b/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx index e75c5634e5..2145de152f 100644 --- a/frontend/src/container/PipelinePage/tests/PipelineListsView.test.tsx +++ b/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( + , + ); + + // 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); + }); });