fix: Content-Type header added despite no request body defined in POST/PUT/PATCH endpoints

packages/elements-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

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);

packages/elements-core/src/components/TryIt/TryIt.spec.tsx

@@ -725,6 +725,56 @@ describe('TryIt', () => {
     });
   });
 
+  describe('No Request body', () => {
+    it('Adds no Content-type header 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('Adds no Content-type header 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('Adds no Content-type header 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('Adds no Content-type header 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" />);

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}

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[] => {

packages/elements-dev-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -64,9 +64,9 @@
     ]
   },
   "dependencies": {
+    "@stoplight/elements-core": "^9.0.1",
     "@stoplight/markdown-viewer": "^5.7.1",
     "@stoplight/mosaic": "^1.53.4",
-    "@stoplight/elements-core": "~9.0.0",
     "@stoplight/path": "^1.3.2",
     "@stoplight/types": "^14.0.0",
     "classnames": "^2.2.6",

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -63,7 +63,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "~9.0.0",
+    "@stoplight/elements-core": "^9.0.1",
     "@stoplight/http-spec": "^7.1.0",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.53.4",
@@ -109,4 +109,4 @@
   "release": {
     "extends": "@stoplight/scripts/release"
   }
-}
+}