diff --git a/app/client/src/IDE/Components/LayoutComponents.tsx b/app/client/src/IDE/Components/LayoutComponents.tsx
new file mode 100644
index 000000000000..61076cdf47ee
--- /dev/null
+++ b/app/client/src/IDE/Components/LayoutComponents.tsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const GridContainer = styled.div`
+ display: grid;
+ width: 100vw;
+ height: 100%;
+`;
+
+export const LayoutContainer = styled.div<{ name: string }>`
+ position: relative;
+ grid-area: ${(props) => props.name};
+`;
diff --git a/app/client/src/ce/pages/AppIDE/components/LibrariesList/LibrarySidePane.tsx b/app/client/src/ce/pages/AppIDE/components/LibrariesList/LibrarySidePane.tsx
index 720035cecc11..6a6eb00b1797 100644
--- a/app/client/src/ce/pages/AppIDE/components/LibrariesList/LibrarySidePane.tsx
+++ b/app/client/src/ce/pages/AppIDE/components/LibrariesList/LibrarySidePane.tsx
@@ -2,10 +2,12 @@ import React from "react";
import JSLibrariesSection from "pages/AppIDE/components/LibrariesList/JSLibrariesSection";
import { IDESidePaneWrapper } from "IDE";
-const LibrarySidePane = () => {
+const LibrarySidePane = (props: { showAddButton?: boolean }) => {
+ const { showAddButton = true } = props;
+
return (
-
+
);
};
diff --git a/app/client/src/ce/pages/common/AppHeader.tsx b/app/client/src/ce/pages/common/AppHeader.tsx
index c2b601048dfa..c85696568649 100644
--- a/app/client/src/ce/pages/common/AppHeader.tsx
+++ b/app/client/src/ce/pages/common/AppHeader.tsx
@@ -19,7 +19,7 @@ import {
} from "constants/routes";
import Navigation from "pages/AppViewer/Navigation";
import type { RouteComponentProps } from "react-router";
-import { Header as AppIDEHeader } from "pages/AppIDE/layout/components/Header";
+import { Header as AppIDEHeader } from "pages/AppIDE/layouts/components/Header";
export type Props = RouteComponentProps;
diff --git a/app/client/src/pages/AppIDE/AppIDE.tsx b/app/client/src/pages/AppIDE/AppIDE.tsx
index 480184aa45f0..6dd21b0cb0f5 100644
--- a/app/client/src/pages/AppIDE/AppIDE.tsx
+++ b/app/client/src/pages/AppIDE/AppIDE.tsx
@@ -5,7 +5,7 @@ import type { RouteComponentProps } from "react-router-dom";
import { withRouter } from "react-router-dom";
import type { BuilderRouteParams } from "constants/routes";
import type { AppState } from "ee/reducers";
-import IDE from "./layout";
+import IDE from "./layouts";
import {
getCurrentApplicationId,
getIsEditorInitialized,
diff --git a/app/client/src/pages/AppIDE/components/LibrariesList/JSLibrariesSection.tsx b/app/client/src/pages/AppIDE/components/LibrariesList/JSLibrariesSection.tsx
index 4c89d1f2c48f..28408a84ec38 100644
--- a/app/client/src/pages/AppIDE/components/LibrariesList/JSLibrariesSection.tsx
+++ b/app/client/src/pages/AppIDE/components/LibrariesList/JSLibrariesSection.tsx
@@ -7,7 +7,8 @@ import { useSelector } from "react-redux";
import { animated, useTransition } from "react-spring";
import { LibraryEntity } from "pages/Editor/Explorer/Libraries";
-function JSLibrariesSection() {
+function JSLibrariesSection(props: { showAddButton: boolean }) {
+ const { showAddButton } = props;
const libraries = useSelector(selectLibrariesForExplorer);
const transitions = useTransition(libraries, {
keys: (lib) => lib.name,
@@ -16,7 +17,10 @@ function JSLibrariesSection() {
leave: { opacity: 1 },
});
- const rightIcon = useMemo(() => , []);
+ const rightIcon = useMemo(
+ () => (showAddButton ? : null),
+ [showAddButton],
+ );
return (
<>
diff --git a/app/client/src/pages/AppIDE/components/ProtectedCallout/ProtectedCallout.test.tsx b/app/client/src/pages/AppIDE/components/ProtectedCallout/ProtectedCallout.test.tsx
index 1cd6d891a2d6..2c94eb84507c 100644
--- a/app/client/src/pages/AppIDE/components/ProtectedCallout/ProtectedCallout.test.tsx
+++ b/app/client/src/pages/AppIDE/components/ProtectedCallout/ProtectedCallout.test.tsx
@@ -41,10 +41,10 @@ const getMockStore = (override: Record = {}): any => {
});
};
-jest.mock("../../layout/routers/MainPane/MainPane.tsx", () => () => );
-jest.mock("../../layout/routers/LeftPane", () => () => );
-jest.mock("../../layout/routers/RightPane", () => () => );
-jest.mock("../../layout/routers/Sidebar", () => () => );
+jest.mock("../../layouts/routers/MainPane/MainPane.tsx", () => () => );
+jest.mock("../../layouts/routers/LeftPane", () => () => );
+jest.mock("../../layouts/routers/RightPane", () => () => );
+jest.mock("../../layouts/routers/Sidebar", () => () => );
jest.mock("../../../../components/BottomBar", () => () => );
const dispatch = jest.fn();
diff --git a/app/client/src/pages/AppIDE/layout/AnimatedLayout.tsx b/app/client/src/pages/AppIDE/layouts/AnimatedLayout.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/AnimatedLayout.tsx
rename to app/client/src/pages/AppIDE/layouts/AnimatedLayout.tsx
diff --git a/app/client/src/pages/AppIDE/layout/StaticLayout.tsx b/app/client/src/pages/AppIDE/layouts/StaticLayout.tsx
similarity index 89%
rename from app/client/src/pages/AppIDE/layout/StaticLayout.tsx
rename to app/client/src/pages/AppIDE/layouts/StaticLayout.tsx
index 38dfb21e9db6..b30d56595853 100644
--- a/app/client/src/pages/AppIDE/layout/StaticLayout.tsx
+++ b/app/client/src/pages/AppIDE/layouts/StaticLayout.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import styled from "styled-components";
import {
useGitModEnabled,
@@ -16,6 +15,10 @@ import RightPane from "./routers/RightPane";
import { ProtectedCallout } from "../components/ProtectedCallout";
import { useGridLayoutTemplate } from "./hooks/useGridLayoutTemplate";
import { Areas } from "./constants";
+import {
+ GridContainer,
+ LayoutContainer,
+} from "IDE/Components/LayoutComponents";
function GitProtectedBranchCallout() {
const isGitModEnabled = useGitModEnabled();
@@ -32,17 +35,6 @@ function GitProtectedBranchCallout() {
return null;
}
-const GridContainer = styled.div`
- display: grid;
- width: 100vw;
- height: 100%;
-`;
-
-const LayoutContainer = styled.div<{ name: string }>`
- position: relative;
- grid-area: ${(props) => props.name};
-`;
-
export const StaticLayout = React.memo(() => {
const { areas, columns } = useGridLayoutTemplate();
diff --git a/app/client/src/pages/AppIDE/layout/components/Editor.tsx b/app/client/src/pages/AppIDE/layouts/components/Editor.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/Editor.tsx
rename to app/client/src/pages/AppIDE/layouts/components/Editor.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorPane.tsx b/app/client/src/pages/AppIDE/layouts/components/EditorPane.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorPane.tsx
rename to app/client/src/pages/AppIDE/layouts/components/EditorPane.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/AddTab.tsx b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/AddTab.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/AddTab.tsx
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/AddTab.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/EditableTab.tsx b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/EditableTab.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/EditableTab.tsx
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/EditableTab.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/Editortabs.test.tsx b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/Editortabs.test.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/Editortabs.test.tsx
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/Editortabs.test.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/List.tsx b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/List.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/List.tsx
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/List.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/ScreenModeToggle.tsx b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/ScreenModeToggle.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/ScreenModeToggle.tsx
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/ScreenModeToggle.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/constants.ts b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/constants.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/constants.ts
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/constants.ts
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/hooks.ts b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/hooks.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/hooks.ts
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/hooks.ts
diff --git a/app/client/src/pages/AppIDE/layout/components/EditorTabs/index.tsx b/app/client/src/pages/AppIDE/layouts/components/EditorTabs/index.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/EditorTabs/index.tsx
rename to app/client/src/pages/AppIDE/layouts/components/EditorTabs/index.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/Explorer.tsx b/app/client/src/pages/AppIDE/layouts/components/Explorer.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/Explorer.tsx
rename to app/client/src/pages/AppIDE/layouts/components/Explorer.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/Header/DeployButton.tsx b/app/client/src/pages/AppIDE/layouts/components/Header/DeployButton.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/Header/DeployButton.tsx
rename to app/client/src/pages/AppIDE/layouts/components/Header/DeployButton.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/Header/EditorTitle.tsx b/app/client/src/pages/AppIDE/layouts/components/Header/EditorTitle.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/Header/EditorTitle.tsx
rename to app/client/src/pages/AppIDE/layouts/components/Header/EditorTitle.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/Header/index.tsx b/app/client/src/pages/AppIDE/layouts/components/Header/index.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/Header/index.tsx
rename to app/client/src/pages/AppIDE/layouts/components/Header/index.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/SegmentSwitcher/SegmentSwitcher.tsx b/app/client/src/pages/AppIDE/layouts/components/SegmentSwitcher/SegmentSwitcher.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/SegmentSwitcher/SegmentSwitcher.tsx
rename to app/client/src/pages/AppIDE/layouts/components/SegmentSwitcher/SegmentSwitcher.tsx
diff --git a/app/client/src/pages/AppIDE/layout/components/SegmentSwitcher/useSegmentNavigation.ts b/app/client/src/pages/AppIDE/layouts/components/SegmentSwitcher/useSegmentNavigation.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/components/SegmentSwitcher/useSegmentNavigation.ts
rename to app/client/src/pages/AppIDE/layouts/components/SegmentSwitcher/useSegmentNavigation.ts
diff --git a/app/client/src/pages/AppIDE/layout/constants.ts b/app/client/src/pages/AppIDE/layouts/constants.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/constants.ts
rename to app/client/src/pages/AppIDE/layouts/constants.ts
diff --git a/app/client/src/pages/AppIDE/layout/hooks/useEditorStateLeftPaneWidth.ts b/app/client/src/pages/AppIDE/layouts/hooks/useEditorStateLeftPaneWidth.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/hooks/useEditorStateLeftPaneWidth.ts
rename to app/client/src/pages/AppIDE/layouts/hooks/useEditorStateLeftPaneWidth.ts
diff --git a/app/client/src/pages/AppIDE/layout/hooks/useGridLayoutTemplate.ts b/app/client/src/pages/AppIDE/layouts/hooks/useGridLayoutTemplate.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/hooks/useGridLayoutTemplate.ts
rename to app/client/src/pages/AppIDE/layouts/hooks/useGridLayoutTemplate.ts
diff --git a/app/client/src/pages/AppIDE/layout/hooks/useWidgetSelectionBlockListener.ts b/app/client/src/pages/AppIDE/layouts/hooks/useWidgetSelectionBlockListener.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/hooks/useWidgetSelectionBlockListener.ts
rename to app/client/src/pages/AppIDE/layouts/hooks/useWidgetSelectionBlockListener.ts
diff --git a/app/client/src/pages/AppIDE/layout/index.tsx b/app/client/src/pages/AppIDE/layouts/index.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/index.tsx
rename to app/client/src/pages/AppIDE/layouts/index.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/JSEditor/JSEditor.tsx b/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSEditor.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/JSEditor/JSEditor.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSEditor.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/JSEditor/JSRender.test.tsx b/app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSRender.test.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/JSEditor/JSRender.test.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/JSEditor/JSRender.test.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/JSEditor/index.ts b/app/client/src/pages/AppIDE/layouts/routers/JSEditor/index.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/JSEditor/index.ts
rename to app/client/src/pages/AppIDE/layouts/routers/JSEditor/index.ts
diff --git a/app/client/src/pages/AppIDE/layout/routers/LeftPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/LeftPane.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/LeftPane.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/LeftPane.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/MainPane/MainPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/MainPane/MainPane.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/MainPane/MainPane.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/MainPane/MainPane.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/MainPane/index.ts b/app/client/src/pages/AppIDE/layouts/routers/MainPane/index.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/MainPane/index.ts
rename to app/client/src/pages/AppIDE/layouts/routers/MainPane/index.ts
diff --git a/app/client/src/pages/AppIDE/layout/routers/QueryEditor/Editor.tsx b/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/Editor.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/QueryEditor/Editor.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/QueryEditor/Editor.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/QueryEditor/QueryRender.test.tsx b/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/QueryRender.test.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/QueryEditor/QueryRender.test.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/QueryEditor/QueryRender.test.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/QueryEditor/index.ts b/app/client/src/pages/AppIDE/layouts/routers/QueryEditor/index.ts
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/QueryEditor/index.ts
rename to app/client/src/pages/AppIDE/layouts/routers/QueryEditor/index.ts
diff --git a/app/client/src/pages/AppIDE/layout/routers/RightPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/RightPane.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/RightPane.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/RightPane.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/Sidebar.tsx b/app/client/src/pages/AppIDE/layouts/routers/Sidebar.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/Sidebar.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/Sidebar.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/UISegmentLeftPane/UIRender.test.tsx b/app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UIRender.test.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/UISegmentLeftPane/UIRender.test.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UIRender.test.tsx
diff --git a/app/client/src/pages/AppIDE/layout/routers/UISegmentLeftPane/UISegmentLeftPane.tsx b/app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UISegmentLeftPane.tsx
similarity index 100%
rename from app/client/src/pages/AppIDE/layout/routers/UISegmentLeftPane/UISegmentLeftPane.tsx
rename to app/client/src/pages/AppIDE/layouts/routers/UISegmentLeftPane/UISegmentLeftPane.tsx
diff --git a/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx b/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx
index 9e1cb01eb581..e199eefdeed9 100644
--- a/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx
+++ b/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.test.tsx
@@ -28,7 +28,7 @@ import {
import { MockCanvas } from "test/testMockedWidgets";
import { act, fireEvent, render, waitFor } from "test/testUtils";
import * as widgetRenderUtils from "utils/widgetRenderUtils";
-import IDE from "pages/AppIDE/layout";
+import IDE from "pages/AppIDE/layouts";
import GlobalHotKeys from "./GlobalHotKeys";
import * as widgetSelectionsActions from "actions/widgetSelectionActions";
import { SelectionRequestType } from "sagas/WidgetSelectUtils";
diff --git a/app/client/test/testMockedWidgets.tsx b/app/client/test/testMockedWidgets.tsx
index 26f3a88cb84f..1314cb303169 100644
--- a/app/client/test/testMockedWidgets.tsx
+++ b/app/client/test/testMockedWidgets.tsx
@@ -1,7 +1,7 @@
import { APP_MODE } from "entities/App";
import AppViewerPageContainer from "pages/AppViewer/AppViewerPageContainer";
import Canvas from "pages/Editor/Canvas";
-import IDE from "pages/AppIDE/layout";
+import IDE from "pages/AppIDE/layouts";
import React from "react";
import { useSelector } from "react-redux";
import { getCanvasWidgetsStructure } from "ee/selectors/entitiesSelector";