Clear All Data Button [AARD-2059]

fission/src/ui/modals/common/ConfirmModal.tsx

@@ -0,0 +1,41 @@
+import { Stack, Typography } from "@mui/material"
+import type React from "react"
+import { useEffect } from "react"
+import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
+import type { ModalImplProps } from "@/ui/components/Modal"
+
+export type ConfirmModalCustomProps = {
+    message: string
+}
+
+const ConfirmModal: React.FC<ModalImplProps<void, ConfirmModalCustomProps>> = ({ modal }) => {
+    const { configureScreen } = useUIContext()
+
+    useEffect(() => {
+        if (!modal) return
+        configureScreen(
+            modal,
+            {
+                title: modal.props.title ?? "Confirm",
+                acceptText: modal.props.acceptText ?? "Confirm",
+                cancelText: modal.props.cancelText ?? "Cancel",
+                hideAccept: false,
+                hideCancel: false,
+                allowClickAway: modal.props.allowClickAway ?? true,
+            },
+            {}
+        )
+    }, [modal, configureScreen])
+
+    if (!modal) return null
+
+    const { message } = modal.props.custom
+
+    return (
+        <Stack component="div" gap={1} sx={{ minWidth: 320, maxWidth: 500 }}>
+            <Typography sx={{ userSelect: "none" }}>{message}</Typography>
+        </Stack>
+    )
+}
+
+export default ConfirmModal

fission/src/ui/panels/DebugPanel.tsx

@@ -16,6 +16,7 @@ import type { PanelImplProps } from "../components/Panel"
 import { useUIContext } from "../helpers/UIProviderHelpers"
 import PokerPanel from "./PokerPanel"
 import WsViewPanel from "./WsViewPanel"
+import ConfirmModal from "@/ui/modals/common/ConfirmModal"
 
 function toggleDragMode() {
     const dragSystem = World.dragModeSystem
@@ -27,11 +28,11 @@ function toggleDragMode() {
 }
 
 const DebugPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
-    const { openPanel, configureScreen } = useUIContext()
+    const { openPanel, openModal, configureScreen } = useUIContext()
 
     useEffect(() => {
         configureScreen(panel!, { title: "Debug Tools", hideAccept: true, cancelText: "Close" }, {})
-    }, [])
+    }, [configureScreen, panel])
 
     return (
         <Box
@@ -70,6 +71,42 @@ const DebugPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
                 <Button onClick={() => PreferencesSystem.clearPreferences()} className="w-full">
                     Clear Preferences
                 </Button>
+                <Button
+                    onClick={() => {
+                        openModal(
+                            ConfirmModal,
+                            {
+                                message:
+                                    "Are you sure you want to clear all preferences and cached data? This cannot be undone.",
+                            },
+                            panel,
+                            {
+                                title: "Clear All Data",
+                                acceptText: "Clear & Reload",
+                                cancelText: "Cancel",
+                                onAccept: async () => {
+                                    window.localStorage.clear()
+                                    sessionStorage.clear()
+                                    await navigator.storage
+                                        .getDirectory()
+                                        .then(async root => {
+                                            for await (const key of root.keys()) {
+                                                await root.removeEntry(key, { recursive: true })
+                                            }
+                                        })
+                                        .catch(() => {
+                                            console.warn("couldn't empty opfs")
+                                        })
+                                    window.location.reload()
+                                    console.log("All data cleared")
+                                },
+                            }
+                        )
+                    }}
+                    className="w-full"
+                >
+                    Clear All Data
+                </Button>
 
                 <Label size="sm">Autodesk Platform Services</Label>
                 <Button