From 393a060968e6df1159dd62c5c7edffaa0667b4aa Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Fri, 6 Sep 2024 16:40:43 +0530 Subject: [PATCH 1/9] Initial module setup --- app/client/src/PluginActionEditor/PluginActionContext.ts | 3 +++ app/client/src/PluginActionEditor/PluginActionEditor.tsx | 7 +++++++ .../components/PluginActionForm/PluginActionForm.tsx | 7 +++++++ .../components/PluginActionForm/index.ts | 1 + .../components/PluginActionResponsePane.tsx | 7 +++++++ .../PluginActionEditor/components/PluginActionToolbar.tsx | 7 +++++++ app/client/src/PluginActionEditor/index.ts | 5 +++++ 7 files changed, 37 insertions(+) create mode 100644 app/client/src/PluginActionEditor/PluginActionContext.ts create mode 100644 app/client/src/PluginActionEditor/PluginActionEditor.tsx create mode 100644 app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx create mode 100644 app/client/src/PluginActionEditor/components/PluginActionForm/index.ts create mode 100644 app/client/src/PluginActionEditor/components/PluginActionResponsePane.tsx create mode 100644 app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx create mode 100644 app/client/src/PluginActionEditor/index.ts diff --git a/app/client/src/PluginActionEditor/PluginActionContext.ts b/app/client/src/PluginActionEditor/PluginActionContext.ts new file mode 100644 index 000000000000..7d84c108ed60 --- /dev/null +++ b/app/client/src/PluginActionEditor/PluginActionContext.ts @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export default createContext({}); diff --git a/app/client/src/PluginActionEditor/PluginActionEditor.tsx b/app/client/src/PluginActionEditor/PluginActionEditor.tsx new file mode 100644 index 000000000000..d5ad2fb50792 --- /dev/null +++ b/app/client/src/PluginActionEditor/PluginActionEditor.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const PluginActionEditor = () => { + return
; +}; + +export default PluginActionEditor; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx new file mode 100644 index 000000000000..17db33e698a3 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const PluginActionForm = () => { + return
; +}; + +export default PluginActionForm; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/index.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/index.ts new file mode 100644 index 000000000000..bb106d466ee2 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/index.ts @@ -0,0 +1 @@ +export { default } from "./PluginActionForm"; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponsePane.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponsePane.tsx new file mode 100644 index 000000000000..5a0be861970c --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionResponsePane.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const PluginActionResponsePane = () => { + return
; +}; + +export default PluginActionResponsePane; diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx new file mode 100644 index 000000000000..64542de3c66f --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const PluginActionToolbar = () => { + return
; +}; + +export default PluginActionToolbar; diff --git a/app/client/src/PluginActionEditor/index.ts b/app/client/src/PluginActionEditor/index.ts new file mode 100644 index 000000000000..b9c59a699471 --- /dev/null +++ b/app/client/src/PluginActionEditor/index.ts @@ -0,0 +1,5 @@ +export { default as PluginActionEditor } from "./PluginActionEditor"; +export { default as PluginActionContext } from "./PluginActionContext"; +export { default as PluginActionToolbar } from "./components/PluginActionToolbar"; +export { default as PluginActionForm } from "./components/PluginActionForm"; +export { default as PluginActionResponsePane } from "./components/PluginActionResponsePane"; From f1cd0971edb136a246a333b9cd2cf583fa97e69e Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 9 Sep 2024 14:10:01 +0530 Subject: [PATCH 2/9] Figure out usage --- .../PluginActionEditor/PluginActionContext.ts | 3 - .../PluginActionContext.tsx | 62 +++++++++++++++++ .../PluginActionEditor/PluginActionEditor.tsx | 69 ++++++++++++++++++- app/client/src/PluginActionEditor/index.ts | 5 +- .../AppPluginActionEditor.tsx | 19 +++++ .../AppPluginActionEditor.tsx | 3 + .../ModulePluginActionEditor.tsx | 19 +++++ .../ModulePluginActionEditor/index.ts | 1 + .../WorkflowPluginActionEditor.tsx | 19 +++++ .../WorkflowPluginActionEditor/index.ts | 1 + .../src/pages/Editor/APIEditor/index.tsx | 9 +++ .../Editor/AppPluginActionEditor/index.ts | 1 + .../src/pages/Editor/QueryEditor/index.tsx | 9 +++ 13 files changed, 214 insertions(+), 6 deletions(-) delete mode 100644 app/client/src/PluginActionEditor/PluginActionContext.ts create mode 100644 app/client/src/PluginActionEditor/PluginActionContext.tsx create mode 100644 app/client/src/ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx create mode 100644 app/client/src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx create mode 100644 app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx create mode 100644 app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts create mode 100644 app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx create mode 100644 app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts create mode 100644 app/client/src/pages/Editor/AppPluginActionEditor/index.ts diff --git a/app/client/src/PluginActionEditor/PluginActionContext.ts b/app/client/src/PluginActionEditor/PluginActionContext.ts deleted file mode 100644 index 7d84c108ed60..000000000000 --- a/app/client/src/PluginActionEditor/PluginActionContext.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createContext } from "react"; - -export default createContext({}); diff --git a/app/client/src/PluginActionEditor/PluginActionContext.tsx b/app/client/src/PluginActionEditor/PluginActionContext.tsx new file mode 100644 index 000000000000..25b8515a24db --- /dev/null +++ b/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(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 ( + + {children} + + ); +}; + +// 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; +}; diff --git a/app/client/src/PluginActionEditor/PluginActionEditor.tsx b/app/client/src/PluginActionEditor/PluginActionEditor.tsx index d5ad2fb50792..15d004cd9123 100644 --- a/app/client/src/PluginActionEditor/PluginActionEditor.tsx +++ b/app/client/src/PluginActionEditor/PluginActionEditor.tsx @@ -1,7 +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"; -const PluginActionEditor = () => { - return
; +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 ( + + + + ); + } + + if (!action || !plugin) { + // Handle not found + return ; + } + if (!settingsConfig || !editorConfig) { + throw Error("Plugin config for action not found"); + } + + return ( + + {props.children} + + ); }; export default PluginActionEditor; diff --git a/app/client/src/PluginActionEditor/index.ts b/app/client/src/PluginActionEditor/index.ts index b9c59a699471..0a58d00bdaae 100644 --- a/app/client/src/PluginActionEditor/index.ts +++ b/app/client/src/PluginActionEditor/index.ts @@ -1,5 +1,8 @@ export { default as PluginActionEditor } from "./PluginActionEditor"; -export { default as PluginActionContext } from "./PluginActionContext"; +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"; diff --git a/app/client/src/ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx b/app/client/src/ce/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx new file mode 100644 index 000000000000..6ed514390c08 --- /dev/null +++ b/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 ( + + + + + + ); +}; + +export default AppPluginActionEditor; diff --git a/app/client/src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx b/app/client/src/ee/pages/Editor/AppPluginActionEditor/AppPluginActionEditor.tsx new file mode 100644 index 000000000000..2d974cc98581 --- /dev/null +++ b/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; diff --git a/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx b/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx new file mode 100644 index 000000000000..0a38c1d91754 --- /dev/null +++ b/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { + PluginActionEditor, + PluginActionToolbar, + PluginActionForm, + PluginActionResponsePane, +} from "PluginActionEditor"; + +const ModulePluginActionEditor = () => { + return ( + + + + + + ); +}; + +export default ModulePluginActionEditor; diff --git a/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts b/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts new file mode 100644 index 000000000000..064ba0bff9fb --- /dev/null +++ b/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts @@ -0,0 +1 @@ +export { default as ModulePluginActionEditor } from "./ModulePluginActionEditor"; diff --git a/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx b/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx new file mode 100644 index 000000000000..2820bb0c288a --- /dev/null +++ b/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { + PluginActionEditor, + PluginActionToolbar, + PluginActionForm, + PluginActionResponsePane, +} from "PluginActionEditor"; + +const WorkflowPluginActionEditor = () => { + return ( + + + + + + ); +}; + +export default WorkflowPluginActionEditor; diff --git a/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts b/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts new file mode 100644 index 000000000000..3cf8ea694163 --- /dev/null +++ b/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts @@ -0,0 +1 @@ +export { default as WorkflowPluginActionEditor } from "./WorkflowPluginActionEditor"; diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx index d7affd3e552f..5241a672b2bf 100644 --- a/app/client/src/pages/Editor/APIEditor/index.tsx +++ b/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; @@ -177,6 +178,14 @@ function ApiEditorWrapper(props: ApiEditorWrapperProps) { return ; }, [action?.name, isConverting]); + const isActionRedesignEnabled = useFeatureFlag( + FEATURE_FLAG.release_actions_redesign_enabled, + ); + + if (isActionRedesignEnabled) { + return ; + } + return ( ; @@ -188,6 +189,14 @@ function QueryEditor(props: QueryEditorProps) { ); }, [action?.name, isConverting]); + const isActionRedesignEnabled = useFeatureFlag( + FEATURE_FLAG.release_actions_redesign_enabled, + ); + + if (isActionRedesignEnabled) { + return ; + } + return ( Date: Mon, 9 Sep 2024 14:39:49 +0530 Subject: [PATCH 3/9] Remove ee files --- .../ModulePluginActionEditor.tsx | 19 ------------------- .../ModulePluginActionEditor/index.ts | 1 - .../WorkflowPluginActionEditor.tsx | 19 ------------------- .../WorkflowPluginActionEditor/index.ts | 1 - 4 files changed, 40 deletions(-) delete mode 100644 app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx delete mode 100644 app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts delete mode 100644 app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx delete mode 100644 app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts diff --git a/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx b/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx deleted file mode 100644 index 0a38c1d91754..000000000000 --- a/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/ModulePluginActionEditor.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { - PluginActionEditor, - PluginActionToolbar, - PluginActionForm, - PluginActionResponsePane, -} from "PluginActionEditor"; - -const ModulePluginActionEditor = () => { - return ( - - - - - - ); -}; - -export default ModulePluginActionEditor; diff --git a/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts b/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts deleted file mode 100644 index 064ba0bff9fb..000000000000 --- a/app/client/src/ee/pages/Editor/ModuleEditor/ModulePluginActionEditor/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ModulePluginActionEditor } from "./ModulePluginActionEditor"; diff --git a/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx b/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx deleted file mode 100644 index 2820bb0c288a..000000000000 --- a/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/WorkflowPluginActionEditor.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { - PluginActionEditor, - PluginActionToolbar, - PluginActionForm, - PluginActionResponsePane, -} from "PluginActionEditor"; - -const WorkflowPluginActionEditor = () => { - return ( - - - - - - ); -}; - -export default WorkflowPluginActionEditor; diff --git a/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts b/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts deleted file mode 100644 index 3cf8ea694163..000000000000 --- a/app/client/src/ee/pages/Editor/WorkflowEditor/WorkflowPluginActionEditor/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WorkflowPluginActionEditor } from "./WorkflowPluginActionEditor"; From 783744f7f968e25f2541450ff2fed758a5377f5e Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 9 Sep 2024 16:53:55 +0530 Subject: [PATCH 4/9] move the toolbar --- app/client/src/IDE/Components/Toolbar.tsx | 46 +++++++++++++++++++ .../components/PluginActionToolbar.tsx | 3 +- 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 app/client/src/IDE/Components/Toolbar.tsx diff --git a/app/client/src/IDE/Components/Toolbar.tsx b/app/client/src/IDE/Components/Toolbar.tsx new file mode 100644 index 000000000000..749c5dfb77c8 --- /dev/null +++ b/app/client/src/IDE/Components/Toolbar.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { Button, Flex, Tooltip } from "@appsmith/ads"; + +interface ToolbarProps { + children?: React.ReactNode[]; + runOptionSelector?: React.ReactNode; +} + +const Toolbar = (props: ToolbarProps) => { + return ( + + + {props.children} + + + {props.runOptionSelector} + + + + diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionDrawer.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/ActionDrawer.tsx deleted file mode 100644 index af612152be81..000000000000 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionDrawer.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useEffect, useRef, useState } from "react"; -import styled from "styled-components"; -import { ResizerCSS } from "components/editorComponents/Debugger/Resizer"; -import Resizable from "components/editorComponents/Debugger/Resizer"; -import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; -import type { BottomTab } from "components/editorComponents/EntityBottomTabs"; -import EntityBottomTabs from "components/editorComponents/EntityBottomTabs"; - -const Container = styled.div` - ${ResizerCSS}; - height: ${ActionExecutionResizerHeight}px; - // Minimum height of bottom tabs as it can be resized - min-height: 36px; - width: 100%; - background-color: var(--ads-v2-color-bg); - border-top: 1px solid var(--ads-v2-color-border); - z-index: 6; -`; - -interface Props { - onResizeComplete: (height: number) => void; - isRunning: boolean; - tabs: BottomTab[]; - height?: number; -} - -const ActionDrawer = (props: Props) => { - const panelRef = useRef(null); - const [selectedTab, setSelectedTab] = useState(""); - useEffect(() => { - if (props.tabs.length) { - setSelectedTab(props.tabs[0].key); - } - }, []); - - return ( - - - - - ); -}; - -export default ActionDrawer; diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionEditor.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/ActionEditor.tsx deleted file mode 100644 index e8335837bbae..000000000000 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionEditor.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Flex } from "@appsmith/ads"; -import React, { useCallback, useState } from "react"; -import ActionToolbar from "./ActionToolbar"; -import ActionDrawer from "./ActionDrawer"; -import { useDispatch } from "react-redux"; -import type { BottomTab } from "components/editorComponents/EntityBottomTabs"; - -interface Props { - children: React.ReactNode; - onRunClick: () => void; - onDocsClick?: () => void; - isRunning: boolean; - tabs: BottomTab[]; - runOptionsSelector?: React.ReactNode; - settingsRender: React.ReactNode; - height?: number; - onSetHeight?: (height: number) => void; -} - -const ActionEditor = (props: Props) => { - const dispatch = useDispatch(); - const setDrawerHeight = useCallback((height: number) => { - if (props.onSetHeight) { - dispatch(props.onSetHeight(height)); - } - }, []); - const [settingsOpen, setSettingsOpen] = useState(false); - - return ( - - - - {settingsOpen ? props.settingsRender : props.children} - - setSettingsOpen(!settingsOpen)} - runOptionSelector={props.runOptionsSelector} - /> - - - - ); -}; - -export default ActionEditor; diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionToolbar.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/ActionToolbar.tsx deleted file mode 100644 index 3d2be46ca6b7..000000000000 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/ActionToolbar.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Button, Flex, Tooltip } from "@appsmith/ads"; -import React from "react"; -import styled from "styled-components"; -import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; -import { createMessage, DOCUMENTATION_TOOLTIP } from "ee/constants/messages"; - -const MutedText = styled.span` - opacity: 70%; -`; - -interface Props { - onSettingsClick: () => void; - onRunClick: () => void; - runOptionSelector?: React.ReactNode; - onDocsClick?: () => void; -} - -const ActionToolbar = (props: Props) => { - const isActionRedesignEnabled = useFeatureFlag( - FEATURE_FLAG.release_actions_redesign_enabled, - ); - if (!isActionRedesignEnabled) return null; - return ( - - - - - - ); -}; - -export default ActionToolbar; diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx index a3c97d624f12..0721f3ae2950 100644 --- 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: ( - - ), - }); - } - return ( - - } - settingsRender={ - - - - } - tabs={responseTabs} - > - - - ); - } - return ( <> {closeEditorLink} From f32b633a74ac86cd4698b270e17333ddae24dcd8 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 10 Sep 2024 11:10:05 +0530 Subject: [PATCH 6/9] improve separation --- app/client/src/IDE/Components/Toolbar.tsx | 59 ++++++++++--------- .../components/PluginActionToolbar.tsx | 36 ++++++++++- 2 files changed, 64 insertions(+), 31 deletions(-) diff --git a/app/client/src/IDE/Components/Toolbar.tsx b/app/client/src/IDE/Components/Toolbar.tsx index dd85a024b953..6f0c15bb44b6 100644 --- a/app/client/src/IDE/Components/Toolbar.tsx +++ b/app/client/src/IDE/Components/Toolbar.tsx @@ -1,9 +1,8 @@ import React from "react"; -import { Button, Flex, Tooltip } from "@appsmith/ads"; +import { Flex } from "@appsmith/ads"; interface ToolbarProps { - children?: React.ReactNode[]; - runOptionSelector?: React.ReactNode; + children?: React.ReactNode[] | React.ReactNode; } const Toolbar = (props: ToolbarProps) => { @@ -12,35 +11,39 @@ const Toolbar = (props: ToolbarProps) => { alignItems="center" borderBottom="1px solid var(--ads-v2-color-border-muted);" flexDirection="row" - height="33px" + height="32px" justifyContent="space-between" padding="spaces-2" > - - {props.children} - - - {props.runOptionSelector} - - - - + +