Initial work to bring up an OpenAPI 3 definition

README.md

@@ -1,11 +1,7 @@
 OpenApi-gui
 ===========
 
-## Work in Progress
-
-**Warning!** Outputting to OpenApi format is still in flux, and may not preserve all data of a loaded definition.
-
-OpenApi-gui is a GUI for creating and editing OpenApi (Swagger) JSON/YAML definitions. In its current form it is most useful as a tool for starting off and editing simple OpenApi definitions.
+OpenApi-gui is a GUI for creating and editing OpenApi version 3.0.x JSON/YAML definitions. In its current form it is most useful as a tool for starting off and editing simple OpenApi definitions.
 
 ![Screenshot](https://mermade.github.io/openapi-gui/img/screenshot.png)
 
@@ -15,7 +11,7 @@ Description
 -----------
 ### How It Works
 
-Select an existing OpenApi definition to upload, or create a new definition and start adding Paths, Operations, and Parameters. When an existing definition is used, it is parsed and forms for editing each Path, Operation and Parameter will be created.
+Select an existing OpenApi 3.0.x definition to upload, or create a new definition and start adding Paths, Operations, and Parameters. When an existing definition is used, it is parsed and forms for editing each Path, Operation and Parameter will be created.
 
 Click an item from the menu on the left to begin editing. View the JSON/YAML output at any time by selecting one of the "Export" tabs. When finished, download the output to save it locally or copy it your clipboard. OpenApi-gui only stores one definition at a time, and this is in your browser's local-storage. Make sure you save your JSON/YAML output locally.
 
@@ -36,13 +32,13 @@ You only need to `npm install` the Node.js modules if you wish to use the `Arapa
 * OpenApi-gui will de-reference shared parameters. For publication, you may wish to pass your OpenApi definition through a tool such as [OpenApi-optimise](https://githhub.com/mermade/openapi_optimise).
 * The definition must be self-contained with no external `$ref`s.
 * Editing a response / example / body schema will dereference it.
-* OpenApi-gui will not always preserve vendor-extensions.
+* OpenApi-gui will not always preserve vendor-extensions, e.g. if a parameter is deleted and recreated.
 * OpenApi-gui will not preserve comments from definitions imported in YAML format.
 
 TODO
 ----
 
 * Add validation on form fields
-* Consumes/Produces and security at operation level
+* Editing of bodyRequest schemas / content-types
 * Handle circular `$ref`s in responses / examples / body schemas
 

app.json

@@ -1,7 +1,7 @@
 {
   "name": "OpenApi-gui",
-  "description": "GUI for OpenApi / Swagger definitions",
+  "description": "GUI for OpenApi 3.0.x definitions",
   "repository": "https://github.com/mermade/openapi-gui",
   "logo": "http://mermade.github.io/arapaho/logo.jpg",
-  "keywords": ["openapi", "swagger", "api", "documentation", "docs", "gui", "editor"]
+  "keywords": ["openapi", "openapi3", "api", "documentation", "docs", "gui", "editor"]
 }

src/app/app.js

@@ -95,7 +95,7 @@ function onlyUnique(value, index, self) {
 var openapi;
 
 if (window.localStorage) {
-    var o = window.localStorage.getItem('swagger2');
+    var o = window.localStorage.getItem('openapi3');
     if (o) {
         try {
             openapi = JSON.parse(o);
@@ -128,7 +128,7 @@ function app_main() {
         methods : {
             save : function() {
                 if (window.localStorage) {
-                    window.localStorage.setItem('swagger2', JSON.stringify(this.container.openapi));
+                    window.localStorage.setItem('openapi3', JSON.stringify(this.container.openapi));
                 }
             },
             postProcessDefinition : function() {
@@ -160,4 +160,4 @@ function app_main() {
             }
         }
     });
-}
+}

src/app/gui.html

@@ -6,7 +6,7 @@
 				<a class="btn btn-info pull-right" v-on:click="scrollTop()"><i class='icon-white icon-arrow-up'></i> Top</a>
 				<a class="btn btn-info pull-right" v-on:click="save()"><i class='icon-white icon-save'></i> Save</a>
 				<a class="btn btn-info pull-right" v-on:click="undo()"><i class='icon-white icon-undo'></i> Undo</a>
-				<a class="btn btn-info pull-right" target="_blank" href="https://twitter.com/share?source=tweetbutton&text=OpenApi-Gui%20Visual%20editor%20for%20%23OpenApi%20%23Swagger%20Via%20%40PermittedSoc&url=https%3A%2F%2Fgithub.com%2FMermade%2Fopenapi-gui"><i class='icon-white icon-twitter'></i></a>
+				<a class="btn btn-info pull-right" target="_blank" href="https://twitter.com/share?source=tweetbutton&text=OpenApi-Gui%20Visual%20editor%20for%20%23OpenApi%23.0.x%20Via%20%40PermittedSoc&url=https%3A%2F%2Fgithub.com%2FMermade%2Fopenapi-gui"><i class='icon-white icon-twitter'></i></a>
 				<a class="btn btn-info pull-right" target="_blank" href="https://twitter.com/intent/follow?screen_name=PermittedSoc"><i class='icon-white icon-twitter'></i> Follow</a>
 				<a class='btn btn-info pull-right' target="_blank" href="https://github.com/mermade/openapi-gui"><i class='icon-white icon-github'></i> GitHub</a>
 			</div>
@@ -70,7 +70,7 @@
 				<div class="tab-pane" id="about">
 					<h1>What is OpenApi-gui?</h1>
 					<br> OpenApi-gui is a GUI for creating and updating <a href="https://github.com/OAI/OpenAPI-Specification/blob/master/versions/2.0.md">
-					OpenApi / Swagger</a> definitions.
+					OpenApi 3.0.x</a> definitions.
 					<br>
 					<h2>How does OpenApi-gui work?</h2>
 					<br> Upload an existing definition, or create a new one (select the red 'trash-can' button to remove all Paths) and
@@ -343,7 +343,7 @@ <h2>How does OpenApi-gui work?</h2>
 											<div>
 												<a class="btn btn-info" v-on:click="addScope(sdname)"><i class='icon-plus icon-white'></i> Add Scope</a>
 											</div>
-											<api-scope v-for="(sdesc, sname) in sd.scopes" :sd="sd" :sdname="sdname" :sname="sname" inline-template>
+											<api-scope v-for="(sdesc, sname) in sd.scopes" :sd="sd" :sdname="sdname" :sname="sname" :key="sname" inline-template>
 												<div>
 													<div class='control-group'>
 														<label class='control-label'> Scope Name </label>

src/app/gui.js

@@ -129,17 +129,17 @@ Vue.component('gui-main', {
 
 			if (!this.importschema) this.importschema = {};
 			if (!this.importschema.text) {
-				schema = emptySwagger;
-				this.importschema.text = JSON.stringify(emptySwagger, null, 2);
+				schema = emptyOpenAPI;
+				this.importschema.text = JSON.stringify(emptyOpenAPI, null, 2);
 			}
 
-			if (schema.swagger == '2.0') {
-				if (window.localStorage) window.localStorage.setItem('swagger2', JSON.stringify(schema));
+			if (schema.openapi.startsWith('3.0.')) {
+				if (window.localStorage) window.localStorage.setItem('openapi3', JSON.stringify(schema));
 				schema = preProcessDefinition(schema);
 				Vue.set(this.$root.container, 'openapi', schema);
 			}
 			else {
-				bootbox.alert('Swagger version must be 2.0');
+				bootbox.alert('OpenAPI version must be 3.0.x');
 			}
 		},
 
@@ -157,7 +157,7 @@ Vue.component('gui-main', {
 			});
 			var data = "text/json;charset=utf-8," + encodeURIComponent(output);
 			$('#download-output').attr('href', 'data:' + data);
-			$('#download-output').attr('download', 'swagger.json');
+			$('#download-output').attr('download', 'openapi.json');
 		},
 
 		renderOutputYaml: function () {
@@ -176,7 +176,7 @@ Vue.component('gui-main', {
 			});
 			var data = "text/x-yaml;charset=utf-8," + encodeURIComponent(output);
 			$('#download-yaml').attr('href', 'data:' + data);
-			$('#download-yaml').attr('download', 'swagger.yaml');
+			$('#download-yaml').attr('download', 'openapi.yaml');
 		},
 
 		scrollTop: function () {
@@ -190,7 +190,7 @@ Vue.component('gui-main', {
 
 		undo: function () {
 			if (window.localStorage) {
-				Vue.set(this.$root.container, 'openapi', JSON.parse(window.localStorage.getItem('swagger2')));
+				Vue.set(this.$root.container, 'openapi', JSON.parse(window.localStorage.getItem('openapi3')));
 			}
 		}