Add stop robot specific stop button

frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Typography } from '@equinor/eds-core-react'
+import { Button, Card, Typography } from '@equinor/eds-core-react'
 import { Robot, RobotStatus } from 'models/Robot'
 import { tokens } from '@equinor/eds-tokens'
 import { RobotStatusChip } from 'components/Displays/RobotDisplays/RobotStatusIcon'
@@ -11,6 +11,9 @@ import { PressureStatusDisplay } from 'components/Displays/RobotDisplays/Pressur
 import { config } from 'config'
 import { RobotType } from 'models/RobotModel'
 import { Mission } from 'models/Mission'
+import { StopMissionDialog } from '../MissionOverview/StopDialogs'
+import { useState } from 'react'
+import { TaskType } from 'models/Task'
 
 interface RobotProps {
     robot: Robot
@@ -78,19 +81,35 @@ const LongTypography = styled(Typography)`
     }
 `
 
+const StyledButton = styled(Button)`
+    height: auto;
+    min-height: ${tokens.shape.button.minHeight};
+    margin-top: 10px;
+    width: 100%;
+`
+
 export const RobotStatusCard = ({ robot, mission }: RobotProps) => {
     let navigate = useNavigate()
     const { TranslateText } = useLanguageContext()
     const goToRobot = () => {
         const path = `${config.FRONTEND_BASE_ROUTE}/robot/${robot.id}`
         navigate(path)
     }
+    const [isDialogOpen, setIsDialogOpen] = useState(false)
+    const toggleStopMissionDialog = () => {
+        setIsDialogOpen(!isDialogOpen)
+    }
 
     const getRobotModel = (type: RobotType) => {
         if (type === RobotType.TaurobInspector || type === RobotType.TaurobOperator) return 'Taurob'
         return type
     }
 
+    let missionTaskType = undefined
+    if (mission?.tasks.every((task) => task.type === TaskType.Inspection)) missionTaskType = TaskType.Inspection
+    if (mission?.tasks.every((task) => task.type === TaskType.ReturnHome)) missionTaskType = TaskType.ReturnHome
+    if (mission?.tasks.every((task) => task.type === TaskType.Localization)) missionTaskType = TaskType.Localization
+
     return (
         <HoverableStyledCard style={{ boxShadow: tokens.elevation.raised }} onClick={goToRobot}>
             <RobotImage robotType={robot.model.type} height="180px" />
@@ -143,6 +162,22 @@ export const RobotStatusCard = ({ robot, mission }: RobotProps) => {
                         <></>
                     )}
                 </HorizontalContent>
+                <StyledButton
+                    variant="contained"
+                    onClick={(event) => {
+                        event.stopPropagation()
+                        toggleStopMissionDialog()
+                    }}
+                >
+                    {TranslateText('Stop')} {robot.name}
+                    <StopMissionDialog
+                        missionName={mission?.name}
+                        robotId={robot.id}
+                        missionTaskType={missionTaskType}
+                        isStopMissionDialogOpen={isDialogOpen}
+                        toggleDialog={toggleStopMissionDialog}
+                    />
+                </StyledButton>
             </ButtonCard>
         </HoverableStyledCard>
     )