Merge pull request #11 from Bandwidth/classNames

DX-2817 Support classNames

docs/css.md

@@ -0,0 +1,67 @@
+---
+title: Redoc CSS Guide
+---
+
+# Custom CSS Overrides Guide
+
+Certain components and containers in this project have been given unique classNames to allow for easier CSS overriding.
+
+## List of Unique ClassNames
+
+### Operations
+
+ - `middle-panel`: top level container for content in the middle panel of an **Operation**
+ - `right-panel`: top level container for content in the right panel of an **Operation**
+ - `operation-header`: `<h2>` that contains the **Operation** header/summary
+ - `operation-description`: container for the **Operation** description
+
+### Security
+
+ - `operation-security`: top level container for the Security/Auth section in an **Operation**
+ - `security-details`: container for an individual security method in the Security/Auth section
+
+### Parameters
+ - `operation-parameters`: container for **Operation** query/path/header/form parameters
+
+### Requests
+
+ - `operation-request-samples`: top level container for the **Request Samples** section in the right panel
+ - `request-code-sample`: container for the request code samples in the right panel
+ - `request-payload`: container for the request payload sample in the right panel
+
+### Responses
+
+ - `operation-responses`: top level container for the **Responses** section in the middle panel
+ - `response`: container for individual responses in the **Responses** section
+ - `response-headers`: `<tbody>` for response headers for an individual response
+ - `operation-response-samples`: top level container for the **Response Samples** section in the right panel
+ - `response-sample`: container for the response payload sample in the right panel
+
+### Callbacks
+
+ - `callbacks`: top level container for the **Callbacks** section in the middle panel
+ - `callback`: container for individual callbacks in the **Callbacks** section
+ - `operation-callback-samples`: top level container for the **Callback Samples** section in the right panel
+ - `callback-sample`: container for the callback payload sample in the right panel
+
+### Schemas
+
+ - `array-schema`: container for array schema
+ - `object-schema`: `<tbody>` for object schema
+ - `oneOf-schema`: container for oneOf schema
+ - `recursive-schema` container for recursive schema
+
+### Fields
+
+ - `field`: `<tr>` for individual fields inside a **Schema**
+ - `field-details`: container for details on an individual **Field**
+ - `field-constraints`: `<span>` for constraints on an individual **Field** inside the field details
+ - `field-deprecated`: deprecated badge for an individual **Field** inside the field details
+ - `field-example`: example value for an individual **Field** inside the field details
+ - `field-pattern`: regex pattern for an individual **Field** inside the field details
+
+### Other
+
+ - `side-menu`: top level container for the sidebar menu
+ - `endpoint`: container for the endpoint URL used in multiple places
+ - `request-body-description`: container for the description of a request body used in multiple places

src/components/CallbackSamples/CallbackReqSamples.tsx

@@ -23,7 +23,7 @@ export class CallbackPayloadSample extends React.Component<PayloadSampleProps> {
     }
 
     return (
-      <PayloadSampleWrapper>
+      <PayloadSampleWrapper className="callback-sample">
         <PayloadSamples content={payloadSample.requestBodyContent} />
       </PayloadSampleWrapper>
     );

src/components/CallbackSamples/CallbackSamples.tsx

@@ -56,7 +56,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
     });
 
     return (
-      <div>
+      <div className="operation-callback-samples">
         <RightPanelHeader> Callback payload samples </RightPanelHeader>
 
         <SamplesWrapper>

src/components/Callbacks/CallbackDetails.tsx

@@ -24,7 +24,7 @@ export class CallbackDetails extends React.Component<CallbackDetailsProps> {
     const hasDescription = !!(description || externalDocs);
 
     return (
-      <CallbackDetailsWrap>
+      <CallbackDetailsWrap className="callback">
         {hasDescription && (
           <Description>
             {description !== undefined && <Markdown source={description} />}

src/components/Callbacks/CallbacksList.tsx

@@ -17,7 +17,7 @@ export class CallbacksList extends React.PureComponent<CallbacksListProps> {
     }
 
     return (
-      <div>
+      <div className="operation-callbacks">
         <CallbacksHeader> Callbacks </CallbacksHeader>
         {callbacks.map(callback => {
           return callback.operations.map((operation, index) => {

src/components/Endpoint/Endpoint.tsx

@@ -48,7 +48,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
     return (
       <OptionsContext.Consumer>
         {options => (
-          <OperationEndpointWrap>
+          <OperationEndpointWrap className="endpoint">
             <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
               <HttpVerb type={operation.httpVerb} compact={this.props.compact}>
                 {operation.httpVerb}

src/components/Fields/Field.tsx

@@ -90,7 +90,7 @@ export class Field extends React.Component<FieldProps> {
 
     return (
       <>
-        <tr className={isLast ? 'last ' + className : className}>
+        <tr className={isLast ? 'last field' + className : className + ' field'}>
           {paramName}
           <PropertyDetailsCell>
             <FieldDetails {...this.props} />

src/components/Fields/FieldContstraints.tsx

@@ -11,7 +11,7 @@ export class ConstraintsView extends React.PureComponent<ConstraintsViewProps> {
       return null;
     }
     return (
-      <span>
+      <span className="field-constraints">
         {' '}
         {this.props.constraints.map(constraint => (
           <ConstraintItem key={constraint}> {constraint} </ConstraintItem>

src/components/Fields/FieldDetail.tsx

@@ -16,7 +16,8 @@ function FieldDetailComponent({ value, label, raw }: FieldDetailProps) {
 
   return (
     <div>
-      <FieldLabel> {label} </FieldLabel> <ExampleValue>{stringifyValue}</ExampleValue>
+      <FieldLabel> {label} </FieldLabel>{' '}
+      <ExampleValue className="field-example">{stringifyValue}</ExampleValue>
     </div>
   );
 }

src/components/Fields/FieldDetails.tsx

@@ -57,7 +57,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
     : schema.default;
 
   return (
-    <div>
+    <div className="field-details">
       <div>
         <TypePrefix>{schema.typePrefix}</TypePrefix>
         <TypeName>{schema.displayType}</TypeName>
@@ -92,7 +92,7 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
         {isArrayType && schema.items && <ArrayItemDetails schema={schema.items} />}
       </div>
       {deprecated && (
-        <div>
+        <div className="field-deprecated">
           <Badge type="warning"> {l('deprecated')} </Badge>
         </div>
       )}

src/components/Fields/Pattern.tsx

@@ -18,7 +18,7 @@ export function Pattern(props: { schema: SchemaModel }) {
 
   return (
     <>
-      <PatternLabel>
+      <PatternLabel className="field-pattern">
         {isPatternShown || pattern.length < MAX_PATTERN_LENGTH
           ? pattern
           : `${pattern.substr(0, MAX_PATTERN_LENGTH)}...`}

src/components/Operation/Operation.tsx

@@ -35,8 +35,8 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
     <OptionsContext.Consumer>
       {options => (
         <Row {...{ [SECTION_ATTR]: operation.operationHash }} id={operation.operationHash}>
-          <MiddlePanel>
+          <MiddlePanel className="middle-panel">
-            <H2>
+            <H2 className="operation-header">
               <ShareLink to={operation.id} />
               {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               {isWebhook && (
@@ -50,7 +50,7 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
               <Endpoint operation={operation} inverted={true} />
             )}
             {hasDescription && (
-              <Description>
+              <Description className="operation-description">
                 {description !== undefined && <Markdown source={description} />}
                 {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
               </Description>
@@ -61,7 +61,7 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
             <ResponsesList responses={operation.responses} />
             <CallbacksList callbacks={operation.callbacks} />
           </MiddlePanel>
-          <DarkRightPanel>
+          <DarkRightPanel className="right-panel">
             {!options.pathInMiddlePanel && !isWebhook && <Endpoint operation={operation} />}
             <RequestSamples operation={operation} />
             <ResponseSamples operation={operation} />

src/components/Parameters/Parameters.tsx

@@ -79,7 +79,9 @@ export function BodyContent(props: {
       {({ schema }) => {
         return (
           <>
-            {description !== undefined && <Markdown source={description} />}
+            {description !== undefined && (
+              <Markdown source={description} className="request-body-description" />
+            )}
             {schema?.type === 'object' && (
               <ConstraintsView constraints={schema?.constraints || []} />
             )}

src/components/Parameters/ParametersGroup.tsx

@@ -21,7 +21,7 @@ export class ParametersGroup extends React.PureComponent<ParametersGroupProps, a
     }
 
     return (
-      <div key={place}>
+      <div key={place} className="operation-parameters">
         <UnderlinedHeader>{place} Parameters</UnderlinedHeader>
         <PropertiesTable>
           <tbody>

src/components/Redoc/Redoc.tsx

@@ -53,7 +53,7 @@ export class Redoc extends React.Component<RedocProps> {
                   />
                 )) ||
                   null}
-                <SideMenu menu={menu} />
+                <SideMenu menu={menu} className="side-menu" />
               </StickyResponsiveSidebar>
               <ApiContentWrap className="api-content">
                 <ApiInfo store={store} />

src/components/RequestSamples/RequestSamples.tsx

@@ -26,7 +26,7 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
     const hideTabList = samples.length === 1 ? this.context.hideSingleRequestSampleTab : false;
     return (
       (hasSamples && (
-        <div>
+        <div className="operation-request-samples">
           <RightPanelHeader> {l('requestSamples')} </RightPanelHeader>
 
           <Tabs defaultIndex={0}>
@@ -40,7 +40,7 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
             {samples.map(sample => (
               <TabPanel key={sample.lang + '_' + (sample.label || '')}>
                 {isPayloadSample(sample) ? (
-                  <div>
+                  <div className="request-payload">
                     <PayloadSamples content={sample.requestBodyContent} />
                   </div>
                 ) : (

src/components/ResponseSamples/ResponseSamples.tsx

@@ -23,7 +23,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
 
     return (
       (responses.length > 0 && (
-        <div>
+        <div className="operation-response-samples">
           <RightPanelHeader> {l('responseSamples')} </RightPanelHeader>
 
           <Tabs defaultIndex={0}>
@@ -36,7 +36,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
             </TabList>
             {responses.map(response => (
               <TabPanel key={response.code}>
-                <div>
+                <div className="response-sample">
                   <PayloadSamples content={response.content!} />
                 </div>
               </TabPanel>

src/components/Responses/Response.tsx

@@ -28,7 +28,7 @@ export const ResponseView = observer(({ response }: ResponseViewProps): React.Re
   );
 
   return (
-    <div>
+    <div className="response">
       <StyledResponseTitle
         onClick={() => response.toggle()}
         type={type}

src/components/Responses/ResponseHeaders.tsx

@@ -19,7 +19,7 @@ export class ResponseHeaders extends React.PureComponent<ResponseHeadersProps> {
     return (
       <PropertiesTable>
         <HeadersCaption> Response Headers </HeadersCaption>
-        <tbody>
+        <tbody className="response-headers">
           {mapWithLast(headers, (header, isLast) => (
             <Field isLast={isLast} key={header.name} field={header} showExamples={true} />
           ))}

src/components/Responses/ResponsesList.tsx

@@ -26,7 +26,7 @@ export class ResponsesList extends React.PureComponent<ResponseListProps> {
     }
 
     return (
-      <div>
+      <div className="operation-responses">
         <ResponsesHeader>{isCallback ? l('callbackResponses') : l('responses')}</ResponsesHeader>
         {responses.map(response => {
           return <ResponseView key={response.code} response={response} />;

src/components/Schema/ArraySchema.tsx

@@ -34,7 +34,7 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
     }
 
     return (
-      <div>
+      <div className="array-schema">
         <ArrayOpenningLabel> Array {minMaxItems}</ArrayOpenningLabel>
         <PaddedSchema>
           <Schema {...this.props} schema={itemsSchema} />

src/components/Schema/ObjectSchema.tsx

@@ -50,7 +50,7 @@ export const ObjectSchema = observer(
     return (
       <PropertiesTable>
         {showTitle && <PropertiesTableCaption>{title}</PropertiesTableCaption>}
-        <tbody>
+        <tbody className="object-schema">
           {mapWithLast(filteredFields, (field, isLast) => {
             return (
               <Field

src/components/Schema/OneOfSchema.tsx

@@ -51,7 +51,7 @@ export class OneOfSchema extends React.Component<SchemaProps> {
     const activeSchema = oneOf[schema.activeOneOf];
 
     return (
-      <div>
+      <div className="oneOf-schema">
         <OneOfLabel> {schema.oneOfType} </OneOfLabel>
         <OneOfList>
           {oneOf.map((subSchema, idx) => (

src/components/Schema/RecursiveSchema.tsx

@@ -7,7 +7,7 @@ import type { SchemaProps } from '.';
 
 export const RecursiveSchema = observer(({ schema }: SchemaProps) => {
   return (
-    <div>
+    <div className="recursive-schema">
       <TypeName>{schema.displayType}</TypeName>
       {schema.title && <TypeTitle> {schema.title} </TypeTitle>}
       <RecursiveLabel> {l('recursive')} </RecursiveLabel>

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -37,7 +37,7 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {
 
   return (
     <>
-      <Wrap expanded={expanded}>
+      <Wrap expanded={expanded} className="operation-security">
         <AuthHeaderColumn onClick={() => setExpanded(!expanded)}>
           <AuthHeader>Authorizations:</AuthHeader>
           <ShelfIcon size={'1.3em'} direction={expanded ? 'down' : 'right'} />
@@ -56,7 +56,7 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {
       {expanded &&
         operationSecuritySchemes?.length &&
         operationSecuritySchemes.map((scheme, idx) => (
-          <SecurityDetailsStyle key={idx}>
+          <SecurityDetailsStyle key={idx} className="security-details">
             <h5>
               <LockIcon /> {AUTH_TYPES[scheme.type] || scheme.type}: {scheme.id}
             </h5>

src/components/SourceCode/SourceCode.tsx

@@ -19,7 +19,7 @@ export const SourceCodeWithCopy = (props: SourceCodeProps) => {
   return (
     <CopyButtonWrapper data={source}>
       {({ renderCopyButton }) => (
-        <SampleControlsWrap>
+        <SampleControlsWrap className="request-code-sample">
           <SampleControls>{renderCopyButton()}</SampleControls>
           <SourceCode lang={lang} source={source} />
         </SampleControlsWrap>

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -2856,7 +2856,9 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
 
 exports[`Components SchemaView discriminator should correctly render discriminator dropdown 1`] = `
 <styled.table>
-  <tbody>
+  <tbody
+    className="object-schema"
+  >
     <Field
       expandByDefault={false}
       field={

src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
-<div>
+<div
+  class="oneOf-schema"
+>
   <span
     class="sc-kfYoZR juYXUf"
   >
@@ -30,7 +32,9 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
     </span>
   </div>
   <div>
-    <div>
+    <div
+      class="field-details"
+    >
       <div>
         <span
           class="sc-laZMeE sc-iNiQyp jWaWWE jrLlAa"

src/components/__tests__/__snapshots__/SecurityRequirement.test.tsx.snap

@@ -10,14 +10,14 @@ OAuth2 is also a safer and more secure way to give you access.</p>
 </div><div class=\\"sc-EZqKI aOkZE\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Security Scheme Type: </b><span>OpenID Connect</span></div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div></div></div></div><div id=\\"section/Authentication/basicAuth\\" data-section-id=\\"section/Authentication/basicAuth\\" class=\\"sc-eCApnc jlMQbh\\"><div class=\\"sc-iCoGMd gLxhOh\\"><div class=\\"sc-hKFxyN juinod\\"><h2 class=\\"sc-pNWdM eftmgB\\">basicAuth</h2><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"></div><div class=\\"sc-EZqKI aOkZE\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Security Scheme Type: </b><span>HTTP</span></div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-fXgAZx gZCyoW\\"></div></div></div></div></div></div>"
 `;
 
-exports[`SecurityRequirement should render authDefinition 1`] = `"<div class=\\"sc-bQCEYZ eDdCgW\\"><div class=\\"sc-xGAEC femyTb\\"><h5 class=\\"sc-iqAclL sc-jHcXXw eONCmm keQLTh\\">Authorizations:</h5><svg class=\\"sc-dIsUp iPqByX\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dWBRfb kJFNCL\\"><span class=\\"sc-kYPZxB irJeRy\\">(<span class=\\"sc-hzUIXc gcouO\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-hzUIXc gcouO\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-hzUIXc gcouO\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kYPZxB irJeRy\\"><span class=\\"sc-hzUIXc gcouO\\">OAuth2: <i>petstore_auth</i></span></span></div></div>,"`;
+exports[`SecurityRequirement should render authDefinition 1`] = `"<div class=\\"sc-bQCEYZ eDdCgW operation-security\\"><div class=\\"sc-xGAEC femyTb\\"><h5 class=\\"sc-iqAclL sc-jHcXXw eONCmm keQLTh\\">Authorizations:</h5><svg class=\\"sc-dIsUp iPqByX\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dWBRfb kJFNCL\\"><span class=\\"sc-kYPZxB irJeRy\\">(<span class=\\"sc-hzUIXc gcouO\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-hzUIXc gcouO\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-hzUIXc gcouO\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kYPZxB irJeRy\\"><span class=\\"sc-hzUIXc gcouO\\">OAuth2: <i>petstore_auth</i></span></span></div></div>,"`;
 
 exports[`SecurityRequirement should render authDefinition 2`] = `
-"<div class=\\"sc-bQCEYZ dSwEDq\\"><div class=\\"sc-xGAEC femyTb\\"><h5 class=\\"sc-iqAclL sc-jHcXXw eONCmm keQLTh\\">Authorizations:</h5><svg class=\\"sc-dIsUp fVWtGJ\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dWBRfb ekRdav\\"><span class=\\"sc-kYPZxB fhGdrc\\">(<span class=\\"sc-hzUIXc gcouO\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-hzUIXc gcouO\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-hzUIXc gcouO\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kYPZxB fhGdrc\\"><span class=\\"sc-hzUIXc gcouO\\">OAuth2: <i>petstore_auth</i> (<code class=\\"sc-eHEENL fwFTyL\\">write:pets</code><code class=\\"sc-eHEENL fwFTyL\\">read:pets</code>) </span></span></div></div><div class=\\"sc-EZqKI aOkZE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OAuth2: petstore_auth</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><p>Get access to data while protecting your account credentials.
+"<div class=\\"sc-bQCEYZ dSwEDq operation-security\\"><div class=\\"sc-xGAEC femyTb\\"><h5 class=\\"sc-iqAclL sc-jHcXXw eONCmm keQLTh\\">Authorizations:</h5><svg class=\\"sc-dIsUp fVWtGJ\\" version=\\"1.1\\" viewBox=\\"0 0 24 24\\" x=\\"0\\" xmlns=\\"http://www.w3.org/2000/svg\\" y=\\"0\\" aria-hidden=\\"true\\"><polygon points=\\"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 \\"></polygon></svg></div><div class=\\"sc-dWBRfb ekRdav\\"><span class=\\"sc-kYPZxB fhGdrc\\">(<span class=\\"sc-hzUIXc gcouO\\">API Key: <i>GitLab_PersonalAccessToken</i></span><span class=\\"sc-hzUIXc gcouO\\">OpenID Connect: <i>GitLab_OpenIdConnect</i></span><span class=\\"sc-hzUIXc gcouO\\">HTTP: <i>basicAuth</i></span>) </span><span class=\\"sc-kYPZxB fhGdrc\\"><span class=\\"sc-hzUIXc gcouO\\">OAuth2: <i>petstore_auth</i> (<code class=\\"sc-eHEENL fwFTyL\\">write:pets</code><code class=\\"sc-eHEENL fwFTyL\\">read:pets</code>) </span></span></div></div><div class=\\"sc-EZqKI aOkZE security-details\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OAuth2: petstore_auth</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><p>Get access to data while protecting your account credentials.
 OAuth2 is also a safer and more secure way to give you access.</p>
 </div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Flow type: </b><code>implicit </code></div><div class=\\"sc-fXgAZx gZCyoW\\"><strong> Authorization URL: </strong><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"http://petstore.swagger.io/api/oauth/dialog\\">http://petstore.swagger.io/api/oauth/dialog</a></code></div><div><b>Required scopes: </b><code>write:pets</code> <code>read:pets</code> </div><div class=\\"sc-fXgAZx gZCyoW\\"><b> Scopes: </b></div><div class=\\"sc-jXcxbT blWOKY container\\" style=\\"height: 4em;\\"><ul><li><code>write:pets</code> - <span class=\\"sc-carFqZ bmTzxo redoc-markdown\\"><p>modify pets in your account</p>
 </span></li><li><code>read:pets</code> - <span class=\\"sc-carFqZ bmTzxo redoc-markdown\\"><p>read your pets</p>
-</span></li></ul></div><div class=\\"sc-eEVmNe gbLbHj\\"></div></div></div><div class=\\"sc-EZqKI aOkZE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><p>GitLab Personal Access Token description</p>
+</span></li></ul></div><div class=\\"sc-eEVmNe gbLbHj\\"></div></div></div><div class=\\"sc-EZqKI aOkZE security-details\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> API Key: GitLab_PersonalAccessToken</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><p>GitLab Personal Access Token description</p>
-</div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class=\\"sc-EZqKI aOkZE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><p>GitLab OpenIdConnect description</p>
+</div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Header parameter name: </b><code>PRIVATE-TOKEN</code></div></div></div><div class=\\"sc-EZqKI aOkZE security-details\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> OpenID Connect: GitLab_OpenIdConnect</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><p>GitLab OpenIdConnect description</p>
-</div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class=\\"sc-EZqKI aOkZE\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> HTTP: basicAuth</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"></div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-fXgAZx gZCyoW\\"></div></div></div>,"
+</div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>Connect URL: </b><code><a target=\\"_blank\\" rel=\\"noopener noreferrer\\" href=\\"https://gitlab.com/.well-known/openid-configuration\\">https://gitlab.com/.well-known/openid-configuration</a></code></div></div></div><div class=\\"sc-EZqKI aOkZE security-details\\"><h5><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"11\\" height=\\"11\\"><path fill=\\"currentColor\\" d=\\"M18 10V6A6 6 0 0 0 6 6v4H3v14h18V10h-3zM8 6c0-2.206 1.794-4 4-4s4 1.794 4 4v4H8V6zm11 16H5V12h14v10z\\"></path></svg> HTTP: basicAuth</h5><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"></div><div class=\\"sc-iJCRrE sc-ciSkZP jCdxGr QGruV\\"><div class=\\"sc-fXgAZx gZCyoW\\"><b>HTTP Authorization Scheme: </b><code>basic</code></div><div class=\\"sc-fXgAZx gZCyoW\\"></div></div></div>,"
 `;