Implement pathInMiddlePanel option

src/components/Endpoint/Endpoint.tsx

@@ -18,6 +18,7 @@ export interface EndpointProps {
   operation: OperationModel;
 
   hideHostname?: boolean;
+  inverted?: boolean;
 }
 
 export interface EndpointState {
@@ -37,7 +38,7 @@ export class Endpoint extends ComponentWithOptions<EndpointProps, EndpointState>
   };
 
   render() {
-    const { operation } = this.props;
+    const { operation, inverted } = this.props;
     const { expanded } = this.state;
 
     const hideHostname = this.props.hideHostname || this.options.hideHostname;
@@ -45,12 +46,12 @@ export class Endpoint extends ComponentWithOptions<EndpointProps, EndpointState>
     // TODO: highlight server variables, e.g. https://{user}.test.com
     return (
       <OperationEndpointWrap>
-        <EndpointInfo onClick={this.toggle} expanded={expanded}>
+        <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
           <HttpVerb type={operation.httpVerb}> {operation.httpVerb}</HttpVerb>{' '}
           <ServerRelativeURL>{operation.path}</ServerRelativeURL>
           <ShelfIcon
             float={'right'}
-            color={'white'}
+            color={inverted ? 'black' : 'white'}
             size={'20px'}
             direction={expanded ? 'up' : 'down'}
             style={{ marginRight: '-25px' }}

src/components/Endpoint/styled.elements.ts

@@ -5,20 +5,29 @@ export const OperationEndpointWrap = styled.div`
   position: relative;
 `;
 
-export const EndpointInfo = withProps<{ expanded?: boolean }>(styled.div)`
+export const ServerRelativeURL = styled.span`
-  padding: 10px 30px 10px 20px;
+  font-family: ${props => props.theme.headingsFont.family};
-  border-radius: 4px 4px 0 0;
+  margin-left: 10px;
-  background-color: #222d32;
+`;
+
+export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }>(styled.div)`
+  padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
+  border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
+  background-color: ${props => (props.inverted ? 'transparent' : '#222d32')};
   display: block;
   font-weight: 300;
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
-  border: 1px solid transparent;
+  border: ${props => (props.inverted ? '0' : '1px solid transparent')};
-  border-bottom-width: 0;
+  border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
   transition: border-color 0.25s ease;
 
-  ${props => (props.expanded && 'border-color: #3c4448;') || ''}
+  ${props => (props.expanded && !props.inverted && 'border-color: #3c4448;') || ''}
+
+  .${ServerRelativeURL} {
+    color: ${props => (props.inverted ? props.theme.colors.text : '#ffffff')}
+  }
 `;
 
 export const HttpVerb = withProps<{ type: string }>(styled.span).attrs({
@@ -34,11 +43,11 @@ export const HttpVerb = withProps<{ type: string }>(styled.span).attrs({
   margin: 0;
 `;
 
-export const ServerRelativeURL = styled.span`
+// background: transparent;
-  font-family: ${props => props.theme.headingsFont.family};
+// border-bottom: 1px solid #cccccc;
-  color: #ffffff;
+// border-color: transparent;
-  margin-left: 10px;
+// border-bottom: 1px solid rgba(0,0,0,0.33);
-`;
+// padding-left: 10px;
 
 export const ServersOverlay = withProps<{ expanded: boolean }>(styled.div)`
   position: absolute;
@@ -47,7 +56,7 @@ export const ServersOverlay = withProps<{ expanded: boolean }>(styled.div)`
   background: #fafafa;
   color: #263238;
   box-sizing: border-box;
-  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.33);
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.33);
   overflow: hidden;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;

src/components/Operation/Operation.tsx

@@ -5,6 +5,8 @@ import { observer } from 'mobx-react';
 
 import { H2, MiddlePanel, DarkRightPanel, Badge, Row } from '../../common-elements';
 
+import { ComponentWithOptions } from '../OptionsProvider';
+
 import { Markdown } from '../Markdown/Markdown';
 import { Parameters } from '../Parameters/Parameters';
 import { ResponsesList } from '../Responses/ResponsesList';
@@ -35,11 +37,12 @@ interface OperationProps {
 }
 
 @observer
-export class Operation extends React.Component<OperationProps> {
+export class Operation extends ComponentWithOptions<OperationProps> {
   render() {
     const { operation } = this.props;
 
     const { name: summary, description, deprecated } = operation;
+    const pathInMiddle = this.options.pathInMiddlePanel;
 
     return (
       <OperationRow>
@@ -48,12 +51,13 @@ export class Operation extends React.Component<OperationProps> {
             <ShareLink href={'#' + operation.getHash()} />
             {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
           </H2>
+          {pathInMiddle && <Endpoint operation={operation} inverted={true} />}
           {description !== undefined && <Markdown source={description} />}
           <Parameters parameters={operation.parameters} body={operation.requestBody} />
           <ResponsesList responses={operation.responses} />
         </MiddlePanel>
         <DarkRightPanel>
-          <Endpoint operation={operation} />
+          {!pathInMiddle && <Endpoint operation={operation} />}
           <RequestSamples operation={operation} />
           <ResponseSamples operation={operation} />
         </DarkRightPanel>

src/services/OpenAPIParser.ts

@@ -75,7 +75,6 @@ export class OpenAPIParser {
         COMPONENT_REGEXP.replace('{component}', '<security-definitions>'),
         'gmi',
       );
-      debugger;
       if (!securityRegexp.test(description)) {
         const comment = buildComponentComment('security-definitions');
         spec.info.description = appendToMdHeading(description, 'Authentication', comment);

src/services/RedocNormalizedOptions.ts

@@ -10,6 +10,7 @@ export interface RedocRawOptions {
   requiredPropsFirst?: boolean | string;
   noAutoAuth?: boolean | string;
   nativeScrollbars?: boolean | string;
+  pathInMiddlePanel?: boolean | string;
 }
 
 function argValueToBoolean(val?: string | boolean): boolean {
@@ -26,6 +27,7 @@ export class RedocNormalizedOptions {
   requiredPropsFirst: boolean;
   noAutoAuth: boolean;
   nativeScrollbars: boolean;
+  pathInMiddlePanel: boolean;
 
   constructor(raw: RedocRawOptions) {
     this.theme = { ...(raw.theme || {}), ...defaultTheme }; // todo: merge deep
@@ -35,6 +37,7 @@ export class RedocNormalizedOptions {
     this.requiredPropsFirst = argValueToBoolean(raw.requiredPropsFirst);
     this.noAutoAuth = argValueToBoolean(raw.noAutoAuth);
     this.nativeScrollbars = argValueToBoolean(raw.nativeScrollbars);
+    this.pathInMiddlePanel = argValueToBoolean(raw.pathInMiddlePanel);
   }
 
   static normalizeExpandResponses(value: RedocRawOptions['expandResponses']) {