Revert "fix: render only the currently open detached widgets. (#33040)"

This reverts commit 16fce05.

app/client/src/ce/reducers/index.tsx

@@ -81,7 +81,6 @@ import type { ActiveField } from "reducers/uiReducers/activeFieldEditorReducer";
 import type { SelectedWorkspaceReduxState } from "@appsmith/reducers/uiReducers/selectedWorkspaceReducer";
 import type { ConsolidatedPageLoadState } from "reducers/uiReducers/consolidatedPageLoadReducer";
 import type { BuildingBlocksReduxState } from "reducers/uiReducers/buildingBlockReducer";
-import type { AnvilDetachedWidgetsReduxState } from "layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer";
 
 export const reducerObject = {
   entities: entityReducer,
@@ -147,7 +146,6 @@ export interface AppState {
     oneClickBinding: OneClickBindingState;
     activeField: ActiveField;
     ide: IDEState;
-    anvilDetachedWidgets: AnvilDetachedWidgetsReduxState;
   };
   entities: {
     canvasWidgetsStructure: CanvasWidgetStructure;

app/client/src/ce/reducers/uiReducers/index.tsx

@@ -50,7 +50,6 @@ import activeFieldReducer from "reducers/uiReducers/activeFieldEditorReducer";
 import selectedWorkspaceReducer from "@appsmith/reducers/uiReducers/selectedWorkspaceReducer";
 import ideReducer from "../../../reducers/uiReducers/ideReducer";
 import consolidatedPageLoadReducer from "reducers/uiReducers/consolidatedPageLoadReducer";
-import anvilDetachedWidgetsReducer from "layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer";
 
 export const uiReducerObject = {
   analytics: analyticsReducer,
@@ -105,5 +104,4 @@ export const uiReducerObject = {
   activeField: activeFieldReducer,
   ide: ideReducer,
   consolidatedPageLoad: consolidatedPageLoadReducer,
-  anvilDetachedWidgets: anvilDetachedWidgetsReducer,
 };

app/client/src/layoutSystems/anvil/common/hooks/detachedWidgetHooks.ts

@@ -3,12 +3,19 @@ import { useDispatch, useSelector } from "react-redux";
 import { useWidgetSelection } from "utils/hooks/useWidgetSelection";
 import { combinedPreviewModeSelector } from "selectors/editorSelectors";
 import { SELECT_ANVIL_WIDGET_CUSTOM_EVENT } from "layoutSystems/anvil/utils/constants";
+import { renderChildWidget } from "layoutSystems/common/utils/canvasUtils";
+import type { WidgetProps } from "widgets/BaseWidget";
+import { getRenderMode } from "selectors/editorSelectors";
+import { denormalize } from "utils/canvasStructureHelpers";
+import type { CanvasWidgetStructure } from "WidgetProvider/constants";
+import { getWidgets } from "sagas/selectors";
 import log from "loglevel";
 import { useEffect, useMemo } from "react";
 import { getAnvilWidgetDOMId } from "layoutSystems/common/utils/LayoutElementPositionsObserver/utils";
-import { getCurrentlyOpenAnvilDetachedWidgets } from "layoutSystems/anvil/integrations/modalSelectors";
-import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector";
-import type { CanvasWidgetStructure } from "WidgetProvider/constants";
+import {
+  MAIN_CONTAINER_WIDGET_ID,
+  type RenderModes,
+} from "constants/WidgetConstants";
 /**
  * This hook is used to select and focus on a detached widget
  * As detached widgets are outside of the layout flow, we need to access the correct element in the DOM
@@ -107,25 +114,48 @@ export function useAddBordersToDetachedWidgets(widgetId: string) {
  * @param children
  * @returns
  */
-export function useDetachedChildren() {
+function useDetachedChildren(children: CanvasWidgetStructure[]) {
   const start = performance.now();
   // Get all widgets
-  const widgets = useSelector(getCanvasWidgetsStructure);
-  const currentlyOpenWidgets = useSelector(
-    getCurrentlyOpenAnvilDetachedWidgets,
-  );
+  const widgets = useSelector(getWidgets);
   // Filter out the detached children and denormalise each of the detached widgets to generate
   // a DSL like hierarchy
   const detachedChildren = useMemo(() => {
-    const allChildren = currentlyOpenWidgets.map((widgetId) => {
-      return (
-        widgets.children &&
-        widgets.children.find((each) => each.widgetId === widgetId)
-      );
-    });
-    return allChildren.filter((child) => !!child) as CanvasWidgetStructure[];
-  }, [currentlyOpenWidgets, widgets]);
+    return children
+      .map((child) => widgets[child.widgetId])
+      .filter((child) => child.detachFromLayout === true)
+      .map((child) => {
+        return denormalize(child.widgetId, widgets);
+      });
+  }, [children, widgets]);
   const end = performance.now();
   log.debug("### Computing detached children took:", end - start, "ms");
   return detachedChildren;
 }
+
+export function useRenderDetachedChildren(
+  widgetId: string,
+  children: CanvasWidgetStructure[],
+) {
+  const renderMode: RenderModes = useSelector(getRenderMode);
+  // Get the detached children to render on the canvas
+  const detachedChildren = useDetachedChildren(children);
+  let renderDetachedChildren = null;
+  if (widgetId === MAIN_CONTAINER_WIDGET_ID) {
+    renderDetachedChildren = detachedChildren.map((child) =>
+      renderChildWidget({
+        childWidgetData: child as WidgetProps,
+        defaultWidgetProps: {
+          className: `${getAnvilWidgetDOMId(child.widgetId)}`,
+        },
+        noPad: false,
+        // Adding these properties as the type insists on providing this
+        // while it is not required for detached children
+        layoutSystemProps: { parentColumnSpace: 1, parentRowSpace: 1 },
+        renderMode,
+        widgetId: MAIN_CONTAINER_WIDGET_ID,
+      }),
+    );
+  }
+  return renderDetachedChildren;
+}

app/client/src/layoutSystems/anvil/integrations/actions/actionTypes.ts

@@ -40,7 +40,4 @@ export enum AnvilReduxActionTypes {
   ANVIL_SPACE_DISTRIBUTION_STOP = "ANVIL_SPACE_DISTRIBUTION_STOP",
   ANVIL_SET_HIGHLIGHT_SHOWN = "ANVIL_SET_HIGHLIGHT_SHOWN",
   ANVIL_WIDGET_SELECTION_CLICK = "ANVIL_WIDGET_SELECTION_CLICK",
-  SHOW_DETACHED_WIDGET = "SHOW_DETACHED_WIDGET",
-  HIDE_DETACHED_WIDGET = "HIDE_DETACHED_WIDGET",
-  RESET_DETACHED_WIDGETS = "RESET_DETACHED_WIDGETS",
 }

app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts

@@ -1,5 +1,16 @@
 import type { AppState } from "@appsmith/reducers";
+import { getWidgetIdsByType, getWidgetsMeta } from "sagas/selectors";
+import { WDSModalWidget } from "widgets/wds/WDSModalWidget";
 
-export const getCurrentlyOpenAnvilDetachedWidgets = (state: AppState) => {
-  return state.ui.anvilDetachedWidgets.currentlyOpenDetachedWidgets;
+export const getCurrentlyOpenAnvilModal = (state: AppState) => {
+  const allExistingModals = getWidgetIdsByType(state, WDSModalWidget.type);
+  if (allExistingModals.length === 0) {
+    return;
+  }
+  const metaWidgets = getWidgetsMeta(state);
+  const currentlyOpenModal = allExistingModals.find((modalId) => {
+    const modal = metaWidgets[modalId];
+    return modal && modal.isVisible;
+  });
+  return currentlyOpenModal;
 };

app/client/src/layoutSystems/anvil/integrations/sagas/index.ts

@@ -5,7 +5,6 @@ import anvilSectionSagas from "./sectionSagas";
 import anvilSpaceDistributionSagas from "./anvilSpaceDistributionSagas";
 import anvilWidgetSelectionSaga from "./anvilWidgetSelectionSaga";
 import pasteSagas from "./pasteSagas";
-import anvilDetachedWidgetSagas from "./anvilDetachedWidgetSagas";
 
 export default function* anvilSagas() {
   yield fork(LayoutElementPositionsSaga);
@@ -14,5 +13,4 @@ export default function* anvilSagas() {
   yield fork(anvilSpaceDistributionSagas);
   yield fork(anvilWidgetSelectionSaga);
   yield fork(pasteSagas);
-  yield fork(anvilDetachedWidgetSagas);
 }

app/client/src/layoutSystems/anvil/integrations/sagas/pasteSagas.ts

@@ -7,6 +7,7 @@ import { updateAndSaveAnvilLayout } from "../../utils/anvilChecksUtils";
 import { builderURL } from "@appsmith/RouteBuilder";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import {
+  type ReduxAction,
   ReduxActionErrorTypes,
   ReduxActionTypes,
 } from "@appsmith/constants/ReduxActionConstants";
@@ -23,7 +24,7 @@ import { getDestinedParent } from "layoutSystems/anvil/utils/paste/destinationUt
 import { pasteWidgetsIntoMainCanvas } from "layoutSystems/anvil/utils/paste/mainCanvasPasteUtils";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import WidgetFactory from "WidgetProvider/factory";
-import { callSagaOnlyForAnvil } from "./utils";
+import { getIsAnvilLayout } from "../selectors";
 
 function* pasteWidgetSagas() {
   try {
@@ -121,11 +122,18 @@ function* pasteWidgetSagas() {
   }
 }
 
+function* shouldCallSaga(saga: any, action: ReduxAction<unknown>) {
+  const isAnvilLayout: boolean = yield select(getIsAnvilLayout);
+  if (isAnvilLayout) {
+    yield call(saga, action);
+  }
+}
+
 export default function* pasteSagas() {
   yield all([
     takeLeading(
       ReduxActionTypes.PASTE_COPIED_WIDGET_INIT,
-      callSagaOnlyForAnvil,
+      shouldCallSaga,
       pasteWidgetSagas,
     ),
   ]);

app/client/src/layoutSystems/anvil/viewer/canvas/AnvilViewerCanvas.tsx

@@ -2,18 +2,23 @@ import React, { useMemo } from "react";
 import styles from "./styles.module.css";
 import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
 import { getAnvilCanvasId } from "./utils";
+import { useRenderDetachedChildren } from "layoutSystems/anvil/common/hooks/detachedWidgetHooks";
 import { LayoutProvider } from "layoutSystems/anvil/layoutComponents/LayoutProvider";
-import { AnvilDetachedWidgets } from "./AnvilDetachedWidgets";
 export const AnvilViewerCanvas = React.forwardRef(
   (props: BaseWidgetProps, ref: React.ForwardedRef<HTMLDivElement>) => {
     const className: string = useMemo(
       () => `${props.classList?.join(" ")} ${styles["anvil-canvas"]}`,
       [props.classList],
     );
 
+    const renderDetachedChildren = useRenderDetachedChildren(
+      props.widgetId,
+      props.children,
+    );
+
     return (
       <>
-        <AnvilDetachedWidgets />
+        {renderDetachedChildren}
         <div
           className={className}
           id={getAnvilCanvasId(props.widgetId)}