feat: support label for x-code-samples

fixes #586

docs/redoc-vendor-extensions.md

@@ -173,6 +173,7 @@ Operation code sample
 | Field Name  |	Type	   | Description  |
 | :---------- | :------: | :----------- |
 | lang        | string   | Code sample language. Value should be one of the following [list](https://github.com/github/linguist/blob/master/lib/linguist/popular.yml) |
+| label       | string?   | Code sample label e.g. `Node` or `Python2.7`, _optional_, `lang` will be used by default |
 | source      | string   | Code sample source code |
 
 

src/components/RequestSamples/RequestSamples.tsx

@@ -29,13 +29,16 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
           <Tabs defaultIndex={0}>
             <TabList>
               {hasBodySample && <Tab key="payload"> Payload </Tab>}
-              {samples.map(sample => <Tab key={sample.lang}>{sample.lang}</Tab>)}
+              {samples.map(sample => (
+                <Tab key={sample.lang}>
+                  {sample.label !== undefined ? sample.label : sample.lang}
+                </Tab>
+              ))}
             </TabList>
             {hasBodySample && (
               <TabPanel key="payload">
                 <div>
-                  {' '}
+                  <PayloadSamples content={requestBodyContent!} />
-                  <PayloadSamples content={requestBodyContent!} />{' '}
                 </div>
               </TabPanel>
             )}

src/services/models/Operation.ts

@@ -4,7 +4,7 @@ import { IMenuItem } from '../MenuStore';
 import { GroupModel } from './Group.model';
 import { SecurityRequirementModel } from './SecurityRequirement';
 
-import { OpenAPIExternalDocumentation, OpenAPIServer } from '../../types';
+import { OpenAPIExternalDocumentation, OpenAPIServer, OpenAPIXCodeSample } from '../../types';
 
 import {
   getOperationSummary,
@@ -22,7 +22,7 @@ import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import { FieldModel } from './Field';
 import { RequestBodyModel } from './RequestBody';
 import { ResponseModel } from './Response';
-import { CodeSample } from './types';
+
 /**
  * Operation model ready to be used by components
  */
@@ -52,7 +52,7 @@ export class OperationModel implements IMenuItem {
   path: string;
   servers: OpenAPIServer[];
   security: SecurityRequirementModel[];
-  codeSamples: CodeSample[];
+  codeSamples: OpenAPIXCodeSample[];
 
   constructor(
     private parser: OpenAPIParser,

src/services/models/index.ts

@@ -9,5 +9,4 @@ export * from './Response';
 export * from './Schema';
 export * from './Field';
 export * from './ApiInfo';
-export * from './types';
 export * from './SecuritySchemes';

src/services/models/types.ts

@@ -1,4 +0,0 @@
-export interface CodeSample {
-  lang: string;
-  source: string;
-}

src/types/open-api.d.ts

@@ -59,6 +59,7 @@ export interface OpenAPIPath {
 
 export interface OpenAPIXCodeSample {
   lang: string;
+  label?: string;
   source: string;
 }
 

src/utils/highlight.ts

@@ -43,6 +43,7 @@ export function mapLang(lang: string): string {
  * @return highlighted souce code as **html string**
  */
 export function highlight(source: string, lang: string): string {
+  lang = lang.toLowerCase();
   let grammar = Prism.languages[lang];
   if (!grammar) {
     grammar = Prism.languages[mapLang(lang)];