From 0b6b1c670565d287f87b9a735e1f999bc48fcc72 Mon Sep 17 00:00:00 2001
From: pnaik1 <pnaik@redhat.com>
Date: Tue, 24 Sep 2024 20:13:56 +0530
Subject: [PATCH] rerender only the schedules which toggled

---
 .../PipelineRecurringRunTable.tsx             |  3 +++
 .../PipelineRecurringRunTableRow.tsx          |  6 +++--
 .../pipelines/global/runs/ScheduledRuns.tsx   | 22 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 3 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..d8fc9e75ca 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[];
+  refreshSingleRecurringRun: (recurringRun: PipelineRecurringRunKFv2) => void;
   loading?: boolean;
   totalSize: number;
   page: number;
@@ -33,6 +34,7 @@ type PipelineRecurringRunTableProps = {
 
 const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
   recurringRuns,
+  refreshSingleRecurringRun,
   loading,
   totalSize,
   page,
@@ -122,6 +124,7 @@ const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
         rowRenderer={(recurringRun) => (
           <PipelineRecurringRunTableRow
             key={recurringRun.recurring_run_id}
+            refreshSingleRecurringRun={refreshSingleRecurringRun}
             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..1787dbecce 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;
+  refreshSingleRecurringRun: (recurringRun: PipelineRecurringRunKFv2) => void;
   onToggleCheck: () => void;
   onDelete: () => void;
   recurringRun: PipelineRecurringRunKFv2;
@@ -26,13 +27,14 @@ type PipelineRecurringRunTableRowProps = {
 
 const PipelineRecurringRunTableRow: React.FC<PipelineRecurringRunTableRowProps> = ({
   isChecked,
+  refreshSingleRecurringRun,
   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(() => refreshSingleRecurringRun(recurringRun))
           }
         />
       </Td>
diff --git a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
index 09a9e12051..2639db6275 100644
--- a/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
+++ b/frontend/src/pages/pipelines/global/runs/ScheduledRuns.tsx
@@ -16,6 +16,8 @@ import CreateScheduleButton from '~/pages/pipelines/global/runs/CreateScheduleBu
 import { useContextExperimentArchived as useIsExperimentArchived } from '~/pages/pipelines/global/experiments/ExperimentContext';
 import { usePipelineRecurringRunsTable } from '~/concepts/pipelines/content/tables/pipelineRecurringRun/usePipelineRecurringRunTable';
 import PipelineRecurringRunTable from '~/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable';
+import { PipelineRecurringRunKFv2 } from '~/concepts/pipelines/kfTypes';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
 
 const ScheduledRuns: React.FC = () => {
   const { experimentId, pipelineVersionId } = useParams();
@@ -23,6 +25,23 @@ const ScheduledRuns: React.FC = () => {
     usePipelineRecurringRunsTable({ experimentId, pipelineVersionId });
   const isExperimentArchived = useIsExperimentArchived();
 
+  const { api } = usePipelinesAPI();
+  const [updatedRecurringRuns, setUpdatedRecurringRuns] = React.useState<
+    PipelineRecurringRunKFv2[]
+  >([]);
+
+  React.useEffect(() => setUpdatedRecurringRuns(recurringRuns), [recurringRuns]);
+
+  const refreshSingleRecurringRun = (recurringRun: PipelineRecurringRunKFv2) => {
+    api.getPipelineRecurringRun({}, recurringRun.recurring_run_id).then((newState) => {
+      setUpdatedRecurringRuns((prevState) =>
+        prevState.map((run) =>
+          run.recurring_run_id === recurringRun.recurring_run_id ? newState : run,
+        ),
+      );
+    });
+  };
+
   if (error) {
     return (
       <Bullseye>
@@ -73,7 +92,8 @@ const ScheduledRuns: React.FC = () => {
 
   return (
     <PipelineRecurringRunTable
-      recurringRuns={recurringRuns}
+      refreshSingleRecurringRun={refreshSingleRecurringRun}
+      recurringRuns={updatedRecurringRuns}
       loading={!loaded}
       totalSize={totalSize}
       {...tableProps}