code folding in response and request

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -223,6 +223,7 @@ const ApiResponseView = (props: Props) => {
                   : "",
               }}
               height={"100%"}
+              folding={true}
             />
           )}
         </ResponseTabWrapper>

app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts

@@ -32,6 +32,7 @@ export type EditorConfig = {
   size: EditorSize;
   hinting: Array<HintHelper>;
   marking: Array<MarkHelper>;
+  folding: boolean;
 };
 
 export const EditorThemes: Record<EditorTheme, string> = {

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -143,7 +143,30 @@ class CodeEditor extends Component<Props, State> {
       if (this.props.tabBehaviour === TabBehaviour.INPUT) {
         options.extraKeys["Tab"] = false;
       }
-      this.editor = CodeMirror.fromTextArea(this.textArea.current, options);
+      if (this.props.folding) {
+        this.editor = CodeMirror.fromTextArea(this.textArea.current, {
+          ...options,
+          foldGutter: true,
+          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+          foldOptions: {
+            widget: (from: any, to: any) => {
+              let startToken = "{",
+                endToken = "}";
+              const prevLine = this.editor.getLine(from.line);
+              if (prevLine.lastIndexOf("[") > prevLine.lastIndexOf("{")) {
+                (startToken = "["), (endToken = "]");
+              }
+              const toParse = startToken + endToken;
+              try {
+                const parsed = JSON.parse(toParse);
+              } catch (e) {}
+              return "\u002E\u002E\u002E";
+            },
+          },
+        });
+      } else {
+        this.editor = CodeMirror.fromTextArea(this.textArea.current, options);
+      }
 
       this.editor.on("change", _.debounce(this.handleChange, 300));
       this.editor.on("change", this.handleAutocompleteVisibility);

app/client/src/components/editorComponents/CodeEditor/styledComponents.ts

@@ -382,6 +382,11 @@ export const EditorWrapper = styled.div<{
     margin: 5px;
     margin-right: 11px;
   }
+  .CodeMirror-foldmarker {
+    color: inherit;
+    text-shadow: none;
+    font: inherit;
+  }
 `;
 
 export const IconContainer = styled.div`

app/client/src/components/editorComponents/ReadOnlyEditor.tsx

@@ -8,13 +8,17 @@ import {
   EditorTheme,
   TabBehaviour,
 } from "components/editorComponents/CodeEditor/EditorConfig";
+import "codemirror/addon/fold/brace-fold";
+import "codemirror/addon/fold/foldgutter";
+import "codemirror/addon/fold/foldgutter.css";
 
 interface Props {
   input: {
     value: string;
     onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   };
   height: string;
+  folding: boolean;
 }
 
 const ReadOnlyEditor = (props: Props) => {
@@ -30,6 +34,7 @@ const ReadOnlyEditor = (props: Props) => {
     showLightningMenu: false,
     showLineNumbers: true,
     borderLess: true,
+    folding: props.folding,
   };
   return <CodeEditor {...editorProps} />;
 };

app/client/src/components/editorComponents/RequestView.tsx

@@ -184,6 +184,7 @@ export function RequestView(props: {
                       value: props.requestBody,
                     }}
                     height={"100%"}
+                    folding={true}
                   />
                 ),
               },

app/client/src/components/propertyControls/ChartDataControl.tsx

@@ -138,6 +138,7 @@ function DataControlComponent(props: RenderComponentProps) {
           mode={EditorModes.TEXT_WITH_BINDING}
           tabBehaviour={TabBehaviour.INPUT}
           placeholder="Series Name"
+          folding={false}
         />
       </StyledOptionControlWrapper>
       <StyledLabel>Series Data</StyledLabel>
@@ -168,6 +169,7 @@ function DataControlComponent(props: RenderComponentProps) {
           mode={EditorModes.JSON_WITH_BINDING}
           tabBehaviour={TabBehaviour.INPUT}
           placeholder=""
+          folding={false}
         />
       </StyledDynamicInput>
       <Box></Box>

app/client/src/components/propertyControls/CodeEditorControl.tsx

@@ -34,6 +34,7 @@ class CodeEditorControl extends BaseControl<ControlProps> {
         size={EditorSize.EXTENDED}
         mode={EditorModes.TEXT_WITH_BINDING}
         tabBehaviour={TabBehaviour.INDENT}
+        folding={false}
         {...props}
       />
     );

app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx

@@ -73,6 +73,7 @@ export function InputText(props: {
         size={EditorSize.EXTENDED}
         placeholder={placeholder}
         additionalDynamicData={additionalDynamicData}
+        folding={false}
         promptMessage={
           <PromptMessage>
             Access the current cell using <CurlyBraces>{"{{"}</CurlyBraces>

app/client/src/components/propertyControls/InputTextControl.tsx

@@ -53,6 +53,7 @@ export function InputText(props: {
         size={EditorSize.EXTENDED}
         placeholder={placeholder}
         additionalDynamicData={props.additionalAutocomplete}
+        folding={false}
       />
     </StyledDynamicInput>
   );