Merge pull request #1308 from swagger-api/ft/1224-generate-serve-client

Generate menus for codegen servers and clients

Author: shockey

dist/swagger-editor-bundle.js

@@ -51,7 +51,9 @@
     "react-file-download": "^0.3.2",
     "react-redux": "^4.x.x",
     "redux": "^3.x.x",
-    "swagger-ui": "^3.0.7"
+    "swagger-client": "^3.0.7",
+    "swagger-ui": "^3.0.7",
+    "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
     "autoprefixer": "6.6.1",

dist/swagger-editor-bundle.js.map

@@ -1,19 +1,43 @@
 import React, { PropTypes } from "react"
+import Swagger from "swagger-client"
+import "whatwg-fetch"
 import DropdownMenu from "react-dd-menu"
 import Modal from "boron/DropModal"
 import downloadFile from "react-file-download"
 import YAML from "js-yaml"
 import beautifyJson from "json-beautify"
 
-import "./topbar.less"
 import "react-dd-menu/dist/react-dd-menu.css"
+import "./topbar.less"
 import Logo from "./logo_small.png"
 
 export default class Topbar extends React.Component {
   constructor(props, context) {
     super(props, context)
 
-    this.state = {}
+    Swagger("http://generator.swagger.io/api/swagger.json", {
+      requestInterceptor: (req) => {
+        req.headers["Accept"] = "application/json"
+        req.headers["content-type"] = "application/json"
+      }
+    })
+      .then(client => {
+        this.setState({ swaggerClient: client })
+        client.apis.clients.clientOptions()
+          .then(res => {
+            this.setState({ clients: res.body })
+          })
+        client.apis.servers.serverOptions()
+          .then(res => {
+            this.setState({ servers: res.body })
+          })
+      })
+
+    this.state = {
+      swaggerClient: null,
+      clients: [],
+      servers: []
+    }
   }
 
   // Menu actions
@@ -71,6 +95,50 @@ export default class Topbar extends React.Component {
     this.props.specActions.updateSpec(yamlContent)
   }
 
+  downloadGeneratedFile = (type, name) => {
+    let { specSelectors } = this.props
+    let swaggerClient = this.state.swaggerClient
+    if(!swaggerClient) {
+      // Swagger client isn't ready yet.
+      return
+    }
+    if(type === "server") {
+      swaggerClient.apis.servers.generateServerForLanguage({
+        framework : name,
+        body: JSON.stringify({
+          spec: specSelectors.specResolved()
+        }),
+        headers: JSON.stringify({
+          Accept: "application/json"
+        })
+      })
+        .then(res => handleResponse(res))
+    }
+
+    if(type === "client") {
+      swaggerClient.apis.clients.generateClient({
+        language : name,
+        body: JSON.stringify({
+          spec: specSelectors.specResolved()
+        })
+      })
+        .then(res => handleResponse(res))
+    }
+
+    function handleResponse(res) {
+      if(!res.ok) {
+        return console.error(res)
+      }
+
+      fetch(res.body.link)
+        .then(res => res.blob())
+        .then(res => {
+          downloadFile(res, `${name}-${type}-generated.zip`)
+        })
+    }
+
+  }
+
   // Helpers
 
   showModal = () => {
@@ -114,6 +182,14 @@ export default class Topbar extends React.Component {
             <DropdownMenu {...makeMenuOptions("Edit")}>
               <li><button type="button" onClick={this.convertToYaml}>Convert to YAML</button></li>
             </DropdownMenu>
+            <DropdownMenu className="long" {...makeMenuOptions("Generate Server")}>
+              { this.state.servers
+                  .map(serv => <li><button type="button" onClick={this.downloadGeneratedFile.bind(null, "server", serv)}>{serv}</button></li>) }
+            </DropdownMenu>
+            <DropdownMenu className="long" {...makeMenuOptions("Generate Client")}>
+              { this.state.clients
+                  .map(cli => <li><button type="button" onClick={this.downloadGeneratedFile.bind(null, "client", cli)}>{cli}</button></li>) }
+            </DropdownMenu>
           </div>
         </div>
         <Modal className="swagger-ui modal" ref="modal">

dist/swagger-editor.css

@@ -41,6 +41,22 @@
 }
 
 .dd-menu {
+  &.long {
+    display: flex;
+    flex-wrap: wrap;
+    max-width:800px;
+    .dd-menu-items {
+      width:600px;
+      .dd-items-left {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 1.7em 0 0!important;
+        li {
+          flex:22%;
+        }
+      }
+    }
+  }
 
   .dd-menu-items {
     margin: 1.1em 0 0 0 !important;