@webiny/app-graphql-playground 0.0.0-mt-1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @webiny/app-graphql-playground

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@webiny/app-graphql-playground",
+	"version": "0.0.0-mt-1",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"author": "Webiny Ltd",
+	"license": "MIT",
+	"dependencies": {
+		"@emotion/core": "10.1.1",
+		"@emotion/styled": "10.0.27",
+		"@webiny/app": "0.0.0-mt-1",
+		"@webiny/app-admin": "0.0.0-mt-1",
+		"@webiny/app-i18n": "0.0.0-mt-1",
+		"@webiny/app-security": "0.0.0-mt-1",
+		"@webiny/plugins": "0.0.0-mt-1",
+		"@webiny/react-router": "0.0.0-mt-1",
+		"@webiny/ui": "0.0.0-mt-1",
+		"apollo-cache": "1.3.5",
+		"apollo-client": "2.6.10",
+		"apollo-link": "1.2.14",
+		"apollo-link-context": "1.0.20",
+		"apollo-utilities": "1.3.4",
+		"graphql": "14.7.0",
+		"load-script": "1.0.0",
+		"prop-types": "15.7.2",
+		"react": "16.14.0",
+		"react-dom": "16.14.0",
+		"react-helmet": "5.2.1"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.5.5",
+		"@babel/core": "^7.5.5",
+		"@babel/plugin-proposal-class-properties": "^7.5.5",
+		"@babel/preset-env": "^7.5.5",
+		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-typescript": "^7.8.3",
+		"@webiny/cli": "^0.0.0-mt-1",
+		"@webiny/project-utils": "^0.0.0-mt-1",
+		"babel-plugin-emotion": "^9.2.8",
+		"babel-plugin-lodash": "^3.3.4",
+		"rimraf": "^3.0.2",
+		"typescript": "^4.1.3"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "yarn webiny run build",
+		"watch": "yarn webiny run watch"
+	},
+	"svgo": {
+		"plugins": {
+			"removeViewBox": false
+		}
+	},
+	"adio": {
+		"ignore": {
+			"src": [
+				"!!raw-loader!."
+			],
+			"peerDependencies": [
+				"react-dom"
+			]
+		}
+	},
+	"gitHead": "37736d8456a6ecb342a6c3645060bd9a3f2d4bb0"
+}

package/plugins/Playground.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Playground: ({ createApolloClient }: {
+    createApolloClient: any;
+}) => JSX.Element;
+export default Playground;

package/plugins/Playground.js

@@ -0,0 +1,120 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { Fragment, useEffect, useRef, useCallback, useState } from "react";
+import { ApolloLink } from "apollo-link";
+import { setContext } from "apollo-link-context";
+import loadScript from "load-script";
+import { Global } from "@emotion/core";
+import { plugins } from "@webiny/plugins";
+import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
+import { useSecurity } from "@webiny/app-security";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { playgroundDialog, PlaygroundContainer } from "./Playground.styles";
+import { settings } from "./settings";
+
+var withHeaders = function withHeaders(link, headers) {
+  return ApolloLink.from([setContext( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_, req) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", {
+                headers: _objectSpread(_objectSpread({}, req.headers), headers)
+              });
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }()), link]);
+};
+
+var initScripts = function initScripts() {
+  return new Promise(function (resolve) {
+    // @ts-ignore
+    if (window.GraphQLPlayground) {
+      return resolve();
+    }
+
+    return loadScript("https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react@1.7.32/build/static/js/middleware.js", resolve);
+  });
+};
+
+var Playground = function Playground(_ref2) {
+  var createApolloClient = _ref2.createApolloClient;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useI18N = useI18N(),
+      getCurrentLocale = _useI18N.getCurrentLocale;
+
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var links = useRef({});
+  var locale = getCurrentLocale("content");
+  var tabs = plugins.byType("graphql-playground-tab").map(function (pl) {
+    return pl.tab({
+      locale: locale,
+      identity: identity
+    });
+  }).filter(Boolean);
+  var createApolloLink = useCallback(function (_ref3) {
+    var endpoint = _ref3.endpoint,
+        headers = _ref3.headers;
+
+    // If the request endpoint is not know to us, return the first available
+    if (!endpoint.includes(process.env.REACT_APP_API_URL)) {
+      return {
+        link: withHeaders(Object.values(links.current)[0], headers)
+      };
+    }
+
+    if (!links.current[endpoint]) {
+      links.current[endpoint] = createApolloClient({
+        uri: endpoint
+      }).link;
+    }
+
+    return {
+      link: withHeaders(links.current[endpoint], headers)
+    };
+  }, []);
+  useEffect(function () {
+    initScripts().then(function () {
+      setLoading(false);
+    });
+  }, []);
+  useEffect(function () {
+    if (!loading) {
+      // @ts-ignore
+      window.GraphQLPlayground.init(document.getElementById("graphql-playground"), {
+        tabs: tabs,
+        createApolloLink: createApolloLink,
+        settings: settings
+      });
+    }
+  }, [loading]);
+  return /*#__PURE__*/React.createElement(Fragment, null, loading ? /*#__PURE__*/React.createElement(CircularProgress, {
+    label: "Loading playground..."
+  }) : /*#__PURE__*/React.createElement(PlaygroundContainer, {
+    id: "graphql-playground"
+  }), /*#__PURE__*/React.createElement(Global, {
+    styles: playgroundDialog
+  }));
+};
+
+export default Playground;

package/plugins/Playground.styles.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const PlaygroundContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultValue" | "id" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, object>;
+export declare const playgroundDialog: {
+    ".ReactModalPortal": {
+        "p, a, h1, h2, h3, h4, ul, pre, code": {
+            margin: number;
+            padding: number;
+            color: string;
+        };
+        "a:active, a:focus, button:focus, input:focus": {
+            outline: string;
+        };
+        "input, button, submit": {
+            border: string;
+        };
+        "input, button, pre": {
+            fontFamily: string;
+        };
+        code: {
+            fontFamily: string;
+        };
+    };
+};

package/plugins/Playground.styles.js

@@ -0,0 +1,43 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import styled from "@emotion/styled";
+var sharedStyles = {
+  "p, a, h1, h2, h3, h4, ul, pre, code": {
+    margin: 0,
+    padding: 0,
+    color: "inherit"
+  },
+  "a:active, a:focus, button:focus, input:focus": {
+    outline: "none"
+  },
+  "input, button, submit": {
+    border: "none"
+  },
+  "input, button, pre": {
+    fontFamily: "'Open Sans', sans-serif"
+  },
+  code: {
+    fontFamily: "Consolas, monospace"
+  }
+};
+export var PlaygroundContainer = /*#__PURE__*/styled("div", {
+  target: "e1o47c380",
+  label: "PlaygroundContainer"
+})({
+  marginTop: -3,
+  overflow: "hidden",
+  ".playground": _objectSpread({
+    height: "calc(100vh - 64px)",
+    margin: 0,
+    padding: 0,
+    fontFamily: "'Open Sans', sans-serif",
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale",
+    color: "rgba(0,0,0,.8)",
+    lineHeight: 1.5,
+    letterSpacing: 0.53,
+    marginRight: "-1px !important"
+  }, sharedStyles)
+});
+export var playgroundDialog = {
+  ".ReactModalPortal": sharedStyles
+};

package/plugins/graphql.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.051 2.751l4.935 2.85c.816-.859 2.173-.893 3.032-.077.148.14.274.301.377.477.589 1.028.232 2.339-.796 2.928-.174.1-.361.175-.558.223v5.699c1.146.273 1.854 1.423 1.58 2.569-.048.204-.127.4-.232.581-.592 1.023-1.901 1.374-2.927.782-.196-.113-.375-.259-.526-.429l-4.905 2.832c.372 1.124-.238 2.335-1.361 2.706-.217.071-.442.108-.67.108-1.181.001-2.139-.955-2.14-2.136 0-.205.029-.41.088-.609l-4.936-2.847c-.816.854-2.171.887-3.026.07-.854-.816-.886-2.171-.07-3.026.283-.297.646-.506 1.044-.603l.001-5.699c-1.15-.276-1.858-1.433-1.581-2.584.047-.198.123-.389.224-.566.592-1.024 1.902-1.374 2.927-.782.177.101.339.228.48.377l4.938-2.85C9.613 1.612 10.26.423 11.39.088 11.587.029 11.794 0 12 0c1.181-.001 2.139.954 2.14 2.134.001.209-.03.418-.089.617zm-.515.877c-.019.021-.037.039-.058.058l6.461 11.19c.026-.009.056-.016.082-.023V9.146c-1.145-.283-1.842-1.442-1.558-2.588.006-.024.012-.049.019-.072l-4.946-2.858zm-3.015.059l-.06-.06-4.946 2.852c.327 1.135-.327 2.318-1.461 2.645-.026.008-.051.014-.076.021v5.708l.084.023 6.461-11.19-.002.001zm2.076.507c-.39.112-.803.112-1.192 0l-6.46 11.189c.294.283.502.645.6 1.041h12.911c.097-.398.307-.761.603-1.044L12.597 4.194zm.986 16.227l4.913-2.838c-.015-.047-.027-.094-.038-.142H5.542l-.021.083 4.939 2.852c.388-.404.934-.653 1.54-.653.627 0 1.19.269 1.583.698z"/></svg>

package/plugins/index.d.ts

@@ -0,0 +1,17 @@
+import ApolloClient from "apollo-client";
+import { RoutePlugin } from "@webiny/app/types";
+import { UIViewPlugin } from "@webiny/app-admin/ui/UIView";
+import { NavigationView } from "@webiny/app-admin/ui/views/NavigationView";
+declare type GraphQLPlaygroundOptions = {
+    createApolloClient(params: {
+        uri: string;
+    }): ApolloClient<any>;
+};
+declare const _default: (options: GraphQLPlaygroundOptions) => (RoutePlugin | import("@webiny/plugins/types").Plugin<{
+    type: "graphql-playground-tab";
+    tab(params: {
+        locale: string;
+        identity: import("@webiny/app-security/types").SecurityIdentity;
+    }): import("../types").GraphQLPlaygroundTab;
+}> | UIViewPlugin<NavigationView>)[];
+export default _default;

package/plugins/index.js

@@ -0,0 +1,46 @@
+import React from "react";
+import Helmet from "react-helmet";
+import { Route } from "@webiny/react-router";
+import { AdminLayout } from "@webiny/app-admin/components/AdminLayout";
+import { ReactComponent as InfoIcon } from "@svgr/webpack!./graphql.svg";
+import Playground from "./Playground";
+// @ts-ignore
+import placeholder from "!!raw-loader!./placeholder.graphql";
+import { NavigationMenuElement } from "@webiny/app-admin/ui/elements/NavigationMenuElement";
+import { UIViewPlugin } from "@webiny/app-admin/ui/UIView";
+import { NavigationView } from "@webiny/app-admin/ui/views/NavigationView";
+// @ts-ignore
+export default (function (options) {
+  return [new UIViewPlugin(NavigationView, function (view) {
+    view.getFooterElement().addMenuElement(new NavigationMenuElement("apiPlayground", {
+      label: "API Playground",
+      icon: /*#__PURE__*/React.createElement(InfoIcon, null),
+      path: "/api-playground",
+      onClick: function onClick() {
+        view.getNavigationHook().hideMenu();
+      }
+    }));
+  }), {
+    name: "route-api-playground",
+    type: "route",
+    route: /*#__PURE__*/React.createElement(Route, {
+      exact: true,
+      path: "/api-playground",
+      render: function render() {
+        return /*#__PURE__*/React.createElement(AdminLayout, null, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("title", null, "API Playground")), /*#__PURE__*/React.createElement(Playground, {
+          createApolloClient: options.createApolloClient
+        }));
+      }
+    })
+  }, {
+    type: "graphql-playground-tab",
+    tab: function tab() {
+      return {
+        name: "Main API",
+        endpoint: process.env.REACT_APP_API_URL + "/graphql",
+        headers: {},
+        query: placeholder
+      };
+    }
+  }];
+});

package/plugins/placeholder.graphql

@@ -0,0 +1,18 @@
+#  Webiny Main API
+#
+#  This is the core API that has access to all the features of your Webiny instance.
+#
+#  Note: to use the API outside of the playground, you will need to provide an API key via the Authorization header.
+#
+#  Example query - list all users:
+{
+  adminUsers {
+    listUsers {
+      data {
+        email
+        firstName
+        createdOn
+      }
+    }
+  }
+}

package/plugins/settings.d.ts

@@ -0,0 +1 @@
+export declare const settings: any;

package/plugins/settings.js

@@ -0,0 +1,18 @@
+export var settings = {
+  "editor.cursorShape": "line",
+  "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",
+  "editor.fontSize": 14,
+  "editor.reuseHeaders": true,
+  "editor.theme": "dark",
+  "general.betaUpdates": false,
+  "prettier.printWidth": 80,
+  "prettier.tabWidth": 2,
+  "prettier.useTabs": false,
+  "request.credentials": "omit",
+  "schema.disableComments": true,
+  "schema.polling.enable": false,
+  "schema.polling.endpointFilter": "*localhost*",
+  "schema.polling.interval": 2000000,
+  "tracing.hideTracingResponse": true,
+  "queryPlan.hideQueryPlanResponse": true
+};

package/types.d.ts

@@ -0,0 +1,15 @@
+import { Plugin } from "@webiny/plugins/types";
+import { SecurityIdentity } from "@webiny/app-security/types";
+export declare type GraphQLPlaygroundTab = {
+    name: string;
+    endpoint: string;
+    headers: Record<string, string>;
+    query: string;
+};
+export declare type GraphQLPlaygroundTabPlugin = Plugin<{
+    type: "graphql-playground-tab";
+    tab(params: {
+        locale: string;
+        identity: SecurityIdentity;
+    }): GraphQLPlaygroundTab;
+}>;

package/types.js

@@ -0,0 +1 @@
+export {};