First try to fix line editing jumps

Author: danburonline

src/subapps/admin/components/ViewForm/ElasticSearchQueryForm.tsx

@@ -7,7 +7,7 @@ import { Button, Card, Empty, Form, List } from 'antd';
 import * as codemirror from 'codemirror';
 import 'codemirror/addon/display/placeholder';
 import 'codemirror/mode/javascript/javascript';
-import { useEffect, useRef, useState } from 'react';
+import { FC, MutableRefObject, useEffect, useRef, useState } from 'react';
 import { UnControlled as CodeMirror } from 'react-codemirror2';
 import ReactJson from 'react-json-view';
 
@@ -28,7 +28,7 @@ export type NexusESError = {
 };
 
 // TODO this needs to be broken into Input, Result, and Form components.
-const ElasticSearchQueryForm: React.FunctionComponent<{
+const ElasticSearchQueryForm: FC<{
   query: object;
   response?: ElasticSearchViewQueryResponse<any> | null;
   busy: boolean;
@@ -49,36 +49,45 @@ const ElasticSearchQueryForm: React.FunctionComponent<{
   onQueryChange,
   onChangePageSize,
 }): JSX.Element => {
-  const [initialQuery, setInitialQuery] = useState('');
+  const [_initialQuery, setInitialQuery] = useState('');
   const [valid, setValid] = useState(true);
-  const [value, setValue] = useState<string>();
+  // TODO Clean multiple states
+  const [value, _setValue] = useState<string>();
   const [pageSize, setPageSize] = useState<number>(size);
   const editor = useRef<codemirror.Editor>();
   const wrapper = useRef(null);
 
+  const [editorValue, setEditorValue] = useState(''); // New state to manage the editor content
+
   useEffect(() => {
-    // only on first render!
     const formattedInitialQuery = JSON.stringify(query, null, 2);
     setInitialQuery(formattedInitialQuery);
-  }, []);
-
-  const data =
-    response && response.hits.hits.map(result => result._source || []);
-  const total =
-    (response && response.hits.total && response.hits.total.value) || 0;
-  const totalPages = Math.ceil(total / size);
-  const current = Math.floor((totalPages / total) * from + 1);
+    setEditorValue(formattedInitialQuery); // Initialize the editor value with the formatted query
+  }, [query]); // Dependency on `query` to update initial value when the prop changes
 
   const handleChange = (_: any, __: any, value: string) => {
+    setEditorValue(value); // Update editor value directly
     try {
       JSON.parse(value);
-      setValue(value);
       setValid(true);
     } catch (error) {
       setValid(false);
     }
   };
 
+  useEffect(() => {
+    // only on first render!
+    const formattedInitialQuery = JSON.stringify(query, null, 2);
+    setInitialQuery(formattedInitialQuery);
+  }, []);
+
+  const data =
+    response && response.hits.hits.map(result => result._source || []);
+  const total =
+    (response && response.hits.total && response.hits.total.value) || 0;
+  const totalPages = Math.ceil(total / size);
+  const current = Math.floor((totalPages / total) * from + 1);
+
   const changePageSize = (_: number, size: number) => {
     setPageSize(size);
     onChangePageSize(size);
@@ -106,7 +115,7 @@ const ElasticSearchQueryForm: React.FunctionComponent<{
             </div>
           </div>
           <CodeMirror
-            value={initialQuery}
+            value={editorValue}
             options={{
               mode: { name: 'javascript', json: true },
               theme: 'base16-light',
@@ -115,12 +124,12 @@ const ElasticSearchQueryForm: React.FunctionComponent<{
             }}
             onChange={handleChange}
             editorDidMount={editorElement => {
-              (editor as React.MutableRefObject<
+              (editor as MutableRefObject<
                 codemirror.Editor
               >).current = editorElement;
             }}
             editorWillUnmount={() => {
-              const editorWrapper = (editor as React.MutableRefObject<
+              const editorWrapper = (editor as MutableRefObject<
                 CodeMirror.Editor
               >).current.getWrapperElement();
               if (editor) editorWrapper.remove();

src/subapps/admin/components/ViewForm/view-form.scss

@@ -6,9 +6,9 @@
     margin: 0 auto;
   }
   .code {
+    margin-bottom: $default-pad;
     max-height: 600;
     overflow: 'scroll';
-    margin-bottom: $default-pad;
   }
   .ant-card-body {
     overflow: scroll;

src/subapps/admin/containers/ElasticSearchQuery.tsx

@@ -1,14 +1,14 @@
-import { useState, FC } from 'react';
-import { useNexusContext } from '@bbp/react-nexus';
 import {
   DEFAULT_ELASTIC_SEARCH_VIEW_ID,
   ElasticSearchViewQueryResponse,
 } from '@bbp/nexus-sdk/es';
+import { useNexusContext } from '@bbp/react-nexus';
+import { FC, useState } from 'react';
 
+import { useQuery } from 'react-query';
 import ElasticSearchQueryForm, {
   NexusESError,
 } from '../components/ViewForm/ElasticSearchQueryForm';
-import { useQuery } from 'react-query';
 
 const DEFAULT_PAGE_SIZE = 5;
 const DEFAULT_QUERY = {