devtools: refresh scheduled tasks after trigger or cancel

Closes #32861

Triggering or cancelling a scheduled task from the DevTools Scheduled
Tasks page previously left the table showing the pre-action state, so
users had to refresh the browser (which also reset the plugin selector)
to see the new status.

Switch `useScheduledTasks` to `useAsyncRetry` so it exposes a `refresh`
function, and call it after each trigger/cancel action in
`ScheduledTasksContent`. The refresh happens in a `finally` block so the
table also updates when the action itself fails, reflecting whatever the
backend ended up recording.

Signed-off-by: Asish Kumar <officialasishkumar@gmail.com>

.changeset/devtools-refresh-after-scheduled-task-action.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-devtools': patch
+---
+
+Scheduled Tasks page now refreshes its table automatically after a task is triggered or cancelled, so the updated status is visible without reloading the browser.

plugins/devtools/src/components/Content/ScheduledTasksContent/ScheduledTasksContent.tsx

@@ -105,7 +105,8 @@ export const ScheduledTasksContent = () => {
   const plugins =
     configApi.getOptionalStringArray('devTools.scheduledTasks.plugins') || [];
   const [selectedPlugin, setSelectedPlugin] = useState(plugins[0] || '');
-  const { scheduledTasks, loading, error } = useScheduledTasks(selectedPlugin);
+  const { scheduledTasks, loading, error, refresh } =
+    useScheduledTasks(selectedPlugin);
   const { triggerTask, cancelTask, isLoading } = useScheduledTasksOperations();
 
   const [inputValue, setInputValue] = useState('');
@@ -227,6 +228,8 @@ export const ScheduledTasksContent = () => {
                       message: `Error triggering task ${rowData.taskId}: ${e.message}`,
                       severity: 'error',
                     });
+                  } finally {
+                    refresh();
                   }
                 }}
               >
@@ -249,6 +252,8 @@ export const ScheduledTasksContent = () => {
                       message: `Error cancelling task ${rowData.taskId}: ${e.message}`,
                       severity: 'error',
                     });
+                  } finally {
+                    refresh();
                   }
                 }}
               >

plugins/devtools/src/hooks/useScheduledTasks.ts

@@ -15,7 +15,7 @@
  */
 import { devToolsApiRef } from '../api';
 import { useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/esm/useAsync';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
 
 export const useScheduledTasks = (plugin: string) => {
   const api = useApi(devToolsApiRef);
@@ -24,7 +24,8 @@ export const useScheduledTasks = (plugin: string) => {
     value,
     loading,
     error: asyncError,
-  } = useAsync(async () => {
+    retry: refresh,
+  } = useAsyncRetry(async () => {
     return api.getScheduledTasksByPlugin(plugin);
   }, [api, plugin]);
 
@@ -33,6 +34,7 @@ export const useScheduledTasks = (plugin: string) => {
       scheduledTasks: undefined,
       loading: false,
       error: asyncError.message,
+      refresh,
     };
   }
 
@@ -40,5 +42,6 @@ export const useScheduledTasks = (plugin: string) => {
     scheduledTasks: value?.scheduledTasks,
     loading,
     error: value?.error,
+    refresh,
   };
 };