Merge pull request #350 from mulesoft/bugs/custom-security-schema-headers

jisoldi · web-flow · commit b7dce72fe1c7 · 2016-10-25T17:56:29.000-03:00
Bugs/custom security schema headers
diff --git a/dist/scripts/api-console.js b/dist/scripts/api-console.js
@@ -743,15 +743,16 @@
         isNestedProperty: '=',
         hideTypeLinks: '=',
         hidePropertyDetails: '=',
-        showExamples: '='
+        showExamples: '=',
+        showSecuritySchemaProperties: '='
       },
       controller: ['$scope', '$rootScope', function ($scope, $rootScope) {
         if (!Array.isArray($scope.list)) {
           $scope.listArray = Object.keys($scope.list).map(function (key) {
             return $scope.list[key];
           });
 
-          $scope.listArray = RAML.Inspector.Properties.normalizeNamedParameters($scope.list);
+          $scope.listArray = RAML.Inspector.Properties.normalizeNamedParameters($scope.listArray);
         } else {
           $scope.listArray = $scope.list;
         }
@@ -778,6 +779,15 @@
           return newType;
         };
 
+        var isPattern = function (propertyName) {
+          return propertyName.match(PATTERN_PATTERN);
+        };
+
+        $scope.isPropertyVisible = function(property) {
+          return ($scope.showSecuritySchemaProperties || !property[0].isFromSecurityScheme)
+            && !isPattern(property[0].displayName);
+        };
+
         $scope.mergeType = function (type) {
           var newType = angular.copy(type);
 
@@ -789,10 +799,6 @@
 
         $scope.isNativeType = RAML.Inspector.Types.isNativeType;
 
-        $scope.isPattern = function (propertyName) {
-          return propertyName.match(PATTERN_PATTERN);
-        };
-
         $scope.isSchema = RAML.Inspector.Types.isSchema;
 
         $scope.isCollapsible = function isCollapsible(property) {
@@ -6516,16 +6522,16 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "        <li class=\"raml-console-documentation-scheme\" ng-class=\"{'raml-console-is-active':isSchemeSelected(value)}\" ng-click=\"selectDocumentationScheme(value)\" ng-repeat=\"(key, value) in securitySchemes\">{{value.name}}</li>\n" +
     "      </ol>\n" +
     "\n" +
-    "      <p ng-if\"documentationSchemeSelected.description\" markdown=\"documentationSchemeSelected.description\" class=\"raml-console-marked-content\"></p>\n" +
+    "      <p ng-if=\"documentationSchemeSelected.description\" markdown=\"documentationSchemeSelected.description\" class=\"raml-console-marked-content\"></p>\n" +
     "\n" +
     "      <section class=\"raml-console-resource-section raml-console-scheme-headers\" ng-if=\"documentationSchemeSelected.describedBy.headers\">\n" +
     "        <h4 class=\"raml-console-resource-heading-a\">Headers</h4>\n" +
-    "        <properties list=\"documentationSchemeSelected.describedBy.headers\" show-examples=\"true\"></properties>\n" +
+    "        <properties list=\"documentationSchemeSelected.describedBy.headers\" show-security-schema-properties=\"true\" show-examples=\"true\"></properties>\n" +
     "      </section>\n" +
     "\n" +
     "      <section class=\"raml-console-resource-section raml-console-scheme-query-parameters\" ng-if=\"documentationSchemeSelected.describedBy.queryParameters\">\n" +
     "        <h4 class=\"raml-console-resource-heading-a\">Query Parameters</h4>\n" +
-    "        <properties list=\"documentationSchemeSelected.describedBy.queryParameters\" show-examples=\"true\"></properties>\n" +
+    "        <properties list=\"documentationSchemeSelected.describedBy.queryParameters\" show-security-schema-properties=\"true\" show-examples=\"true\"></properties>\n" +
     "      </section>\n" +
     "\n" +
     "      <section class=\"raml-console-resource-section raml-console-scheme-responses\" ng-if=\"documentationSchemeSelected.describedBy.responses\">\n" +
@@ -6725,7 +6731,9 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
 
   $templateCache.put('directives/properties.tpl.html',
     "<div>\n" +
-    "  <div class=\"raml-console-resource-param\" ng-repeat=\"property in listArray\" ng-if=\"!property[0].isFromSecurityScheme && !isPattern(property[0].displayName)\" ng-init=\"vm.isCollapsed = !!collapsible\">\n" +
+    "  <div class=\"raml-console-resource-param\" ng-repeat=\"property in listArray\"\n" +
+    "       ng-if=\"isPropertyVisible(property)\"\n" +
+    "       ng-init=\"vm.isCollapsed = !!collapsible\">\n" +
     "    <div ng-init=\"type = getType(property[0])\">\n" +
     "      <h4 class=\"raml-console-resource-param-heading\" style=\"position: relative\">\n" +
     "        <span ng-if=\"isCollapsible(type)\" ng-click=\"vm.isCollapsed = !vm.isCollapsed\" style=\"cursor: pointer\">{{ vm.isCollapsed ? '▶' : '▼' }}</span>&nbsp;{{type.displayName}}\n" +
diff --git a/src/app/directives/documentation.tpl.html b/src/app/directives/documentation.tpl.html
@@ -36,16 +36,16 @@ <h3 class="raml-console-resource-heading-a">Security Schemes</h3>
         <li class="raml-console-documentation-scheme" ng-class="{'raml-console-is-active':isSchemeSelected(value)}" ng-click="selectDocumentationScheme(value)" ng-repeat="(key, value) in securitySchemes">{{value.name}}</li>
       </ol>
 
-      <p ng-if"documentationSchemeSelected.description" markdown="documentationSchemeSelected.description" class="raml-console-marked-content"></p>
+      <p ng-if="documentationSchemeSelected.description" markdown="documentationSchemeSelected.description" class="raml-console-marked-content"></p>
 
       <section class="raml-console-resource-section raml-console-scheme-headers" ng-if="documentationSchemeSelected.describedBy.headers">
         <h4 class="raml-console-resource-heading-a">Headers</h4>
-        <properties list="documentationSchemeSelected.describedBy.headers" show-examples="true"></properties>
+        <properties list="documentationSchemeSelected.describedBy.headers" show-security-schema-properties="true" show-examples="true"></properties>
       </section>
 
       <section class="raml-console-resource-section raml-console-scheme-query-parameters" ng-if="documentationSchemeSelected.describedBy.queryParameters">
         <h4 class="raml-console-resource-heading-a">Query Parameters</h4>
-        <properties list="documentationSchemeSelected.describedBy.queryParameters" show-examples="true"></properties>
+        <properties list="documentationSchemeSelected.describedBy.queryParameters" show-security-schema-properties="true" show-examples="true"></properties>
       </section>
 
       <section class="raml-console-resource-section raml-console-scheme-responses" ng-if="documentationSchemeSelected.describedBy.responses">
diff --git a/src/app/directives/properties.js b/src/app/directives/properties.js
@@ -14,15 +14,16 @@
         isNestedProperty: '=',
         hideTypeLinks: '=',
         hidePropertyDetails: '=',
-        showExamples: '='
+        showExamples: '=',
+        showSecuritySchemaProperties: '='
       },
       controller: ['$scope', '$rootScope', function ($scope, $rootScope) {
         if (!Array.isArray($scope.list)) {
           $scope.listArray = Object.keys($scope.list).map(function (key) {
             return $scope.list[key];
           });
 
-          $scope.listArray = RAML.Inspector.Properties.normalizeNamedParameters($scope.list);
+          $scope.listArray = RAML.Inspector.Properties.normalizeNamedParameters($scope.listArray);
         } else {
           $scope.listArray = $scope.list;
         }
@@ -49,6 +50,15 @@
           return newType;
         };
 
+        var isPattern = function (propertyName) {
+          return propertyName.match(PATTERN_PATTERN);
+        };
+
+        $scope.isPropertyVisible = function(property) {
+          return ($scope.showSecuritySchemaProperties || !property[0].isFromSecurityScheme)
+            && !isPattern(property[0].displayName);
+        };
+
         $scope.mergeType = function (type) {
           var newType = angular.copy(type);
 
@@ -60,10 +70,6 @@
 
         $scope.isNativeType = RAML.Inspector.Types.isNativeType;
 
-        $scope.isPattern = function (propertyName) {
-          return propertyName.match(PATTERN_PATTERN);
-        };
-
         $scope.isSchema = RAML.Inspector.Types.isSchema;
 
         $scope.isCollapsible = function isCollapsible(property) {
diff --git a/src/app/directives/properties.tpl.html b/src/app/directives/properties.tpl.html
@@ -1,5 +1,7 @@
 <div>
-  <div class="raml-console-resource-param" ng-repeat="property in listArray" ng-if="!property[0].isFromSecurityScheme && !isPattern(property[0].displayName)" ng-init="vm.isCollapsed = !!collapsible">
+  <div class="raml-console-resource-param" ng-repeat="property in listArray"
+       ng-if="isPropertyVisible(property)"
+       ng-init="vm.isCollapsed = !!collapsible">
     <div ng-init="type = getType(property[0])">
       <h4 class="raml-console-resource-param-heading" style="position: relative">
         <span ng-if="isCollapsible(type)" ng-click="vm.isCollapsed = !vm.isCollapsed" style="cursor: pointer">{{ vm.isCollapsed ? '▶' : '▼' }}</span>&nbsp;{{type.displayName}}
diff --git a/test/regression/assertions/resource.js b/test/regression/assertions/resource.js
@@ -51,6 +51,19 @@ function Resource (poName) {
     });
   };
 
+  this.ifShowingSecuritySchemaHeaders = function (resource, method, expectedNOfHeaders, expectedHeaders) {
+    var button = this.po.getMethodBtn(resource, method);
+    button.click();
+
+    var headers = this.po.getSecuritySchemeHeaderTitles(resource);
+    var numberOfHeaders = headers.count();
+
+    expect(numberOfHeaders).toBe(expectedNOfHeaders);
+    for(var i = 0; i < expectedHeaders.length; i++) {
+      expect(headers.get(i).getInnerHtml()).toContain(expectedHeaders[i]);
+    }
+  };
+
   this.ifCredentialsUpdateBetweenResources = function () {
     var resourcesGetButton= this.po.getMethodBtn(0, 0);
     var pageObject = this.po;
diff --git a/test/regression/assets/directive-security-schema-resource.html b/test/regression/assets/directive-security-schema-resource.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>API Console</title>
+  <link href="styles/api-console-light-theme.css" rel="stylesheet" class="theme">
+</head>
+<body ng-app="ramlConsoleApp" ng-cloak class="raml-console-body">
+  <raml-console-loader src="raml/security-schema-resource.raml"></raml-console-loader>
+  <script src="scripts/api-console-vendor.js"></script>
+  <script src="scripts/api-console.js"></script>
+  <script type="text/javascript">
+    $.noConflict();
+  </script>
+</body>
+</html>
diff --git a/test/regression/assets/raml/security-schema-resource.raml b/test/regression/assets/raml/security-schema-resource.raml
@@ -0,0 +1,24 @@
+#%RAML 0.8
+title: My REST API
+version: v1
+
+securitySchemes:
+  - Custom:
+      type: x-custom
+      describedBy:
+        headers:
+          Authorization:
+            description: This header MUST be included in all requests that require authentication/authorization. The auth scheme is using a JSON Web Token Bearer Token as the header value. See [JWT](http://jwt.io/introduction/) for an introduction to JWT. (Though you don't really need to know anything about it)
+            type: string
+            required: true
+        responses:
+          400:
+            description: Bad request
+          401:
+            description: Unauthorized
+          403:
+            description: Forbidden. You are not authorized to access this resource
+
+/endpoint:
+  get:
+    securedBy: [ Custom ]
diff --git a/test/regression/page_objects/resourcePO.js b/test/regression/page_objects/resourcePO.js
@@ -41,12 +41,19 @@ function ResourcesPO () {
   this.getSecuritySchemes = function (index) {
     return this.resources.get(index+1).all(by.tagName('option'));
   };
+
+  this.getSecuritySchemeHeaderTitles = function (index) {
+    return this.resources.get(index+1).all(by.css('.raml-console-resource-param-heading'));
+  };
+
   this.getUsernameField = function () {
     return element(by.name('username'));
   };
+
   this.getPasswordField = function () {
     return element(by.name('password'));
   };
+
   this.getCloseBtn = function (index) {
     return this.resources.get(index+1).all(by.css('.raml-console-resource-close-btn'));
   };
diff --git a/test/regression/standalone/directiveSpec.js b/test/regression/standalone/directiveSpec.js
@@ -40,6 +40,17 @@ module.exports = function() {
     assert.ifShowingSecuritySchemes(0, 0, ['Anonymous', 'OAuth 2.0']);
   });
 
+  it('should be able to display security schemagit status headers', function () {
+    // Arrange
+    var assert = assertions.create('resource');
+
+    // Act
+    browser.get('http://localhost:9000/directive-security-schema-resource.html');
+
+    // Assert
+    assert.ifShowingSecuritySchemaHeaders(0, 0, 4, ['Authorization', '400', '401', '403']);
+  });
+
   it('should be able to cache credentials between resources', function () {
     // Arrange
     var assert = assertions.create('resource');
