chore: Adding the GraphQLEditorForm for the modularised flow

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)}