@gen3/frontend 0.12.4 → 0.12.5

package/dist/pages/esm/GqlQueryEditor--3qrsd-o.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import GraphiQL from 'graphiql';
+import { Text } from '@mantine/core';
+import { useCoreSelector, selectHeadersWithCSRFToken, GEN3_GUPPY_API } from '@gen3/core';
+
+/**
+ * Fetches graphql data from a graphql endpoint if one is specified, or guppy by default.
+ * @param graphQLEndpoint - The location of the graphql endpoint.
+ * @returns a component containing a GraphiQl editor
+ */ const GqlQueryEditor = ({ graphQLEndpoint })=>{
+    const [query, setQuery] = useState('');
+    const headers = useCoreSelector(selectHeadersWithCSRFToken);
+    // Typically we would put this in core but it's only used here
+    const fetcher = async (graphQLParams)=>{
+        const data = await fetch(graphQLEndpoint || `${GEN3_GUPPY_API}/graphql`, {
+            method: 'POST',
+            headers: headers,
+            body: JSON.stringify(graphQLParams)
+        });
+        return data.json().catch(()=>data.text());
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col h-full w-full",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex justify-between items-center m-2",
+                children: /*#__PURE__*/ jsx(Text, {
+                    size: "xl",
+                    fw: 500,
+                    children: "Query Graph"
+                })
+            }),
+            /*#__PURE__*/ jsx(GraphiQL, {
+                editorTheme: "light",
+                fetcher: fetcher,
+                query: query,
+                onEditQuery: setQuery,
+                children: /*#__PURE__*/ jsxs(GraphiQL.Logo, {
+                    children: [
+                        " ",
+                        null,
+                        " "
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { GqlQueryEditor as default };
+//# sourceMappingURL=GqlQueryEditor--3qrsd-o.js.map

package/dist/pages/esm/GqlQueryEditor--3qrsd-o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GqlQueryEditor--3qrsd-o.js","sources":["../../../src/features/Query/GqlQueryEditor.tsx"],"sourcesContent":["import React, { ReactElement, useState } from 'react';\nimport GraphiQL from 'graphiql';\nimport type { Fetcher } from '@graphiql/toolkit';\nimport { Text } from '@mantine/core';\nimport {\n  GEN3_GUPPY_API,\n  selectHeadersWithCSRFToken,\n  useCoreSelector,\n} from '@gen3/core';\nimport { GqlQueryEditorProps } from './types';\n\n/**\n * Fetches graphql data from a graphql endpoint if one is specified, or guppy by default.\n * @param graphQLEndpoint - The location of the graphql endpoint.\n * @returns a component containing a GraphiQl editor\n */\nconst GqlQueryEditor = ({\n  graphQLEndpoint,\n}: GqlQueryEditorProps): ReactElement => {\n  const [query, setQuery] = useState('');\n  const headers = useCoreSelector(selectHeadersWithCSRFToken);\n\n  // Typically we would put this in core but it's only used here\n  const fetcher: Fetcher = async (graphQLParams) => {\n    const data = await fetch(graphQLEndpoint || `${GEN3_GUPPY_API}/graphql`, {\n      method: 'POST',\n      headers: headers,\n      body: JSON.stringify(graphQLParams),\n    });\n    return data.json().catch(() => data.text());\n  };\n\n  return (\n    <div className=\"flex flex-col h-full w-full\">\n      <div className=\"flex justify-between items-center m-2\">\n        <Text size=\"xl\" fw={500}>\n          Query Graph\n        </Text>\n      </div>\n      <GraphiQL\n        editorTheme=\"light\"\n        fetcher={fetcher}\n        query={query}\n        onEditQuery={setQuery}\n      >\n        <GraphiQL.Logo> {null} </GraphiQL.Logo>\n      </GraphiQL>\n    </div>\n  );\n};\n\nexport default GqlQueryEditor;\n"],"names":["GqlQueryEditor","graphQLEndpoint","query","setQuery","useState","headers","useCoreSelector","selectHeadersWithCSRFToken","fetcher","graphQLParams","data","fetch","GEN3_GUPPY_API","method","body","JSON","stringify","json","catch","text","_jsxs","div","className","_jsx","Text","size","fw","GraphiQL","editorTheme","onEditQuery","Logo"],"mappings":";;;;;;AAWA;;;;AAIC,IACD,MAAMA,cAAAA,GAAiB,CAAC,EACtBC,eAAe,EACK,GAAA;AACpB,IAAA,MAAM,CAACC,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,QAAAA,CAAS,EAAA,CAAA;AACnC,IAAA,MAAMC,UAAUC,eAAAA,CAAgBC,0BAAAA,CAAAA;;AAGhC,IAAA,MAAMC,UAAmB,OAAOC,aAAAA,GAAAA;QAC9B,MAAMC,IAAAA,GAAO,MAAMC,KAAAA,CAAMV,eAAAA,IAAmB,GAAGW,cAAAA,CAAe,QAAQ,CAAC,EAAE;YACvEC,MAAAA,EAAQ,MAAA;YACRR,OAAAA,EAASA,OAAAA;YACTS,IAAAA,EAAMC,IAAAA,CAAKC,SAAS,CAACP,aAAAA;AACvB,SAAA,CAAA;AACA,QAAA,OAAOC,KAAKO,IAAI,EAAA,CAAGC,KAAK,CAAC,IAAMR,KAAKS,IAAI,EAAA,CAAA;AAC1C,IAAA,CAAA;AAEA,IAAA,qBACEC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,SAAAA,EAAU,6BAAA;;0BACbC,GAAA,CAACF,KAAAA,EAAAA;gBAAIC,SAAAA,EAAU,uCAAA;AACb,gBAAA,QAAA,gBAAAC,GAAA,CAACC,IAAAA,EAAAA;oBAAKC,IAAAA,EAAK,IAAA;oBAAKC,EAAAA,EAAI,GAAA;AAAK,oBAAA,QAAA,EAAA;;;0BAI3BH,GAAA,CAACI,QAAAA,EAAAA;gBACCC,WAAAA,EAAY,OAAA;gBACZpB,OAAAA,EAASA,OAAAA;gBACTN,KAAAA,EAAOA,KAAAA;gBACP2B,WAAAA,EAAa1B,QAAAA;wCAEbiB,IAAA,CAACO,SAASG,IAAI,EAAA;;AAAC,wBAAA,GAAA;AAAE,wBAAA,IAAA;AAAK,wBAAA;;;;;;AAI9B;;;;"}

package/dist/pages/esm/QueryPanel-D4MUqmA6.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import dynamic from 'next/dynamic';
+import 'react';
+import { LoadingOverlay } from '@mantine/core';
+
+// Wrapper function for displaying loading element before GqlQueryEditor renders
+const GqlQueryEditor = dynamic(()=>import('./GqlQueryEditor--3qrsd-o.js'), {
+    loading: ()=>/*#__PURE__*/ jsx(LoadingOverlay, {
+            visible: true
+        }),
+    ssr: false
+});
+const QueryPanel = ({ graphQLEndpoint })=>{
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return /*#__PURE__*/ jsx(GqlQueryEditor, {
+        graphQLEndpoint: graphQLEndpoint
+    });
+};
+
+export { QueryPanel as default };
+//# sourceMappingURL=QueryPanel-D4MUqmA6.js.map

package/dist/pages/esm/QueryPanel-D4MUqmA6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryPanel-D4MUqmA6.js","sources":["../../../src/features/Query/QueryPanel.tsx"],"sourcesContent":["import dynamic from 'next/dynamic';\nimport React from 'react';\nimport { LoadingOverlay } from '@mantine/core';\n\n// Wrapper function for displaying loading element before GqlQueryEditor renders\nconst GqlQueryEditor = dynamic(() => import('./GqlQueryEditor'), {\n  loading: () => <LoadingOverlay visible={true} />,\n  ssr: false,\n});\n\ninterface QueryPanelProps {\n  graphQLEndpoint?: string;\n  title?: string;\n}\n\nconst QueryPanel = ({\n  graphQLEndpoint,\n}: QueryPanelProps) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  return <GqlQueryEditor graphQLEndpoint={graphQLEndpoint} />;\n};\n\nexport default QueryPanel;\n"],"names":["GqlQueryEditor","dynamic","loading","_jsx","LoadingOverlay","visible","ssr","QueryPanel","graphQLEndpoint"],"mappings":";;;;;AAIA;AACA,MAAMA,cAAAA,GAAiBC,OAAAA,CAAQ,IAAM,OAAO,8BAAA,CAAA,EAAqB;AAC/DC,IAAAA,OAAAA,EAAS,kBAAMC,GAAA,CAACC,cAAAA,EAAAA;YAAeC,OAAAA,EAAS;;IACxCC,GAAAA,EAAK;AACP,CAAA,CAAA;AAOA,MAAMC,UAAAA,GAAa,CAAC,EAClBC,eAAe,EACC,GAAA;;;AAGhB,IAAA,qBAAOL,GAAA,CAACH,cAAAA,EAAAA;QAAeQ,eAAAA,EAAiBA;;AAC1C;;;;"}