chore: Plugin Action Editor routing (#37389)

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

### 🔍 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/11835509083>
> Commit: 3a7fda761dcff8e77edfe80a449ba965fe5bfb12
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11835509083&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Datasource`
> Spec:
> <hr>Thu, 14 Nov 2024 11:25:19 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

- **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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/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(() => <Skeleton />, []);
+
+  const newComponents = useMemo(
+    () => [
+      {
+        key: "PluginActionEditor",
+        component: () => {
+          return (
+            <Suspense fallback={skeleton}>
+              <PluginActionEditor />
+            </Suspense>
+          );
+        },
+        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: () => (
+          <Suspense fallback={skeleton}>
+            <AddQuery />
+          </Suspense>
+        ),
+        path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`],
+      },
+      {
+        key: "QueryEmpty",
+        component: () => (
+          <Suspense fallback={skeleton}>
+            <QueryEmpty />
+          </Suspense>
+        ),
+        exact: true,
+        path: [path],
+      },
+    ],
+    [path, skeleton],
+  );
+
+  const oldComponents = useMemo(
     () => [
       {
         key: "ApiEditor",
-        component: (args) => {
+        component: (args: object) => {
           return (
-            <Suspense fallback={<Skeleton />}>
+            <Suspense fallback={skeleton}>
               <ApiEditor {...args} />
             </Suspense>
           );
@@ -166,18 +225,18 @@ export const useQueryEditorRoutes = (path: string): UseRoutes => {
       {
         key: "AddQuery",
         exact: true,
-        component: (args) => (
-          <Suspense fallback={<Skeleton />}>
-            <AddQuery {...args} />
+        component: () => (
+          <Suspense fallback={skeleton}>
+            <AddQuery />
           </Suspense>
         ),
         path: [`${path}${ADD_PATH}`, `${path}/:baseQueryId${ADD_PATH}`],
       },
       {
         key: "SAASEditor",
-        component: (args) => {
+        component: (args: object) => {
           return (
-            <Suspense fallback={<Skeleton />}>
+            <Suspense fallback={skeleton}>
               <QueryEditor {...args} />
             </Suspense>
           );
@@ -191,9 +250,9 @@ export const useQueryEditorRoutes = (path: string): UseRoutes => {
       },
       {
         key: "QueryEditor",
-        component: (args) => {
+        component: (args: object) => {
           return (
-            <Suspense fallback={<Skeleton />}>
+            <Suspense fallback={skeleton}>
               <QueryEditor {...args} />
             </Suspense>
           );
@@ -203,17 +262,23 @@ export const useQueryEditorRoutes = (path: string): UseRoutes => {
       },
       {
         key: "QueryEmpty",
-        component: (args) => (
-          <Suspense fallback={<Skeleton />}>
-            <QueryEmpty {...args} />
+        component: () => (
+          <Suspense fallback={skeleton}>
+            <QueryEmpty />
           </Suspense>
         ),
         exact: true,
         path: [path],
       },
     ],
-    [path],
+    [path, skeleton],
   );
+
+  if (isActionRedesignEnabled) {
+    return newComponents;
+  }
+
+  return oldComponents;
 };
 
 export const useAddQueryListItems = () => {

app/client/src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx

@@ -1,3 +0,0 @@
-import { default as CE_AppPluginActionEditor } from "ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor";
-
-export default CE_AppPluginActionEditor;

app/client/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<APIEditorRouteParams>;
 
@@ -164,14 +163,6 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) {
     return <ConvertEntityNotification icon={icon} name={action?.name || ""} />;
   }, [action?.name, isConverting, icon]);
 
-  const isActionRedesignEnabled = useFeatureFlag(
-    FEATURE_FLAG.release_actions_redesign_enabled,
-  );
-
-  if (isActionRedesignEnabled) {
-    return <AppPluginActionEditor />;
-  }
-
   return (
     <ApiEditorContextProvider
       actionRightPaneBackLink={actionRightPaneBackLink}

app/client/src/pages/Editor/AppPluginActionEditor/index.ts

@@ -1 +0,0 @@
-export { default as AppPluginActionEditor } from "ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor";

app/client/src/pages/Editor/QueryEditor/index.tsx

@@ -41,7 +41,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 "../AppPluginActionEditor";
 import { saveActionName } from "actions/pluginActionActions";
 
 type QueryEditorProps = RouteComponentProps<QueryEditorRouteParams>;
@@ -187,14 +186,6 @@ function QueryEditor(props: QueryEditorProps) {
     );
   }, [action?.name, isConverting, icon]);
 
-  const isActionRedesignEnabled = useFeatureFlag(
-    FEATURE_FLAG.release_actions_redesign_enabled,
-  );
-
-  if (isActionRedesignEnabled) {
-    return <AppPluginActionEditor />;
-  }
-
   return (
     <QueryEditorContextProvider
       actionRightPaneBackLink={actionRightPaneBackLink}