Common Context

Author: iberdinsky-skilld

client/src/App.tsx

@@ -34,45 +34,46 @@ const apiUrl = getApiUrl()
 export function App() {
   const [isLoading, setLoading] = useState(true)
 
-  const setTitle = useDocumentTitle();
+  const setTitle = useDocumentTitle()
   useEffect(() => {
-    (async () => {
-      const data = await setCustomisation();
-      const customisation: { plasmactl_web_ui_platform_page_name?: string } = data;
-      setTitle(customisation?.plasmactl_web_ui_platform_page_name ?? 'Platform');
-      setLoading(false);
-    })();
+    ;(async () => {
+      const data = await setCustomisation()
+      const customisation: { plasmactl_web_ui_platform_page_name?: string } =
+        data
+      setTitle(customisation?.plasmactl_web_ui_platform_page_name ?? 'Platform')
+      setLoading(false)
+    })()
   }, [])
 
   if (isLoading) {
-    return null;
+    return null
   }
 
   return (
-    <ActionProvider>
-      <BrowserRouter>
-        <ThemeProvider>
-          <Refine
-            dataProvider={{
-              default: launchrDataProvider(apiUrl),
-            }}
-            liveProvider={liveProvider}
-            notificationProvider={useNotificationProvider}
-            routerProvider={routerBindings}
-            resources={[
-              {
-                name: 'actions',
-                list: '/actions',
-                show: '/actions/:id/show',
-                meta: {
-                  canDelete: false,
-                },
+    <BrowserRouter>
+      <ThemeProvider>
+        <Refine
+          dataProvider={{
+            default: launchrDataProvider(apiUrl),
+          }}
+          liveProvider={liveProvider}
+          notificationProvider={useNotificationProvider}
+          routerProvider={routerBindings}
+          resources={[
+            {
+              name: 'actions',
+              list: '/actions',
+              show: '/actions/:id/show',
+              meta: {
+                canDelete: false,
               },
-            ]}
-            options={{
-              liveMode: 'manual',
-            }}
-          >
+            },
+          ]}
+          options={{
+            liveMode: 'manual',
+          }}
+        >
+          <ActionProvider>
             <GlobalKBarProvider>
               <Routes>
                 <Route
@@ -105,9 +106,9 @@ export function App() {
               <UnsavedChangesNotifier />
               <RefineKbar />
             </GlobalKBarProvider>
-          </Refine>
-        </ThemeProvider>
-      </BrowserRouter>
-    </ActionProvider>
+          </ActionProvider>
+        </Refine>
+      </ThemeProvider>
+    </BrowserRouter>
   )
-}
+}

client/src/components/ActionsListFlow.tsx

@@ -7,7 +7,6 @@ import ListItem from '@mui/material/ListItem'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import Typography from '@mui/material/Typography'
 import { type FC, Fragment } from 'react'
-import { useDebouncedCallback } from 'use-debounce'
 
 import ArrowRightIcon from '/images/arrow-right.svg'
 
@@ -26,16 +25,10 @@ export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {
     label: string
     items: components['schemas']['ActionShort'][]
   }[] = []
-
-  const breadcrumbs = actionsGroup.id.includes('.')
-    ? actionsGroup.id
-        .split('.')
-        .slice(0, -1)
-        .map((a) => sentenceCase(a))
-    : []
-  const title = actionsGroup.id.includes('.')
-    ? actionsGroup.id.split('.').pop()
-    : actionsGroup.id
+  const { levels, id } = splitActionId(actionsGroup.id)
+  const breadcrumbs =
+    levels.length > 0 ? levels.map((a) => sentenceCase(a)) : []
+  const title = id
 
   if (actionsGroup.list.length > 0) {
     const attachedActions = actionsGroup.list.filter((a) =>
@@ -105,27 +98,6 @@ export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {
     }
   }
 
-  const debounced = useDebouncedCallback((id = false) => {
-    if (id) {
-      dispatch?.({
-        type: 'set-hover-action',
-        id,
-      })
-    } else {
-      dispatch?.({
-        type: 'set-hover-action',
-      })
-    }
-  }, 25)
-
-  const wrappedHandleMouseEnter = (id: string) => {
-    debounced(id)
-  }
-
-  const wrappedHandleMouseLeave = () => {
-    debounced()
-  }
-
   const actionClickHandler = (id: string) => {
     dispatch?.({
       type: 'set-active-action',
@@ -222,8 +194,6 @@ export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {
                     >
                       <Box
                         className={'action-button'}
-                        onMouseEnter={() => wrappedHandleMouseEnter(item.id)}
-                        onMouseLeave={() => wrappedHandleMouseLeave()}
                         onClick={() => actionClickHandler(item.id)}
                         sx={{
                           display: 'flex',

client/src/components/AnimatedFab.tsx

@@ -1,49 +1,71 @@
-import TerminalIcon from '@mui/icons-material/Terminal'
-import Badge from '@mui/material/Badge'
-import Fab from '@mui/material/Fab'
-import { styled } from '@mui/system'
-import { useEffect, useState } from 'react'
-
-const AnimatedBadge = styled(Badge)(() => ({
-  transition: 'transform 0.3s ease-in-out',
-  '&.animate': {
-    transform: 'scale(1.5)',
-  },
-}))
+import SpeedDial from '@mui/material/SpeedDial'
+import SpeedDialAction from '@mui/material/SpeedDialAction'
 
+import TerminalIcon from '@mui/icons-material/Terminal'
+import BoltIcon from '@mui/icons-material/Bolt'
 interface IAnimatedFabProps {
-  badgeLength: number
+  startedLength: number
+  runningLength?: number
+  errorLength?: number
+  finishedLength?: number
   handleOpen: () => void
 }
 
-const AnimatedFab = ({ badgeLength, handleOpen }: IAnimatedFabProps) => {
-  const [animate, setAnimate] = useState(false)
-  const [prevBadgeLength, setPrevBadgeLength] = useState(badgeLength)
-
-  useEffect(() => {
-    if (badgeLength !== prevBadgeLength && badgeLength > 0) {
-      setAnimate(true)
-      const timeout = setTimeout(() => setAnimate(false), 300)
-      return () => clearTimeout(timeout)
-    }
-    setPrevBadgeLength(badgeLength)
-  }, [badgeLength, prevBadgeLength])
+const AnimatedFab = ({
+  startedLength,
+  runningLength,
+  errorLength,
+  finishedLength,
+  handleOpen,
+}: IAnimatedFabProps) => {
 
   return (
-    <Fab
-      color="primary"
-      aria-label="status"
-      onClick={handleOpen}
-      style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }}
+    <SpeedDial
+      ariaLabel="Actions state"
+      sx={{ position: 'absolute', bottom: 16, right: 16 }}
+      icon={<TerminalIcon />}
     >
-      <AnimatedBadge
-        badgeContent={badgeLength}
-        color="secondary"
-        className={animate ? 'animate' : ''}
-      >
-        <TerminalIcon />
-      </AnimatedBadge>
-    </Fab>
+      <SpeedDialAction
+        icon={<BoltIcon />}
+        onClick={handleOpen}
+        slotProps={{
+          tooltip: {
+            title: `${startedLength} launched`,
+            open: true,
+          },
+        }}
+      />
+      <SpeedDialAction
+        icon={<BoltIcon />}
+        onClick={handleOpen}
+        slotProps={{
+          tooltip: {
+            title: `${runningLength} running`,
+            open: true,
+          },
+        }}
+      />
+      <SpeedDialAction
+        icon={<BoltIcon />}
+        onClick={handleOpen}
+        slotProps={{
+          tooltip: {
+            title: `${errorLength} errors`,
+            open: true,
+          },
+        }}
+      />
+      <SpeedDialAction
+        icon={<BoltIcon />}
+        onClick={handleOpen}
+        slotProps={{
+          tooltip: {
+            title: `${finishedLength} finished`,
+            open: true,
+          },
+        }}
+      />
+    </SpeedDial>
   )
 }
 

client/src/components/FormFlow.tsx

@@ -15,7 +15,6 @@ import {
   useNotification,
   useOne,
   usePublish,
-  useSubscription,
 } from '@refinedev/core'
 import type { IChangeEvent } from '@rjsf/core'
 import { withTheme } from '@rjsf/core'
@@ -28,9 +27,10 @@ import { type FC, useEffect, useState } from 'react'
 import { components } from '../../openapi'
 import formTemplates from '../components/rjsf/templates'
 import formWidgets from '../components/rjsf/widgets'
-import { useActionDispatch } from '../hooks/ActionHooks'
+import { useAction, useActionDispatch } from '../hooks/ActionHooks'
 import {
   customizeUiSchema,
+  extractDateTimeFromId,
   sentenceCase,
   splitActionId,
 } from '../utils/helpers'
@@ -48,7 +48,6 @@ export const FormFlow: FC<{
 }> = ({ actionId, formType = 'sidebar', onSubmitCallback }) => {
   const [changed, setChanged] = useState<Set<string>>(new Set())
   const [formValues, setFormValues] = useState<IFormValues | null>(null)
-  const [actionRunning, setActionRunning] = useState(false)
   const [openDialog, setOpenDialog] = useState(false)
   const [previousSubmit, setPreviousSubmit] = useState<IFormValues | null>(null)
   const apiUrl = useApiUrl()
@@ -57,6 +56,8 @@ export const FormFlow: FC<{
   const { open } = useNotification()
   const { levels } = splitActionId(actionId)
   const dispatch = useActionDispatch()
+  const { running } = useAction()
+  const actionRunning = running?.has(actionId)
 
   const queryResult = useOne<components['schemas']['ActionFull']>({
     resource: 'actions',
@@ -101,52 +102,52 @@ export const FormFlow: FC<{
     }
   }
 
-  useSubscription({
-    channel: 'processes',
-    types: ['send-processes-finished'],
-    onLiveEvent: ({ payload, type }) => {
-      if (
-        actionId === payload?.data?.action &&
-        type === 'send-processes-finished'
-      ) {
-        setActionRunning(false)
-      }
-    },
-  })
-
   const handleSubmission = async (formData: IFormValues) => {
     if (onSubmitCallback) {
-      onSubmitCallback(actionId);
+      onSubmitCallback(actionId)
     }
-    setActionRunning(true)
-    publish?.({
-      channel: 'processes',
-      type: 'get-processes',
-      payload: { action: actionId },
-      date: new Date(),
-    })
     try {
       const result = await mutateAsync({
         url: `${apiUrl}/actions/${actionId}`,
         method: 'post',
         values: { ...formData, changed: [...changed] },
-        successNotification: {
-          message: 'Action successfully created.',
-          description: 'Success with no errors',
-          type: 'success',
+        successNotification: (data) => {
+          return {
+            description: `Action started successfully.`,
+            message: data?.data?.id
+              ? extractDateTimeFromId(data?.data?.id as string)
+              : '',
+            type: 'success',
+          }
         },
-        errorNotification: {
-          message: 'Error.',
-          description: 'Something went wrong',
-          type: 'error',
+        errorNotification: () => {
+          return {
+            message: 'Error.',
+            description: 'Something went wrong',
+            type: 'error',
+          }
         },
       })
 
       if (result && actionId) {
+        dispatch?.({
+          type: 'start-action',
+          id: actionId,
+        })
+        dispatch?.({
+          type: 'change-process-state',
+          process: result.data as components['schemas']['ActionRunInfo'],
+        })
         dispatch?.({
           type: 'set-process',
           process: result.data as components['schemas']['ActionRunInfo'],
         })
+        publish?.({
+          channel: 'processes',
+          type: 'get-processes',
+          payload: { action: actionId },
+          date: new Date(),
+        })
         publish?.({
           channel: 'process',
           type: 'get-process',