From 27dc7752110e853763a69ebdfef843e38ca6bd47 Mon Sep 17 00:00:00 2001 From: Raj Date: Tue, 17 Oct 2023 17:09:12 +0530 Subject: [PATCH 1/6] chore: pass dirty pipeline to preview action when editing --- frontend/src/container/PipelinePage/PipelineListsView/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx index 62a49b26b1..d00160ab9b 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx @@ -65,6 +65,7 @@ function PipelineListsView({ expandedPipelineData, setExpandedPipelineData, ] = useState(); + const [ selectedProcessorData, setSelectedProcessorData, @@ -164,6 +165,7 @@ function PipelineListsView({ const columns = useMemo(() => { const fieldColumns = getTableColumn(pipelineColumns); + if (isEditingActionMode) { fieldColumns.push( { From c5bf4b4ffd602406dc657612ec765b5a50ed84cc Mon Sep 17 00:00:00 2001 From: Raj Date: Tue, 17 Oct 2023 18:02:54 +0530 Subject: [PATCH 2/6] chore: update snapshot for pipeline lists view --- frontend/src/container/PipelinePage/PipelineListsView/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx index d00160ab9b..62a49b26b1 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx @@ -65,7 +65,6 @@ function PipelineListsView({ expandedPipelineData, setExpandedPipelineData, ] = useState(); - const [ selectedProcessorData, setSelectedProcessorData, @@ -165,7 +164,6 @@ function PipelineListsView({ const columns = useMemo(() => { const fieldColumns = getTableColumn(pipelineColumns); - if (isEditingActionMode) { fieldColumns.push( { From 6490b3926f88d5d0240304bbde4251f1882745b6 Mon Sep 17 00:00:00 2001 From: Raj Date: Wed, 18 Oct 2023 19:35:34 +0530 Subject: [PATCH 3/6] chore: log pipelines list view: refactor dirty pipeline state management --- .../PipelinePage/PipelineListsView/index.tsx | 72 ++++++++++--------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx index 62a49b26b1..42459bf654 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx @@ -3,7 +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 cloneDeep from 'lodash-es/cloneDeep'; +import isEqual from 'lodash-es/isEqual'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; @@ -61,10 +62,29 @@ 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, @@ -78,6 +98,10 @@ function PipelineListsView({ const isEditingActionMode = isActionMode === ActionMode.Editing; useEffect(() => { + if (isEqual(prevPipelineData, pipelineData?.pipelines)) { + return; + } + if (pipelineSearchValue === '') setCurrPipelineData(pipelineData?.pipelines); if (pipelineSearchValue !== '') { const filterData = pipelineData?.pipelines.filter((data: PipelineData) => @@ -85,7 +109,7 @@ function PipelineListsView({ ); setCurrPipelineData(filterData); } - }, [pipelineSearchValue, pipelineData?.pipelines]); + }, [pipelineSearchValue, pipelineData?.pipelines, prevPipelineData]); const handleAlert = useCallback( ({ title, descrition, buttontext, onCancel, onOk }: AlertMessage) => { @@ -173,11 +197,7 @@ function PipelineListsView({ align: 'center', render: (_value, record): JSX.Element => ( @@ -214,7 +234,6 @@ function PipelineListsView({ pipelineEditAction, pipelineDeleteAction, onSwitchPipelineChange, - expandedPipelineData, ]); const updatePipelineSequence = useCallback( @@ -268,7 +287,7 @@ function PipelineListsView({ setActionType={setActionType} processorEditAction={processorEditAction} setShowSaveButton={setShowSaveButton} - expandedPipelineData={expandedPipelineData} + expandedPipelineData={expandedPipelineData()} setExpandedPipelineData={setExpandedPipelineData} prevPipelineData={prevPipelineData} /> @@ -280,6 +299,7 @@ function PipelineListsView({ expandedPipelineData, setActionType, prevPipelineData, + setExpandedPipelineData, ], ); @@ -290,7 +310,7 @@ function PipelineListsView({ keys.push(record?.id); } setExpandedRowKeys(keys); - setExpandedPipelineData(record); + setExpandedPipelineId(record.id); }, [], ); @@ -324,18 +344,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 +372,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 +426,7 @@ function PipelineListsView({ setActionType={setActionType} selectedProcessorData={selectedProcessorData} setShowSaveButton={setShowSaveButton} - expandedPipelineData={expandedPipelineData} + expandedPipelineData={expandedPipelineData()} setExpandedPipelineData={setExpandedPipelineData} /> From cf0831d8be9c87313220bfebbcd2f1b9c6cfe0d5 Mon Sep 17 00:00:00 2001 From: Raj Date: Wed, 18 Oct 2023 19:53:12 +0530 Subject: [PATCH 4/6] chore: use memoized value for filtered pipelines instead of useEffect based updates --- .../PipelinePage/PipelineListsView/index.tsx | 31 +++++++++---------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx index 42459bf654..8039ddbedd 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx @@ -4,8 +4,7 @@ import { ExpandableConfig } from 'antd/es/table/interface'; import savePipeline from 'api/pipeline/post'; import { useNotifications } from 'hooks/useNotifications'; import cloneDeep from 'lodash-es/cloneDeep'; -import isEqual from 'lodash-es/isEqual'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { useTranslation } from 'react-i18next'; @@ -63,6 +62,15 @@ function PipelineListsView({ cloneDeep(pipelineData?.pipelines), ); + const visibleCurrPipelines = useMemo((): Array => { + if (pipelineSearchValue === '') { + return currPipelineData; + } + return currPipelineData.filter((data) => + getDataOnSearch(data as never, pipelineSearchValue), + ); + }, [currPipelineData, pipelineSearchValue]); + const [expandedPipelineId, setExpandedPipelineId] = useState< string | undefined >(undefined); @@ -85,32 +93,21 @@ function PipelineListsView({ }, [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 (isEqual(prevPipelineData, pipelineData?.pipelines)) { - return; - } - - if (pipelineSearchValue === '') setCurrPipelineData(pipelineData?.pipelines); - if (pipelineSearchValue !== '') { - const filterData = pipelineData?.pipelines.filter((data: PipelineData) => - getDataOnSearch(data as never, pipelineSearchValue), - ); - setCurrPipelineData(filterData); - } - }, [pipelineSearchValue, pipelineData?.pipelines, prevPipelineData]); - const handleAlert = useCallback( ({ title, descrition, buttontext, onCancel, onOk }: AlertMessage) => { modal.confirm({ @@ -441,7 +438,7 @@ function PipelineListsView({ expandedRowRender={expandedRowView} expandable={expandableConfig} components={tableComponents} - dataSource={currPipelineData} + dataSource={visibleCurrPipelines} onRow={onRowHandler} footer={footer} pagination={false} From c284be5588c665548db686efe3fb0d6f517aed01 Mon Sep 17 00:00:00 2001 From: Raj Date: Wed, 18 Oct 2023 20:28:51 +0530 Subject: [PATCH 5/6] chore: update pipeline reorder logic to work on filtered view too --- .../PipelinePage/PipelineListsView/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx index 8039ddbedd..12b7ee7501 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx @@ -252,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; }); @@ -261,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), }); } @@ -269,6 +275,7 @@ function PipelineListsView({ [ currPipelineData, isEditingActionMode, + visibleCurrPipelines, handleAlert, t, updatePipelineSequence, From 8347ff2bfaca371bab77db2be7d27a63587266b7 Mon Sep 17 00:00:00 2001 From: Raj Date: Fri, 20 Oct 2023 16:45:40 +0530 Subject: [PATCH 6/6] chore: minor cleanup --- .../PipelinePage/PipelineListsView/index.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx index 12b7ee7501..d602004a68 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/index.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/index.tsx @@ -62,15 +62,6 @@ function PipelineListsView({ cloneDeep(pipelineData?.pipelines), ); - const visibleCurrPipelines = useMemo((): Array => { - if (pipelineSearchValue === '') { - return currPipelineData; - } - return currPipelineData.filter((data) => - getDataOnSearch(data as never, pipelineSearchValue), - ); - }, [currPipelineData, pipelineSearchValue]); - const [expandedPipelineId, setExpandedPipelineId] = useState< string | undefined >(undefined); @@ -108,6 +99,15 @@ function PipelineListsView({ const [showSaveButton, setShowSaveButton] = useState(); const isEditingActionMode = isActionMode === ActionMode.Editing; + const visibleCurrPipelines = useMemo((): Array => { + if (pipelineSearchValue === '') { + return currPipelineData; + } + return currPipelineData.filter((data) => + getDataOnSearch(data as never, pipelineSearchValue), + ); + }, [currPipelineData, pipelineSearchValue]); + const handleAlert = useCallback( ({ title, descrition, buttontext, onCancel, onOk }: AlertMessage) => { modal.confirm({