Move "Change schema" into the main lib (#296)

Author: IvanGoncharov

README.md

@@ -37,6 +37,7 @@ module system it is exported as `GraphQLVoyager` global variable.
   - `displayOptions.sortByAlphabet` [`boolean`, default `false`] - sort fields on graph by alphabet
   - `displayOptions.showLeafFields` [`boolean`, default `true`] - show all scalars and enums
   - `displayOptions.hideRoot` [`boolean`, default `false`] - hide the root type
+- `allowToChangeSchema` [`boolean`, default `false`] - allow users to change schema
 - `hideDocs` [`boolean`, default `false`] - hide the docs sidebar
 - `hideSettings` [`boolean`, default `false`] - hide settings panel
 - `hideVoyagerLogo` [`boolean`, default `true`] - hide voyager logo

demo/index.tsx

@@ -1,48 +1,8 @@
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import { ThemeProvider } from '@mui/material/styles';
-import { useState } from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 
 import { GraphQLVoyager } from '../src';
-import { theme } from '../src/components/MUITheme';
-import { IntrospectionModal } from './IntrospectionModal';
 import { defaultPreset, PRESETS } from './presets';
 
-interface DemoProps {
-  introspection: any;
-  presets?: { [name: string]: any };
-}
-
-function Demo(props: DemoProps) {
-  const [introspection, setIntrospection] = useState(() => props.introspection);
-  const [changeSchemaModalOpen, setChangeSchemaModalOpen] = useState(false);
-
-  return (
-    <ThemeProvider theme={theme}>
-      <GraphQLVoyager introspection={introspection} hideVoyagerLogo={false}>
-        <GraphQLVoyager.PanelHeader>
-          <Stack padding={({ panelSpacing }) => `0 ${panelSpacing}`}>
-            <Button
-              color="primary"
-              style={{ color: 'white' }}
-              variant="contained"
-              onClick={() => setChangeSchemaModalOpen(true)}
-            >
-              Change Schema
-            </Button>
-          </Stack>
-        </GraphQLVoyager.PanelHeader>
-      </GraphQLVoyager>
-      <IntrospectionModal
-        open={changeSchemaModalOpen}
-        presets={props.presets}
-        onClose={() => setChangeSchemaModalOpen(false)}
-        onChange={setIntrospection}
-      />
-    </ThemeProvider>
-  );
-}
 const currentUrl = new URL(window.location.href);
 const url = currentUrl.searchParams.get('url');
 const withCredentials = currentUrl.searchParams.get('withCredentials');
@@ -66,4 +26,11 @@ const introspection =
     : defaultPreset;
 
 const reactRoot = ReactDOMClient.createRoot(document.getElementById('root'));
-reactRoot.render(<Demo introspection={introspection} presets={PRESETS} />);
+reactRoot.render(
+  <GraphQLVoyager
+    introspection={introspection}
+    introspectionPresets={PRESETS}
+    allowToChangeSchema={true}
+    hideVoyagerLogo={false}
+  />,
+);

demo/IntrospectionModal.tsx renamed to src/components/IntrospectionModal.tsx

@@ -15,7 +15,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { buildSchema, introspectionFromSchema } from 'graphql/utilities';
 import { useState } from 'react';
 
-import { voyagerIntrospectionQuery } from '../src/utils/introspection-query';
+import { voyagerIntrospectionQuery } from '../utils/introspection-query';
 
 enum InputType {
   Presets = 'Presets',
@@ -102,15 +102,14 @@ export function IntrospectionModal(props: IntrospectionModalProps) {
   function handleSubmit() {
     switch (inputType) {
       case InputType.Presets:
-        onChange(presets[activePreset]);
+        onChange(presets[activePreset].data);
         break;
       case InputType.Introspection:
-        onChange(JSON.parse(jsonText));
+        // check for errors and check if valid
+        onChange(JSON.parse(jsonText).data);
         break;
       case InputType.SDL:
-        onChange({
-          data: introspectionFromSchema(buildSchema(sdlText)),
-        });
+        onChange(introspectionFromSchema(buildSchema(sdlText)));
         break;
     }
     setSubmitted({ inputType, sdlText, jsonText, activePreset });

src/components/Voyager.tsx

@@ -1,6 +1,8 @@
 import './Voyager.css';
 import './viewport.css';
 
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
 import { ThemeProvider } from '@mui/material/styles';
 import {
   Children,
@@ -17,6 +19,7 @@ import { extractTypeId, getSchema } from '../introspection';
 import { voyagerIntrospectionQuery } from '../utils/introspection-query';
 import DocExplorer from './doc-explorer/DocExplorer';
 import GraphViewport from './GraphViewport';
+import { IntrospectionModal } from './IntrospectionModal';
 import { theme } from './MUITheme';
 import Settings from './settings/Settings';
 import PoweredBy from './utils/PoweredBy';
@@ -45,6 +48,8 @@ const defaultDisplayOptions = {
 export interface VoyagerProps {
   introspection: IntrospectionProvider | unknown;
   displayOptions?: VoyagerDisplayOptions;
+  introspectionPresets?: { [name: string]: any };
+  allowToChangeSchema?: boolean;
   hideDocs?: boolean;
   hideSettings?: boolean;
   hideVoyagerLogo?: boolean;
@@ -53,6 +58,7 @@ export interface VoyagerProps {
 }
 
 export default function Voyager(props: VoyagerProps) {
+  const [introspectionModalOpen, setIntrospectionModalOpen] = useState(false);
   const [introspectionData, setIntrospectionData] = useState(null);
   const [displayOptions, setDisplayOptions] = useState({
     ...defaultDisplayOptions,
@@ -103,6 +109,7 @@ export default function Voyager(props: VoyagerProps) {
   const [selected, setSelected] = useState({ typeID: null, edgeID: null });
 
   const {
+    allowToChangeSchema = false,
     hideDocs = false,
     hideSettings = false,
     // TODO: switch to false in the next major version
@@ -121,10 +128,22 @@ export default function Voyager(props: VoyagerProps) {
         {!hideDocs && renderPanel()}
         {!hideSettings && renderSettings()}
         {renderGraphViewport()}
+        {allowToChangeSchema && renderIntrospectionModal()}
       </div>
     </ThemeProvider>
   );
 
+  function renderIntrospectionModal() {
+    return (
+      <IntrospectionModal
+        open={introspectionModalOpen}
+        presets={props.introspectionPresets}
+        onClose={() => setIntrospectionModalOpen(false)}
+        onChange={setIntrospectionData}
+      />
+    );
+  }
+
   function renderPanel() {
     const children = Children.toArray(props.children);
     const panelHeader = children.find(
@@ -135,6 +154,7 @@ export default function Voyager(props: VoyagerProps) {
       <div className="doc-panel">
         <div className="contents">
           {!hideVoyagerLogo && <VoyagerLogo />}
+          {allowToChangeSchema && renderChangeSchemaButton()}
           {panelHeader}
           <DocExplorer
             typeGraph={typeGraph}
@@ -150,6 +170,22 @@ export default function Voyager(props: VoyagerProps) {
     );
   }
 
+  function renderChangeSchemaButton() {
+    // TODO: generalize padding by applying it to the whole panel
+    return (
+      <Stack padding={({ panelSpacing }) => `0 ${panelSpacing}`}>
+        <Button
+          color="primary"
+          style={{ color: 'white' }}
+          variant="contained"
+          onClick={() => setIntrospectionModalOpen(true)}
+        >
+          Change Schema
+        </Button>
+      </Stack>
+    );
+  }
+
   function renderSettings() {
     if (schema == null) return null;