#9250 Delete action for unsaved Mods (#9255)

* remove onDeactivate prop drill

* remove onSave prop drill

* remove addStarterBrick prop drill

* remove onClearChanges prop drill

* remove onMakeCopy prop drill

* move isDirty into ModActionMenu

* remove isActive prop

* remove ModListItemProps type

* add delete action and modal for unsaved mods

* add comment to useDeactivateMod

* add faTrash icon for unsaved mods

* remove TODO comment

src/pageEditor/hooks/useDeactivateMod.tsx

@@ -19,6 +19,7 @@ import { useCallback } from "react";
 import { type RegistryId } from "@/types/registryTypes";
 import {
   DEACTIVATE_MOD_MODAL_PROPS,
+  DELETE_UNSAVED_MOD_MODAL_PROPS,
   useRemoveModComponentFromStorage,
 } from "@/pageEditor/hooks/useRemoveModComponentFromStorage";
 import { useDispatch, useSelector } from "react-redux";
@@ -29,14 +30,16 @@ import { useModals } from "@/components/ConfirmationModal";
 import { actions } from "@/pageEditor/store/editor/editorSlice";
 import { getModComponentId } from "@/pageEditor/utils";
 import { clearLog } from "@/background/messenger/api";
+import { isInnerDefinitionRegistryId } from "@/types/helpers";
 
 type Config = {
   modId: RegistryId;
   shouldShowConfirmation?: boolean;
 };
 
 /**
- * This hook provides a callback function to deactivate a mod and remove it from the Page Editor
+ * This hook provides a callback function to deactivate a mod and remove it from the Page Editor. Note that in the case
+ * of unsaved mods, the mod will be deleted instead of deactivated.
  */
 function useDeactivateMod(): (useDeactivateConfig: Config) => Promise<void> {
   const dispatch = useDispatch();
@@ -48,7 +51,12 @@ function useDeactivateMod(): (useDeactivateConfig: Config) => Promise<void> {
   return useCallback(
     async ({ modId, shouldShowConfirmation = true }) => {
       if (shouldShowConfirmation) {
-        const confirmed = await showConfirmation(DEACTIVATE_MOD_MODAL_PROPS);
+        const isUnsavedMod = isInnerDefinitionRegistryId(modId);
+        const confirmed = await showConfirmation(
+          isUnsavedMod
+            ? DELETE_UNSAVED_MOD_MODAL_PROPS
+            : DEACTIVATE_MOD_MODAL_PROPS,
+        );
 
         if (!confirmed) {
           return;

src/pageEditor/hooks/useRemoveModComponentFromStorage.tsx

@@ -59,6 +59,17 @@ export const DEACTIVATE_MOD_MODAL_PROPS: ConfirmationModalProps = {
   submitCaption: "Deactivate",
 };
 
+export const DELETE_UNSAVED_MOD_MODAL_PROPS: ConfirmationModalProps = {
+  title: "Delete Mod?",
+  message: (
+    <>
+      This action cannot be undone. If you&apos;d like to deactivate this mod
+      instead, save the mod first.
+    </>
+  ),
+  submitCaption: "Delete",
+};
+
 /**
  * Returns a callback that removes a mod component from the Page Editor and Mod Component Storage.
  *

src/pageEditor/modListingPanel/ModActionMenu.tsx

@@ -22,6 +22,7 @@ import {
   faHistory,
   faPlus,
   faTimes,
+  faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./ActionMenu.module.scss";
@@ -91,8 +92,10 @@ const ModActionMenu: React.FC<{
       },
     },
     {
-      title: "Deactivate",
-      icon: <FontAwesomeIcon icon={faTimes} fixedWidth />,
+      title: isUnsavedMod ? "Delete" : "Deactivate",
+      icon: (
+        <FontAwesomeIcon icon={isUnsavedMod ? faTrash : faTimes} fixedWidth />
+      ),
       async action() {
         await deactivateMod({ modId });
       },