Merge pull request open-source-labs#7 from oslabs-beta/jonah/ext-styling

Add schema display and styling fixes to dev tool

quell-extension/dist/manifest.json

@@ -1 +1 @@
-{"description":"Developer tool for the Quell JavaScript library: https://quell.dev","version":"1.0","manifest_version":3,"name":"Quell Developer Tool","homepage_url":"https://quell.dev","author":"Chang Cai, Robert Howton, Joshua Jordan, Angelo Chengcuenca, Emily Hoang, Keely Timms, Yusuf Bhaiyat","action":{"default_icon":{"16":"./assets/icon16.png","48":"./assets/icon48.png","128":"./assets/icon128.png"},"default_title":"Quell Developer Tool"},"devtools_page":"devtools.html","background":{"service_worker":"background.bundle.js"},"icons":{"16":"./assets/icon16.png","48":"./assets/icon48.png","128":"./assets/icon128.png"}}
+{"description":"Developer tool for the Quell JavaScript library: https://quell.dev","version":"2.0","manifest_version":3,"name":"Quell Developer Tool","permissions":["contextMenus"],"homepage_url":"https://quell.dev","author":"Michael Lav, Lenny Yambao, Jonah Weinbaum, Justin Hua, Chang Cai, Robert Howton, Joshua Jordan, Angelo Chengcuenca, Emily Hoang, Keely Timms, Yusuf Bhaiyat","action":{"default_icon":{"16":"./assets/icon16.png","48":"./assets/icon48.png","128":"./assets/icon128.png"},"default_title":"Quell Developer Tool"},"devtools_page":"devtools.html","background":{"service_worker":"background.bundle.js","type":"module"},"icons":{"16":"./assets/icon16.png","48":"./assets/icon48.png","128":"./assets/icon128.png"},"contextMenus":{"id":"quellMenu","title":"Quell","contexts":["page"]}}

quell-extension/src/manifest.json

@@ -2,9 +2,12 @@
   "manifest_version": 3,
   "name": "Quell Developer Tool",
   "description": "Developer tool for the Quell JavaScript library: https://quell.dev",
-  "version": "1.0",
+  "version": "2.0",
+  "permissions": [
+    "contextMenus"
+  ],
   "homepage_url": "https://quell.dev",
-  "author": "Chang Cai, Robert Howton, Joshua Jordan, Angelo Chengcuenca, Emily Hoang, Keely Timms, Yusuf Bhaiyat",
+  "author": "Michael Lav, Lenny Yambao, Jonah Weinbaum, Justin Hua, Chang Cai, Robert Howton, Joshua Jordan, Angelo Chengcuenca, Emily Hoang, Keely Timms, Yusuf Bhaiyat",
   "action": {
     "default_icon": {
       "16": "./assets/icon16.png",
@@ -21,5 +24,14 @@
     "16": "./assets/icon16.png",
     "48": "./assets/icon48.png",
     "128": "./assets/icon128.png"
+  },
+  "contextMenus": {
+    "id": "quellMenu",
+    "title": "Quell",
+    "contexts": ["page"]
+  },
+  "background": {
+    "service_worker": "background.bundle.js",
+    "type": "module"
   }
 }

quell-extension/src/pages/Panel/App.tsx

@@ -89,8 +89,9 @@ const App = () => {
       },
       body: JSON.stringify({
         query: introspectionQuery,
-        operationName: "IntrospectionQuery",
-        variables: null,
+        costOptions: { maxDepth: 15, maxCost: 6000, ipRate: 22}
+        // operationName: "IntrospectionQuery",
+        // variables: null,
       }),
     })
       .then((response) => response.json())

quell-extension/src/pages/Panel/Components/ClientTab.tsx

@@ -157,8 +157,7 @@ const RequestDetails = ({ clickedRowData, queryTime } = props) => {
               options={{
                 theme: 'material-darker',
                 mode: 'graphql',
-                scrollbarStyle: 'null',
-                lineWrapping: true
+                scrollbarStyle: 'null'
               }}
             />
           </>
@@ -180,7 +179,8 @@ const RequestDetails = ({ clickedRowData, queryTime } = props) => {
         <>
           <CodeMirror
             className="client_editor"
-            value={beautify(clickedRowData.responseData, null, 2, 80)}
+            value={JSON.stringify(clickedRowData.responseData, null, 2)}
+            // value={beautify(clickedRowData.responseData, null, 2, 80)}
             options={{
               theme: 'material-darker',
               mode: 'json',

quell-extension/src/pages/Panel/Components/InputEditor.tsx

@@ -29,7 +29,7 @@ const InputEditor = (props) => {
       },
       body: JSON.stringify({
         query: query,
-        costOptions: { maxDepth:15, maxCost:6000, ipRate:22}
+        costOptions: { maxDepth: 15, maxCost: 6000, ipRate: 22}
       }),
     })
       .then((response) => response.json())

quell-extension/src/pages/Panel/Components/OutputEditor.tsx

@@ -11,7 +11,8 @@ const OutputEditor = ({results}) => {
 
   useEffect(() => {
     if (Object.keys(results).length > 0) {
-      setOutput(beautify(results, null, 2, 80));
+      // setOutput(beautify(results, null, 2, 80));
+      setOutput(JSON.stringify(results, null, 2));
     }
   }, [results])
 
@@ -21,8 +22,9 @@ const OutputEditor = ({results}) => {
       value={output}
       options={{
         theme: 'material-darker',
-        lineNumbers: false,
-        mode:'json'
+        // lineNumbers: false,
+        mode:'json',
+        scrollbarStyle: 'null'
       }}
     />
   );

quell-extension/src/pages/Panel/global.scss

@@ -64,7 +64,7 @@ button:hover {
   border-width: 0 0 2px;
   border-color: rgb(110, 110, 110);
   width: 100%;
-  top: 5px;
+  top: 15px;
   z-index: 5;
 }
 
@@ -153,7 +153,7 @@ tr:hover {
 
 .headersTabs {
   overflow: auto;
-  margin: -8px 10px 0 10px;
+  margin: 20px 5px 0 5px;
   font: 0.8rem;
 }
 
@@ -177,6 +177,7 @@ tr:hover {
   justify-content: space-evenly;
   position: sticky;
   top:0;
+  height: 40px;
 }
 
 .clientNavButton {
@@ -241,7 +242,6 @@ tr:hover {
   .query_output_editor .CodeMirror {
     height: calc(100vh - 70px);
     min-height: 200px;
-
   }
 }