Fix duplicate mission scheduling from a single click

The inspection-area verification dialog fired the schedule request from a
useEffect that ran on mount. Under React StrictMode (dev) this effect is
invoked twice, sending two POST /missions/schedule requests per action and
creating two MissionRuns.

Move the scheduling request out of the effect and into the click handler.
The dialog is now a presentational component that only decides which
verification message to show; the decision (getInspectionAreaDialogType) is
computed at the call site, and the request is fired exactly once from the
user action. When no verification is needed, the request fires directly
without opening a dialog.

Author: olaals

frontend/src/components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification.tsx

@@ -1,79 +1,46 @@
-import { useEffect } from 'react'
 import {
     ConflictingMissionInspectionAreasDialog,
     ConflictingRobotInspectionAreaDialog,
 } from './ConflictingInspectionAreaDialog'
 import { UnknownInspectionAreaDialog } from './UnknownInspectionAreaDialog'
-import { useAssetContext } from 'components/Contexts/AssetContext'
 import { InspectionArea } from 'models/InspectionArea'
+import { RobotWithoutTelemetry } from 'models/Robot'
+import { getUniqueInspectionAreas, InspectionAreaDialogType } from './getInspectionAreaDialogType'
 
 interface IProps {
-    scheduleMissions: () => void
+    dialogType: InspectionAreaDialogType
     closeDialog: () => void
-    robotId: string
+    robot: RobotWithoutTelemetry | undefined
     missionInspectionAreas: InspectionArea[]
 }
 
-enum DialogTypes {
-    unknownNewInspectionArea,
-    conflictingMissionInspectionAreas,
-    conflictingRobotInspectionArea,
-    unknown,
-}
-
 export const ScheduleMissionWithInspectionAreaVerification = ({
-    robotId,
-    missionInspectionAreas,
-    scheduleMissions,
+    dialogType,
     closeDialog,
+    robot,
+    missionInspectionAreas,
 }: IProps) => {
-    const { enabledRobots } = useAssetContext()
-
-    const unikMissionInspectionAreas = missionInspectionAreas.filter(
-        (inspectionArea, index, self) => self.findIndex((i) => i.id === inspectionArea.id) === index
+    const uniqueMissionInspectionAreaNames = getUniqueInspectionAreas(missionInspectionAreas).map(
+        (area) => area?.inspectionAreaName ?? ''
     )
 
-    const selectedRobot = enabledRobots.find((robot) => robot.id === robotId)
-
-    const getDialogToOpen = (): DialogTypes | undefined => {
-        if (!selectedRobot) return DialogTypes.unknown
-        if (unikMissionInspectionAreas.length > 1) return DialogTypes.conflictingMissionInspectionAreas
-        if (unikMissionInspectionAreas.length === 0) return DialogTypes.unknownNewInspectionArea
-        if (
-            selectedRobot.currentInspectionAreaId &&
-            unikMissionInspectionAreas[0]?.id !== selectedRobot.currentInspectionAreaId
-        ) {
-            return DialogTypes.conflictingRobotInspectionArea
-        }
-        return undefined
-    }
-
-    const resolvedDialog = getDialogToOpen()
-    const dialogToOpen = resolvedDialog ?? DialogTypes.unknown
-    const shouldScheduleDirectly = !!selectedRobot && resolvedDialog === undefined
-
-    useEffect(() => {
-        if (shouldScheduleDirectly) scheduleMissions()
-    }, [shouldScheduleDirectly])
-
-    const unikMissionInspectionAreaNames = unikMissionInspectionAreas.map((area) => area?.inspectionAreaName ?? '')
-
     return (
         <>
-            {dialogToOpen === DialogTypes.conflictingMissionInspectionAreas && (
+            {dialogType === InspectionAreaDialogType.conflictingMissionInspectionAreas && (
                 <ConflictingMissionInspectionAreasDialog
                     closeDialog={closeDialog}
-                    missionInspectionAreaNames={unikMissionInspectionAreaNames}
-                />
-            )}
-            {dialogToOpen === DialogTypes.conflictingRobotInspectionArea && selectedRobot?.currentInspectionAreaId && (
-                <ConflictingRobotInspectionAreaDialog
-                    closeDialog={closeDialog}
-                    robotInspectionAreaId={selectedRobot?.currentInspectionAreaId}
-                    desiredInspectionAreaName={unikMissionInspectionAreaNames![0]}
+                    missionInspectionAreaNames={uniqueMissionInspectionAreaNames}
                 />
             )}
-            {dialogToOpen === DialogTypes.unknownNewInspectionArea && (
+            {dialogType === InspectionAreaDialogType.conflictingRobotInspectionArea &&
+                robot?.currentInspectionAreaId && (
+                    <ConflictingRobotInspectionAreaDialog
+                        closeDialog={closeDialog}
+                        robotInspectionAreaId={robot.currentInspectionAreaId}
+                        desiredInspectionAreaName={uniqueMissionInspectionAreaNames[0]}
+                    />
+                )}
+            {dialogType === InspectionAreaDialogType.unknownNewInspectionArea && (
                 <UnknownInspectionAreaDialog closeDialog={closeDialog} />
             )}
         </>

frontend/src/components/Displays/InspectionAreaVerificationDialogs/getInspectionAreaDialogType.ts

@@ -0,0 +1,35 @@
+import { InspectionArea } from 'models/InspectionArea'
+import { RobotWithoutTelemetry } from 'models/Robot'
+
+export enum InspectionAreaDialogType {
+    unknownNewInspectionArea,
+    conflictingMissionInspectionAreas,
+    conflictingRobotInspectionArea,
+    unknown,
+}
+
+export const getUniqueInspectionAreas = (inspectionAreas: InspectionArea[]): InspectionArea[] =>
+    inspectionAreas.filter((area, index, self) => self.findIndex((i) => i.id === area.id) === index)
+
+/**
+ * Decides which inspection-area verification dialog (if any) must be shown before a
+ * mission can be scheduled. Returns null when scheduling can proceed directly.
+ *
+ * Kept as a pure function so the decision happens in the click handler rather than in a
+ * render effect, which avoids duplicate scheduling requests under React StrictMode.
+ */
+export const getInspectionAreaDialogType = (
+    robot: RobotWithoutTelemetry | undefined,
+    missionInspectionAreas: InspectionArea[]
+): InspectionAreaDialogType | null => {
+    if (!robot) return InspectionAreaDialogType.unknown
+
+    const uniqueInspectionAreas = getUniqueInspectionAreas(missionInspectionAreas)
+
+    if (uniqueInspectionAreas.length > 1) return InspectionAreaDialogType.conflictingMissionInspectionAreas
+    if (uniqueInspectionAreas.length === 0) return InspectionAreaDialogType.unknownNewInspectionArea
+    if (robot.currentInspectionAreaId && uniqueInspectionAreas[0]?.id !== robot.currentInspectionAreaId)
+        return InspectionAreaDialogType.conflictingRobotInspectionArea
+
+    return null
+}

frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx

@@ -9,8 +9,13 @@ import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'compon
 import { Mission } from 'models/Mission'
 import { AlertCategory } from 'components/Alerts/AlertsBanner'
 import { ScheduleMissionWithInspectionAreaVerification } from '../InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification'
+import {
+    getInspectionAreaDialogType,
+    InspectionAreaDialogType,
+} from '../InspectionAreaVerificationDialogs/getInspectionAreaDialogType'
 import { useBackendApi } from 'api/UseBackendApi'
 import { InstallationContext } from 'components/Contexts/InstallationContext'
+import { useAssetContext } from 'components/Contexts/AssetContext'
 
 const Centered = styled.div`
     display: flex;
@@ -37,12 +42,15 @@ enum ReRunOptions {
 export const MissionRestartButton = ({ mission, hasFailedTasks, smallButton }: MissionProps) => {
     const { TranslateText } = useLanguageContext()
     const { installation } = useContext(InstallationContext)
+    const { enabledRobots } = useAssetContext()
     const { setAlert, setListAlert } = useAlertContext()
     const [isOpen, setIsOpen] = useState<boolean>(false)
     const [isLocationVerificationOpen, setIsLocationVerificationOpen] = useState<boolean>(false)
-    const [selectedRerunOption, setSelectedRerunOption] = useState<ReRunOptions>()
+    const [verificationDialogType, setVerificationDialogType] = useState<InspectionAreaDialogType | null>(null)
     const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
 
+    const liveRobot = enabledRobots.find((robot) => robot.id === mission.robot.id)
+
     const navigate = useNavigate()
     const navigateToHome = () => {
         const path = `/${installation.installationCode}`
@@ -70,7 +78,14 @@ export const MissionRestartButton = ({ mission, hasFailedTasks, smallButton }: M
     }
 
     const selectRerunOption = (rerunOption: ReRunOptions) => {
-        setSelectedRerunOption(rerunOption)
+        const dialogType = getInspectionAreaDialogType(liveRobot, [mission.inspectionArea])
+
+        if (dialogType === null) {
+            startReRun(rerunOption)
+            return
+        }
+
+        setVerificationDialogType(dialogType)
         setIsLocationVerificationOpen(true)
     }
 
@@ -116,11 +131,11 @@ export const MissionRestartButton = ({ mission, hasFailedTasks, smallButton }: M
                     )}
                 </Menu>
             </EdsProvider>
-            {isLocationVerificationOpen && (
+            {isLocationVerificationOpen && verificationDialogType !== null && (
                 <ScheduleMissionWithInspectionAreaVerification
-                    scheduleMissions={() => startReRun(selectedRerunOption!)}
+                    dialogType={verificationDialogType}
                     closeDialog={() => setIsLocationVerificationOpen(false)}
-                    robotId={mission.robot.id}
+                    robot={liveRobot}
                     missionInspectionAreas={[mission.inspectionArea]}
                 />
             )}

frontend/src/pages/InspectionPage/ScheduleMissionDialogs.tsx

@@ -12,6 +12,10 @@ import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'compon
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { AlertCategory } from 'components/Alerts/AlertsBanner'
 import { ScheduleMissionWithInspectionAreaVerification } from 'components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification'
+import {
+    getInspectionAreaDialogType,
+    InspectionAreaDialogType,
+} from 'components/Displays/InspectionAreaVerificationDialogs/getInspectionAreaDialogType'
 import { phone_width } from 'utils/constants'
 import { useBackendApi } from 'api/UseBackendApi'
 
@@ -61,6 +65,7 @@ export const ScheduleMissionDialog = (props: IProps) => {
     const { setLoadingRobotMissionSet } = useMissionsContext()
     const { setAlert, setListAlert } = useAlertContext()
     const [isInspectionAreaVerificationDialogOpen, setIsInspectionAreaVerificationDialogOpen] = useState<boolean>(false)
+    const [verificationDialogType, setVerificationDialogType] = useState<InspectionAreaDialogType | null>(null)
     const [missionsToSchedule, setMissionsToSchedule] = useState<MissionDefinition[]>()
     const backendApi = useBackendApi()
     const filteredRobots = enabledRobots.filter(
@@ -82,16 +87,27 @@ export const ScheduleMissionDialog = (props: IProps) => {
     const onScheduleButtonPress = (missions: MissionDefinition[]) => () => {
         if (!selectedRobot) return
 
+        const dialogType = getInspectionAreaDialogType(
+            selectedRobot,
+            missions.map((mission) => mission.inspectionArea)
+        )
+
+        if (dialogType === null) {
+            scheduleMissions(missions)
+            return
+        }
+
         setMissionsToSchedule(missions)
+        setVerificationDialogType(dialogType)
         setIsInspectionAreaVerificationDialogOpen(true)
     }
 
-    const scheduleMissions = () => {
+    const scheduleMissions = (missions: MissionDefinition[]) => {
         setIsInspectionAreaVerificationDialogOpen(false)
 
-        if (!selectedRobot || !missionsToSchedule) return
+        if (!selectedRobot) return
 
-        missionsToSchedule.forEach((mission) => {
+        missions.forEach((mission) => {
             backendApi.scheduleMissionDefinition(mission.id, selectedRobot.id).catch((e) => {
                 setAlert(
                     AlertType.RequestFail,
@@ -193,12 +209,12 @@ export const ScheduleMissionDialog = (props: IProps) => {
                     </StyledDialogContent>
                 </StyledDialog>
             </StyledMissionDialog>
-            {isInspectionAreaVerificationDialogOpen && (
+            {isInspectionAreaVerificationDialogOpen && verificationDialogType !== null && (
                 <ScheduleMissionWithInspectionAreaVerification
-                    scheduleMissions={scheduleMissions}
+                    dialogType={verificationDialogType}
                     closeDialog={closeScheduleDialogs}
-                    robotId={selectedRobot!.id}
-                    missionInspectionAreas={props.selectedMissions.map((mission) => mission.inspectionArea)}
+                    robot={selectedRobot}
+                    missionInspectionAreas={missionsToSchedule?.map((mission) => mission.inspectionArea) ?? []}
                 />
             )}
         </>