feat: Updated graphQL to use dynamic text feild instead of custom UI

appsmithorg · Oct 7, 2024 · 0a88c13 · 0a88c13
1 parent b447e6a
commit 0a88c13
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 85 deletions.
diff --git a/.../PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx b/.../PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
@@ -1,107 +1,87 @@
-import React, { useCallback, useRef } from "react";
+import React 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;
-`;
+import {
+  CodeEditorBorder,
+  EditorModes,
+  EditorSize,
+  EditorTheme,
+  TabBehaviour,
+} from "components/editorComponents/CodeEditor/EditorConfig";
+import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
+import { Section, Zone } from "pages/Editor/ActionForm";
+import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
+import FormLabel from "components/editorComponents/FormLabel";
 
 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;
+    height: auto;
+    min-height: 250px;
   }
 `;
 
-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 StyledFormLabel = styled(FormLabel)`
+  && {
+    margin-bottom: var(--ads-v2-spaces-2);
+    padding: 0;
   }
 `;
 
-const DEFAULT_GRAPHQL_VARIABLE_WIDTH = 300;
-
 interface Props {
   actionName: string;
 }
 
+const EXPECTED_VARIABLE = {
+  type: "object",
+  example:
+    '{\n  "name":"{{ inputName.property }}",\n  "preference":"{{ dropdownName.property }}"\n}',
+  autocompleteDataType: AutocompleteDataType.OBJECT,
+};
+
 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>
+      <Section isFullWidth>
+        <Zone layout="single_column">
+          <div>
+            <StyledFormLabel>Query</StyledFormLabel>
+            <DynamicTextField
+              border={CodeEditorBorder.ALL_SIDE}
+              dataTreePath={`${actionName}.config.body`}
+              evaluatedPopUpLabel={"Query"}
+              mode={EditorModes.GRAPHQL_WITH_BINDING}
+              name="actionConfiguration.body"
+              placeholder={`{{\n\t{name: inputName.property, preference: dropdownName.property}\n}}`}
+              showLineNumbers
+              size={EditorSize.EXTENDED}
+              tabBehaviour={TabBehaviour.INDENT}
+              theme={theme}
+            />
+          </div>
+        </Zone>
+        <Zone layout="single_column">
+          <div>
+            <StyledFormLabel>Query variables</StyledFormLabel>
+            <DynamicTextField
+              border={CodeEditorBorder.ALL_SIDE}
+              dataTreePath={`${props.actionName}.config.pluginSpecifiedTemplates[1].value`}
+              evaluatedPopUpLabel={"Query variables"}
+              expected={EXPECTED_VARIABLE}
+              height="100%"
+              mode={EditorModes.JSON_WITH_BINDING}
+              name="actionConfiguration.pluginSpecifiedTemplates[1].value"
+              placeholder={`${EXPECTED_VARIABLE.example}\n\n\\\\Take widget inputs using {{ }}`}
+              showLightningMenu={false}
+              showLineNumbers
+              size={EditorSize.EXTENDED}
+              tabBehaviour={TabBehaviour.INDENT}
+              theme={theme}
+            />
+          </div>
+        </Zone>
+      </Section>
     </PostBodyContainer>
   );
 }

diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
@@ -111,6 +111,7 @@ const Wrapper = styled.div`
   flex-direction: row;
   height: 100%;
   position: relative;
+  overflow: hidden;
 `;
 
 const MainContainer = styled.div`

diff --git a/app/client/src/pages/Editor/APIEditor/Editor.tsx b/app/client/src/pages/Editor/APIEditor/Editor.tsx
@@ -35,6 +35,7 @@ import { saasEditorApiIdURL } from "ee/RouteBuilder";
 import GraphQLEditorForm from "./GraphQL/GraphQLEditorForm";
 import type { APIEditorRouteParams } from "constants/routes";
 import { ApiEditorContext } from "./ApiEditorContext";
+import { EDITOR_TABS_HEIGHT } from "../IDE/EditorPane/constants";
 
 const LoadingContainer = styled(CenteredWrapper)`
   height: 50%;
@@ -226,7 +227,7 @@ class ApiEditor extends React.Component<Props> {
 
 const formStyles: CSSProperties = {
   position: "relative",
-  height: "100%",
+  height: `calc(100% - ${EDITOR_TABS_HEIGHT})`,
   display: "flex",
   flexDirection: "column",
 };

diff --git a/app/client/src/pages/Editor/ActionForm/Section/index.tsx b/app/client/src/pages/Editor/ActionForm/Section/index.tsx
@@ -5,11 +5,13 @@ import styles from "./styles.module.css";
 interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   isStandalone?: boolean;
+  isFullWidth?: boolean;
 }
 
 const Section: React.FC<SectionProps> = ({
   children,
   className,
+  isFullWidth = false,
   isStandalone = false,
   ...props
 }) => {
@@ -18,6 +20,7 @@ const Section: React.FC<SectionProps> = ({
   return (
     <div
       className={classNames}
+      data-fullwidth={isFullWidth.toString()}
       data-standalone={isStandalone.toString()}
       {...props}
     >

diff --git a/app/client/src/pages/Editor/ActionForm/Section/styles.module.css b/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
@@ -13,4 +13,8 @@
   &[data-standalone="false"]:not(:last-child) {
     border-bottom: 1px solid var(--ads-v2-color-border);
   }
+
+  &[data-fullwidth="true"] {
+    max-width: none;
+  }
 }