chore(data-query-playground): new code editor to fix cursor [LIBS-177] (

#1380) * chore(deps): update yarn.lock * fix(query-playground): update dhis2 deps * fix: use imported font for consistency across platforms * fix(query-playground): use codemirror to fix cursor issue * chore: remove react-ace * fix: font and tab size * fix: scrolling for long codemirror blocks * fix(deps): downgrade @dhis2/cli-app-scripts to work with Node 14 * fix: try lower cli-app-scripts and UI version to fix Node version error
dhis2 · Apr 16, 2024 · 5d58f2a · 5d58f2a
1 parent d71558e
commit 5d58f2a
Show file tree

Hide file tree

Showing 12 changed files with 7,345 additions and 5,107 deletions.
diff --git a/examples/cra/yarn.lock b/examples/cra/yarn.lock
@@ -1054,32 +1054,32 @@
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
 "@dhis2/app-runtime@file:../../runtime":
-  version "3.10.0-alpha.2"
+  version "3.10.4"
   dependencies:
-    "@dhis2/app-service-alerts" "3.10.0-alpha.2"
-    "@dhis2/app-service-config" "3.10.0-alpha.2"
-    "@dhis2/app-service-data" "3.10.0-alpha.2"
-    "@dhis2/app-service-offline" "3.10.0-alpha.2"
-    "@dhis2/app-service-plugin" "3.10.0-alpha.2"
+    "@dhis2/app-service-alerts" "3.10.4"
+    "@dhis2/app-service-config" "3.10.4"
+    "@dhis2/app-service-data" "3.10.4"
+    "@dhis2/app-service-offline" "3.10.4"
+    "@dhis2/app-service-plugin" "3.10.4"
 
-"@dhis2/app-service-alerts@3.10.0-alpha.2", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "3.10.0-alpha.2"
+"@dhis2/app-service-alerts@3.10.4", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "3.10.4"
 
-"@dhis2/app-service-config@3.10.0-alpha.2", "@dhis2/app-service-config@file:../../services/config":
-  version "3.10.0-alpha.2"
+"@dhis2/app-service-config@3.10.4", "@dhis2/app-service-config@file:../../services/config":
+  version "3.10.4"
 
-"@dhis2/app-service-data@3.10.0-alpha.2", "@dhis2/app-service-data@file:../../services/data":
-  version "3.10.0-alpha.2"
+"@dhis2/app-service-data@3.10.4", "@dhis2/app-service-data@file:../../services/data":
+  version "3.10.4"
   dependencies:
     react-query "^3.13.11"
 
-"@dhis2/app-service-offline@3.10.0-alpha.2", "@dhis2/app-service-offline@file:../../services/offline":
-  version "3.10.0-alpha.2"
+"@dhis2/app-service-offline@3.10.4", "@dhis2/app-service-offline@file:../../services/offline":
+  version "3.10.4"
   dependencies:
     lodash "^4.17.21"
 
-"@dhis2/app-service-plugin@3.10.0-alpha.2", "@dhis2/app-service-plugin@file:../../services/plugin":
-  version "3.10.0-alpha.2"
+"@dhis2/app-service-plugin@3.10.4", "@dhis2/app-service-plugin@file:../../services/plugin":
+  version "3.10.4"
   dependencies:
     post-robot "^10.0.46"
 

diff --git a/examples/query-playground/package.json b/examples/query-playground/package.json
@@ -11,18 +11,20 @@
         "test": "d2-app-scripts test"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^5.2.0"
+        "@dhis2/cli-app-scripts": "<7.6.0"
     },
     "dependencies": {
+        "@codemirror/lang-json": "^6.0.1",
         "@dhis2/app-runtime": "*",
-        "@dhis2/ui": "^5.5.3",
-        "brace": "^0.11.1",
+        "@dhis2/ui": "^6.25.3",
+        "@uiw/codemirror-theme-github": "^4.21.25",
+        "@uiw/codemirror-theme-monokai": "^4.21.25",
+        "@uiw/react-codemirror": "^4.21.25",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2",
         "react": "^16.9.0",
-        "react-ace": "^7.0.4",
         "react-dom": "^16.9.0",
-        "styled-jsx": "^3.2.2"
+        "styled-jsx": "^4"
     },
     "resolutions": {
         "@dhis2/app-runtime": "file:../../runtime",

diff --git a/examples/query-playground/src/components/Editor.css b/examples/query-playground/src/components/Editor.css
diff --git a/examples/query-playground/src/components/Editor.js b/examples/query-playground/src/components/Editor.js
@@ -1,20 +1,22 @@
+import { json } from '@codemirror/lang-json'
+import { githubLight } from '@uiw/codemirror-theme-github'
+import { monokai } from '@uiw/codemirror-theme-monokai'
+import CodeMirror from '@uiw/react-codemirror'
+import PropTypes from 'prop-types'
 import React from 'react'
-import AceEditor from 'react-ace'
+import styles from './Editor.module.css'
 
-import 'brace/mode/json'
-import 'brace/theme/monokai'
-import 'brace/theme/github'
-import './Editor.css'
-
-export const Editor = (props) => (
-    <AceEditor
-        fontSize={14}
-        mode="json"
-        theme="github"
-        editorProps={{ $blockScrolling: true }}
-        showPrintMargin={false}
+export const Editor = ({ theme, ...editorProps }) => (
+    <CodeMirror
+        className={styles.editor}
+        extensions={[json()]}
+        theme={theme === 'light' ? githubLight : monokai}
+        basicSetup={{ tabSize: 4 }}
         width="100%"
         height="100%"
-        {...props}
+        {...editorProps}
     />
 )
+Editor.propTypes = {
+    theme: PropTypes.oneOf(['light', 'dark']),
+}
diff --git a/examples/query-playground/src/components/Editor.module.css b/examples/query-playground/src/components/Editor.module.css
@@ -0,0 +1,9 @@
+.editor {
+    height: 100%;
+    font-size: 13px;
+}
+
+/* Need this selector to override the blanket rule `* { font-family: Roboto; }` */
+.editor * {
+    font-family: inherit;
+}
diff --git a/examples/query-playground/src/components/QueryEditor.js b/examples/query-playground/src/components/QueryEditor.js
@@ -51,22 +51,22 @@ export const QueryEditor = ({
         execute({ query: parsed, type }).then(setResult)
     }
 
-    const onKeyPress = (event) => {
+    const onKeyDown = (event) => {
         if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
             onExecute()
             event.stopPropagation()
         }
     }
 
     return (
-        <div className={styles.editor} onKeyPress={onKeyPress}>
+        <div className={styles.editor} onKeyDown={onKeyDown}>
             <Editor
                 value={currentQuery}
-                theme="monokai"
+                theme="dark"
                 onChange={setQuery}
                 name="editor"
                 placeholder={i18n.t('Enter a query here...')}
-                focus={true}
+                autoFocus={true}
             />
 
             {error && <span className={styles.error}>{error}</span>}

diff --git a/examples/query-playground/src/components/QueryResults.js b/examples/query-playground/src/components/QueryResults.js
@@ -9,7 +9,7 @@ export const QueryResults = ({ result }) => {
         <div className={styles.results}>
             <Editor
                 value={result}
-                theme="github"
+                theme="light"
                 readOnly={true}
                 name="results"
                 placeholder={i18n.t('Results will appear here...')}

diff --git a/examples/query-playground/src/components/QueryTab.js b/examples/query-playground/src/components/QueryTab.js
@@ -1,4 +1,4 @@
-import { PropTypes } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { QueryEditor } from './QueryEditor'
 import { QueryResults } from './QueryResults'

diff --git a/examples/query-playground/src/components/QueryTab.module.css b/examples/query-playground/src/components/QueryTab.module.css
@@ -29,6 +29,13 @@
     flex-grow: 1;
 }
 
+/*
+max-height fixes sizing and scrolling for CodeMirror --
+it's a bit inelegant with a hardcoded constant, but figuring out a smart
+dynamic size was getting complicated with many nested elements in the DOM,
+so this saves a bit of a refactor
+*/
 .results {
     width: 50%;
+    max-height: calc(100vh - 98px);
 }
diff --git a/examples/query-playground/src/components/TabControls.js b/examples/query-playground/src/components/TabControls.js
@@ -1,5 +1,4 @@
 import i18n from '@dhis2/d2-i18n'
-import { PropTypes } from '@dhis2/prop-types'
 import {
     Button,
     ButtonStrip,
@@ -11,6 +10,7 @@ import {
     TabBar,
     Tab,
 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import styles from './TabControls.module.css'