@webiny/app 0.0.0-unstable.79032b23a5 → 0.0.0-unstable.7be00a75a9

package/plugins/ConsoleLinkPlugin.js

@@ -1,48 +1,24 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ConsoleLinkPlugin = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _apolloLink = require("apollo-link");
-var _ApolloLinkPlugin2 = require("./ApolloLinkPlugin");
-/**
- * This link checks for presence of `extensions.console` in the response and logs all items to browser console.
- */
-var ConsoleLinkPlugin = /*#__PURE__*/function (_ApolloLinkPlugin) {
-  (0, _inherits2.default)(ConsoleLinkPlugin, _ApolloLinkPlugin);
-  var _super = (0, _createSuper2.default)(ConsoleLinkPlugin);
-  function ConsoleLinkPlugin() {
-    (0, _classCallCheck2.default)(this, ConsoleLinkPlugin);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(ConsoleLinkPlugin, [{
-    key: "createLink",
-    value: function createLink() {
-      return new _apolloLink.ApolloLink(function (operation, forward) {
-        var firstDefinition = operation.query.definitions[0];
-        var isQuery = firstDefinition["operation"] === "query";
-        return forward(operation).map(function (data) {
-          if (data.extensions && Array.isArray(data.extensions.console) && data.extensions.console.length) {
-            var variables = isQuery ? JSON.stringify(operation.variables) : "{ see request details in the Network tab }";
-            console.groupCollapsed("Logs for graphQL ".concat(isQuery ? "query" : "mutation", ": %c").concat(operation.operationName || "anonymous operation", " %c").concat(variables, "%c"), "color: #fa5a28", "color: #6b6b6b", "color: black");
-            data.extensions.console.forEach(function (log) {
-              var _console;
-              (_console = console)[log.method].apply(_console, (0, _toConsumableArray2.default)(log.args));
+import { ApolloLink } from "apollo-link";
+import { ApolloLinkPlugin } from "./ApolloLinkPlugin.js";
+class ConsoleLinkPlugin extends ApolloLinkPlugin {
+    createLink() {
+        return new ApolloLink((operation, forward)=>{
+            const firstDefinition = operation.query.definitions[0];
+            const isQuery = "query" === firstDefinition["operation"];
+            return forward(operation).map((data)=>{
+                if (data.extensions && Array.isArray(data.extensions.console) && data.extensions.console.length) {
+                    const variables = isQuery ? JSON.stringify(operation.variables) : "{ see request details in the Network tab }";
+                    console.groupCollapsed(`Logs for graphQL ${isQuery ? "query" : "mutation"}: %c${operation.operationName || "anonymous operation"} %c${variables}%c`, "color: #fa5a28", "color: #6b6b6b", "color: black");
+                    data.extensions.console.forEach((log)=>{
+                        console[log.method](...log.args);
+                    });
+                    console.groupEnd();
+                }
+                return data;
             });
-            console.groupEnd();
-          }
-          return data;
         });
-      });
     }
-  }]);
-  return ConsoleLinkPlugin;
-}(_ApolloLinkPlugin2.ApolloLinkPlugin);
-exports.ConsoleLinkPlugin = ConsoleLinkPlugin;
+}
+export { ConsoleLinkPlugin };
+
+//# sourceMappingURL=ConsoleLinkPlugin.js.map

package/plugins/ConsoleLinkPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["ConsoleLinkPlugin","ApolloLink","operation","forward","firstDefinition","query","definitions","isQuery","map","data","extensions","Array","isArray","console","length","variables","JSON","stringify","groupCollapsed","operationName","forEach","log","method","args","groupEnd","ApolloLinkPlugin"],"sources":["ConsoleLinkPlugin.ts"],"sourcesContent":["import { ApolloLink, FetchResult as BaseFetchResult } from \"apollo-link\";\nimport { ApolloLinkPlugin } from \"./ApolloLinkPlugin\";\nimport { OperationDefinitionNode } from \"graphql/language/ast\";\n\ninterface Log {\n    args: any[];\n    method: \"error\" | \"info\" | \"log\" | \"warn\";\n}\n\ninterface FetchResult extends BaseFetchResult {\n    extensions?: {\n        console?: Log[];\n    };\n}\n\n/**\n * This link checks for presence of `extensions.console` in the response and logs all items to browser console.\n */\nexport class ConsoleLinkPlugin extends ApolloLinkPlugin {\n    public override createLink() {\n        return new ApolloLink((operation, forward) => {\n            const firstDefinition = operation.query.definitions[0] as OperationDefinitionNode;\n            const isQuery = firstDefinition[\"operation\"] === \"query\";\n\n            return forward(operation).map((data: FetchResult) => {\n                if (\n                    data.extensions &&\n                    Array.isArray(data.extensions.console) &&\n                    data.extensions.console.length\n                ) {\n                    const variables = isQuery\n                        ? JSON.stringify(operation.variables)\n                        : \"{ see request details in the Network tab }\";\n                    console.groupCollapsed(\n                        `Logs for graphQL ${isQuery ? \"query\" : \"mutation\"}: %c${\n                            operation.operationName || \"anonymous operation\"\n                        } %c${variables}%c`,\n                        \"color: #fa5a28\",\n                        \"color: #6b6b6b\",\n                        \"color: black\"\n                    );\n                    data.extensions.console.forEach((log: Log) => {\n                        console[log.method](...log.args);\n                    });\n                    console.groupEnd();\n                }\n\n                return data;\n            });\n        });\n    }\n}\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AAcA;AACA;AACA;AAFA,IAGaA,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OAC1B,sBAA6B;MACzB,OAAO,IAAIC,sBAAU,CAAC,UAACC,SAAS,EAAEC,OAAO,EAAK;QAC1C,IAAMC,eAAe,GAAGF,SAAS,CAACG,KAAK,CAACC,WAAW,CAAC,CAAC,CAA4B;QACjF,IAAMC,OAAO,GAAGH,eAAe,CAAC,WAAW,CAAC,KAAK,OAAO;QAExD,OAAOD,OAAO,CAACD,SAAS,CAAC,CAACM,GAAG,CAAC,UAACC,IAAiB,EAAK;UACjD,IACIA,IAAI,CAACC,UAAU,IACfC,KAAK,CAACC,OAAO,CAACH,IAAI,CAACC,UAAU,CAACG,OAAO,CAAC,IACtCJ,IAAI,CAACC,UAAU,CAACG,OAAO,CAACC,MAAM,EAChC;YACE,IAAMC,SAAS,GAAGR,OAAO,GACnBS,IAAI,CAACC,SAAS,CAACf,SAAS,CAACa,SAAS,CAAC,GACnC,4CAA4C;YAClDF,OAAO,CAACK,cAAc,4BACEX,OAAO,GAAG,OAAO,GAAG,UAAU,iBAC9CL,SAAS,CAACiB,aAAa,IAAI,qBAAqB,gBAC9CJ,SAAS,SACf,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,CACjB;YACDN,IAAI,CAACC,UAAU,CAACG,OAAO,CAACO,OAAO,CAAC,UAACC,GAAQ,EAAK;cAAA;cAC1C,YAAAR,OAAO,EAACQ,GAAG,CAACC,MAAM,CAAC,kDAAID,GAAG,CAACE,IAAI,EAAC;YACpC,CAAC,CAAC;YACFV,OAAO,CAACW,QAAQ,EAAE;UACtB;UAEA,OAAOf,IAAI;QACf,CAAC,CAAC;MACN,CAAC,CAAC;IACN;EAAC;EAAA;AAAA,EAhCkCgB,mCAAgB;AAAA"}
+{"version":3,"file":"plugins/ConsoleLinkPlugin.js","sources":["../../src/plugins/ConsoleLinkPlugin.ts"],"sourcesContent":["import type { FetchResult as BaseFetchResult } from \"apollo-link\";\nimport { ApolloLink } from \"apollo-link\";\nimport { ApolloLinkPlugin } from \"./ApolloLinkPlugin.js\";\nimport type { OperationDefinitionNode } from \"graphql/language/ast.js\";\n\ninterface Log {\n    args: any[];\n    method: \"error\" | \"info\" | \"log\" | \"warn\";\n}\n\ninterface FetchResult extends BaseFetchResult {\n    extensions?: {\n        console?: Log[];\n    };\n}\n\n/**\n * This link checks for presence of `extensions.console` in the response and logs all items to browser console.\n */\nexport class ConsoleLinkPlugin extends ApolloLinkPlugin {\n    public override createLink() {\n        return new ApolloLink((operation, forward) => {\n            const firstDefinition = operation.query.definitions[0] as OperationDefinitionNode;\n            const isQuery = firstDefinition[\"operation\"] === \"query\";\n\n            return forward(operation).map((data: FetchResult) => {\n                if (\n                    data.extensions &&\n                    Array.isArray(data.extensions.console) &&\n                    data.extensions.console.length\n                ) {\n                    const variables = isQuery\n                        ? JSON.stringify(operation.variables)\n                        : \"{ see request details in the Network tab }\";\n                    console.groupCollapsed(\n                        `Logs for graphQL ${isQuery ? \"query\" : \"mutation\"}: %c${\n                            operation.operationName || \"anonymous operation\"\n                        } %c${variables}%c`,\n                        \"color: #fa5a28\",\n                        \"color: #6b6b6b\",\n                        \"color: black\"\n                    );\n                    data.extensions.console.forEach((log: Log) => {\n                        console[log.method](...log.args);\n                    });\n                    console.groupEnd();\n                }\n\n                return data;\n            });\n        });\n    }\n}\n"],"names":["ConsoleLinkPlugin","ApolloLinkPlugin","ApolloLink","operation","forward","firstDefinition","isQuery","data","Array","variables","JSON","console","log"],"mappings":";;AAmBO,MAAMA,0BAA0BC;IACnB,aAAa;QACzB,OAAO,IAAIC,WAAW,CAACC,WAAWC;YAC9B,MAAMC,kBAAkBF,UAAU,KAAK,CAAC,WAAW,CAAC,EAAE;YACtD,MAAMG,UAAUD,AAAiC,YAAjCA,eAAe,CAAC,YAAY;YAE5C,OAAOD,QAAQD,WAAW,GAAG,CAAC,CAACI;gBAC3B,IACIA,KAAK,UAAU,IACfC,MAAM,OAAO,CAACD,KAAK,UAAU,CAAC,OAAO,KACrCA,KAAK,UAAU,CAAC,OAAO,CAAC,MAAM,EAChC;oBACE,MAAME,YAAYH,UACZI,KAAK,SAAS,CAACP,UAAU,SAAS,IAClC;oBACNQ,QAAQ,cAAc,CAClB,CAAC,iBAAiB,EAAEL,UAAU,UAAU,WAAW,IAAI,EACnDH,UAAU,aAAa,IAAI,sBAC9B,GAAG,EAAEM,UAAU,EAAE,CAAC,EACnB,kBACA,kBACA;oBAEJF,KAAK,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAACK;wBAC7BD,OAAO,CAACC,IAAI,MAAM,CAAC,IAAIA,IAAI,IAAI;oBACnC;oBACAD,QAAQ,QAAQ;gBACpB;gBAEA,OAAOJ;YACX;QACJ;IACJ;AACJ"}

package/plugins/NetworkErrorLinkPlugin/ErrorOverlay.d.ts

@@ -1,14 +1,9 @@
 import React from "react";
-interface ErrorOverlayProps {
-    query: string;
-    networkError: {
-        message: string;
-        result?: {
-            error?: {
-                stack?: string;
-            };
-        };
-    };
-}
-declare const ErrorOverlay: React.FC<ErrorOverlayProps>;
-export default ErrorOverlay;
+type ErrorOverlayProps = Partial<{
+    title: React.ReactNode;
+    message: React.ReactNode;
+    description: React.ReactNode;
+    closeable?: boolean;
+}>;
+export declare const ErrorOverlay: (props: ErrorOverlayProps) => React.JSX.Element | null;
+export {};

package/plugins/NetworkErrorLinkPlugin/ErrorOverlay.js

@@ -1,77 +1,49 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _Button = require("@webiny/ui/Button");
-var _Typography = require("@webiny/ui/Typography");
-var _i18n = require("../../i18n");
-var _StyledComponents = require("./StyledComponents");
-var _close_24px = require("./assets/close_24px.svg");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var t = _i18n.i18n.ns("app/graphql/error-overlay");
-var ENVIRONMENT_VARIABLES_ARTICLE_LINK = "https://www.webiny.com/docs/how-to-guides/environment-variables";
-var ErrorOverlay = function ErrorOverlay(props) {
-  var query = props.query,
-    networkError = props.networkError;
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  // Log error in browser's developer console for further inspection.
-  console.error({
-    networkError: networkError
-  });
-  if (!open) {
-    return null;
-  }
-  var stackTrace = (0, _get.default)(networkError, "result.error.stack");
-  return /*#__PURE__*/_react.default.createElement(_StyledComponents.OverlayWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "inner"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "header__title"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "headline4"
-  }, networkError.message)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "header__action"
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_close_24px.ReactComponent, null),
-    onClick: function onClick() {
-      return setOpen(false);
-    }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "body"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "body__summary"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "subtitle1"
-  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Error occurred while executing operation:"])))), /*#__PURE__*/_react.default.createElement(_StyledComponents.Pre, null, /*#__PURE__*/_react.default.createElement("code", null, query))), stackTrace && /*#__PURE__*/_react.default.createElement("div", {
-    className: "body__description"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "subtitle1"
-  }, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Complete stack trace:"])))), /*#__PURE__*/_react.default.createElement(_StyledComponents.Pre, null, /*#__PURE__*/_react.default.createElement("code", null, stackTrace)))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "body2"
-  }, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                        This screen is only visible if {message} environment variable is set.\n                        Read more about it in the {link}. "])))({
-    message: /*#__PURE__*/_react.default.createElement("span", {
-      className: "highlight"
-    }, "`REACT_APP_DEBUG=true`"),
-    link: /*#__PURE__*/_react.default.createElement("a", {
-      href: ENVIRONMENT_VARIABLES_ARTICLE_LINK,
-      target: "_blank",
-      rel: "noreferrer noopener"
-    }, "environment variables article")
-  }), /*#__PURE__*/_react.default.createElement("br", null), t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Open your browser's developer console to further inspect this error."])))))));
+import react, { useState } from "react";
+import { Typography } from "./Typography.js";
+import { i18n } from "../../i18n/index.js";
+import { OverlayWrapper } from "./StyledComponents.js";
+import { ReactComponent } from "./assets/close_24px.js";
+const t = i18n.ns("app/graphql/error-overlay");
+const ENVIRONMENT_VARIABLES_ARTICLE_LINK = "https://www.webiny.com/docs/how-to-guides/environment-variables";
+const ErrorOverlay = (props)=>{
+    const { title = "An error occurred", message, description, closeable } = props;
+    const [open, setOpen] = useState(true);
+    if (!open) return null;
+    return /*#__PURE__*/ react.createElement(OverlayWrapper, null, /*#__PURE__*/ react.createElement("div", {
+        className: "inner"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "header"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "header__title"
+    }, /*#__PURE__*/ react.createElement(Typography, {
+        use: "headline"
+    }, title)), false !== closeable && /*#__PURE__*/ react.createElement("div", {
+        className: "header__action"
+    }, /*#__PURE__*/ react.createElement("span", {
+        onClick: ()=>setOpen(false)
+    }, /*#__PURE__*/ react.createElement(ReactComponent, null)))), /*#__PURE__*/ react.createElement("div", {
+        className: "body"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "body__summary"
+    }, message), description && /*#__PURE__*/ react.createElement("div", {
+        className: "body__description"
+    }, description)), /*#__PURE__*/ react.createElement("div", {
+        className: "footer"
+    }, /*#__PURE__*/ react.createElement(Typography, {
+        use: "body"
+    }, t`
+                        This screen is only visible if {message} environment variable is set.
+                        Read more about it in the {link}. `({
+        message: /*#__PURE__*/ react.createElement("span", {
+            className: "highlight"
+        }, "`REACT_APP_DEBUG=true`"),
+        link: /*#__PURE__*/ react.createElement("a", {
+            href: ENVIRONMENT_VARIABLES_ARTICLE_LINK,
+            target: "_blank",
+            rel: "noreferrer noopener"
+        }, "environment variables article")
+    }), /*#__PURE__*/ react.createElement("br", null), t`Open your browser's developer console to further inspect this error.`))));
 };
-var _default = ErrorOverlay;
-exports.default = _default;
+export { ErrorOverlay };
+
+//# sourceMappingURL=ErrorOverlay.js.map

package/plugins/NetworkErrorLinkPlugin/ErrorOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","ENVIRONMENT_VARIABLES_ARTICLE_LINK","ErrorOverlay","props","query","networkError","useState","open","setOpen","console","error","stackTrace","get","message","link"],"sources":["ErrorOverlay.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport get from \"lodash/get\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { i18n } from \"../../i18n\";\nimport { OverlayWrapper, Pre } from \"./StyledComponents\";\nimport { ReactComponent as CloseIcon } from \"./assets/close_24px.svg\";\n\nconst t = i18n.ns(\"app/graphql/error-overlay\");\n\nconst ENVIRONMENT_VARIABLES_ARTICLE_LINK =\n    \"https://www.webiny.com/docs/how-to-guides/environment-variables\";\n\ninterface ErrorOverlayProps {\n    query: string;\n    networkError: {\n        message: string;\n        result?: {\n            error?: {\n                stack?: string;\n            };\n        };\n    };\n}\nconst ErrorOverlay: React.FC<ErrorOverlayProps> = props => {\n    const { query, networkError } = props;\n    const [open, setOpen] = useState(true);\n    // Log error in browser's developer console for further inspection.\n    console.error({ networkError });\n\n    if (!open) {\n        return null;\n    }\n\n    const stackTrace = get(networkError, \"result.error.stack\");\n\n    return (\n        <OverlayWrapper>\n            <div className=\"inner\">\n                <div className=\"header\">\n                    <div className=\"header__title\">\n                        <Typography use={\"headline4\"}>{networkError.message}</Typography>\n                    </div>\n                    <div className=\"header__action\">\n                        <IconButton icon={<CloseIcon />} onClick={() => setOpen(false)} />\n                    </div>\n                </div>\n                <div className=\"body\">\n                    <div className=\"body__summary\">\n                        <Typography\n                            use={\"subtitle1\"}\n                        >{t`Error occurred while executing operation:`}</Typography>\n                        <Pre>\n                            <code>{query}</code>\n                        </Pre>\n                    </div>\n                    {stackTrace && (\n                        <div className=\"body__description\">\n                            <Typography use={\"subtitle1\"}>{t`Complete stack trace:`}</Typography>\n                            <Pre>\n                                <code>{stackTrace}</code>\n                            </Pre>\n                        </div>\n                    )}\n                </div>\n                <div className=\"footer\">\n                    <Typography use={\"body2\"}>\n                        {t`\n                        This screen is only visible if {message} environment variable is set.\n                        Read more about it in the {link}. `({\n                            message: <span className={\"highlight\"}>`REACT_APP_DEBUG=true`</span>,\n                            link: (\n                                <a\n                                    href={ENVIRONMENT_VARIABLES_ARTICLE_LINK}\n                                    target={\"_blank\"}\n                                    rel={\"noreferrer noopener\"}\n                                >\n                                    environment variables article\n                                </a>\n                            )\n                        })}\n                        <br />\n                        {t`Open your browser's developer console to further inspect this error.`}\n                    </Typography>\n                </div>\n            </div>\n        </OverlayWrapper>\n    );\n};\n\nexport default ErrorOverlay;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAsE;AAEtE,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,2BAA2B,CAAC;AAE9C,IAAMC,kCAAkC,GACpC,iEAAiE;AAarE,IAAMC,YAAyC,GAAG,SAA5CA,YAAyC,CAAGC,KAAK,EAAI;EACvD,IAAQC,KAAK,GAAmBD,KAAK,CAA7BC,KAAK;IAAEC,YAAY,GAAKF,KAAK,CAAtBE,YAAY;EAC3B,gBAAwB,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAA/BC,IAAI;IAAEC,OAAO;EACpB;EACAC,OAAO,CAACC,KAAK,CAAC;IAAEL,YAAY,EAAZA;EAAa,CAAC,CAAC;EAE/B,IAAI,CAACE,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,IAAMI,UAAU,GAAG,IAAAC,YAAG,EAACP,YAAY,EAAE,oBAAoB,CAAC;EAE1D,oBACI,6BAAC,gCAAc,qBACX;IAAK,SAAS,EAAC;EAAO,gBAClB;IAAK,SAAS,EAAC;EAAQ,gBACnB;IAAK,SAAS,EAAC;EAAe,gBAC1B,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAY,GAAEA,YAAY,CAACQ,OAAO,CAAc,CAC/D,eACN;IAAK,SAAS,EAAC;EAAgB,gBAC3B,6BAAC,kBAAU;IAAC,IAAI,eAAE,6BAAC,0BAAS,OAAI;IAAC,OAAO,EAAE;MAAA,OAAML,OAAO,CAAC,KAAK,CAAC;IAAA;EAAC,EAAG,CAChE,CACJ,eACN;IAAK,SAAS,EAAC;EAAM,gBACjB;IAAK,SAAS,EAAC;EAAe,gBAC1B,6BAAC,sBAAU;IACP,GAAG,EAAE;EAAY,GACnBV,CAAC,6HAAyD,eAC5D,6BAAC,qBAAG,qBACA,2CAAOM,KAAK,CAAQ,CAClB,CACJ,EACLO,UAAU,iBACP;IAAK,SAAS,EAAC;EAAmB,gBAC9B,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAY,GAAEb,CAAC,2GAAqC,eACrE,6BAAC,qBAAG,qBACA,2CAAOa,UAAU,CAAQ,CACvB,CAEb,CACC,eACN;IAAK,SAAS,EAAC;EAAQ,gBACnB,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAQ,GACpBb,CAAC,iPAEkC;IAChCe,OAAO,eAAE;MAAM,SAAS,EAAE;IAAY,GAAC,wBAAsB,CAAO;IACpEC,IAAI,eACA;MACI,IAAI,EAAEb,kCAAmC;MACzC,MAAM,EAAE,QAAS;MACjB,GAAG,EAAE;IAAsB,GAC9B,+BAED;EAER,CAAC,CAAC,eACF,wCAAM,EACLH,CAAC,0JACO,CACX,CACJ,CACO;AAEzB,CAAC;AAAC,eAEaI,YAAY;AAAA"}
+{"version":3,"file":"plugins/NetworkErrorLinkPlugin/ErrorOverlay.js","sources":["../../../src/plugins/NetworkErrorLinkPlugin/ErrorOverlay.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Typography } from \"./Typography.js\";\nimport { i18n } from \"../../i18n/index.js\";\nimport { OverlayWrapper } from \"./StyledComponents.js\";\nimport { ReactComponent as CloseIcon } from \"./assets/close_24px.svg\";\n\nconst t = i18n.ns(\"app/graphql/error-overlay\");\n\nconst ENVIRONMENT_VARIABLES_ARTICLE_LINK =\n    \"https://www.webiny.com/docs/how-to-guides/environment-variables\";\n\ntype ErrorOverlayProps = Partial<{\n    title: React.ReactNode;\n    message: React.ReactNode;\n    description: React.ReactNode;\n    closeable?: boolean;\n}>;\n\nexport const ErrorOverlay = (props: ErrorOverlayProps) => {\n    const { title = \"An error occurred\", message, description, closeable } = props;\n    const [open, setOpen] = useState(true);\n    if (!open) {\n        return null;\n    }\n\n    return (\n        <OverlayWrapper>\n            <div className=\"inner\">\n                <div className=\"header\">\n                    <div className=\"header__title\">\n                        <Typography use={\"headline\"}>{title}</Typography>\n                    </div>\n                    {closeable !== false && (\n                        <div className=\"header__action\">\n                            <span onClick={() => setOpen(false)}>\n                                <CloseIcon />\n                            </span>\n                        </div>\n                    )}\n                </div>\n                <div className=\"body\">\n                    <div className=\"body__summary\">{message}</div>\n                    {description && <div className=\"body__description\">{description}</div>}\n                </div>\n                <div className=\"footer\">\n                    <Typography use={\"body\"}>\n                        {t`\n                        This screen is only visible if {message} environment variable is set.\n                        Read more about it in the {link}. `({\n                            message: <span className={\"highlight\"}>`REACT_APP_DEBUG=true`</span>,\n                            link: (\n                                <a\n                                    href={ENVIRONMENT_VARIABLES_ARTICLE_LINK}\n                                    target={\"_blank\"}\n                                    rel={\"noreferrer noopener\"}\n                                >\n                                    environment variables article\n                                </a>\n                            )\n                        })}\n                        <br />\n                        {t`Open your browser's developer console to further inspect this error.`}\n                    </Typography>\n                </div>\n            </div>\n        </OverlayWrapper>\n    );\n};\n"],"names":["t","i18n","ENVIRONMENT_VARIABLES_ARTICLE_LINK","ErrorOverlay","props","title","message","description","closeable","open","setOpen","useState","OverlayWrapper","Typography","CloseIcon"],"mappings":";;;;;AAMA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,qCACF;AASG,MAAMC,eAAe,CAACC;IACzB,MAAM,EAAEC,QAAQ,mBAAmB,EAAEC,OAAO,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ;IACzE,MAAM,CAACK,MAAMC,QAAQ,GAAGC,SAAS;IACjC,IAAI,CAACF,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACG,gBAAcA,MAAAA,WAAAA,GACX,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACC,YAAUA;QAAC,KAAK;OAAaR,SAEjCG,AAAc,UAAdA,aAAuB,WAAT,GACX,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAK,SAAS,IAAME,QAAQ;qBACzB,oBAACI,gBAASA,UAAAA,WAAAA,GAK1B,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;OAAiBR,UAC/BC,eAAe,WAAfA,GAAe,oBAAC;QAAI,WAAU;OAAqBA,eAAAA,WAAAA,GAExD,oBAAC;QAAI,WAAU;qBACX,oBAACM,YAAUA;QAAC,KAAK;OACZb,CAAC,CAAC;;0DAE+B,CAAC,CAAC;QAChC,SAAS,WAAT,GAAS,oBAAC;YAAK,WAAW;WAAa;QACvC,MAAM,WAAN,GACI,oBAAC;YACG,MAAME;YACN,QAAQ;YACR,KAAK;WACR;IAIT,kBACA,oBAAC,aACAF,CAAC,CAAC,oEAAoE,CAAC;AAMhG"}

package/plugins/NetworkErrorLinkPlugin/GqlErrorOverlay.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface ErrorOverlayProps {
+    query: string;
+    networkError: {
+        message: string;
+        result?: {
+            error?: {
+                stack?: string;
+            };
+        };
+    };
+}
+export declare const GqlErrorOverlay: (props: ErrorOverlayProps) => React.JSX.Element;
+export {};

package/plugins/NetworkErrorLinkPlugin/GqlErrorOverlay.js

@@ -0,0 +1,27 @@
+import react from "react";
+import get from "lodash/get.js";
+import { Typography } from "./Typography.js";
+import { i18n } from "../../i18n/index.js";
+import { Pre } from "./StyledComponents.js";
+import { ErrorOverlay } from "./ErrorOverlay.js";
+const t = i18n.ns("app/graphql/error-overlay");
+const GqlErrorOverlay = (props)=>{
+    const { query, networkError } = props;
+    const stackTrace = get(networkError, "result.error.stack");
+    const title = networkError.message;
+    const message = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Typography, {
+        use: "subtitle"
+    }, t`Error occurred while executing operation:`), /*#__PURE__*/ react.createElement(Pre, null, /*#__PURE__*/ react.createElement("code", null, query)));
+    let description = null;
+    if (stackTrace) description = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Typography, {
+        use: "subtitle"
+    }, t`Complete stack trace:`), /*#__PURE__*/ react.createElement(Pre, null, /*#__PURE__*/ react.createElement("code", null, stackTrace)));
+    return /*#__PURE__*/ react.createElement(ErrorOverlay, {
+        title: title,
+        message: message,
+        description: description
+    });
+};
+export { GqlErrorOverlay };
+
+//# sourceMappingURL=GqlErrorOverlay.js.map

package/plugins/NetworkErrorLinkPlugin/GqlErrorOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins/NetworkErrorLinkPlugin/GqlErrorOverlay.js","sources":["../../../src/plugins/NetworkErrorLinkPlugin/GqlErrorOverlay.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport { Typography } from \"./Typography.js\";\nimport { i18n } from \"../../i18n/index.js\";\nimport { Pre } from \"./StyledComponents.js\";\nimport { ErrorOverlay } from \"./ErrorOverlay.js\";\n\nconst t = i18n.ns(\"app/graphql/error-overlay\");\n\ninterface ErrorOverlayProps {\n    query: string;\n    networkError: {\n        message: string;\n        result?: {\n            error?: {\n                stack?: string;\n            };\n        };\n    };\n}\n\nexport const GqlErrorOverlay = (props: ErrorOverlayProps) => {\n    const { query, networkError } = props;\n    const stackTrace = get(networkError, \"result.error.stack\");\n\n    const title = networkError.message;\n\n    const message = (\n        <>\n            <Typography use={\"subtitle\"}>{t`Error occurred while executing operation:`}</Typography>\n            <Pre>\n                <code>{query}</code>\n            </Pre>\n        </>\n    );\n\n    let description: React.ReactNode = null;\n    if (stackTrace) {\n        description = (\n            <>\n                <Typography use={\"subtitle\"}>{t`Complete stack trace:`}</Typography>\n                <Pre>\n                    <code>{stackTrace}</code>\n                </Pre>\n            </>\n        );\n    }\n\n    return <ErrorOverlay title={title} message={message} description={description} />;\n};\n"],"names":["t","i18n","GqlErrorOverlay","props","query","networkError","stackTrace","get","title","message","Typography","Pre","description","ErrorOverlay"],"mappings":";;;;;;AAOA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAcX,MAAMC,kBAAkB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGF;IAChC,MAAMG,aAAaC,IAAIF,cAAc;IAErC,MAAMG,QAAQH,aAAa,OAAO;IAElC,MAAMI,UAAU,WAAVA,GACF,wDACI,oBAACC,YAAUA;QAAC,KAAK;OAAaV,CAAC,CAAC,yCAAyC,CAAC,iBAC1E,oBAACW,KAAGA,MAAAA,WAAAA,GACA,oBAAC,cAAMP;IAKnB,IAAIQ,cAA+B;IACnC,IAAIN,YACAM,cAAc,WAAdA,GACI,wDACI,oBAACF,YAAUA;QAAC,KAAK;OAAaV,CAAC,CAAC,qBAAqB,CAAC,iBACtD,oBAACW,KAAGA,MAAAA,WAAAA,GACA,oBAAC,cAAML;IAMvB,OAAO,WAAP,GAAO,oBAACO,cAAYA;QAAC,OAAOL;QAAO,SAASC;QAAS,aAAaG;;AACtE"}

package/plugins/NetworkErrorLinkPlugin/LocalAwsLambdaTimeoutMessage.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const LocalAwsLambdaTimeoutMessage: () => React.JSX.Element;

package/plugins/NetworkErrorLinkPlugin/LocalAwsLambdaTimeoutMessage.js

@@ -0,0 +1,23 @@
+import react from "react";
+import styled from "@emotion/styled";
+const Code = styled.code`
+    font-family: monospace;
+    font-size: 0.85rem;
+    line-height: 1rem;
+`;
+const LocalAwsLambdaTimeoutMessage = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, "Local AWS Lambda function execution timed out.", /*#__PURE__*/ react.createElement("br", null), /*#__PURE__*/ react.createElement("br", null), "Did you stop the\xa0", /*#__PURE__*/ react.createElement("a", {
+        href: "https://www.webiny.com/docs/core-development-concepts/basics/watch-command",
+        rel: "noreferrer noopener",
+        target: "_blank"
+    }, /*#__PURE__*/ react.createElement(Code, null, "webiny watch")), "\xa0command? If so, please restart the command or deploy your changes via the\xa0", /*#__PURE__*/ react.createElement("a", {
+        href: "https://www.webiny.com/docs/core-development-concepts/basics/project-deployment",
+        rel: "noreferrer noopener",
+        target: "_blank"
+    }, /*#__PURE__*/ react.createElement(Code, null, "webiny deploy")), "\xa0command. For example: ", /*#__PURE__*/ react.createElement(Code, null, "yarn webiny deploy api --env dev"), ".", /*#__PURE__*/ react.createElement("br", null), /*#__PURE__*/ react.createElement("br", null), "Learn more:\xa0", /*#__PURE__*/ react.createElement("a", {
+        href: "https://webiny.link/local-aws-lambda-development",
+        rel: "noreferrer noopener",
+        target: "_blank"
+    }, "https://webiny.link/local-aws-lambda-development"));
+export { LocalAwsLambdaTimeoutMessage };
+
+//# sourceMappingURL=LocalAwsLambdaTimeoutMessage.js.map

package/plugins/NetworkErrorLinkPlugin/LocalAwsLambdaTimeoutMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins/NetworkErrorLinkPlugin/LocalAwsLambdaTimeoutMessage.js","sources":["../../../src/plugins/NetworkErrorLinkPlugin/LocalAwsLambdaTimeoutMessage.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nconst Code = styled.code`\n    font-family: monospace;\n    font-size: 0.85rem;\n    line-height: 1rem;\n`;\n\nexport const LocalAwsLambdaTimeoutMessage = () => (\n    <>\n        Local AWS Lambda function execution timed out.\n        <br />\n        <br />\n        Did you stop the&nbsp;\n        <a\n            href={\"https://www.webiny.com/docs/core-development-concepts/basics/watch-command\"}\n            rel={\"noreferrer noopener\"}\n            target={\"_blank\"}\n        >\n            <Code>webiny watch</Code>\n        </a>\n        &nbsp;command? If so, please restart the command or deploy your changes via the&nbsp;\n        <a\n            href={\"https://www.webiny.com/docs/core-development-concepts/basics/project-deployment\"}\n            rel={\"noreferrer noopener\"}\n            target={\"_blank\"}\n        >\n            <Code>webiny deploy</Code>\n        </a>\n        &nbsp;command. For example: <Code>yarn webiny deploy api --env dev</Code>.\n        <br />\n        <br />\n        Learn more:&nbsp;\n        <a\n            href={\"https://webiny.link/local-aws-lambda-development\"}\n            rel={\"noreferrer noopener\"}\n            target={\"_blank\"}\n        >\n            https://webiny.link/local-aws-lambda-development\n        </a>\n    </>\n);\n"],"names":["Code","styled","LocalAwsLambdaTimeoutMessage"],"mappings":";;AAGA,MAAMA,OAAOC,OAAO,IAAI,CAAC;;;;AAIzB,CAAC;AAEM,MAAMC,+BAA+B,kBACxC,0CAAE,gEAEE,oBAAC,2BACD,oBAAC,aAAK,sCAEN,oBAAC;QACG,MAAM;QACN,KAAK;QACL,QAAQ;qBAER,oBAACF,MAAIA,MAAC,kBACN,mGAEJ,oBAAC;QACG,MAAM;QACN,KAAK;QACL,QAAQ;qBAER,oBAACA,MAAIA,MAAC,mBACN,4CACwB,oBAACA,MAAIA,MAAC,qCAAuC,mBACzE,oBAAC,2BACD,oBAAC,aAAK,iCAEN,oBAAC;QACG,MAAM;QACN,KAAK;QACL,QAAQ;OACX"}

package/plugins/NetworkErrorLinkPlugin/StyledComponents.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="react" />
-/// <reference types="react" />
-/// <reference types="web" />
 export declare const OverlayWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Pre: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, {}>;

package/plugins/NetworkErrorLinkPlugin/StyledComponents.js

@@ -1,18 +1,69 @@
-"use strict";
+import styled from "@emotion/styled";
+const OverlayWrapper = styled("div")(`
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 105; // The highest z-index value is 100 for Dialogs
+    
+    .inner {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: white;
+        padding: 1rem;
+    }
+    
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+        .header__title {
+            color: var(--mdc-theme-error);
+        }
+    }
+    
+    .body {
+        grow: 1;
+        .body__summary {
+            margin-bottom: 1rem;
+        }
+    }
+    
+    .footer {
+        color: var(--mdc-theme-text-secondary-on-background);
+        
+        .highlight {
+            background-color: rgba(251, 245, 180, 0.5);
+            padding: 0 4px;
+            border-radius: 6px;
+            font-family: monospace;
+        }
+    }
+`);
+const Pre = styled("pre")(`
+    position: relative;
+    display: block;
+    padding: 0.5em;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    border-radius: 0.25rem;
+    background-color: rgba(251, 245, 180, 0.3);
+    color: inherit;
+    
+    code {
+        font-family: monospace;
+        font-size: 0.85rem;
+        line-height: 1rem;
+    }
+`);
+export { OverlayWrapper, Pre };
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Pre = exports.OverlayWrapper = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var OverlayWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1rvk94r0",
-  label: "OverlayWrapper"
-})("\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 105; // The highest z-index value is 100 for Dialogs\n    \n    .inner {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        overflow: auto;\n        background-color: white;\n        padding: 1rem;\n    }\n    \n    .header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 1rem;\n        .header__title {\n            color: var(--mdc-theme-error);\n        }\n    }\n    \n    .body {\n        flex-grow: 1;\n        .body__summary {\n            margin-bottom: 1rem;\n        }\n    }\n    \n    .footer {\n        color: var(--mdc-theme-text-secondary-on-background);\n        \n        .highlight {\n            background-color: rgba(251, 245, 180, 0.5);\n            padding: 0 4px;\n            border-radius: 6px;\n            font-family: monospace;\n        }\n    }\n");
-exports.OverlayWrapper = OverlayWrapper;
-var Pre = /*#__PURE__*/(0, _styled.default)("pre", {
-  target: "e1rvk94r1",
-  label: "Pre"
-})("\n    position: relative;\n    display: block;\n    padding: 0.5em;\n    margin-top: 0.5em;\n    margin-bottom: 0.5em;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    border-radius: 0.25rem;\n    background-color: rgba(251, 245, 180, 0.3);\n    color: inherit;\n    \n    code {\n        font-family: monospace;\n        font-size: 0.85rem;\n        line-height: 1rem;\n    }\n");
-exports.Pre = Pre;
+//# sourceMappingURL=StyledComponents.js.map

package/plugins/NetworkErrorLinkPlugin/StyledComponents.js.map

@@ -1 +1 @@
-{"version":3,"names":["OverlayWrapper","styled","Pre"],"sources":["StyledComponents.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const OverlayWrapper = styled(\"div\")(`\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 105; // The highest z-index value is 100 for Dialogs\n    \n    .inner {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        overflow: auto;\n        background-color: white;\n        padding: 1rem;\n    }\n    \n    .header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 1rem;\n        .header__title {\n            color: var(--mdc-theme-error);\n        }\n    }\n    \n    .body {\n        flex-grow: 1;\n        .body__summary {\n            margin-bottom: 1rem;\n        }\n    }\n    \n    .footer {\n        color: var(--mdc-theme-text-secondary-on-background);\n        \n        .highlight {\n            background-color: rgba(251, 245, 180, 0.5);\n            padding: 0 4px;\n            border-radius: 6px;\n            font-family: monospace;\n        }\n    }\n`);\n\nexport const Pre = styled(\"pre\")(`\n    position: relative;\n    display: block;\n    padding: 0.5em;\n    margin-top: 0.5em;\n    margin-bottom: 0.5em;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    border-radius: 0.25rem;\n    background-color: rgba(251, 245, 180, 0.3);\n    color: inherit;\n    \n    code {\n        font-family: monospace;\n        font-size: 0.85rem;\n        line-height: 1rem;\n    }\n`);\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,4hCA8CxC;AAAC;AAEI,IAAMC,GAAG,oBAAGD,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,uYAiB7B;AAAC"}
+{"version":3,"file":"plugins/NetworkErrorLinkPlugin/StyledComponents.js","sources":["../../../src/plugins/NetworkErrorLinkPlugin/StyledComponents.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const OverlayWrapper = styled(\"div\")(`\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 105; // The highest z-index value is 100 for Dialogs\n    \n    .inner {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        overflow: auto;\n        background-color: white;\n        padding: 1rem;\n    }\n    \n    .header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 1rem;\n        .header__title {\n            color: var(--mdc-theme-error);\n        }\n    }\n    \n    .body {\n        grow: 1;\n        .body__summary {\n            margin-bottom: 1rem;\n        }\n    }\n    \n    .footer {\n        color: var(--mdc-theme-text-secondary-on-background);\n        \n        .highlight {\n            background-color: rgba(251, 245, 180, 0.5);\n            padding: 0 4px;\n            border-radius: 6px;\n            font-family: monospace;\n        }\n    }\n`);\n\nexport const Pre = styled(\"pre\")(`\n    position: relative;\n    display: block;\n    padding: 0.5em;\n    margin-top: 0.5em;\n    margin-bottom: 0.5em;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    border-radius: 0.25rem;\n    background-color: rgba(251, 245, 180, 0.3);\n    color: inherit;\n    \n    code {\n        font-family: monospace;\n        font-size: 0.85rem;\n        line-height: 1rem;\n    }\n`);\n"],"names":["OverlayWrapper","styled","Pre"],"mappings":";AAEO,MAAMA,iBAAiBC,OAAO,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8C7C,CAAC;AAEM,MAAMC,MAAMD,OAAO,OAAO,CAAC;;;;;;;;;;;;;;;;;AAiBlC,CAAC"}

package/plugins/NetworkErrorLinkPlugin/Typography.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare type TypographyT = "headline" | "body" | "subtitle";
+export interface TypographyProps {
+    use: TypographyT;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Typography: (props: TypographyProps) => React.JSX.Element;

package/plugins/NetworkErrorLinkPlugin/Typography.js

@@ -0,0 +1,13 @@
+import react from "react";
+const Typography = (props)=>{
+    const { children, use, className } = props;
+    if ("headline" === use) return /*#__PURE__*/ react.createElement("h4", {
+        className: className
+    }, children);
+    return /*#__PURE__*/ react.createElement("p", {
+        className: className
+    }, children);
+};
+export { Typography };
+
+//# sourceMappingURL=Typography.js.map

package/plugins/NetworkErrorLinkPlugin/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins/NetworkErrorLinkPlugin/Typography.js","sources":["../../../src/plugins/NetworkErrorLinkPlugin/Typography.tsx"],"sourcesContent":["import React from \"react\";\n\nexport declare type TypographyT = \"headline\" | \"body\" | \"subtitle\";\n\nexport interface TypographyProps {\n    use: TypographyT;\n    children?: React.ReactNode;\n    className?: string;\n}\n\nexport const Typography = (props: TypographyProps) => {\n    const { children, use, className } = props;\n\n    if (use === \"headline\") {\n        return <h4 className={className}>{children}</h4>;\n    }\n\n    return <p className={className}>{children}</p>;\n};\n"],"names":["Typography","props","children","use","className"],"mappings":";AAUO,MAAMA,aAAa,CAACC;IACvB,MAAM,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGH;IAErC,IAAIE,AAAQ,eAARA,KACA,OAAO,WAAP,GAAO,oBAAC;QAAG,WAAWC;OAAYF;IAGtC,OAAO,WAAP,GAAO,oBAAC;QAAE,WAAWE;OAAYF;AACrC"}

package/plugins/NetworkErrorLinkPlugin/assets/close_24px.js

@@ -0,0 +1,19 @@
+import __rslib_svgr_url__0__ from "../../../static/svg/close_24px.33adaadc.svg";
+import * as __rspack_external_react from "react";
+const SvgClose24Px = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        d: "M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4"
+    }));
+const close_24px = __rslib_svgr_url__0__;
+export default close_24px;
+export { SvgClose24Px as ReactComponent };
+
+//# sourceMappingURL=close_24px.js.map

package/plugins/NetworkErrorLinkPlugin/assets/close_24px.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins/NetworkErrorLinkPlugin/assets/close_24px.js","sources":["../../../../src/plugins/NetworkErrorLinkPlugin/assets/close_24px.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgClose24Px = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} viewBox=\"0 0 24 24\" {...props}><path fill=\"none\" d=\"M0 0h24v24H0z\" /><path d=\"M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4\" /></svg>;\nexport { SvgClose24Px as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/close_24px.33adaadc.svg\";"],"names":["SvgClose24Px","props"],"mappings":";;AACA,MAAMA,eAAeC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAa,GAAGA,KAAK;qBAAE,sCAAC;QAAK,MAAK;QAAO,GAAE;sBAAkB,sCAAC;QAAK,GAAE;;AAE1K"}

package/plugins/NetworkErrorLinkPlugin/createErrorOverlay.d.ts

@@ -1,7 +1,7 @@
-import { ServerError, ServerParseError } from "apollo-link-http-common";
+import type React from "react";
 interface CreateErrorOverlayParams {
-    query: string;
-    networkError: Error | ServerError | ServerParseError;
+    element: React.ReactElement;
+    closeable?: boolean;
 }
 declare const createErrorOverlay: (params: CreateErrorOverlayParams) => void;
 export default createErrorOverlay;

package/plugins/NetworkErrorLinkPlugin/createErrorOverlay.js

@@ -1,31 +1,15 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
-var _ErrorOverlay = _interopRequireDefault(require("./ErrorOverlay"));
-var createErrorOverlay = function createErrorOverlay(params) {
-  var query = params.query,
-    networkError = params.networkError;
-  // If the element already present in DOM, return immediately.
-  if (document.getElementById("overlay-root")) {
-    return;
-  }
-  // Create root element to hold React tree.
-  var container = document.createElement("div");
-  container.id = "overlay-root";
-  // Insert root element into body.
-  var body = document.getElementsByTagName("body")[0];
-  body.appendChild(container);
-  // Mount the ErrorOverlay component into root element.
-  (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(_ErrorOverlay.default, {
-    query: query,
-    networkError: networkError
-  }), container);
+import { createRoot } from "react-dom/client";
+const createErrorOverlay = (params)=>{
+    const { element } = params;
+    if (document.getElementById("overlay-root")) return;
+    const container = document.createElement("div");
+    container.id = "overlay-root";
+    const body = document.getElementsByTagName("body")[0];
+    body.appendChild(container);
+    const root = createRoot(container);
+    root.render(element);
 };
-var _default = createErrorOverlay;
-exports.default = _default;
+const NetworkErrorLinkPlugin_createErrorOverlay = createErrorOverlay;
+export default NetworkErrorLinkPlugin_createErrorOverlay;
+
+//# sourceMappingURL=createErrorOverlay.js.map