Add extensions tab to main GraphiQL

Author: dondonz

packages/graphiql-react/src/editor/hooks.ts

@@ -41,7 +41,7 @@ export function useChangeHandler(
   editor: CodeMirrorEditor | null,
   callback: ((value: string) => void) | undefined,
   storageKey: string | null,
-  tabProperty: 'variables' | 'headers',
+  tabProperty: 'variables' | 'headers' | 'extensions',
   caller: Function,
 ) {
   const { updateActiveTabValues } = useEditorContext({ nonNull: true, caller });

packages/graphiql-react/src/provider.tsx

@@ -47,6 +47,7 @@ export function GraphiQLProvider({
   storage,
   validationRules,
   variables,
+  extensions,
   visiblePlugin,
 }: GraphiQLProviderProps) {
   return (
@@ -65,6 +66,7 @@ export function GraphiQLProvider({
           shouldPersistHeaders={shouldPersistHeaders}
           validationRules={validationRules}
           variables={variables}
+          extensions={extensions}
         >
           <SchemaContextProvider
             dangerouslyAssumeSchemaIsValid={dangerouslyAssumeSchemaIsValid}

packages/graphiql/src/components/GraphiQL.tsx

@@ -24,6 +24,7 @@ import {
   CopyIcon,
   Dialog,
   ExecuteButton,
+  ExtensionEditor,
   GraphiQLProvider,
   GraphiQLProviderProps,
   HeaderEditor,
@@ -45,6 +46,7 @@ import {
   useDragResize,
   useEditorContext,
   useExecutionContext,
+  UseExtensionEditorArgs,
   UseHeaderEditorArgs,
   useMergeQuery,
   usePluginContext,
@@ -120,6 +122,7 @@ export function GraphiQL({
   storage,
   validationRules,
   variables,
+  extensions,
   visiblePlugin,
   defaultHeaders,
   ...props
@@ -159,6 +162,7 @@ export function GraphiQL({
       storage={storage}
       validationRules={validationRules}
       variables={variables}
+      extensions={extensions}
     >
       <GraphiQLInterface
         showPersistHeadersSettings={shouldPersistHeaders !== false}
@@ -181,6 +185,7 @@ export type GraphiQLInterfaceProps = WriteableEditorProps &
   AddSuffix<Pick<UseQueryEditorArgs, 'onEdit'>, 'Query'> &
   Pick<UseQueryEditorArgs, 'onCopyQuery'> &
   AddSuffix<Pick<UseVariableEditorArgs, 'onEdit'>, 'Variables'> &
+  AddSuffix<Pick<UseExtensionEditorArgs, 'onEdit'>, 'Extensions'> &
   AddSuffix<Pick<UseHeaderEditorArgs, 'onEdit'>, 'Headers'> &
   Pick<UseResponseEditorArgs, 'responseTooltip'> & {
     children?: ReactNode;
@@ -189,11 +194,12 @@ export type GraphiQLInterfaceProps = WriteableEditorProps &
      * - `false` hides the editor tools
      * - `true` shows the editor tools
      * - `'variables'` specifically shows the variables editor
+     * - `'extensions'` specifically shows the extensions editor
      * - `'headers'` specifically shows the headers editor
      * By default the editor tools are initially shown when at least one of the
      * editors has contents.
      */
-    defaultEditorToolsVisibility?: boolean | 'variables' | 'headers';
+    defaultEditorToolsVisibility?: boolean | 'variables' | 'extensions' | 'headers';
     /**
      * Toggle if the headers editor should be shown inside the editor tools.
      * @default true
@@ -249,6 +255,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
     initiallyHidden: (() => {
       if (
         props.defaultEditorToolsVisibility === 'variables' ||
+        props.defaultEditorToolsVisibility === 'extensions' ||
         props.defaultEditorToolsVisibility === 'headers'
       ) {
         return;
@@ -258,7 +265,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
         return props.defaultEditorToolsVisibility ? undefined : 'second';
       }
 
-      return editorContext.initialVariables || editorContext.initialHeaders
+      return (editorContext.initialVariables || editorContext.initialExtensions || editorContext.initialHeaders)
         ? undefined
         : 'second';
     })(),
@@ -267,19 +274,24 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   });
 
   const [activeSecondaryEditor, setActiveSecondaryEditor] = useState<
-    'variables' | 'headers'
+    'variables' | 'extensions' | 'headers'
   >(() => {
     if (
       props.defaultEditorToolsVisibility === 'variables' ||
+      props.defaultEditorToolsVisibility === 'extensions' ||
       props.defaultEditorToolsVisibility === 'headers'
     ) {
       return props.defaultEditorToolsVisibility;
     }
-    return !editorContext.initialVariables &&
-      editorContext.initialHeaders &&
-      isHeadersEditorEnabled
-      ? 'headers'
-      : 'variables';
+
+    if (editorContext.initialVariables) {
+      return 'variables';
+    } if (editorContext.initialHeaders && isHeadersEditorEnabled) {
+      return 'headers';
+    } if (editorContext.initialExtensions) {
+      return 'extensions';
+    }
+    return 'variables';
   });
   const [showDialog, setShowDialog] = useState<
     'settings' | 'short-keys' | null
@@ -318,6 +330,16 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
     isChildComponentType(child, GraphiQL.Footer),
   );
 
+  const tabName = (currentTab: String) => {
+    if (currentTab === 'variables') {
+      return 'Variables';
+    } if (currentTab === 'extensions') {
+      return 'Extensions';
+    } if (currentTab === 'headers') {
+      return 'Headers';
+    }
+  };
+  
   const onClickReference = useCallback(() => {
     if (pluginResize.hiddenElement === 'first') {
       pluginResize.setHiddenElement(null);
@@ -390,7 +412,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
         editorToolsResize.setHiddenElement(null);
       }
       setActiveSecondaryEditor(
-        event.currentTarget.dataset.name as 'variables' | 'headers',
+        event.currentTarget.dataset.name as 'variables' | 'extensions' | 'headers',
       );
     },
     [editorToolsResize],
@@ -618,6 +640,19 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                           Headers
                         </UnStyledButton>
                       )}
+                      <UnStyledButton
+                          type="button"
+                          className={
+                            activeSecondaryEditor === 'extensions' &&
+                            editorToolsResize.hiddenElement !== 'second'
+                                ? 'active'
+                                : ''
+                          }
+                          onClick={handleToolsTabClick}
+                          data-name="extensions"
+                      >
+                        Extensions
+                      </UnStyledButton>
 
                       <Tooltip
                         label={
@@ -655,11 +690,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                   <div ref={editorToolsResize.secondRef}>
                     <section
                       className="graphiql-editor-tool"
-                      aria-label={
-                        activeSecondaryEditor === 'variables'
-                          ? 'Variables'
-                          : 'Headers'
-                      }
+                      aria-label={tabName(activeSecondaryEditor)}
                     >
                       <VariableEditor
                         editorTheme={props.editorTheme}
@@ -680,8 +711,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
                       )}
                       <ExtensionEditor
                         editorTheme={props.editorTheme}
-                        // isHidden={activeSecondaryEditor !== 'headers'}
-                        isHidden={false}
+                        isHidden={activeSecondaryEditor !== 'extensions'}
                         keyMap={props.keyMap}
                         onEdit={props.onEditExtensions}
                         readOnly={props.readOnly}