more className additions

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/Fields/Extensions.tsx

@@ -27,7 +27,7 @@ export class Extensions extends React.PureComponent<ExtensionsProps> {
           <>
             {options.showExtensions &&
               Object.keys(exts).map(key => (
-                <Extension key={key}>
+                <Extension key={key} className="operation-extension">
                   <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
                   <ExtensionValue>
                     {typeof exts[key] === 'string' ? exts[key] : JSON.stringify(exts[key])}

src/components/Operation/Operation.tsx

@@ -55,8 +55,7 @@ export const Operation = observer(({ operation }: OperationProps): JSX.Element =
                 {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
               </Description>
             )}
-            <Extensions extensions={operation.extensions} />{' '}
-            {/*TODO: className="operation-extensions"*/}
+            <Extensions extensions={operation.extensions} />
             <SecurityRequirements securities={operation.security} />
             <Parameters parameters={operation.parameters} body={operation.requestBody} />
             <ResponsesList responses={operation.responses} />

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/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/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/Schema/Schema.tsx

@@ -87,7 +87,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
     } as any as FieldModel; // cast needed for hot-loader to not fail
 
     return (
-      <div>
+      <div className="field-details">
         <FieldDetails field={field} />
       </div>
     );

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -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>