Migrate scheduled tasks to React (#6506)

* Migrate scheduled tasks to React

* Adjust margins

* Use localeCompare

* Clean up imports

* Use legacy apiclient from useApi

* Fix import

* Fix nested typography

* Add polling fallback

* Cleanup code

* Rename to tasks

* Rename to Component

* Use constants for websocket events

* Use memo to fix timestamp rerender on run

src/apps/dashboard/features/scheduledtasks/components/Task.tsx

@@ -0,0 +1,67 @@
+import React, { FunctionComponent, useCallback } from 'react';
+import ListItem from '@mui/material/ListItem';
+import Avatar from '@mui/material/Avatar';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import Dashboard from 'utils/dashboard';
+import { TaskProps } from '../types/taskProps';
+import TaskProgress from './TaskProgress';
+import TaskLastRan from './TaskLastRan';
+import IconButton from '@mui/material/IconButton';
+import PlayArrow from '@mui/icons-material/PlayArrow';
+import Stop from '@mui/icons-material/Stop';
+import { useStartTask } from '../api/useStartTask';
+import { useStopTask } from '../api/useStopTask';
+
+const Task: FunctionComponent<TaskProps> = ({ task }: TaskProps) => {
+    const startTask = useStartTask();
+    const stopTask = useStopTask();
+
+    const navigateTaskEdit = useCallback(() => {
+        Dashboard.navigate(`/dashboard/tasks/edit?id=${task.Id}`)
+            .catch(err => {
+                console.error('[Task] failed to navigate to task edit page', err);
+            });
+    }, [task]);
+
+    const handleStartTask = useCallback(() => {
+        if (task.Id) {
+            startTask.mutate({ taskId: task.Id });
+        }
+    }, [task, startTask]);
+
+    const handleStopTask = useCallback(() => {
+        if (task.Id) {
+            stopTask.mutate({ taskId: task.Id });
+        }
+    }, [task, stopTask]);
+
+    return (
+        <ListItem
+            disablePadding
+            secondaryAction={
+                <IconButton onClick={task.State == 'Running' ? handleStopTask : handleStartTask}>
+                    {task.State == 'Running' ? <Stop /> : <PlayArrow />}
+                </IconButton>
+            }
+        >
+            <ListItemButton onClick={navigateTaskEdit}>
+                <ListItemAvatar>
+                    <Avatar sx={{ bgcolor: 'primary.main' }}>
+                        <AccessTimeIcon sx={{ color: '#fff' }} />
+                    </Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                    primary={<Typography variant='h3'>{task.Name}</Typography>}
+                    secondary={task.State == 'Running' ? <TaskProgress task={task} /> : <TaskLastRan task={task} />}
+                    disableTypography
+                />
+            </ListItemButton>
+        </ListItem>
+    );
+};
+
+export default Task;