add back global headers

fern-api · Oct 9, 2024 · 7ec3b07 · 7ec3b07
1 parent b4e9fa4
commit 7ec3b07
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/packages/ui/app/src/api-reference/web-socket/WebSocket.tsx b/packages/ui/app/src/api-reference/web-socket/WebSocket.tsx
@@ -57,7 +57,7 @@ interface WebhookContentProps {
 }
 
 const WebhookContent: FC<WebhookContentProps> = ({ context, breadcrumb, isLastInApi }) => {
-    const { channel, node, types } = context;
+    const { channel, node, types, globalHeaders } = context;
 
     const ref = useRef<HTMLDivElement>(null);
     useApiPageCenterElement(ref, node.slug);
@@ -103,8 +103,11 @@ const WebhookContent: FC<WebhookContentProps> = ({ context, breadcrumb, isLastIn
 
     const [baseUrl, envId] = usePlaygroundBaseUrl(channel);
 
-    // TODO: combine with auth headers
-    const headers = channel.requestHeaders;
+    // TODO: combine with auth headers like in Endpoint.tsx
+    const headers = useMemo(
+        () => [...globalHeaders, ...(channel.requestHeaders ?? [])],
+        [channel.requestHeaders, globalHeaders],
+    );
 
     return (
         <div className={"fern-endpoint-content"} ref={ref} id={useHref(node.slug)}>

diff --git a/packages/ui/app/src/playground/PlaygroundWebSocketHandshakeForm.tsx b/packages/ui/app/src/playground/PlaygroundWebSocketHandshakeForm.tsx
@@ -62,7 +62,9 @@ export const PlaygroundWebSocketHandshakeForm: FC<PlaygroundWebSocketHandshakeFo
         return null;
     }
 
-    const { auth, channel, types } = context;
+    const { auth, channel, types, globalHeaders } = context;
+
+    const headers = [...globalHeaders, ...(channel.requestHeaders ?? [])];
 
     return (
         <>
@@ -75,15 +77,15 @@ export const PlaygroundWebSocketHandshakeForm: FC<PlaygroundWebSocketHandshakeFo
             {auth != null && <PlaygroundAuthorizationFormCard auth={auth} disabled={disabled} />}
 
             <div className="col-span-2 space-y-8">
-                {channel.requestHeaders && channel.requestHeaders.length > 0 && (
+                {headers.length > 0 && (
                     <div>
                         <div className="mb-4 px-4">
                             <h5 className="t-muted m-0">Headers</h5>
                         </div>
                         <FernCard className="rounded-xl p-4 shadow-sm">
                             <PlaygroundObjectPropertiesForm
                                 id="header"
-                                properties={channel.requestHeaders}
+                                properties={headers}
                                 onChange={setHeaders}
                                 value={formState?.headers}
                                 types={types}

diff --git a/packages/ui/app/src/playground/endpoint/PlaygroundEndpointForm.tsx b/packages/ui/app/src/playground/endpoint/PlaygroundEndpointForm.tsx
@@ -2,7 +2,7 @@ import type { EndpointContext } from "@fern-api/fdr-sdk/api-definition";
 import { unwrapObjectType, unwrapReference } from "@fern-api/fdr-sdk/api-definition";
 import { EMPTY_ARRAY, visitDiscriminatedUnion } from "@fern-ui/core-utils";
 import { isEmpty } from "lodash-es";
-import { Dispatch, FC, SetStateAction, useCallback } from "react";
+import { Dispatch, FC, SetStateAction, useCallback, useMemo } from "react";
 import { PlaygroundFileUploadForm } from "../form/PlaygroundFileUploadForm";
 import { PlaygroundObjectPropertiesForm } from "../form/PlaygroundObjectPropertyForm";
 import { PlaygroundTypeReferenceForm } from "../form/PlaygroundTypeReferenceForm";
@@ -18,7 +18,7 @@ interface PlaygroundEndpointFormProps {
 }
 
 export const PlaygroundEndpointForm: FC<PlaygroundEndpointFormProps> = ({
-    context: { endpoint, types },
+    context: { endpoint, types, globalHeaders },
     formState,
     setFormState,
     ignoreHeaders,
@@ -95,15 +95,19 @@ export const PlaygroundEndpointForm: FC<PlaygroundEndpointFormProps> = ({
         [setBody],
     );
 
+    const headers = useMemo(() => {
+        return [...globalHeaders, ...(endpoint.requestHeaders ?? EMPTY_ARRAY)];
+    }, [endpoint.requestHeaders, globalHeaders]);
+
     return (
         <>
-            {!isEmpty(endpoint.requestHeaders) && (
+            {!isEmpty(headers) && (
                 <PlaygroundEndpointFormSection ignoreHeaders={ignoreHeaders} title="Headers">
                     <PlaygroundObjectPropertiesForm
                         id="header"
-                        properties={endpoint.requestHeaders ?? EMPTY_ARRAY}
+                        properties={headers}
                         onChange={setHeaders}
-                        value={formState?.headers}
+                        value={headers}
                         types={types}
                     />
                 </PlaygroundEndpointFormSection>

diff --git a/packages/ui/app/src/playground/utils/endpoints.ts b/packages/ui/app/src/playground/utils/endpoints.ts
@@ -10,7 +10,10 @@ export function getInitialEndpointRequestFormState(
 ): PlaygroundEndpointRequestFormState {
     return {
         type: "endpoint",
-        headers: getEmptyValueForObjectProperties(ctx?.endpoint?.requestHeaders, ctx?.types ?? EMPTY_OBJECT),
+        headers: getEmptyValueForObjectProperties(
+            [...(ctx?.globalHeaders ?? []), ...(ctx?.endpoint?.requestHeaders ?? [])],
+            ctx?.types ?? EMPTY_OBJECT,
+        ),
         pathParameters: getEmptyValueForObjectProperties(ctx?.endpoint?.pathParameters, ctx?.types ?? EMPTY_OBJECT),
         queryParameters: getEmptyValueForObjectProperties(ctx?.endpoint?.queryParameters, ctx?.types ?? EMPTY_OBJECT),
         body: getEmptyValueForHttpRequestBody(ctx?.endpoint?.request?.body, ctx?.types ?? EMPTY_OBJECT),

diff --git a/packages/ui/app/src/playground/utils/websocket.ts b/packages/ui/app/src/playground/utils/websocket.ts
@@ -5,7 +5,10 @@ import { getEmptyValueForObjectProperties, getEmptyValueForType } from "./defaul
 export function getInitialWebSocketRequestFormState(context: WebSocketContext): PlaygroundWebSocketRequestFormState {
     return {
         type: "websocket",
-        headers: getEmptyValueForObjectProperties(context.channel.requestHeaders, context.types),
+        headers: getEmptyValueForObjectProperties(
+            [...context.globalHeaders, ...(context.channel.requestHeaders ?? [])],
+            context.types,
+        ),
         pathParameters: getEmptyValueForObjectProperties(context.channel.pathParameters, context.types),
         queryParameters: getEmptyValueForObjectProperties(context.channel.queryParameters, context.types),
         messages: Object.fromEntries(