chore: refactor request samples

src/components/RequestSamples/RequestSamples.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { OperationModel, RedocNormalizedOptions } from '../../services';
+import { isPayloadSample, OperationModel, RedocNormalizedOptions } from '../../services';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
 
@@ -19,15 +19,10 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
 
   render() {
     const { operation } = this.props;
-    const requestBodyContent = operation.requestBody && operation.requestBody.content;
-    const hasBodySample = requestBodyContent && requestBodyContent.hasSample;
     const samples = operation.codeSamples;
 
-    const hasSamples = hasBodySample || samples.length > 0;
-    const hideTabList =
-      samples.length + (hasBodySample ? 1 : 0) === 1
-        ? this.context.hideSingleRequestSampleTab
-        : false;
+    const hasSamples = samples.length > 0;
+    const hideTabList = samples.length === 1 ? this.context.hideSingleRequestSampleTab : false;
     return (
       (hasSamples && (
         <div>
@@ -35,23 +30,21 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
 
           <Tabs defaultIndex={0}>
             <TabList hidden={hideTabList}>
-              {hasBodySample && <Tab key="payload"> Payload </Tab>}
               {samples.map(sample => (
                 <Tab key={sample.lang + '_' + (sample.label || '')}>
                   {sample.label !== undefined ? sample.label : sample.lang}
                 </Tab>
               ))}
             </TabList>
-            {hasBodySample && (
-              <TabPanel key="payload">
-                <div>
-                  <PayloadSamples content={requestBodyContent!} />
-                </div>
-              </TabPanel>
-            )}
             {samples.map(sample => (
-              <TabPanel key={sample.lang}>
-                <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
+              <TabPanel key={sample.lang + '_' + (sample.label || '')}>
+                {isPayloadSample(sample) ? (
+                  <div>
+                    <PayloadSamples content={sample.requestBodyContent} />
+                  </div>
+                ) : (
+                  <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
+                )}
               </TabPanel>
             ))}
           </Tabs>

src/services/models/Operation.ts

@@ -27,9 +27,23 @@ import { ContentItemModel, ExtendedOpenAPIOperation } from '../MenuBuilder';
 import { OpenAPIParser } from '../OpenAPIParser';
 import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import { FieldModel } from './Field';
+import { MediaContentModel } from './MediaContent';
 import { RequestBodyModel } from './RequestBody';
 import { ResponseModel } from './Response';
 
+interface XPayloadSample {
+  lang: 'payload';
+  label: string;
+  requestBodyContent: MediaContentModel;
+  source: string;
+}
+
+export function isPayloadSample(
+  sample: XPayloadSample | OpenAPIXCodeSample,
+): sample is XPayloadSample {
+  return sample.lang === 'payload' && (sample as any).requestBodyContent;
+}
+
 /**
  * Operation model ready to be used by components
  */
@@ -62,7 +76,7 @@ export class OperationModel implements IMenuItem {
   path: string;
   servers: OpenAPIServer[];
   security: SecurityRequirementModel[];
-  codeSamples: OpenAPIXCodeSample[];
+  codeSamples: Array<OpenAPIXCodeSample | XPayloadSample>;
   extensions: Dict<any>;
 
   constructor(
@@ -89,8 +103,21 @@ export class OperationModel implements IMenuItem {
     this.httpVerb = operationSpec.httpVerb;
     this.deprecated = !!operationSpec.deprecated;
     this.operationId = operationSpec.operationId;
-    this.codeSamples = operationSpec['x-code-samples'] || [];
     this.path = operationSpec.pathName;
+    this.codeSamples = operationSpec['x-code-samples'] || [];
+
+    const requestBodyContent = this.requestBody && this.requestBody.content;
+    if (requestBodyContent && requestBodyContent.hasSample) {
+      this.codeSamples = [
+        {
+          lang: 'payload',
+          label: 'Payload',
+          source: '',
+          requestBodyContent,
+        },
+        ...this.codeSamples,
+      ];
+    }
 
     const pathInfo = parser.byRef<OpenAPIPath>(
       JsonPointer.compile(['paths', operationSpec.pathName]),