From 9fd292bf681a33f29ae603b0b1b987017a786039 Mon Sep 17 00:00:00 2001
From: Harjeet Singh <harjeet.singh@nutanix.com>
Date: Wed, 18 Apr 2018 13:16:27 -0700
Subject: [PATCH] added try it checkbox

---
 .gitignore                             |  3 ++
 demo/.gitignore                        |  1 +
 demo/webpack.config.ts                 |  2 ++
 src/common-elements/index.ts           |  2 ++
 src/common-elements/input.tsx          |  8 +++++
 src/common-elements/toggle.tsx         | 10 ++++++
 src/components/Fields/Field.tsx        | 17 +++++----
 src/components/Operation/Operation.tsx | 48 +++++++++++++++++++++++---
 8 files changed, 80 insertions(+), 11 deletions(-)
 create mode 100644 demo/.gitignore
 create mode 100644 src/common-elements/input.tsx
 create mode 100644 src/common-elements/toggle.tsx

diff --git a/.gitignore b/.gitignore
index 215b9a50..6c666a97 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,6 @@ cli/index.js
 .ghpages-tmp
 stats.json
 /package-lock.json
+
+//npmrc for local npm
+.npmrc
\ No newline at end of file
diff --git a/demo/.gitignore b/demo/.gitignore
new file mode 100644
index 00000000..3e44267f
--- /dev/null
+++ b/demo/.gitignore
@@ -0,0 +1 @@
+intent.json
\ No newline at end of file
diff --git a/demo/webpack.config.ts b/demo/webpack.config.ts
index 864e8c8d..d5fbe807 100644
--- a/demo/webpack.config.ts
+++ b/demo/webpack.config.ts
@@ -68,6 +68,8 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
     stats: 'minimal',
   },
 
+  devtool: 'source-map',
+
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
   },
diff --git a/src/common-elements/index.ts b/src/common-elements/index.ts
index 5c9ec542..cd940d34 100644
--- a/src/common-elements/index.ts
+++ b/src/common-elements/index.ts
@@ -9,3 +9,5 @@ export * from './mixins';
 export * from './tabs';
 export * from './samples';
 export * from './perfect-scrollbar';
+export * from './toggle';
+export * from './input';
diff --git a/src/common-elements/input.tsx b/src/common-elements/input.tsx
new file mode 100644
index 00000000..c7284b2f
--- /dev/null
+++ b/src/common-elements/input.tsx
@@ -0,0 +1,8 @@
+import styled, { css } from '../styled-components';
+
+export const TextField = styled.input`
+  padding: 0.5em;
+  margin: 0.5em;
+  border: 1px solid rgba(38,50,56,0.5);
+  border-radius: 3px;
+`;
\ No newline at end of file
diff --git a/src/common-elements/toggle.tsx b/src/common-elements/toggle.tsx
new file mode 100644
index 00000000..cada9073
--- /dev/null
+++ b/src/common-elements/toggle.tsx
@@ -0,0 +1,10 @@
+import styled, { css } from '../styled-components';
+
+export const Toggle = styled.input`
+  padding: 0.5em;
+  margin: 0.5em;
+  color: palevioletred;
+  background: papayawhip;
+  border: none;
+  border-radius: 3px;
+`;
\ No newline at end of file
diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
index 102f98d8..c43f7d6c 100644
--- a/src/components/Fields/Field.tsx
+++ b/src/components/Fields/Field.tsx
@@ -11,7 +11,7 @@ import {
   PropertyNameCell,
 } from '../../common-elements/fields-layout';
 
-import { ShelfIcon } from '../../common-elements/';
+import { ShelfIcon, TextField } from '../../common-elements/';
 
 import { FieldModel } from '../../services/models';
 import { Schema, SchemaOptions } from '../Schema/Schema';
@@ -43,12 +43,12 @@ export class Field extends React.PureComponent<FieldProps> {
         {required && <RequiredLabel> required </RequiredLabel>}
       </ClickablePropertyNameCell>
     ) : (
-      <PropertyNameCell className={deprecated ? 'deprecated' : undefined}>
-        <PropertyBullet />
-        {name}
-        {required && <RequiredLabel> required </RequiredLabel>}
-      </PropertyNameCell>
-    );
+        <PropertyNameCell className={deprecated ? 'deprecated' : undefined}>
+          <PropertyBullet />
+          {name}
+          {required && <RequiredLabel> required </RequiredLabel>}
+        </PropertyNameCell>
+      );
     return (
       <>
         <tr className={isLast ? 'last ' + className : className}>
@@ -56,6 +56,9 @@ export class Field extends React.PureComponent<FieldProps> {
           <PropertyDetailsCell>
             <FieldDetails {...this.props} />
           </PropertyDetailsCell>
+          {field && field.in === 'path' &&
+            <td><TextField placeholder="foo" /></td>
+          }
         </tr>
         {field.expanded &&
           withSubSchema && (
diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
index 75c8fd92..5e3d8fe4 100644
--- a/src/components/Operation/Operation.tsx
+++ b/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 } from '../../common-elements';
+import { Badge, DarkRightPanel, H2, MiddlePanel, Row, Toggle } from '../../common-elements';
 
 import { OptionsContext } from '../OptionsProvider';
 
@@ -39,12 +39,43 @@ interface OperationProps {
   operation: OperationType;
 }
 
+export interface OperationState {
+  executeMode: boolean;
+}
+
 @observer
-export class Operation extends React.Component<OperationProps> {
+export class Operation extends React.Component<OperationProps, OperationState> {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      executeMode: false,
+    };
+  }
+
+  onTry(e) {
+    this.setState({
+      executeMode: e.target.checked
+    });
+    console.log(e.target.checked + ' ' + this.props.operation);
+  }
+
+  /*
+  activate = (item: IMenuItem) => {
+    this.props.menu.activateAndScroll(item, true);
+    setTimeout(() => {
+      if (this._updateScroll) {
+        this._updateScroll();
+      }
+    });
+  };
+  */
+
   render() {
     const { operation } = this.props;
 
     const { name: summary, description, deprecated } = operation;
+    const { executeMode } = this.state;
     return (
       <OptionsContext.Consumer>
         {options => (
@@ -54,6 +85,8 @@ export class Operation extends React.Component<OperationProps> {
                 <ShareLink href={'#' + operation.id} />
                 {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
               </H2>
+              <Toggle type="checkbox" onChange={this.onTry.bind(this)} />
+              <span>Try it out!</span>
               {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
               {description !== undefined && <Markdown source={description} />}
               <SecurityRequirements securities={operation.security} />
@@ -62,8 +95,15 @@ export class Operation extends React.Component<OperationProps> {
             </MiddlePanel>
             <DarkRightPanel>
               {!options.pathInMiddlePanel && <Endpoint operation={operation} />}
-              <RequestSamples operation={operation} />
-              <ResponseSamples operation={operation} />
+              {executeMode &&
+                <div>Execute Mode</div>
+              }
+              {!executeMode &&
+                <RequestSamples operation={operation} />
+              }
+              {!executeMode &&
+                <ResponseSamples operation={operation} />
+              }
             </DarkRightPanel>
           </OperationRow>
         )}