fix(orchestrator): resolve bug in workflow instance page assessed by link

plugins/orchestrator/src/components/WorkflowInstancePage.tsx

@@ -29,15 +29,17 @@ export const WorkflowInstancePage = ({
     workflowInstanceRouteRef,
   );
 
+  const fetchInstance = React.useCallback(async () => {
+    if (!instanceId && !queryInstanceId) {
+      return undefined;
+    }
+    return await orchestratorApi.getInstance(instanceId || queryInstanceId);
+  }, [instanceId, orchestratorApi, queryInstanceId]);
+
   const { loading, error, value, restart } = usePolling<
     ProcessInstance | undefined
   >(
-    async () => {
-      if (!instanceId && !queryInstanceId) {
-        return undefined;
-      }
-      return await orchestratorApi.getInstance(instanceId || queryInstanceId);
-    },
+    fetchInstance,
     SHORT_REFRESH_INTERVAL,
     (curValue: ProcessInstance | undefined) =>
       !!curValue && curValue.state === 'ACTIVE',

plugins/orchestrator/src/components/WorkflowRunsTabContent.tsx

@@ -48,14 +48,15 @@ export const WorkflowRunsTabContent = () => {
     Selector.AllItems,
   );
 
-  const { loading, error, value } = usePolling(async () => {
+  const fetchInstances = React.useCallback(async () => {
     const instances = await orchestratorApi.getInstances();
     const clonedData: WorkflowRunDetail[] = instances.map(
       mapProcessInstanceToDetails,
     );
-
     return clonedData;
-  });
+  }, [orchestratorApi]);
+
+  const { loading, error, value } = usePolling(fetchInstances);
 
   const columns = React.useMemo(
     (): TableColumn<WorkflowRunDetail>[] => [

plugins/orchestrator/src/hooks/usePolling.test.ts

@@ -162,4 +162,19 @@ describe('usePolling', () => {
     await act(async () => result.current.restart());
     expect(result.current.value).toEqual(ABORTED);
   });
+
+  test('should refetch after fn property changed', async () => {
+    const mockAsyncFn = jest.fn().mockResolvedValue(ACTIVE);
+    const { result, waitForNextUpdate, rerender } = renderHook(
+      ({ fn }: { fn: () => Promise<void> }) =>
+        usePolling(fn, SHORT_REFRESH_INTERVAL),
+      { initialProps: { fn: mockAsyncFn } },
+    );
+    await waitForNextUpdate();
+    const mockAsyncFn2 = jest.fn().mockResolvedValue(COMPLETED);
+    expect(result.current.value).toEqual(ACTIVE);
+    rerender({ fn: mockAsyncFn2 });
+    await waitForNextUpdate();
+    expect(result.current.value).toEqual(COMPLETED);
+  });
 });

plugins/orchestrator/src/hooks/usePolling.ts

@@ -13,6 +13,7 @@ const usePolling = <T>(
 ) => {
   const config = useSWRConfig();
 
+  const prevFn = React.useRef(fn);
   const uniqueKey = React.useMemo<string>(() => {
     return uuid.v4();
   }, []);
@@ -38,6 +39,18 @@ const usePolling = <T>(
     },
   });
 
+  const restart = React.useCallback(
+    () => config.mutate(uniqueKey),
+    [config, uniqueKey],
+  );
+
+  React.useEffect(() => {
+    if (prevFn.current !== fn) {
+      restart();
+      prevFn.current = fn;
+    }
+  }, [fn, restart]);
+
   React.useEffect(() => {
     // clean cache after unmount, no need to store the data globally
     return () => config.cache.delete(uniqueKey);
@@ -48,7 +61,7 @@ const usePolling = <T>(
     value: data,
     error,
     loading: isLoading,
-    restart: () => config.mutate(uniqueKey),
+    restart,
   };
 };