From 33c32e7f4740a4d98ea1a9b8f21a3456eaf24837 Mon Sep 17 00:00:00 2001 From: Ashit Rath Date: Wed, 16 Oct 2024 12:55:40 +0530 Subject: [PATCH 1/4] chore: Split and refactor libraries side pane to extend in EE for packages --- app/client/src/ce/RouteBuilder.ts | 9 +++++ .../src/ce/constants/routes/appRoutes.ts | 7 ++++ .../src/ce/entities/Engine/actionHelpers.ts | 1 + .../IDE/Header/useLibraryHeaderTitle.ts | 12 ++++++ .../Editor/IDE/LeftPane/LibrarySidePane.tsx | 13 +++++++ .../ce/pages/Editor/IDE/MainPane/useRoutes.ts | 2 + .../IDE/Header/useLibraryHeaderTitle.ts | 3 ++ .../Editor/IDE/LeftPane/LibrarySidePane.tsx | 3 ++ .../src/entities/Engine/AppEditorEngine.ts | 15 +++++++- app/client/src/navigation/FocusEntity.ts | 5 ++- .../src/pages/Editor/IDE/Header/index.tsx | 10 ++--- .../Editor/IDE/LeftPane/AddLibraryPopover.tsx | 20 ++++++++-- ...arySidePane.tsx => JSLibrariesSection.tsx} | 37 +++++++++++-------- .../pages/Editor/IDE/LeftPane/PaneHeader.tsx | 36 ++++++++++++++---- .../src/pages/Editor/IDE/LeftPane/index.tsx | 36 +++++++++++------- .../src/pages/common/SidePaneWrapper.tsx | 29 +++++++++++++++ 16 files changed, 188 insertions(+), 50 deletions(-) create mode 100644 app/client/src/ce/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts create mode 100644 app/client/src/ce/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx create mode 100644 app/client/src/ee/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts create mode 100644 app/client/src/ee/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx rename app/client/src/pages/Editor/IDE/LeftPane/{LibrarySidePane.tsx => JSLibrariesSection.tsx} (55%) create mode 100644 app/client/src/pages/common/SidePaneWrapper.tsx diff --git a/app/client/src/ce/RouteBuilder.ts b/app/client/src/ce/RouteBuilder.ts index 406c9b42ee38..b8df54bcd135 100644 --- a/app/client/src/ce/RouteBuilder.ts +++ b/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", + }); diff --git a/app/client/src/ce/constants/routes/appRoutes.ts b/app/client/src/ce/constants/routes/appRoutes.ts index 949360d6e944..8031209435be 100644 --- a/app/client/src/ce/constants/routes/appRoutes.ts +++ b/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); diff --git a/app/client/src/ce/entities/Engine/actionHelpers.ts b/app/client/src/ce/entities/Engine/actionHelpers.ts index d27051602e57..96518343501e 100644 --- a/app/client/src/ce/entities/Engine/actionHelpers.ts +++ b/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 = [ diff --git a/app/client/src/ce/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts b/app/client/src/ce/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts new file mode 100644 index 000000000000..489d1d74425b --- /dev/null +++ b/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; diff --git a/app/client/src/ce/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx b/app/client/src/ce/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx new file mode 100644 index 000000000000..3ebc276ab26d --- /dev/null +++ b/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 SidePaneWrapper from "pages/common/SidePaneWrapper"; + +const LibrarySidePane = () => { + return ( + + + + ); +}; + +export default LibrarySidePane; 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 e2efc6cafe78..c49f522c1c33 100644 --- a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts +++ b/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}`, ], }, diff --git a/app/client/src/ee/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts b/app/client/src/ee/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts new file mode 100644 index 000000000000..0b81d5d9afea --- /dev/null +++ b/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; diff --git a/app/client/src/ee/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx b/app/client/src/ee/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx new file mode 100644 index 000000000000..20fb8b49fe3d --- /dev/null +++ b/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; diff --git a/app/client/src/entities/Engine/AppEditorEngine.ts b/app/client/src/entities/Engine/AppEditorEngine.ts index a7520a0d03ea..8b63d0f333bc 100644 --- a/app/client/src/entities/Engine/AppEditorEngine.ts +++ b/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) { diff --git a/app/client/src/navigation/FocusEntity.ts b/app/client/src/navigation/FocusEntity.ts index e85b0ab64662..fcccac7a79a9 100644 --- a/app/client/src/navigation/FocusEntity.ts +++ b/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: "", diff --git a/app/client/src/pages/Editor/IDE/Header/index.tsx b/app/client/src/pages/Editor/IDE/Header/index.tsx index 0c234913f066..4a98c1d4b765 100644 --- a/app/client/src/pages/Editor/IDE/Header/index.tsx +++ b/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 ( - - ); + return ; default: return ; } diff --git a/app/client/src/pages/Editor/IDE/LeftPane/AddLibraryPopover.tsx b/app/client/src/pages/Editor/IDE/LeftPane/AddLibraryPopover.tsx index 041520e3a457..0561bd2591b2 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/AddLibraryPopover.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/AddLibraryPopover.tsx @@ -5,6 +5,7 @@ import { PopoverContent, PopoverHeader, PopoverTrigger, + type ButtonKind, } from "@appsmith/ads"; import React, { useCallback, useState } from "react"; import { createMessage, customJSLibraryMessages } from "ee/constants/messages"; @@ -12,7 +13,11 @@ import { Installer } from "../../Explorer/Libraries/Installer"; import { clearInstalls } from "actions/JSLibraryActions"; import { useDispatch } from "react-redux"; -const AddLibraryPopover = () => { +interface AddLibraryPopoverProps { + variant?: "primary" | "secondary"; +} + +const AddLibraryPopover = ({ variant = "primary" }: AddLibraryPopoverProps) => { const [open, setOpen] = useState(false); const dispatch = useDispatch(); const onOpenChange = useCallback( @@ -20,17 +25,24 @@ const AddLibraryPopover = () => { dispatch(clearInstalls()); setOpen(open); }, - [open], + [dispatch], ); + const openPopover = useCallback(() => { + setOpen(true); + }, [setOpen]); + + const buttonKind: ButtonKind = + variant === "primary" ? "tertiary" : "secondary"; + return (