Add Confirmation Before Dev Tool Removal and Modification [AARD-2033]

fission/src/systems/preferences/PreferenceTypes.ts

@@ -147,26 +147,26 @@ export type Alliance = "red" | "blue"
 
 export type Station = 1 | 2 | 3
 
-export type ScoringZonePreferences = {
+/**
+ * Base properties shared by all zone types
+ */
+export type BaseZonePreferences = {
     name: string
     alliance: Alliance
     parentNode: string | undefined
+    deltaTransformation: number[]
+}
+
+export type ScoringZonePreferences = BaseZonePreferences & {
     points: number
     destroyGamepiece: boolean
     persistentPoints: boolean
-
-    deltaTransformation: number[]
 }
 
-export type ProtectedZonePreferences = {
-    name: string
-    alliance: Alliance
+export type ProtectedZonePreferences = BaseZonePreferences & {
     penaltyPoints: number
-    parentNode: string | undefined
     contactType: ContactType
     activeDuring: MatchModeType[]
-
-    deltaTransformation: number[]
 }
 
 export type SpawnLocation = Readonly<{

fission/src/ui/modals/DevtoolZoneModificationModal.tsx

@@ -0,0 +1,95 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from "@mui/material"
+import type React from "react"
+import { useState } from "react"
+import { globalAddToast } from "../components/GlobalUIControls"
+
+interface DevtoolZoneModificationModalProps {
+    isOpen: boolean
+    onClose: () => void
+    zoneType: "scoring" | "protected"
+    zoneName: string
+    onTemporaryModification: () => void
+    onPermanentModification: () => void
+}
+
+const DevtoolZoneModificationModal: React.FC<DevtoolZoneModificationModalProps> = ({
+    isOpen,
+    onClose,
+    zoneType,
+    zoneName,
+    onTemporaryModification,
+    onPermanentModification,
+}) => {
+    const [isModifying, setIsModifying] = useState(false)
+
+    const handleTemporaryModification = () => {
+        onTemporaryModification()
+        onClose()
+    }
+
+    const handlePermanentModification = async () => {
+        setIsModifying(true)
+        try {
+            await onPermanentModification()
+            globalAddToast?.(
+                "info",
+                "Zone Modified",
+                `${zoneName} has been permanently modified in the field file.`
+            )
+        } catch (error) {
+            globalAddToast?.(
+                "error",
+                "Modification Failed",
+                "Failed to permanently modify zone in the field file cache."
+            )
+            console.error("Failed to modify zone in field file:", error)
+        } finally {
+            setIsModifying(false)
+            onClose()
+        }
+    }
+
+    return (
+        <Dialog open={isOpen} onClose={onClose} maxWidth="sm" fullWidth>
+            <DialogTitle>
+                Modify {zoneType === "scoring" ? "Scoring" : "Protected"} Zone
+            </DialogTitle>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Typography variant="body1">
+                        The {zoneType} zone "{zoneName}" was defined in the field file and is cached.
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                        Choose how you'd like to save your modifications:
+                    </Typography>
+                    <Stack spacing={1}>
+                        <Typography variant="body2">
+                            <strong>Temporary modification:</strong> Save changes until next field reload. Original zone will reappear when you refresh the page.
+                        </Typography>
+                        <Typography variant="body2">
+                            <strong>Permanent modification:</strong> Save changes to the local asset file. This will persist your modifications until you remove it from the cache.
+                        </Typography>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} disabled={isModifying}>
+                    Cancel
+                </Button>
+                <Button onClick={handleTemporaryModification} disabled={isModifying} variant="outlined" color="warning">
+                    Temporary Modification
+                </Button>
+                <Button
+                    onClick={handlePermanentModification}
+                    disabled={isModifying}
+                    variant="contained"
+                    color="primary"
+                >
+                    {isModifying ? "Modifying..." : "Permanent Modification"}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+export default DevtoolZoneModificationModal

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ManageScoringZonesInterface.tsx

@@ -9,7 +9,7 @@ import World from "@/systems/World"
 import Label from "@/ui/components/Label"
 import ScrollView from "@/ui/components/ScrollView"
 import { AddButton, DeleteButton, EditButton } from "@/ui/components/StyledComponents"
-import DevtoolZoneRemovalModal from "@/ui/modals/DevtoolZoneRemovalModal"
+import DevtoolZoneModificationModal from "@/ui/modals/DevtoolZoneModificationModal"
 import { isZoneFromDevtools, removeZoneFromDevtools } from "@/util/DevtoolZoneUtils"
 
 const saveZones = (zones: ScoringZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
@@ -176,13 +176,13 @@ const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, init
                 selectZone(newZone)
             })}
 
-            <DevtoolZoneRemovalModal
+            <DevtoolZoneModificationModal
                 isOpen={confirmationModal.isOpen}
                 onClose={handleCloseConfirmation}
                 zoneType="scoring"
                 zoneName={confirmationModal.zone?.name ?? ""}
-                onTemporaryRemoval={handleTemporaryRemoval}
-                onPermanentRemoval={handlePermanentRemoval}
+                onTemporaryModification={handleTemporaryRemoval}
+                onPermanentModification={handlePermanentRemoval}
             />
         </>
     )

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ScoringZoneConfigInterface.tsx

@@ -16,7 +16,7 @@ import SelectButton from "@/ui/components/SelectButton"
 import TransformGizmoControl from "@/ui/components/TransformGizmoControl"
 import type { Panel } from "@/ui/helpers/UIProviderHelpers"
 import { CloseType, useUIContext } from "@/ui/helpers/UIProviderHelpers"
-import DevtoolZoneRemovalModal from "@/ui/modals/DevtoolZoneRemovalModal"
+import DevtoolZoneModificationModal from "@/ui/modals/DevtoolZoneModificationModal"
 import { isZoneFromDevtools, modifyZoneInDevtools } from "@/util/DevtoolZoneUtils"
 import {
     convertArrayToThreeMatrix4,
@@ -380,14 +380,13 @@ const ZoneConfigInterface: React.FC<ZoneConfigProps> = ({ selectedField, selecte
 
             {gizmoComponent}
 
-            <DevtoolZoneRemovalModal
+            <DevtoolZoneModificationModal
                 isOpen={confirmationModal.isOpen}
                 onClose={handleCloseConfirmation}
                 zoneType="scoring"
                 zoneName={selectedZone.name}
-                onTemporaryRemoval={handleTemporaryModification}
-                onPermanentRemoval={handlePermanentModification}
-                actionType="modification"
+                onTemporaryModification={handleTemporaryModification}
+                onPermanentModification={handlePermanentModification}
             />
 
             {/** Custom Save/Cancel buttons that replace the panel's default buttons */}