feat: replaced graphql explorer

powerhouse-inc · Aug 15, 2024 · 0859817 · 0859817
1 parent f6456b3
commit 0859817
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 14 deletions.
diff --git a/api/package.json b/api/package.json
@@ -40,7 +40,6 @@
     "express-prom-bundle": "^7.0.0",
     "graphql": "^16.8.1",
     "graphql-middleware": "^6.1.35",
-    "graphql-playground-html": "^1.6.30",
     "graphql-playground-middleware-express": "^1.7.23",
     "graphql-request": "^7.0.1",
     "json-stringify-deterministic": "^1.0.12",

diff --git a/api/pnpm-lock.yaml b/api/pnpm-lock.yaml
diff --git a/api/src/app.ts b/api/src/app.ts
@@ -4,10 +4,10 @@ import bodyParser from 'body-parser';
 import type { Express } from 'express';
 import express from 'express';
 import promBundle from 'express-prom-bundle';
-import { renderPlaygroundPage } from 'graphql-playground-html';
 
 import { dependencies } from '../package.json';
 import prisma from './database';
+import { renderGraphqlPlayground } from './graphql/playground';
 import { getChildLogger } from './logger';
 import register from './metrics';
 
@@ -92,14 +92,7 @@ export const createApp = (): { app: Express; router: express.Router } => {
     const basePath =
       process.env.BASE_PATH === '/' ? '' : process.env.BASE_PATH || '';
     const endpoint = `${basePath}${req.params.driveId !== undefined ? `/d/${req.params.driveId}` : '/drives'}`;
-    res.send(
-      renderPlaygroundPage({
-        endpoint,
-        settings: {
-          'request.credentials': 'include'
-        }
-      })
-    );
+    res.send(renderGraphqlPlayground(endpoint));
   });
 
   // Hooks

diff --git a/api/src/graphql/playground.ts b/api/src/graphql/playground.ts
@@ -0,0 +1,63 @@
+export function renderGraphqlPlayground(
+  url: string,
+  headers: Record<string, string> = {}
+): string {
+  return `<!doctype html>
+    <html lang="en">
+      <head>
+        <title>GraphiQL</title>
+        <style>
+          body {
+            height: 100%;
+            margin: 0;
+            width: 100%;
+            overflow: hidden;
+          }
+    
+          #graphiql {
+            height: 100vh;
+          }
+        </style>
+        <script
+          crossorigin
+          src="https://unpkg.com/react@18/umd/react.production.min.js"
+        ></script>
+        <script
+          crossorigin
+          src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+        ></script>
+        <script
+          src="https://unpkg.com/graphiql/graphiql.min.js"
+          type="application/javascript"
+        ></script>
+        <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+        <script
+          src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
+          crossorigin
+        ></script>
+        <link
+          rel="stylesheet"
+          href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
+        />
+      </head>
+    
+      <body>
+        <div id="graphiql">Loading...</div>
+        <script>
+          const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+          const fetcher = GraphiQL.createFetcher({
+            url: '${url}',
+            headers: ${JSON.stringify(headers)},
+          });
+          const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+          root.render(
+            React.createElement(GraphiQL, {
+              fetcher,
+              defaultEditorToolsVisibility: true,
+              plugins: [explorerPlugin],
+            }),
+          );
+        </script>
+      </body>
+    </html>`;
+}
diff --git a/api/src/modules/document-drive/utils.ts b/api/src/modules/document-drive/utils.ts
@@ -1,6 +1,8 @@
 import { GraphQLError } from 'graphql';
 import { Context } from '../../graphql/server';
 
+const isDevelopment = process.env.NODE_ENV === 'development';
+
 export function isAdmin(user: string) {
   const { ADMIN_USERS } = process.env;
   return ADMIN_USERS?.split(',')
@@ -9,6 +11,9 @@ export function isAdmin(user: string) {
 }
 
 export async function checkUserIsAdmin(ctx: Context) {
+  if (isDevelopment) {
+    return;
+  }
   const { revokedAt, createdBy, referenceExpiryDate } = await ctx.getSession();
   if (
     process.env.ADMIN_USERS !== undefined && (

diff --git a/api/src/modules/system/user/model.ts b/api/src/modules/system/user/model.ts
@@ -23,7 +23,7 @@ export function getUserCrud(prisma: Prisma.TransactionClient) {
         update: {},
         create: { ...user }
       });
-      logger.error('Upserted user', upsertedUser);
+      logger.info('Upserted user', upsertedUser);
       return upsertedUser;
     }
   };