From 9786f336596aa5b3c152f7f3ffa0678f473c17bf Mon Sep 17 00:00:00 2001
From: Nik Nasr <nik@restate.dev>
Date: Fri, 22 Nov 2024 12:29:53 +0000
Subject: [PATCH] remove content-type header if there is no request body

Signed-off-by: Nik Nasr <nik@restate.dev>
---
 .../TryIt/Body/useTextRequestBodyState.ts     |  4 +-
 .../src/components/TryIt/TryIt.spec.tsx       | 50 +++++++++++++++++++
 .../src/components/TryIt/TryIt.tsx            |  2 +-
 .../exampleGeneration/exampleGeneration.ts    |  2 +-
 4 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/packages/elements-core/src/components/TryIt/Body/useTextRequestBodyState.ts b/packages/elements-core/src/components/TryIt/Body/useTextRequestBodyState.ts
index fc62347ae..158087e4a 100644
--- a/packages/elements-core/src/components/TryIt/Body/useTextRequestBodyState.ts
+++ b/packages/elements-core/src/components/TryIt/Body/useTextRequestBodyState.ts
@@ -12,12 +12,12 @@ import { useGenerateExampleFromMediaTypeContent } from '../../../utils/exampleGe
 export const useTextRequestBodyState = (
   mediaTypeContent: IMediaTypeContent | undefined,
   skipReadOnly: boolean,
-): [string, React.Dispatch<React.SetStateAction<string>>] => {
+): [string | undefined, React.Dispatch<React.SetStateAction<string | undefined>>] => {
   const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
     skipReadOnly,
   });
 
-  const [textRequestBody, setTextRequestBody] = React.useState<string>(initialRequestBody);
+  const [textRequestBody, setTextRequestBody] = React.useState<string | undefined>(initialRequestBody);
 
   React.useEffect(() => {
     setTextRequestBody(initialRequestBody);
diff --git a/packages/elements-core/src/components/TryIt/TryIt.spec.tsx b/packages/elements-core/src/components/TryIt/TryIt.spec.tsx
index 372172f5f..00ce8198a 100644
--- a/packages/elements-core/src/components/TryIt/TryIt.spec.tsx
+++ b/packages/elements-core/src/components/TryIt/TryIt.spec.tsx
@@ -725,6 +725,56 @@ describe('TryIt', () => {
     });
   });
 
+  describe('No Request body', () => {
+    it('with GET method', async () => {
+      render(<TryItWithPersistence httpOperation={basicOperation} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^get$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+
+    it('with POST method', async () => {
+      render(<TryItWithPersistence httpOperation={{ ...basicOperation, request: undefined, method: 'POST' }} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^post$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+
+    it('with PATCH method', async () => {
+      render(<TryItWithPersistence httpOperation={{ ...basicOperation, request: undefined, method: 'PATCH' }} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^patch$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+
+    it('with PUT method', async () => {
+      render(<TryItWithPersistence httpOperation={{ ...basicOperation, request: undefined, method: 'PUT' }} />);
+
+      clickSend();
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      const requestInit = fetchMock.mock.calls[0][1]!;
+      expect(requestInit.method).toMatch(/^put$/i);
+      const headers = new Headers(requestInit.headers);
+      expect(headers.get('Content-Type')).toBe(null);
+    });
+  });
+
   describe('Mocking', () => {
     it('Shows mock button', () => {
       render(<TryItWithPersistence httpOperation={basicOperation} mockUrl="https://mock-todos.stoplight.io" />);
diff --git a/packages/elements-core/src/components/TryIt/TryIt.tsx b/packages/elements-core/src/components/TryIt/TryIt.tsx
index 56e8595e5..8f3fab0e8 100644
--- a/packages/elements-core/src/components/TryIt/TryIt.tsx
+++ b/packages/elements-core/src/components/TryIt/TryIt.tsx
@@ -296,7 +296,7 @@ export const TryIt: React.FC<TryItProps> = ({
             values={bodyParameterValues}
             onChangeValues={setBodyParameterValues}
           />
-        ) : mediaTypeContent ? (
+        ) : mediaTypeContent && textRequestBody !== undefined ? (
           <RequestBody
             examples={mediaTypeContent.examples ?? []}
             requestBody={textRequestBody}
diff --git a/packages/elements-core/src/utils/exampleGeneration/exampleGeneration.ts b/packages/elements-core/src/utils/exampleGeneration/exampleGeneration.ts
index 9603c3146..c8f9783c0 100644
--- a/packages/elements-core/src/utils/exampleGeneration/exampleGeneration.ts
+++ b/packages/elements-core/src/utils/exampleGeneration/exampleGeneration.ts
@@ -57,7 +57,7 @@ export const generateExampleFromMediaTypeContent = (
     console.warn(e);
     return `Example cannot be created for this schema\n${e}`;
   }
-  return '';
+  return undefined;
 };
 
 export const generateExamplesFromJsonSchema = (schema: JSONSchema7 & { 'x-examples'?: unknown }): Example[] => {