added more to options to enable/disable console. Also introduced some constants to make it more configurable

demo/playground/hmr-playground.tsx

@@ -22,26 +22,17 @@ const big = window.location.search.indexOf('big') > -1;
 const swagger = window.location.search.indexOf('swagger') > -1; // compatibility mode ?
 
 let specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml';
-specUrl = 'intent.json';
+// specUrl = 'intent.json';
 
 // specUrl = 'swagger.yaml';
-// specUrl = 'petstore.json';
+specUrl = 'petstore.json';
 
 let store;
-const options: RedocRawOptions = { nativeScrollbars: false };
+const options: RedocRawOptions = { nativeScrollbars: false, enableConsole: true, providedByName: 'Intent ApiDocs by Nutanix', providedByUri: 'http://www.nutanix.com' };
 
 async function init() {
   const spec = await loadAndBundleSpec(specUrl);
   store = new AppStore(spec, specUrl, options);
-  /*
-  const ajv = new Ajv({ allErrors: true, unknownFormats: ['int32', 'UUID', 'int64'] });
-  ajv.addSchema(spec, 'specs.json')
-
-  const ajvError = require('ajv-errors')(ajv);
-
-  window.ajv = ajv;
-  window.ajvError = ajvError;
-  */
   renderRoot({ store });
 }
 

src/common-elements/buttons.ts

@@ -13,3 +13,9 @@ export const Button = styled.button`
 export const SendButton = Button.extend`
   background: #B0045E;
 `;
+
+export const ConsoleButton = Button.extend`
+  background: #e2e2e2;
+  color: black;
+  float: right;
+`;

src/common-elements/index.ts

@@ -11,3 +11,4 @@ export * from './samples';
 export * from './perfect-scrollbar';
 export * from './toggle';
 export * from './input';
+export * from './buttons';

src/common-elements/panels.ts

@@ -49,3 +49,7 @@ export const FlexLayout = styled.div`
 export const ConsoleActionsRow = FlexLayout.extend`
   padding: 5px 0px;
 `;
+
+export const FlexLayoutReverse = FlexLayout.extend`
+  flex-direction: row-reverse;
+`;

src/components/Console/ConsoleEditor.tsx

@@ -25,21 +25,6 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
 
   editor: any;
 
-  /*
-  get aceEditor(): AceEditor {
-    return this._aceEditor;
-  }
-
-  set aceEditor(aceEditor: AceEditor) {
-    if (aceEditor) {
-      this.aceEditor = this.aceEditor
-    }
-    else {
-      console.log("Error: Undefined ace editor!");
-    }
-  }
-  */
-
   render() {
     const { mediaTypes } = this.props;
 
@@ -56,15 +41,6 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
       }
     }
 
-    /*
-    let body = {};
-    if(mimeContent.mediaTypes && mimeContent.mediaTypes.length>0){
-      body = mimeContent.mediaTypes[0];
-      if(body.examples && body.examples.default) {
-
-      }
-    }
-    */
     return (
       <div>
         <AceEditor

src/components/Console/index.ts

@@ -0,0 +1,2 @@
+export * from './ConsoleEditor';
+export * from './ConsoleViewer';

src/components/Operation/Operation.tsx

@@ -4,7 +4,7 @@ import { SecurityRequirements } from '../SecurityRequirement/SecuirityRequiremen
 
 import { observer } from 'mobx-react';
 
-import { Badge, DarkRightPanel, H2, MiddlePanel, Row, Toggle } from '../../common-elements';
+import { ConsoleButton, Badge, FlexLayoutReverse, DarkRightPanel, H2, MiddlePanel, Row, Toggle } from '../../common-elements';
 
 import { OptionsContext } from '../OptionsProvider';
 
@@ -54,13 +54,11 @@ export class Operation extends React.Component<OperationProps, OperationState> {
     };
   }
 
-  onTry = e => {
+  onConsoleClick = () => {
     this.setState({
-      executeMode: e.target.checked,
+      executeMode: !this.state.executeMode
     });
-    console.log(e.target.checked + ' ' + this.props.operation);
+  }
-  };
-
   /*
   activate = (item: IMenuItem) => {
     this.props.menu.activateAndScroll(item, true);
@@ -77,6 +75,7 @@ export class Operation extends React.Component<OperationProps, OperationState> {
 
     const { name: summary, description, deprecated } = operation;
     const { executeMode } = this.state;
+    const consoleButtonLabel = (executeMode) ? 'Hide Console' : 'Show Console';
     return (
       <OptionsContext.Consumer>
         {options => (
@@ -86,8 +85,11 @@ export class Operation extends React.Component<OperationProps, OperationState> {
                 <ShareLink href={'#' + operation.id} />
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>
-              <Toggle type="checkbox" onChange={this.onTry} />
+              {options.enableConsole &&
-              <span>Try it out!</span>
+                <FlexLayoutReverse>
+                  <ConsoleButton onClick={this.onConsoleClick}>{consoleButtonLabel}</ConsoleButton>
+                </FlexLayoutReverse>
+              }
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
               {description !== undefined && <Markdown source={description} />}
               <SecurityRequirements securities={operation.security} />

src/components/SideMenu/SideMenu.tsx

@@ -28,15 +28,15 @@ export class SideMenu extends React.Component<{ menu: MenuStore }> {
               root={true}
             />
           ) : (
-            <PerfectScrollbar updateFn={this.saveScrollUpdate}>
+              <PerfectScrollbar updateFn={this.saveScrollUpdate}>
-              <MenuItems items={store.items} onActivate={this.activate} root={true} />
+                <MenuItems items={store.items} onActivate={this.activate} root={true} />
-              <RedocAttribution>
+                <RedocAttribution>
-                <a target="_blank" href="https://github.com/Rebilly/ReDoc">
+                  <a target="_blank" href={options.providedByUri}>
-                  Documentation Powered by ReDoc
+                    {options.providedByName}
-                </a>
+                  </a>
-              </RedocAttribution>
+                </RedocAttribution>
-            </PerfectScrollbar>
+              </PerfectScrollbar>
-          )
+            )
         }
       </OptionsContext.Consumer>
     );

src/services/RedocNormalizedOptions.ts

@@ -6,6 +6,7 @@ export interface RedocRawOptions {
   theme?: ThemeInterface;
   scrollYOffset?: number | string | (() => number);
   hideHostname?: boolean | string;
+  enableConsole?: boolean;
   expandResponses?: string | 'all';
   requiredPropsFirst?: boolean | string;
   noAutoAuth?: boolean | string;
@@ -15,6 +16,9 @@ export interface RedocRawOptions {
   hideLoading?: boolean | string;
   hideDownloadButton?: boolean | string;
 
+  providedByName?: string;
+  providedByUri?: string;
+
   unstable_ignoreMimeParameters?: boolean;
 }
 
@@ -93,6 +97,9 @@ export class RedocNormalizedOptions {
   pathInMiddlePanel: boolean;
   untrustedSpec: boolean;
   hideDownloadButton: boolean;
+  enableConsole: boolean;
+  providedByName: string;
+  providedByUri: string;
 
   /* tslint:disable-next-line */
   unstable_ignoreMimeParameters: boolean;
@@ -108,6 +115,9 @@ export class RedocNormalizedOptions {
     this.pathInMiddlePanel = argValueToBoolean(raw.pathInMiddlePanel);
     this.untrustedSpec = argValueToBoolean(raw.untrustedSpec);
     this.hideDownloadButton = argValueToBoolean(raw.hideDownloadButton);
+    this.enableConsole = argValueToBoolean(raw.enableConsole);
+    this.providedByName = raw.providedByName || 'Documentation Powered by ReDoc';
+    this.providedByUri = raw.providedByUri || 'https://github.com/Rebilly/ReDoc';
 
     this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);
   }

src/services/SearchStore.ts

@@ -9,7 +9,7 @@ let worker: new () => Worker;
 if (IS_BROWSER) {
   try {
     // tslint:disable-next-line
-    worker = require('workerize-loader?inline&fallback=false!./SearchWorker.worker');
+    worker = require('workerize-loader?fallback=false!./SearchWorker.worker');
   } catch (e) {
     worker = require('./SearchWorker.worker').default;
   }