Add motor test warning modal

gcs/src/components/config/motorTest.jsx

@@ -7,7 +7,7 @@
 import { useEffect, useState } from "react"
 
 // 3rd Party Imports
-import { Button, NumberInput } from "@mantine/core"
+import { Button, Modal, NumberInput } from "@mantine/core"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -18,11 +18,8 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 import { MOTOR_LETTER_LABELS } from "../../helpers/mavlinkConstants"
 
 // Redux
+
 import { useDispatch, useSelector } from "react-redux"
-import {
-  emitSetState,
-  selectConnectedToDrone,
-} from "../../redux/slices/droneConnectionSlice"
 import {
   emitGetFrameConfig,
   emitTestAllMotors,
@@ -33,7 +30,13 @@ import {
   selectFrameTypeName,
   selectFrameTypeOrder,
   selectNumberOfMotors,
+  selectShowMotorTestWarningModal,
+  setShowMotorTestWarningModal,
 } from "../../redux/slices/configSlice"
+import {
+  emitSetState,
+  selectConnectedToDrone,
+} from "../../redux/slices/droneConnectionSlice"
 
 export default function MotorTestPanel() {
   const dispatch = useDispatch()
@@ -43,6 +46,7 @@ export default function MotorTestPanel() {
   const frameTypename = useSelector(selectFrameTypeName)
   const frameClass = useSelector(selectFrameClass)
   const numberOfMotors = useSelector(selectNumberOfMotors)
+  const showMotorTestWarningModal = useSelector(selectShowMotorTestWarningModal)
 
   const [selectedThrottle, setSelectedThrottle] = useState(10)
   const [selectedDuration, setSelectedDuration] = useState(2)
@@ -90,6 +94,37 @@ export default function MotorTestPanel() {
 
   return (
     <div className="flex flex-row gap-16 px-4">
+      <Modal
+        opened={showMotorTestWarningModal}
+        onClose={() => dispatch(setShowMotorTestWarningModal(false))}
+        closeOnClickOutside={false}
+        closeOnEscape={false}
+        withCloseButton={false}
+        centered
+        overlayProps={{
+          backgroundOpacity: 0.55,
+          blur: 3,
+        }}
+      >
+        <div className="flex flex-col items-start justify-center gap-4">
+          <p>
+            Ensure all propellers are removed and the drone is secured before
+            testing the motors.
+          </p>
+          <p className="font-bold text-falconred-600">
+            Improper testing can lead to injury or damage.
+          </p>
+
+          <div className="mx-auto">
+            <Button
+              color={tailwindColors.green[600]}
+              onClick={() => dispatch(setShowMotorTestWarningModal(false))}
+            >
+              Continue
+            </Button>
+          </div>
+        </div>
+      </Modal>
       <div className="flex flex-col gap-2">
         {/* Input throttle and duration/delay of the test*/}
         <div className="flex gap-2">

gcs/src/redux/middleware/socketMiddleware.js

@@ -43,6 +43,7 @@ import {
   setNumberOfMotors,
   setRadioChannels,
   setRefreshingFlightModeData,
+  setShowMotorTestWarningModal,
 } from "../slices/configSlice.js"
 import {
   setAttitudeData,
@@ -303,6 +304,7 @@ const socketMiddleware = (store) => {
           store.dispatch(setRebootData({}))
           store.dispatch(setAutoPilotRebootModalOpen(false))
           store.dispatch(setShouldFetchAllMissionsOnDashboard(true))
+          store.dispatch(setShowMotorTestWarningModal(true))
         })
 
         // Link stats

gcs/src/redux/slices/configSlice.js

@@ -20,6 +20,7 @@ const configSlice = createSlice({
     frameTypeName: null,
     frameClass: null,
     numberOfMotors: 4,
+    showMotorTestWarningModal: true,
     radioChannels: {
       1: 0,
       2: 0,
@@ -81,6 +82,10 @@ const configSlice = createSlice({
       if (action.payload === state.numberOfMotors) return
       state.numberOfMotors = action.payload
     },
+    setShowMotorTestWarningModal: (state, action) => {
+      if (action.payload === state.showMotorTestWarningModal) return
+      state.showMotorTestWarningModal = action.payload
+    },
     setRadioChannels: (state, action) => {
       if (action.payload === state.radioChannels) return
       state.radioChannels = action.payload
@@ -113,6 +118,7 @@ const configSlice = createSlice({
     selectFrameTypeName: (state) => state.frameTypeName,
     selectFrameClass: (state) => state.frameClass,
     selectNumberOfMotors: (state) => state.numberOfMotors,
+    selectShowMotorTestWarningModal: (state) => state.showMotorTestWarningModal,
     selectRadioChannels: (state) => state.radioChannels,
     selectRadioChannelsConfig: (state) => state.radioChannelsConfig,
   },
@@ -129,6 +135,7 @@ export const {
   setFrameTypeName,
   setFrameClass,
   setNumberOfMotors,
+  setShowMotorTestWarningModal,
   setRadioChannels,
   setChannelsConfig,
 
@@ -156,6 +163,7 @@ export const {
   selectFrameTypeName,
   selectFrameClass,
   selectNumberOfMotors,
+  selectShowMotorTestWarningModal,
   selectRadioChannels,
   selectRadioChannelsConfig,
 } = configSlice.selectors