feat: add graphiql to admin-dev

client/components/admin-dev.vue

 <template lang='pug'>
-  v-container(fluid, fill-height)
-    v-layout(row wrap)
-      v-flex(xs12)
+  v-card(flat)
+    v-card(color='grey lighten-5')
+      .pa-3.pt-4
         .headline.primary--text Developer Tools
         .subheading.grey--text ¯\_(ツ)_/¯
+      v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
+        v-tab Graph API Playground
+        v-tab Graph API Map
+
+        v-tab-item(:transition='false', :reverse-transition='false')
+          #graphiql
 </template>
 
 <script>
+import React from 'react'
+import ReactDOM from 'react-dom'
+import GraphiQL from 'graphiql'
+
 export default {
   data() {
     return {}
+  },
+  mounted() {
+    this.renderGraphiQL()
+  },
+  methods: {
+    renderGraphiQL() {
+      ReactDOM.render(
+        React.createElement(GraphiQL, {
+          fetcher: graphQLParams => {
+            return fetch('/graphql', {
+              method: 'post',
+              headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify(graphQLParams),
+              credentials: 'include'
+            }).then(function (response) {
+              return response.text()
+            }).then(function (responseBody) {
+              try {
+                return JSON.parse(responseBody)
+              } catch (error) {
+                return responseBody
+              }
+            })
+          },
+          query: null,
+          response: null,
+          variables: null,
+          operationName: null,
+          websocketConnectionParams: null
+        }),
+        document.getElementById('graphiql')
+      )
+    }
   }
 }
 </script>
 
 <style lang='scss'>
 
+#graphiql {
+  height: calc(100vh - 250px);
+
+  .topBar {
+    background-color: mc('grey', '200');
+    background-image: none;
+    padding: 1.5rem 0;
+
+    > .title {
+      display: none;
+    }
+  }
+
+  .toolbar {
+    background-color: initial;
+    box-shadow: initial;
+  }
+
+  .cm-s-wikijs-dark.CodeMirror {
+    background: darken(mc('grey','900'), 3%);
+    color: #e0e0e0;
+  }
+  .cm-s-wikijs-dark div.CodeMirror-selected {
+    background: mc('blue','800');
+  }
+  .cm-s-wikijs-dark .cm-matchhighlight {
+    background: mc('blue','800');
+  }
+  .cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
+    background: mc('red', '500');
+  }
+  .cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
+    background: mc('red', '500');
+  }
+  .cm-s-wikijs-dark .CodeMirror-gutters {
+    background: darken(mc('grey','900'), 6%);
+    border-right: 1px solid mc('grey','900');
+  }
+  .cm-s-wikijs-dark .CodeMirror-guttermarker {
+    color: #ac4142;
+  }
+  .cm-s-wikijs-dark .CodeMirror-guttermarker-subtle {
+    color: #505050;
+  }
+  .cm-s-wikijs-dark .CodeMirror-linenumber {
+    color: mc('grey','800');
+  }
+  .cm-s-wikijs-dark .CodeMirror-cursor {
+    border-left: 1px solid #b0b0b0;
+  }
+  .cm-s-wikijs-dark span.cm-comment {
+    color: mc('orange','800');
+  }
+  .cm-s-wikijs-dark span.cm-atom {
+    color: #aa759f;
+  }
+  .cm-s-wikijs-dark span.cm-number {
+    color: #aa759f;
+  }
+  .cm-s-wikijs-dark span.cm-property, .cm-s-wikijs-dark span.cm-attribute {
+    color: #90a959;
+  }
+  .cm-s-wikijs-dark span.cm-keyword {
+    color: #ac4142;
+  }
+  .cm-s-wikijs-dark span.cm-string {
+    color: #f4bf75;
+  }
+  .cm-s-wikijs-dark span.cm-variable {
+    color: #90a959;
+  }
+  .cm-s-wikijs-dark span.cm-variable-2 {
+    color: #6a9fb5;
+  }
+  .cm-s-wikijs-dark span.cm-def {
+    color: #d28445;
+  }
+  .cm-s-wikijs-dark span.cm-bracket {
+    color: #e0e0e0;
+  }
+  .cm-s-wikijs-dark span.cm-tag {
+    color: #ac4142;
+  }
+  .cm-s-wikijs-dark span.cm-link {
+    color: #aa759f;
+  }
+  .cm-s-wikijs-dark span.cm-error {
+    background: #ac4142;
+    color: #b0b0b0;
+  }
+  .cm-s-wikijs-dark .CodeMirror-activeline-background {
+    background: mc('grey','900');
+  }
+  .cm-s-wikijs-dark .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: white !important;
+  }
+}
 </style>

client/components/admin.vue

@@ -91,7 +91,7 @@ const router = new VueRouter({
     { path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin-api.vue') },
     { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin-system.vue') },
     { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin-utilities.vue') },
-    { path: '/dev', component: () => import(/* webpackChunkName: "admin" */ './admin-dev.vue') }
+    { path: '/dev', component: () => import(/* webpackChunkName: "admin-dev" */ './admin-dev.vue') }
   ]
 })
 

client/scss/app.scss

@@ -14,7 +14,9 @@
 
 // @import '../libs/twemoji/twemoji-awesome';
 @import '../libs/prism/prism.css';
-@import 'node_modules/diff2html/dist/diff2html.min';
+// @import 'node_modules/diff2html/dist/diff2html.min';
+
+@import 'node_modules/graphiql/graphiql';
 
 @import 'pages/welcome';
 

dev/webpack/webpack.common.js

@@ -209,6 +209,10 @@ module.exports = {
             loader: 'raw-loader'
           }
         ]
+      },
+      {
+        test: /\.flow$/,
+        loader: 'ignore-loader'
       }
     ]
   },

package.json

@@ -172,9 +172,11 @@
     "eslint-plugin-vue": "4.3.0",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.11",
+    "graphiql": "0.11.11",
     "graphql-tag": "^2.8.0",
     "hammerjs": "2.0.8",
     "i18next-xhr-backend": "1.5.1",
+    "ignore-loader": "0.1.2",
     "jest": "22.4.2",
     "jest-junit": "3.6.0",
     "js-cookie": "2.2.0",
@@ -189,6 +191,8 @@
     "postcss-selector-parser": "3.1.1",
     "pug-lint": "2.5.0",
     "raw-loader": "0.5.1",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
     "sass-loader": "6.0.7",
     "sass-resources-loader": "1.3.3",
     "simple-progress-webpack-plugin": "1.1.2",