Refactor inspection page code, and mission definition event handlers

frontend/src/App.tsx

@@ -5,14 +5,15 @@ import { FlotillaSite } from 'components/Pages/FlotillaSite'
 import { LanguageProvider } from 'components/Contexts/LanguageContext'
 import { MissionControlProvider } from 'components/Contexts/MissionControlContext'
 import { MissionFilterProvider } from 'components/Contexts/MissionFilterContext'
-import { MissionsProvider } from 'components/Contexts/MissionListsContext'
+import { MissionRunsProvider } from 'components/Contexts/MissionRunsContext'
 import { SafeZoneProvider } from 'components/Contexts/SafeZoneContext'
 import { AlertProvider } from 'components/Contexts/AlertContext'
 import { InstallationProvider } from 'components/Contexts/InstallationContext'
 import { AuthProvider } from 'components/Contexts/AuthProvider'
 import { SignalRProvider } from 'components/Contexts/SignalRContext'
 import { RobotProvider } from 'components/Contexts/RobotContext'
 import { config } from 'config'
+import { MissionDefinitionsProvider } from 'components/Contexts/MissionDefinitionsContext'
 
 const appInsights = new ApplicationInsights({
     config: {
@@ -29,30 +30,32 @@ const App = () => (
     <InstallationProvider>
         <AuthProvider>
             <SignalRProvider>
-                <RobotProvider>
-                    <MissionsProvider>
-                        <AlertProvider>
-                            <SafeZoneProvider>
-                                <MissionsProvider>
-                                    <LanguageProvider>
-                                        <MissionControlProvider>
-                                            <UnauthenticatedTemplate>
-                                                <div className="sign-in-page">
-                                                    <AssetSelectionPage></AssetSelectionPage>
-                                                </div>
-                                            </UnauthenticatedTemplate>
-                                            <AuthenticatedTemplate>
-                                                <MissionFilterProvider>
-                                                    <FlotillaSite />
-                                                </MissionFilterProvider>
-                                            </AuthenticatedTemplate>
-                                        </MissionControlProvider>
-                                    </LanguageProvider>
-                                </MissionsProvider>
-                            </SafeZoneProvider>
-                        </AlertProvider>
-                    </MissionsProvider>
-                </RobotProvider>
+                <MissionDefinitionsProvider>
+                    <RobotProvider>
+                        <MissionRunsProvider>
+                            <AlertProvider>
+                                <SafeZoneProvider>
+                                    <MissionRunsProvider>
+                                        <LanguageProvider>
+                                            <MissionControlProvider>
+                                                <UnauthenticatedTemplate>
+                                                    <div className="sign-in-page">
+                                                        <AssetSelectionPage></AssetSelectionPage>
+                                                    </div>
+                                                </UnauthenticatedTemplate>
+                                                <AuthenticatedTemplate>
+                                                    <MissionFilterProvider>
+                                                        <FlotillaSite />
+                                                    </MissionFilterProvider>
+                                                </AuthenticatedTemplate>
+                                            </MissionControlProvider>
+                                        </LanguageProvider>
+                                    </MissionRunsProvider>
+                                </SafeZoneProvider>
+                            </AlertProvider>
+                        </MissionRunsProvider>
+                    </RobotProvider>
+                </MissionDefinitionsProvider>
             </SignalRProvider>
         </AuthProvider>
     </InstallationProvider>

frontend/src/components/Contexts/MissionDefinitionsContext.tsx

@@ -0,0 +1,94 @@
+import { createContext, FC, useContext, useEffect, useState } from 'react'
+import { BackendAPICaller } from 'api/ApiCaller'
+import { SignalREventLabels, useSignalRContext } from './SignalRContext'
+import { CondensedMissionDefinition, SourceType } from 'models/MissionDefinition'
+import { useInstallationContext } from './InstallationContext'
+
+interface IMissionDefinitionsContext {
+    missionDefinitions: CondensedMissionDefinition[]
+}
+
+interface Props {
+    children: React.ReactNode
+}
+
+const defaultMissionDefinitionsContext: IMissionDefinitionsContext = {
+    missionDefinitions: [],
+}
+
+export const MissionDefinitionsContext = createContext<IMissionDefinitionsContext>(defaultMissionDefinitionsContext)
+
+const upsertMissionDefinition = (
+    oldQueue: CondensedMissionDefinition[],
+    updatedMission: CondensedMissionDefinition
+) => {
+    const oldQueueCopy = [...oldQueue]
+    const existingIndex = oldQueueCopy.findIndex((m) => m.id === updatedMission.id)
+    if (existingIndex !== -1) {
+        oldQueueCopy[existingIndex] = updatedMission
+        return oldQueueCopy
+    } else {
+        return [...oldQueueCopy, updatedMission]
+    }
+}
+
+const fetchMissionDefinitions = (params: {
+    installationCode: string
+    pageSize: number
+    orderBy: string
+}): Promise<CondensedMissionDefinition[]> =>
+    BackendAPICaller.getMissionDefinitions(params).then((response) => response.content)
+
+export const useMissionDefinitions = (): IMissionDefinitionsContext => {
+    const [missionDefinitions, setMissionDefinitions] = useState<CondensedMissionDefinition[]>([])
+    const { registerEvent, connectionReady } = useSignalRContext()
+    const { installationCode } = useInstallationContext()
+
+    useEffect(() => {
+        if (connectionReady) {
+            registerEvent(SignalREventLabels.missionDefinitionUpdated, (username: string, message: string) => {
+                const missionDefinition: CondensedMissionDefinition = JSON.parse(message)
+                missionDefinition.sourceType =
+                    Object.values(SourceType)[missionDefinition.sourceType as unknown as number]
+                setMissionDefinitions((oldMissionDefinitions) =>
+                    upsertMissionDefinition(oldMissionDefinitions, missionDefinition)
+                )
+            })
+            registerEvent(SignalREventLabels.missionDefinitionCreated, (username: string, message: string) => {
+                const missionDefinition: CondensedMissionDefinition = JSON.parse(message)
+                missionDefinition.sourceType =
+                    Object.values(SourceType)[missionDefinition.sourceType as unknown as number]
+                setMissionDefinitions((oldMissionDefinitions) =>
+                    upsertMissionDefinition(oldMissionDefinitions, missionDefinition)
+                )
+            })
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [registerEvent, connectionReady])
+
+    useEffect(() => {
+        const fetchAndUpdateMissionDefinitions = async () => {
+            const missionDefinitionsInInstallation = await fetchMissionDefinitions({
+                installationCode: installationCode,
+                pageSize: 100,
+                orderBy: 'InstallationCode installationCode',
+            })
+            setMissionDefinitions(missionDefinitionsInInstallation)
+        }
+        if (BackendAPICaller.accessToken) fetchAndUpdateMissionDefinitions()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [BackendAPICaller.accessToken, installationCode])
+
+    return { missionDefinitions }
+}
+
+export const MissionDefinitionsProvider: FC<Props> = ({ children }) => {
+    const { missionDefinitions } = useMissionDefinitions()
+    return (
+        <MissionDefinitionsContext.Provider value={{ missionDefinitions }}>
+            {children}
+        </MissionDefinitionsContext.Provider>
+    )
+}
+
+export const useMissionDefinitionsContext = () => useContext(MissionDefinitionsContext)

frontend/src/components/Contexts/MissionListsContext.tsx → frontend/src/components/Contexts/MissionRunsContext.tsx

@@ -12,7 +12,7 @@ const upsertList = (list: Mission[], mission: Mission) => {
     return newList
 }
 
-interface IMissionsContext {
+interface IMissionRunsContext {
     ongoingMissions: Mission[]
     missionQueue: Mission[]
     loadingMissionSet: Set<string>
@@ -23,21 +23,14 @@ interface Props {
     children: React.ReactNode
 }
 
-const defaultMissionsContext: IMissionsContext = {
+const defaultMissionRunsContext: IMissionRunsContext = {
     ongoingMissions: [],
     missionQueue: [],
     loadingMissionSet: new Set(),
     setLoadingMissionSet: (newLoadingMissionSet: Set<string> | ((mission: Set<string>) => Set<string>)) => {},
 }
 
-export const MissionsContext = createContext<IMissionsContext>(defaultMissionsContext)
-
-interface MissionsResult {
-    ongoingMissions: Mission[]
-    missionQueue: Mission[]
-    loadingMissionSet: Set<string>
-    setLoadingMissionSet: (newLoadingMissionSet: Set<string> | ((mission: Set<string>) => Set<string>)) => void
-}
+export const MissionRunsContext = createContext<IMissionRunsContext>(defaultMissionRunsContext)
 
 const updateQueueIfMissionAlreadyQueued = (oldQueue: Mission[], updatedMission: Mission) => {
     const existingMissionIndex = oldQueue.findIndex((m) => m.id === updatedMission.id)
@@ -68,10 +61,13 @@ const updateOngoingMissionsWithUpdatedMission = (oldMissionList: Mission[], upda
     return oldMissionList
 }
 
-const fetchMissions = (params: { statuses: MissionStatus[]; pageSize: number; orderBy: string }): Promise<Mission[]> =>
-    BackendAPICaller.getMissionRuns(params).then((response) => response.content)
+const fetchMissionRuns = (params: {
+    statuses: MissionStatus[]
+    pageSize: number
+    orderBy: string
+}): Promise<Mission[]> => BackendAPICaller.getMissionRuns(params).then((response) => response.content)
 
-export const useMissions = (): MissionsResult => {
+export const useMissionRuns = (): IMissionRunsContext => {
     const [ongoingMissions, setOngoingMissions] = useState<Mission[]>([])
     const [missionQueue, setMissionQueue] = useState<Mission[]>([])
     const [loadingMissionSet, setLoadingMissionSet] = useState<Set<string>>(new Set())
@@ -124,14 +120,14 @@ export const useMissions = (): MissionsResult => {
 
     useEffect(() => {
         const fetchAndUpdateMissions = async () => {
-            const ongoing = await fetchMissions({
+            const ongoing = await fetchMissionRuns({
                 statuses: [MissionStatus.Ongoing, MissionStatus.Paused],
                 pageSize: 100,
                 orderBy: 'StartTime desc',
             })
             setOngoingMissions(ongoing)
 
-            const queue = await fetchMissions({
+            const queue = await fetchMissionRuns({
                 statuses: [MissionStatus.Pending],
                 pageSize: 100,
                 orderBy: 'DesiredStartTime',
@@ -145,13 +141,13 @@ export const useMissions = (): MissionsResult => {
     return { ongoingMissions, missionQueue, loadingMissionSet, setLoadingMissionSet }
 }
 
-export const MissionsProvider: FC<Props> = ({ children }) => {
-    const { ongoingMissions, missionQueue, loadingMissionSet, setLoadingMissionSet } = useMissions()
+export const MissionRunsProvider: FC<Props> = ({ children }) => {
+    const { ongoingMissions, missionQueue, loadingMissionSet, setLoadingMissionSet } = useMissionRuns()
     return (
-        <MissionsContext.Provider value={{ ongoingMissions, missionQueue, loadingMissionSet, setLoadingMissionSet }}>
+        <MissionRunsContext.Provider value={{ ongoingMissions, missionQueue, loadingMissionSet, setLoadingMissionSet }}>
             {children}
-        </MissionsContext.Provider>
+        </MissionRunsContext.Provider>
     )
 }
 
-export const useMissionsContext = () => useContext(MissionsContext)
+export const useMissionsContext = () => useContext(MissionRunsContext)

frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx

@@ -6,7 +6,7 @@ import { useEffect } from 'react'
 import { Mission, placeholderMission } from 'models/Mission'
 import { EmptyMissionQueuePlaceholder } from './NoMissionPlaceholder'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
-import { useMissionsContext } from 'components/Contexts/MissionListsContext'
+import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'

frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionView.tsx

@@ -6,7 +6,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useNavigate } from 'react-router-dom'
 import { config } from 'config'
 import { Icons } from 'utils/icons'
-import { useMissionsContext } from 'components/Contexts/MissionListsContext'
+import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { useEffect, useState } from 'react'
 import { Mission } from 'models/Mission'

frontend/src/components/Pages/FrontPage/MissionOverview/ScheduleMissionDialog/SelectMissionsToScheduleDialog.tsx

@@ -7,7 +7,7 @@ import { Robot } from 'models/Robot'
 import { EchoMissionDefinition } from 'models/MissionDefinition'
 import { useRobotContext } from 'components/Contexts/RobotContext'
 import { BackendAPICaller } from 'api/ApiCaller'
-import { useMissionsContext } from 'components/Contexts/MissionListsContext'
+import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'