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

fission/src/ui/modals/DevtoolZoneRemovalModal.tsx

@@ -0,0 +1,82 @@
+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 DevtoolZoneRemovalModalProps {
+    isOpen: boolean
+    onClose: () => void
+    zoneType: "scoring" | "protected"
+    zoneName: string
+    onTemporaryRemoval: () => void
+    onPermanentRemoval: () => void
+}
+
+const DevtoolZoneRemovalModal: React.FC<DevtoolZoneRemovalModalProps> = ({
+    isOpen,
+    onClose,
+    zoneType,
+    zoneName,
+    onTemporaryRemoval,
+    onPermanentRemoval,
+}) => {
+    const [isRemoving, setIsRemoving] = useState(false)
+
+    const handleTemporaryRemoval = () => {
+        onTemporaryRemoval()
+        onClose()
+    }
+
+    const handlePermanentRemoval = async () => {
+        setIsRemoving(true)
+        try {
+            await onPermanentRemoval()
+            globalAddToast?.("info", "Zone Removed", `${zoneName} has been permanently removed from dev tools.`)
+        } catch (error) {
+            globalAddToast?.("error", "Removal Failed", "Failed to permanently remove zone from dev tools cache.")
+            console.error("Failed to remove zone from dev tools:", error)
+        } finally {
+            setIsRemoving(false)
+            onClose()
+        }
+    }
+
+    return (
+        <Dialog open={isOpen} onClose={onClose} maxWidth="sm" fullWidth>
+            <DialogTitle>Remove {zoneType === "scoring" ? "Scoring" : "Protected"} Zone</DialogTitle>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Typography variant="body1">
+                        The {zoneType} zone "{zoneName}" was placed using dev tools and is cached.
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                        Choose how you'd like to remove it:
+                    </Typography>
+                    <Stack spacing={1}>
+                        <Typography variant="body2">
+                            <strong>Temporary removal:</strong> Remove zone until next field reload. The zone will
+                            reappear when you refresh or reload the field.
+                        </Typography>
+                        <Typography variant="body2">
+                            <strong>Permanent removal:</strong> Remove zone from dev tools cache. This will prevent it
+                            from reappearing on future loads.
+                        </Typography>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} disabled={isRemoving}>
+                    Cancel
+                </Button>
+                <Button onClick={handleTemporaryRemoval} disabled={isRemoving} variant="outlined" color="warning">
+                    Temporary Removal
+                </Button>
+                <Button onClick={handlePermanentRemoval} disabled={isRemoving} variant="contained" color="error">
+                    {isRemoving ? "Removing..." : "Permanent Removal"}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+export default DevtoolZoneRemovalModal

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

@@ -9,6 +9,8 @@ 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 { isZoneFromDevtools, removeZoneFromDevtools } from "@/util/DevtoolZoneUtils"
 
 const saveZones = (zones: ScoringZonePreferences[] | undefined, field: MirabufSceneObject | undefined) => {
     if (!zones || !field) return
@@ -25,9 +27,18 @@ type ScoringZoneRowProps = {
     save: () => void
     deleteZone: () => void
     selectZone: (zone: ScoringZonePreferences) => void
+    onShowConfirmation: (zone: ScoringZonePreferences) => void
 }
 
-const ScoringZoneRow: React.FC<ScoringZoneRowProps> = ({ zone, save, deleteZone, selectZone }) => {
+const ScoringZoneRow: React.FC<ScoringZoneRowProps> = ({ zone, save, deleteZone, selectZone, onShowConfirmation }) => {
+    const handleDeleteClick = () => {
+        if (isZoneFromDevtools(zone, "scoring")) {
+            onShowConfirmation(zone)
+        } else {
+            deleteZone()
+        }
+    }
+
     return (
         <Stack justifyContent={"space-between"} alignItems={"center"} gap={"1rem"}>
             <Stack direction="row" gap={8}>
@@ -51,7 +62,7 @@ const ScoringZoneRow: React.FC<ScoringZoneRowProps> = ({ zone, save, deleteZone,
                 })}
 
                 {DeleteButton(() => {
-                    deleteZone()
+                    handleDeleteClick()
                 })}
             </Stack>
         </Stack>
@@ -66,6 +77,11 @@ interface ScoringZonesProps {
 
 const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, initialZones, selectZone }) => {
     const [zones, setZones] = useState<ScoringZonePreferences[]>(initialZones)
+    const [confirmationModal, setConfirmationModal] = useState<{
+        isOpen: boolean
+        zone: ScoringZonePreferences | null
+        zoneIndex: number
+    }>({ isOpen: false, zone: null, zoneIndex: -1 })
 
     const saveEvent = useCallback(() => {
         saveZones(zones, selectedField)
@@ -89,6 +105,31 @@ const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, init
         }
     }, [selectedField, zones])
 
+    const handleShowConfirmation = (zone: ScoringZonePreferences) => {
+        const zoneIndex = zones.indexOf(zone)
+        setConfirmationModal({ isOpen: true, zone, zoneIndex })
+    }
+
+    const handleTemporaryRemoval = () => {
+        if (confirmationModal.zoneIndex >= 0) {
+            const newZones = zones.filter((_, idx) => idx !== confirmationModal.zoneIndex)
+            setZones(newZones)
+            saveZones(newZones, selectedField)
+        }
+    }
+
+    const handlePermanentRemoval = async () => {
+        if (confirmationModal.zone) {
+            await removeZoneFromDevtools(confirmationModal.zone, "scoring")
+            const updatedZones = selectedField.fieldPreferences?.scoringZones ?? []
+            setZones(updatedZones)
+        }
+    }
+
+    const handleCloseConfirmation = () => {
+        setConfirmationModal({ isOpen: false, zone: null, zoneIndex: -1 })
+    }
+
     return (
         <>
             {zones?.length > 0 ? (
@@ -109,6 +150,7 @@ const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, init
                                     )
                                 }}
                                 selectZone={selectZone}
+                                onShowConfirmation={handleShowConfirmation}
                             />
                         ))}
                     </Stack>
@@ -133,6 +175,15 @@ const ManageZonesInterface: React.FC<ScoringZonesProps> = ({ selectedField, init
 
                 selectZone(newZone)
             })}
+
+            <DevtoolZoneRemovalModal
+                isOpen={confirmationModal.isOpen}
+                onClose={handleCloseConfirmation}
+                zoneType="scoring"
+                zoneName={confirmationModal.zone?.name ?? ""}
+                onTemporaryRemoval={handleTemporaryRemoval}
+                onPermanentRemoval={handlePermanentRemoval}
+            />
         </>
     )
 }

fission/src/util/DevtoolZoneUtils.ts

@@ -0,0 +1,117 @@
+import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
+import FieldMiraEditor from "@/mirabuf/FieldMiraEditor"
+import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
+import type { ScoringZonePreferences, ProtectedZonePreferences } from "@/systems/preferences/PreferenceTypes"
+import World from "@/systems/World"
+
+export type ZoneType = "scoring" | "protected"
+
+/**
+ * Checks if a zone was originally placed by dev tools by comparing it with the cached dev tool data.
+ */
+export function isZoneFromDevtools(
+    zone: ScoringZonePreferences | ProtectedZonePreferences,
+    zoneType: ZoneType
+): boolean {
+    const field = World.sceneRenderer.mirabufSceneObjects.getField()
+    if (!field) return false
+
+    const parts = field.mirabufInstance.parser.assembly.data?.parts
+    if (!parts) return false
+
+    const editor = new FieldMiraEditor(parts)
+
+    if (zoneType === "scoring") {
+        const devtoolZones = editor.getUserData("devtool:scoring_zones") as ScoringZonePreferences[] | undefined
+        if (!devtoolZones) return false
+
+        return devtoolZones.some(
+            devZone =>
+                devZone.name === zone.name &&
+                devZone.alliance === zone.alliance &&
+                devZone.parentNode === zone.parentNode &&
+                JSON.stringify(devZone.deltaTransformation) === JSON.stringify(zone.deltaTransformation)
+        )
+    } else {
+        // For protected zones, we'd need to add dev tool support first
+        // For now, return false as protected zones don't have dev tool support yet
+        return false
+    }
+}
+
+/**
+ * Removes a zone from dev tools cache permanently.
+ */
+export async function removeZoneFromDevtools(
+    zone: ScoringZonePreferences | ProtectedZonePreferences,
+    zoneType: ZoneType
+): Promise<void> {
+    const field = World.sceneRenderer.mirabufSceneObjects.getField()
+    if (!field) throw new Error("No field loaded")
+
+    const parts = field.mirabufInstance.parser.assembly.data?.parts
+    if (!parts) throw new Error("No field parts found")
+
+    const editor = new FieldMiraEditor(parts)
+
+    if (zoneType === "scoring") {
+        const devtoolZones = editor.getUserData("devtool:scoring_zones") as ScoringZonePreferences[] | undefined
+        if (!devtoolZones) return
+
+        // Remove the zone from dev tool data
+        const filteredZones = devtoolZones.filter(
+            devZone =>
+                !(
+                    devZone.name === zone.name &&
+                    devZone.alliance === zone.alliance &&
+                    devZone.parentNode === zone.parentNode &&
+                    JSON.stringify(devZone.deltaTransformation) === JSON.stringify(zone.deltaTransformation)
+                )
+        )
+
+        // Update the dev tool data
+        if (filteredZones.length === 0) {
+            editor.removeUserData("devtool:scoring_zones")
+        } else {
+            editor.setUserData("devtool:scoring_zones", filteredZones)
+        }
+
+        // Update field preferences to match the filtered dev tool data
+        if (field.fieldPreferences) {
+            field.fieldPreferences.scoringZones = filteredZones
+            PreferencesSystem.savePreferences?.()
+            field.updateScoringZones()
+        }
+
+        // Persist changes to cache
+        const assembly = field.mirabufInstance.parser.assembly
+        const cacheId = field.cacheId
+        if (cacheId) {
+            const success = await MirabufCachingService.persistDevtoolChanges(cacheId, MiraType.FIELD, assembly)
+            if (!success) {
+                throw new Error("Failed to persist changes to cache")
+            }
+        }
+    } else {
+        throw new Error("Protected zone dev tool removal not yet implemented")
+    }
+}
+
+/**
+ * Gets all zones that exist in dev tools for a given type.
+ */
+export function getDevtoolZones(zoneType: ZoneType): ScoringZonePreferences[] | ProtectedZonePreferences[] | undefined {
+    const field = World.sceneRenderer.mirabufSceneObjects.getField()
+    if (!field) return undefined
+
+    const parts = field.mirabufInstance.parser.assembly.data?.parts
+    if (!parts) return undefined
+
+    const editor = new FieldMiraEditor(parts)
+
+    if (zoneType === "scoring") {
+        return editor.getUserData("devtool:scoring_zones") as ScoringZonePreferences[] | undefined
+    } else {
+        return undefined
+    }
+}