From 17fbba15230215b05688a767dc57431976bb7d79 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 1 Oct 2024 14:05:16 +0530 Subject: [PATCH 1/5] refactoring GraphQLEditorForm component --- .../CommonEditorForm/CommonEditorForm.tsx | 2 +- .../Editor/APIEditor/ApiEditorContext.tsx | 4 - .../Editor/APIEditor/CommonEditorForm.tsx | 20 +- .../APIEditor/GraphQL/GraphQLEditorForm.tsx | 140 +----------- .../Editor/APIEditor/GraphQL/PostBodyData.tsx | 109 ++++++++++ .../Editor/APIEditor/GraphQL/QueryEditor.tsx | 10 +- .../APIEditor/GraphQL/VariableEditor.tsx | 10 +- .../pages/Editor/APIEditor/RestAPIForm.tsx | 37 +--- .../Editor/QueryEditor/EditorJSONtoForm.tsx | 204 +++++++++--------- .../Editor/QueryEditor/QueryEditorContext.tsx | 4 - 10 files changed, 224 insertions(+), 316 deletions(-) create mode 100644 app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx index a9ae550c0ec1..195fad3f6bff 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx @@ -7,7 +7,7 @@ import { HintMessages } from "./HintMessages"; import { Flex } from "@appsmith/ads"; import useGetFormActionValues from "./hooks/useGetFormActionValues"; -interface Props { +export interface Props { httpMethodOptions: { value: string }[]; action: Action; formName: string; diff --git a/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx b/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx index 1a2d9d517898..adca7c27f607 100644 --- a/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx +++ b/app/client/src/pages/Editor/APIEditor/ApiEditorContext.tsx @@ -14,7 +14,6 @@ interface ApiEditorContextContextProps { saveActionName: ( params: SaveActionNameParams, ) => ReduxAction; - closeEditorLink?: React.ReactNode; showRightPaneTabbedSection?: boolean; actionRightPaneAdditionSections?: React.ReactNode; notification?: React.ReactNode | string; @@ -31,7 +30,6 @@ export function ApiEditorContextProvider({ actionRightPaneAdditionSections, actionRightPaneBackLink, children, - closeEditorLink, handleDeleteClick, handleRunClick, moreActionsMenu, @@ -44,7 +42,6 @@ export function ApiEditorContextProvider({ () => ({ actionRightPaneAdditionSections, actionRightPaneBackLink, - closeEditorLink, handleDeleteClick, showRightPaneTabbedSection, handleRunClick, @@ -56,7 +53,6 @@ export function ApiEditorContextProvider({ [ actionRightPaneBackLink, actionRightPaneAdditionSections, - closeEditorLink, handleDeleteClick, showRightPaneTabbedSection, handleRunClick, diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx index 979c4edf1cb1..81b60207c752 100644 --- a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx +++ b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx @@ -3,11 +3,7 @@ import { useSelector } from "react-redux"; import styled from "styled-components"; import FormLabel from "components/editorComponents/FormLabel"; import FormRow from "components/editorComponents/FormRow"; -import type { - ActionResponse, - PaginationField, - SuggestedWidget, -} from "api/ActionAPI"; +import type { ActionResponse, PaginationField } from "api/ActionAPI"; import type { Action, PaginationType } from "entities/Action"; import ApiResponseView from "components/editorComponents/ApiResponseView"; import type { AppState } from "ee/reducers"; @@ -148,23 +144,12 @@ export interface CommonFormProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any datasourceParams?: any; actionName: string; - apiId: string; apiName: string; // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any settingsConfig: any; hintMessages?: Array; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - datasources?: any; - currentPageId?: string; - applicationId?: string; - hasResponse: boolean; - responseDataTypes: { key: string; title: string }[]; - responseDisplayFormat: { title: string; value: string }; - suggestedWidgets?: SuggestedWidget[]; updateDatasource: (datasource: Datasource) => void; - currentActionDatasourceId: string; autoGeneratedActionConfigHeaders?: AutoGeneratedHeader[]; } @@ -179,7 +164,6 @@ type CommonFormPropsWithExtraParams = CommonFormProps & { handleSubmit: any; // defaultSelectedTabIndex defaultTabSelected?: number; - closeEditorLink?: React.ReactNode; httpsMethods: { value: string }[]; }; @@ -215,7 +199,6 @@ function CommonEditorForm(props: CommonFormPropsWithExtraParams) { actionConfigurationParams, actionResponse, autoGeneratedActionConfigHeaders, - closeEditorLink, formName, handleSubmit, hintMessages, @@ -287,7 +270,6 @@ function CommonEditorForm(props: CommonFormPropsWithExtraParams) { return ( - {closeEditorLink}
` - width: 6px; - height: 100%; - margin-left: 2px; - border-right: 1px solid var(--ads-v2-color-border); - background: ${(props) => - props.resizing ? "var(--ads-v2-color-border)" : "transparent"}; - &:hover { - background: var(--ads-v2-color-border); - border-color: transparent; - } -`; +import PostBodyData from "./PostBodyData"; type APIFormProps = { - httpMethodFromForm: string; actionConfigurationBody: string; } & CommonFormProps; type Props = APIFormProps & InjectedFormProps; -const DEFAULT_GRAPHQL_VARIABLE_WIDTH = 300; - /** * Graphql Editor form which uses the Common Editor and pass on the differentiating components from the API Editor. * @param props using type Props @@ -79,65 +30,11 @@ const DEFAULT_GRAPHQL_VARIABLE_WIDTH = 300; */ function GraphQLEditorForm(props: Props) { const { actionName } = props; - const theme = EditorTheme.LIGHT; - const sizeableRef = useRef(null); - const [variableEditorWidth, setVariableEditorWidth] = React.useState( - DEFAULT_GRAPHQL_VARIABLE_WIDTH, - ); - - const { closeEditorLink } = useContext(ApiEditorContext); - - /** - * Variable Editor's resizeable handler for the changing of width - */ - const onVariableEditorWidthChange = useCallback((newWidth) => { - setVariableEditorWidth(newWidth); - }, []); - - const { onMouseDown, onMouseUp, onTouchStart, resizing } = - useHorizontalResize( - sizeableRef, - onVariableEditorWidthChange, - undefined, - true, - ); return ( - -
- -
- - - - - } - closeEditorLink={closeEditorLink} + bodyUIComponent={} defaultTabSelected={2} formName={API_EDITOR_FORM_NAME} httpsMethods={GRAPHQL_HTTP_METHOD_OPTIONS} @@ -172,10 +69,6 @@ export default connect( // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any (state: AppState, props: { pluginId: string; match?: any }) => { - const httpMethodFromForm = selector( - state, - "actionConfiguration.httpMethod", - ); const actionConfigurationHeaders = selector(state, "actionConfiguration.headers") || []; const actionConfigurationParams = @@ -201,47 +94,20 @@ export default connect( get(datasourceFromAction, "datasourceConfiguration.queryParameters") || []; - const currentActionDatasourceId = selector(state, "datasource.id"); - const actionConfigurationBody = selector(state, "actionConfiguration.body") || ""; - let hasResponse = false; - let suggestedWidgets; const actionResponse = getActionData(state, apiId); - if (actionResponse) { - hasResponse = - !isEmpty(actionResponse.statusCode) && - actionResponse.statusCode[0] === "2"; - suggestedWidgets = actionResponse.suggestedWidgets; - } - - const actionData = getActionData(state, apiId); - const { responseDataTypes, responseDisplayFormat } = - actionResponseDisplayDataFormats(actionData); - return { actionName, actionResponse, - apiId, - httpMethodFromForm, actionConfigurationHeaders, actionConfigurationParams, actionConfigurationBody, - currentActionDatasourceId, datasourceHeaders, datasourceParams, hintMessages, - datasources: state.entities.datasources.list.filter( - (d) => d.pluginId === props.pluginId, - ), - currentPageId: state.entities.pageList.currentPageId, - applicationId: state.entities.pageList.applicationId, - responseDataTypes, - responseDisplayFormat, - suggestedWidgets, - hasResponse, }; }, mapDispatchToProps, diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx new file mode 100644 index 000000000000..1eb5436a0bf9 --- /dev/null +++ b/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx @@ -0,0 +1,109 @@ +import React, { useCallback, useRef } from "react"; +import styled from "styled-components"; +import QueryEditor from "./QueryEditor"; +import VariableEditor from "./VariableEditor"; +import useHorizontalResize from "utils/hooks/useHorizontalResize"; +import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; +import classNames from "classnames"; +import { tailwindLayers } from "constants/Layers"; + +const ResizeableDiv = styled.div` + display: flex; + height: 100%; + flex-shrink: 0; +`; + +const PostBodyContainer = styled.div` + display: flex; + height: 100%; + overflow: hidden; + &&&& .CodeMirror { + height: 100%; + border-top: 1px solid var(--ads-v2-color-border); + border-bottom: 1px solid var(--ads-v2-color-border); + border-radius: 0; + padding: 0; + } + & .CodeMirror-scroll { + margin: 0px; + padding: 0px; + overflow: auto !important; + } +`; + +const ResizerHandler = styled.div<{ resizing: boolean }>` + width: 6px; + height: 100%; + margin-left: 2px; + border-right: 1px solid var(--ads-v2-color-border); + background: ${(props) => + props.resizing ? "var(--ads-v2-color-border)" : "transparent"}; + &:hover { + background: var(--ads-v2-color-border); + border-color: transparent; + } +`; + +const DEFAULT_GRAPHQL_VARIABLE_WIDTH = 300; + +interface Props { + actionName: string; +} + +function PostBodyData(props: Props) { + const { actionName } = props; + const theme = EditorTheme.LIGHT; + const sizeableRef = useRef(null); + const [variableEditorWidth, setVariableEditorWidth] = React.useState( + DEFAULT_GRAPHQL_VARIABLE_WIDTH, + ); + /** + * Variable Editor's resizeable handler for the changing of width + */ + const onVariableEditorWidthChange = useCallback((newWidth) => { + setVariableEditorWidth(newWidth); + }, []); + + const { onMouseDown, onMouseUp, onTouchStart, resizing } = + useHorizontalResize( + sizeableRef, + onVariableEditorWidthChange, + undefined, + true, + ); + + return ( + + +
+ +
+ + + + + ); +} + +export default PostBodyData; diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx index 442d1669b085..53948e1520b4 100644 --- a/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx +++ b/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx @@ -18,9 +18,7 @@ import styled from "styled-components"; import { Text, TextType } from "@appsmith/ads-old"; import LazyCodeEditor from "components/editorComponents/LazyCodeEditor"; -const QueryHeader = styled.div` - display: flex; - width: 100%; +const QueryHeader = styled(Text)` background: var(--ads-v2-color-bg-subtle); padding: 8px 16px; `; @@ -51,10 +49,8 @@ function QueryEditor(props: QueryProps) { return ( - - - Query - + + Query - - - Query variables - + + Query variables ; function ApiEditorForm(props: Props) { - const { closeEditorLink } = useContext(ApiEditorContext); const { actionName } = props; const theme = EditorTheme.LIGHT; @@ -41,7 +33,6 @@ function ApiEditorForm(props: Props) { bodyUIComponent={ } - closeEditorLink={closeEditorLink} formName={API_EDITOR_FORM_NAME} httpsMethods={HTTP_METHOD_OPTIONS} paginationUIComponent={ @@ -70,7 +61,7 @@ const mapDispatchToProps = (dispatch: any): ReduxDispatchProps => ({ }, }); -export default connect((state: AppState, props: { pluginId: string }) => { +export default connect((state: AppState) => { const httpMethodFromForm = selector(state, "actionConfiguration.httpMethod"); const actionConfigurationHeaders = selector(state, "actionConfiguration.headers") || []; @@ -110,19 +101,6 @@ export default connect((state: AppState, props: { pluginId: string }) => { const responses = getActionResponses(state); const actionResponse = responses[apiId]; - let hasResponse = false; - let suggestedWidgets; - - if (actionResponse) { - hasResponse = - !isEmpty(actionResponse.statusCode) && - actionResponse.statusCode[0] === "2"; - suggestedWidgets = actionResponse.suggestedWidgets; - } - - const actionData = getActionData(state, apiId); - const { responseDataTypes, responseDisplayFormat } = - actionResponseDisplayDataFormats(actionData); return { actionName, @@ -136,15 +114,6 @@ export default connect((state: AppState, props: { pluginId: string }) => { datasourceHeaders, datasourceParams, hintMessages, - datasources: state.entities.datasources.list.filter( - (d) => d.pluginId === props.pluginId, - ), - currentPageId: state.entities.pageList.currentPageId, - applicationId: state.entities.pageList.applicationId, - responseDataTypes, - responseDisplayFormat, - suggestedWidgets, - hasResponse, }; }, mapDispatchToProps)( reduxForm({ diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx index 85b6d5651183..370964cc6dcc 100644 --- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx +++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx @@ -197,7 +197,7 @@ export function EditorJSONtoForm(props: Props) { uiComponent, } = props; - const { actionRightPaneAdditionSections, closeEditorLink, notification } = + const { actionRightPaneAdditionSections, notification } = useContext(QueryEditorContext); const params = useParams<{ baseApiId?: string; baseQueryId?: string }>(); @@ -232,9 +232,12 @@ export function EditorJSONtoForm(props: Props) { const selectedConfigTab = useSelector(getQueryPaneConfigSelectedTabIndex); - const setSelectedConfigTab = useCallback((selectedIndex: string) => { - dispatch(setQueryPaneConfigSelectedTabIndex(selectedIndex)); - }, []); + const setSelectedConfigTab = useCallback( + (selectedIndex: string) => { + dispatch(setQueryPaneConfigSelectedTabIndex(selectedIndex)); + }, + [dispatch], + ); // when switching between different redux forms, make sure this redux form has been initialized before rendering anything. // the initialized prop below comes from redux-form. @@ -243,107 +246,102 @@ export function EditorJSONtoForm(props: Props) { } return ( - <> - {closeEditorLink} - - - {notification && ( - {notification} - )} - -
- - - + + {notification && ( + {notification} + )} + +
+ + + + + + + Query + + + Settings + + + + - - - - Query - - - Settings - - - - - - - - - - - - - - - {documentationLink && ( - + + + + + + + + + {documentationLink && ( + + { + e.stopPropagation(); + handleDocumentationClick(); + }} + size="sm" + startIcon="book-line" > - { - e.stopPropagation(); - handleDocumentationClick(); - }} - size="sm" - startIcon="book-line" - > - {createMessage(DOCUMENTATION)} - - - )} - - - - -
- - - - + {createMessage(DOCUMENTATION)} + + + )} + + + + +
+ + + ); } diff --git a/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx b/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx index c5089fc6bdfc..88d21b626452 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryEditorContext.tsx @@ -11,7 +11,6 @@ interface QueryEditorContextContextProps { saveActionName: ( params: SaveActionNameParams, ) => ReduxAction; - closeEditorLink?: React.ReactNode; actionRightPaneAdditionSections?: React.ReactNode; showSuggestedWidgets?: boolean; notification?: string | React.ReactNode; @@ -29,7 +28,6 @@ export function QueryEditorContextProvider({ actionRightPaneBackLink, changeQueryPage, children, - closeEditorLink, moreActionsMenu, notification, onCreateDatasourceClick, @@ -42,7 +40,6 @@ export function QueryEditorContextProvider({ actionRightPaneBackLink, actionRightPaneAdditionSections, changeQueryPage, - closeEditorLink, moreActionsMenu, onCreateDatasourceClick, onEntityNotFoundBackClick, @@ -54,7 +51,6 @@ export function QueryEditorContextProvider({ actionRightPaneBackLink, actionRightPaneAdditionSections, changeQueryPage, - closeEditorLink, moreActionsMenu, onCreateDatasourceClick, onEntityNotFoundBackClick, From 09279f06a261c2e3a855003c6946fa79a860bbcc Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 1 Oct 2024 16:10:37 +0530 Subject: [PATCH 2/5] adding graphql editor form under modularisation flow --- .../PluginActionForm/PluginActionForm.tsx | 8 ++- .../hooks/useGetFormActionValues.ts | 8 +++ .../components/GraphQLEditorForm.tsx | 53 +++++++++++++++++++ app/client/src/api/PluginApi.ts | 1 + .../Editor/APIEditor/CommonEditorForm.tsx | 4 -- .../APIEditor/GraphQL/GraphQLEditorForm.tsx | 27 +++------- .../pages/Editor/APIEditor/RestAPIForm.tsx | 25 +++------ 7 files changed, 82 insertions(+), 44 deletions(-) create mode 100644 app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditorForm.tsx diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx index 66ab320a3048..42b75aeca3c6 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx @@ -4,6 +4,7 @@ import { Flex } from "@appsmith/ads"; import { useChangeActionCall } from "./hooks/useChangeActionCall"; import { usePluginActionContext } from "../../PluginActionContext"; import { UIComponentTypes } from "api/PluginApi"; +import GraphQLEditorForm from "./components/GraphQLEditorForm"; const PluginActionForm = () => { useChangeActionCall(); @@ -11,9 +12,12 @@ const PluginActionForm = () => { return ( - {plugin.uiComponent === UIComponentTypes.ApiEditorForm ? ( + {plugin.uiComponent === UIComponentTypes.ApiEditorForm && ( - ) : null} + )} + {plugin.uiComponent === UIComponentTypes.GraphQLEditorForm && ( + + )} ); }; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts index da75a1482a26..1e3d7809d684 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts @@ -20,6 +20,7 @@ function useGetFormActionValues() { // return empty values to avoid form ui issues if (!formValues || !isAPIAction(formValues)) { return { + actionConfigurationBody: "", actionHeaders: [], actionParams: [], autoGeneratedHeaders: [], @@ -28,6 +29,12 @@ function useGetFormActionValues() { }; } + const actionConfigurationBody = get( + formValues, + "actionConfiguration.body", + [], + ) as string; + const actionHeaders = get( formValues, "actionConfiguration.headers", @@ -67,6 +74,7 @@ function useGetFormActionValues() { ) as Property[]; return { + actionConfigurationBody, actionHeaders, autoGeneratedHeaders, actionParams, diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditorForm.tsx new file mode 100644 index 000000000000..2b64fed062ae --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditorForm.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import { reduxForm } from "redux-form"; +import { API_EDITOR_FORM_NAME } from "ee/constants/forms"; +import CommonEditorForm from "./CommonEditorForm"; +import Pagination from "pages/Editor/APIEditor/GraphQL/Pagination"; +import { GRAPHQL_HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/GraphQLEditorConstants"; +import PostBodyData from "pages/Editor/APIEditor/GraphQL/PostBodyData"; +import { usePluginActionContext } from "PluginActionEditor"; +import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; +import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; +import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; +import { noop } from "lodash"; +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; + + const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); + const isChangePermitted = getHasManageActionPermission( + isFeatureEnabled, + action.userPermissions, + ); + + const { actionConfigurationBody } = useGetFormActionValues(); + + return ( + } + formName={FORM_NAME} + httpMethodOptions={GRAPHQL_HTTP_METHOD_OPTIONS} + isChangePermitted={isChangePermitted} + paginationUiComponent={ + + } + /> + ); +} + +export default reduxForm({ form: FORM_NAME, enableReinitialize: true })( + GraphQLEditorForm, +); diff --git a/app/client/src/api/PluginApi.ts b/app/client/src/api/PluginApi.ts index ef8987b4208f..5bcc33486109 100644 --- a/app/client/src/api/PluginApi.ts +++ b/app/client/src/api/PluginApi.ts @@ -13,6 +13,7 @@ export enum UIComponentTypes { UQIDbEditorForm = "UQIDbEditorForm", ApiEditorForm = "ApiEditorForm", JsEditorForm = "JsEditorForm", + GraphQLEditorForm = "GraphQLEditorForm", } export enum DatasourceComponentTypes { diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx index 81b60207c752..7c265e98b5c0 100644 --- a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx +++ b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx @@ -11,7 +11,6 @@ import ActionNameEditor from "components/editorComponents/ActionNameEditor"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import { Button } from "@appsmith/ads"; import { useParams } from "react-router"; -import type { Datasource } from "entities/Datasource"; import equal from "fast-deep-equal/es6"; import { getPlugin } from "ee/selectors/entitiesSelector"; import type { AutoGeneratedHeader } from "./helpers"; @@ -149,7 +148,6 @@ export interface CommonFormProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any settingsConfig: any; hintMessages?: Array; - updateDatasource: (datasource: Datasource) => void; autoGeneratedActionConfigHeaders?: AutoGeneratedHeader[]; } @@ -162,8 +160,6 @@ type CommonFormPropsWithExtraParams = CommonFormProps & { // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any handleSubmit: any; - // defaultSelectedTabIndex - defaultTabSelected?: number; httpsMethods: { value: string }[]; }; diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx index fd785b7cab03..b7dd25b131ac 100644 --- a/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx +++ b/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx @@ -1,12 +1,11 @@ import React from "react"; import { connect } from "react-redux"; import type { InjectedFormProps } from "redux-form"; -import { change, formValueSelector, reduxForm } from "redux-form"; +import { formValueSelector, reduxForm } from "redux-form"; import { API_EDITOR_FORM_NAME } from "ee/constants/forms"; import type { Action } from "entities/Action"; import type { AppState } from "ee/reducers"; import get from "lodash/get"; -import type { Datasource } from "entities/Datasource"; import { getActionByBaseId, getActionData, @@ -23,6 +22,8 @@ type APIFormProps = { type Props = APIFormProps & InjectedFormProps; +const FORM_NAME = API_EDITOR_FORM_NAME; + /** * Graphql Editor form which uses the Common Editor and pass on the differentiating components from the API Editor. * @param props using type Props @@ -35,13 +36,12 @@ function GraphQLEditorForm(props: Props) { } - defaultTabSelected={2} - formName={API_EDITOR_FORM_NAME} + formName={FORM_NAME} httpsMethods={GRAPHQL_HTTP_METHOD_OPTIONS} paginationUIComponent={ void; -} - -// TODO: Fix this the next time the file is edited -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const mapDispatchToProps = (dispatch: any): ReduxDispatchProps => ({ - updateDatasource: (datasource) => { - dispatch(change(API_EDITOR_FORM_NAME, "datasource", datasource)); - }, -}); +const selector = formValueSelector(FORM_NAME); export default connect( // TODO: Fix this the next time the file is edited @@ -110,12 +98,11 @@ export default connect( hintMessages, }; }, - mapDispatchToProps, )( // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any reduxForm({ - form: API_EDITOR_FORM_NAME, + form: FORM_NAME, enableReinitialize: true, })(GraphQLEditorForm), ); diff --git a/app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx b/app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx index cb913545a9fe..0df046c99766 100644 --- a/app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx +++ b/app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx @@ -1,7 +1,7 @@ import React from "react"; import { connect } from "react-redux"; import type { InjectedFormProps } from "redux-form"; -import { change, formValueSelector, reduxForm } from "redux-form"; +import { formValueSelector, reduxForm } from "redux-form"; import { API_EDITOR_FORM_NAME } from "ee/constants/forms"; import type { Action } from "entities/Action"; import PostBodyData from "./PostBodyData"; @@ -9,7 +9,6 @@ import type { AppState } from "ee/reducers"; import { getApiName } from "selectors/formSelectors"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import get from "lodash/get"; -import type { Datasource } from "entities/Datasource"; import { getAction, getActionResponses } from "ee/selectors/entitiesSelector"; import type { CommonFormProps } from "./CommonEditorForm"; import CommonEditorForm from "./CommonEditorForm"; @@ -23,6 +22,8 @@ type APIFormProps = { type Props = APIFormProps & InjectedFormProps; +const FORM_NAME = API_EDITOR_FORM_NAME; + function ApiEditorForm(props: Props) { const { actionName } = props; const theme = EditorTheme.LIGHT; @@ -33,7 +34,7 @@ function ApiEditorForm(props: Props) { bodyUIComponent={ } - formName={API_EDITOR_FORM_NAME} + formName={FORM_NAME} httpsMethods={HTTP_METHOD_OPTIONS} paginationUIComponent={ void; -} - -// TODO: Fix this the next time the file is edited -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const mapDispatchToProps = (dispatch: any): ReduxDispatchProps => ({ - updateDatasource: (datasource) => { - dispatch(change(API_EDITOR_FORM_NAME, "datasource", datasource)); - }, -}); +const selector = formValueSelector(FORM_NAME); export default connect((state: AppState) => { const httpMethodFromForm = selector(state, "actionConfiguration.httpMethod"); @@ -115,9 +104,9 @@ export default connect((state: AppState) => { datasourceParams, hintMessages, }; -}, mapDispatchToProps)( +})( reduxForm({ - form: API_EDITOR_FORM_NAME, + form: FORM_NAME, enableReinitialize: true, })(ApiEditorForm), ); From 0eade52fd0eae6483d92ca13cd85430a392db293 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 1 Oct 2024 18:05:03 +0530 Subject: [PATCH 3/5] minor fix --- .../components/CommonEditorForm/hooks/useGetFormActionValues.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts index 1e3d7809d684..8b71a662e410 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/hooks/useGetFormActionValues.ts @@ -32,7 +32,7 @@ function useGetFormActionValues() { const actionConfigurationBody = get( formValues, "actionConfiguration.body", - [], + "", ) as string; const actionHeaders = get( From 4109a0e289224ffa2fa201e08f6c65ea9cb00663 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 1 Oct 2024 18:14:37 +0530 Subject: [PATCH 4/5] addressing coderabbitai comments --- .../pages/Editor/APIEditor/GraphQL/PostBodyData.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx index 1eb5436a0bf9..e40a1046e6b8 100644 --- a/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx +++ b/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx @@ -7,7 +7,7 @@ import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig import classNames from "classnames"; import { tailwindLayers } from "constants/Layers"; -const ResizeableDiv = styled.div` +const ResizableDiv = styled.div` display: flex; height: 100%; flex-shrink: 0; @@ -53,7 +53,7 @@ interface Props { function PostBodyData(props: Props) { const { actionName } = props; const theme = EditorTheme.LIGHT; - const sizeableRef = useRef(null); + const resizeableRef = useRef(null); const [variableEditorWidth, setVariableEditorWidth] = React.useState( DEFAULT_GRAPHQL_VARIABLE_WIDTH, ); @@ -66,7 +66,7 @@ function PostBodyData(props: Props) { const { onMouseDown, onMouseUp, onTouchStart, resizing } = useHorizontalResize( - sizeableRef, + resizeableRef, onVariableEditorWidthChange, undefined, true, @@ -93,15 +93,15 @@ function PostBodyData(props: Props) { resizing={resizing} /> - - + ); } From 28e7dd96c9cdf7c3303e3e8abf6e4bf1b90e480a Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 2 Oct 2024 11:27:36 +0530 Subject: [PATCH 5/5] addressing review comments --- .../components/PluginActionForm/PluginActionForm.tsx | 2 +- .../components/CommonEditorForm/CommonEditorForm.tsx | 2 +- .../components/{ => GraphQLEditor}/GraphQLEditorForm.tsx | 6 +++--- .../components/GraphQLEditor}/PostBodyData.tsx | 4 ++-- .../pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) rename app/client/src/PluginActionEditor/components/PluginActionForm/components/{ => GraphQLEditor}/GraphQLEditorForm.tsx (89%) rename app/client/src/{pages/Editor/APIEditor/GraphQL => PluginActionEditor/components/PluginActionForm/components/GraphQLEditor}/PostBodyData.tsx (94%) diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx index 42b75aeca3c6..759ea60f1b70 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx @@ -4,7 +4,7 @@ import { Flex } from "@appsmith/ads"; import { useChangeActionCall } from "./hooks/useChangeActionCall"; import { usePluginActionContext } from "../../PluginActionContext"; import { UIComponentTypes } from "api/PluginApi"; -import GraphQLEditorForm from "./components/GraphQLEditorForm"; +import GraphQLEditorForm from "./components/GraphQLEditor/GraphQLEditorForm"; const PluginActionForm = () => { useChangeActionCall(); diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx index 195fad3f6bff..a9ae550c0ec1 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx @@ -7,7 +7,7 @@ import { HintMessages } from "./HintMessages"; import { Flex } from "@appsmith/ads"; import useGetFormActionValues from "./hooks/useGetFormActionValues"; -export interface Props { +interface Props { httpMethodOptions: { value: string }[]; action: Action; formName: string; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx similarity index 89% rename from app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditorForm.tsx rename to app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx index 2b64fed062ae..717781b5a382 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx @@ -1,17 +1,17 @@ import React from "react"; import { reduxForm } from "redux-form"; import { API_EDITOR_FORM_NAME } from "ee/constants/forms"; -import CommonEditorForm from "./CommonEditorForm"; +import CommonEditorForm from "../CommonEditorForm"; import Pagination from "pages/Editor/APIEditor/GraphQL/Pagination"; import { GRAPHQL_HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/GraphQLEditorConstants"; -import PostBodyData from "pages/Editor/APIEditor/GraphQL/PostBodyData"; +import PostBodyData from "./PostBodyData"; import { usePluginActionContext } from "PluginActionEditor"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { noop } from "lodash"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; -import useGetFormActionValues from "./CommonEditorForm/hooks/useGetFormActionValues"; +import useGetFormActionValues from "../CommonEditorForm/hooks/useGetFormActionValues"; const FORM_NAME = API_EDITOR_FORM_NAME; diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx similarity index 94% rename from app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx rename to app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx index e40a1046e6b8..f897d38246e9 100644 --- a/app/client/src/pages/Editor/APIEditor/GraphQL/PostBodyData.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useRef } from "react"; import styled from "styled-components"; -import QueryEditor from "./QueryEditor"; -import VariableEditor from "./VariableEditor"; +import QueryEditor from "pages/Editor/APIEditor/GraphQL/QueryEditor"; +import VariableEditor from "pages/Editor/APIEditor/GraphQL/VariableEditor"; import useHorizontalResize from "utils/hooks/useHorizontalResize"; import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig"; import classNames from "classnames"; diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx index b7dd25b131ac..1ed0faf3cdda 100644 --- a/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx +++ b/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx @@ -14,7 +14,7 @@ import type { CommonFormProps } from "../CommonEditorForm"; import CommonEditorForm from "../CommonEditorForm"; import Pagination from "./Pagination"; import { GRAPHQL_HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants/GraphQLEditorConstants"; -import PostBodyData from "./PostBodyData"; +import PostBodyData from "PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData"; type APIFormProps = { actionConfigurationBody: string;