fix: graphiql UI fix

client/components/admin-dev.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import GraphiQL from 'graphiql'
@@ -48,6 +49,8 @@ const fetcher = (qry, respType) => {
   })
 }
 
+let graphiQLInstance
+
 export default {
   data() {
     return {
@@ -68,15 +71,25 @@ export default {
     renderGraphiQL() {
       ReactDOM.render(
         React.createElement(GraphiQL, {
-          fetcher: qry => fetcher(qry, 'text'),
-          query: null,
+          ref(el) { graphiQLInstance = el },
+          async fetcher(qry) {
+            let resp = await fetcher(qry, 'text')
+            _.delay(() => {
+              graphiQLInstance.resultComponent.viewer.refresh()
+            }, 500)
+            return resp
+          },
+          query: '',
           response: null,
           variables: null,
           operationName: null,
           websocketConnectionParams: null
         }),
         document.getElementById('graphiql')
       )
+      graphiQLInstance.queryEditorComponent.editor.refresh()
+      graphiQLInstance.variableEditorComponent.editor.refresh()
+      graphiQLInstance.state.variableEditorOpen = true
     },
     renderVoyager() {
       ReactDOM.render(
@@ -94,7 +107,7 @@ export default {
 <style lang='scss'>
 
 #graphiql {
-  height: calc(100vh - 250px);
+  height: calc(100vh - 230px);
 
   .topBar {
     background-color: mc('grey', '200');

client/components/admin-groups.vue

@@ -10,7 +10,7 @@
             v-icon(left) add
             | New Group
           v-card
-            v-card-title.headline.grey--text.text--darken-2 New Group
+            .dialog-header.is-short New Group
             v-card-text
               v-text-field(v-model='newGroupName', label='Group Name', autofocus, counter='255')
             v-card-actions

client/components/admin-logging.vue

@@ -58,8 +58,6 @@
 <script>
 import _ from 'lodash'
 
-/* global CONSTANTS */
-
 export default {
   data() {
     return {
@@ -73,12 +71,12 @@ export default {
       return _.filter(this.services, 'isEnabled')
     }
   },
-  apollo: {
-    services: {
-      query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
-      update: (data) => data.authentication.providers
-    }
-  },
+  // apollo: {
+  //   services: {
+  //     query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
+  //     update: (data) => data.authentication.providers
+  //   }
+  // },
   methods: {
     async refresh() {
       await this.$apollo.queries.services.refetch()

client/scss/app.scss

@@ -7,7 +7,7 @@
 // @import "../libs/animate/animate";
 
 @import 'components/markdown-content';
-@import 'components/navigator';
+@import 'components/dialog';
 
 // @import '../libs/twemoji/twemoji-awesome';
 @import '../libs/prism/prism.css';

client/scss/components/_dialog.scss

@@ -0,0 +1,11 @@
+.dialog-header {
+  background-color: mc('blue', '700');
+  background: radial-gradient(ellipse at top, mc('blue', '500'), transparent),
+            radial-gradient(ellipse at bottom, mc('blue', '800'), transparent);
+  height: 60px;
+  color: #FFF;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  font-size: 1.2rem;
+}