lab to append active operation headers to introspection header

.changeset/ripe-loops-drum.md

@@ -0,0 +1,6 @@
+---
+'@graphql-hive/laboratory': patch
+'@graphql-hive/render-laboratory': patch
+---
+
+Hive laboratory introspection query to include active tab headers

packages/libraries/laboratory/src/components/laboratory/builder.tsx

@@ -19,6 +19,7 @@ import {
   ListTreeIcon,
   RotateCcwIcon,
   SearchIcon,
+  SettingsIcon,
   TextAlignStartIcon,
 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -759,7 +760,17 @@ export const Builder = (props: {
   operationName?: string | null;
   isReadOnly?: boolean;
 }) => {
-  const { schema, activeOperation, endpoint, setEndpoint, defaultEndpoint } = useLaboratory();
+  const {
+    schema,
+    activeOperation,
+    endpoint,
+    setEndpoint,
+    defaultEndpoint,
+    tabs,
+    addTab,
+    setActiveTab,
+    shouldPollSchema,
+  } = useLaboratory();
 
   const [endpointValue, setEndpointValue] = useState<string>(endpoint ?? '');
   const [searchValue, setSearchValue] = useState<string>('');
@@ -845,23 +856,45 @@ export const Builder = (props: {
 
   return (
     <div className="bg-card flex size-full flex-col overflow-hidden">
-      <div className="flex items-center px-3 pt-3">
+      <div className="flex items-center gap-3 px-3 pt-3">
         <span className="text-base font-medium">Builder</span>
-        <div className="ml-auto flex items-center">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                onClick={() => setOpenPaths([])}
-                variant="ghost"
-                size="icon-sm"
-                className="p-1! size-6 rounded-sm"
-                disabled={openPaths.length === 0}
-              >
-                <CopyMinusIcon className="text-muted-foreground size-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Collapse all</TooltipContent>
-          </Tooltip>
+        <div className="ml-auto flex items-center gap-3">
+          {shouldPollSchema && (
+            <Button
+              onClick={() => {
+                const tab =
+                  tabs.find(t => t.type === 'settings') ??
+                  addTab({
+                    type: 'settings',
+                    data: {},
+                  });
+
+                setActiveTab(tab);
+              }}
+              variant="ghost"
+              size="sm"
+              className="p-1! h-6 rounded-sm !px-1.5"
+            >
+              <SettingsIcon className="size-4" />
+              Introspection settings
+            </Button>
+          )}
+          <div className="flex items-center">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={() => setOpenPaths([])}
+                  variant="ghost"
+                  size="icon-sm"
+                  className="p-1! size-6 rounded-sm"
+                  disabled={openPaths.length === 0}
+                >
+                  <CopyMinusIcon className="text-muted-foreground size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Collapse all</TooltipContent>
+            </Tooltip>
+          </div>
         </div>
       </div>
       <div className="px-3 pt-3">

packages/libraries/laboratory/src/components/laboratory/editor.tsx

@@ -12,6 +12,7 @@ import { OperationDefinitionNode, parse } from 'graphql';
 import * as monaco from 'monaco-editor';
 import { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js';
 import { initializeMode } from 'monaco-graphql/initializeMode';
+import { cn } from '@/lib/utils';
 import MonacoEditor, { loader } from '@monaco-editor/react';
 import { useLaboratory } from './context';
 
@@ -84,7 +85,7 @@ const darkTheme: monaco.editor.IStandaloneThemeData = {
   ],
   colors: {
     'editor.foreground': '#f6f8fa',
-    'editor.background': '#0f1214',
+    'editor.background': '#0f121400',
     'editor.selectionBackground': '#2A2F34',
     'editor.inactiveSelectionBackground': '#2A2F34',
     'editor.lineHighlightBackground': '#2A2F34',
@@ -354,10 +355,10 @@ const EditorInner = forwardRef<EditorHandle, EditorProps>((props, ref) => {
   }
 
   return (
-    <div className="size-full overflow-hidden">
+    <div className={cn('size-full overflow-hidden', props.className)}>
       <MonacoEditor
-        className="size-full"
         {...props}
+        className="size-full"
         theme={theme === 'dark' ? 'hive-laboratory-dark' : 'hive-laboratory-light'}
         onMount={handleMount}
         loading={null}

packages/libraries/laboratory/src/components/laboratory/laboratory.tsx

@@ -514,15 +514,10 @@ export const Laboratory = (
   const pluginsApi = usePlugins(props);
   const testsApi = useTests(props);
   const tabsApi = useTabs(props);
-  const endpointApi = useEndpoint({
-    ...props,
-    settingsApi,
-  });
   const collectionsApi = useCollections({
     ...props,
     tabsApi,
   });
-
   const operationsApi = useOperations({
     ...props,
     collectionsApi,
@@ -533,6 +528,13 @@ export const Laboratory = (
     pluginsApi,
     checkPermissions,
   });
+  const endpointApi = useEndpoint({
+    ...props,
+    settingsApi,
+    operationsApi,
+    envApi,
+    pluginsApi,
+  });
 
   const historyApi = useHistory(props);
 

packages/libraries/laboratory/src/components/laboratory/settings.tsx

@@ -1,9 +1,11 @@
+import { useEffect } from 'react';
 import { z } from 'zod';
+import { Editor } from '@/components/laboratory/editor';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { useForm } from '@tanstack/react-form';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
-import { Field, FieldGroup, FieldLabel } from '../ui/field';
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
 import { useLaboratory } from './context';
 
@@ -20,6 +22,8 @@ const settingsFormSchema = z.object({
   introspection: z.object({
     method: z.enum(['GET', 'POST']).optional(),
     schemaDescription: z.boolean().optional(),
+    headers: z.string().optional(),
+    includeActiveOperationHeaders: z.boolean().optional(),
   }),
 });
 
@@ -31,19 +35,17 @@ export const Settings = () => {
     validators: {
       onSubmit: settingsFormSchema,
     },
-    onSubmit: ({ value }) => {
-      setSettings(value as typeof settings);
-    },
   });
 
+  useEffect(() => {
+    form.store.subscribe(state => {
+      setSettings(state.currentVal.values);
+    });
+  }, [setSettings]);
+
   return (
     <div className="bg-card size-full overflow-y-auto p-3">
-      <form
-        id="settings-form"
-        onSubmit={form.handleSubmit}
-        onChange={form.handleSubmit}
-        className="mx-auto flex max-w-2xl flex-col gap-4"
-      >
+      <form id="settings-form" className="mx-auto flex max-w-2xl flex-col gap-4">
         <Card>
           <CardHeader>
             <CardTitle>Fetch</CardTitle>
@@ -220,6 +222,43 @@ export const Settings = () => {
                   );
                 }}
               </form.Field>
+              <form.Field name="introspection.headers">
+                {field => {
+                  return (
+                    <Field>
+                      <FieldLabel htmlFor={field.name}>Headers</FieldLabel>
+                      <Editor
+                        value={field.state.value ?? '{}'}
+                        onChange={field.handleChange}
+                        defaultLanguage="json"
+                        theme="hive-laboratory"
+                        className="bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 h-64 rounded rounded-md border focus-within:ring-[3px]"
+                      />
+                    </Field>
+                  );
+                }}
+              </form.Field>
+              <form.Field name="introspection.includeActiveOperationHeaders">
+                {field => {
+                  return (
+                    <Field className="flex-row items-start">
+                      <Switch
+                        className="mt-0.5 !w-8"
+                        checked={field.state.value ?? false}
+                        onCheckedChange={field.handleChange}
+                      />
+                      <div>
+                        <FieldLabel htmlFor={field.name}>
+                          Include active operation headers
+                        </FieldLabel>
+                        <FieldDescription>
+                          Active operation (tab) headers will be included in the introspection query
+                        </FieldDescription>
+                      </div>
+                    </Field>
+                  );
+                }}
+              </form.Field>
             </FieldGroup>
           </CardContent>
         </Card>

packages/libraries/laboratory/src/index.css

@@ -93,6 +93,10 @@
   --destructive-foreground: var(--hive-laboratory-destructive-foreground, var(--color-neutral-1));
 
   --ring: var(--hive-laboratory-ring, var(--color-ring));
+
+  & .monaco-editor {
+    --vscode-focusBorder: transparent !important;
+  }
 }
 
 .hive-laboratory.dark {