From 52cf4fcba9b57cfd33469079cc4ba2a17d02af32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Fadum?= <hf@equinor.com>
Date: Tue, 19 Nov 2024 15:59:17 +0100
Subject: [PATCH] Implement unconditional stop button for robots

---
 .../FrontPage/RobotCards/RobotStatusCard.tsx  | 45 ++++++++++++++++++-
 .../RobotCards/RobotStatusSection.tsx         |  1 +
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
index 28bea1187..2c98c6ed1 100644
--- a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
+++ b/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,10 +11,14 @@ 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
     mission: Mission | undefined
+    missionTaskType: TaskType | undefined
 }
 
 const StyledCard = styled(Card)`
@@ -78,13 +82,34 @@ const LongTypography = styled(Typography)`
     }
 `
 
-export const RobotStatusCard = ({ robot, mission }: RobotProps) => {
+const StyledButton = styled(Button)`
+    height: auto;
+    min-height: ${tokens.shape.button.minHeight};
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    width: 100%;
+
+    #buttoncard:hover {
+        background-color: ${tokens.colors.infographic.primary__energy_red_100.hex};
+    }
+
+    :hover + #buttoncard {
+        background-color: ${tokens.colors.infographic.primary__energy_red_100.hex};
+    }
+`
+
+export const RobotStatusCard = ({ robot, mission, missionTaskType }: 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'
@@ -143,6 +168,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={undefined}
+                        isStopMissionDialogOpen={isDialogOpen}
+                        toggleDialog={toggleStopMissionDialog}
+                    />
+                </StyledButton>
             </ButtonCard>
         </HoverableStyledCard>
     )
diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx
index 928a20fca..34d8821ae 100644
--- a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx
+++ b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx
@@ -36,6 +36,7 @@ export const RobotStatusSection = () => {
             key={robot.id}
             robot={robot}
             mission={ongoingMissions.find((mission) => mission.robot.id === robot.id)}
+            missionTaskType={undefined}
         />
     ))