From 063d974d66ec19be317664386e1760fdb01eb703 Mon Sep 17 00:00:00 2001
From: Purva Naik <pnaik@redhat.com>
Date: Fri, 27 Sep 2024 00:51:25 +0530
Subject: [PATCH] rerender only the schedules which toggled (#3244)

---
 .../pipelineRecurringRun/PipelineRecurringRunTable.tsx     | 3 +++
 .../pipelineRecurringRun/PipelineRecurringRunTableRow.tsx  | 6 ++++--
 frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx | 7 +++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
index 0e9a032ec3..50036f0233 100644
--- a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
@@ -18,6 +18,7 @@ import PipelineRecurringRunTableToolbar from './PipelineRecurringRunTableToolbar
 
 type PipelineRecurringRunTableProps = {
   recurringRuns: PipelineRecurringRunKFv2[];
+  refresh: () => void;
   loading?: boolean;
   totalSize: number;
   page: number;
@@ -33,6 +34,7 @@ type PipelineRecurringRunTableProps = {
 
 const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
   recurringRuns,
+  refresh,
   loading,
   totalSize,
   page,
@@ -122,6 +124,7 @@ const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
         rowRenderer={(recurringRun) => (
           <PipelineRecurringRunTableRow
             key={recurringRun.recurring_run_id}
+            refresh={refresh}
             isChecked={isSelected(recurringRun.recurring_run_id)}
             onToggleCheck={() => toggleSelection(recurringRun.recurring_run_id)}
             onDelete={() => setDeleteResources([recurringRun])}
diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx
index 62f96aab5b..c08e61c50f 100644
--- a/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx
+++ b/frontend/src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableRow.tsx
@@ -19,6 +19,7 @@ import useExperimentById from '~/concepts/pipelines/apiHooks/useExperimentById';
 
 type PipelineRecurringRunTableRowProps = {
   isChecked: boolean;
+  refresh: () => void;
   onToggleCheck: () => void;
   onDelete: () => void;
   recurringRun: PipelineRecurringRunKFv2;
@@ -26,13 +27,14 @@ type PipelineRecurringRunTableRowProps = {
 
 const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps> = ({
   isChecked,
+  refresh,
   onToggleCheck,
   onDelete,
   recurringRun,
 }) => {
   const navigate = useNavigate();
   const { experimentId, pipelineId, pipelineVersionId } = useParams();
-  const { namespace, api, refreshAllAPI } = usePipelinesAPI();
+  const { namespace, api } = usePipelinesAPI();
   const { version, loaded, error } = usePipelineRunVersionInfo(recurringRun);
   const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;
   const isExperimentsContext = isExperimentsAvailable && experimentId;
@@ -98,7 +100,7 @@ const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps>
           onToggle={(checked) =>
             api
               .updatePipelineRecurringRun({}, recurringRun.recurring_run_id, checked)
-              .then(refreshAllAPI)
+              .then(() => refresh())
           }
         />
       </Td>
diff --git a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
index 09a9e12051..350416ae40 100644
--- a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
+++ b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
@@ -19,8 +19,10 @@ import PipelineRecurringRunTable from '~/concepts/pipelines/content/tables/pipel
 
 const ScheduledRuns: React.FC = () => {
   const { experimentId, pipelineVersionId } = useParams();
-  const [[{ items: recurringRuns, totalSize }, loaded, error], { initialLoaded, ...tableProps }] =
-    usePipelineRecurringRunsTable({ experimentId, pipelineVersionId });
+  const [
+    [{ items: recurringRuns, totalSize }, loaded, error, refresh],
+    { initialLoaded, ...tableProps },
+  ] = usePipelineRecurringRunsTable({ experimentId, pipelineVersionId });
   const isExperimentArchived = useIsExperimentArchived();
 
   if (error) {
@@ -73,6 +75,7 @@ const ScheduledRuns: React.FC = () => {
 
   return (
     <PipelineRecurringRunTable
+      refresh={refresh}
       recurringRuns={recurringRuns}
       loading={!loaded}
       totalSize={totalSize}