Merge pull request #20 from wp-graphql/release/v0.1.4

Release/v0.1.4

README.md

@@ -15,9 +15,9 @@ core as the default GraphiQL IDE that will be supported and maintained with WPGr
 
 ## Installation / Activation
 
-At this moment, this plugin is only available from Github, so you'll need to download the Zip or clone the repo. 
+At this moment, this plugin is only available from Github, so you'll need to download the Zip or clone the repo.
 
-The repo does include the built JavaScript files, so you can install the zip of the plugin to your WordPress install. 
+The repo does include the built JavaScript files, so you can install the zip of the plugin to your WordPress install.
 
 In the future, the plugin will also be available on Packagist for installing via Composer and available on WordPress.org
 

build/app.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-element', 'wp-hooks', 'wp-polyfill'), 'version' => 'fcd41f22340ab87a59de61fe2e3e550d');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-element', 'wp-hooks', 'wp-polyfill'), 'version' => 'f04978b2bd79b512a8a729a642bf3c1f');

build/graphiqlFullscreenToggle.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-element'), 'version' => '3d486a568f66cb554f291c48e1262072');
+<?php return array('dependencies' => array('wp-element'), 'version' => 'b231cb1546d7e6a7a08b1c88b5324c0c');

build/graphiqlQueryComposer.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-element', 'wp-polyfill'), 'version' => 'e225cc050c7b45f4b6dfe08c4fd5aa97');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-element', 'wp-polyfill'), 'version' => '6b989a7414e6ac41d8a54330888f7652');

readme.txt

@@ -3,7 +3,7 @@ Contributors: jasonbahl
 Tags: GraphQL, WPGraphQL, GraphiQL, IDE, DevTools, Developer Tools, Tooling, Testing, Productivity, Headless, Gatsby, React, NextJS
 Requires at least: 5.5
 Requires PHP: 7.1
-Stable Tag: 0.1.3
+Stable Tag: 0.1.4
 License: GPL-3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -15,6 +15,13 @@ This plugin is intended to be used with WPGraphQL (https://wordpress.org/plugins
 
 == Changelog ==
 
+= 0.1.4 =
+
+**Chores/Bugfixes**
+
+- Fixes styles related to extra scrollbars showing up
+- ([#19](https://github.com/wp-graphql/wp-graphiql-2/pull/19)): When expanded in fullscreen, show icon to contract the screen. Thanks @scottyzen!
+
 = 0.1.3 =
 
 **Chores/Bugfixes**

src/components/App/App.js

@@ -1,9 +1,9 @@
 import Router from "../Router/Router.js";
 import { useEffect, useState } from "@wordpress/element";
 import { QueryParamProvider, QueryParams, StringParam } from "use-query-params";
-import {getEndpoint} from "../../context/AppContext";
-import { client } from '../../data/client';
-import { ApolloProvider } from '@apollo/client'
+import { getEndpoint } from "../../context/AppContext";
+import { client } from "../../data/client";
+import { ApolloProvider } from "@apollo/client";
 const { hooks, AppContextProvider, useAppContext } = window.wpGraphiQL;
 
 /**
@@ -28,11 +28,11 @@ const FilteredApp = () => {
  */
 export const AppWithContext = () => {
   const filteredQueryParamsConfig = hooks.applyFilters(
-      "graphiql_query_params_provider_config",
-      {
-        query: StringParam,
-        variables: StringParam,
-      }
+    "graphiql_query_params_provider_config",
+    {
+      query: StringParam,
+      variables: StringParam,
+    }
   );
 
   const [render, setRender] = useState(false);
@@ -49,21 +49,21 @@ export const AppWithContext = () => {
   }, []);
 
   return render ? (
-      <QueryParamProvider>
-        <QueryParams config={filteredQueryParamsConfig}>
-          {(renderProps) => {
-            const {query, setQuery} = renderProps;
-            console.log( getEndpoint() )
-            return (
-                <AppContextProvider queryParams={query} setQueryParams={setQuery}>
-                  <ApolloProvider client={ client(getEndpoint() ) } >
-                    <FilteredApp/>
-                  </ApolloProvider>
-                </AppContextProvider>
-            );
-          }}
-        </QueryParams>
-      </QueryParamProvider>
+    <QueryParamProvider>
+      <QueryParams config={filteredQueryParamsConfig}>
+        {(renderProps) => {
+          const { query, setQuery } = renderProps;
+          console.log(getEndpoint());
+          return (
+            <AppContextProvider queryParams={query} setQueryParams={setQuery}>
+              <ApolloProvider client={client(getEndpoint())}>
+                <FilteredApp />
+              </ApolloProvider>
+            </AppContextProvider>
+          );
+        }}
+      </QueryParams>
+    </QueryParamProvider>
   ) : null;
 };
 

src/extensions/graphiql-fullscreen-toggle/index.js

@@ -2,24 +2,59 @@ const { hooks } = window.wpGraphiQL;
 import "./index.scss";
 
 const FullScreenToggleButton = () => {
-    return (
-        <button 
-            id='graphiql-fullscreen-toggle'
-            class="toolbar-button" 
-            title="Toggle Full Screen" 
-            onClick={() => { document.body.classList.toggle("graphiql-fullscreen");}}
-        >
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="expand-icon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M421.8 421.77L304 304M80 192V80h112M90.2 90.23L208 208M320 80h112v112M421.77 90.2L304 208M192 432H80V320M90.23 421.8L208 304"/></svg>
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="contract-icon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M304 416V304h112M314.2 314.23L432 432M208 96v112H96M197.8 197.77L80 80M416 208H304V96M314.23 197.8L432 80M96 304h112v112M197.77 314.2L80 432"/></svg>
-        </button>
-    )
-}
+  return (
+    <button
+      id="graphiql-fullscreen-toggle"
+      className="toolbar-button"
+      title="Toggle Full Screen"
+      onClick={() => {
+        document.body.classList.toggle("graphiql-fullscreen");
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        className="expand-icon"
+        viewBox="0 0 512 512"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="32"
+          d="M432 320v112H320M421.8 421.77L304 304M80 192V80h112M90.2 90.23L208 208M320 80h112v112M421.77 90.2L304 208M192 432H80V320M90.23 421.8L208 304"
+        />
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        className="contract-icon"
+        viewBox="0 0 512 512"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="32"
+          d="M304 416V304h112M314.2 314.23L432 432M208 96v112H96M197.8 197.77L80 80M416 208H304V96M314.23 197.8L432 80M96 304h112v112M197.77 314.2L80 432"
+        />
+      </svg>
+    </button>
+  );
+};
 
 /**
  * Hook into the GraphiQL Toolbar to add the button to toggle fullscreen mode.
  */
-hooks.addFilter( "graphiql_toolbar_after_buttons", "graphiql-extension", (res, props) => {
-        res.push( <FullScreenToggleButton /> )
-        return res
-    }
-);
+hooks.addFilter(
+  "graphiql_toolbar_after_buttons",
+  "graphiql-extension",
+  (res, props) => {
+    res.push(<FullScreenToggleButton />);
+    return res;
+  }
+);

src/extensions/graphiql-fullscreen-toggle/index.scss

@@ -1,22 +1,22 @@
-.graphiql-fullscreen #wp-graphiql-wrapper{
-    position: fixed;
-    z-index: 99999;
-    inset: 0;
-    padding: 0;
+.graphiql-fullscreen #wp-graphiql-wrapper {
+  position: fixed;
+  z-index: 99999;
+  inset: 0;
+  padding: 0;
 }
 
-#graphiql-fullscreen-toggle{
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 8px;
+#graphiql-fullscreen-toggle {
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
 }
 
-.graphiql-fullscreen #wp-graphiql-wrapper .expand-icon, 
-#wp-graphiql-wrapper .contract-icon{
-    display: none;
+.graphiql-fullscreen #wp-graphiql-wrapper .expand-icon,
+#wp-graphiql-wrapper .contract-icon {
+  display: none;
+}
+.graphiql-fullscreen #wp-graphiql-wrapper .contract-icon {
+  display: block;
 }
-.graphiql-fullscreen #wp-graphiql-wrapper .contract-icon{
-    display: block;
-}

src/extensions/graphiql-query-composer/components/AddOperations.js

@@ -18,7 +18,7 @@ const AddOperations = (props) => {
         style={{
           padding: `10px 10px 0 10px`,
           borderTop: `1px solid #ccc`,
-          overflowY: `scroll`,
+          overflowY: `hidden`,
           minHeight: `${height}px`,
         }}
       >

src/extensions/graphiql-query-composer/components/ExplorerWrapper.js

@@ -57,7 +57,7 @@ const ExplorerWrapper = (props) => {
             borderTop: `1px solid #d6d6d6`,
             bottom: 0,
             left: 0,
-            overflowY: "scroll",
+            overflowY: "hidden",
             padding: `0`,
             right: 0,
             top: `47px`,

src/extensions/graphiql-query-composer/components/QueryBuilder.js

@@ -332,7 +332,7 @@ const QueryBuilder = (props) => {
       <div
         style={{
           flexGrow: 1,
-          overflowY: "scroll",
+          overflowY: "hidden",
           width: `100%`,
           padding: "10px",
         }}

src/extensions/graphiql-query-composer/index.scss

@@ -20,6 +20,7 @@
   flex: 1 1;
   font-weight: 700;
   overflow-x: hidden;
+  overflow-y: hidden;
   padding: 5px 0 10px 10px;
   text-align: center;
   text-overflow: ellipsis;

src/screens/GraphiQL/GraphiQL.js

@@ -1,14 +1,14 @@
 import GraphiQL from "graphiql";
-import { useRef, useEffect } from "@wordpress/element";
+import { useRef } from "@wordpress/element";
 import { getFetcher } from "../../utils/fetcher";
 import styled from "styled-components";
-import "./style.scss";
 import { Spin } from "antd";
 import GraphiQLToolbar from "./components/GraphiQLToolbar";
 import {
   GraphiQLContextProvider,
   useGraphiQLContext,
 } from "./context/GraphiQLContext";
+import "./style.scss";
 
 const { hooks, useAppContext, GraphQL } = wpGraphiQL;
 const { parse, specifiedRules } = GraphQL;
@@ -22,6 +22,9 @@ const StyledWrapper = styled.div`
   .history-title {
     padding-top: 5px;
   }
+  .doc-explorer-back {
+    overflow: hidden;
+  }
   height: 100%;
   display: flex;
   flex-direction: row;
@@ -47,7 +50,8 @@ const GraphiQLScreen = () => {
 
   const appContext = useAppContext();
   const graphiqlContext = useGraphiQLContext();
-  const { query, setQuery, externalFragments, variables, setVariables } = graphiqlContext;
+  const { query, setQuery, externalFragments, variables, setVariables } =
+    graphiqlContext;
   const { endpoint, nonce, schema, setSchema } = appContext;
 
   let fetcher = getFetcher(endpoint, { nonce });

src/screens/GraphiQL/context/GraphiQLContext.js

@@ -72,19 +72,20 @@ export const GraphiQLContextProvider = ({ children }) => {
     return defaultQuery;
   };
 
-  const defaultVariables = ( window && window?.localStorage?.getItem( 'graphiql:variables' ) ) ?? null;
+  const defaultVariables =
+    (window && window?.localStorage?.getItem("graphiql:variables")) ?? null;
   const [query, setQuery] = useState(getDefaultQuery());
-  const [variables, setVariables] = useState( defaultVariables );
+  const [variables, setVariables] = useState(defaultVariables);
   const [externalFragments, setExternalFragments] = useState(
     getExternalFragments()
   );
 
   const _updateVariables = (variables) => {
     if (window && window.localStorage) {
-      window.localStorage.setItem( 'graphiql:variables', variables );
+      window.localStorage.setItem("graphiql:variables", variables);
     }
-    setVariables( variables )
-  }
+    setVariables(variables);
+  };
 
   const _updateQuery = (newQuery) => {
     hooks.doAction("graphiql_update_query", { query, newQuery });

src/screens/GraphiQL/style.scss

@@ -21,3 +21,7 @@
   position: relative;
   z-index: 3;
 }
+
+#wp-graphiql-wrapper .graphiql-container .doc-explorer-back {
+  overflow: hidden;
+}

wp-graphiql-2.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Plugin Name: WPGraphiQL 2.0
- * Version: 0.1.3
+ * Version: 0.1.4
  * Description: This is the temporary home of the WPGraphiQL 2.0 plugin which will eventually be merged into WPGraphQL core. New features will be iterated on in this repo and progressively added to WPGraphQL core.
  * Plugin URI: https://github.com/wp-graphql/wp-graphiql-2
  * Author: WPGraphQL