chore: Rename and cleanup of editor components (#26944)

## Description
This PR is aimed at Renaming and cleanup of editor components. The
changes include,
- Rename Editor components to reflect more of it's function as an editor
component
- Rename all references of the container to wrapper so as to avoid
confusion with Actual containers and canvases
- Pass down few instances of selected properties to children instead of
reselecting the same in the children
- Remove all instances of `isAutolayout`, instead use
`useLayoutSystemFeatures` to check if the particular feature is enabled
in the particular layout type.

P.S. please feel free to suggest better names that define the function
of the components.

#### PR fixes following issue(s)
Fixes #26571

#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)

#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>

CODEOWNERS

@@ -63,15 +63,8 @@ app/client/src/actions/autoLayoutActions.ts @appsmithorg/ui-builders
 app/client/src/actions/canvasSelectionActions.ts @appsmithorg/ui-builders
 app/client/src/actions/reflowActions.ts @appsmithorg/ui-builders
 app/client/src/actions/widgetSelectionActions.ts @appsmithorg/ui-builders
-app/client/src/components/autoHeight/* @appsmithorg/ui-builders
-app/client/src/components/autoHeightOverlay/* @appsmithorg/ui-builders
-app/client/src/components/designSystems/appsmith/PositionedContainer.tsx @appsmithorg/ui-builders
-app/client/src/components/editorComponents/DraggableComponent.tsx @appsmithorg/ui-builders
-app/client/src/components/editorComponents/ResizableComponent.tsx @appsmithorg/ui-builders
-app/client/src/components/editorComponents/ResizableUtils.ts @appsmithorg/ui-builders
-app/client/src/components/editorComponents/ResizeStyledComponents.tsx @appsmithorg/ui-builders
-app/client/src/components/editorComponents/WidgetNameComponent/* @appsmithorg/ui-builders
 app/client/src/components/propertyControls/* @appsmithorg/ui-builders
+app/client/src/layoutSystems/* @appsmithorg/ui-builders
 app/client/src/normalizers/CanvasWidgetsNormalizer.tsx @appsmithorg/ui-builders
 app/client/src/pages/Editor/Canvas.tsx @appsmithorg/ui-builders
 app/client/src/pages/Editor/CanvasLayoutConversion/* @appsmithorg/ui-builders
@@ -102,7 +95,6 @@ app/client/src/selectors/canvasSelectors.ts @appsmithorg/ui-builders
 app/client/src/selectors/widgetSelectors.ts @appsmithorg/ui-builders
 app/client/src/utils/DSLConversions/* @appsmithorg/ui-builders
 app/client/src/utils/autoHeight/* @appsmithorg/ui-builders
-app/client/src/utils/autoLayout/* @appsmithorg/ui-builders
 app/client/src/utils/hooks/autoHeightUIHooks.ts @appsmithorg/ui-builders
 app/client/src/utils/hooks/useAllowEditorDragToSelect.ts @appsmithorg/ui-builders
 app/client/src/utils/hooks/useClickToSelectWidget.tsx @appsmithorg/ui-builders
@@ -111,7 +103,7 @@ app/client/src/utils/hooks/usePositionedContainerZIndex.ts @appsmithorg/ui-build
 app/client/src/utils/hooks/useReflow.ts @appsmithorg/ui-builders
 app/client/src/utils/hooks/useWidgetSelection.ts @appsmithorg/ui-builders
 app/client/src/widgets/BaseWidget.tsx @appsmithorg/ui-builders
-app/client/src/widgets/CanvasResizer.tsx @appsmithorg/ui-builders
+app/client/src/widgets/BaseWidgetHOC/* @appsmithorg/ui-builders
 app/client/src/widgets/CanvasWidget.tsx @appsmithorg/ui-builders
 app/client/src/widgets/ContainerWidget/* @appsmithorg/ui-builders
 app/client/src/widgets/MetaHOC.tsx @appsmithorg/ui-builders

app/client/src/layoutSystems/autolayout/MainContainerResizer/MainContainerResizer.tsx

@@ -1,13 +1,7 @@
 import { layoutConfigurations } from "constants/WidgetConstants";
 import React, { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
+import { getCurrentApplicationLayout } from "selectors/editorSelectors";
-import {
-  getCurrentApplicationLayout,
-  getCurrentAppPositioningType,
-  getCurrentPageId,
-  previewModeSelector,
-} from "selectors/editorSelectors";
 import { setAutoCanvasResizing } from "actions/autoLayoutActions";
 import styled from "styled-components";
 import { AUTOLAYOUT_RESIZER_WIDTH_BUFFER } from "utils/hooks/useDynamicAppLayout";
@@ -56,25 +50,32 @@ const AutoLayoutCanvasResizer = styled.div`
     }
   }
 `;
-export function CanvasResizer({
+
+/**
+ * OldName: CanvasResizer
+ */
+export function MainContainerResizer({
+  currentPageId,
+  enableMainCanvasResizer,
   heightWithTopMargin,
   isPageInitiated,
+  isPreviewMode,
   shouldHaveTopMargin,
 }: {
   heightWithTopMargin: string;
   isPageInitiated: boolean;
   shouldHaveTopMargin: boolean;
+  isPreviewMode: boolean;
+  currentPageId: string;
+  enableMainCanvasResizer: boolean;
 }) {
-  const isPreviewMode = useSelector(previewModeSelector);
-  const currentPageId = useSelector(getCurrentPageId);
   const appLayout = useSelector(getCurrentApplicationLayout);
-  const appPositioningType = useSelector(getCurrentAppPositioningType);
   const ref = useRef(null);
   const dispatch = useDispatch();
   useEffect(() => {
     const ele: any = document.getElementById(CANVAS_VIEWPORT);
 
-    if (isPageInitiated && appPositioningType === AppPositioningTypes.AUTO) {
+    if (isPageInitiated && enableMainCanvasResizer) {
       const buffer = isPreviewMode ? AUTOLAYOUT_RESIZER_WIDTH_BUFFER : 0;
       const fullWidthCSS = `calc(100% - ${AUTOLAYOUT_RESIZER_WIDTH_BUFFER}px)`;
       const wrapperElement: any = document.getElementById("widgets-editor");
@@ -161,10 +162,10 @@ export function CanvasResizer({
     appLayout,
     isPreviewMode,
     currentPageId,
-    appPositioningType,
+    enableMainCanvasResizer,
     isPageInitiated,
   ]);
-  return appPositioningType === AppPositioningTypes.AUTO ? (
+  return enableMainCanvasResizer ? (
     <AutoLayoutCanvasResizer
       className="resizer-right"
       draggable

app/client/src/layoutSystems/common/useLayoutSystemFeatures.ts

@@ -0,0 +1,55 @@
+import { useSelector } from "react-redux";
+import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
+import { getCurrentAppPositioningType } from "selectors/editorSelectors";
+
+export enum LayoutSystemFeatures {
+  ENABLE_MAIN_CONTAINER_RESIZER = "ENABLE_MAIN_CONTAINER_RESIZER", //enable main canvas resizer
+  ENABLE_FORKING_FROM_TEMPLATES = "ENABLE_FORKING_FROM_TEMPLATES", //enable forking pages from template directly inside apps
+  ENABLE_CANVAS_LAYOUT_CONTROL = "ENABLE_CANVAS_LAYOUT_CONTROL", //enables layout control option in property pane
+}
+
+const FIXED_LAYOUT_FEATURES = {
+  [LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES]: true,
+  [LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL]: true,
+} as Record<LayoutSystemFeatures, boolean>;
+
+const AUTO_LAYOUT_FEATURES = {
+  [LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER]: true,
+} as Record<LayoutSystemFeatures, boolean>;
+
+/**
+ * This Hook is mainly written to be used as a central control to enable
+ * layout specific features based on the type of current layout.
+ * This way the components using it need not be aware of what layout it is on
+ *
+ * @returns This hook returns a method, which can be used to get a boolean corresponding to the feature supplied as argument.
+ * The boolean will indicate if the feature is enabled for the current layout
+ */
+export const useLayoutSystemFeatures = () => {
+  const appPositioningType = useSelector(getCurrentAppPositioningType);
+
+  let currentFeatureSet = {} as Record<LayoutSystemFeatures, boolean>;
+
+  switch (appPositioningType) {
+    case AppPositioningTypes.FIXED:
+      currentFeatureSet = FIXED_LAYOUT_FEATURES;
+      break;
+    case AppPositioningTypes.AUTO:
+      currentFeatureSet = AUTO_LAYOUT_FEATURES;
+      break;
+  }
+
+  /**
+   * This method checks if the features requested in the method,
+   * can be enabled for the given particular layout type
+   */
+  return (checkFeaturesArray: LayoutSystemFeatures[]) => {
+    const featuresArray: boolean[] = [];
+
+    for (const checkFeature of checkFeaturesArray) {
+      featuresArray.push(!!currentFeatureSet[checkFeature]);
+    }
+
+    return featuresArray;
+  };
+};

app/client/src/pages/AppViewer/AppPage.styled.tsx

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
-export const PageViewContainer = styled.div<{
+/**
+ * OldName: PageViewContainer
+ */
+export const PageViewWrapper = styled.div<{
   hasPinnedSidebar: boolean;
   sidebarWidth: number;
   isPreviewMode?: boolean;

app/client/src/pages/AppViewer/AppPage.tsx

@@ -12,7 +12,7 @@ import {
   getAppMode,
 } from "@appsmith/selectors/applicationSelectors";
 import { NAVIGATION_SETTINGS } from "constants/AppConstants";
-import { PageView, PageViewContainer } from "./AppPage.styled";
+import { PageView, PageViewWrapper } from "./AppPage.styled";
 import { useIsMobileDevice } from "utils/hooks/useDeviceDetect";
 import { APP_MODE } from "entities/App";
 import { useLocation } from "react-router";
@@ -50,7 +50,7 @@ export function AppPage(props: AppPageProps) {
   }, [props.pageId, props.pageName]);
 
   return (
-    <PageViewContainer
+    <PageViewWrapper
       hasPinnedSidebar={
         currentApplicationDetails?.applicationDetail?.navigationSetting
           ?.orientation === NAVIGATION_SETTINGS.ORIENTATION.SIDE &&
@@ -65,7 +65,7 @@ export function AppPage(props: AppPageProps) {
         {props.widgetsStructure.widgetId &&
           WidgetFactory.createWidget(props.widgetsStructure, RenderModes.PAGE)}
       </PageView>
-    </PageViewContainer>
+    </PageViewWrapper>
   );
 }
 

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

@@ -22,17 +22,17 @@ interface CanvasProps {
   widgetsStructure: CanvasWidgetStructure;
   pageId: string;
   canvasWidth: number;
-  isAutoLayout?: boolean;
+  enableMainCanvasResizer?: boolean;
 }
 
-const Container = styled.section<{
+const Wrapper = styled.section<{
   background: string;
   width: number;
-  $isAutoLayout: boolean;
+  $enableMainCanvasResizer: boolean;
 }>`
   background: ${({ background }) => background};
-  width: ${({ $isAutoLayout, width }) =>
+  width: ${({ $enableMainCanvasResizer, width }) =>
-    $isAutoLayout ? `100%` : `${width}px`};
+    $enableMainCanvasResizer ? `100%` : `${width}px`};
 `;
 const Canvas = (props: CanvasProps) => {
   const { canvasWidth } = props;
@@ -68,13 +68,15 @@ const Canvas = (props: CanvasProps) => {
 
   const focusRef = useWidgetFocus();
 
-  const marginHorizontalClass = props.isAutoLayout ? `mx-0` : `mx-auto`;
+  const marginHorizontalClass = props.enableMainCanvasResizer
-  const paddingBottomClass = props.isAutoLayout ? "" : "pb-52";
+    ? `mx-0`
+    : `mx-auto`;
+  const paddingBottomClass = props.enableMainCanvasResizer ? "" : "pb-52";
   try {
     return (
       <WDSThemeProvider theme={theme}>
-        <Container
+        <Wrapper
-          $isAutoLayout={!!props.isAutoLayout}
+          $enableMainCanvasResizer={!!props.enableMainCanvasResizer}
           background={backgroundForCanvas}
           className={`relative t--canvas-artboard ${paddingBottomClass} transition-all duration-400  ${marginHorizontalClass} ${getViewportClassName(
             canvasWidth,
@@ -89,7 +91,7 @@ const Canvas = (props: CanvasProps) => {
               props.widgetsStructure,
               RenderModes.CANVAS,
             )}
-        </Container>
+        </Wrapper>
       </WDSThemeProvider>
     );
   } catch (error) {

app/client/src/pages/Editor/CanvasPropertyPane/index.tsx

@@ -1,16 +1,19 @@
 import * as Sentry from "@sentry/react";
 
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { Button, Tooltip } from "design-system";
 
 import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions";
 import ConversionButton from "../CanvasLayoutConversion/ConversionButton";
-import { MainContainerLayoutControl } from "../MainContainerLayoutControl";
-import { getIsAutoLayout } from "selectors/editorSelectors";
 import styled from "styled-components";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import {
+  LayoutSystemFeatures,
+  useLayoutSystemFeatures,
+} from "../../../layoutSystems/common/useLayoutSystemFeatures";
+import { MainContainerWidthToggles } from "../MainContainerWidthToggles";
 
 const Title = styled.p`
   color: var(--ads-v2-color-fg);
@@ -25,7 +28,12 @@ export function CanvasPropertyPane() {
     AnalyticsUtil.logEvent("APP_SETTINGS_BUTTON_CLICK");
     dispatch(openAppSettingsPaneAction());
   };
-  const isAutoLayout = useSelector(getIsAutoLayout);
+
+  const checkLayoutSystemFeatures = useLayoutSystemFeatures();
+  const [enableLayoutControl] = checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL,
+  ]);
+
   return (
     <div className="relative ">
       <MainHeading className="px-4 py-3 text-sm font-medium">
@@ -34,10 +42,10 @@ export function CanvasPropertyPane() {
 
       <div className="mt-3 space-y-6">
         <div className="px-4 space-y-2">
-          {!isAutoLayout && (
+          {enableLayoutControl && (
             <>
               <Title className="text-sm">Canvas size</Title>
-              <MainContainerLayoutControl />
+              <MainContainerWidthToggles />
             </>
           )}
           <ConversionButton />

app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import history from "utils/history";
 import { generateTemplateFormURL } from "RouteBuilder";
 import { useParams } from "react-router";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import type { ExplorerURLParams } from "@appsmith/pages/Editor/Explorer/helpers";
 import { showTemplatesModal } from "actions/templateActions";
 import {
@@ -25,9 +25,12 @@ import {
   Tooltip,
   Text,
 } from "design-system";
-import { getIsAutoLayout } from "selectors/editorSelectors";
 import { isAirgapped } from "@appsmith/utils/airgapHelpers";
 import { TOOLTIP_HOVER_ON_DELAY_IN_S } from "constants/AppConstants";
+import {
+  LayoutSystemFeatures,
+  useLayoutSystemFeatures,
+} from "layoutSystems/common/useLayoutSystemFeatures";
 
 const Wrapper = styled.div`
   .title {
@@ -53,9 +56,13 @@ function AddPageContextMenu({
   const [show, setShow] = useState(openMenu);
   const dispatch = useDispatch();
   const { pageId } = useParams<ExplorerURLParams>();
-  const isAutoLayout = useSelector(getIsAutoLayout);
   const isAirgappedInstance = isAirgapped();
 
+  const checkLayoutSystemFeatures = useLayoutSystemFeatures();
+  const [enableForkingFromTemplates] = checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES,
+  ]);
+
   const ContextMenuItems = useMemo(() => {
     const items = [
       {
@@ -74,7 +81,7 @@ function AddPageContextMenu({
       },
     ];
 
-    if (!isAutoLayout && !isAirgappedInstance) {
+    if (enableForkingFromTemplates && !isAirgappedInstance) {
       items.push({
         title: createMessage(ADD_PAGE_FROM_TEMPLATE),
         icon: "layout-2-line",

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

@@ -29,7 +29,7 @@ import {
 import { MockCanvas } from "test/testMockedWidgets";
 import { act, fireEvent, render, waitFor } from "test/testUtils";
 import * as widgetRenderUtils from "utils/widgetRenderUtils";
-import MainContainer from "../MainContainer";
+import WidgetsEditorWrapper from "../WidgetsEditorWrapper";
 import GlobalHotKeys from "./GlobalHotKeys";
 import * as widgetSelectionsActions from "actions/widgetSelectionActions";
 import { SelectionRequestType } from "sagas/WidgetSelectUtils";
@@ -55,7 +55,7 @@ describe("Canvas Hot Keys", () => {
 
   function UpdatedEditor({ dsl }: any) {
     useMockDsl(dsl);
-    return <MainContainer />;
+    return <WidgetsEditorWrapper />;
   }
 
   // These need to be at the top to avoid imports not being mocked. ideally should be in setup.ts but will override for all other tests

app/client/src/pages/Editor/MainContainerWidthToggles.test.tsx

@@ -7,7 +7,7 @@ import { Provider } from "react-redux";
 
 import { lightTheme } from "selectors/themeSelectors";
 import store from "store";
-import { MainContainerLayoutControl } from "./MainContainerLayoutControl";
+import { MainContainerWidthToggles } from "./MainContainerWidthToggles";
 
 function navigateWithArrowKeys(key: string, noOfPresses: number) {
   for (let i = 0; i < noOfPresses; i++) {
@@ -15,11 +15,11 @@ function navigateWithArrowKeys(key: string, noOfPresses: number) {
   }
 }
 
-describe("<MainContainerLayoutControl />", () => {
+describe("<MainContainerWidthToggles />", () => {
   const getTestComponent = () => (
     <ThemeProvider theme={lightTheme}>
       <Provider store={store}>
-        <MainContainerLayoutControl />
+        <MainContainerWidthToggles />
       </Provider>
     </ThemeProvider>
   );

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

@@ -73,7 +73,10 @@ const options = AppsmithLayouts.map((layout, index) => ({
   value: layout.type,
 }));
 
-export function MainContainerLayoutControl() {
+/**
+ * OldName: MainContainerLayoutControl
+ */
+export function MainContainerWidthToggles() {
   const dispatch = useDispatch();
   const appId = useSelector(getCurrentApplicationId);
   const appLayout = useSelector(getCurrentApplicationLayout);

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

@@ -3,8 +3,6 @@ import styled from "styled-components";
 import { Text, TextType } from "design-system-old";
 import { useDispatch, useSelector } from "react-redux";
 import {
-  getIsAutoLayout,
-  previewModeSelector,
   selectURLSlugs,
   showCanvasTopSectionSelector,
 } from "selectors/editorSelectors";
@@ -24,6 +22,10 @@ import {
 import { deleteCanvasCardsState } from "actions/editorActions";
 import { isAirgapped } from "@appsmith/utils/airgapHelpers";
 import { Icon } from "design-system";
+import {
+  LayoutSystemFeatures,
+  useLayoutSystemFeatures,
+} from "../../../layoutSystems/common/useLayoutSystemFeatures";
 
 const Wrapper = styled.div`
   margin: ${(props) =>
@@ -76,19 +78,37 @@ const goToGenPageForm = ({ pageId }: routeId): void => {
   history.push(generateTemplateFormURL({ pageId }));
 };
 
-function CanvasTopSection() {
+type EmptyCanvasPromptsProps = {
+  isPreviewMode: boolean;
+};
+
+/**
+ * OldName: CanvasTopSection
+ */
+/**
+ * This Component encompasses the prompts for empty canvas
+ * prompts like generate crud app or import from template
+ * @param props Object that contains
+ * @prop isPreviewMode, boolean to indicate preview mode
+ * @returns
+ */
+function EmptyCanvasPrompts(props: EmptyCanvasPromptsProps) {
   const dispatch = useDispatch();
   const showCanvasTopSection = useSelector(showCanvasTopSectionSelector);
-  const inPreviewMode = useSelector(previewModeSelector);
+  const { isPreviewMode } = props;
   const { pageId } = useParams<ExplorerURLParams>();
   const { applicationSlug, pageSlug } = useSelector(selectURLSlugs);
-  const isAutoLayout = useSelector(getIsAutoLayout);
+
+  const checkLayoutSystemFeatures = useLayoutSystemFeatures();
+  const [enableForkingFromTemplates] = checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES,
+  ]);
 
   useEffect(() => {
-    if (!showCanvasTopSection && !inPreviewMode) {
+    if (!showCanvasTopSection && !isPreviewMode) {
       dispatch(deleteCanvasCardsState());
     }
-  }, [showCanvasTopSection, inPreviewMode]);
+  }, [showCanvasTopSection, isPreviewMode]);
 
   if (!showCanvasTopSection) return null;
 
@@ -110,7 +130,7 @@ function CanvasTopSection() {
 
   return (
     <Wrapper data-testid="canvas-ctas">
-      {!isAutoLayout && !isAirgappedInstance && (
+      {enableForkingFromTemplates && !isAirgappedInstance && (
         <Card data-testid="start-from-template" onClick={showTemplatesModal}>
           <Icon name="layout-2-line" size="lg" />
           <Content>
@@ -142,4 +162,4 @@ function CanvasTopSection() {
   );
 }
 
-export default CanvasTopSection;
+export default EmptyCanvasPrompts;

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

@@ -4,7 +4,6 @@ import { useSelector } from "react-redux";
 
 import {
   getCanvasWidth,
-  getCurrentPageId,
   getIsFetchingPage,
   getViewModePageList,
   showCanvasTopSectionSelector,
@@ -24,7 +23,6 @@ import {
   getAppThemeIsChanging,
   getSelectedAppTheme,
 } from "selectors/appThemingSelectors";
-import { getIsAutoLayout } from "selectors/canvasSelectors";
 import { getCurrentThemeDetails } from "selectors/themeSelectors";
 import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector";
 import {
@@ -33,27 +31,32 @@ import {
 } from "utils/hooks/useDynamicAppLayout";
 import Canvas from "../Canvas";
 import type { AppState } from "@appsmith/reducers";
-import { CanvasResizer } from "layoutSystems/autolayout/canvasResizer/CanvasResizer";
+import { MainContainerResizer } from "layoutSystems/autolayout/MainContainerResizer/MainContainerResizer";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { getIsAnonymousDataPopupVisible } from "selectors/onboardingSelectors";
+import {
+  LayoutSystemFeatures,
+  useLayoutSystemFeatures,
+} from "../../../layoutSystems/common/useLayoutSystemFeatures";
 import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
 
-type CanvasContainerProps = {
+type MainCanvasWrapperProps = {
   isPreviewMode: boolean;
   shouldShowSnapShotBanner: boolean;
   navigationHeight?: number;
   isAppSettingsPaneWithNavigationTabOpen?: boolean;
+  currentPageId: string;
 };
 
-const Container = styled.section<{
+const Wrapper = styled.section<{
-  $isAutoLayout: boolean;
+  $enableMainCanvasResizer: boolean;
   background: string;
   isPreviewingNavigation?: boolean;
   isAppSettingsPaneWithNavigationTabOpen?: boolean;
   navigationHeight?: number;
 }>`
-  width: ${({ $isAutoLayout }) =>
+  width: ${({ $enableMainCanvasResizer }) =>
-    $isAutoLayout
+    $enableMainCanvasResizer
       ? `calc(100% - ${AUTOLAYOUT_RESIZER_WIDTH_BUFFER}px)`
       : `100%`};
   position: relative;
@@ -100,15 +103,27 @@ const Container = styled.section<{
   }
 `;
 
-function CanvasContainer(props: CanvasContainerProps) {
+/**
+ * OldName: CanvasContainer
+ */
+/**
+ * This Component encompasses/wraps the center section of the editor
+ * That involves mainly the main container and main container resizer
+ * @param props object that contains
+ * @prop isPreviewMode, boolean to indicate preview mode
+ * @prop shouldShowSnapShotBanner, boolean to indicate if snapshot is shown
+ * @prop navigationHeight, height of navigation header in pixels
+ * @prop isAppSettingsPaneWithNavigationTabOpen, boolean to indicate if app setting navigation ta is open
+ * @prop currentPageId, current page id in string
+ * @returns
+ */
+function MainContainerWrapper(props: MainCanvasWrapperProps) {
   const { isAppSettingsPaneWithNavigationTabOpen, navigationHeight } = props;
   const dispatch = useDispatch();
-  const { isPreviewMode, shouldShowSnapShotBanner } = props;
+  const { currentPageId, isPreviewMode, shouldShowSnapShotBanner } = props;
 
-  const currentPageId = useSelector(getCurrentPageId);
   const isFetchingPage = useSelector(getIsFetchingPage);
   const canvasWidth = useSelector(getCanvasWidth);
-  const isAutoLayout = useSelector(getIsAutoLayout);
   const widgetsStructure = useSelector(getCanvasWidgetsStructure, equal);
   const pages = useSelector(getViewModePageList);
   const theme = useSelector(getCurrentThemeDetails);
@@ -125,6 +140,11 @@ function CanvasContainer(props: CanvasContainerProps) {
   const isPageInitializing = isFetchingPage || !isLayoutingInitialized;
   const isWDSV2Enabled = useFeatureFlag("ab_wds_enabled");
 
+  const checkLayoutSystemFeatures = useLayoutSystemFeatures();
+  const [enableMainContainerResizer] = checkLayoutSystemFeatures([
+    LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER,
+  ]);
+
   useEffect(() => {
     return () => {
       dispatch(forceOpenWidgetPanel(false));
@@ -151,7 +171,7 @@ function CanvasContainer(props: CanvasContainerProps) {
     node = (
       <Canvas
         canvasWidth={canvasWidth}
-        isAutoLayout={isAutoLayout}
+        enableMainCanvasResizer={enableMainContainerResizer}
         pageId={params.pageId}
         widgetsStructure={widgetsStructure}
       />
@@ -182,8 +202,8 @@ function CanvasContainer(props: CanvasContainerProps) {
   const heightWithTopMargin = `calc(100vh - 2rem - ${topMargin} - ${smallHeaderHeight} - ${bottomBarHeight} - ${scrollBarHeight} - ${navigationHeight}px)`;
   return (
     <>
-      <Container
+      <Wrapper
-        $isAutoLayout={isAutoLayout}
+        $enableMainCanvasResizer={enableMainContainerResizer}
         background={
           isPreviewMode || isAppSettingsPaneWithNavigationTabOpen
             ? isWDSV2Enabled
@@ -230,14 +250,17 @@ function CanvasContainer(props: CanvasContainerProps) {
           </div>
         )}
         {node}
-      </Container>
+      </Wrapper>
-      <CanvasResizer
+      <MainContainerResizer
+        currentPageId={currentPageId}
+        enableMainCanvasResizer={enableMainContainerResizer}
         heightWithTopMargin={heightWithTopMargin}
         isPageInitiated={!isPageInitializing && !!widgetsStructure}
+        isPreviewMode={isPreviewMode}
         shouldHaveTopMargin={shouldHaveTopMargin}
       />
     </>
   );
 }
 
-export default CanvasContainer;
+export default MainContainerWrapper;

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

@@ -4,7 +4,10 @@ import React, { useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getPropertyPaneWidth } from "selectors/propertyPaneSelectors";
 
-function PropertyPaneContainer() {
+/**
+ * OldName: PropertyPaneContainer
+ */
+function PropertyPaneWrapper() {
   const dispatch = useDispatch();
   const propertyPaneWidth = useSelector(getPropertyPaneWidth);
 
@@ -33,4 +36,4 @@ function PropertyPaneContainer() {
   );
 }
 
-export default PropertyPaneContainer;
+export default PropertyPaneWrapper;

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

@@ -27,17 +27,17 @@ import { useAllowEditorDragToSelect } from "utils/hooks/useAllowEditorDragToSele
 import { inGuidedTour } from "selectors/onboardingSelectors";
 import EditorContextProvider from "components/editorComponents/EditorContextProvider";
 import Guide from "../GuidedTour/Guide";
-import CanvasContainer from "./CanvasContainer";
+import MainContainerWrapper from "./MainContainerWrapper";
-import CanvasTopSection from "./EmptyCanvasSection";
+import EmptyCanvasPrompts from "./EmptyCanvasPrompts";
 import { useAutoHeightUIState } from "utils/hooks/autoHeightUIHooks";
-import { PageViewContainer } from "pages/AppViewer/AppPage.styled";
+import { PageViewWrapper } from "pages/AppViewer/AppPage.styled";
 import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import {
   getAppSettingsPaneContext,
   getIsAppSettingsPaneWithNavigationTabOpen,
 } from "selectors/appSettingsPaneSelectors";
 import { AppSettingsTabs } from "../AppSettingsPane/AppSettings";
-import PropertyPaneContainer from "./PropertyPaneContainer";
+import PropertyPaneWrapper from "./PropertyPaneWrapper";
 import SnapShotBannerCTA from "../CanvasLayoutConversion/SnapShotBannerCTA";
 import { APP_MODE } from "entities/App";
 import { getSelectedAppTheme } from "selectors/appThemingSelectors";
@@ -172,7 +172,9 @@ function WidgetsEditor() {
               isAppSettingsPaneWithNavigationTabOpen,
           })}
         >
-          {!isAppSettingsPaneWithNavigationTabOpen && <CanvasTopSection />}
+          {!isAppSettingsPaneWithNavigationTabOpen && (
+            <EmptyCanvasPrompts isPreviewMode={isPreviewMode} />
+          )}
           <AnonymousDataPopup />
           <div
             className="relative flex flex-row w-full overflow-hidden"
@@ -187,7 +189,7 @@ function WidgetsEditor() {
           >
             {showNavigation()}
 
-            <PageViewContainer
+            <PageViewWrapper
               className={classNames({
                 "relative flex flex-row w-full justify-center overflow-hidden":
                   true,
@@ -210,7 +212,8 @@ function WidgetsEditor() {
                   <SnapShotBannerCTA />
                 </div>
               )}
-              <CanvasContainer
+              <MainContainerWrapper
+                currentPageId={currentPageId}
                 isAppSettingsPaneWithNavigationTabOpen={
                   AppSettingsTabs.Navigation === appSettingsPaneContext?.type
                 }
@@ -218,13 +221,13 @@ function WidgetsEditor() {
                 navigationHeight={navigationHeight}
                 shouldShowSnapShotBanner={shouldShowSnapShotBanner}
               />
-            </PageViewContainer>
+            </PageViewWrapper>
 
             <CrudInfoModal />
           </div>
           <Debugger />
         </div>
-        <PropertyPaneContainer />
+        <PropertyPaneWrapper />
       </div>
     </EditorContextProvider>
   );

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

@@ -21,7 +21,7 @@ import BottomBar from "components/BottomBar";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
-const Container = styled.div`
+const Wrapper = styled.div`
   display: flex;
   height: calc(
     100vh - ${(props) => props.theme.smallHeaderHeight} -
@@ -30,7 +30,10 @@ const Container = styled.div`
   background-color: ${(props) => props.theme.appBackground};
 `;
 
-function MainContainer() {
+/**
+ * OldName: MainContainer
+ */
+function WidgetsEditorWrapper() {
   const dispatch = useDispatch();
   const sidebarWidth = useSelector(getExplorerWidth);
   const { path } = useRouteMatch();
@@ -57,7 +60,7 @@ function MainContainer() {
 
   return (
     <>
-      <Container className="relative w-full overflow-x-hidden">
+      <Wrapper className="relative w-full overflow-x-hidden">
         <EntityExplorerSidebar
           onDragEnd={onLeftSidebarDragEnd}
           onWidthChange={onLeftSidebarWidthChange}
@@ -92,12 +95,12 @@ function MainContainer() {
             <SentryRoute component={EditorsRouter} />
           </Switch>
         </div>
-      </Container>
+      </Wrapper>
       <BottomBar viewMode={isPreviewMode} />
     </>
   );
 }
 
-MainContainer.displayName = "MainContainer";
+WidgetsEditorWrapper.displayName = "WidgetsEditorWrapper";
 
-export default MainContainer;
+export default WidgetsEditorWrapper;

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

@@ -5,7 +5,7 @@ import type { RouteComponentProps } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import type { BuilderRouteParams } from "constants/routes";
 import type { AppState } from "@appsmith/reducers";
-import MainContainer from "./MainContainer";
+import WidgetsEditorWrapper from "./WidgetsEditorWrapper";
 import {
   getCurrentApplicationId,
   getIsEditorInitialized,
@@ -159,7 +159,7 @@ class Editor extends Component<Props> {
             </title>
           </Helmet>
           <GlobalHotKeys>
-            <MainContainer />
+            <WidgetsEditorWrapper />
             <GitSyncModal />
             <EnvDeployInfoModal />
             <DisconnectGitModal />

app/client/test/testMockedWidgets.tsx

@@ -1,7 +1,7 @@
 import { APP_MODE } from "entities/App";
 import AppViewerPageContainer from "pages/AppViewer/AppViewerPageContainer";
 import Canvas from "pages/Editor/Canvas";
-import MainContainer from "pages/Editor/MainContainer";
+import WidgetsEditorWrapper from "pages/Editor/WidgetsEditorWrapper";
 import React from "react";
 import { useSelector } from "react-redux";
 import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector";
@@ -24,5 +24,5 @@ export function UpdateAppViewer({ dsl }: any) {
 }
 export function UpdatedEditor({ dsl }: any) {
   useMockDsl(dsl, APP_MODE.EDIT);
-  return <MainContainer />;
+  return <WidgetsEditorWrapper />;
 }