chore: Move Toolbar to IDE

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { Flex } from "@appsmith/ads";
+
+interface ToolbarProps {
+  children?: React.ReactNode[] | React.ReactNode;
+}
+
+const Toolbar = (props: ToolbarProps) => {
+  return (
+    <Flex
+      alignItems="center"
+      borderBottom="1px solid var(--ads-v2-color-border-muted);"
+      flexDirection="row"
+      height="32px"
+      justifyContent="space-between"
+      padding="spaces-2"
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+const ToolbarLeft = (props: ToolbarProps) => {
+  return (
+    <Flex
+      alignItems="center"
+      flexDirection="row"
+      gap="spaces-2"
+      justifySelf="flex-start"
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+const ToolbarRight = (props: ToolbarProps) => {
+  return (
+    <Flex
+      alignItems="center"
+      flexDirection="row"
+      gap="spaces-2"
+      justifySelf="flex-end"
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+export { Toolbar, ToolbarLeft, ToolbarRight };

app/client/src/PluginActionEditor/PluginActionContext.tsx

@@ -0,0 +1,62 @@
+import React, {
+  type ReactNode,
+  createContext,
+  useContext,
+  useMemo,
+} from "react";
+import type { Action } from "entities/Action";
+import type { Plugin } from "api/PluginApi";
+import type { Datasource } from "entities/Datasource";
+
+interface PluginActionContext {
+  action: Action;
+  editorConfig: unknown[];
+  settingsConfig: unknown[];
+  plugin: Plugin;
+  datasource?: Datasource;
+}
+
+// No need to export this context to use it. Use the hook defined below instead
+const PluginActionContext = createContext<PluginActionContext | null>(null);
+
+interface ChildrenProps {
+  children: ReactNode[];
+}
+
+export const PluginActionContextProvider = (
+  props: ChildrenProps & PluginActionContext,
+) => {
+  const { action, children, datasource, editorConfig, plugin, settingsConfig } =
+    props;
+
+  // using useMemo to avoid unnecessary renders
+  const contextValue = useMemo(
+    () => ({
+      action,
+      datasource,
+      editorConfig,
+      plugin,
+      settingsConfig,
+    }),
+    [action, datasource, editorConfig, plugin, settingsConfig],
+  );
+
+  return (
+    <PluginActionContext.Provider value={contextValue}>
+      {children}
+    </PluginActionContext.Provider>
+  );
+};
+
+// By using this hook, you are guaranteed that the states are correctly
+// typed and set.
+// Without this, consumers of the context would need to keep doing a null check
+export const usePluginActionContext = () => {
+  const context = useContext(PluginActionContext);
+  if (!context) {
+    throw new Error(
+      "usePluginActionContext must be used within usePluginActionContextProvider",
+    );
+  }
+  return context;
+};

app/client/src/PluginActionEditor/PluginActionEditor.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { useLocation } from "react-router";
+import { identifyEntityFromPath } from "../navigation/FocusEntity";
+import { useSelector } from "react-redux";
+import {
+  getActionByBaseId,
+  getDatasource,
+  getEditorConfig,
+  getPlugin,
+  getPluginSettingConfigs,
+} from "ee/selectors/entitiesSelector";
+import { PluginActionContextProvider } from "./PluginActionContext";
+import { get } from "lodash";
+import EntityNotFoundPane from "pages/Editor/EntityNotFoundPane";
+import { getIsEditorInitialized } from "selectors/editorSelectors";
+import Spinner from "components/editorComponents/Spinner";
+import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
+
+interface ChildrenProps {
+  children: React.ReactNode[];
+}
+
+const PluginActionEditor = (props: ChildrenProps) => {
+  const { pathname } = useLocation();
+
+  const isEditorInitialized = useSelector(getIsEditorInitialized);
+
+  const entity = identifyEntityFromPath(pathname);
+  const action = useSelector((state) => getActionByBaseId(state, entity.id));
+
+  const pluginId = get(action, "pluginId", "");
+  const plugin = useSelector((state) => getPlugin(state, pluginId));
+
+  const datasourceId = get(action, "datasource.id", "");
+  const datasource = useSelector((state) => getDatasource(state, datasourceId));
+
+  const settingsConfig = useSelector((state) =>
+    getPluginSettingConfigs(state, pluginId),
+  );
+
+  const editorConfig = useSelector((state) => getEditorConfig(state, pluginId));
+
+  if (!isEditorInitialized) {
+    return (
+      <CenteredWrapper>
+        <Spinner size={30} />
+      </CenteredWrapper>
+    );
+  }
+
+  if (!action || !plugin) {
+    // Handle not found
+    return <EntityNotFoundPane />;
+  }
+  if (!settingsConfig || !editorConfig) {
+    throw Error("Plugin config for action not found");
+  }
+
+  return (
+    <PluginActionContextProvider
+      action={action}
+      datasource={datasource}
+      editorConfig={editorConfig}
+      plugin={plugin}
+      settingsConfig={settingsConfig}
+    >
+      {props.children}
+    </PluginActionContextProvider>
+  );
+};
+
+export default PluginActionEditor;

app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const PluginActionForm = () => {
+  return <div />;
+};
+
+export default PluginActionForm;

app/client/src/PluginActionEditor/components/PluginActionForm/index.ts

@@ -0,0 +1 @@
+export { default } from "./PluginActionForm";

app/client/src/PluginActionEditor/components/PluginActionResponsePane.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const PluginActionResponsePane = () => {
+  return <div />;
+};
+
+export default PluginActionResponsePane;

app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Toolbar, ToolbarLeft, ToolbarRight } from "IDE/Components/Toolbar";
+import { Button, Tooltip } from "@appsmith/ads";
+
+interface PluginActionToolbarProps {
+  runOptions?: React.ReactNode;
+  children?: React.ReactNode[] | React.ReactNode;
+}
+
+const PluginActionToolbar = (props: PluginActionToolbarProps) => {
+  return (
+    <Toolbar>
+      <ToolbarLeft>{props.children}</ToolbarLeft>
+      <ToolbarRight>
+        {props.runOptions}
+        <Tooltip content={"⌘ + ⏎"} placement="topRight" showArrow={false}>
+          <Button kind="primary" size="sm">
+            Run
+          </Button>
+        </Tooltip>
+        <Button
+          isIconButton
+          kind="secondary"
+          size="sm"
+          startIcon="settings-2-line"
+        />
+        <Button
+          isIconButton
+          kind="tertiary"
+          size="sm"
+          startIcon="more-2-fill"
+        />
+      </ToolbarRight>
+    </Toolbar>
+  );
+};
+
+export default PluginActionToolbar;

app/client/src/PluginActionEditor/index.ts

@@ -0,0 +1,8 @@
+export { default as PluginActionEditor } from "./PluginActionEditor";
+export {
+  PluginActionContextProvider,
+  usePluginActionContext,
+} from "./PluginActionContext";
+export { default as PluginActionToolbar } from "./components/PluginActionToolbar";
+export { default as PluginActionForm } from "./components/PluginActionForm";
+export { default as PluginActionResponsePane } from "./components/PluginActionResponsePane";

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

@@ -0,0 +1,19 @@
+import React from "react";
+import {
+  PluginActionEditor,
+  PluginActionToolbar,
+  PluginActionForm,
+  PluginActionResponsePane,
+} from "PluginActionEditor";
+
+const AppPluginActionEditor = () => {
+  return (
+    <PluginActionEditor>
+      <PluginActionToolbar />
+      <PluginActionForm />
+      <PluginActionResponsePane />
+    </PluginActionEditor>
+  );
+};
+
+export default AppPluginActionEditor;

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

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

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

@@ -38,6 +38,7 @@ 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>;
 
@@ -177,6 +178,14 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) {
     return <ConvertEntityNotification icon={icon} name={action?.name || ""} />;
   }, [action?.name, isConverting]);
 
+  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

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