Release/4.1.0

.travis.yml

@@ -1,15 +1,12 @@
 language: node_js
-dist: trusty
 node_js: stable
 before_script:
-- npm install --silent bower polymer-cli
-- "./node_modules/.bin/bower install --silent"
+- bower install --silent
 addons:
   sauce_connect: true
 script:
 - npm run lint
-- ./node_modules/.bin/polymer test --plugin sauce --job-name "api-console:${TRAVIS_BRANCH}"
-  --build-number=${TRAVIS_BUILD_NUMBER}
+- polymer test --plugin sauce --job-name "api-console:${TRAVIS_BRANCH}" --build-number=${TRAVIS_BUILD_NUMBER}
 cache:
   directories:
   - node_modules

api-console-request.html

@@ -79,6 +79,7 @@
       redirects="{{redirects}}"
       source-message="{{sourceMessage}}"
       no-url-editor="{{noUrlEditor}}"
+      base-uri="[[baseUri]]"
       on-api-console-request="_apiRequested"></raml-request-panel>
     <template is="dom-if" if="[[hasResponse]]">
       <response-view
@@ -220,7 +221,11 @@
          * Note that the editor is still in the DOM. This property just hiddes
          * it.
          */
-        noUrlEditor: Boolean
+        noUrlEditor: Boolean,
+        /**
+         * Api's base URI.
+         */
+        baseUri: String
       },
 
       listeners: {

api-console.html

@@ -66,8 +66,14 @@
       display: none !important;
     }
 
-    iron-pages {
+    .main-content {
+      min-height: 100%;
+      @apply --api-console-main-container;
+    }
+
+    .pages-content {
       height: 100%;
+      @apply --api-console-pages-container;
     }
 
     iron-pages>* {
@@ -93,6 +99,22 @@
         @apply(--layout-horizontal);
       }
     }
+
+    .powered-by {
+      padding: 12px 0px;
+      border-top: 1px rgba(0,0,0,0.24) solid;
+      margin: 8px 12px 0 12px;
+    }
+
+    a img {
+      text-underline: none;
+    }
+
+    a.attribution {
+      display: inline-block;
+      width: 177px;
+      margin-left: 24px;
+    }
     </style>
     <paper-drawer-panel responsive-width="860px" force-narrow="[[manualNavigation]]">
       <template is="dom-if" if="[[!manualNavigation]]">
@@ -109,20 +131,25 @@
               first-level-opened
               resources-opened
               documentation-opened></raml-path-selector>
-            <content select="[nav-addon]"></content>
+            <template is="dom-if" if="[[!noAttribution]]" restamp>
+              <div class="powered-by">
+                <a href="https://github.com/mulesoft/api-console" class="attribution" target="_blank">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 818.9 148"><defs><style>.cls-1{fill:#424143;}.cls-2{font-size:60px;fill:#414042;font-family:OpenSans, Open Sans;}</style></defs><path class="cls-1" d="M436.08,12.57a61.79,61.79,0,1,0,62.08,61.79A62,62,0,0,0,436.08,12.57Zm0,118.8a56.63,56.63,0,1,1,56.63-56.63A56.63,56.63,0,0,1,436.09,131.36Z"/><path class="cls-1" d="M420.34,102.08a28.4,28.4,0,0,1-15.87-25.84,29.25,29.25,0,0,1,4.89-16.29l20.42,30.43h12.34l20.42-30.43a29.25,29.25,0,0,1,4.89,16.29,28.55,28.55,0,0,1-14,24.87l3.93,15.06a46.47,46.47,0,0,0,2.45-81.29L436.08,71.47,412.6,34.75A46.47,46.47,0,0,0,416.45,117Z"/><polygon class="cls-1" points="544.97 80.8 529.71 48.31 521.79 48.31 521.79 100.53 529.71 100.53 529.71 65.62 542.03 91.08 547.9 91.08 559.93 65.62 559.93 100.53 567.85 100.53 567.85 48.31 559.93 48.31 544.97 80.8"/><path class="cls-1" d="M597.61,86c0,5.73-3.53,8.29-7.7,8.29s-7.48-2.5-7.48-8.29V63.34h-7.48V87.11c0,4.19.88,7.71,3.74,10.5a12.93,12.93,0,0,0,9.17,3.37,13.28,13.28,0,0,0,9.9-4.18v3.74h7.34V63.34h-7.48Z"/><path class="cls-1" d="M619.75,89.83V48.31h-7.48v42c0,5.51,3.08,10.27,10.2,10.27h4.62V94.16h-3.3C620.77,94.16,619.75,92.68,619.75,89.83Z"/><path class="cls-1" d="M645.07,62.91c-9.54,0-15.77,7-15.77,19,0,14.16,7.41,19.07,16.73,19.07,6.53,0,10.12-2,13.93-5.79L655.2,90.7a11.08,11.08,0,0,1-9,3.81c-6.09,0-9.46-4-9.46-10.41h24.13V80.8C660.85,70.24,655.05,62.91,645.07,62.91Zm-8.36,16a11.79,11.79,0,0,1,1-5.06,7.77,7.77,0,0,1,7.41-4.69,7.66,7.66,0,0,1,7.34,4.69,11.62,11.62,0,0,1,1,5.06Z"/><path class="cls-1" d="M697.78,74.93c-2.2-2-4.91-3.15-9.76-3.89l-5.94-.88a11.67,11.67,0,0,1-5.87-2.42,6.24,6.24,0,0,1-2-4.84c0-4.62,3.37-8.15,9.54-8.15,4.4,0,8.14,1,11.37,4l5.06-5c-4.47-4.18-9.31-5.94-16.21-5.94-10.86,0-17.46,6.23-17.46,15.33,0,4.25,1.25,7.55,3.82,10,2.27,2.12,5.64,3.59,9.9,4.18l6.16.89c3.09.44,4.4,1,5.73,2.2a7,7,0,0,1,2.05,5.43c0,5.06-4,8-10.78,8-5.36,0-9.54-1.17-13.35-5l-5.28,5.21c5,5.06,10.64,6.9,18.48,6.9C694.18,101,702,95.25,702,85.65,702,81.16,700.63,77.43,697.78,74.93Z"/><path class="cls-1" d="M721.76,62.91a14.88,14.88,0,0,0-11.08,4.4c-3.52,3.66-4.4,8.36-4.4,14.6s.88,11,4.4,14.67a14.88,14.88,0,0,0,11.08,4.4,15,15,0,0,0,11.15-4.4c3.52-3.66,4.4-8.36,4.4-14.67s-.88-10.94-4.4-14.6A15,15,0,0,0,721.76,62.91Zm5.5,29.19a7.65,7.65,0,0,1-5.5,2.2,7.44,7.44,0,0,1-5.42-2.2c-2.28-2.27-2.57-6.17-2.57-10.2s.29-7.92,2.57-10.2a7.39,7.39,0,0,1,5.42-2.13,7.6,7.6,0,0,1,5.5,2.13c2.27,2.27,2.57,6.16,2.57,10.2S729.54,89.83,727.27,92.1Z"/><path class="cls-1" d="M744.88,58.29V64h-4.26v5.73h4.26v30.81h7.48V69.73h7.41V64h-7.41V58.65c0-2.71,1.31-4.33,4.1-4.33h3.31V47.94h-4.7C748.1,47.94,744.88,52.93,744.88,58.29Z"/><path class="cls-1" d="M776.12,52.71h-7.48V64h-4.26v5.73h4.26V90.19c0,5.36,3.22,10.35,10.19,10.35h4.47V94.16h-3.08c-2.78,0-4.11-1.62-4.11-4.33V69.73h7.19V64h-7.19Z"/><path class="cls-1" d="M792.58,58.48a4,4,0,0,0-2.14-2.11,4.11,4.11,0,0,0-3.11,0,4.07,4.07,0,0,0-1.29.84,4,4,0,0,0-.87,1.26,3.86,3.86,0,0,0-.32,1.58,3.94,3.94,0,0,0,.32,1.6,4,4,0,0,0,.87,1.28,4,4,0,0,0,1.29.84,4.19,4.19,0,0,0,3.11,0,3.92,3.92,0,0,0,1.28-.84,4.1,4.1,0,0,0,.87-1.28,4,4,0,0,0,.32-1.6A3.86,3.86,0,0,0,792.58,58.48Zm-.66,2.94a3.34,3.34,0,0,1-.7,1.09,3.25,3.25,0,0,1-1,.72,3.19,3.19,0,0,1-1.3.26,3.24,3.24,0,0,1-2.36-1,3.35,3.35,0,0,1-.7-1.09,3.64,3.64,0,0,1-.25-1.37,3.54,3.54,0,0,1,.25-1.34,3.26,3.26,0,0,1,3.06-2.06,3.21,3.21,0,0,1,1.3.26,3.26,3.26,0,0,1,1.74,1.8,3.52,3.52,0,0,1,.25,1.34A3.62,3.62,0,0,1,791.92,61.42Z"/><path class="cls-1" d="M790.42,60a1.14,1.14,0,0,0,.35-.93,1.23,1.23,0,0,0-.4-1,1.92,1.92,0,0,0-1.24-.33h-1.81v4.68H788v-2h.77l1.28,2h.78l-1.34-2.07A1.59,1.59,0,0,0,790.42,60Zm-1.61-.19H788V58.32h1l.37,0a1,1,0,0,1,.33.1.63.63,0,0,1,.24.21A.68.68,0,0,1,790,59a.79.79,0,0,1-.1.43.61.61,0,0,1-.27.23,1.19,1.19,0,0,1-.39.09Z"/><text class="cls-2" transform="translate(19 91.93)">Powered by</text></svg>
+                </a>
+              </div>
+            </template>
           </div>
         </paper-header-panel>
       </template>
       <paper-header-panel main>
         <paper-toolbar>
           <paper-icon-button icon="arc:menu" paper-drawer-toggle hidden$="[[manualNavigation]]"></paper-icon-button>
           <div class="title">[[raml.title]]</div>
-          <span class="flex"></span>
           <div class="nav-content">
             <content select="[nav]"></content>
           </div>
         </paper-toolbar>
-        <div>
+        <div class="main-content">
           <template is="dom-if" if="[[manualNavigation]]">
             <raml-path-selector opened$=[[navigationOpened]]
               narrow="[[narrow]]"
@@ -132,7 +159,7 @@
               resources-opened
               documentation-opened></raml-path-selector>
           </template>
-          <iron-pages selected="[[page]]" attr-for-selected="name" role="main" id="mainPages">
+          <iron-pages class="pages-content" selected="[[page]]" attr-for-selected="name" role="main" id="mainPages">
             <raml-documentation-panel
               name="docs"
               narrow="[[narrow]]"
@@ -152,8 +179,10 @@
               proxy="[[proxy]]"
               proxy-encode-url="[[proxyEncodeUrl]]"
               bower-location="[[bowerLocation]]"
-              no-url-editor="{{noUrlEditor}}"></api-console-request>
+              no-url-editor="{{noUrlEditor}}"
+              base-uri="[[baseUri]]"></api-console-request>
           </iron-pages>
+          <content select=".api-console-content"></content>
         </div>
       </paper-header-panel>
     </paper-drawer-panel>
@@ -285,7 +314,23 @@
        * Note that the editor is still in the DOM. This property just hiddes
        * it.
        */
-      noUrlEditor: Boolean
+      noUrlEditor: Boolean,
+      /**
+       * A base URI for the API. To be set if RAML spec is missing `baseUri`
+       * declaration and this produces invalid URL input. This information
+       * is passed to the URL editor that prefixes the URL with `baseUri` value
+       * if passed URL is a relative URL.
+       */
+      baseUri: String,
+      /**
+       * Removes the "Powered by Mulesoft" attribution from the main navigation.
+       * The use of this feature must be in accordance with all licensing
+       * and copyright protections required by the use of this software
+       */
+      noAttribution: {
+        type: Boolean,
+        value: false
+      }
     },
 
     listeners: {
@@ -392,7 +437,7 @@
       }
     },
     // Handler for the path changed event. Switches to docs if needed.
-    _pathChangedEventHandler: function(e) {
+    _pathChangedEventHandler: function() {
       if (this.page !== 'docs') {
         this.page = 'docs';
       }

bower.json

@@ -4,6 +4,7 @@
   "authors": [
     "The Advanced REST client authors <arc@mulesoft.com>"
   ],
+  "version": "4.1.0",
   "keywords": [
     "web-components",
     "polymer",
@@ -29,7 +30,7 @@
     "paper-icon-button": "PolymerElements/paper-icon-button#~1.1.0",
     "raml-aware": "advanced-rest-client/raml-aware#^1.0.2",
     "paper-toast": "PolymerElements/paper-toast#^1.3.0",
-    "raml-request-panel": "advanced-rest-client/raml-request-panel#^0.1.0",
+    "raml-request-panel": "advanced-rest-client/raml-request-panel#^0.2.1",
     "raml-documentation-panel": "advanced-rest-client/raml-documentation-panel#^2.0.9",
     "paper-progress": "PolymerElements/paper-progress#^1.0.11",
     "paper-button": "PolymerElements/paper-button#^1.0.14",
@@ -71,5 +72,7 @@
     "demo",
     "docs"
   ],
-  "version": "4.0.0"
+  "resolutions": {
+    "payload-parser-behavior": "0.2.1"
+  }
 }

demo/api-selector/app.js

@@ -0,0 +1,195 @@
+/**
+ * @license
+ * Copyright 2017 The Advanced REST client authors <arc@mulesoft.com>
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+/**
+ * The following script will handle API console routing when using the console as
+ * a standalone application.
+ *
+ * It uses native JavaScript APIs so it can be used outside Polymer scope.
+ *
+ * @author Pawel Psztyc <pawel.psztyc@mulesoft.com>
+ */
+(function() {
+  'use strict';
+  // API Console namespace.
+  var apiconsole = {};
+  // Namespace for standalone application.
+  apiconsole.app = {};
+  /**
+   * Initialize event listeners for console's path and page properties and observers
+   * router data change.
+   */
+  apiconsole.app.init = function() {
+    apiconsole.app.setInitialRouteData();
+    apiconsole.app.addParserListeners();
+    apiconsole.app.observeRouteEvents();
+    apiconsole.app.observeApiToggle();
+    apiconsole.app.loadDefault();
+  };
+
+  apiconsole.app.setInitialRouteData = function() {
+    // sets the initial path for routing from external source.
+    // The API console sets default path to `summary` after RAML change.
+    var location = document.querySelector('app-location');
+    var locationPath = location.path;
+    if (!locationPath) {
+      return;
+    }
+    var parsedPath = locationPath.replace(/\-/g, '.');
+    if (parsedPath[0] === '/') {
+      parsedPath = parsedPath.substr(1);
+    }
+    var _route = parsedPath.split('/');
+    var page = _route[0];
+    var path = _route[1];
+
+    apiconsole.app.__initialPage = page;
+    apiconsole.app.__initialPath = path;
+  };
+  /**
+   * Adds event listeres to elements that are related to RAML dataq parsing.
+   */
+  apiconsole.app.addParserListeners = function() {
+    document.querySelector('raml-js-parser')
+    .addEventListener('api-parse-ready', function(e) {
+      document.querySelector('raml-json-enhance')
+      .json = e.detail.json.specification;
+    });
+
+    document.querySelector('paper-menu.api-menu')
+    .addEventListener('selected-changed', function(e) {
+      var url = e.detail.value;
+      document.querySelector('raml-js-parser').loadApi(url);
+      document.getElementById('loadingApi').active = true;
+    });
+
+    window.addEventListener('raml-json-enhance-ready', function(e) {
+      var apiConsole = document.querySelector('api-console');
+      apiConsole.raml = e.detail.json;
+      document.getElementById('loadingApi').active = false;
+      if (apiconsole.app.__initialPage && apiconsole.app.__initialPage !== apiConsole.page) {
+        apiconsole.app.pageChanged(apiconsole.app.__initialPage);
+        apiconsole.app.__initialPage = undefined;
+      }
+      if (apiconsole.app.__initialPath && apiconsole.app.__initialPath !== apiConsole.path) {
+        apiconsole.app.pathChanged(apiconsole.app.__initialPath);
+        apiconsole.app.__initialPath = undefined;
+      }
+    });
+  };
+  /**
+   * Adds event listeres to elements that are related to the routing:
+   * app-location, app-route and api-console.
+   */
+  apiconsole.app.observeRouteEvents = function() {
+    var apiConsole = document.querySelector('api-console');
+    var location = document.querySelector('app-location');
+
+    apiConsole.addEventListener('path-changed', apiconsole.app._pathChanged);
+    apiConsole.addEventListener('page-changed', apiconsole.app._pageChanged);
+    location.addEventListener('route-changed', apiconsole.app._routeChanged);
+  };
+  // Event handler for the path change.
+  apiconsole.app._pathChanged = function(e) {
+    apiconsole.app.pathChanged(e.detail.value);
+  };
+  // Called when path changed from the api-console.
+  apiconsole.app.pathChanged = function(path) {
+    if (!path) {
+      return;
+    }
+    var location = document.querySelector('app-location');
+    var parsedPath = path.replace(/\./g, '-');
+    var newPath = '/docs/' + parsedPath;
+    if (newPath !== location.path) {
+      location.set('path', newPath);
+    }
+  };
+  // Event handler for the page change.
+  apiconsole.app._pageChanged = function(e) {
+    apiconsole.app.pageChanged(e.detail.value);
+  };
+  // Called when page change.
+  apiconsole.app.pageChanged = function(page) {
+    var apiConsole = document.querySelector('api-console');
+    if (apiConsole.page !== page) {
+      apiConsole.page = page;
+    }
+  };
+  // Event handler for the route change.
+  apiconsole.app._routeChanged = function(e) {
+    apiconsole.app.routeChanged(e.detail.value);
+  };
+  // Updates api console path if different than curent URL
+  apiconsole.app.routeChanged = function(route) {
+    var locationPath = route.path;
+    if (!locationPath || locationPath === '/') {
+      document.querySelector('app-location').set('path', '/docs');
+      return;
+    }
+    var parsedPath = locationPath.replace(/\-/g, '.');
+    if (parsedPath[0] === '/') {
+      parsedPath = parsedPath.substr(1);
+    }
+    var _route = parsedPath.split('/');
+    var page = _route[0];
+    var path = _route[1];
+    var apiConsole = document.querySelector('api-console');
+    if (apiConsole.page !== page) {
+      apiConsole.page = page;
+    }
+    if (apiConsole.path !== path) {
+      apiConsole.path = path;
+    }
+  };
+  /**
+   * Reads page name and the path from location path.
+   *
+   * @param {String} locationPath Current path read from path change event or read fomr the
+   * `app-location` element.
+   */
+  apiconsole.app._readPagePath = function(locationPath) {
+    var parsedPath = locationPath.replace(/\-/g, '.');
+    if (parsedPath[0] === '/') {
+      parsedPath = parsedPath.substr(1);
+    }
+    var _route = parsedPath.split('/');
+    var page = _route[0];
+    var path = _route[1];
+    return {
+      page: page,
+      path: path
+    };
+  };
+
+  apiconsole.app.observeApiToggle = function() {
+    document.getElementById('apiSelectorToggle')
+    .addEventListener('tap', function() {
+      document.querySelector('.api-console-content')
+      .classList.toggle('closed');
+    });
+  };
+
+  apiconsole.app.loadDefault = function() {
+    var url = document.querySelector('paper-menu.api-menu').selected;
+    document.querySelector('raml-js-parser').loadApi(url);
+    document.getElementById('loadingApi').active = true;
+  };
+
+  // Notifys user when something went wrong...
+  apiconsole.app.notifyInitError = function(message) {
+    window.alert('Cannot initialize API console. ' + message);
+  };
+  apiconsole.app.init();
+})();