chore: Enable meta modal widgets to render in canvas

app/client/src/layoutSystems/fixedlayout/canvas/FixedLayoutEditorCanvas.tsx

@@ -60,30 +60,38 @@ export const FixedLayoutEditorCanvas = (props: BaseWidgetProps) => {
   };
   // ToDO(#27617): Remove sorting of children on the view, ideally the model should be sorted, coz they are less frequently happening
   // operations. leaving it as is for now, coz it multiple cypress tests are dependent on this.
-  const canvasChildren = useMemo(
-    () =>
-      renderChildren(
-        props.positioning !== Positioning.Fixed
-          ? props.children
-          : sortBy(
-              compact(props.children),
-              (child: WidgetProps) => child.topRow,
-            ),
-        props.widgetId,
-        RenderModes.CANVAS,
-        defaultWidgetProps,
-        layoutSystemProps,
-        !!props.noPad,
-      ),
-    [
-      props.children,
-      props.shouldScrollContents,
+  const canvasChildren = useMemo(() => {
+    /**
+     * With UI modules there is a possiblity of the module to have modals and these modals needs to be
+     * rendered as children of the main canvas in order for the modals to be functional. Since all the widgets
+     * of a UI modules are rendered as meta widgets, the Main canvas receives the metaWidgetChildrenStructure
+     * in the props.
+     */
+    const children = [
+      ...(props?.children || []),
+      ...(props?.metaWidgetChildrenStructure || []),
+    ];
+
+    return renderChildren(
+      props.positioning !== Positioning.Fixed
+        ? children
+        : sortBy(compact(children), (child: WidgetProps) => child.topRow),
       props.widgetId,
-      props.componentHeight,
-      props.componentWidth,
-      snapColumnSpace,
-    ],
-  );
+      RenderModes.CANVAS,
+      defaultWidgetProps,
+      layoutSystemProps,
+      !!props.noPad,
+    );
+  }, [
+    props.children,
+    props.positioning,
+    props.shouldScrollContents,
+    props.widgetId,
+    props.componentHeight,
+    props.componentWidth,
+    snapColumnSpace,
+    props.metaWidgetChildrenStructure,
+  ]);
 
   return (
     <DropTargetComponentWrapper

app/client/src/layoutSystems/fixedlayout/canvas/FixedLayoutViewerCanvas.tsx

@@ -33,30 +33,38 @@ export const FixedLayoutViewerCanvas = (props: BaseWidgetProps) => {
 
   // ToDO(#27617): Remove sorting of children on the view, ideally the model should be sorted, coz they are less frequently happening
   // operations. leaving it as is for now, coz it multiple cypress tests are dependent on this.
-  const canvasChildren = useMemo(
-    () =>
-      renderChildren(
-        props.positioning !== Positioning.Fixed
-          ? props.children
-          : sortBy(
-              compact(props.children),
-              (child: WidgetProps) => child.topRow,
-            ),
-        props.widgetId,
-        RenderModes.PAGE,
-        defaultWidgetProps,
-        layoutSystemProps,
-        !!props.noPad,
-      ),
-    [
-      props.children,
-      props.shouldScrollContents,
+  const canvasChildren = useMemo(() => {
+    /**
+     * With UI modules there is a possiblity of the module to have modals and these modals needs to be
+     * rendered as children of the main canvas in order for the modals to be functional. Since all the widgets
+     * of a UI modules are rendered as meta widgets, the Main canvas receives the metaWidgetChildrenStructure
+     * in the props.
+     */
+    const children = [
+      ...(props?.children || []),
+      ...(props?.metaWidgetChildrenStructure || []),
+    ];
+
+    return renderChildren(
+      props.positioning !== Positioning.Fixed
+        ? children
+        : sortBy(compact(children), (child: WidgetProps) => child.topRow),
       props.widgetId,
-      props.componentHeight,
-      props.componentWidth,
-      snapColumnSpace,
-    ],
-  );
+      RenderModes.PAGE,
+      defaultWidgetProps,
+      layoutSystemProps,
+      !!props.noPad,
+    );
+  }, [
+    props.children,
+    props.positioning,
+    props.shouldScrollContents,
+    props.widgetId,
+    props.componentHeight,
+    props.componentWidth,
+    snapColumnSpace,
+    props.metaWidgetChildrenStructure,
+  ]);
   const snapRows = getCanvasSnapRows(props.bottomRow);
 
   return (

app/client/src/sagas/ModalSagas.ts

@@ -135,11 +135,9 @@ export function* createModalSaga(action: ReduxAction<{ modalName: string }>) {
 export function* showModalByNameSaga(
   action: ReduxAction<{ modalName: string }>,
 ) {
-  const widgets: { [widgetId: string]: FlattenedWidgetProps } =
-    yield select(getWidgets);
-  const modal: FlattenedWidgetProps | undefined = Object.values(widgets).find(
-    (widget: FlattenedWidgetProps) =>
-      widget.widgetName === action.payload.modalName,
+  const modal: FlattenedWidgetProps | null = yield select(
+    getWidgetByName,
+    action.payload.modalName,
   );
 
   if (modal) {
@@ -202,7 +200,7 @@ export function* closeModalSaga(
 
     // If modalName is provided, we just want to close this modal
     if (modalName) {
-      const widget: FlattenedWidgetProps | undefined = yield select(
+      const widget: FlattenedWidgetProps | null = yield select(
         getWidgetByName,
         modalName,
       );

app/client/src/sagas/selectors.tsx

@@ -73,11 +73,22 @@ export const getWidget = (state: AppState, widgetId: string): WidgetProps => {
   return state.entities.canvasWidgets[widgetId];
 };
 
-export const getWidgetIdsByType = (state: AppState, type: WidgetType) => {
-  return Object.values(state.entities.canvasWidgets)
-    .filter((widget: FlattenedWidgetProps) => widget.type === type)
-    .map((widget: FlattenedWidgetProps) => widget.widgetId);
-};
+export const getWidgetIdsByType = createSelector(
+  getWidgets,
+  getMetaWidgets,
+  (_state: AppState, widgetType: WidgetType) => widgetType,
+  (canvasWidgets, metaWidgets, widgetType) => {
+    const canvasWidgetIds = Object.values(canvasWidgets)
+      .filter((widget: FlattenedWidgetProps) => widget.type === widgetType)
+      .map((widget: FlattenedWidgetProps) => widget.widgetId);
+
+    const metaWidgetIds = Object.values(metaWidgets)
+      .filter((widget: FlattenedWidgetProps) => widget.type === widgetType)
+      .map((widget: FlattenedWidgetProps) => widget.widgetId);
+
+    return [...canvasWidgetIds, ...metaWidgetIds];
+  },
+);
 
 export const getAllDetachedWidgetIds = memoize(
   (canvasWidgets: CanvasWidgetsReduxState) => {
@@ -188,17 +199,26 @@ export const getExistingPageNames = (state: AppState) => {
   return map;
 };
 
-export const getWidgetByName = (
-  state: AppState,
-  widgetName: string,
-): FlattenedWidgetProps | undefined => {
-  const widgets = state.entities.canvasWidgets;
+export const getWidgetByName = createSelector(
+  getWidgets,
+  getMetaWidgets,
+  (state: AppState, widgetName: string) => widgetName,
+  (widgets, metaWidgets, widgetName) => {
+    for (const widget of Object.values(widgets)) {
+      if (widget.widgetName === widgetName) {
+        return widget;
+      }
+    }
 
-  return _.find(
-    Object.values(widgets),
-    (widget) => widget.widgetName === widgetName,
-  );
-};
+    for (const widget of Object.values(metaWidgets)) {
+      if (widget.widgetName === widgetName) {
+        return widget;
+      }
+    }
+
+    return null;
+  },
+);
 
 export const getAllPageIdentities = (state: AppState) => {
   return state.entities.pageList.pages.map((page) => ({

app/client/src/widgets/ModalWidget/widget/index.tsx

@@ -525,6 +525,12 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
   };
 
   makeModalComponent() {
+    let children = this.props.children || [];
+
+    if (this.props.metaWidgetChildrenStructure?.length) {
+      children = this.props.metaWidgetChildrenStructure as WidgetProps[];
+    }
+
     return (
       <ModalComponent
         alignment={this.props.alignment}
@@ -534,7 +540,7 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
         className={`t--modal-widget ${generateClassName(this.props.widgetId)}`}
         height={this.props.height}
         isOpen={this.getModalVisibility()}
-        modalChildrenProps={this.props.children || []}
+        modalChildrenProps={children}
         onClose={this.closeModal}
         onModalClose={this.onModalClose}
         positioning={this.props.positioning}
@@ -571,6 +577,7 @@ export interface ModalWidgetProps extends WidgetProps {
   positioning?: Positioning;
   alignment: Alignment;
   spacing: Spacing;
+  isMetaWidget?: boolean;
 }
 
 export default ModalWidget;

app/client/src/widgets/withWidgetProps.tsx

@@ -95,7 +95,20 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) {
     );
 
     const metaWidgetChildrenStructure = useSelector(
-      getMetaWidgetChildrenStructure(widgetId, type, hasMetaWidgets),
+      getMetaWidgetChildrenStructure(
+        widgetId,
+        type,
+        /**
+         * With UI modules there is a possiblity of the module to have modals
+         * These modals would be meta widgets and would be added to the metaWidgetsReducer.
+         * These modals needs to be placed in the children of the main container widget.
+         * The main container widget by default does not has the flag hasMetaWidgets set to true.
+         * So we need to check for the widgetId to be the main container widgetId.
+         *
+         * TODO (Ashit) - Make the hasMetaWidgets flag to be set to true for the main container widget and avoid specific check for the widgetId.
+         */
+        hasMetaWidgets || widgetId === MAIN_CONTAINER_WIDGET_ID,
+      ),
       equal,
     );