fix: update apiKey in to be titleize (#902)

src/components/SecuritySchemes/SecuritySchemes.tsx

@@ -4,6 +4,7 @@ import { SecuritySchemesModel } from '../../services/models';
 
 import { H2, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
 import { OpenAPISecurityScheme } from '../../types';
+import { titleize } from '../../utils/helpers';
 import { Markdown } from '../Markdown/Markdown';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';
 
@@ -84,7 +85,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
                   </tr>
                   {scheme.apiKey ? (
                     <tr>
-                      <th> {scheme.apiKey.in} parameter name:</th>
+                      <th> {titleize(scheme.apiKey.in || '')} parameter name:</th>
                       <td> {scheme.apiKey.name} </td>
                     </tr>
                   ) : scheme.http ? (
@@ -93,13 +94,12 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
                         <th> HTTP Authorization Scheme </th>
                         <td> {scheme.http.scheme} </td>
                       </tr>,
-                      scheme.http.scheme === 'bearer' &&
+                      scheme.http.scheme === 'bearer' && scheme.http.bearerFormat && (
-                        scheme.http.bearerFormat && (
+                        <tr key="bearer">
-                          <tr key="bearer">
+                          <th> Bearer format </th>
-                            <th> Bearer format </th>
+                          <td> "{scheme.http.bearerFormat}" </td>
-                            <td> "{scheme.http.bearerFormat}" </td>
+                        </tr>
-                          </tr>
+                      ),
-                        ),
                     ]
                   ) : scheme.openId ? (
                     <tr>

src/utils/__tests__/helpers.test.ts

@@ -1,5 +1,5 @@
 import slugify from 'slugify';
-import { mapWithLast, appendToMdHeading, mergeObjects, safeSlugify } from '../helpers';
+import { appendToMdHeading, mapWithLast, mergeObjects, safeSlugify, titleize } from '../helpers';
 
 describe('Utils', () => {
   describe('helpers', () => {
@@ -68,5 +68,11 @@ describe('Utils', () => {
         expect(mergeObjects({}, obj1, obj2)).toEqual({ a: ['C'], b: ['D'] });
       });
     });
+
+    describe('titleize', () => {
+      test('should return the string with the first letter capitalized', () => {
+        expect(titleize('my title')).toEqual('My title');
+      });
+    });
   });
 });

src/utils/helpers.ts

@@ -166,6 +166,10 @@ export function getBasePath(serverUrl: string): string {
   return new URL(serverUrl).pathname;
 }
 
+export function titleize(text: string) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
 export function removeQueryString(serverUrl: string): string {
   const url = new URL(serverUrl);
   url.search = '';