Update react

BlueBrain · May 28, 2024 · 8e3fb63 · 8e3fb63
2 parents c8f3ef3 + 7ac74af
commit 8e3fb63
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "query-string": "^8.1.0",
     "querystring": "^0.2.1",
     "rc-tween-one": "^2.7.3",
-    "react": "^18.2.0",
+    "react": "18.3",
     "react-beautiful-dnd": "^13.1.0",
     "react-codemirror2": "^7.2.1",
     "react-device-detect": "^2.2.3",

diff --git a/src/shared/components/EditTableForm.tsx b/src/shared/components/EditTableForm.tsx
@@ -11,7 +11,7 @@ import {
   Spin,
   Tooltip,
 } from 'antd';
-
+import codemirror from 'codemirror';
 import React from 'react';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import { useQuery } from 'react-query';
@@ -27,9 +27,8 @@ import {
   querySparql,
 } from '../hooks/useAccessDataForTable';
 import ColumnConfig from './ColumnConfig';
-import './EditTableForm.scss';
-import { isNil } from 'lodash';
 import { ErrorComponent } from './ErrorComponent';
+import { INDENT_UNIT } from './ResourceEditor/editorUtils';
 import 'codemirror/addon/fold/brace-fold';
 import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
@@ -39,6 +38,8 @@ import 'codemirror/mode/sparql/sparql';
 import 'codemirror/theme/base16-light.css';
 import 'codemirror/addon/display/placeholder';
 
+import './EditTableForm.scss';
+
 const DEFAULT_SPARQL_QUERY =
   'prefix nxv: <https://bluebrain.github.io/nexus/vocabulary/> \nSELECT DISTINCT ?self ?s WHERE { ?s nxv:self ?self } LIMIT 20';
 const DEFAULT_ES_QUERY = '{}';
@@ -94,6 +95,8 @@ const EditTableForm: React.FC<{
   busy,
   formName = 'Edit',
 }) => {
+  const editorRef = React.useRef<codemirror.Editor>();
+  const wrapperRef = React.useRef(null);
   // state
   const [name, setName] = React.useState<string | undefined>(table?.name);
   const [nameError, setNameError] = React.useState<boolean>(false);
@@ -517,10 +520,10 @@ const EditTableForm: React.FC<{
         if (table.projection['@id']) {
           setProjectionId(table.projection['@id']);
         } else {
-          /* 
-              when no projection id it means search all of the
-              specified projection type
-              */
+          /*
+                when no projection id it means search all of the
+                specified projection type
+                */
           setProjectionId(`All_${table.projection['@type']}`);
         }
       } else {
@@ -692,12 +695,31 @@ const EditTableForm: React.FC<{
                 theme: 'base16-light',
                 lineNumbers: true,
                 lineWrapping: true,
+                viewportMargin: Infinity,
+                foldGutter: true,
+                indentUnit: INDENT_UNIT,
+                autoRefresh: true,
                 placeholder: placeHolder,
               }}
               onBeforeChange={(editor, data, value) => {
                 setPreview(false);
                 handleQueryChange(value);
               }}
+              editorDidMount={editorElement => {
+                (editorRef as React.MutableRefObject<
+                  codemirror.Editor
+                >).current = editorElement;
+              }}
+              editorWillUnmount={() => {
+                (editorRef as React.MutableRefObject<CodeMirror.Editor>).current
+                  .getWrapperElement()
+                  ?.remove();
+                if (wrapperRef.current) {
+                  (wrapperRef.current as {
+                    hydrated: boolean;
+                  }).hydrated = false;
+                }
+              }}
             />
           </div>
         </div>

diff --git a/src/subapps/admin/components/ViewForm/ElasticSearchQueryInput.tsx b/src/subapps/admin/components/ViewForm/ElasticSearchQueryInput.tsx
@@ -4,20 +4,23 @@ import {
   CheckCircleOutlined,
   ExclamationCircleOutlined,
 } from '@ant-design/icons';
-import './ElasticSearchQueryInput.scss';
-
+import codemirror from 'codemirror';
 import { UnControlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/addon/display/placeholder';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/fold/foldcode';
 import 'codemirror/addon/fold/foldgutter';
-import 'codemirror/addon/fold/brace-fold';
+
 import 'codemirror/lib/codemirror.css';
+import './ElasticSearchQueryInput.scss';
 
 const ElasticSearchQueryInput: React.FunctionComponent<{
   value?: string;
   onChange?: (query: string) => void;
 }> = ({ value = '', onChange }) => {
+  const editorRef = React.useRef<codemirror.Editor>();
+  const wrapperRef = React.useRef(null);
+
   const [valid, setValid] = React.useState(true);
 
   const handleChange = (editor: any, data: any, value: string) => {
@@ -42,15 +45,32 @@ const ElasticSearchQueryInput: React.FunctionComponent<{
       </div>
       <div className="code">
         <CodeMirror
+          ref={wrapperRef}
           value={value}
           options={{
             mode: { name: 'javascript', json: true },
             theme: 'base16-light',
             lineNumbers: true,
+            lineWrapping: true,
+            foldGutter: true,
+            indentUnit: 4,
             viewportMargin: Infinity,
             placeholder: 'Enter a valid ElasticSearch query',
           }}
           onChange={handleChange}
+          editorDidMount={editorElement => {
+            (editorRef as React.MutableRefObject<
+              codemirror.Editor
+            >).current = editorElement;
+          }}
+          editorWillUnmount={() => {
+            (editorRef as React.MutableRefObject<CodeMirror.Editor>).current
+              .getWrapperElement()
+              ?.remove();
+            if (wrapperRef.current) {
+              (wrapperRef.current as { hydrated: boolean }).hydrated = false;
+            }
+          }}
         />
       </div>
     </div>

diff --git a/yarn.lock b/yarn.lock
@@ -10560,10 +10560,10 @@ react-zoom-pan-pinch@^2.1.3:
   resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.6.1.tgz#5719fdd9515dc1f379a23350cbf99edd540b1281"
   integrity sha512-4Cgdnn6OwN4DomY/E9NpAf0TyCtslEgwdYn96ZV/f5LKuw/FE3gcIBJiaKFmMGThDGV0yKN5mzO8noi34+UE4Q==
 
-react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@18.3:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"