Move displaying Endpoint info to Callback section

src/components/CallbackSamples/CallbackSamples.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
 import { isPayloadSample, RedocNormalizedOptions } from '../../services';
 import { CallbackModel } from '../../services/models';
-import { Endpoint } from '../Endpoint/Endpoint';
 import { OptionsContext } from '../OptionsProvider';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
@@ -57,7 +56,6 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
               <TabPanel key={sample.lang + '_' + (sample.label || '')}>
                 {isPayloadSample(sample) ? (
                   <div>
-                    <Endpoint operation={operation} inverted={false} />
                     <PayloadSamples content={sample.requestBodyContent} />
                   </div>
                 ) : (

src/components/Callbacks/Callback.tsx

@@ -15,7 +15,7 @@ export class CallbackView extends React.Component<{ callbackOperation: Operation
     const { name, description, expanded } = this.props.callbackOperation;
 
     return (
-      <div>
+      <>
         <StyledCallbackTitle
           onClick={this.toggle}
           name={name}
@@ -27,7 +27,7 @@ export class CallbackView extends React.Component<{ callbackOperation: Operation
             <CallbackDetails callbackOperation={this.props.callbackOperation} />
           </CallbackDetailsWrap>
         )}
-      </div>
+      </>
     );
   }
 }

src/components/Callbacks/CallbackDetails.tsx

@@ -2,9 +2,15 @@ import * as React from 'react';
 
 import { OperationModel } from '../../services/models';
 import { OperationItem } from '../ContentItems/ContentItems';
+import { Endpoint } from '../Endpoint/Endpoint';
 
 export class CallbackDetails extends React.PureComponent<{ callbackOperation: OperationModel }> {
   render() {
-    return <OperationItem item={this.props.callbackOperation} />;
+    return (
+      <div>
+        <Endpoint operation={this.props.callbackOperation} inverted={true} />
+        <OperationItem item={this.props.callbackOperation} />
+      </div>
+    );
   }
 }

src/components/Callbacks/styled.elements.ts

@@ -11,5 +11,8 @@ export const StyledCallbackTitle = styled(CallbackTitle)`
 `;
 
 export const CallbackDetailsWrap = styled.div`
-  padding: 10px;
+  padding: 10px 25px;
+  background-color: #fafafa;
+  margin-bottom: 5px;
+  margin-top: 5px;
 `;

src/services/models/Operation.ts

@@ -108,6 +108,10 @@ export class OperationModel implements IMenuItem {
     this.path = operationSpec.pathName;
     this.isCallback = isCallback;
 
+    const pathInfo = parser.byRef<OpenAPIPath>(
+      JsonPointer.compile(['paths', operationSpec.pathName]),
+    );
+
     if (this.isCallback) {
       // NOTE: Use callback's event name as the view label, not the operationID.
       this.name = callbackEventName || getOperationSummary(operationSpec);
@@ -116,24 +120,24 @@ export class OperationModel implements IMenuItem {
       this.security = (operationSpec.security || []).map(
         security => new SecurityRequirementModel(security, parser),
       );
+
+      // TODO: update getting pathInfo
+      this.servers = normalizeServers(
+        '',
+        operationSpec.servers || (pathInfo && pathInfo.servers) || [],
+      );
     } else {
       this.name = getOperationSummary(operationSpec);
       this.security = (operationSpec.security || parser.spec.security || []).map(
         security => new SecurityRequirementModel(security, parser),
       );
+
+      this.servers = normalizeServers(
+        parser.specUrl,
+        operationSpec.servers || (pathInfo && pathInfo.servers) || parser.spec.servers || [],
+      );
     }
 
-    const pathInfo = parser.byRef<OpenAPIPath>(
-      JsonPointer.compile(['paths', operationSpec.pathName]),
-    );
-
-    // NOTE: Callbacks by default will inherit the specification's global `servers` definition.
-    // In many cases, this may be undesirable. Override individually in the specification to remedy this.
-    this.servers = normalizeServers(
-      parser.specUrl,
-      operationSpec.servers || (pathInfo && pathInfo.servers) || parser.spec.servers || [],
-    );
-
     if (options.showExtensions) {
       this.extensions = extractExtensions(operationSpec, options.showExtensions);
     }

src/styled-components.ts

@@ -10,9 +10,7 @@ const {
   createGlobalStyle,
   keyframes,
   ThemeProvider,
-} = (styledComponents as any) as styledComponents.ThemedStyledComponentsModule<
-  ResolvedThemeInterface
->;
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>;
 
 export const media = {
   lessThan(breakpoint, print?: boolean) {