diff --git a/app/client/packages/design-system/ads/src/Popover/Popover.styles.tsx b/app/client/packages/design-system/ads/src/Popover/Popover.styles.tsx index 50cb5421ae81..a5a23e329458 100644 --- a/app/client/packages/design-system/ads/src/Popover/Popover.styles.tsx +++ b/app/client/packages/design-system/ads/src/Popover/Popover.styles.tsx @@ -65,5 +65,5 @@ export const StyledBody = styled.div` max-height: calc( var(--popover-max-height) - calc(var(--popover-padding) * 2 + 25.5px) ); - overflow-y: scroll; + overflow-y: auto; `; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx index d7ac7a21385a..4a85da9d0ee4 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx @@ -19,10 +19,10 @@ const PluginActionForm = () => { {plugin.uiComponent === UIComponentTypes.GraphQLEditorForm && ( )} - {plugin.uiComponent === UIComponentTypes.DbEditorForm || - (plugin.uiComponent === UIComponentTypes.UQIDbEditorForm && ( - - ))} + {(plugin.uiComponent === UIComponentTypes.DbEditorForm || + plugin.uiComponent === UIComponentTypes.UQIDbEditorForm) && ( + + )} ); }; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css index 8268c1cd02a3..b63260f2d7d1 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css @@ -12,6 +12,10 @@ grid-template-columns: 1fr; } + & > div:empty { + display: none; + } + /* This section can be removed once the condition abouve each is resolved */ diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/APIEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/APIEditorForm.tsx index 1546fcef01a0..f76893dc6f9c 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/APIEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/APIEditorForm.tsx @@ -15,8 +15,6 @@ import { useAnalyticsOnRunClick, } from "PluginActionEditor/hooks"; -const FORM_NAME = API_EDITOR_FORM_NAME; - const APIEditorForm = () => { const { action } = usePluginActionContext(); const { handleRunClick } = useHandleRunClick(); @@ -43,7 +41,7 @@ const APIEditorForm = () => { theme={EditorTheme.LIGHT} /> } - formName={FORM_NAME} + formName={API_EDITOR_FORM_NAME} httpMethodOptions={HTTP_METHOD_OPTIONS} isChangePermitted={isChangePermitted} paginationUiComponent={ @@ -58,6 +56,7 @@ const APIEditorForm = () => { ); }; -export default reduxForm({ form: FORM_NAME, enableReinitialize: true })( - APIEditorForm, -); +export default reduxForm({ + form: API_EDITOR_FORM_NAME, + enableReinitialize: true, +})(APIEditorForm); diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx index 677bf16e032e..35323cbece55 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx @@ -12,8 +12,6 @@ import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissi import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import useGetFormActionValues from "../CommonEditorForm/hooks/useGetFormActionValues"; -const FORM_NAME = API_EDITOR_FORM_NAME; - function GraphQLEditorForm() { const { action } = usePluginActionContext(); const theme = EditorTheme.LIGHT; @@ -30,13 +28,13 @@ function GraphQLEditorForm() { } - formName={FORM_NAME} + formName={API_EDITOR_FORM_NAME} httpMethodOptions={GRAPHQL_HTTP_METHOD_OPTIONS} isChangePermitted={isChangePermitted} paginationUiComponent={ { } = props; const dispatch = useDispatch(); + const isActionRedesignEnabled = useFeatureFlag( + FEATURE_FLAG.release_actions_redesign_enabled, + ); + const actionResponse = useSelector((state) => getActionData(state, currentActionConfig.id), ); @@ -211,8 +218,12 @@ const QueryResponseTab = (props: Props) => { } const navigateToSettings = useCallback(() => { - dispatch(setPluginActionEditorSelectedTab(EDITOR_TABS.SETTINGS)); - }, [dispatch]); + if (isActionRedesignEnabled) { + dispatch(openPluginActionSettings(true)); + } else { + dispatch(setPluginActionEditorSelectedTab(EDITOR_TABS.SETTINGS)); + } + }, [dispatch, isActionRedesignEnabled]); const preparedStatementCalloutLinks: CalloutLinkProps[] = [ { diff --git a/app/client/src/PluginActionEditor/components/PluginActionSettings/ApiSettings.tsx b/app/client/src/PluginActionEditor/components/PluginActionSettings/ApiSettings.tsx new file mode 100644 index 000000000000..37ef02e21153 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionSettings/ApiSettings.tsx @@ -0,0 +1,10 @@ +import { API_EDITOR_FORM_NAME } from "ee/constants/forms"; +import { reduxForm } from "redux-form"; +import PluginActionSettingsPopover, { + type SettingsProps, +} from "./SettingsPopover"; + +export default reduxForm({ + form: API_EDITOR_FORM_NAME, + enableReinitialize: true, +})(PluginActionSettingsPopover); diff --git a/app/client/src/PluginActionEditor/components/PluginActionSettings/QuerySettings.tsx b/app/client/src/PluginActionEditor/components/PluginActionSettings/QuerySettings.tsx new file mode 100644 index 000000000000..9f8984afb7df --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionSettings/QuerySettings.tsx @@ -0,0 +1,10 @@ +import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms"; +import { reduxForm } from "redux-form"; +import PluginActionSettingsPopover, { + type SettingsProps, +} from "./SettingsPopover"; + +export default reduxForm({ + form: QUERY_EDITOR_FORM_NAME, + enableReinitialize: true, +})(PluginActionSettingsPopover); diff --git a/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx b/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx new file mode 100644 index 000000000000..ef4045f01913 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx @@ -0,0 +1,142 @@ +import React, { useCallback, useEffect, useState } from "react"; +import { + Link, + Popover, + PopoverBody, + PopoverContent, + PopoverHeader, + PopoverTrigger, + ToggleButton, +} from "@appsmith/ads"; +import ActionSettings from "pages/Editor/ActionSettings"; +import { usePluginActionContext } from "../../PluginActionContext"; +import styled, { css } from "styled-components"; +import { + API_EDITOR_TAB_TITLES, + createMessage, + LEARN_MORE, +} from "ee/constants/messages"; +import { useDispatch, useSelector } from "react-redux"; +import { + isPluginActionSettingsOpen, + openPluginActionSettings, +} from "../../store"; +import { THEME } from "../../constants/PluginActionConstants"; +import { type DocsLink, openDoc } from "constants/DocumentationLinks"; + +export interface SettingsProps { + formName: string; + docsLink?: DocsLink; +} + +const Variables = css` + --popover-width: 280px; +`; + +/* TODO: Remove this after removing custom width from server side (Ankita) */ +const SettingsWrapper = styled.div` + display: flex; + flex-direction: column; + gap: var(--ads-v2-spaces-4); + + .t--form-control-INPUT_TEXT, + .t--form-control-DROP_DOWN { + > div { + min-width: unset; + width: 100%; + } + } +`; + +const StyledPopoverHeader = styled(PopoverHeader)` + margin-bottom: var(--ads-v2-spaces-5); +`; + +const StyledPopoverContent = styled(PopoverContent)` + ${Variables}; +`; + +const LearnMoreLink = styled(Link)` + span { + font-weight: bold; + } +`; + +const PluginActionSettingsPopover = (props: SettingsProps) => { + const { settingsConfig } = usePluginActionContext(); + const openSettings = useSelector(isPluginActionSettingsOpen); + const [isOpen, setIsOpen] = useState(false); + const dispatch = useDispatch(); + + useEffect(() => { + if (openSettings) { + handleOpenChange(true); + } + }, [openSettings]); + + const handleOpenChange = useCallback( + (open: boolean) => { + setIsOpen(open); + + if (openSettings && !open) { + dispatch(openPluginActionSettings(false)); + } + }, + [openSettings], + ); + + const handleEscapeKeyDown = () => { + handleOpenChange(false); + }; + + const handleButtonClick = () => { + handleOpenChange(true); + }; + + const handleLearnMoreClick = () => { + openDoc(props.docsLink as DocsLink); + }; + + return ( + + + + + + + {createMessage(API_EDITOR_TAB_TITLES.SETTINGS)} + + + + + {props.docsLink && ( + + {createMessage(LEARN_MORE)} + + )} + + + + + ); +}; + +export default PluginActionSettingsPopover; diff --git a/app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx b/app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx new file mode 100644 index 000000000000..7c8a886b7894 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { UIComponentTypes } from "api/PluginApi"; +import { usePluginActionContext } from "../../PluginActionContext"; +import ApiSettings from "./ApiSettings"; +import QuerySettings from "./QuerySettings"; +import { + API_EDITOR_FORM_NAME, + QUERY_EDITOR_FORM_NAME, +} from "ee/constants/forms"; +import { DocsLink } from "constants/DocumentationLinks"; + +const API_FORM_COMPONENTS = [ + UIComponentTypes.ApiEditorForm, + UIComponentTypes.GraphQLEditorForm, +]; + +const PluginActionSettings = () => { + const { plugin } = usePluginActionContext(); + + return API_FORM_COMPONENTS.includes(plugin.uiComponent) ? ( + + ) : ( + + ); +}; + +export default PluginActionSettings; diff --git a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx index c60a751490cc..43f3679e78c8 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx @@ -11,6 +11,7 @@ import { import { useToggle } from "@mantine/hooks"; import { useSelector } from "react-redux"; import { isActionRunning } from "../store"; +import PluginActionSettings from "./PluginActionSettings"; interface PluginActionToolbarProps { runOptions?: React.ReactNode; @@ -51,12 +52,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => { Run -