chore: Split library side pane for adding package control section

app/client/src/IDE/Components/SidePaneWrapper.tsx

@@ -0,0 +1,29 @@
+import { Flex } from "@appsmith/ads";
+import React from "react";
+import type { ReactNode } from "react";
+import styled from "styled-components";
+
+interface SidePaneContainerProps {
+  children?: ReactNode;
+  padded?: boolean;
+}
+
+const StyledContainer = styled(Flex)<Pick<SidePaneContainerProps, "padded">>`
+  padding: ${({ padded }) => padded && "var(--ads-v2-spaces-2)"};
+`;
+
+function SidePaneWrapper({ children, padded = false }: SidePaneContainerProps) {
+  return (
+    <StyledContainer
+      borderRight="1px solid var(--ads-v2-color-border)"
+      flexDirection="column"
+      height="100%"
+      padded={padded}
+      width={"100%"}
+    >
+      {children}
+    </StyledContainer>
+  );
+}
+
+export default SidePaneWrapper;

app/client/src/IDE/index.ts

@@ -54,6 +54,11 @@ export { default as IDEBottomView } from "./Components/BottomView";
  * It switches between different editor states
  */
 export { default as IDESidebar } from "./Components/Sidebar";
+/**
+ * IDESidePaneWrapper is used as a wrapper for side panes, which provides a border and optional padding
+ * and enforces 100% width and height to the parent.
+ */
+export { default as IDESidePaneWrapper } from "./Components/SidePaneWrapper";
 
 /**
  * ToolbarSettingsPopover is a popover attached to a settings toggle button in the toolbar

app/client/src/ce/RouteBuilder.ts

@@ -204,3 +204,12 @@ export const queryAddURL = (props: URLBuilderParams): string =>
     ...props,
     suffix: `queries/add`,
   });
+
+export const appLibrariesURL = (): string =>
+  urlBuilder.build({
+    suffix: "libraries",
+  });
+export const appPackagesURL = (): string =>
+  urlBuilder.build({
+    suffix: "packages",
+  });

app/client/src/ce/constants/routes/appRoutes.ts

@@ -67,6 +67,7 @@ export const JS_COLLECTION_ID_ADD_PATH = `${JS_COLLECTION_EDITOR_PATH}/:baseColl
 export const DATA_SOURCES_EDITOR_LIST_PATH = `/datasource`;
 export const DATA_SOURCES_EDITOR_ID_PATH = `/datasource/:datasourceId`;
 export const APP_LIBRARIES_EDITOR_PATH = `/libraries`;
+export const APP_PACKAGES_EDITOR_PATH = `/packages`;
 export const APP_SETTINGS_EDITOR_PATH = `/settings`;
 export const SAAS_GSHEET_EDITOR_ID_PATH = `/saas/google-sheets-plugin/datasources/:datasourceId`;
 export const GEN_TEMPLATE_URL = "generate-page";
@@ -128,6 +129,12 @@ export const matchGeneratePagePath = (pathName: string) =>
   match(`${BUILDER_CUSTOM_PATH}${GENERATE_TEMPLATE_FORM_PATH}`)(pathName) ||
   match(`${BUILDER_PATH_DEPRECATED}${GENERATE_TEMPLATE_FORM_PATH}`)(pathName);
 
+export const matchAppLibrariesPath = (pathName: string) =>
+  match(`${BUILDER_PATH}${APP_LIBRARIES_EDITOR_PATH}`)(pathName);
+
+export const matchAppPackagesPath = (pathName: string) =>
+  match(`${BUILDER_PATH}${APP_PACKAGES_EDITOR_PATH}`)(pathName);
+
 export const addBranchParam = (branch: string) => {
   const url = new URL(window.location.href);
 

app/client/src/ce/entities/Engine/actionHelpers.ts

@@ -30,6 +30,7 @@ export const getPageDependencyActions = (
   currentWorkspaceId: string = "",
   featureFlags: DependentFeatureFlags = {},
   allResponses: EditConsolidatedApi,
+  applicationId: string,
 ) => {
   const { datasources, pagesWithMigratedDsl, plugins } = allResponses || {};
   const initActions = [

app/client/src/ce/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts

@@ -0,0 +1,12 @@
+import { createMessage, HEADER_TITLES } from "ee/constants/messages";
+
+/**
+ * In CE this returns a simple text as title but this
+ * hook is extended in EE where based on feature flags
+ * the title changes
+ */
+function useLibraryHeaderTitle() {
+  return createMessage(HEADER_TITLES.LIBRARIES);
+}
+
+export default useLibraryHeaderTitle;

app/client/src/ce/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import JSLibrariesSection from "pages/Editor/IDE/LeftPane/JSLibrariesSection";
+import { IDESidePaneWrapper } from "IDE";
+
+const LibrarySidePane = () => {
+  return (
+    <IDESidePaneWrapper>
+      <JSLibrariesSection />
+    </IDESidePaneWrapper>
+  );
+};
+
+export default LibrarySidePane;

app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts

@@ -4,6 +4,7 @@ import {
   API_EDITOR_ID_ADD_PATH,
   API_EDITOR_ID_PATH,
   APP_LIBRARIES_EDITOR_PATH,
+  APP_PACKAGES_EDITOR_PATH,
   APP_SETTINGS_EDITOR_PATH,
   BUILDER_CHECKLIST_PATH,
   BUILDER_CUSTOM_PATH,
@@ -82,6 +83,7 @@ function useRoutes(path: string): RouteReturnType[] {
         `${path}${SAAS_EDITOR_API_ID_PATH}`,
         `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
         `${path}${APP_LIBRARIES_EDITOR_PATH}`,
+        `${path}${APP_PACKAGES_EDITOR_PATH}`,
         `${path}${APP_SETTINGS_EDITOR_PATH}`,
       ],
     },

app/client/src/constants/AppConstants.ts

@@ -9,6 +9,7 @@ export const CANVAS_DEFAULT_MIN_ROWS = Math.ceil(
 export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256;
 export const DEFAULT_PROPERTY_PANE_WIDTH = 288;
 export const APP_SETTINGS_PANE_WIDTH = 525;
+export const APP_LIBRARIES_PANE_WIDTH = 384;
 export const DEFAULT_EXPLORER_PANE_WIDTH = 255;
 export const SPLIT_SCREEN_RATIO = 0.404;
 

app/client/src/ee/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts

@@ -0,0 +1,3 @@
+export * from "ce/pages/Editor/IDE/Header/useLibraryHeaderTitle";
+import { default as CE_useLibraryHeaderTitle } from "ce/pages/Editor/IDE/Header/useLibraryHeaderTitle";
+export default CE_useLibraryHeaderTitle;

app/client/src/ee/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx

@@ -0,0 +1,3 @@
+export * from "ce/pages/Editor/IDE/LeftPane/LibrarySidePane";
+import { default as CE_LibrarySidePane } from "ce/pages/Editor/IDE/LeftPane/LibrarySidePane";
+export default CE_LibrarySidePane;

app/client/src/entities/Engine/AppEditorEngine.ts

@@ -199,6 +199,7 @@ export default class AppEditorEngine extends AppEngine {
   private *loadPluginsAndDatasources(
     allResponses: EditConsolidatedApi,
     rootSpan: Span,
+    applicationId: string,
   ) {
     const loadPluginsAndDatasourcesSpan = startNestedSpan(
       "AppEditorEngine.loadPluginsAndDatasources",
@@ -211,7 +212,12 @@ export default class AppEditorEngine extends AppEngine {
       getFeatureFlagsForEngine,
     );
     const { errorActions, initActions, successActions } =
-      getPageDependencyActions(currentWorkspaceId, featureFlags, allResponses);
+      getPageDependencyActions(
+        currentWorkspaceId,
+        featureFlags,
+        allResponses,
+        applicationId,
+      );
 
     if (!isAirgappedInstance) {
       initActions.push(fetchMockDatasources(mockDatasources));
@@ -259,7 +265,12 @@ export default class AppEditorEngine extends AppEngine {
       allResponses,
       rootSpan,
     );
-    yield call(this.loadPluginsAndDatasources, allResponses, rootSpan);
+    yield call(
+      this.loadPluginsAndDatasources,
+      allResponses,
+      rootSpan,
+      applicationId,
+    );
   }
 
   public *completeChore(rootSpan: Span) {

app/client/src/navigation/FocusEntity.ts

@@ -278,7 +278,10 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
   }
 
   if (match.params.entity) {
-    if (match.params.entity === "libraries") {
+    if (
+      match.params.entity === "libraries" ||
+      match.params.entity === "packages"
+    ) {
       return {
         entity: FocusEntity.LIBRARY,
         id: "",

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

@@ -77,6 +77,7 @@ import type { Page } from "entities/Page";
 import { IDEHeader, IDEHeaderTitle } from "IDE";
 import { APPLICATIONS_URL } from "constants/routes";
 import { useNavigationMenuData } from "../../EditorName/useNavigationMenuData";
+import useLibraryHeaderTitle from "ee/pages/Editor/IDE/Header/useLibraryHeaderTitle";
 
 const StyledDivider = styled(Divider)`
   height: 50%;
@@ -92,6 +93,8 @@ interface HeaderTitleProps {
 }
 
 const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
+  const libraryHeaderTitle = useLibraryHeaderTitle();
+
   switch (appState) {
     case EditorState.DATA:
       return (
@@ -110,12 +113,7 @@ const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
         />
       );
     case EditorState.LIBRARIES:
-      return (
-        <IDEHeaderTitle
-          key={appState}
-          title={createMessage(HEADER_TITLES.LIBRARIES)}
-        />
-      );
+      return <IDEHeaderTitle key={appState} title={libraryHeaderTitle} />;
     default:
       return <EditorTitle key={appState} title={currentPage?.pageName || ""} />;
   }

app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts

@@ -16,6 +16,7 @@ import {
 import {
   APP_SETTINGS_PANE_WIDTH,
   APP_SIDEBAR_WIDTH,
+  APP_LIBRARIES_PANE_WIDTH,
 } from "constants/AppConstants";
 import { useEditorStateLeftPaneWidth } from "./useEditorStateLeftPaneWidth";
 import { type Area, Areas, SIDEBAR_WIDTH } from "../constants";
@@ -97,10 +98,10 @@ function useGridLayoutTemplate(): ReturnValue {
           } else {
             setColumns([
               SIDEBAR_WIDTH,
-              "255px",
+              `${APP_LIBRARIES_PANE_WIDTH}px`,
               (windowWidth -
                 APP_SIDEBAR_WIDTH -
-                255 +
+                APP_LIBRARIES_PANE_WIDTH +
                 "px") as AnimatedGridUnit,
               "0px",
             ]);

app/client/src/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx → app/client/src/pages/Editor/IDE/LeftPane/JSLibrariesSection.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import AddLibraryPopover from "./AddLibraryPopover";
-import PaneHeader from "./PaneHeader";
-import { useSelector } from "react-redux";
+import React, { useMemo } from "react";
+
+import PaneHeader from "pages/Editor/IDE/LeftPane/PaneHeader";
+import AddLibraryPopover from "pages/Editor/IDE/LeftPane/AddLibraryPopover";
 import { selectLibrariesForExplorer } from "ee/selectors/entitiesSelector";
+import { useSelector } from "react-redux";
 import { animated, useTransition } from "react-spring";
 import { LibraryEntity } from "pages/Editor/Explorer/Libraries";
-import { Flex } from "@appsmith/ads";
 
-const LibrarySidePane = () => {
+function JSLibrariesSection() {
   const libraries = useSelector(selectLibrariesForExplorer);
   const transitions = useTransition(libraries, {
     keys: (lib) => lib.name,
@@ -16,24 +16,18 @@ const LibrarySidePane = () => {
     leave: { opacity: 1 },
   });
 
+  const rightIcon = useMemo(() => <AddLibraryPopover />, []);
+
   return (
-    <Flex
-      borderRight="1px solid var(--ads-v2-color-border)"
-      flexDirection="column"
-      height="100%"
-      width={"100%"}
-    >
-      <PaneHeader
-        rightIcon={<AddLibraryPopover />}
-        title="Installed Libraries"
-      />
+    <>
+      <PaneHeader rightIcon={rightIcon} title="Installed Libraries" />
       {transitions((style, lib) => (
         <animated.div style={style}>
           <LibraryEntity lib={lib} />
         </animated.div>
       ))}
-    </Flex>
+    </>
   );
-};
+}
 
-export default LibrarySidePane;
+export default JSLibrariesSection;

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

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { Switch, useRouteMatch } from "react-router";
 import { SentryRoute } from "ee/AppRouter";
 import {
   APP_LIBRARIES_EDITOR_PATH,
+  APP_PACKAGES_EDITOR_PATH,
   APP_SETTINGS_EDITOR_PATH,
   DATA_SOURCES_EDITOR_ID_PATH,
   DATA_SOURCES_EDITOR_LIST_PATH,
@@ -12,8 +13,8 @@ import {
 } from "constants/routes";
 import AppSettingsPane from "./AppSettings";
 import DataSidePane from "./DataSidePane";
-import LibrarySidePane from "./LibrarySidePane";
 import EditorPane from "../EditorPane";
+import LibrarySidePane from "ee/pages/Editor/IDE/LeftPane/LibrarySidePane";
 
 export const LeftPaneContainer = styled.div<{ showRightBorder?: boolean }>`
   height: 100%;
@@ -26,23 +27,32 @@ export const LeftPaneContainer = styled.div<{ showRightBorder?: boolean }>`
 const LeftPane = () => {
   const { path } = useRouteMatch();
 
+  const dataSidePanePaths = useMemo(
+    () => [
+      `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
+      `${path}${DATA_SOURCES_EDITOR_ID_PATH}`,
+      `${path}${INTEGRATION_EDITOR_PATH}`,
+      `${path}${SAAS_GSHEET_EDITOR_ID_PATH}`,
+    ],
+    [path],
+  );
+
+  const librarySidePanePaths = useMemo(
+    () => [
+      `${path}${APP_LIBRARIES_EDITOR_PATH}`,
+      `${path}${APP_PACKAGES_EDITOR_PATH}`,
+    ],
+    [path],
+  );
+
   return (
     <LeftPaneContainer showRightBorder={false}>
       <Switch>
-        <SentryRoute
-          component={DataSidePane}
-          exact
-          path={[
-            `${path}${DATA_SOURCES_EDITOR_LIST_PATH}`,
-            `${path}${DATA_SOURCES_EDITOR_ID_PATH}`,
-            `${path}${INTEGRATION_EDITOR_PATH}`,
-            `${path}${SAAS_GSHEET_EDITOR_ID_PATH}`,
-          ]}
-        />
+        <SentryRoute component={DataSidePane} exact path={dataSidePanePaths} />
         <SentryRoute
           component={LibrarySidePane}
           exact
-          path={`${path}${APP_LIBRARIES_EDITOR_PATH}`}
+          path={librarySidePanePaths}
         />
         <SentryRoute
           component={AppSettingsPane}