From 7685e37c09e653d0b86ad78d6bd0c134578d1d9b Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 16 Jul 2024 12:23:28 +0530
Subject: [PATCH 01/16] reorg-js-segment

---
 .../pages/Editor/IDE/EditorPane/JS/hooks.ts   | 51 +++++++------------
 .../IDE/EditorPane/EditorPaneSegments.tsx     |  4 +-
 .../pages/Editor/IDE/EditorPane/JS/Editor.tsx | 23 +++++++++
 .../Editor/IDE/EditorPane/JS/Explorer.tsx     |  8 +++
 .../pages/Editor/IDE/EditorPane/JS/index.tsx  | 25 +--------
 5 files changed, 53 insertions(+), 58 deletions(-)
 create mode 100644 app/client/src/pages/Editor/IDE/EditorPane/JS/Editor.tsx
 create mode 100644 app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx

diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
index 6d5a2c96abb3..7e862279f442 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
@@ -7,12 +7,9 @@ import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import { JsFileIconV2 } from "pages/Editor/Explorer/ExplorerIcons";
 import { SEARCH_ITEM_TYPES } from "components/editorComponents/GlobalSearch/utils";
 import type { UseRoutes } from "@appsmith/entities/IDE/constants";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import JSEditor from "pages/Editor/JSEditor";
 import AddJS from "pages/Editor/IDE/EditorPane/JS/Add";
 import { ADD_PATH } from "@appsmith/constants/routes/appRoutes";
-import ListJS from "pages/Editor/IDE/EditorPane/JS/List";
 import history from "utils/history";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useModuleOptions } from "@appsmith/utils/moduleInstanceHelpers";
@@ -43,7 +40,7 @@ export const useJSAdd = () => {
   const closeAddJS = useCallback(() => {
     const url = getJSUrl(currentEntityInfo, false);
     history.push(url);
-  }, [pageId, currentEntityInfo]);
+  }, [currentEntityInfo]);
 
   return { openAddJS, closeAddJS };
 };
@@ -77,37 +74,25 @@ export const useGroupedAddJsOperations = (): GroupedAddOperations => {
   ];
 };
 
-export const useJSSegmentRoutes = (path: string): UseRoutes => {
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-  const editorMode = useSelector(getIDEViewMode);
-  if (isSideBySideEnabled && editorMode === EditorViewMode.SplitScreen) {
-    return [
-      {
-        exact: true,
-        key: "AddJS",
-        component: AddJS,
-        path: [`${path}${ADD_PATH}`, `${path}/:collectionId${ADD_PATH}`],
-      },
-      {
-        exact: true,
-        key: "JSEditor",
-        component: JSEditor,
-        path: [path + "/:collectionId"],
-      },
-      {
-        key: "JSEmpty",
-        component: JSBlankState,
-        exact: true,
-        path: [path],
-      },
-    ];
-  }
+export const useJSEditorRoutes = (path: string): UseRoutes => {
   return [
     {
-      exact: false,
-      key: "ListJS",
-      component: ListJS,
-      path: [path, `${path}${ADD_PATH}`, `${path}/:collectionId${ADD_PATH}`],
+      exact: true,
+      key: "AddJS",
+      component: AddJS,
+      path: [`${path}${ADD_PATH}`, `${path}/:collectionId${ADD_PATH}`],
+    },
+    {
+      exact: true,
+      key: "JSEditor",
+      component: JSEditor,
+      path: [path + "/:collectionId"],
+    },
+    {
+      key: "JSEmpty",
+      component: JSBlankState,
+      exact: true,
+      path: [path],
     },
   ];
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx b/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
index 5d44ec5edf28..f009c307321e 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
@@ -4,7 +4,7 @@ import { Switch, useRouteMatch } from "react-router";
 import { SentryRoute } from "@appsmith/AppRouter";
 import QueriesSegment from "./Query";
 import WidgetsSegment from "./UI";
-import JSSegment from "./JS";
+import { JSEditorPane } from "./JS";
 import SegmentedHeader from "./components/SegmentedHeader";
 import EditorTabs from "../EditorTabs";
 import {
@@ -47,7 +47,7 @@ const EditorPaneSegments = () => {
             path={querySegmentRoutes.map((route) => `${path}${route}`)}
           />
           <SentryRoute
-            component={JSSegment}
+            component={JSEditorPane}
             path={jsSegmentRoutes.map((route) => `${path}${route}`)}
           />
           <SentryRoute
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Editor.tsx
new file mode 100644
index 000000000000..11981cca38d6
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Editor.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Switch, useRouteMatch } from "react-router";
+import { useJSEditorRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
+import { SentryRoute } from "@appsmith/AppRouter";
+
+const JSEditorPane = () => {
+  const { path } = useRouteMatch();
+  const routes = useJSEditorRoutes(path);
+  return (
+    <Switch>
+      {routes.map((route) => (
+        <SentryRoute
+          component={route.component}
+          exact={route.exact}
+          key={route.key}
+          path={route.path}
+        />
+      ))}
+    </Switch>
+  );
+};
+
+export { JSEditorPane };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx
new file mode 100644
index 000000000000..55174aedc5f1
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import List from "./List";
+
+const JSExplorer = () => {
+  return <List />;
+};
+
+export { JSExplorer };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx
index c8eca8b83d2c..8e08bd29f3db 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/index.tsx
@@ -1,23 +1,2 @@
-import React from "react";
-import { Switch, useRouteMatch } from "react-router";
-import { SentryRoute } from "@appsmith/AppRouter";
-import { useJSSegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
-
-const JSSegment = () => {
-  const { path } = useRouteMatch();
-  const routes = useJSSegmentRoutes(path);
-  return (
-    <Switch>
-      {routes.map((route) => (
-        <SentryRoute
-          component={route.component}
-          exact={route.exact}
-          key={route.key}
-          path={route.path}
-        />
-      ))}
-    </Switch>
-  );
-};
-
-export default JSSegment;
+export { JSExplorer } from "./Explorer";
+export { JSEditorPane } from "./Editor";

From cad22b6c79aba6ce08ab279d34abbc0d8e80dd37 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Wed, 17 Jul 2024 10:18:13 +0530
Subject: [PATCH 02/16] separate Editor and Explorer end points

---
 .../pages/Editor/IDE/EditorPane/Editor.tsx    | 29 +++++++++++++++++++
 .../pages/Editor/IDE/EditorPane/Explorer.tsx  | 27 +++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
 create mode 100644 app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
new file mode 100644
index 000000000000..31f145b5e5d8
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { Flex } from "design-system";
+import { Switch, useRouteMatch } from "react-router";
+import { SentryRoute } from "@appsmith/AppRouter";
+import { jsSegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/constants";
+import { JSEditorPane } from "./JS";
+import EditorTabs from "../EditorTabs";
+
+const EditorPaneExplorer = () => {
+  const { path } = useRouteMatch();
+  return (
+    <Flex
+      className="relative"
+      flexDirection="column"
+      height="100%"
+      overflow="hidden"
+    >
+      <EditorTabs />
+      <Switch>
+        <SentryRoute
+          component={JSEditorPane}
+          path={jsSegmentRoutes.map((route) => `${path}${route}`)}
+        />
+      </Switch>
+    </Flex>
+  );
+};
+
+export default EditorPaneExplorer;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
new file mode 100644
index 000000000000..147ce283c379
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Flex } from "design-system";
+import { Switch, useRouteMatch } from "react-router";
+import { SentryRoute } from "@appsmith/AppRouter";
+import { jsSegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/constants";
+import { JSExplorer } from "./JS";
+
+const EditorPaneExplorer = () => {
+  const { path } = useRouteMatch();
+  return (
+    <Flex
+      className="relative"
+      flexDirection="column"
+      height="100%"
+      overflow="hidden"
+    >
+      <Switch>
+        <SentryRoute
+          component={JSExplorer}
+          path={jsSegmentRoutes.map((route) => `${path}${route}`)}
+        />
+      </Switch>
+    </Flex>
+  );
+};
+
+export default EditorPaneExplorer;

From 50852decb9e92ea6e06624c789e52184ef3ae37b Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Wed, 17 Jul 2024 10:58:16 +0530
Subject: [PATCH 03/16] separate end points for queries

---
 .../Editor/IDE/EditorPane/Query/hooks.tsx     | 96 ++++++++-----------
 .../pages/Editor/IDE/EditorPane/Editor.tsx    | 10 +-
 .../pages/Editor/IDE/EditorPane/Explorer.tsx  | 10 +-
 .../Editor/IDE/EditorPane/Query/Editor.tsx    | 24 +++++
 .../Editor/IDE/EditorPane/Query/Explorer.tsx  | 30 ++++++
 .../Editor/IDE/EditorPane/Query/index.tsx     | 45 +--------
 6 files changed, 113 insertions(+), 102 deletions(-)
 create mode 100644 app/client/src/pages/Editor/IDE/EditorPane/Query/Editor.tsx
 create mode 100644 app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx

diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
index f6693102099e..5d5b1b1275ce 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
@@ -15,7 +15,6 @@ import type { ActionOperation } from "components/editorComponents/GlobalSearch/u
 import { SEARCH_ITEM_TYPES } from "components/editorComponents/GlobalSearch/utils";
 import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import { getQueryUrl } from "@appsmith/pages/Editor/IDE/EditorPane/Query/utils";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
 import {
   ADD_PATH,
   API_EDITOR_ID_PATH,
@@ -26,22 +25,18 @@ import {
 import { SAAS_EDITOR_API_ID_PATH } from "pages/Editor/SaaSEditor/constants";
 import ApiEditor from "pages/Editor/APIEditor";
 import type { UseRoutes } from "@appsmith/entities/IDE/constants";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import QueryEditor from "pages/Editor/QueryEditor";
 import AddQuery from "pages/Editor/IDE/EditorPane/Query/Add";
-import ListQuery from "pages/Editor/IDE/EditorPane/Query/List";
 import type { AppState } from "@appsmith/reducers";
 import keyBy from "lodash/keyBy";
 import { getPluginEntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
 import { Tag, type ListItemProps } from "design-system";
-import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
 import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
 
 export const useQueryAdd = () => {
   const location = useLocation();
   const currentEntityInfo = identifyEntityFromPath(location.pathname);
-  const { segmentMode } = useCurrentEditorState();
 
   const openAddQuery = useCallback(() => {
     if (currentEntityInfo.entity === FocusEntity.QUERY_ADD) {
@@ -50,13 +45,13 @@ export const useQueryAdd = () => {
     let url = "";
     url = getQueryUrl(currentEntityInfo);
     history.push(url);
-  }, [currentEntityInfo, segmentMode, location]);
+  }, [currentEntityInfo]);
 
   const closeAddQuery = useCallback(() => {
     let url = "";
     url = getQueryUrl(currentEntityInfo, false);
     history.push(url);
-  }, [currentEntityInfo, segmentMode, location]);
+  }, [currentEntityInfo]);
 
   return { openAddQuery, closeAddQuery };
 };
@@ -107,58 +102,45 @@ export const useGroupedAddQueryOperations = (): GroupedAddOperations => {
   return groups;
 };
 
-export const useQuerySegmentRoutes = (path: string): UseRoutes => {
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-  const editorMode = useSelector(getIDEViewMode);
-
-  if (isSideBySideEnabled && editorMode === EditorViewMode.SplitScreen) {
-    return [
-      {
-        key: "ApiEditor",
-        component: ApiEditor,
-        exact: true,
-        path: [
-          BUILDER_PATH + API_EDITOR_ID_PATH,
-          BUILDER_CUSTOM_PATH + API_EDITOR_ID_PATH,
-          BUILDER_PATH_DEPRECATED + API_EDITOR_ID_PATH,
-        ],
-      },
-      {
-        key: "AddQuery",
-        exact: true,
-        component: AddQuery,
-        path: [`${path}${ADD_PATH}`, `${path}/:queryId${ADD_PATH}`],
-      },
-      {
-        key: "SAASEditor",
-        component: QueryEditor,
-        exact: true,
-        path: [
-          BUILDER_PATH + SAAS_EDITOR_API_ID_PATH,
-          BUILDER_CUSTOM_PATH + SAAS_EDITOR_API_ID_PATH,
-          BUILDER_PATH_DEPRECATED + SAAS_EDITOR_API_ID_PATH,
-        ],
-      },
-      {
-        key: "QueryEditor",
-        component: QueryEditor,
-        exact: true,
-        path: [path + "/:queryId"],
-      },
-      {
-        key: "QueryEmpty",
-        component: QueriesBlankState,
-        exact: true,
-        path: [path],
-      },
-    ];
-  }
+export const useQueryEditorRoutes = (path: string): UseRoutes => {
   return [
     {
-      key: "ListQuery",
-      exact: false,
-      component: ListQuery,
-      path: [path, `${path}${ADD_PATH}`, `${path}/:queryId${ADD_PATH}`],
+      key: "ApiEditor",
+      component: ApiEditor,
+      exact: true,
+      path: [
+        BUILDER_PATH + API_EDITOR_ID_PATH,
+        BUILDER_CUSTOM_PATH + API_EDITOR_ID_PATH,
+        BUILDER_PATH_DEPRECATED + API_EDITOR_ID_PATH,
+      ],
+    },
+    {
+      key: "AddQuery",
+      exact: true,
+      component: AddQuery,
+      path: [`${path}${ADD_PATH}`, `${path}/:queryId${ADD_PATH}`],
+    },
+    {
+      key: "SAASEditor",
+      component: QueryEditor,
+      exact: true,
+      path: [
+        BUILDER_PATH + SAAS_EDITOR_API_ID_PATH,
+        BUILDER_CUSTOM_PATH + SAAS_EDITOR_API_ID_PATH,
+        BUILDER_PATH_DEPRECATED + SAAS_EDITOR_API_ID_PATH,
+      ],
+    },
+    {
+      key: "QueryEditor",
+      component: QueryEditor,
+      exact: true,
+      path: [path + "/:queryId"],
+    },
+    {
+      key: "QueryEmpty",
+      component: QueriesBlankState,
+      exact: true,
+      path: [path],
     },
   ];
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
index 31f145b5e5d8..98b720fb5841 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
@@ -2,8 +2,12 @@ import React from "react";
 import { Flex } from "design-system";
 import { Switch, useRouteMatch } from "react-router";
 import { SentryRoute } from "@appsmith/AppRouter";
-import { jsSegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/constants";
+import {
+  jsSegmentRoutes,
+  querySegmentRoutes,
+} from "@appsmith/pages/Editor/IDE/EditorPane/constants";
 import { JSEditorPane } from "./JS";
+import { QueryEditor } from "./Query";
 import EditorTabs from "../EditorTabs";
 
 const EditorPaneExplorer = () => {
@@ -21,6 +25,10 @@ const EditorPaneExplorer = () => {
           component={JSEditorPane}
           path={jsSegmentRoutes.map((route) => `${path}${route}`)}
         />
+        <SentryRoute
+          component={QueryEditor}
+          path={querySegmentRoutes.map((route) => `${path}${route}`)}
+        />
       </Switch>
     </Flex>
   );
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
index 147ce283c379..9af9f6b51473 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -2,8 +2,12 @@ import React from "react";
 import { Flex } from "design-system";
 import { Switch, useRouteMatch } from "react-router";
 import { SentryRoute } from "@appsmith/AppRouter";
-import { jsSegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/constants";
+import {
+  jsSegmentRoutes,
+  querySegmentRoutes,
+} from "@appsmith/pages/Editor/IDE/EditorPane/constants";
 import { JSExplorer } from "./JS";
+import { QueryExplorer } from "./Query";
 
 const EditorPaneExplorer = () => {
   const { path } = useRouteMatch();
@@ -19,6 +23,10 @@ const EditorPaneExplorer = () => {
           component={JSExplorer}
           path={jsSegmentRoutes.map((route) => `${path}${route}`)}
         />
+        <SentryRoute
+          component={QueryExplorer}
+          path={querySegmentRoutes.map((route) => `${path}${route}`)}
+        />
       </Switch>
     </Flex>
   );
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Editor.tsx
new file mode 100644
index 000000000000..2616c75e89e8
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Editor.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { useRouteMatch } from "react-router";
+import { Switch } from "react-router-dom";
+import { useQueryEditorRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
+import { SentryRoute } from "@appsmith/AppRouter";
+
+const QueryEditor = () => {
+  const { path } = useRouteMatch();
+  const routes = useQueryEditorRoutes(path);
+  return (
+    <Switch>
+      {routes.map((route) => (
+        <SentryRoute
+          component={route.component}
+          exact={route.exact}
+          key={route.key}
+          path={route.path}
+        />
+      ))}
+    </Switch>
+  );
+};
+
+export { QueryEditor };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
new file mode 100644
index 000000000000..fce4a194a4e9
--- /dev/null
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import List from "./List";
+import styled from "styled-components";
+import { Flex } from "design-system";
+
+const QueriesContainer = styled(Flex)`
+  & .t--entity-item {
+    grid-template-columns: 0 auto 1fr auto auto auto auto auto;
+    height: 32px;
+
+    & .t--entity-name {
+      padding-left: var(--ads-v2-spaces-3);
+    }
+  }
+`;
+
+const QueryExplorer = () => {
+  return (
+    <QueriesContainer
+      className="ide-editor-left-pane__content-queries"
+      flexDirection="column"
+      height="100%"
+      overflow="hidden"
+    >
+      <List />
+    </QueriesContainer>
+  );
+};
+
+export { QueryExplorer };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx
index cafcf48c7851..27d92d39df27 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/index.tsx
@@ -1,43 +1,2 @@
-import React from "react";
-import { Flex } from "design-system";
-import styled from "styled-components";
-import { Switch, useRouteMatch } from "react-router";
-import { SentryRoute } from "@appsmith/AppRouter";
-import { useQuerySegmentRoutes } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
-
-const QueriesContainer = styled(Flex)`
-  & .t--entity-item {
-    grid-template-columns: 0 auto 1fr auto auto auto auto auto;
-    height: 32px;
-
-    & .t--entity-name {
-      padding-left: var(--ads-v2-spaces-3);
-    }
-  }
-`;
-
-const QueriesSegment = () => {
-  const { path } = useRouteMatch();
-  const routes = useQuerySegmentRoutes(path);
-  return (
-    <QueriesContainer
-      className="ide-editor-left-pane__content-queries"
-      flexDirection="column"
-      height="100%"
-      overflow="hidden"
-    >
-      <Switch>
-        {routes.map((route) => (
-          <SentryRoute
-            component={route.component}
-            exact={route.exact}
-            key={route.key}
-            path={route.path}
-          />
-        ))}
-      </Switch>
-    </QueriesContainer>
-  );
-};
-
-export default QueriesSegment;
+export { QueryEditor } from "./Editor";
+export { QueryExplorer } from "./Explorer";

From 53b78e486fabd2933e24da6648fc1c7fe913a4a7 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Wed, 17 Jul 2024 11:19:19 +0530
Subject: [PATCH 04/16] split and full divide

---
 app/client/src/constants/AppConstants.ts      |  4 +-
 .../pages/Editor/IDE/EditorPane/Editor.tsx    |  4 +-
 .../IDE/EditorPane/EditorPaneSegments.tsx     | 68 -------------------
 .../pages/Editor/IDE/EditorPane/Explorer.tsx  | 50 +++++++++++---
 .../src/pages/Editor/IDE/EditorPane/index.tsx | 30 ++++----
 app/client/src/pages/Editor/IDE/hooks.ts      | 21 ++++--
 6 files changed, 71 insertions(+), 106 deletions(-)
 delete mode 100644 app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx

diff --git a/app/client/src/constants/AppConstants.ts b/app/client/src/constants/AppConstants.ts
index 74000e26d983..bca3ab1e7815 100644
--- a/app/client/src/constants/AppConstants.ts
+++ b/app/client/src/constants/AppConstants.ts
@@ -12,8 +12,8 @@ export const CANVAS_BACKGROUND_COLOR = "#FFFFFF";
 export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256;
 export const DEFAULT_PROPERTY_PANE_WIDTH = 288;
 export const APP_SETTINGS_PANE_WIDTH = 525;
-export const DEFAULT_EDITOR_PANE_WIDTH = 255;
-export const DEFAULT_SPLIT_SCREEN_WIDTH = "40.4vw";
+export const DEFAULT_EXPLORER_PANE_WIDTH = 255;
+export const SPLIT_SCREEN_RATIO = 0.404;
 
 const APP_STORE_NAMESPACE = "APPSMITH_LOCAL_STORE";
 
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
index 98b720fb5841..ef4230d280fd 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
@@ -10,7 +10,7 @@ import { JSEditorPane } from "./JS";
 import { QueryEditor } from "./Query";
 import EditorTabs from "../EditorTabs";
 
-const EditorPaneExplorer = () => {
+const Editor = () => {
   const { path } = useRouteMatch();
   return (
     <Flex
@@ -34,4 +34,4 @@ const EditorPaneExplorer = () => {
   );
 };
 
-export default EditorPaneExplorer;
+export default Editor;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx b/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
deleted file mode 100644
index f009c307321e..000000000000
--- a/app/client/src/pages/Editor/IDE/EditorPane/EditorPaneSegments.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-import { Flex } from "design-system";
-import { Switch, useRouteMatch } from "react-router";
-import { SentryRoute } from "@appsmith/AppRouter";
-import QueriesSegment from "./Query";
-import WidgetsSegment from "./UI";
-import { JSEditorPane } from "./JS";
-import SegmentedHeader from "./components/SegmentedHeader";
-import EditorTabs from "../EditorTabs";
-import {
-  jsSegmentRoutes,
-  querySegmentRoutes,
-  widgetSegmentRoutes,
-} from "@appsmith/pages/Editor/IDE/EditorPane/constants";
-import {
-  BUILDER_CUSTOM_PATH,
-  BUILDER_PATH,
-  BUILDER_PATH_DEPRECATED,
-} from "@appsmith/constants/routes/appRoutes";
-import { useSelector } from "react-redux";
-import { getIDEViewMode } from "selectors/ideSelectors";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
-
-const EditorPaneSegments = () => {
-  const { path } = useRouteMatch();
-  const ideViewMode = useSelector(getIDEViewMode);
-
-  return (
-    <Flex
-      className="relative"
-      flexDirection="column"
-      height="100%"
-      overflow="hidden"
-    >
-      <SegmentedHeader />
-      {ideViewMode === EditorViewMode.SplitScreen ? <EditorTabs /> : null}
-      <Flex
-        className="ide-editor-left-pane__content"
-        flexDirection="column"
-        height="100%"
-        overflow="hidden"
-        width="100%"
-      >
-        <Switch>
-          <SentryRoute
-            component={QueriesSegment}
-            path={querySegmentRoutes.map((route) => `${path}${route}`)}
-          />
-          <SentryRoute
-            component={JSEditorPane}
-            path={jsSegmentRoutes.map((route) => `${path}${route}`)}
-          />
-          <SentryRoute
-            component={WidgetsSegment}
-            path={[
-              BUILDER_PATH,
-              BUILDER_CUSTOM_PATH,
-              BUILDER_PATH_DEPRECATED,
-              ...widgetSegmentRoutes.map((route) => `${path}${route}`),
-            ]}
-          />
-        </Switch>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default EditorPaneSegments;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
index 9af9f6b51473..850d8c438593 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -5,29 +5,59 @@ import { SentryRoute } from "@appsmith/AppRouter";
 import {
   jsSegmentRoutes,
   querySegmentRoutes,
+  widgetSegmentRoutes,
 } from "@appsmith/pages/Editor/IDE/EditorPane/constants";
 import { JSExplorer } from "./JS";
 import { QueryExplorer } from "./Query";
+import WidgetsSegment from "./UI";
+import {
+  BUILDER_CUSTOM_PATH,
+  BUILDER_PATH,
+  BUILDER_PATH_DEPRECATED,
+} from "@appsmith/constants/routes/appRoutes";
+import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
+import SegmentedHeader from "./components/SegmentedHeader";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
 
 const EditorPaneExplorer = () => {
   const { path } = useRouteMatch();
+  const ideViewMode = useSelector(getIDEViewMode);
   return (
     <Flex
       className="relative"
       flexDirection="column"
       height="100%"
       overflow="hidden"
+      width={DEFAULT_EXPLORER_PANE_WIDTH}
     >
-      <Switch>
-        <SentryRoute
-          component={JSExplorer}
-          path={jsSegmentRoutes.map((route) => `${path}${route}`)}
-        />
-        <SentryRoute
-          component={QueryExplorer}
-          path={querySegmentRoutes.map((route) => `${path}${route}`)}
-        />
-      </Switch>
+      <SegmentedHeader />
+      {/** Entity Properties component is needed to render
+       the Bindings popover in the context menu. Will be removed eventually **/}
+      <EntityProperties />
+      {ideViewMode === EditorViewMode.FullScreen ? (
+        <Switch>
+          <SentryRoute
+            component={JSExplorer}
+            path={jsSegmentRoutes.map((route) => `${path}${route}`)}
+          />
+          <SentryRoute
+            component={QueryExplorer}
+            path={querySegmentRoutes.map((route) => `${path}${route}`)}
+          />
+          <SentryRoute
+            component={WidgetsSegment}
+            path={[
+              BUILDER_PATH,
+              BUILDER_CUSTOM_PATH,
+              BUILDER_PATH_DEPRECATED,
+              ...widgetSegmentRoutes.map((route) => `${path}${route}`),
+            ]}
+          />
+        </Switch>
+      ) : null}
     </Flex>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
index ec3afd83668c..421fa153a111 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
@@ -1,35 +1,29 @@
 import React from "react";
 import { Flex } from "design-system";
-import type { RouteComponentProps } from "react-router";
-import { Switch } from "react-router";
-
-import { SentryRoute } from "@appsmith/AppRouter";
-import { ADD_PATH } from "constants/routes";
-import EditorPaneSegments from "./EditorPaneSegments";
-import GlobalAdd from "./GlobalAdd";
 import { useEditorPaneWidth } from "../hooks";
-import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
+import EditorPaneExplorer from "./Explorer";
+import Editor from "./Editor";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
-const EditorPane = ({ match: { path } }: RouteComponentProps) => {
+const EditorPane = () => {
   const width = useEditorPaneWidth();
+  const ideViewMode = useSelector(getIDEViewMode);
 
   return (
     <Flex
       className="ide-editor-left-pane"
-      flexDirection="column"
+      flexDirection={
+        ideViewMode === EditorViewMode.SplitScreen ? "column" : "row"
+      }
       gap="spacing-2"
       height="100%"
       overflow="hidden"
       width={width}
     >
-      {/** Entity Properties component is needed to render
-        the Bindings popover in the context menu. Will be removed eventually **/}
-      <EntityProperties />
-
-      <Switch>
-        <SentryRoute component={GlobalAdd} exact path={`${path}${ADD_PATH}`} />
-        <SentryRoute component={EditorPaneSegments} />
-      </Switch>
+      <EditorPaneExplorer />
+      <Editor />
     </Flex>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index c7cbb2549e49..c81f3c7b7812 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -22,8 +22,9 @@ import {
 import { getCurrentFocusInfo } from "selectors/focusHistorySelectors";
 import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
 import {
-  DEFAULT_EDITOR_PANE_WIDTH,
-  DEFAULT_SPLIT_SCREEN_WIDTH,
+  APP_SIDEBAR_WIDTH,
+  DEFAULT_EXPLORER_PANE_WIDTH,
+  SPLIT_SCREEN_RATIO,
 } from "constants/AppConstants";
 import { getIsAltFocusWidget, getWidgetSelectionBlock } from "selectors/ui";
 import { altFocusWidget, setWidgetSelectionBlock } from "actions/widgetActions";
@@ -35,6 +36,7 @@ import { FocusElement } from "navigation/FocusElements";
 import { closeJSActionTab } from "actions/jsActionActions";
 import { closeQueryActionTab } from "actions/pluginActionActions";
 import { getCurrentEntityInfo } from "../utils";
+import useWindowDimensions from "../../../utils/hooks/useWindowDimensions";
 
 export const useCurrentAppState = () => {
   const [appState, setAppState] = useState(EditorState.EDITOR);
@@ -74,7 +76,8 @@ export const useCurrentEditorState = () => {
 };
 
 export const useEditorPaneWidth = (): string => {
-  const [width, setWidth] = useState(DEFAULT_EDITOR_PANE_WIDTH + "px");
+  const [windowWidth] = useWindowDimensions();
+  const [width, setWidth] = useState(windowWidth - APP_SIDEBAR_WIDTH + "px");
   const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
   const editorMode = useSelector(getIDEViewMode);
   const { segment } = useCurrentEditorState();
@@ -86,11 +89,17 @@ export const useEditorPaneWidth = (): string => {
       segment !== EditorEntityTab.UI
     ) {
       // 1px is propertypane border width
-      setWidth(DEFAULT_SPLIT_SCREEN_WIDTH);
+      setWidth(windowWidth * SPLIT_SCREEN_RATIO + "px");
     } else {
-      setWidth(DEFAULT_EDITOR_PANE_WIDTH + "px");
+      setWidth(DEFAULT_EXPLORER_PANE_WIDTH + "px");
     }
-  }, [isSideBySideEnabled, editorMode, segment, propertyPaneWidth]);
+  }, [
+    isSideBySideEnabled,
+    editorMode,
+    segment,
+    propertyPaneWidth,
+    windowWidth,
+  ]);
 
   return width;
 };

From 2a402123cbb781f79414c6a4ecaf2414629eba78 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 18 Jul 2024 11:11:31 +0530
Subject: [PATCH 05/16] Main pane fix routes

---
 .../ce/pages/Editor/IDE/MainPane/useRoutes.ts | 178 +++---------------
 1 file changed, 21 insertions(+), 157 deletions(-)

diff --git a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
index 94ecc599a891..281a2ba81b8a 100644
--- a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
+++ b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
@@ -24,10 +24,6 @@ import {
 } from "constants/routes";
 import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab";
 import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist";
-import ApiEditor from "pages/Editor/APIEditor";
-import QueryEditor from "pages/Editor/QueryEditor";
-import JSEditor from "pages/Editor/JSEditor";
-import ListView from "pages/Editor/SaaSEditor/ListView";
 import {
   SAAS_EDITOR_API_ID_ADD_PATH,
   SAAS_EDITOR_API_ID_PATH,
@@ -39,13 +35,6 @@ import DataSourceEditor from "pages/Editor/DataSourceEditor";
 import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState";
 import GeneratePage from "pages/Editor/GeneratePage";
 import type { RouteProps } from "react-router";
-import { JSBlankState } from "pages/Editor/JSEditor/JSBlankState";
-import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
-import { useSelector } from "react-redux";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
-import { JSAddState } from "pages/Editor/JSEditor/JSAddState";
-import { QueriesAddState } from "pages/Editor/QueryEditor/QueriesAddState";
 
 export interface RouteReturnType extends RouteProps {
   key: string;
@@ -57,84 +46,6 @@ export interface RouteReturnType extends RouteProps {
  */
 
 function useRoutes(path: string): RouteReturnType[] {
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-  const editorMode = useSelector(getIDEViewMode);
-
-  if (isSideBySideEnabled && editorMode === EditorViewMode.SplitScreen) {
-    return [
-      {
-        key: "Canvas",
-        component: WidgetsEditor,
-        exact: true,
-        path: [
-          BUILDER_PATH_DEPRECATED,
-          BUILDER_PATH,
-          BUILDER_CUSTOM_PATH,
-          `${BUILDER_PATH_DEPRECATED}${ADD_PATH}`,
-          `${BUILDER_PATH}${ADD_PATH}`,
-          `${BUILDER_CUSTOM_PATH}${ADD_PATH}`,
-          `${path}${ADD_PATH}`,
-          `${path}${WIDGETS_EDITOR_BASE_PATH}`,
-          `${path}${WIDGETS_EDITOR_ID_PATH}`,
-          `${path}${WIDGETS_EDITOR_ID_PATH}${ADD_PATH}`,
-          `${path}${API_EDITOR_ID_PATH}`,
-          `${path}${API_EDITOR_ID_PATH}${LIST_PATH}`,
-          `${path}${API_EDITOR_ID_ADD_PATH}`,
-          `${path}${QUERIES_EDITOR_BASE_PATH}`,
-          `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
-          `${path}${QUERIES_EDITOR_ID_PATH}`,
-          `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
-          `${path}${QUERIES_EDITOR_ID_PATH}${LIST_PATH}`,
-          `${path}${JS_COLLECTION_EDITOR_PATH}`,
-          `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
-          `${path}${JS_COLLECTION_ID_PATH}`,
-          `${path}${JS_COLLECTION_ID_PATH}${LIST_PATH}`,
-          `${path}${SAAS_EDITOR_PATH}`,
-          `${path}${SAAS_EDITOR_API_ID_PATH}`,
-          `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
-          `${path}${APP_LIBRARIES_EDITOR_PATH}`,
-          `${path}${APP_SETTINGS_EDITOR_PATH}`,
-        ],
-      },
-      {
-        key: "Datasource Create and Active",
-        component: CreateNewDatasourceTab,
-        exact: true,
-        path: `${path}${INTEGRATION_EDITOR_PATH}`,
-      },
-      {
-        key: "OnboardingChecklist",
-        component: OnboardingChecklist,
-        exact: true,
-        path: `${path}${BUILDER_CHECKLIST_PATH}`,
-      },
-      {
-        key: "DatasourceEditor",
-        component: DataSourceEditor,
-        exact: true,
-        path: `${path}${DATA_SOURCES_EDITOR_ID_PATH}`,
-      },
-      {
-        key: "DatasourceBlankState",
-        component: DatasourceBlankState,
-        exact: true,
-        path: `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
-      },
-      {
-        key: "SAASDatasourceEditor",
-        component: DatasourceForm,
-        exact: true,
-        path: `${path}${SAAS_EDITOR_DATASOURCE_ID_PATH}`,
-      },
-      {
-        key: "GeneratePage",
-        component: GeneratePage,
-        exact: true,
-        path: `${path}${GENERATE_TEMPLATE_FORM_PATH}`,
-      },
-    ];
-  }
-
   return [
     {
       key: "Canvas",
@@ -151,6 +62,21 @@ function useRoutes(path: string): RouteReturnType[] {
         `${path}${WIDGETS_EDITOR_BASE_PATH}`,
         `${path}${WIDGETS_EDITOR_ID_PATH}`,
         `${path}${WIDGETS_EDITOR_ID_PATH}${ADD_PATH}`,
+        `${path}${API_EDITOR_ID_PATH}`,
+        `${path}${API_EDITOR_ID_PATH}${LIST_PATH}`,
+        `${path}${API_EDITOR_ID_ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_BASE_PATH}`,
+        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
+        `${path}${QUERIES_EDITOR_ID_PATH}${LIST_PATH}`,
+        `${path}${JS_COLLECTION_EDITOR_PATH}`,
+        `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
+        `${path}${JS_COLLECTION_ID_PATH}`,
+        `${path}${JS_COLLECTION_ID_PATH}${LIST_PATH}`,
+        `${path}${SAAS_EDITOR_PATH}`,
+        `${path}${SAAS_EDITOR_API_ID_PATH}`,
+        `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
         `${path}${APP_LIBRARIES_EDITOR_PATH}`,
         `${path}${APP_SETTINGS_EDITOR_PATH}`,
       ],
@@ -167,74 +93,6 @@ function useRoutes(path: string): RouteReturnType[] {
       exact: true,
       path: `${path}${BUILDER_CHECKLIST_PATH}`,
     },
-    {
-      key: "QueryEditorAdd",
-      component: QueriesAddState,
-      exact: true,
-      path: [
-        `${path}${QUERIES_EDITOR_BASE_PATH}${ADD_PATH}`,
-        `${path}${QUERIES_EDITOR_ID_ADD_PATH}`,
-        `${path}${API_EDITOR_ID_ADD_PATH}`,
-        `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
-      ],
-    },
-    {
-      key: "ApiEditor",
-      component: ApiEditor,
-      exact: true,
-      path: [`${path}${API_EDITOR_ID_PATH}`],
-    },
-    {
-      key: "QueryEditorList",
-      component: QueriesBlankState,
-      exact: true,
-      path: [`${path}${QUERIES_EDITOR_BASE_PATH}`],
-    },
-    {
-      key: "QueryEditor",
-      component: QueryEditor,
-      exact: true,
-      path: [`${path}${QUERIES_EDITOR_ID_PATH}`],
-    },
-    {
-      key: "JSEditorAdd",
-      component: JSAddState,
-      exact: true,
-      path: [
-        `${path}${JS_COLLECTION_EDITOR_PATH}${ADD_PATH}`,
-        `${path}${JS_COLLECTION_ID_PATH}${ADD_PATH}`,
-      ],
-    },
-    {
-      key: "JSEditorList",
-      component: JSBlankState,
-      exact: true,
-      path: [`${path}${JS_COLLECTION_EDITOR_PATH}`],
-    },
-    {
-      key: "JSEditor File",
-      component: JSEditor,
-      exact: true,
-      path: [`${path}${JS_COLLECTION_ID_PATH}`],
-    },
-    {
-      key: "SAASList",
-      component: ListView,
-      exact: true,
-      path: `${path}${SAAS_EDITOR_PATH}`,
-    },
-    {
-      key: "SAASDatasourceEditor",
-      component: DatasourceForm,
-      exact: true,
-      path: `${path}${SAAS_EDITOR_DATASOURCE_ID_PATH}`,
-    },
-    {
-      key: "SAASEditor",
-      component: QueryEditor,
-      exact: true,
-      path: [`${path}${SAAS_EDITOR_API_ID_PATH}`],
-    },
     {
       key: "DatasourceEditor",
       component: DataSourceEditor,
@@ -247,6 +105,12 @@ function useRoutes(path: string): RouteReturnType[] {
       exact: true,
       path: `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
     },
+    {
+      key: "SAASDatasourceEditor",
+      component: DatasourceForm,
+      exact: true,
+      path: `${path}${SAAS_EDITOR_DATASOURCE_ID_PATH}`,
+    },
     {
       key: "GeneratePage",
       component: GeneratePage,

From 3404da7fa8bea9eec346283a92cff4ee1f9eea6f Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 23 Jul 2024 11:41:42 +0530
Subject: [PATCH 06/16] Fix explorer in side by side

---
 app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx | 9 +--------
 app/client/src/pages/Editor/IDE/EditorTabs/List.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
index 850d8c438593..e89173a2546e 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -20,19 +20,12 @@ import SegmentedHeader from "./components/SegmentedHeader";
 import { useSelector } from "react-redux";
 import { getIDEViewMode } from "selectors/ideSelectors";
 import { EditorViewMode } from "@appsmith/entities/IDE/constants";
-import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
 
 const EditorPaneExplorer = () => {
   const { path } = useRouteMatch();
   const ideViewMode = useSelector(getIDEViewMode);
   return (
-    <Flex
-      className="relative"
-      flexDirection="column"
-      height="100%"
-      overflow="hidden"
-      width={DEFAULT_EXPLORER_PANE_WIDTH}
-    >
+    <Flex className="relative" flexDirection="column" overflow="hidden">
       <SegmentedHeader />
       {/** Entity Properties component is needed to render
        the Bindings popover in the context menu. Will be removed eventually **/}
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
index 1ae493ed28d3..931dee8687ab 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
@@ -24,9 +24,9 @@ export const List = () => {
   return (
     <ListContainer
       bg="var(--ads-v2-color-bg)"
-      className="absolute top-[78px]"
+      className="absolute top-[32px]"
       data-testid="t--editorpane-list-view"
-      h="calc(100% - 78px)"
+      h="calc(100% - 32px)"
       w="100%"
       zIndex="10"
     >

From 57d0e76736062a87b8576c806bb67b88019d6f92 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 23 Jul 2024 16:21:35 +0530
Subject: [PATCH 07/16] Fix sizing

---
 app/client/src/ce/sagas/PageSagas.tsx         | 15 +----
 .../editorComponents/PropertyPaneSidebar.tsx  |  2 +-
 .../pages/Editor/IDE/EditorPane/Editor.tsx    |  7 +++
 .../pages/Editor/IDE/EditorPane/Explorer.tsx  | 57 ++++++++++++-------
 .../Editor/IDE/EditorPane/JS/Explorer.tsx     |  9 ++-
 .../Editor/IDE/EditorPane/Query/Explorer.tsx  | 27 +++++----
 .../pages/Editor/IDE/EditorPane/UI/index.tsx  |  2 +
 .../src/pages/Editor/IDE/EditorPane/index.tsx |  1 -
 .../src/pages/Editor/IDE/MainPane/index.tsx   | 14 ++---
 app/client/src/pages/Editor/IDE/hooks.ts      | 33 +++++------
 app/client/src/pages/Editor/IDE/index.tsx     |  2 +-
 11 files changed, 95 insertions(+), 74 deletions(-)

diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx
index 84b3a16931dd..49352deb6a13 100644
--- a/app/client/src/ce/sagas/PageSagas.tsx
+++ b/app/client/src/ce/sagas/PageSagas.tsx
@@ -58,7 +58,7 @@ import type {
   CanvasWidgetsReduxState,
   FlattenedWidgetProps,
 } from "reducers/entityReducers/canvasWidgetsReducer";
-import { all, call, delay, put, select, take } from "redux-saga/effects";
+import { all, call, put, select, take } from "redux-saga/effects";
 import history from "utils/history";
 import { isNameValid } from "utils/helpers";
 import { extractCurrentDSL } from "utils/WidgetPropsUtils";
@@ -693,6 +693,7 @@ export function* createNewPageFromEntity(
     });
   }
 }
+
 export function* createPageSaga(
   createPageAction: ReduxAction<CreatePageActionPayload>,
 ) {
@@ -1324,24 +1325,12 @@ export function* setCanvasCardsStateSaga(action: ReduxAction<string>) {
 }
 
 export function* setPreviewModeInitSaga(action: ReduxAction<boolean>) {
-  const currentPageId: string = yield select(getCurrentPageId);
   const isPreviewMode: boolean = yield select(combinedPreviewModeSelector);
   if (action.payload) {
     // we animate out elements and then move to the canvas
     yield put(setPreviewModeAction(action.payload));
-    history.push(
-      builderURL({
-        pageId: currentPageId,
-      }),
-    );
   } else if (isPreviewMode) {
     // check if already in edit mode, then only do this
-
-    // when switching back to edit mode
-    // we go back to the previous route e.g query, api etc.
-    history.goBack();
-    // small delay to wait for the content to render and then animate
-    yield delay(10);
     yield put(setPreviewModeAction(action.payload));
   }
 }
diff --git a/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx b/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
index db79c272cfea..0ef2fa22f879 100644
--- a/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
+++ b/app/client/src/components/editorComponents/PropertyPaneSidebar.tsx
@@ -148,7 +148,7 @@ export const PropertyPaneSidebar = memo((props: Props) => {
         <div
           className={classNames({
             "h-full p-0 overflow-y-auto min-w-72 max-w-104": true,
-            "transition-all duration-100": !resizing,
+            "transition-all duration-400": !resizing,
           })}
           style={{ width: props.width }}
         >
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
index ef4230d280fd..62b8ed82866d 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Editor.tsx
@@ -9,12 +9,19 @@ import {
 import { JSEditorPane } from "./JS";
 import { QueryEditor } from "./Query";
 import EditorTabs from "../EditorTabs";
+import { useCurrentEditorState } from "../hooks";
+import { EditorEntityTab } from "@appsmith/entities/IDE/constants";
 
 const Editor = () => {
   const { path } = useRouteMatch();
+  const { segment } = useCurrentEditorState();
+  if (segment === EditorEntityTab.UI) {
+    return null;
+  }
   return (
     <Flex
       className="relative"
+      flex={1}
       flexDirection="column"
       height="100%"
       overflow="hidden"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
index e89173a2546e..eaa4975f2fae 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -20,37 +20,50 @@ import SegmentedHeader from "./components/SegmentedHeader";
 import { useSelector } from "react-redux";
 import { getIDEViewMode } from "selectors/ideSelectors";
 import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
 
 const EditorPaneExplorer = () => {
   const { path } = useRouteMatch();
   const ideViewMode = useSelector(getIDEViewMode);
   return (
-    <Flex className="relative" flexDirection="column" overflow="hidden">
+    <Flex
+      borderRight={
+        ideViewMode === EditorViewMode.FullScreen
+          ? "1px solid var(--ads-v2-color-border)"
+          : null
+      }
+      className="relative"
+      flexDirection="column"
+      overflow="hidden"
+      width={
+        ideViewMode === EditorViewMode.FullScreen
+          ? DEFAULT_EXPLORER_PANE_WIDTH
+          : "100%"
+      }
+    >
       <SegmentedHeader />
       {/** Entity Properties component is needed to render
        the Bindings popover in the context menu. Will be removed eventually **/}
       <EntityProperties />
-      {ideViewMode === EditorViewMode.FullScreen ? (
-        <Switch>
-          <SentryRoute
-            component={JSExplorer}
-            path={jsSegmentRoutes.map((route) => `${path}${route}`)}
-          />
-          <SentryRoute
-            component={QueryExplorer}
-            path={querySegmentRoutes.map((route) => `${path}${route}`)}
-          />
-          <SentryRoute
-            component={WidgetsSegment}
-            path={[
-              BUILDER_PATH,
-              BUILDER_CUSTOM_PATH,
-              BUILDER_PATH_DEPRECATED,
-              ...widgetSegmentRoutes.map((route) => `${path}${route}`),
-            ]}
-          />
-        </Switch>
-      ) : null}
+      <Switch>
+        <SentryRoute
+          component={JSExplorer}
+          path={jsSegmentRoutes.map((route) => `${path}${route}`)}
+        />
+        <SentryRoute
+          component={QueryExplorer}
+          path={querySegmentRoutes.map((route) => `${path}${route}`)}
+        />
+        <SentryRoute
+          component={WidgetsSegment}
+          path={[
+            BUILDER_PATH,
+            BUILDER_CUSTOM_PATH,
+            BUILDER_PATH_DEPRECATED,
+            ...widgetSegmentRoutes.map((route) => `${path}${route}`),
+          ]}
+        />
+      </Switch>
     </Flex>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx
index 55174aedc5f1..35fb15a2b8ca 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Explorer.tsx
@@ -1,8 +1,15 @@
 import React from "react";
 import List from "./List";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
 const JSExplorer = () => {
-  return <List />;
+  const ideViewMode = useSelector(getIDEViewMode);
+  if (ideViewMode === EditorViewMode.FullScreen) {
+    return <List />;
+  }
+  return null;
 };
 
 export { JSExplorer };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
index fce4a194a4e9..f49e8f696a19 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import List from "./List";
 import styled from "styled-components";
 import { Flex } from "design-system";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
 const QueriesContainer = styled(Flex)`
   & .t--entity-item {
@@ -15,16 +18,20 @@ const QueriesContainer = styled(Flex)`
 `;
 
 const QueryExplorer = () => {
-  return (
-    <QueriesContainer
-      className="ide-editor-left-pane__content-queries"
-      flexDirection="column"
-      height="100%"
-      overflow="hidden"
-    >
-      <List />
-    </QueriesContainer>
-  );
+  const ideViewMode = useSelector(getIDEViewMode);
+  if (ideViewMode === EditorViewMode.FullScreen) {
+    return (
+      <QueriesContainer
+        className="ide-editor-left-pane__content-queries"
+        flexDirection="column"
+        height="100%"
+        overflow="hidden"
+      >
+        <List />
+      </QueriesContainer>
+    );
+  }
+  return null;
 };
 
 export { QueryExplorer };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx
index a700638019d9..dc864002d9d6 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/index.tsx
@@ -18,6 +18,7 @@ import { getPagePermissions } from "selectors/editorSelectors";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import { getHasManagePagePermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers";
+import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
 
 const UISegment = () => {
   const { path } = useRouteMatch();
@@ -41,6 +42,7 @@ const UISegment = () => {
       flexDirection="column"
       gap="spaces-3"
       overflow="hidden"
+      width={DEFAULT_EXPLORER_PANE_WIDTH - 1 + "px"}
     >
       <Switch>
         <SentryRoute
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
index 421fa153a111..953e5642e16f 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
@@ -17,7 +17,6 @@ const EditorPane = () => {
       flexDirection={
         ideViewMode === EditorViewMode.SplitScreen ? "column" : "row"
       }
-      gap="spacing-2"
       height="100%"
       overflow="hidden"
       width={width}
diff --git a/app/client/src/pages/Editor/IDE/MainPane/index.tsx b/app/client/src/pages/Editor/IDE/MainPane/index.tsx
index edae34902ad8..0fc654ac2d29 100644
--- a/app/client/src/pages/Editor/IDE/MainPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/MainPane/index.tsx
@@ -1,20 +1,21 @@
 import React from "react";
-import { BUILDER_PATH } from "constants/routes";
 import { Route, Switch, useRouteMatch } from "react-router";
 import * as Sentry from "@sentry/react";
 import useRoutes from "@appsmith/pages/Editor/IDE/MainPane/useRoutes";
-import EditorTabs from "pages/Editor/IDE/EditorTabs";
 import { useWidgetSelectionBlockListener } from "pages/Editor/IDE/hooks";
 import { useSelector } from "react-redux";
-import { getIDEViewMode } from "selectors/ideSelectors";
-import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import { combinedPreviewModeSelector } from "selectors/editorSelectors";
+import WidgetsEditor from "../../WidgetsEditor";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 export const MainPane = (props: { id: string }) => {
   const { path } = useRouteMatch();
-  const ideViewMode = useSelector(getIDEViewMode);
   const routes = useRoutes(path);
   useWidgetSelectionBlockListener();
+  const isCombinedPreviewMode = useSelector(combinedPreviewModeSelector);
+  if (isCombinedPreviewMode) {
+    return <WidgetsEditor />;
+  }
 
   return (
     <div
@@ -22,8 +23,7 @@ export const MainPane = (props: { id: string }) => {
       data-testid="t--ide-main-pane"
       id={props.id}
     >
-      {ideViewMode === EditorViewMode.FullScreen ? <EditorTabs /> : null}
-      <Switch key={BUILDER_PATH}>
+      <Switch>
         {routes.map((route) => (
           <SentryRoute {...route} key={route.key} />
         ))}
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index c81f3c7b7812..4125074178ff 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -9,7 +9,7 @@ import {
 import { useLocation } from "react-router";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useDispatch, useSelector } from "react-redux";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
+import { getIDEViewMode } from "selectors/ideSelectors";
 import { getPropertyPaneWidth } from "selectors/propertyPaneSelectors";
 import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
 import history, { NavigationMethod } from "utils/history";
@@ -78,28 +78,25 @@ export const useCurrentEditorState = () => {
 export const useEditorPaneWidth = (): string => {
   const [windowWidth] = useWindowDimensions();
   const [width, setWidth] = useState(windowWidth - APP_SIDEBAR_WIDTH + "px");
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
   const editorMode = useSelector(getIDEViewMode);
   const { segment } = useCurrentEditorState();
   const propertyPaneWidth = useSelector(getPropertyPaneWidth);
   useEffect(() => {
-    if (
-      isSideBySideEnabled &&
-      editorMode === EditorViewMode.SplitScreen &&
-      segment !== EditorEntityTab.UI
-    ) {
-      // 1px is propertypane border width
-      setWidth(windowWidth * SPLIT_SCREEN_RATIO + "px");
+    if (editorMode === EditorViewMode.SplitScreen) {
+      if (segment !== EditorEntityTab.UI) {
+        // 1px is propertypane border width
+        setWidth(windowWidth * SPLIT_SCREEN_RATIO + "px");
+      } else {
+        setWidth(DEFAULT_EXPLORER_PANE_WIDTH + "px");
+      }
     } else {
-      setWidth(DEFAULT_EXPLORER_PANE_WIDTH + "px");
+      if (segment !== EditorEntityTab.UI) {
+        setWidth(windowWidth - APP_SIDEBAR_WIDTH + "px");
+      } else {
+        setWidth(DEFAULT_EXPLORER_PANE_WIDTH + "px");
+      }
     }
-  }, [
-    isSideBySideEnabled,
-    editorMode,
-    segment,
-    propertyPaneWidth,
-    windowWidth,
-  ]);
+  }, [editorMode, segment, propertyPaneWidth, windowWidth]);
 
   return width;
 };
@@ -175,7 +172,7 @@ export function useWidgetSelectionBlockListener() {
       FocusEntity.WIDGET_LIST,
     ].includes(currentFocus.entity);
     dispatch(setWidgetSelectionBlock(!inUIMode));
-  }, [currentFocus]);
+  }, [currentFocus, dispatch]);
 
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
diff --git a/app/client/src/pages/Editor/IDE/index.tsx b/app/client/src/pages/Editor/IDE/index.tsx
index 76eddde3d49e..bbd38f11d2c2 100644
--- a/app/client/src/pages/Editor/IDE/index.tsx
+++ b/app/client/src/pages/Editor/IDE/index.tsx
@@ -42,7 +42,7 @@ function IDE() {
         <MainPane id="app-body" />
         <div
           className={classNames({
-            [`transition-transform transform duration-400 h-full ${tailwindLayers.propertyPane}`]:
+            [`transition-transform transform duration-400 ${tailwindLayers.propertyPane}`]:
               true,
             relative: !isCombinedPreviewMode,
             "translate-x-full fixed right-0": isCombinedPreviewMode,

From d97752b41e19343e94b7373d8d7327e03632346e Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Wed, 24 Jul 2024 14:35:23 +0530
Subject: [PATCH 08/16] Add back missing classname

---
 app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
index eaa4975f2fae..0fb3365a2860 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -32,7 +32,7 @@ const EditorPaneExplorer = () => {
           ? "1px solid var(--ads-v2-color-border)"
           : null
       }
-      className="relative"
+      className="relative ide-editor-left-pane__content"
       flexDirection="column"
       overflow="hidden"
       width={

From c46ad43c407e86c66b5dbd6b5aeac4344a5bb960 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 25 Jul 2024 15:40:11 +0530
Subject: [PATCH 09/16] Set 0 as the lower limit for Canvas

---
 app/client/src/utils/hooks/useDynamicAppLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
index 8d8632b1707c..2b2c70c74920 100644
--- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx
+++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
@@ -1,4 +1,4 @@
-import { debounce, get } from "lodash";
+import { clamp, debounce, get } from "lodash";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -192,7 +192,7 @@ export const useDynamicAppLayout = () => {
     const calculatedWidth = calculateCanvasWidth();
     const { width: rightColumn } = mainCanvasProps || {};
     if (rightColumn !== calculatedWidth || !isCanvasInitialized) {
-      dispatch(updateCanvasLayoutAction(calculatedWidth));
+      dispatch(updateCanvasLayoutAction(clamp(calculatedWidth, 0)));
     }
     return calculatedWidth;
   };

From 883ebef6a6b5968b905caa118d868213175f7eb5 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 25 Jul 2024 16:13:14 +0530
Subject: [PATCH 10/16] Fix bug with setting lower limit

---
 app/client/src/utils/hooks/useDynamicAppLayout.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
index 2b2c70c74920..f3d800cbb4d8 100644
--- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx
+++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
@@ -192,7 +192,9 @@ export const useDynamicAppLayout = () => {
     const calculatedWidth = calculateCanvasWidth();
     const { width: rightColumn } = mainCanvasProps || {};
     if (rightColumn !== calculatedWidth || !isCanvasInitialized) {
-      dispatch(updateCanvasLayoutAction(clamp(calculatedWidth, 0)));
+      dispatch(
+        updateCanvasLayoutAction(clamp(calculatedWidth, 0, rightColumn)),
+      );
     }
     return calculatedWidth;
   };

From a111096419e40c29205fc3c95e7d6f31bc4a0141 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 25 Jul 2024 16:49:24 +0530
Subject: [PATCH 11/16] border changes

---
 app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx     | 5 -----
 app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx      | 1 +
 .../src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx      | 1 +
 app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx       | 1 +
 app/client/src/utils/hooks/useDynamicAppLayout.tsx          | 6 ++----
 5 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
index 0fb3365a2860..d0276b13588e 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -27,11 +27,6 @@ const EditorPaneExplorer = () => {
   const ideViewMode = useSelector(getIDEViewMode);
   return (
     <Flex
-      borderRight={
-        ideViewMode === EditorViewMode.FullScreen
-          ? "1px solid var(--ads-v2-color-border)"
-          : null
-      }
       className="relative ide-editor-left-pane__content"
       flexDirection="column"
       overflow="hidden"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
index 3861f9cc28ab..5f9dbacab466 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
@@ -60,6 +60,7 @@ const ListJSObjects = () => {
 
   return (
     <JSContainer
+      borderRight="1px solid var(--ads-v2-color-border)"
       className="ide-editor-left-pane__content-js"
       flex="1"
       flexDirection="column"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
index f49e8f696a19..ce5472313b65 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
@@ -22,6 +22,7 @@ const QueryExplorer = () => {
   if (ideViewMode === EditorViewMode.FullScreen) {
     return (
       <QueriesContainer
+        borderRight="1px solid var(--ads-v2-color-border)"
         className="ide-editor-left-pane__content-queries"
         flexDirection="column"
         height="100%"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
index 239492601b9b..ce7f6b73b108 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
@@ -26,6 +26,7 @@ const AddWidgets = (props: { focusSearchInput?: boolean }) => {
       <Container
         alignItems="center"
         borderBottom={"1px solid var(--ads-v2-color-border)"}
+        borderRight="1px solid var(--ads-v2-color-border)"
         data-testid="t--ide-add-pane"
         justifyContent="space-between"
         px="spaces-4"
diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
index f3d800cbb4d8..0b6dd38e1111 100644
--- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx
+++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
@@ -1,4 +1,4 @@
-import { clamp, debounce, get } from "lodash";
+import { debounce, get } from "lodash";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -192,9 +192,7 @@ export const useDynamicAppLayout = () => {
     const calculatedWidth = calculateCanvasWidth();
     const { width: rightColumn } = mainCanvasProps || {};
     if (rightColumn !== calculatedWidth || !isCanvasInitialized) {
-      dispatch(
-        updateCanvasLayoutAction(clamp(calculatedWidth, 0, rightColumn)),
-      );
+      dispatch(updateCanvasLayoutAction(Math.max(0, calculatedWidth)));
     }
     return calculatedWidth;
   };

From 4783cef77b54d664bd279b03e598e382d93fd6d4 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Fri, 26 Jul 2024 11:44:18 +0530
Subject: [PATCH 12/16] Test case fixes

---
 .../AppNavigation/AppNavigationWithGit_spec.ts    |  1 +
 .../Widgets/Checkbox/CheckBoxGroupTest.ts         |  1 +
 .../src/ce/pages/Editor/IDE/MainPane/useRoutes.ts | 15 +++++++++------
 .../src/pages/Editor/IDE/MainPane/index.tsx       |  7 -------
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts
index d89206619482..036ac24618ff 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/AppNavigation/AppNavigationWithGit_spec.ts
@@ -28,6 +28,7 @@ describe(
           appSettings.locators._navigationSettings._navStyle,
           "Inline",
         );
+        AppSidebar.navigate(AppSidebarButton.Editor);
         agHelper.GetNClick(locators._previewModeToggle("edit"));
         agHelper.GetNClick(appSettings.locators._topInlineMoreButton);
         agHelper.GetNClickByContains(
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts
index 849990ce76d5..641aa0de5b68 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts
@@ -225,6 +225,7 @@ describe(
       agHelper.GetNClick(propPane._checkbox, 1, true);
       PageList.VerifyIsCurrentPage("Page2");
       agHelper.GetNClick(locators._exitPreviewMode);
+      EditorNavigation.SelectEntityByName("Page1", EntityType.Page);
 
       // Deploy mode
       deployMode.DeployApp();
diff --git a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
index 281a2ba81b8a..922209dc8c35 100644
--- a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
+++ b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts
@@ -35,6 +35,8 @@ import DataSourceEditor from "pages/Editor/DataSourceEditor";
 import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState";
 import GeneratePage from "pages/Editor/GeneratePage";
 import type { RouteProps } from "react-router";
+import { useSelector } from "react-redux";
+import { combinedPreviewModeSelector } from "selectors/editorSelectors";
 
 export interface RouteReturnType extends RouteProps {
   key: string;
@@ -46,6 +48,7 @@ export interface RouteReturnType extends RouteProps {
  */
 
 function useRoutes(path: string): RouteReturnType[] {
+  const isPreviewMode = useSelector(combinedPreviewModeSelector);
   return [
     {
       key: "Canvas",
@@ -83,37 +86,37 @@ function useRoutes(path: string): RouteReturnType[] {
     },
     {
       key: "Datasource Create and Active",
-      component: CreateNewDatasourceTab,
+      component: isPreviewMode ? WidgetsEditor : CreateNewDatasourceTab,
       exact: true,
       path: `${path}${INTEGRATION_EDITOR_PATH}`,
     },
     {
       key: "OnboardingChecklist",
-      component: OnboardingChecklist,
+      component: isPreviewMode ? WidgetsEditor : OnboardingChecklist,
       exact: true,
       path: `${path}${BUILDER_CHECKLIST_PATH}`,
     },
     {
       key: "DatasourceEditor",
-      component: DataSourceEditor,
+      component: isPreviewMode ? WidgetsEditor : DataSourceEditor,
       exact: true,
       path: `${path}${DATA_SOURCES_EDITOR_ID_PATH}`,
     },
     {
       key: "DatasourceBlankState",
-      component: DatasourceBlankState,
+      component: isPreviewMode ? WidgetsEditor : DatasourceBlankState,
       exact: true,
       path: `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
     },
     {
       key: "SAASDatasourceEditor",
-      component: DatasourceForm,
+      component: isPreviewMode ? WidgetsEditor : DatasourceForm,
       exact: true,
       path: `${path}${SAAS_EDITOR_DATASOURCE_ID_PATH}`,
     },
     {
       key: "GeneratePage",
-      component: GeneratePage,
+      component: isPreviewMode ? WidgetsEditor : GeneratePage,
       exact: true,
       path: `${path}${GENERATE_TEMPLATE_FORM_PATH}`,
     },
diff --git a/app/client/src/pages/Editor/IDE/MainPane/index.tsx b/app/client/src/pages/Editor/IDE/MainPane/index.tsx
index 0fc654ac2d29..44e761a7e0eb 100644
--- a/app/client/src/pages/Editor/IDE/MainPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/MainPane/index.tsx
@@ -3,19 +3,12 @@ import { Route, Switch, useRouteMatch } from "react-router";
 import * as Sentry from "@sentry/react";
 import useRoutes from "@appsmith/pages/Editor/IDE/MainPane/useRoutes";
 import { useWidgetSelectionBlockListener } from "pages/Editor/IDE/hooks";
-import { useSelector } from "react-redux";
-import { combinedPreviewModeSelector } from "selectors/editorSelectors";
-import WidgetsEditor from "../../WidgetsEditor";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 export const MainPane = (props: { id: string }) => {
   const { path } = useRouteMatch();
   const routes = useRoutes(path);
   useWidgetSelectionBlockListener();
-  const isCombinedPreviewMode = useSelector(combinedPreviewModeSelector);
-  if (isCombinedPreviewMode) {
-    return <WidgetsEditor />;
-  }
 
   return (
     <div

From c0225d554a011f4babdf84eac05ad14330916b76 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Mon, 29 Jul 2024 12:02:01 +0530
Subject: [PATCH 13/16] Update Postgres failing test

---
 .../ServerSide/GenerateCRUD/Postgres2_Spec.ts     | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts
index c054d5f54947..1dfb8b5e19a2 100644
--- a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts
+++ b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts
@@ -608,20 +608,11 @@ describe(
       table.ReadTableRowColumnData(0, 0, "v2", 2000).then(($cellData) => {
         expect($cellData).not.eq("159180"); //Deleted record Store_ID
       });
-    });
-
-    it("15. Validate Deletion of the Newly Created Page - Vessels", () => {
       deployMode.NavigateBacktoEditor();
       table.WaitUntilTableLoad(0, 0, "v2");
-      //Delete the test data
-      entityExplorer.ActionContextMenuByEntityName({
-        entityNameinLeftSidebar: "Public.vessels",
-        action: "Delete",
-        entityType: entityItems.Page,
-      });
     });
 
-    it("16. Validate Drop of the Newly Created - Vessels - Table from Postgres datasource", () => {
+    it("15. Validate Drop of the Newly Created - Vessels - Table from Postgres datasource", () => {
       const deleteTblQuery = "DROP TABLE Vessels;";
       dataSources.CreateQueryForDS(dsName, deleteTblQuery, "DropVessels");
       agHelper.FocusElement(locators._codeMirrorTextArea);
@@ -630,7 +621,7 @@ describe(
       dataSources.AssertTableInVirtuosoList(dsName, "public.vessels", false);
     });
 
-    it("17. Verify application does not break when user runs the query with wrong table name", function () {
+    it("16. Verify application does not break when user runs the query with wrong table name", function () {
       EditorNavigation.SelectEntityByName("DropVessels", EntityType.Query);
       dataSources.RunQuery({ toValidateResponse: false });
       cy.wait("@postExecute").then(({ response }) => {
@@ -645,7 +636,7 @@ describe(
       });
     });
 
-    it("18. Verify Deletion of the datasource when Pages/Actions associated are not removed yet", () => {
+    it("17. Verify Deletion of the datasource when Pages/Actions associated are not removed yet", () => {
       deployMode.DeployApp();
       deployMode.NavigateBacktoEditor();
       dataSources.DeleteDatasourceFromWithinDS(dsName, 409);

From 7f717c93344970e863cf07294eca6a3da7fd8ee3 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 30 Jul 2024 16:24:51 +0530
Subject: [PATCH 14/16] Style fixes

---
 .../src/pages/Editor/IDE/EditorPane/Explorer.tsx |  5 +++++
 .../src/pages/Editor/IDE/EditorPane/JS/List.tsx  |  1 -
 .../Editor/IDE/EditorPane/Query/Explorer.tsx     |  1 -
 .../src/pages/Editor/IDE/EditorPane/UI/Add.tsx   |  1 -
 .../pages/Editor/IDE/LeftPane/DataSidePane.tsx   | 13 +++++++------
 .../Editor/IDE/LeftPane/LibrarySidePane.tsx      | 16 +++++++++-------
 .../src/pages/Editor/IDE/LeftPane/index.tsx      |  2 +-
 app/client/src/pages/Editor/IDE/index.tsx        |  4 ++--
 .../commons/EditorSettingsPaneContainer.tsx      |  3 +++
 9 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
index d0276b13588e..84c744225729 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx
@@ -27,6 +27,11 @@ const EditorPaneExplorer = () => {
   const ideViewMode = useSelector(getIDEViewMode);
   return (
     <Flex
+      borderRight={
+        ideViewMode === EditorViewMode.SplitScreen
+          ? ""
+          : "1px solid var(--ads-v2-color-border)"
+      }
       className="relative ide-editor-left-pane__content"
       flexDirection="column"
       overflow="hidden"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
index 5f9dbacab466..3861f9cc28ab 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
@@ -60,7 +60,6 @@ const ListJSObjects = () => {
 
   return (
     <JSContainer
-      borderRight="1px solid var(--ads-v2-color-border)"
       className="ide-editor-left-pane__content-js"
       flex="1"
       flexDirection="column"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
index ce5472313b65..f49e8f696a19 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Explorer.tsx
@@ -22,7 +22,6 @@ const QueryExplorer = () => {
   if (ideViewMode === EditorViewMode.FullScreen) {
     return (
       <QueriesContainer
-        borderRight="1px solid var(--ads-v2-color-border)"
         className="ide-editor-left-pane__content-queries"
         flexDirection="column"
         height="100%"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
index ce7f6b73b108..239492601b9b 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
@@ -26,7 +26,6 @@ const AddWidgets = (props: { focusSearchInput?: boolean }) => {
       <Container
         alignItems="center"
         borderBottom={"1px solid var(--ads-v2-color-border)"}
-        borderRight="1px solid var(--ads-v2-color-border)"
         data-testid="t--ide-add-pane"
         justifyContent="space-between"
         px="spaces-4"
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
index 3248fdbfd5f7..6dc72e055451 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
@@ -34,10 +34,6 @@ import { getHasCreateDatasourcePermission } from "@appsmith/utils/BusinessFeatur
 import { EmptyState } from "../EditorPane/components/EmptyState";
 import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
 
-const PaneContainer = styled.div`
-  width: 300px;
-`;
-
 const PaneBody = styled.div`
   padding: var(--ads-v2-spaces-3) 0;
   height: calc(100vh - 120px);
@@ -99,7 +95,12 @@ const DataSidePane = (props: DataSidePaneProps) => {
     );
 
   return (
-    <PaneContainer>
+    <Flex
+      borderRight="1px solid var(--ads-v2-color-border)"
+      flexDirection="column"
+      height="100%"
+      width="300px"
+    >
       <PaneHeader
         rightIcon={
           canCreateDatasource && datasources.length !== 0 ? (
@@ -155,7 +156,7 @@ const DataSidePane = (props: DataSidePaneProps) => {
           ))}
         </Flex>
       </PaneBody>
-    </PaneContainer>
+    </Flex>
   );
 };
 
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx
index f6537788c180..e42d8980b9cb 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx
@@ -5,11 +5,8 @@ import { useSelector } from "react-redux";
 import { selectLibrariesForExplorer } from "@appsmith/selectors/entitiesSelector";
 import { animated, useTransition } from "react-spring";
 import { LibraryEntity } from "pages/Editor/Explorer/Libraries";
-import styled from "styled-components";
-
-const Container = styled.div`
-  width: 250px;
-`;
+import { Flex } from "design-system";
+import { DEFAULT_EXPLORER_PANE_WIDTH } from "constants/AppConstants";
 
 const LibrarySidePane = () => {
   const libraries = useSelector(selectLibrariesForExplorer);
@@ -20,7 +17,12 @@ const LibrarySidePane = () => {
     leave: { opacity: 1 },
   });
   return (
-    <Container>
+    <Flex
+      borderRight="1px solid var(--ads-v2-color-border)"
+      flexDirection="column"
+      height="100%"
+      width={DEFAULT_EXPLORER_PANE_WIDTH + "px"}
+    >
       <PaneHeader
         rightIcon={<AddLibraryPopover />}
         title="Installed Libraries"
@@ -30,7 +32,7 @@ const LibrarySidePane = () => {
           <LibraryEntity lib={lib} />
         </animated.div>
       ))}
-    </Container>
+    </Flex>
   );
 };
 
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
index 9a894bfd974e..308441322c21 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
@@ -25,7 +25,7 @@ export const LeftPaneContainer = styled.div<{ showRightBorder?: boolean }>`
 const LeftPane = () => {
   const { path } = useRouteMatch();
   return (
-    <LeftPaneContainer>
+    <LeftPaneContainer showRightBorder={false}>
       <Switch>
         <SentryRoute
           component={DataSidePane}
diff --git a/app/client/src/pages/Editor/IDE/index.tsx b/app/client/src/pages/Editor/IDE/index.tsx
index bbd38f11d2c2..adb67c53b869 100644
--- a/app/client/src/pages/Editor/IDE/index.tsx
+++ b/app/client/src/pages/Editor/IDE/index.tsx
@@ -30,7 +30,7 @@ function IDE() {
       <EditorWrapperContainer>
         <div
           className={classNames({
-            [`transition-transform transform duration-400 flex ${tailwindLayers.entityExplorer}`]:
+            [`transition-transform transform duration-400 flex h-full ${tailwindLayers.entityExplorer}`]:
               true,
             relative: !isCombinedPreviewMode,
             "-translate-x-full fixed": isCombinedPreviewMode,
@@ -42,7 +42,7 @@ function IDE() {
         <MainPane id="app-body" />
         <div
           className={classNames({
-            [`transition-transform transform duration-400 ${tailwindLayers.propertyPane}`]:
+            [`transition-transform transform duration-400 h-full ${tailwindLayers.propertyPane}`]:
               true,
             relative: !isCombinedPreviewMode,
             "translate-x-full fixed right-0": isCombinedPreviewMode,
diff --git a/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx b/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx
index e91714bc51de..80fea699a8e0 100644
--- a/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx
+++ b/app/client/src/pages/Editor/commons/EditorSettingsPaneContainer.tsx
@@ -11,9 +11,12 @@ const SettingsPageWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: ${APP_SETTINGS_PANE_WIDTH}px;
+
   &:nth-child(2) {
     height: 100%;
   }
+
+  border-right: 1px solid var(--ads-v2-color-border);
 `;
 
 const EditorSettingsPaneContainer = ({

From 434fbd08d6ca801493becee87f3f96d8e8b7da2c Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 30 Jul 2024 17:28:11 +0530
Subject: [PATCH 15/16] fix: More styles

---
 .../pages/Editor/IDE/EditorPane/JS/Add.tsx    | 19 ++++--
 .../pages/Editor/IDE/EditorPane/Query/Add.tsx | 22 +++++--
 .../src/pages/Editor/IDE/EditorPane/index.tsx |  5 ++
 .../Editor/IDE/EditorPane/types/AddProps.ts   |  6 --
 .../src/pages/Editor/IDE/EditorTabs/List.tsx  |  2 +-
 .../IDE/EditorTabs/ScreenModeToggle.tsx       | 64 ++++++++++---------
 .../src/pages/Editor/JSEditor/JSAddState.tsx  | 22 -------
 .../Editor/QueryEditor/QueriesAddState.tsx    | 22 -------
 8 files changed, 73 insertions(+), 89 deletions(-)
 delete mode 100644 app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts
 delete mode 100644 app/client/src/pages/Editor/JSEditor/JSAddState.tsx
 delete mode 100644 app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
index de9e62918194..62084e653ff1 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
@@ -11,16 +11,19 @@ import {
   useJSAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
-import type { AddProps } from "../types/AddProps";
 import { createAddClassName, fuzzySearchInObjectItems } from "../utils";
 import { FocusEntity } from "navigation/FocusEntity";
 import type { GroupedListProps } from "../components/types";
 import { EmptySearchResult } from "../components/EmptySearchResult";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import type { FlexProps } from "design-system";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
-const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
+const AddJS = () => {
   const dispatch = useDispatch();
   const pageId = useSelector(getCurrentPageId);
   const [searchTerm, setSearchTerm] = useState("");
+  const ideViewMode = useSelector(getIDEViewMode);
 
   const groupedJsOperations = useGroupedAddJsOperations();
 
@@ -62,20 +65,28 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
     groups,
   );
 
+  const extraPadding: FlexProps =
+    ideViewMode === EditorViewMode.FullScreen
+      ? {
+          px: "spaces-4",
+          py: "spaces-7",
+        }
+      : {};
+
   return (
     <Flex
       data-testid="t--ide-add-pane"
       height="100%"
       justifyContent="center"
       p="spaces-3"
-      {...containerProps}
+      {...extraPadding}
     >
       <Flex
         flexDirection="column"
         gap={"spaces-4"}
+        maxW="40vw"
         overflow="hidden"
         width="100%"
-        {...innerContainerProps}
       >
         <SegmentAddHeader
           onCloseClick={closeAddJS}
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
index 0a4eacf10dec..ecd29cb2210b 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Flex, SearchInput } from "design-system";
 
-import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
+import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import SegmentAddHeader from "../components/SegmentAddHeader";
 import GroupedList from "../components/GroupedList";
 import {
@@ -9,16 +9,20 @@ import {
   useGroupedAddQueryOperations,
   useQueryAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
-import type { AddProps } from "../types/AddProps";
 import { fuzzySearchInObjectItems } from "../utils";
 import type { GroupedListProps } from "../components/types";
 import { EmptySearchResult } from "../components/EmptySearchResult";
+import { useSelector } from "react-redux";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import type { FlexProps } from "design-system";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 
-const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
+const AddQuery = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const { getListItems } = useAddQueryListItems();
   const groupedActionOperations = useGroupedAddQueryOperations();
   const { closeAddQuery } = useQueryAdd();
+  const ideViewMode = useSelector(getIDEViewMode);
 
   const groups = groupedActionOperations.map((group) => ({
     groupTitle: group.title,
@@ -31,20 +35,28 @@ const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
     groups,
   );
 
+  const extraPadding: FlexProps =
+    ideViewMode === EditorViewMode.FullScreen
+      ? {
+          px: "spaces-4",
+          py: "spaces-7",
+        }
+      : {};
+
   return (
     <Flex
       data-testid="t--ide-add-pane"
       height="100%"
       justifyContent="center"
       p="spaces-3"
-      {...containerProps}
+      {...extraPadding}
     >
       <Flex
         flexDirection="column"
         gap={"spaces-4"}
+        maxW="40vw"
         overflow="hidden"
         width="100%"
-        {...innerContainerProps}
       >
         <SegmentAddHeader
           onCloseClick={closeAddQuery}
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
index 8f44e6483ce3..5be6cae2b43f 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/index.tsx
@@ -13,6 +13,11 @@ const EditorPane = () => {
 
   return (
     <Flex
+      borderRight={
+        ideViewMode === EditorViewMode.SplitScreen
+          ? "1px solid var(--ads-v2-color-border)"
+          : ""
+      }
       className="ide-editor-left-pane"
       flexDirection={
         ideViewMode === EditorViewMode.SplitScreen ? "column" : "row"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts b/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts
deleted file mode 100644
index bb8034901bb6..000000000000
--- a/app/client/src/pages/Editor/IDE/EditorPane/types/AddProps.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { FlexProps } from "design-system";
-
-export interface AddProps {
-  containerProps?: FlexProps;
-  innerContainerProps?: FlexProps;
-}
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
index 931dee8687ab..21ab32804f14 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
@@ -24,7 +24,7 @@ export const List = () => {
   return (
     <ListContainer
       bg="var(--ads-v2-color-bg)"
-      className="absolute top-[32px]"
+      className="absolute top-[36px]" // space for tabs on top and then some padding
       data-testid="t--editorpane-list-view"
       h="calc(100% - 32px)"
       w="100%"
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
index 13eb9dd1c770..2178306ec52b 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx
@@ -16,46 +16,52 @@ export const ScreenModeToggle = () => {
   const dispatch = useDispatch();
   const ideViewMode = useSelector(getIDEViewMode);
 
-  const toggleEditorMode = useCallback(() => {
-    const newMode =
-      ideViewMode === EditorViewMode.SplitScreen
-        ? EditorViewMode.FullScreen
-        : EditorViewMode.SplitScreen;
+  const switchToFullScreen = useCallback(() => {
+    AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
+      to: EditorViewMode.FullScreen,
+    });
+    dispatch(setIdeEditorViewMode(EditorViewMode.FullScreen));
+  }, [dispatch]);
 
+  const switchToSplitScreen = useCallback(() => {
     AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
-      to: newMode,
+      to: EditorViewMode.SplitScreen,
     });
-    dispatch(setIdeEditorViewMode(newMode));
-  }, [ideViewMode, dispatch]);
+    dispatch(setIdeEditorViewMode(EditorViewMode.SplitScreen));
+  }, [dispatch]);
+
+  if (ideViewMode === EditorViewMode.SplitScreen) {
+    return (
+      <Tooltip
+        content={createMessage(MAXIMIZE_BUTTON_TOOLTIP)}
+        key={createMessage(MAXIMIZE_BUTTON_TOOLTIP)}
+      >
+        <Button
+          className="ml-auto !min-w-[24px]"
+          data-testid={"t--ide-maximize"}
+          id={"editor-mode-maximize"}
+          isIconButton
+          kind="tertiary"
+          onClick={switchToFullScreen}
+          startIcon={"maximize-v3"}
+        />
+      </Tooltip>
+    );
+  }
 
   return (
     <Tooltip
-      content={
-        ideViewMode === EditorViewMode.SplitScreen
-          ? createMessage(MAXIMIZE_BUTTON_TOOLTIP)
-          : createMessage(MINIMIZE_BUTTON_TOOLTIP)
-      }
+      content={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
+      key={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
     >
       <Button
         className="ml-auto !min-w-[24px]"
-        data-testid={
-          ideViewMode === EditorViewMode.SplitScreen
-            ? "t--ide-maximize"
-            : "t--ide-minimize"
-        }
-        id={
-          ideViewMode === EditorViewMode.SplitScreen
-            ? "editor-mode-maximize"
-            : "editor-mode-minimize"
-        }
+        data-testid={"t--ide-minimize"}
+        id={"editor-mode-minimize"}
         isIconButton
         kind="tertiary"
-        onClick={toggleEditorMode}
-        startIcon={
-          ideViewMode === EditorViewMode.SplitScreen
-            ? "maximize-v3"
-            : "minimize-v3"
-        }
+        onClick={switchToSplitScreen}
+        startIcon={"minimize-v3"}
       />
     </Tooltip>
   );
diff --git a/app/client/src/pages/Editor/JSEditor/JSAddState.tsx b/app/client/src/pages/Editor/JSEditor/JSAddState.tsx
deleted file mode 100644
index 9cd066d399fb..000000000000
--- a/app/client/src/pages/Editor/JSEditor/JSAddState.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { Flex } from "design-system";
-import AddJS from "pages/Editor/IDE/EditorPane/JS/Add";
-import { EDITOR_TABS_HEIGHT } from "../IDE/EditorPane/constants";
-
-const JSAddState = () => {
-  return (
-    <Flex height={`calc(100% - ${EDITOR_TABS_HEIGHT})`} justifyContent="center">
-      <AddJS
-        containerProps={{
-          px: "spaces-4",
-          py: "spaces-7",
-        }}
-        innerContainerProps={{
-          minWidth: "30vw",
-        }}
-      />
-    </Flex>
-  );
-};
-
-export { JSAddState };
diff --git a/app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx b/app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx
deleted file mode 100644
index ce50dd0aea2b..000000000000
--- a/app/client/src/pages/Editor/QueryEditor/QueriesAddState.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { Flex } from "design-system";
-import AddQuery from "pages/Editor/IDE/EditorPane/Query/Add";
-import { EDITOR_TABS_HEIGHT } from "../IDE/EditorPane/constants";
-
-const QueriesAddState = () => {
-  return (
-    <Flex height={`calc(100% - ${EDITOR_TABS_HEIGHT})`} justifyContent="center">
-      <AddQuery
-        containerProps={{
-          px: "spaces-4",
-          py: "spaces-7",
-        }}
-        innerContainerProps={{
-          minWidth: "30vw",
-        }}
-      />
-    </Flex>
-  );
-};
-
-export { QueriesAddState };

From 10deced765921cb220416cad3bfc30859b2960a1 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Wed, 31 Jul 2024 10:35:17 +0530
Subject: [PATCH 16/16] Remove unused

---
 app/client/src/ce/sagas/PageSagas.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx
index 3a575ef0c0d6..a3db2c0fe34d 100644
--- a/app/client/src/ce/sagas/PageSagas.tsx
+++ b/app/client/src/ce/sagas/PageSagas.tsx
@@ -79,7 +79,6 @@ import type { ApiResponse } from "api/ApiResponses";
 import {
   combinedPreviewModeSelector,
   getCurrentApplicationId,
-  getCurrentBasePageId,
   getCurrentLayoutId,
   getCurrentPageId,
   getCurrentPageName,
@@ -1334,7 +1333,6 @@ export function* setCanvasCardsStateSaga(action: ReduxAction<string>) {
 }
 
 export function* setPreviewModeInitSaga(action: ReduxAction<boolean>) {
-  const currentPageId: string = yield select(getCurrentPageId);
   const isPreviewMode: boolean = yield select(combinedPreviewModeSelector);
   if (action.payload) {
     // we animate out elements and then move to the canvas