diff --git a/frontend/src/components/Displays/MissionButtons/MissionControlButtons.tsx b/frontend/src/components/Displays/MissionButtons/MissionControlButtons.tsx index 4c51e709f..a295fd240 100644 --- a/frontend/src/components/Displays/MissionButtons/MissionControlButtons.tsx +++ b/frontend/src/components/Displays/MissionButtons/MissionControlButtons.tsx @@ -8,6 +8,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext' import { useMissionControlContext } from 'components/Contexts/MissionControlContext' import { StopMissionDialog, MissionStatusRequest } from 'components/Pages/FrontPage/MissionOverview/StopDialogs' import { TaskType } from 'models/Task' +import { useState } from 'react' interface MissionControlButtonsProps { missionName: string @@ -70,12 +71,29 @@ export const MissionControlButtons = ({ const OngoingMissionButton = ({ missionName, robotId, missionTaskType }: MissionProps) => { const { TranslateText } = useLanguageContext() const { updateRobotMissionState } = useMissionControlContext() + const [isDialogOpen, setIsDialogOpen] = useState(false) + const toggleStopMissionDialog = () => { + setIsDialogOpen(!isDialogOpen) + } return ( <> - + {TranslateText('Stop')} @@ -99,12 +117,29 @@ const OngoingMissionButton = ({ missionName, robotId, missionTaskType }: Mission const PausedMissionButton = ({ missionName, robotId, missionTaskType }: MissionProps) => { const { TranslateText } = useLanguageContext() const { updateRobotMissionState } = useMissionControlContext() + const [isDialogOpen, setIsDialogOpen] = useState(false) + const toggleStopMissionDialog = () => { + setIsDialogOpen(!isDialogOpen) + } return ( <> - + {TranslateText('Stop')} diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx index f68ddbd17..3d1ce9c99 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx @@ -1,9 +1,7 @@ -import { Button, Dialog, Typography, Icon } from '@equinor/eds-core-react' +import { Button, Dialog, Typography } from '@equinor/eds-core-react' import styled from 'styled-components' import { useLanguageContext } from 'components/Contexts/LanguageContext' -import { Icons } from 'utils/icons' import { useState } from 'react' -import { tokens } from '@equinor/eds-tokens' import { useMissionControlContext } from 'components/Contexts/MissionControlContext' import { BackendAPICaller } from 'api/ApiCaller' import { useInstallationContext } from 'components/Contexts/InstallationContext' @@ -40,7 +38,7 @@ const ContainButton = styled.div` ` interface MissionProps { - missionName: string + missionName?: string robotId: string missionTaskType: TaskType | undefined } @@ -99,48 +97,44 @@ const DialogContent = ({ missionTaskType }: { missionTaskType: TaskType | undefi } } -export const StopMissionDialog = ({ missionName, robotId, missionTaskType }: MissionProps): JSX.Element => { +export const StopMissionDialog = ({ + missionName, + robotId, + missionTaskType, + isStopMissionDialogOpen, + toggleDialog, +}: MissionProps & { isStopMissionDialogOpen: boolean; toggleDialog: () => void }): JSX.Element => { const { TranslateText } = useLanguageContext() - const [isStopMissionDialogOpen, setIsStopMissionDialogOpen] = useState(false) const { updateRobotMissionState } = useMissionControlContext() return ( - <> - - - - - - - {TranslateText('Stop mission')} '{missionName}'?{' '} - - - - - - - - - - - - - - + + + + + {missionName ? TranslateText('Stop mission:') : TranslateText('No mission running')}{' '} + {missionName && missionName} + + + + + + + + + + + + + ) }