From d40bda8c91f1bf38a4427f0d0f819c77be196f40 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Thu, 14 Nov 2024 17:16:46 +0530 Subject: [PATCH] chore: Plugin Action Editor routing (#37389) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description - Earlier we had the new Plugin Action Editor implementation mixed in with the older API and Query Editor components. We have now separated it out so that the eventual removal of older editors is easy - Move AppPluginActionEditor outside the EE split ## Automation /ok-to-test tags="@tag.Datasource" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 3a7fda761dcff8e77edfe80a449ba965fe5bfb12 > Cypress dashboard. > Tags: `@tag.Datasource` > Spec: >
Thu, 14 Nov 2024 11:25:19 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **New Features** - Introduced new routes for `PluginActionEditor`, `AddQuery`, and `QueryEmpty` with a standardized fallback UI. - **Bug Fixes** - Removed obsolete feature flag checks that prevented the rendering of the `AppPluginActionEditor`. - **Chores** - Deleted the `AppPluginActionEditor` component and its associated exports, streamlining the codebase. - **Refactor** - Improved the structure and clarity of hooks and component definitions. --- .../Editor/IDE/EditorPane/Query/hooks.tsx | 105 ++++++++++++++---- .../AppPluginActionEditor.tsx | 3 - src/pages/Editor/APIEditor/index.tsx | 9 -- .../components/AppPluginActionToolbar.tsx | 0 .../ConvertToModule/ConvertToModuleCTA.tsx | 0 .../ConvertToModuleCallout.tsx | 0 .../ConvertToModuleDisabler.tsx | 0 .../components/ConvertToModule/index.tsx | 0 .../components/ToolbarMenu/Copy.tsx | 0 .../components/ToolbarMenu/Delete.tsx | 0 .../components/ToolbarMenu/Move.tsx | 0 .../components/ToolbarMenu/PageMenuItem.tsx | 0 .../components/ToolbarMenu/Rename.tsx | 0 .../components/ToolbarMenu/ToolbarMenu.tsx | 0 .../components/ToolbarMenu/index.ts | 0 .../Editor/AppPluginActionEditor/index.ts | 1 - .../Editor/AppPluginActionEditor/index.tsx} | 0 src/pages/Editor/QueryEditor/index.tsx | 9 -- 18 files changed, 85 insertions(+), 42 deletions(-) delete mode 100644 src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/AppPluginActionToolbar.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleCTA.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleCallout.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ConvertToModule/ConvertToModuleDisabler.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ConvertToModule/index.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/Copy.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/Delete.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/Move.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/PageMenuItem.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/Rename.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/ToolbarMenu.tsx (100%) rename src/{ce => }/pages/Editor/AppPluginActionEditor/components/ToolbarMenu/index.ts (100%) delete mode 100644 src/pages/Editor/AppPluginActionEditor/index.ts rename src/{ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx => pages/Editor/AppPluginActionEditor/index.tsx} (100%) diff --git a/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx b/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx index 7eeba362e2e1..9d58eceb7a99 100644 --- a/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx +++ b/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx @@ -51,18 +51,16 @@ export const useQueryAdd = () => { return; } - let url = ""; + const url = getQueryUrl(currentEntityInfo); - url = getQueryUrl(currentEntityInfo); history.push(url); - }, [currentEntityInfo]); + }, [currentEntityInfo, dispatch, ideViewMode]); const closeAddQuery = useCallback(() => { - let url = ""; + const url = getQueryUrl(currentEntityInfo, false); - url = getQueryUrl(currentEntityInfo, false); history.push(url); - }, [currentEntityInfo, ideViewMode]); + }, [currentEntityInfo]); return { openAddQuery, closeAddQuery }; }; @@ -113,6 +111,15 @@ export const useGroupedAddQueryOperations = (): GroupedAddOperations => { return groups; }; +const PluginActionEditor = lazy(async () => + retryPromise( + async () => + import( + /* webpackChunkName: "PluginActionEditor" */ "pages/Editor/AppPluginActionEditor" + ), + ), +); + const ApiEditor = lazy(async () => retryPromise( async () => @@ -145,13 +152,65 @@ const QueryEmpty = lazy(async () => ); export const useQueryEditorRoutes = (path: string): UseRoutes => { - return useMemo( + const isActionRedesignEnabled = useFeatureFlag( + FEATURE_FLAG.release_actions_redesign_enabled, + ); + + const skeleton = useMemo(() => , []); + + const newComponents = useMemo( + () => [ + { + key: "PluginActionEditor", + component: () => { + return ( + + + + ); + }, + path: [ + BUILDER_PATH + API_EDITOR_ID_PATH, + BUILDER_CUSTOM_PATH + API_EDITOR_ID_PATH, + BUILDER_PATH_DEPRECATED + API_EDITOR_ID_PATH, + BUILDER_PATH + SAAS_EDITOR_API_ID_PATH, + BUILDER_CUSTOM_PATH + SAAS_EDITOR_API_ID_PATH, + BUILDER_PATH_DEPRECATED + SAAS_EDITOR_API_ID_PATH, + path + "/:baseQueryId", + ], + exact: true, + }, + { + key: "AddQuery", + exact: true, + component: () => ( + + + + ), + path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`], + }, + { + key: "QueryEmpty", + component: () => ( + + + + ), + exact: true, + path: [path], + }, + ], + [path, skeleton], + ); + + const oldComponents = useMemo( () => [ { key: "ApiEditor", - component: (args) => { + component: (args: object) => { return ( - }> + ); @@ -166,18 +225,18 @@ export const useQueryEditorRoutes = (path: string): UseRoutes => { { key: "AddQuery", exact: true, - component: (args) => ( - }> - + component: () => ( + + ), path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`], }, { key: "SAASEditor", - component: (args) => { + component: (args: object) => { return ( - }> + ); @@ -191,9 +250,9 @@ export const useQueryEditorRoutes = (path: string): UseRoutes => { }, { key: "QueryEditor", - component: (args) => { + component: (args: object) => { return ( - }> + ); @@ -203,17 +262,23 @@ export const useQueryEditorRoutes = (path: string): UseRoutes => { }, { key: "QueryEmpty", - component: (args) => ( - }> - + component: () => ( + + ), exact: true, path: [path], }, ], - [path], + [path, skeleton], ); + + if (isActionRedesignEnabled) { + return newComponents; + } + + return oldComponents; }; export const useAddQueryListItems = () => { diff --git a/src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx b/src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx deleted file mode 100644 index 2d974cc98581..000000000000 --- a/src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { default as CE_AppPluginActionEditor } from "ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor"; - -export default CE_AppPluginActionEditor; diff --git a/src/pages/Editor/APIEditor/index.tsx b/src/pages/Editor/APIEditor/index.tsx index 568fca9c0199..8e97ac8ec2c7 100644 --- a/src/pages/Editor/APIEditor/index.tsx +++ b/src/pages/Editor/APIEditor/index.tsx @@ -38,7 +38,6 @@ import { resolveIcon } from "../utils"; import { ENTITY_ICON_SIZE, EntityIcon } from "../Explorer/ExplorerIcons"; import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorViewMode } from "ee/entities/IDE/constants"; -import { AppPluginActionEditor } from "pages/Editor/AppPluginActionEditor"; type ApiEditorWrapperProps = RouteComponentProps; @@ -164,14 +163,6 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) { return ; }, [action?.name, isConverting, icon]); - const isActionRedesignEnabled = useFeatureFlag( - FEATURE_FLAG.release_actions_redesign_enabled, - ); - - if (isActionRedesignEnabled) { - return ; - } - return ( ; @@ -187,14 +186,6 @@ function QueryEditor(props: QueryEditorProps) { ); }, [action?.name, isConverting, icon]); - const isActionRedesignEnabled = useFeatureFlag( - FEATURE_FLAG.release_actions_redesign_enabled, - ); - - if (isActionRedesignEnabled) { - return ; - } - return (