Merge pull request #136 from terminusdb/fix_graphiql

Fix graphiql interface

Author: KittyJose

packages/tdb-dashboard/src/App.css

@@ -721,27 +721,41 @@ input {
 .mandatory-icon {
   font-size: 10px;
 }
+/* to be review */
+.model-builder-code-mirror {
+  height: auto !important;
+}
 
+.model-builder-code-mirror .CodeMirror{
+  min-height: 400px !important;
+}
 
-.model-builder-code-mirror {
+.model-builder-code-mirror .CodeMirror-scroll {
+  min-height: 400px !important;
+}
+
+.model-builder-code-mirror > .qp-CodeMirror {
   height: auto !important;
+  min-height: 400px !important;
 }
 
-.CodeMirror {
-  min-height: 400px !important;/*150px !important;*/
+
+
+
+.editor-pallet .CodeMirror {
+  min-height: 400px !important;
   height: auto !important;
 }
 
-.CodeMirror-scroll {
+.editor-pallet .CodeMirror-scroll {
   min-height: 400px !important;
 }
 
 pre.CodeMirror-line  > span > span.cm-string {
   word-break: break-all !important;
 }
 
-
-.qp-CodeMirror {
+.editor-pallet > .qp-CodeMirror {
   height: auto !important;
   min-height: 400px !important;
 }
@@ -1021,8 +1035,29 @@ pre.CodeMirror-line  > span > span.cm-string {
     max-width: 200px;
 }
 
+.graphiql-container .graphiql-chevron-icon{
+  color:white;
+}
+
+button.graphiql-tab-add>svg 
+{
+  color:white;
+}
+
+.graphiql-container .graphiql-logo .graphiql-logo-link {
+  color:white;
+}
+
 .mainGraphIql{
-  height : calc(100% - 60px);
+  height : calc(100vh - 80px);
+}
+
+.mainGraphIqlCR{
+  height : calc(100vh - 150px);
+}
+
+.graphiql-session{
+  height : 100%;
 }
 
 .graphiql-container{
@@ -1033,10 +1068,22 @@ pre.CodeMirror-line  > span > span.cm-string {
   color:white !important;
 }
 
-
 .graphiql-container .graphiql-editors {
   background-color: transparent;
 }
+
+.graphiql-editor >.CodeMirror{
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.result-window >.CodeMirror{
+  height: 100% !important;
+  position: absolute;
+  width: 100%;
+}
+
 #json_type_field-warning-box svg {
   height: 15px;
   width: 15px;
@@ -1108,9 +1155,7 @@ pre.CodeMirror-line  > span > span.cm-string {
 .rule_group{
   background-color: white;
 }
-.result-window .CodeMirror{
-    height: 100%;
-}
+
 .MuiButton-text{
   color: rgb(0, 188, 140)!important;
   margin-right: 20px;
@@ -1170,11 +1215,6 @@ pre.CodeMirror-line  > span > span.cm-string {
   color: #3450DC;
 }
 
-/*enable graph ql response to over flow*/
-.graphiql-response {
-  overflow: auto !important;
-}
-
 #profile_menu >.dropdown-menu[data-bs-popper] {
   top: 100%;
   right: 0;

packages/tdb-dashboard/src/index.html

@@ -52,13 +52,9 @@
         color: #fff;
         background-color: #f50057;
       }
-      
       .rule_group{
         background-color: white;
       }
-      .result-window .CodeMirror{
-          height: 100%;
-      }
     </style>
      </body>
 </html>

packages/tdb-dashboard/src/init-woql-client.js

@@ -11,6 +11,7 @@ import { formatErrorMessage } from './hooks/hookUtils'
 import { createApolloClient } from './routing/ApolloClientConfig'
 import {sortAlphabetically} from "./components/utils"
 import {getChangesUrl} from "./hooks/hookUtils"
+import {cleanGraphiqlCache} from "./pages/utils"
 
 export const WOQLContext = React.createContext()
 export const WOQLClientObj = () => useContext(WOQLContext) 
@@ -235,6 +236,8 @@ export const WOQLClientProvider = ({children, params}) => {
             setHead('main',{commit:false,time:false})
 
             if(dbName){
+                //clear graphiql interface local storage
+                cleanGraphiqlCache()
                 // check if there is a change request related
                 const {TERMINUSCMS_CR , TERMINUSCMS_CR_ID} = changeRequestName(client)
 

packages/tdb-dashboard/src/pages/GraphIqlEditor.js

@@ -1,13 +1,13 @@
-import React from "react";
+import React, {useEffect} from "react";
 import { createGraphiQLFetcher } from "@graphiql/toolkit";
 import { GraphiQL } from "graphiql";
 //import {Container} from "react-bootstrap"
 import { Layout } from "./Layout";
 import {WOQLClientObj} from '../init-woql-client'
 //import "./style.css"
 
-export function GraphIqlEditor() {
-  const {woqlClient} = WOQLClientObj() 
+export function GraphIqlEditor({}) {
+  const {woqlClient,currentChangeRequest} = WOQLClientObj() 
   if(!woqlClient) return 
   const client = woqlClient.copy()
   const url = client.connectionConfig.branchBase("graphql")
@@ -20,14 +20,15 @@ export function GraphIqlEditor() {
         }
   });
 
+ const layoutClass = currentChangeRequest ? "container-fluid mainGraphIqlCR" :  "container-fluid mainGraphIql"
+  
   return (
-    <Layout mainClassName="container-fluid mainGraphIql" showLeftSideBar={false}>
-     
+    <Layout mainClassName={layoutClass} showLeftSideBar={false}>
         <GraphiQL 
           editorTheme="shadowfox"
           fetcher={fetcher}
+        
         />
-     
     </Layout>
   );
 }

packages/tdb-dashboard/src/pages/utils.js

@@ -32,3 +32,22 @@ export const timeConverter = (UNIX_timestamp) => {
     return time
 }
 
+export  const cleanGraphiqlCache = () =>{
+    const localStorageArr = 
+    ['graphiql:docExplorerFlex',
+    'graphiql:editorFlex',
+    "graphiql:operationName",
+    "graphiql:queries",
+    "graphiql:query",
+    "graphiql:tabState",
+    "graphiql:variables",
+    "graphiql:secondaryEditorFlex"] 
+
+    localStorageArr.forEach(item=>{
+        localStorage.removeItem(item)
+    })
+  }
+  
+  
+ 
+

packages/tdb-documents-ui/src/utils.js

@@ -701,6 +701,7 @@ export function getLinkedDocumentClassName (frame, item) {
  */
 export function getRowHeight(data) {
 	if(Array.isArray(data)) return 1
+	if(typeof data !== "string") return 1
     return data.split(/\r\n|\r|\n/).length
 }