From 2c2775c766d5c6b38f867c9aa233719fa1b0e2f3 Mon Sep 17 00:00:00 2001 From: Raj Kamal Singh <1133322+rkssisodiya@users.noreply.github.com> Date: Wed, 25 Oct 2023 18:59:10 +0530 Subject: [PATCH] Fix: f/e: log pipelines: changes should be preserved when collapsing edited pipelines (#3770) * chore: pass dirty pipeline to preview action when editing * chore: update snapshot for pipeline lists view * chore: log pipelines list view: refactor dirty pipeline state management * chore: use memoized value for filtered pipelines instead of useEffect based updates * chore: update pipeline reorder logic to work on filtered view too * chore: minor cleanup --------- Co-authored-by: Rajat Dabade --- .../PipelinePage/PipelineListsView/index.tsx | 100 ++++++++++-------- 1 file changed, 53 insertions(+), 47 deletions(-) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx index 62a49b26b1..d602004a68 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx @@ -3,8 +3,8 @@ import { Modal, Table } from 'antd'; import { ExpandableConfig } from 'antd/es/table/interface'; import savePipeline from 'api/pipeline/post'; import { useNotifications } from 'hooks/useNotifications'; -import { cloneDeep } from 'lodash-es'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import cloneDeep from 'lodash-es/cloneDeep'; +import React, { useCallback, useMemo, useState } from 'react'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { useTranslation } from 'react-i18next'; @@ -61,31 +61,52 @@ function PipelineListsView({ const [currPipelineData, setCurrPipelineData] = useState>( cloneDeep(pipelineData?.pipelines), ); - const [ - expandedPipelineData, - setExpandedPipelineData, - ] = useState(); + + const [expandedPipelineId, setExpandedPipelineId] = useState< + string | undefined + >(undefined); + const expandedPipelineData = useCallback( + () => currPipelineData.find((p) => p.id === expandedPipelineId), + [currPipelineData, expandedPipelineId], + ); + const setExpandedPipelineData = useCallback( + (newData: PipelineData): void => { + if (expandedPipelineId) { + const pipelineIdx = currPipelineData.findIndex( + (p) => p.id === expandedPipelineId, + ); + if (pipelineIdx >= 0) { + const newPipelineData = [...currPipelineData]; + newPipelineData[pipelineIdx] = newData; + setCurrPipelineData(newPipelineData); + } + } + }, + [expandedPipelineId, currPipelineData], + ); + const [ selectedProcessorData, setSelectedProcessorData, ] = useState(); + const [ selectedPipelineData, setSelectedPipelineData, ] = useState(); + const [expandedRowKeys, setExpandedRowKeys] = useState>(); const [showSaveButton, setShowSaveButton] = useState(); const isEditingActionMode = isActionMode === ActionMode.Editing; - useEffect(() => { - if (pipelineSearchValue === '') setCurrPipelineData(pipelineData?.pipelines); - if (pipelineSearchValue !== '') { - const filterData = pipelineData?.pipelines.filter((data: PipelineData) => - getDataOnSearch(data as never, pipelineSearchValue), - ); - setCurrPipelineData(filterData); + const visibleCurrPipelines = useMemo((): Array => { + if (pipelineSearchValue === '') { + return currPipelineData; } - }, [pipelineSearchValue, pipelineData?.pipelines]); + return currPipelineData.filter((data) => + getDataOnSearch(data as never, pipelineSearchValue), + ); + }, [currPipelineData, pipelineSearchValue]); const handleAlert = useCallback( ({ title, descrition, buttontext, onCancel, onOk }: AlertMessage) => { @@ -173,11 +194,7 @@ function PipelineListsView({ align: 'center', render: (_value, record): JSX.Element => ( @@ -214,7 +231,6 @@ function PipelineListsView({ pipelineEditAction, pipelineDeleteAction, onSwitchPipelineChange, - expandedPipelineData, ]); const updatePipelineSequence = useCallback( @@ -236,8 +252,14 @@ function PipelineListsView({ (dragIndex: number, hoverIndex: number) => { if (currPipelineData && isEditingActionMode) { const rawData = currPipelineData; - const updatedRow = getUpdatedRow(currPipelineData, dragIndex, hoverIndex); - updatedRow.forEach((item, index) => { + + const updatedRows = getUpdatedRow( + currPipelineData, + visibleCurrPipelines[dragIndex].orderId - 1, + visibleCurrPipelines[hoverIndex].orderId - 1, + ); + + updatedRows.forEach((item, index) => { const obj = item; obj.orderId = index + 1; }); @@ -245,7 +267,7 @@ function PipelineListsView({ title: t('reorder_pipeline'), descrition: t('reorder_pipeline_description'), buttontext: t('reorder'), - onOk: updatePipelineSequence(updatedRow), + onOk: updatePipelineSequence(updatedRows), onCancel: onCancelPipelineSequence(rawData), }); } @@ -253,6 +275,7 @@ function PipelineListsView({ [ currPipelineData, isEditingActionMode, + visibleCurrPipelines, handleAlert, t, updatePipelineSequence, @@ -268,7 +291,7 @@ function PipelineListsView({ setActionType={setActionType} processorEditAction={processorEditAction} setShowSaveButton={setShowSaveButton} - expandedPipelineData={expandedPipelineData} + expandedPipelineData={expandedPipelineData()} setExpandedPipelineData={setExpandedPipelineData} prevPipelineData={prevPipelineData} /> @@ -280,6 +303,7 @@ function PipelineListsView({ expandedPipelineData, setActionType, prevPipelineData, + setExpandedPipelineData, ], ); @@ -290,7 +314,7 @@ function PipelineListsView({ keys.push(record?.id); } setExpandedRowKeys(keys); - setExpandedPipelineData(record); + setExpandedPipelineId(record.id); }, [], ); @@ -324,18 +348,7 @@ function PipelineListsView({ const onSaveConfigurationHandler = useCallback(async () => { const modifiedPipelineData = currPipelineData.map((item: PipelineData) => { - const pipelineData = item; - if ( - expandedPipelineData !== undefined && - item.id === expandedPipelineData?.id - ) { - pipelineData.config = expandedPipelineData?.config; - } - pipelineData.config = item.config; - return pipelineData; - }); - modifiedPipelineData.forEach((item: PipelineData) => { - const pipelineData = item; + const pipelineData = { ...item }; delete pipelineData?.id; return pipelineData; }); @@ -363,14 +376,7 @@ function PipelineListsView({ setCurrPipelineData(modifiedPipelineData); setPrevPipelineData(modifiedPipelineData); } - }, [ - currPipelineData, - expandedPipelineData, - notifications, - refetchPipelineLists, - setActionMode, - t, - ]); + }, [currPipelineData, notifications, refetchPipelineLists, setActionMode, t]); const onCancelConfigurationHandler = useCallback((): void => { setActionMode(ActionMode.Viewing); @@ -424,7 +430,7 @@ function PipelineListsView({ setActionType={setActionType} selectedProcessorData={selectedProcessorData} setShowSaveButton={setShowSaveButton} - expandedPipelineData={expandedPipelineData} + expandedPipelineData={expandedPipelineData()} setExpandedPipelineData={setExpandedPipelineData} /> @@ -439,7 +445,7 @@ function PipelineListsView({ expandedRowRender={expandedRowView} expandable={expandableConfig} components={tableComponents} - dataSource={currPipelineData} + dataSource={visibleCurrPipelines} onRow={onRowHandler} footer={footer} pagination={false}