feat: add support for npm 7 and Node 16, migrate to graphiql (#1807)

Author: dblythy

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ on:
     branches:
       - '**'
 env:
-  NODE_VERSION: 16.9.0
+  NODE_VERSION: 16.10.0
 jobs:
   check-ci:
     name: CI Self-Check
@@ -123,9 +123,8 @@ jobs:
             NODE_VERSION: 12.22.6
           - name: Node 14
             NODE_VERSION: 14.17.6
-          # Enable the following lines when Parse Dashboard reached Node 16 compatibility
-          # - name: Node 16
-          #   NODE_VERSION: 16.9.0
+          - name: Node 16
+            NODE_VERSION: 16.10.0
       fail-fast: false
     name: ${{ matrix.name }}
     timeout-minutes: 15

package-lock.json

@@ -38,16 +38,15 @@
     "@babel/runtime": "7.15.4",
     "bcryptjs": "2.3.0",
     "body-parser": "1.19.0",
-    "codemirror-graphql": "github:timsuchanek/codemirror-graphql#details-fix",
     "commander": "6.2.1",
     "connect-flash": "0.1.1",
     "cookie-session": "2.0.0-beta.3",
     "copy-to-clipboard": "3.2.0",
     "create-react-class": "15.7.0",
     "csurf": "1.11.0",
     "express": "4.17.1",
-    "graphql": "14.6.0",
-    "graphql-playground-react": "1.7.20",
+    "graphiql": "1.4.2",
+    "graphql": "15.4.0",
     "history": "4.10.1",
     "immutable": "4.0.0-rc.9",
     "immutable-devtools": "0.1.5",
@@ -56,7 +55,7 @@
     "json-file-plus": "3.2.0",
     "otpauth": "7.0.5",
     "package-json": "6.5.0",
-    "parse": "3.3.0",
+    "parse": "3.3.1",
     "passport": "0.4.1",
     "passport-local": "1.0.0",
     "prismjs": "1.25.0",
@@ -75,7 +74,8 @@
     "react-router": "5.2.1",
     "react-router-dom": "5.2.1",
     "regenerator-runtime": "0.13.8",
-    "semver": "7.3.4"
+    "semver": "7.3.4",
+    "typescript": "4.4.3"
   },
   "devDependencies": {
     "@actions/core": "1.2.6",
@@ -106,19 +106,19 @@
     "jest": "24.8.0",
     "madge": "5.0.1",
     "marked": "0.8.2",
-    "node-sass": "5.0.0",
-    "null-loader": "3.0.0",
+    "node-sass": "6.0.0",
+    "null-loader": "4.0.1",
     "path-to-regexp": "3.2.0",
     "puppeteer": "3.0.0",
     "react-test-renderer": "16.13.1",
     "request": "2.88.2",
     "request-promise": "4.2.5",
-    "sass-loader": "10.1.1",
+    "sass-loader": "11.1.1",
     "semantic-release": "17.4.6",
     "style-loader": "1.1.2",
     "svg-prep": "1.0.4",
-    "webpack": "4.42.1",
-    "webpack-cli": "3.3.10",
+    "webpack": "5.53.0",
+    "webpack-cli": "4.0.0",
     "yaml": "1.10.0"
   },
   "scripts": {
@@ -141,7 +141,7 @@
     "parse-dashboard": "./bin/parse-dashboard"
   },
   "engines": {
-    "node": ">=12.0.0 <16.0.0"
+    "node": ">=12.0.0"
   },
   "main": "Parse-Dashboard/app.js",
   "jest": {

package.json

@@ -26,18 +26,6 @@
   height: calc(100vh - 96px);
   margin-top: 96px;
   overflow: hidden;
-
-  // Workaround to override graphql-playground-react
-  // animations and query editor height
-  & > div:not(.empty) > div {
-    opacity: 1;
-    transform: unset;
-    animation: unset;
-
-    & > div > :nth-child(2){
-      height: calc(100vh - 153px);
-    }
-  }
 }
 
 .empty {

src/dashboard/Data/ApiConsole/ApiConsole.scss

@@ -8,8 +8,7 @@
 import ParseApp      from 'lib/ParseApp';
 import PropTypes     from 'lib/PropTypes';
 import React, { Component } from 'react';
-import { Provider } from 'react-redux'
-import { Playground, store } from 'graphql-playground-react';
+import GraphiQL from 'graphiql';
 import EmptyState from 'components/EmptyState/EmptyState.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
 import styles from 'dashboard/Data/ApiConsole/ApiConsole.scss';
@@ -38,9 +37,23 @@ export default class GraphQLConsole extends Component {
         headers['X-Parse-Client-Key'] = clientKey
       }
       content = (
-        <Provider store={store}>
-          <Playground endpoint={graphQLServerURL} headers={headers} />
-        </Provider>
+        <GraphiQL
+          fetcher={async graphQLParams => {
+            const data = await fetch(
+              graphQLServerURL,
+            {
+              method: 'POST',
+              headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                ...headers
+              },
+              body: JSON.stringify(graphQLParams),
+            },
+          );
+          return data.json().catch(() => data.text());
+          }}
+        />
       );
     }
 

src/dashboard/Data/ApiConsole/GraphQLConsole.react.js

@@ -14,7 +14,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 require('stylesheets/fonts.scss');
-require('graphql-playground-react/build/static/css/index.css')
+require('graphiql/graphiql.min.css')
 installDevTools(Immutable);
 
 var path = window.PARSE_DASHBOARD_PATH || '/';

src/dashboard/index.js

@@ -35,7 +35,7 @@ module.exports = {
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
-          query: {
+          options: {
             plugins: [['@babel/plugin-proposal-decorators', { 'legacy': true }], '@babel/transform-regenerator', '@babel/transform-runtime'],
             presets: ['@babel/preset-react', '@babel/preset-env']
           },

webpack/base.config.js

@@ -23,7 +23,7 @@ function SvgPrepPlugin(options) {
 }
 
 SvgPrepPlugin.prototype.apply = function(compiler) {
-  compiler.plugin('emit', (compilation, callback) => {
+  compiler.hooks.emit.tapAsync('SvgPrepPlugin', (compilation, callback) => {
     if (!this.options.source) {
       return callback();
     }