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

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

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),
+    [],
+  );
 
   return (
     <>

app/client/src/pages/AppIDE/layout/StaticLayout.tsx → 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/AppIDE/layout/routers/LeftPane.tsx → app/client/src/pages/AppIDE/layouts/routers/LeftPane.tsx

@@ -60,9 +60,11 @@ const LeftPane = () => {
           )}
         />
         <SentryRoute
-          component={LibrarySidePane}
           exact
           path={librarySidePanePaths}
+          render={(routeProps) => (
+            <LibrarySidePane {...routeProps} showAddButton />
+          )}
         />
         <SentryRoute
           component={AppSettingsPane}