Merge pull request #1402 from dhis2/libs-741-fix-dq-playground

chore: fix data-query playground build (LIBS-741)

examples/query-playground/d2.config.js

@@ -6,7 +6,7 @@ const config = {
     minDHIS2Version: '2.32',
 
     entryPoints: {
-        app: './src/App',
+        app: './src/App.jsx',
     },
 }
 

examples/query-playground/package.json

@@ -1,6 +1,6 @@
 {
     "name": "query-playground",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "description": "",
     "license": "BSD-3-Clause",
     "private": true,
@@ -11,19 +11,17 @@
         "test": "d2-app-scripts test"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "<7.6.0"
+        "@dhis2/cli-app-scripts": "^12.0.0"
     },
     "dependencies": {
         "@codemirror/lang-json": "^6.0.1",
         "@dhis2/app-runtime": "*",
-        "@dhis2/ui": "^6.25.3",
+        "@dhis2/ui": "^10.1.10",
         "@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-dom": "^16.9.0",
         "styled-jsx": "^4"
     },
     "resolutions": {

examples/query-playground/src/App.js → examples/query-playground/src/App.jsx

@@ -1,6 +1,6 @@
 import { CssVariables } from '@dhis2/ui'
 import React from 'react'
-import { QueryRepl } from './QueryRepl'
+import { QueryRepl } from './QueryRepl.jsx'
 
 export default function App() {
     return (

examples/query-playground/src/QueryRepl.js → examples/query-playground/src/QueryRepl.jsx

@@ -1,9 +1,9 @@
 import cx from 'classnames'
 import React from 'react'
-import { GlobalLoading } from './components/GlobalLoading'
-import { QueryTab } from './components/QueryTab'
-import { ServerDetails } from './components/ServerDetails'
-import { TabControls } from './components/TabControls'
+import { GlobalLoading } from './components/GlobalLoading.jsx'
+import { QueryTab } from './components/QueryTab.jsx'
+import { ServerDetails } from './components/ServerDetails.jsx'
+import { TabControls } from './components/TabControls.jsx'
 import { useExecuteQuery } from './hooks/useExecuteQuery'
 import { useTabs } from './hooks/useTabs'
 import styles from './QueryRepl.module.css'

examples/query-playground/src/components/QueryEditor.js → examples/query-playground/src/components/QueryEditor.jsx

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, Radio } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { Editor } from './Editor'
+import { Editor } from './Editor.jsx'
 import styles from './QueryEditor.module.css'
 
 const defaultQuery = {

examples/query-playground/src/components/QueryResults.js → examples/query-playground/src/components/QueryResults.jsx

@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Editor } from './Editor'
+import { Editor } from './Editor.jsx'
 import styles from './QueryResults.module.css'
 
 export const QueryResults = ({ result }) => {

examples/query-playground/src/components/QueryTab.js → examples/query-playground/src/components/QueryTab.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { QueryEditor } from './QueryEditor'
-import { QueryResults } from './QueryResults'
+import { QueryEditor } from './QueryEditor.jsx'
+import { QueryResults } from './QueryResults.jsx'
 import styles from './QueryTab.module.css'
 
 export const QueryTab = ({