fix: 🐛 undo redo & delete global Data

Author: AruSeito

apps/builder/src/middleware/undoRedo/method/components.tsx

@@ -4,6 +4,7 @@ import { REDUX_ACTION_FROM } from "@/middleware/undoRedo/interface"
 import { UpdateComponentContainerPayload } from "@/redux/currentApp/components/componentsPayload"
 import {
   getComponentMap,
+  getOriginalGlobalData,
   searchDSLByDisplayName,
   searchDSLFromTree,
 } from "@/redux/currentApp/components/componentsSelector"
@@ -47,7 +48,7 @@ export const componentsSnapShot = (
     case "deleteComponentNodeReducer": {
       const originActionComponentNode = action.payload.displayNames
         .map((displayName: string) => {
-          return searchDSLByDisplayName(displayName, prevRootState)
+          return buildTreeByMapNode(displayName, prevComponents)
         })
         .filter((item: ComponentTreeNode | null) => item != undefined)
       const newAction = {
@@ -585,5 +586,57 @@ export const componentsSnapShot = (
       }
       break
     }
+    case "setGlobalStateReducer": {
+      const { key, oldKey, value } = action.payload
+      let newAction
+      if (!oldKey) {
+        newAction = {
+          type: "components/deleteGlobalStateByKeyReducer",
+          payload: { key },
+          from: action.from,
+        }
+      } else {
+        newAction = {
+          type: "components/setGlobalStateReducer",
+          payload: { key: oldKey, oldKey: key, value },
+          from: action.from,
+        }
+      }
+
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IllaUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IllaUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "deleteGlobalStateByKeyReducer": {
+      const prevGlobalState = getOriginalGlobalData(prevRootState)
+      const { key } = action.payload
+      const targetGlobalState = prevGlobalState[key]
+      const newAction = {
+        type: "components/setGlobalStateReducer",
+        payload: {
+          key,
+          value: targetGlobalState,
+          oldKey: "",
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IllaUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IllaUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
   }
 }

apps/builder/src/redux/currentApp/components/componentsSelector.ts

@@ -409,6 +409,13 @@ export const getOriginalGlobalData = createSelector(
   },
 )
 
+export const getOriginalGlobalDataNames = createSelector(
+  [getRootComponentNode],
+  (rootNode) => {
+    return Object.keys(rootNode?.props?.globalData ?? {})
+  },
+)
+
 export const getGlobalDataToActionList = createSelector(
   [getRootComponentNode],
   (rootNode) => {

apps/builder/src/utils/shortcut/index.tsx

@@ -21,6 +21,7 @@ import { configActions } from "@/redux/config/configSlice"
 import { getActionItemByDisplayName } from "@/redux/currentApp/action/actionSelector"
 import {
   getComponentMap,
+  getOriginalGlobalDataNames,
   searchComponentFromMap,
 } from "@/redux/currentApp/components/componentsSelector"
 import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
@@ -128,10 +129,21 @@ export const Shortcut: FC<{ children: ReactNode }> = ({ children }) => {
                   store.getState(),
                   displayName[i],
                 )
+                const globalDataNames = getOriginalGlobalDataNames(
+                  store.getState(),
+                )
                 if (action) {
                   // fail to await @chenlongbo
                   onDeleteActionItem(action)
                 }
+                if (globalDataNames.includes(displayName[i])) {
+                  dispatch(
+                    componentsActions.deleteGlobalStateByKeyReducer({
+                      key: displayName[i],
+                    }),
+                  )
+                  DisplayNameGenerator.removeDisplayName(displayName[i])
+                }
               }
               trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.CLICK, {
                 element: "action_delete_modal_delete",

apps/builder/src/utils/undoRedo/antonymyRule.ts

@@ -6,6 +6,7 @@ import { REDUX_ACTION_FROM } from "@/middleware/undoRedo/interface"
 import { configActions } from "@/redux/config/configSlice"
 import store from "@/store"
 import { changeDisplayNameHelperWhenUndoRedo } from "../componentNode/changeDisplayNameHelper"
+import { DisplayNameGenerator } from "../generators/generateDisplayName"
 import {
   addActionItemWhenUndoRedo,
   removeActionItemWhenUndoRedo,
@@ -169,6 +170,23 @@ export const reduxActionDependOnRestAPI = async (
         })
         break
       }
+      case "components/setGlobalStateReducer": {
+        if (action.payload.key) {
+          const newName = DisplayNameGenerator.updateOrGenerateDisplayName(
+            action.payload.key,
+          )
+          store.dispatch({
+            ...action,
+            from,
+            payload: {
+              ...action.payload,
+              key: newName,
+            },
+          })
+        }
+        break
+      }
+
       default: {
         store.dispatch({
           ...action,

apps/builder/src/utils/undoRedo/undo.ts

@@ -38,7 +38,6 @@ export class ILLA_UNDO_REDO {
       })
     } else {
       const info = this.undoStack.pop() as AnyAction[]
-
       reduxActionDependOnRestAPI(info, REDUX_ACTION_FROM.UNDO)
     }
   }