chore: Move Toolbar to IDE (#36214)

## Description Update the old Toolbar and redesign implementation to follow the new modular approach. It creates a toolbar at the IDE level and uses that in the PluginActionToolbar. It allows extension for other components. Unblocks #35528 ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No  ## Summary by CodeRabbit - **New Features** - Introduced a customizable toolbar for plugin actions, enhancing user interface interaction. - Added a new plugin action editor interface to manage plugin actions dynamically. - Implemented a context provider for managing plugin actions throughout the application. - Added a feature flag for conditional rendering of the new plugin action editor interface. - **Bug Fixes** - Removed obsolete action redesign features, streamlining the user experience. - **Documentation** - Added index files for better modularity and reusability of components related to plugin actions. - Minor formatting updates for improved code clarity in the Plugin Action Editor.
appsmithorg · Sep 12, 2024 · f930ea1 · f930ea1
1 parent 0056fa5
commit f930ea1
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 249 deletions.
diff --git a/app/client/src/IDE/Structure/Toolbar.tsx b/app/client/src/IDE/Structure/Toolbar.tsx
@@ -0,0 +1,52 @@
+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 Left = (props: ToolbarProps) => {
+  return (
+    <Flex
+      alignItems="center"
+      flexDirection="row"
+      gap="spaces-2"
+      justifySelf="flex-start"
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+const Right = (props: ToolbarProps) => {
+  return (
+    <Flex
+      alignItems="center"
+      flexDirection="row"
+      gap="spaces-2"
+      justifySelf="flex-end"
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+Toolbar.Left = Left;
+Toolbar.Right = Right;
+
+export default Toolbar;
diff --git a/app/client/src/IDE/index.ts b/app/client/src/IDE/index.ts
@@ -12,6 +12,14 @@
 export { IDE_HEADER_HEIGHT } from "./Structure/constants";
 export { default as IDEHeader } from "./Structure/Header";
 
+/**
+ * The IDEToolbar gets exported with 2 layout subsections.
+ * IDEToolbar.Left and IDEToolbar.Right
+ * These are composable components that you can use to spread the content of the toolbar
+ * It is possible to use the Toolbar without using these subsections
+ */
+export { default as IDEToolbar } from "./Structure/Toolbar";
+
 /* ====================================================
     **** UI Components ****
     Components that are smaller UI abstractions for easy use and standardisation within the IDE

diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx
@@ -1,7 +1,43 @@
 import React from "react";
+import { IDEToolbar } from "IDE";
+import { Button, Tooltip } from "@appsmith/ads";
+import { modText } from "../../utils/helpers";
 
-const PluginActionToolbar = () => {
-  return <div />;
+interface PluginActionToolbarProps {
+  runOptions?: React.ReactNode;
+  children?: React.ReactNode[] | React.ReactNode;
+}
+
+const PluginActionToolbar = (props: PluginActionToolbarProps) => {
+  return (
+    <IDEToolbar>
+      <IDEToolbar.Left>{props.children}</IDEToolbar.Left>
+      <IDEToolbar.Right>
+        {props.runOptions}
+        <Tooltip
+          content={modText() + " ⏎"}
+          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"
+        />
+      </IDEToolbar.Right>
+    </IDEToolbar>
+  );
 };
 
 export default PluginActionToolbar;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionDrawer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/ActionDrawer.tsx
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionEditor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/ActionEditor.tsx
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionToolbar.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/ActionToolbar.tsx
diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
@@ -11,7 +11,6 @@ import styled from "styled-components";
 import FormRow from "components/editorComponents/FormRow";
 import {
   createMessage,
-  DEBUGGER_RESPONSE,
   DOCUMENTATION,
   DOCUMENTATION_TOOLTIP,
 } from "ee/constants/messages";
@@ -29,17 +28,12 @@ import { setQueryPaneConfigSelectedTabIndex } from "actions/queryPaneActions";
 import type { SourceEntity } from "entities/AppsmithConsole";
 import { ENTITY_TYPE as SOURCE_ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
 import { DocsLink, openDoc } from "../../../constants/DocumentationLinks";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { QueryEditorContext } from "./QueryEditorContext";
 import QueryDebuggerTabs from "./QueryDebuggerTabs";
 import useShowSchema from "components/editorComponents/ActionRightPane/useShowSchema";
 import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers";
 import FormRender from "./FormRender";
 import QueryEditorHeader from "./QueryEditorHeader";
-import ActionEditor from "../IDE/EditorPane/components/ActionEditor";
-import QueryResponseTab from "./QueryResponseTab";
-import DatasourceSelector from "./DatasourceSelector";
 import RunHistory from "ee/components/RunHistory";
 
 const QueryFormContainer = styled.form`
@@ -227,10 +221,6 @@ export function EditorJSONtoForm(props: Props) {
     useShowSchema(currentActionConfig?.pluginId || "") &&
     pluginRequireDatasource;
 
-  const isActionRedesignEnabled = useFeatureFlag(
-    FEATURE_FLAG.release_actions_redesign_enabled,
-  );
-
   const dispatch = useDispatch();
 
   const handleDocumentationClick = () => {
@@ -256,59 +246,6 @@ export function EditorJSONtoForm(props: Props) {
     return null;
   }
 
-  if (isActionRedesignEnabled && plugin) {
-    const responseTabs = [];
-    if (currentActionConfig) {
-      responseTabs.push({
-        key: "response",
-        title: createMessage(DEBUGGER_RESPONSE),
-        panelComponent: (
-          <QueryResponseTab
-            actionName={actionName}
-            actionSource={actionSource}
-            currentActionConfig={currentActionConfig}
-            isRunning={isRunning}
-            onRunClick={onRunClick}
-            runErrorMessage={runErrorMessage}
-          />
-        ),
-      });
-    }
-    return (
-      <ActionEditor
-        isRunning={isRunning}
-        onDocsClick={handleDocumentationClick}
-        onRunClick={onRunClick}
-        runOptionsSelector={
-          <DatasourceSelector
-            currentActionConfig={currentActionConfig}
-            dataSources={dataSources}
-            formName={formName}
-            onCreateDatasourceClick={onCreateDatasourceClick}
-            plugin={plugin}
-          />
-        }
-        settingsRender={
-          <SettingsWrapper>
-            <ActionSettings
-              actionSettingsConfig={settingConfig}
-              formName={formName}
-            />
-          </SettingsWrapper>
-        }
-        tabs={responseTabs}
-      >
-        <FormRender
-          editorConfig={editorConfig}
-          formData={props.formData}
-          formEvaluationState={props.formEvaluationState}
-          formName={formName}
-          uiComponent={uiComponent}
-        />
-      </ActionEditor>
-    );
-  }
-
   return (
     <>
       {closeEditorLink}