Closes #6855: Bundle and locally serve GraphiQL JS/CSS

netbox/project-static/bundle.js

@@ -14,10 +14,30 @@ const options = {
 // Get CLI arguments for optional overrides.
 const ARGS = process.argv.slice(2);
 
+async function bundleGraphIQL() {
+  try {
+    const result = await esbuild.build({
+      ...options,
+      entryPoints: {
+        graphiql: 'netbox-graphiql/index.ts',
+      },
+      target: 'es2016',
+      define: {
+        global: 'window',
+      },
+    });
+    if (result.errors.length === 0) {
+      console.log(`✅ Bundled source file 'netbox-graphiql/index.ts' to 'graphiql.js'`);
+    }
+  } catch (err) {
+    console.error(err);
+  }
+}
+
 /**
- * Run script bundle jobs.
+ * Bundle Core NetBox JavaScript.
  */
-async function bundleScripts() {
+async function bundleNetBox() {
   const entryPoints = {
     netbox: 'src/index.ts',
     jobs: 'src/jobs.ts',
@@ -26,7 +46,7 @@ async function bundleScripts() {
     status: 'src/device/status.ts',
   };
   try {
-    let result = await esbuild.build({
+    const result = await esbuild.build({
       ...options,
       entryPoints,
       target: 'es2016',
@@ -42,6 +62,15 @@ async function bundleScripts() {
   }
 }
 
+/**
+ * Run script bundle jobs.
+ */
+async function bundleScripts() {
+  for (const bundle of [bundleNetBox, bundleGraphIQL]) {
+    await bundle();
+  }
+}
+
 /**
  * Run style bundle jobs.
  */
@@ -53,6 +82,7 @@ async function bundleStyles() {
       'netbox-dark': 'styles/_dark.scss',
       rack_elevation: 'styles/_rack_elevation.scss',
       cable_trace: 'styles/_cable_trace.scss',
+      graphiql: 'netbox-graphiql/graphiql.scss',
     };
     const pluginOptions = { outputStyle: 'compressed' };
     // Allow cache disabling.

netbox/project-static/netbox-graphiql/graphiql.scss

@@ -0,0 +1,3 @@
+// Rather than use CDNs to include GraphiQL dependencies, import and bundle the dependencies so
+// they can be locally served.
+@import '../node_modules/graphiql/graphiql.css';

netbox/project-static/netbox-graphiql/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Rather than use CDNs to include GraphiQL dependencies, import and bundle the dependencies so
+ * they can be locally served.
+ */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import 'graphql';
+import GraphiQL from 'graphiql';
+import SubscriptionsTransportWs from 'subscriptions-transport-ws';
+
+window.React = React;
+window.ReactDOM = ReactDOM;
+// @ts-expect-error Assigning to window is required for graphene-django
+window.SubscriptionsTransportWs = SubscriptionsTransportWs;
+// @ts-expect-error Assigning to window is required for graphene-django
+window.GraphiQL = GraphiQL;

netbox/project-static/netbox-graphiql/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "netbox-graphiql",
+  "version": "0.1.0",
+  "description": "NetBox GraphiQL Custom Front End",
+  "main": "dist/graphiql.js",
+  "license": "Apache-2.0",
+  "private": true,
+  "dependencies": {
+    "graphiql": "1.4.1",
+    "graphql": ">= v14.5.0 <= 15.5.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "subscriptions-transport-ws": "0.9.18",
+    "whatwg-fetch": "3.6.2"
+  }
+}

netbox/project-static/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "main": "dist/netbox.js",
   "license": "Apache-2.0",
+  "private": true,
+  "workspaces": [
+    "netbox-graphiql"
+  ],
   "scripts": {
     "bundle": "node bundle.js",
     "bundle:styles": "node bundle.js --styles",