Update CallbackDetails

demo/openapi.yaml

@@ -539,6 +539,9 @@ paths:
             post:
               summary: Order in Progress (Summary)
               description: A callback triggered every time an Order is updated status to "inProgress" (Description)
+              externalDocs:
+                description: Find out more
+                url: 'https://more-details.com/demo'
               requestBody:
                 content:
                   application/json:

src/components/CallbackSamples/CallbackSamples.tsx

@@ -27,6 +27,10 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
   render() {
     const { callbacks } = this.props;
 
+    if (!callbacks || callbacks.length === 0) {
+      return null;
+    }
+
     const operations = callbacks
       .map(callback => callback.operations.map(operation => operation))
       .reduce((a, b) => a.concat(b), []);

src/components/Callbacks/CallbackDetails.tsx

@@ -1,30 +1,47 @@
+import { observer } from 'mobx-react';
 import * as React from 'react';
 
 import { OperationModel } from '../../services/models';
-import { OperationItem } from '../ContentItems/ContentItems';
-import { Endpoint } from '../Endpoint/Endpoint';
-import { Markdown } from '../Markdown/Markdown';
 import styled from '../../styled-components';
+import { Endpoint } from '../Endpoint/Endpoint';
+import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
+import { Extensions } from '../Fields/Extensions';
+import { Markdown } from '../Markdown/Markdown';
+import { Parameters } from '../Parameters/Parameters';
+import { ResponsesList } from '../Responses/ResponsesList';
+import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
+import { CallbackDetailsWrap } from './styled.elements';
 
-export class CallbackDetails extends React.PureComponent<{ callbackOperation: OperationModel }> {
+export interface CallbackDetailsProps {
+  operation: OperationModel;
+}
+
+@observer
+export class CallbackDetails extends React.Component<CallbackDetailsProps> {
   render() {
-    const description = this.props.callbackOperation.description;
+    const { operation } = this.props;
+    const { description, externalDocs } = operation;
+    const hasDescription = !!(description || externalDocs);
 
     return (
-      <div>
+      <CallbackDetailsWrap>
-        {description && (
+        {hasDescription && (
-          <CallbackDescription>
+          <Description>
-            <Markdown compact={true} inline={true} source={description} />
+            {description !== undefined && <Markdown source={description} />}
-          </CallbackDescription>
+            {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
+          </Description>
         )}
-        <Endpoint operation={this.props.callbackOperation} inverted={true} compact={true} />
+        <Endpoint operation={this.props.operation} inverted={true} compact={true} />
-        <OperationItem item={this.props.callbackOperation} />
+        {/* Do we need Extensions in callback details? */}
-      </div>
+        <Extensions extensions={operation.extensions} />
+        <SecurityRequirements securities={operation.security} />
+        <Parameters parameters={operation.parameters} body={operation.requestBody} />
+        <ResponsesList responses={operation.responses} isCallback={operation.isCallback} />
+      </CallbackDetailsWrap>
     );
   }
 }
 
-const CallbackDescription = styled.div`
+const Description = styled.div`
-  margin-top: 10px;
+  margin-bottom: ${({ theme }) => theme.spacing.unit * 3}px;
-  margin-bottom: 20px;
 `;

src/components/Callbacks/CallbackOperation.tsx

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 
 import { OperationModel } from '../../services/models';
-import { CallbackDetailsWrap, StyledCallbackTitle } from './styled.elements';
+import { StyledCallbackTitle } from './styled.elements';
 import { CallbackDetails } from './CallbackDetails';
 
 @observer
@@ -20,11 +20,7 @@ export class CallbackOperation extends React.Component<{ callbackOperation: Oper
           onClick={this.toggle}
           callbackOperation={this.props.callbackOperation}
         />
-        {expanded && (
+        {expanded && <CallbackDetails operation={this.props.callbackOperation} />}
-          <CallbackDetailsWrap>
-            <CallbackDetails callbackOperation={this.props.callbackOperation} />
-          </CallbackDetailsWrap>
-        )}
       </>
     );
   }

src/components/Callbacks/CallbackTitle.tsx

@@ -23,7 +23,7 @@ export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
       <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
         <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
         <ShelfIcon size={'1.5em'} direction={expanded ? 'down' : 'right'} float={'left'} />
-        <CallbackNameStyled deprecated={deprecated}>{name}</CallbackNameStyled>
+        <CallbackName deprecated={deprecated}>{name}</CallbackName>
         {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
       </CallbackTitleWrapper>
     );
@@ -36,7 +36,7 @@ const CallbackTitleWrapper = styled.div`
   }
 `;
 
-const CallbackNameStyled = styled.span<{ deprecated?: boolean }>`
+const CallbackName = styled.span<{ deprecated?: boolean }>`
   text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')};
   margin-right: 8px;
 `;

src/components/Callbacks/CallbacksList.tsx

@@ -4,14 +4,6 @@ import { CallbackModel } from '../../services/models';
 import styled from '../../styled-components';
 import { CallbackOperation } from './CallbackOperation';
 
-const CallbacksHeader = styled.h3`
-  font-size: 18px;
-  padding: 0.2em 0;
-  margin: 3em 0 1.1em;
-  color: #253137;
-  font-weight: normal;
-`;
-
 export interface CallbacksListProps {
   callbacks: CallbackModel[];
 }
@@ -38,3 +30,11 @@ export class CallbacksList extends React.PureComponent<CallbacksListProps> {
     );
   }
 }
+
+const CallbacksHeader = styled.h3`
+  font-size: 18px;
+  padding: 0.2em 0;
+  margin: 3em 0 1.1em;
+  color: #253137;
+  font-weight: normal;
+`;

src/components/Operation/Operation.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 
 import { Badge, DarkRightPanel, H2, MiddlePanel, Row } from '../../common-elements';
 import { ShareLink } from '../../common-elements/linkify';
-import { OperationModel as OperationType } from '../../services/models';
+import { OperationModel } from '../../services/models';
-import styled, { media } from '../../styled-components';
+import styled from '../../styled-components';
 import { CallbacksList } from '../Callbacks';
 import { CallbackSamples } from '../CallbackSamples/CallbackSamples';
 import { Endpoint } from '../Endpoint/Endpoint';
@@ -19,7 +19,7 @@ import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
 import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
 
 export interface OperationProps {
-  operation: OperationType;
+  operation: OperationModel;
 }
 
 @observer
@@ -29,23 +29,18 @@ export class Operation extends React.Component<OperationProps> {
 
     const { name: summary, description, deprecated, externalDocs } = operation;
     const hasDescription = !!(description || externalDocs);
-    const AdaptiveMiddlePanel = operation.isCallback ? CallbackMiddlePanel : MiddlePanel;
 
     return (
       <OptionsContext.Consumer>
         {options => (
           <OperationRow>
-            <AdaptiveMiddlePanel>
+            <MiddlePanel>
-              {!operation.isCallback && (
+              <H2>
-                <H2>
+                <ShareLink to={operation.id} />
-                  <ShareLink to={operation.id} />
+                {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
-                  {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
+              </H2>
-                </H2>
+              {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
-              )}
+              {hasDescription && (
-              {!operation.isCallback && options.pathInMiddlePanel && (
-                <Endpoint operation={operation} inverted={true} />
-              )}
-              {!operation.isCallback && hasDescription && (
                 <Description>
                   {description !== undefined && <Markdown source={description} />}
                   {externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
@@ -54,19 +49,15 @@ export class Operation extends React.Component<OperationProps> {
               <Extensions extensions={operation.extensions} />
               <SecurityRequirements securities={operation.security} />
               <Parameters parameters={operation.parameters} body={operation.requestBody} />
-              <ResponsesList responses={operation.responses} isCallback={operation.isCallback} />
+              <ResponsesList responses={operation.responses} />
               <CallbacksList callbacks={operation.callbacks} />
-            </AdaptiveMiddlePanel>
+            </MiddlePanel>
-            {!operation.isCallback && (
+            <DarkRightPanel>
-              <DarkRightPanel>
+              {!options.pathInMiddlePanel && <Endpoint operation={operation} />}
-                {!options.pathInMiddlePanel && <Endpoint operation={operation} />}
+              <RequestSamples operation={operation} />
-                <RequestSamples operation={operation} />
+              <ResponseSamples operation={operation} />
-                <ResponseSamples operation={operation} />
+              <CallbackSamples callbacks={operation.callbacks} />
-                {operation.callbacks.length > 0 && (
+            </DarkRightPanel>
-                  <CallbackSamples callbacks={operation.callbacks} />
-                )}
-              </DarkRightPanel>
-            )}
           </OperationRow>
         )}
       </OptionsContext.Consumer>
@@ -74,18 +65,9 @@ export class Operation extends React.Component<OperationProps> {
   }
 }
 
-const CallbackMiddlePanel = styled(MiddlePanel)`
-  width: 100%;
-  padding: 0;
-  ${() => media.lessThan('medium', true)`
-    padding: 0
-  `};
-`;
-
 const OperationRow = styled(Row)`
   backface-visibility: hidden;
   contain: content;
-
   overflow: hidden;
 `;
 

src/services/models/Operation.ts

@@ -254,7 +254,6 @@ export class OperationModel implements IMenuItem {
 
   @memoize
   get callbacks() {
-    console.log('this.operationSpec.callbacks', this.operationSpec.callbacks);
     return Object.keys(this.operationSpec.callbacks || []).map(callbackEventName => {
       return new CallbackModel(
         this.parser,