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,8 +71,15 @@ export default {
     renderGraphiQL() {
       ReactDOM.render(
         React.createElement(GraphiQL, {
-          fetcher: qry => fetcher(qry, 'text'),
+          ref(el) { graphiQLInstance = el },
-          query: null,
+          async fetcher(qry) {
+            let resp = await fetcher(qry, 'text')
+            _.delay(() => {
+              graphiQLInstance.resultComponent.viewer.refresh()
+            }, 500)
+            return resp
+          },
+          query: '',
           response: null,
           variables: null,
           operationName: null,
@@ -77,6 +87,9 @@ export default {
         }),
         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: {
+  // apollo: {
-    services: {
+  //   services: {
-      query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
+  //     query: CONSTANTS.GRAPH.AUTHENTICATION.QUERY_PROVIDERS,
-      update: (data) => data.authentication.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;
+}

client/scss/components/navigator.scss

@@ -1,292 +0,0 @@
-.navigator {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 100;
-
-  &-bar {
-    display: flex;
-    justify-content: flex-start;
-    align-items: stretch;
-    background-color: rgba(mc('grey', '900'), .7);
-  }
-
-  &-fab {
-
-    &-button {
-      width: 50px;
-      height: 50px;
-      background-color: #FFF;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      transition: all .4s ease;
-
-      svg use {
-        transition: all .4s ease;
-      }
-
-      &:hover {
-        svg use {
-          color: mc('blue', '500');
-          fill: mc('blue', '500');
-        }
-      }
-    }
-  }
-
-  &-title {
-    background-image: linear-gradient(to bottom right, mc('blue', '500') 0%, mc('blue', '700') 50%, mc('blue', '900') 100%);
-    background-size: 200%;
-    background-repeat: no-repeat;
-    padding: 0 1rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: all .4s ease;
-    cursor: pointer;
-
-    &:hover {
-      background-position-y: -50px;
-    }
-
-    h1 {
-      font-size: 1.2rem;
-      color: #FFF;
-      font-weight: 500;
-    }
-  }
-
-  &-subtitle {
-    background-repeat: no-repeat;
-    background-position-x: -100vw;
-    color: #FFF;
-    flex: 1 1 auto;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0 1rem;
-    transition: background-position-x 1s ease;
-
-    &.is-error {
-      background-image: linear-gradient(to right, rgba(mc('red', '500'), 1), rgba(mc('red', '500'), 0));
-    }
-    &.is-warning {
-      background-image: linear-gradient(to right, rgba(mc('orange', '500'), 1), rgba(mc('orange', '500'), 0));
-    }
-    &.is-success {
-      background-image: linear-gradient(to right, rgba(mc('green', '500'), 1), rgba(mc('green', '500'), 0));
-    }
-    &.is-info {
-      background-image: linear-gradient(to right, rgba(mc('blue', '500'), 1), rgba(mc('blue', '500'), 0));
-    }
-
-    &.is-active {
-      background-position-x: 0;
-    }
-
-    svg {
-      margin-right: .5rem;
-      animation: flash 1s linear 1s;
-
-      &.navigator-subtitle-icon {
-        transition: all 1s ease;
-
-        &-enter-active, &-leave-active {
-          transform: scale(1);
-          width: 24px;
-          margin-right: .5rem;
-        }
-        &-enter, &-leave-to {
-          transform: scale(0);
-          width: 0;
-          margin-right: 0;
-        }
-      }
-
-      use {
-        color: #FFF;
-        fill: #FFF;
-        stroke: #FFF;
-        transition: all .4s ease;
-      }
-    }
-
-    h2 {
-      font-size: 1rem;
-      font-weight: 400;
-    }
-  }
-
-  &-action {
-    display: flex;
-    justify-content: flex-end;
-    align-items: stretch;
-    position: relative;
-
-    &-item {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50px;
-      cursor: pointer;
-      transition: all .4s ease;
-
-      svg use {
-        color: #FFF;
-        fill: #FFF;
-        transition: all .4s ease;
-      }
-
-      &:hover {
-        svg use {
-          color: mc('blue', '500');
-          fill: mc('blue', '500');
-        }
-      }
-
-      &.is-active {
-        background-color: #FFF;
-
-        svg use {
-          color: mc('grey', '500');
-          fill: mc('grey', '500');
-        }
-      }
-
-      &-dropdown {
-        position: absolute;
-        right: 0;
-        top: 100%;
-        width: 250px;
-        border-radius: 0 0 0 5px;
-        transition: all .4s ease;
-        transform-origin: top right;
-
-        &-enter-active, &-leave-active {
-          transform: scale(1);
-        }
-        &-enter, &-leave-to {
-          transform: scale(.1, 0);
-        }
-
-        li {
-          background-color: #FFF;
-          height: 50px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 0 .8rem 0 1rem;
-          
-          & + li {
-            border-top: 1px solid mc('grey', '100');
-          }
-
-          &:hover {
-            background-color: mc('grey', '100');
-          }
-          
-          label {
-            font-size: .8rem;
-            font-weight: 600;
-            color: mc('blue', '800');
-            text-transform: uppercase;
-          }
-
-          &:last-child {
-            border-radius: 0 0 0 5px;
-          }
-        }
-      }
-    }
-  }
-
-  &-sd {
-    width: 350px;
-    background-color: #FFF;
-    border-radius: 0 0 5px 0;
-    transition: all .4s ease;
-    transform-origin: top left;
-
-    &-enter-active, &-leave-active {
-      transform: scale(1);
-    }
-    &-enter, &-leave-to {
-      transform: scale(.1, 0);
-    }
-
-    &-actions {
-      background-color: mc('blue-grey', '50');
-      display: flex;
-
-      a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 50px;
-        width: 50px;
-        transition: all .4s ease;
-
-        &.is-active {
-          background-color: #FFF;
-        }
-
-        &:hover {
-          background-color: #FFF;
-        }
-      }
-    }
-
-    &-search {
-      position: relative;
-
-      input {
-        display: block;
-        width: 100%;
-        padding: 0 3rem 0 1rem;
-        height: 40px;
-        border: 0;
-        font-size: .9rem;
-        color: mc('grey', '700');
-        position: relative;
-
-        &:focus {
-          outline: none;
-          border: 0;
-        }
-      }
-
-      &::after {
-        content: " ";
-        @include spinner(mc('blue', '200'),0.5s,18px);
-        position: absolute;
-        display: block;
-        top: 11px;
-        right: 1rem;
-      }
-    }
-
-    &-footer {
-      background-color: mc('blue-grey', '100');
-      border-top: 5px solid mc('blue-grey', '200');
-      border-radius: 0 0 5px 0;
-      display: flex;
-      justify-content: center;
-
-      a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 50px;
-        width: 50px;
-        transition: all .4s ease;
-
-        &:hover {
-          background-color: mc('blue-grey', '200');
-        }
-      }
-    }
-  }
-}