Grouping widgets into container

app/client/src/actions/widgetActions.tsx

@@ -121,9 +121,12 @@ export const copyWidget = (isShortcut: boolean) => {
   };
 };
 
-export const pasteWidget = () => {
+export const pasteWidget = (groupWidgets = false) => {
   return {
     type: ReduxActionTypes.PASTE_COPIED_WIDGET_INIT,
+    payload: {
+      groupWidgets: groupWidgets,
+    },
   };
 };
 
@@ -152,3 +155,15 @@ export const addSuggestedWidget = (payload: Partial<WidgetProps>) => {
     payload,
   };
 };
+
+/**
+ * action to group selected widgets into container
+ *
+ * @param queryName
+ * @returns
+ */
+export const groupWidgets = () => {
+  return {
+    type: ReduxActionTypes.GROUP_WIDGETS_INIT,
+  };
+};

app/client/src/components/editorComponents/ActionRightPane/SuggestedWidgets.tsx

@@ -18,7 +18,7 @@ import { SuggestedWidget } from "api/ActionAPI";
 import { useSelector } from "store";
 import { getDataTree } from "selectors/dataTreeSelectors";
 import { getWidgets } from "sagas/selectors";
-import { getNextWidgetName } from "sagas/WidgetOperationSagas";
+import { getNextWidgetName } from "sagas/WidgetOperationUtils";
 
 const WidgetList = styled.div`
   ${(props) => getTypographyByKey(props, "p1")}

app/client/src/constants/ReduxActionConstants.tsx

@@ -504,6 +504,7 @@ export const ReduxActionTypes = {
   SET_CRUD_INFO_MODAL_OPEN: "SET_CRUD_INFO_MODAL_OPEN",
   SET_PAGE_ORDER_INIT: "SET_PAGE_ORDER_INIT",
   SET_PAGE_ORDER_SUCCESS: "SET_PAGE_ORDER_SUCCESS",
+  GROUP_WIDGETS_INIT: "GROUP_WIDGETS_INIT",
 };
 
 export type ReduxActionType = typeof ReduxActionTypes[keyof typeof ReduxActionTypes];

app/client/src/entities/Widget/utils.ts

@@ -3,9 +3,10 @@ import {
   PropertyPaneConfig,
   ValidationConfig,
 } from "constants/PropertyControlConstants";
-import { get, isObject, isUndefined } from "lodash";
+import { get, isObject, isUndefined, omitBy } from "lodash";
 import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
+import { WidgetTypes } from "constants/WidgetConstants";
 
 export const getAllPathsFromPropertyConfig = (
   widget: WidgetProps,
@@ -146,12 +147,24 @@ export const getAllPathsFromPropertyConfig = (
   return { bindingPaths, triggerPaths, validationPaths };
 };
 
+/**
+ * this function gets the next available row for pasting widgets
+ * NOTE: this function excludes modal widget when calculating next available row
+ *
+ * @param parentContainerId
+ * @param canvasWidgets
+ * @returns
+ */
 export const nextAvailableRowInContainer = (
   parentContainerId: string,
   canvasWidgets: { [widgetId: string]: FlattenedWidgetProps },
 ) => {
+  const filteredCanvasWidgets = omitBy(canvasWidgets, (widget) => {
+    return widget.type === WidgetTypes.MODAL_WIDGET;
+  });
+
   return (
-    Object.values(canvasWidgets).reduce(
+    Object.values(filteredCanvasWidgets).reduce(
       (prev: number, next: any) =>
         next?.parentId === parentContainerId && next.bottomRow > prev
           ? next.bottomRow

app/client/src/pages/Editor/Explorer/Widgets/useNavigateToWidget.ts

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { WidgetTypes, WidgetType } from "constants/WidgetConstants";
 import { useParams } from "react-router";
 import { ExplorerURLParams } from "../helpers";
-import { flashElementById } from "utils/helpers";
+import { flashElementsById } from "utils/helpers";
 import { useDispatch, useSelector } from "react-redux";
 import {
   forceOpenPropertyPane,
@@ -23,7 +23,7 @@ export const useNavigateToWidget = () => {
   } = useWidgetSelection();
   const multiSelectWidgets = (widgetId: string, pageId: string) => {
     navigateToCanvas(params, window.location.pathname, pageId, widgetId);
-    flashElementById(widgetId);
+    flashElementsById(widgetId);
     selectWidget(widgetId, true);
   };
 
@@ -41,7 +41,8 @@ export const useNavigateToWidget = () => {
     else dispatch(closeAllModals());
     selectWidget(widgetId, false);
     navigateToCanvas(params, window.location.pathname, pageId, widgetId);
-    flashElementById(widgetId);
+
+    flashElementsById(widgetId);
     // Navigating to a widget from query pane seems to make the property pane
     // appear below the entity explorer hence adding a timeout here
     setTimeout(() => {

app/client/src/pages/Editor/GlobalHotKeys.tsx

@@ -9,6 +9,7 @@ import {
   copyWidget,
   cutWidget,
   deleteSelectedWidget,
+  groupWidgets,
   pasteWidget,
 } from "actions/widgetActions";
 import {
@@ -41,6 +42,7 @@ type Props = {
   pasteCopiedWidget: () => void;
   deleteSelectedWidget: () => void;
   cutSelectedWidget: () => void;
+  groupSelectedWidget: () => void;
   toggleShowGlobalSearchModal: (category: SearchCategory) => void;
   resetSnipingMode: () => void;
   openDebugger: () => void;
@@ -235,6 +237,17 @@ class GlobalHotKeys extends React.Component<Props> {
           preventDefault
           stopPropagation
         />
+        <Hotkey
+          combo="mod + g"
+          global
+          group="Canvas"
+          label="Cut Widgets for grouping"
+          onKeyDown={(e: any) => {
+            if (this.stopPropagationIfWidgetSelected(e)) {
+              this.props.groupSelectedWidget();
+            }
+          }}
+        />
       </Hotkeys>
     );
   }
@@ -256,6 +269,7 @@ const mapDispatchToProps = (dispatch: any) => {
     pasteCopiedWidget: () => dispatch(pasteWidget()),
     deleteSelectedWidget: () => dispatch(deleteSelectedWidget(true)),
     cutSelectedWidget: () => dispatch(cutWidget()),
+    groupSelectedWidget: () => dispatch(groupWidgets()),
     toggleShowGlobalSearchModal: (category: SearchCategory) =>
       dispatch(toggleShowGlobalSearchModal(category)),
     resetSnipingMode: () => dispatch(resetSnipingModeAction()),

app/client/src/pages/Editor/WidgetsEditor.tsx

@@ -14,7 +14,7 @@ import { Spinner } from "@blueprintjs/core";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import * as log from "loglevel";
 import { getCanvasClassName } from "utils/generators";
-import { flashElementById } from "utils/helpers";
+import { flashElementsById } from "utils/helpers";
 import { useParams } from "react-router";
 import { fetchPage } from "actions/pageActions";
 import PerformanceTracker, {
@@ -92,7 +92,7 @@ function WidgetsEditor() {
   useEffect(() => {
     if (!isFetchingPage && window.location.hash.length > 0) {
       const widgetIdFromURLHash = window.location.hash.substr(1);
-      flashElementById(widgetIdFromURLHash);
+      flashElementsById(widgetIdFromURLHash);
       if (document.getElementById(widgetIdFromURLHash))
         selectWidget(widgetIdFromURLHash);
     }

app/client/src/pages/Editor/WidgetsMultiSelectBox.tsx

@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from "react-redux";
 import {
   copyWidget,
   cutWidget,
+  groupWidgets,
   deleteSelectedWidget,
 } from "actions/widgetActions";
 import { isMac } from "utils/helpers";
@@ -127,6 +128,7 @@ export const PopoverModifiers: IPopoverSharedProps["modifiers"] = {
 const CopyIcon = ControlIcons.COPY2_CONTROL;
 const DeleteIcon = FormIcons.DELETE_ICON;
 const CutIcon = ControlIcons.CUT_CONTROL;
+const GroupIcon = ControlIcons.GROUP_CONTROL;
 
 /**
  * helper text that comes in popover on hover of actions in context menu
@@ -148,6 +150,11 @@ const deleteHelpText = (
     Click or <b> Del </b>
   </>
 );
+const groupHelpText = (
+  <>
+    Click or <b>{modText()} + G to group</b>
+  </>
+);
 
 interface OffsetBox {
   top: number;
@@ -299,6 +306,20 @@ function WidgetsMultiSelectBox(props: {
     dispatch(deleteSelectedWidget(true));
   };
 
+  /**
+   * group widgets into container
+   *
+   * @param e
+   */
+  const onGroupWidgets = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    dispatch(groupWidgets());
+  };
+
   if (!shouldRender) return false;
 
   return (
@@ -371,6 +392,21 @@ function WidgetsMultiSelectBox(props: {
               <DeleteIcon color="black" height={16} width={16} />
             </StyledAction>
           </Tooltip>
+          {/* group widgets */}
+          <Tooltip
+            boundary="viewport"
+            content={groupHelpText}
+            maxWidth="400px"
+            modifiers={PopoverModifiers}
+            position={Position.RIGHT}
+          >
+            <StyledAction
+              onClick={stopEventPropagation}
+              onClickCapture={onGroupWidgets}
+            >
+              <GroupIcon color="black" height={16} width={16} />
+            </StyledAction>
+          </Tooltip>
         </StyledActions>
       </StyledActionsContainer>
     </StyledSelectionBox>

app/client/src/reducers/entityReducers/canvasWidgetsReducer.tsx

@@ -11,9 +11,11 @@ import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 
 const initialState: CanvasWidgetsReduxState = {};
 
-export type FlattenedWidgetProps = WidgetProps & {
-  children?: string[];
-};
+export type FlattenedWidgetProps<orType = never> =
+  | (WidgetProps & {
+      children?: string[];
+    })
+  | orType;
 
 const canvasWidgetsReducer = createImmerReducer(initialState, {
   [ReduxActionTypes.INIT_CANVAS_LAYOUT]: (