Use parentId to delete and move

app/client/src/actions/pageActions.tsx

@@ -92,12 +92,13 @@ export type WidgetMove = {
   widgetId: string;
   leftColumn: number;
   topRow: number;
+  parentId: string;
   /*
-    If parentWidgetId is different from what we have in redux store, 
+    If newParentId is different from what we have in redux store, 
     then we have to delete this,
     as it has been dropped in another container somewhere.    
   */
-  parentWidgetId: string;
+  newParentId: string;
 };
 
 export type WidgetRemoveChild = {
@@ -107,6 +108,7 @@ export type WidgetRemoveChild = {
 
 export type WidgetDelete = {
   widgetId: string;
+  parentId: string;
 };
 
 export type WidgetResize = {

app/client/src/editorComponents/DraggableComponent.tsx

@@ -60,7 +60,10 @@ const DraggableComponent = (props: DraggableComponentProps) => {
   const { updateWidget } = useContext(WidgetFunctionsContext);
   const [isResizing, setIsResizing] = useState(false);
   const deleteWidget = () => {
-    updateWidget && updateWidget(WidgetOperations.DELETE, props.widgetId);
+    updateWidget &&
+      updateWidget(WidgetOperations.DELETE, props.widgetId, {
+        parentId: props.parentId,
+      });
   };
   const [{ isDragging }, drag, preview] = useDrag({
     item: props,

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -10,12 +10,7 @@ import {
   WidgetDelete,
 } from "../actions/pageActions";
 import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
-import {
+import { getWidgets, getWidget, getDefaultWidgetConfig } from "./selectors";
-  getWidgets,
-  getWidget,
-  getWidgetParent,
-  getDefaultWidgetConfig,
-} from "./selectors";
 import {
   generateWidgetProps,
   updateWidgetPosition,
@@ -72,14 +67,14 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
 
 export function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
   try {
-    const { widgetId } = deleteAction.payload;
+    const { widgetId, parentId } = deleteAction.payload;
     const widgets = yield select(getWidgets);
-    delete widgets[widgetId];
+    const parent = yield select(getWidget, parentId);
-    const parent = yield select(getWidgetParent, widgetId);
     parent.children = parent.children.filter(
       (child: string) => child !== widgetId,
     );
-    widgets[parent.widgetId] = parent;
+    delete widgets[widgetId];
+    widgets[parentId] = parent;
     yield put({
       type: ReduxActionTypes.UPDATE_LAYOUT,
       payload: { widgets },
@@ -97,25 +92,31 @@ export function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
 
 export function* moveSaga(moveAction: ReduxAction<WidgetMove>) {
   try {
-    const { widgetId, leftColumn, topRow, parentWidgetId } = moveAction.payload;
+    const {
+      widgetId,
+      leftColumn,
+      topRow,
+      parentId,
+      newParentId,
+    } = moveAction.payload;
     let widget: FlattenedWidgetProps = yield select(getWidget, widgetId);
     // Get all widgets from DSL/Redux Store
     const widgets = yield select(getWidgets) as any;
     // Get parent from DSL/Redux Store
-    const parent = yield select(getWidgetParent, widgetId);
+    const parent = yield select(getWidget, parentId);
     // Update position of widget
     widget = updateWidgetPosition(widget, leftColumn, topRow, parent);
     // Replace widget with update widget props
     widgets[widgetId] = widget;
     // If the parent has changed i.e parentWidgetId is not parent.widgetId
-    if (parent.widgetId !== parentWidgetId && widgetId !== parentWidgetId) {
+    if (parent.widgetId !== newParentId && widgetId !== newParentId) {
       // Remove from the previous parent
       parent.children = parent.children.filter(
         (child: string) => child !== widgetId,
       );
       widgets[parent.widgetId] = parent;
       // Add to new parent
-      widgets[parentWidgetId].children.push(widgetId);
+      widgets[newParentId].children.push(widgetId);
     }
     yield put({
       type: ReduxActionTypes.UPDATE_LAYOUT,

app/client/src/sagas/selectors.tsx

@@ -22,20 +22,6 @@ export const getEditorConfigs = (
   };
 };
 
-export const getWidgetParent = (
-  state: AppState,
-  widgetId: string,
-): FlattenedWidgetProps | undefined => {
-  const widgets = state.entities.canvasWidgets;
-  return Object.values(widgets).find(
-    (widget: FlattenedWidgetProps) =>
-      widget &&
-      widget.children &&
-      widget.children.length > 0 &&
-      widget.children.indexOf(widgetId) > -1,
-  );
-};
-
 export const getDefaultWidgetConfig = (
   state: AppState,
   type: WidgetType,

app/client/src/utils/WidgetPropsUtils.tsx

@@ -142,7 +142,8 @@ export const widgetOperationParams = (
         {
           leftColumn,
           topRow,
-          parentWidgetId: widgetId,
+          parentId: widget.parentId,
+          newParentId: widgetId,
         },
       ];
       // If this is not an existing widget, we'll not have the widgetId