chore: Moving static layout styled components to a common file for re-using on EE (#39379)

## Description

- Moving static layout styled components to a common file for re-using
on EE
- Updating AppIDE folder name: `layout` to `layouts`
- Showing the Add button for libraries via props to re-use the component
on EE

Fixes [#39037](https://github.com/appsmithorg/appsmith/issues/39037)

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13436155470>
> Commit: bafebbe1d485867240076a2122d87aac26eab177
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13436155470&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 20 Feb 2025 14:41:02 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Introduced an option in the libraries panel to conditionally display
an “add” button, offering a more dynamic experience.
- Added new layout components to facilitate better layout management
within the application.

- **Refactor**
- Enhanced layout management through unified grid-based components for
improved visual consistency.
- Updated component interfaces to accept new props for enhanced
functionality.
  - Adjusted import paths to reflect a restructured file organization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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};
+`;

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 (
     <IDESidePaneWrapper>
-      <JSLibrariesSection />
+      <JSLibrariesSection showAddButton={showAddButton} />
     </IDESidePaneWrapper>
   );
 };

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;
 

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,

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(() => <AddLibraryPopover />, []);
+  const rightIcon = useMemo(
+    () => (showAddButton ? <AddLibraryPopover /> : null),
+    [showAddButton],
+  );
 
   return (
     <>

app/client/src/pages/AppIDE/components/ProtectedCallout/ProtectedCallout.test.tsx

@@ -41,10 +41,10 @@ const getMockStore = (override: Record<string, any> = {}): any => {
   });
 };
 
-jest.mock("../../layout/routers/MainPane/MainPane.tsx", () => () => <div />);
+jest.mock("../../layouts/routers/MainPane/MainPane.tsx", () => () => <div />);
-jest.mock("../../layout/routers/LeftPane", () => () => <div />);
+jest.mock("../../layouts/routers/LeftPane", () => () => <div />);
-jest.mock("../../layout/routers/RightPane", () => () => <div />);
+jest.mock("../../layouts/routers/RightPane", () => () => <div />);
-jest.mock("../../layout/routers/Sidebar", () => () => <div />);
+jest.mock("../../layouts/routers/Sidebar", () => () => <div />);
 jest.mock("../../../../components/BottomBar", () => () => <div />);
 
 const dispatch = jest.fn();

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();
 

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";

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";