feat(documentation): Swagger UI 3 support

Closes gravitee-io/issues#1108
Apizr · Feb 27, 2018 · ced9e70 · ced9e70
1 parent 3dcf92a
commit ced9e70
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 239 deletions.
diff --git a/conf/webpack-dist.conf.js b/conf/webpack-dist.conf.js
@@ -27,7 +27,7 @@ const autoprefixer = require('autoprefixer');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 let packages = Object.keys(pkg.dependencies);
-packages.splice(packages.indexOf('angular-swagger-ui'), 1);
+packages.splice(packages.indexOf('swagger-ui-dist'), 1);
 
 module.exports = {
   module: {

diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "angular-permission": "^5.3.2",
     "angular-sanitize": "^1.5.11",
     "angular-schema-form": "^0.8.13",
-    "angular-swagger-ui": "^0.5.4",
     "angular-timeline": "^1.7.0",
     "angular-translate": "^2.15.1",
     "angular-translate-loader-static-files": "^2.15.1",
@@ -52,6 +51,7 @@
     "read-more": "0.0.0",
     "satellizer": "^0.15.5",
     "showdown-prettify": "^1.3.0",
+    "swagger-ui-dist": "^3.10.0",
     "traverse": "^0.6.6",
     "unicode": "^0.6.1",
     "v-accordion": "^1.6.0"

diff --git a/src/components/documentation/_page.scss b/src/components/documentation/_page.scss
@@ -142,190 +142,50 @@
   margin-top: 20px;
 }
 
-.swagger-ui .operation {
-  border: 1px solid #eee;
-  border-radius: 3px;
-}
-
-.swagger-ui .operation .description {
-  font-size: 16px;
-  padding: .5em;
-  margin: 0;
-}
-
-.swagger-ui .operation .http-method {
-  font-size: 16px;
-  padding: .5em;
-  display: table-cell;
-  float: left;
-  border-top-left-radius: 1px;
-  margin-right: 0;
-  min-width: 68px;
-  text-align: center;
-  width: inherit;
-  font-weight: bold;
-}
-
-.swagger-ui .operation .path {
-  color: #fff;
-  font-size: 16px;
-  padding: .5em;
-  display: table-cell;
-  float: left;
-  border-top-left-radius: 1px;
-  margin-right: .4em;
-  min-width: 68px;
-  width: inherit;
-  font-weight: bold;
-}
-
-.swagger-ui .operation {
-  border-radius: 3px;
-}
-
-.swagger-ui .get {
-  border: 1px solid #2392f7;
-}
-
-.swagger-ui .get .path {
-  background-color: #2392f7;
-}
-
-.swagger-ui .get .content {
-  background-color: #fff;
-  border: none;
-}
-
-.swagger-ui .get .heading {
-  background-color: #e7f0f7;
-  border: none;
-}
-
-.swagger-ui .get .http-method {
-  background-color: #2392f7;
-}
-.swagger-ui .get h5,
-.swagger-ui .get .h5,
-.swagger-ui .get .description {
-  color: #2392f7;
-}
-.swagger-ui .get a.hide-try-it {
-  color: #2392f7;
-}
-
-.swagger-ui .options {
-  border: 1px solid #bdc3c7;
-}
-
-.swagger-ui .options .path {
-  background-color: #bdc3c7;
-}
-
-.swagger-ui .options .content {
-  background-color: #fff;
-  border: none;
-}
-
-.swagger-ui .options .heading {
-  background-color: #f9f9fa;
-  border: none;
-}
-
-.swagger-ui .options .http-method {
-  background-color: #bdc3c7;
-}
-.swagger-ui .options h5,
-.swagger-ui .options .h5,
-.swagger-ui .options .description {
-  color: #bdc3c7;
-}
-.swagger-ui .options a.hide-try-it {
-  color: #bdc3c7;
-}
-
-.swagger-ui .delete {
-  border: 1px solid #e30012;
-}
-
-.swagger-ui .delete .heading {
-  background-color: #f5e8e8;
-  border: none;
-}
-
-.swagger-ui .delete .http-method {
-  background-color: #e30012;
-}
-.swagger-ui .delete .path {
-  background-color: #e30012;
-}
-
-.swagger-ui .delete .content {
-  background-color: #fff;
-  border: none;
-}
-
-.swagger-ui .delete h5,
-.swagger-ui .delete .h5,
-.swagger-ui .delete .description {
-  color: #e30012;
-}
-.swagger-ui .delete a.hide-try-it {
-  color: #c8787a;
-}
+/* Remove all previous style for swagger documentation */
+#swagger-container {
+  all: initial;
+  thead, tbody, tr, td {
+    background: initial;
+  }
 
-.swagger-ui .post {
-  border: 1px solid #13c20f;
-}
+  td {
+    line-height: 15px;
+  }
 
-.swagger-ui .post .heading {
-  border: none;
-}
+  select {
+    padding: initial;
+  }
 
-.swagger-ui .post .http-method {
-  background-color: #13c20f;
-}
+  li {
+    min-width: 80px;
+  }
 
-.swagger-ui .post .content {
-  background-color: #fff;
-  border: none;
-}
-.swagger-ui .post .path {
-  background-color: #13c20f;
-}
 
-.swagger-ui .post h5,
-.swagger-ui .post .h5,
-.swagger-ui .post .description {
-  color: #13c20f;
-}
-.swagger-ui .post a.hide-try-it {
-  color: #6fc992;
-}
+  table {
+    min-width: 100%;
+    border: initial;
+    background: initial;
+    width: initial;
+    display: initial;
+    padding: initial;
+  }
 
-.swagger-ui .put {
-  border: 1px solid #ff9000;
-}
+  pre {
+    background: initial;
+    padding: initial;
+    border: initial;
+  }
 
-.swagger-ui .put .heading {
-  border: none;
-}
+  @import '~swagger-ui-dist/swagger-ui';
 
-.swagger-ui .put .content {
-  background-color: #fff;
-  border: none;
-}
+  .parameters,
+  .responses-inner {
+    width: 100%;
 
-.swagger-ui .put .http-method {
-  background-color: #ff9000;
-}
-.swagger-ui .put .path {
-  background-color: #ff9000;
-}
-.swagger-ui .put h5,
-.swagger-ui .put .h5,
-.swagger-ui .put .description {
-  color: #ff9000;
-}
-.swagger-ui .put a.hide-try-it {
-  color: #dcb67f;
+    .parameters-col_description,
+    .response-col_description   {
+      width: 60%;
+    }
+  }
 }
diff --git a/src/components/documentation/page-swagger.component.ts b/src/components/documentation/page-swagger.component.ts
@@ -16,6 +16,19 @@
 
 import * as _ from 'lodash';
 import UserService from '../../services/user.service';
+import { SwaggerUIBundle } from 'swagger-ui-dist';
+
+const DisableTryItOutPlugin = function () {
+  return {
+    statePlugins: {
+      spec: {
+        wrapSelectors: {
+          allowTryItOutFor: () => () => false
+        }
+      }
+    }
+  };
+};
 
 const PageSwaggerComponent: ng.IComponentOptions = {
   template: require('./page-swagger.html'),
@@ -33,11 +46,27 @@ const PageSwaggerComponent: ng.IComponentOptions = {
       } else {
         this.url = Constants.baseURL + 'portal/pages/' + this.pageId + '/content';
       }
-    };
 
-    this.tryItEnabled = function() {
-      return !_.isNil(this.page.configuration) && this.page.configuration.tryIt && UserService.isAuthenticated();
+      this.tryItEnabled = function () {
+        return !_.isNil(this.page.configuration) && this.page.configuration.tryIt && UserService.isAuthenticated();
+      };
+
+      const plugins = [];
+      if (!this.tryItEnabled()) {
+        plugins.push(DisableTryItOutPlugin);
+      }
+
+      SwaggerUIBundle({
+        url: this.url,
+        dom_id: '#swagger-container',
+        presets: [
+          SwaggerUIBundle.presets.apis,
+        ],
+        layout: 'BaseLayout',
+        plugins: plugins
+      });
     };
+
   }
 };
 

diff --git a/src/components/documentation/page-swagger.html b/src/components/documentation/page-swagger.html
@@ -15,10 +15,5 @@
     limitations under the License.
 
 -->
-<div ng-if="$ctrl.page.content && !$ctrl.edit && $ctrl.pageId" swagger-ui url="$ctrl.url"
-     api-explorer="$ctrl.tryItEnabled()" trusted-sources="true" permalinks="true" validator-url="false">
-</div>
 
-<div ng-if="$ctrl.page.content && $ctrl.edit" swagger-ui input-type="{{$ctrl.page.contentType.split('/')[1]}}" input="$ctrl.page.content"
-     api-explorer="$ctrl.tryItEnabled()" trusted-sources="true" permalinks="true" validator-url="false">
-</div>
+<div id="swagger-container"></div>
diff --git a/src/index.scss b/src/index.scss
@@ -4,7 +4,6 @@ $backgroundColor: rgb(45, 50, 62);
 @import '~angular-material-data-table/dist/md-data-table.min';
 @import '~bootstrap/dist/css/bootstrap.min.css';
 @import '~angular-gridster/dist/angular-gridster.min.css';
-@import '~angular-swagger-ui/dist/css/swagger-ui.min';
 @import '~dragular/dist/dragular';
 @import '~v-accordion/dist/v-accordion.min.css';
 @import '~codemirror/lib/codemirror';

diff --git a/src/management/management.module.ts b/src/management/management.module.ts
@@ -78,16 +78,7 @@ require('../libraries/angular-schema-form/boostrap-decorator');
 require('../libraries/angular-schema-form/codemirror-decorator');
 require('../libraries/angular-ui-codemirror/ui-codemirror');
 
-require('angular-swagger-ui');
-require('angular-swagger-ui/dist/scripts/modules/swagger-markdown.min');
-require('angular-swagger-ui/dist/scripts/modules/swagger-auth.min');
-require('angular-swagger-ui/dist/scripts/modules/swagger-auth-ui-bootstrap-modal.min');
-require('angular-swagger-ui/dist/scripts/modules/swagger-external-references.min');
-require('angular-swagger-ui/dist/scripts/modules/swagger-yaml-parser.min');
-require('angular-swagger-ui/dist/scripts/modules/swagger-xml-formatter.min');
-require('angular-swagger-ui/dist/scripts/modules/swagger1-converter.min');
-require('angular-swagger-ui/dist/scripts/modules/openapi3-converter.min');
-
+require('swagger-ui-dist');
 require('../libraries/showdown-extension/DocHelper-extension.js');
 
 require('ngclipboard');
@@ -249,7 +240,6 @@ import ImageDirective from '../components/image/image.directive';
 import EventsService from '../services/events.service';
 import AnalyticsService from '../services/analytics.service';
 import DashboardController from '../management/platform/dashboard/dashboard.controller';
-import PageSwaggerHttpClientService from '../services/pageSwaggerHttpClient.service';
 import ViewsController from '../management/configuration/views/views.controller';
 import ViewService from '../services/view.service';
 import DeleteViewDialogController from '../management/configuration/views/delete.view.dialog.controller';
@@ -367,7 +357,7 @@ import ChartService from '../services/chart.service';
 
 import ngInfiniteScroll = require('ng-infinite-scroll');
 
-angular.module('gravitee-management', [uiRouter, permission, uiPermission, 'ngMaterial', 'ramlConsoleApp', 'ng-showdown', 'swaggerUi',
+angular.module('gravitee-management', [uiRouter, permission, uiPermission, 'ngMaterial', 'ramlConsoleApp', 'ng-showdown',
   'ngMdIcons', 'ui.codemirror', 'md.data.table', 'ngCookies', 'dragularModule', 'readMore',
   'ngMessages', 'vAccordion', 'schemaForm', 'ngclipboard', 'ui.validate', 'angular-timeline',
   'utf8-base64',  'ngFileUpload', 'md-steppers', 'ui.tree', 'angular-jwt', 'gridster', 'angular-loading-bar',
@@ -485,7 +475,6 @@ angular.module('gravitee-management', [uiRouter, permission, uiPermission, 'ngMa
   .service('FetcherService', FetcherService)
   .service('EventsService', EventsService)
   .service('AnalyticsService', AnalyticsService)
-  .service('PageSwaggerHttpClientService', PageSwaggerHttpClientService)
   .service('ViewService', ViewService)
   .service('GroupService', GroupService)
   .service('SubscriptionService', SubscriptionService)

diff --git a/src/management/management.run.ts b/src/management/management.run.ts
@@ -17,7 +17,7 @@
 import UserService from '../services/user.service';
 import _ = require('lodash');
 
-function runBlock($rootScope, $window, $http, $mdSidenav, $transitions, swaggerModules, PageSwaggerHttpClientService,
+function runBlock($rootScope, $window, $http, $mdSidenav, $transitions,
                   $timeout, UserService: UserService, Constants, PermissionStrategies) {
   'ngInject';
 
@@ -55,9 +55,6 @@ function runBlock($rootScope, $window, $http, $mdSidenav, $transitions, swaggerM
     $rootScope.isLoading = hasPendingRequests;
   });
 
-  //swagger-ui
-  swaggerModules.add(swaggerModules.BEFORE_EXPLORER_LOAD, PageSwaggerHttpClientService);
-
   $rootScope.displayLoader = true;
 
   // force displayLoader value to change on a new digest cycle