fix opening doc explorer when clicking references (#2578)

graphql · Aug 4, 2022 · ab0faaf · ab0faaf
1 parent 01bc8bc
commit ab0faaf
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 24 deletions.
diff --git a/packages/graphiql-react/src/editor/completion.ts b/packages/graphiql-react/src/editor/completion.ts
@@ -1,6 +1,12 @@
 import type { Editor, EditorChange } from 'codemirror';
 import type { IHint } from 'codemirror-graphql/hint';
-import { GraphQLSchema, GraphQLType, isListType, isNonNullType } from 'graphql';
+import {
+  GraphQLNamedType,
+  GraphQLSchema,
+  GraphQLType,
+  isListType,
+  isNonNullType,
+} from 'graphql';
 
 import { ExplorerContextType } from '../explorer';
 import { markdown } from '../markdown';
@@ -15,6 +21,7 @@ export function onHasCompletion(
   data: EditorChange | undefined,
   schema: GraphQLSchema | null | undefined,
   explorer: ExplorerContextType | null,
+  callback?: (type: GraphQLNamedType) => void,
 ) {
   importCodeMirror([], { useCommonAddons: false }).then(CodeMirror => {
     let information: HTMLDivElement | null;
@@ -232,6 +239,7 @@ export function onHasCompletion(
     if (type) {
       explorer.show();
       explorer.push({ name: type.name, def: type });
+      callback?.(type);
     }
   }
 }
diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx
@@ -11,7 +11,6 @@ import { useEditorContext } from './context';
 import {
   EditCallback,
   useChangeHandler,
-  useCompletion,
   useKeyMap,
   useMergeQuery,
   usePrettifyEditors,
@@ -21,10 +20,10 @@ import { KeyMap } from './types';
 
 export type UseHeaderEditorArgs = {
   editorTheme?: string;
+  keyMap?: KeyMap;
   onEdit?: EditCallback;
   readOnly?: boolean;
   shouldPersistHeaders?: boolean;
-  keyMap?: KeyMap;
 };
 
 export function useHeaderEditor(
@@ -123,8 +122,6 @@ export function useHeaderEditor(
     useHeaderEditor,
   );
 
-  useCompletion(headerEditor, useHeaderEditor);
-
   useKeyMap(headerEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
   useKeyMap(headerEditor, ['Shift-Ctrl-P'], prettify);
   useKeyMap(headerEditor, ['Shift-Ctrl-M'], merge);

diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts
@@ -1,5 +1,6 @@
 import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 import type { EditorChange, EditorConfiguration } from 'codemirror';
+import type { SchemaReference } from 'codemirror-graphql/utils/SchemaReference';
 import copyToClipboard from 'copy-to-clipboard';
 import { parse, print } from 'graphql';
 import { useCallback, useEffect } from 'react';
@@ -90,8 +91,11 @@ export function useChangeHandler(
   ]);
 }
 
+export type OnClickReference = (reference: SchemaReference) => void;
+
 export function useCompletion(
   editor: CodeMirrorEditor | null,
+  callback: OnClickReference | null,
   caller: Function,
 ) {
   const { schema } = useSchemaContext({ nonNull: true, caller });
@@ -105,7 +109,9 @@ export function useCompletion(
       instance: CodeMirrorEditor,
       changeObj?: EditorChange,
     ) => {
-      onHasCompletion(instance, changeObj, schema, explorer);
+      onHasCompletion(instance, changeObj, schema, explorer, type => {
+        callback?.({ kind: 'Type', type, schema: schema || undefined });
+      });
     };
     editor.on(
       // @ts-expect-error @TODO additional args for hasCompletion event
@@ -118,7 +124,7 @@ export function useCompletion(
         'hasCompletion',
         handleCompletion,
       );
-  }, [editor, explorer, schema]);
+  }, [callback, editor, explorer, schema]);
 }
 
 type EmptyCallback = () => void;

diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx
@@ -28,6 +28,7 @@ import {
 import {
   CopyQueryCallback,
   EditCallback,
+  OnClickReference,
   useCompletion,
   useCopyQuery,
   useKeyMap,
@@ -38,8 +39,6 @@ import {
 import { CodeMirrorEditor, CodeMirrorType, KeyMap } from './types';
 import { normalizeWhitespace } from './whitespace';
 
-type OnClickReference = (reference: SchemaReference) => void;
-
 export type UseQueryEditorArgs = {
   editorTheme?: string;
   externalFragments?: string | FragmentDefinitionNode[];
@@ -334,7 +333,7 @@ export function useQueryEditor(
     codeMirrorRef,
   );
 
-  useCompletion(queryEditor, useQueryEditor);
+  useCompletion(queryEditor, onClickReference || null, useQueryEditor);
 
   useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
   useKeyMap(queryEditor, ['Shift-Ctrl-C'], copy);

diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx
@@ -10,6 +10,7 @@ import {
 import { useEditorContext } from './context';
 import {
   EditCallback,
+  OnClickReference,
   useChangeHandler,
   useCompletion,
   useKeyMap,
@@ -21,15 +22,17 @@ import { CodeMirrorType, KeyMap } from './types';
 
 export type UseVariableEditorArgs = {
   editorTheme?: string;
+  keyMap?: KeyMap;
+  onClickReference?: OnClickReference;
   onEdit?: EditCallback;
   readOnly?: boolean;
-  keyMap?: KeyMap;
 };
 
 export function useVariableEditor(
   {
     editorTheme = DEFAULT_EDITOR_THEME,
     keyMap = DEFAULT_KEY_MAP,
+    onClickReference,
     onEdit,
     readOnly = false,
   }: UseVariableEditorArgs = {},
@@ -140,7 +143,7 @@ export function useVariableEditor(
     useVariableEditor,
   );
 
-  useCompletion(variableEditor, useVariableEditor);
+  useCompletion(variableEditor, onClickReference || null, useVariableEditor);
 
   useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
   useKeyMap(variableEditor, ['Shift-Ctrl-P'], prettify);

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -683,6 +683,12 @@ class GraphiQLWithContext extends React.Component<
 
     const headerEditorEnabled = this.props.headerEditorEnabled ?? true;
 
+    const onClickReference = () => {
+      if (this.props.pluginResize.hiddenElement === 'first') {
+        this.props.pluginResize.setHiddenElement(null);
+      }
+    };
+
     return (
       <div data-testid="graphiql-container" className="graphiql-container">
         <div className="graphiql-sidebar">
@@ -837,14 +843,7 @@ class GraphiQLWithContext extends React.Component<
                             editorTheme={this.props.editorTheme}
                             externalFragments={this.props.externalFragments}
                             keyMap={this.props.keyMap}
-                            onClickReference={() => {
-                              if (
-                                this.props.pluginResize.hiddenElement ===
-                                'first'
-                              ) {
-                                this.props.pluginResize.setHiddenElement(null);
-                              }
-                            }}
+                            onClickReference={onClickReference}
                             onCopyQuery={this.props.onCopyQuery}
                             onEdit={this.props.onEditQuery}
                             onEditOperationName={this.props.onEditOperationName}
@@ -936,26 +935,27 @@ class GraphiQLWithContext extends React.Component<
                             : 'Headers'
                         }>
                         <VariableEditor
-                          onEdit={this.props.onEditVariables}
                           editorTheme={this.props.editorTheme}
-                          readOnly={this.props.readOnly}
                           isHidden={
                             this.state.activeSecondaryEditor !== 'variable'
                           }
                           keyMap={this.props.keyMap}
+                          onEdit={this.props.onEditVariables}
+                          onClickReference={onClickReference}
+                          readOnly={this.props.readOnly}
                         />
                         {headerEditorEnabled && (
                           <HeaderEditor
+                            editorTheme={this.props.editorTheme}
                             isHidden={
                               this.state.activeSecondaryEditor !== 'header'
                             }
-                            editorTheme={this.props.editorTheme}
+                            keyMap={this.props.keyMap}
                             onEdit={this.props.onEditHeaders}
                             readOnly={this.props.readOnly}
                             shouldPersistHeaders={
                               this.props.shouldPersistHeaders
                             }
-                            keyMap={this.props.keyMap}
                           />
                         )}
                       </section>