chore: Adding the GraphQLEditorForm for the modularised flow (#36633)

## Description

Adding the GraphQLEditorForm for the modularised flow


Fixes [#36624](#36624)  

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11138697528>
> Commit: 3aa280e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11138697528&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 02 Oct 2024 07:47:13 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced a new `GraphQLEditorForm` component for editing GraphQL
actions within the plugin action editor.
- Added a `PostBodyData` component for managing the layout and
functionality of a GraphQL API editor, featuring a `QueryEditor` and a
`VariableEditor`.
- Enhanced the `useGetFormActionValues` hook to include
`actionConfigurationBody`, ensuring a complete set of action values.

- **Improvements**
- Simplified prop management and conditional rendering in various
components, enhancing maintainability.

- **Bug Fixes**
- Removed deprecated `closeEditorLink` from multiple contexts and
components to streamline functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -4,16 +4,20 @@ import { Flex } from "@appsmith/ads";
 import { useChangeActionCall } from "./hooks/useChangeActionCall";
 import { usePluginActionContext } from "../../PluginActionContext";
 import { UIComponentTypes } from "api/PluginApi";
+import GraphQLEditorForm from "./components/GraphQLEditor/GraphQLEditorForm";
 
 const PluginActionForm = () => {
  useChangeActionCall();
  const { plugin } = usePluginActionContext();
 
  return (
  <Flex p="spaces-2" w="100%">
- {plugin.uiComponent === UIComponentTypes.ApiEditorForm ? (
+ {plugin.uiComponent === UIComponentTypes.ApiEditorForm && (
  <APIEditorForm />
- ) : null}
+ )}
+ {plugin.uiComponent === UIComponentTypes.GraphQLEditorForm && (
+ <GraphQLEditorForm />
+ )}
  </Flex>
  );
 };

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,

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/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 "./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 (
+ <CommonEditorForm
+ action={action}
+ bodyUIComponent={<PostBodyData actionName={action.name} />}
+ formName={FORM_NAME}
+ httpMethodOptions={GRAPHQL_HTTP_METHOD_OPTIONS}
+ isChangePermitted={isChangePermitted}
+ paginationUiComponent={
+ <Pagination
+ actionName={action.name}
+ formName={FORM_NAME}
+ onTestClick={noop}
+ paginationType={action.actionConfiguration.paginationType}
+ query={actionConfigurationBody}
+ theme={theme}
+ />
+ }
+ />
+ );
+}
+
+export default reduxForm({ form: FORM_NAME, enableReinitialize: true })(
+ GraphQLEditorForm,
+);

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

@@ -0,0 +1,109 @@
+import React, { useCallback, useRef } from "react";
+import styled from "styled-components";
+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";
+import { tailwindLayers } from "constants/Layers";
+
+const ResizableDiv = 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 resizeableRef = useRef<HTMLDivElement>(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(
+ resizeableRef,
+ onVariableEditorWidthChange,
+ undefined,
+ true,
+ );
+
+ return (
+ <PostBodyContainer>
+ <QueryEditor
+ dataTreePath={`${actionName}.config.body`}
+ height="100%"
+ name="actionConfiguration.body"
+ theme={theme}
+ />
+ <div
+ className={`w-2 h-full -ml-2 group cursor-ew-resize ${tailwindLayers.resizer}`}
+ onMouseDown={onMouseDown}
+ onTouchEnd={onMouseUp}
+ onTouchStart={onTouchStart}
+ >
+ <ResizerHandler
+ className={classNames({
+ "transform transition": true,
+ })}
+ resizing={resizing}
+ />
+ </div>
+ <ResizableDiv
+ ref={resizeableRef}
+ style={{
+ width: `${variableEditorWidth}px`,
+ paddingRight: "2px",
+ }}
+ >
+ <VariableEditor actionName={actionName} theme={theme} />
+ </ResizableDiv>
+ </PostBodyContainer>
+ );
+}
+
+export default PostBodyData;

app/client/src/api/PluginApi.ts

@@ -13,6 +13,7 @@ export enum UIComponentTypes {
  UQIDbEditorForm = "UQIDbEditorForm",
  ApiEditorForm = "ApiEditorForm",
  JsEditorForm = "JsEditorForm",
+ GraphQLEditorForm = "GraphQLEditorForm",
 }
 
 export enum DatasourceComponentTypes {

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

@@ -14,7 +14,6 @@ interface ApiEditorContextContextProps {
  saveActionName: (
  params: SaveActionNameParams,
  ) => ReduxAction<SaveActionNameParams>;
- 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,

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

@@ -3,19 +3,14 @@ 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";
 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";
@@ -148,23 +143,11 @@ 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<string>;
- // 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[];
 }
 
@@ -177,9 +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;
- closeEditorLink?: React.ReactNode;
  httpsMethods: { value: string }[];
 };
 
@@ -215,7 +195,6 @@ function CommonEditorForm(props: CommonFormPropsWithExtraParams) {
  actionConfigurationParams,
  actionResponse,
  autoGeneratedActionConfigHeaders,
- closeEditorLink,
  formName,
  handleSubmit,
  hintMessages,
@@ -287,7 +266,6 @@ function CommonEditorForm(props: CommonFormPropsWithExtraParams) {
 
  return (
  <MainContainer>
- {closeEditorLink}
  <Form
  data-testid={`t--action-form-${plugin?.type}`}
  onSubmit={handleSubmit(noop)}