Show fields for form body content

dist/scripts/api-console.js

@@ -1425,13 +1425,15 @@
           context = context || bodyContent.definitions[bodyContent.selected];
         }
 
-        Object.keys(context.plain).map(function (key) {
-          var definition = context.plain[key].definitions[0];
+        if (context.plain) {
+          Object.keys(context.plain).map(function (key) {
+            var definition = context.plain[key].definitions[0];
 
-          if ($scope.isEnum(definition)) {
-            context.values[definition.id][0] =  getParamType(definition)['enum'][0];
-          }
-        });
+            if ($scope.isEnum(definition)) {
+              context.values[definition.id][0] =  getParamType(definition)['enum'][0];
+            }
+          });
+        }
 
         $scope.isFile = function (param) {
           return param.type === 'file';
@@ -1595,6 +1597,7 @@
 
       /**
        * @param {Promise} promise
+       * @param {Object} options
        * @param {Boolean} options.isLoadingFromUrl
        */
       function loadFromPromise(promise, options) {
@@ -2591,7 +2594,7 @@
         };
 
         $scope.hasExampleValue = function (value) {
-          return typeof value !== 'undefined' ? true : false;
+          return typeof value !== 'undefined';
         };
 
         $scope.context.forceRequest = false;
@@ -2777,7 +2780,6 @@
               Object.keys(securitySchemes).map(function(key) {
                 if (securitySchemes[key].type === $scope.currentSchemeType) {
                   scheme = securitySchemes && securitySchemes[key];
-                  return;
                 }
               });
 
@@ -2954,6 +2956,19 @@
         $scope.uploadFile = function (event) {
           $scope.context.bodyContent.definitions[$scope.context.bodyContent.selected].value  = event.files[0];
         };
+
+        $scope.hasFormParameters = $scope.context.bodyContent && $scope.context.bodyContent.selected ? $scope.methodInfo.body[$scope.context.bodyContent.selected].hasOwnProperty('formParameters') : undefined;
+
+
+        $scope.getFormModel = function(param) {
+          var definitions = $scope.context.bodyContent.definitions[$scope.context.bodyContent.selected];
+          if ($scope.hasFormParameters) {
+            return definitions.values[param.definitions[0].id];
+          } else if (definitions.contentType && param.name) {
+            var example = definitions.contentType[param.name].example;
+            return example ? [example] : example;
+          }
+        };
       }]
     };
   };
@@ -5129,12 +5144,17 @@ RAML.Inspector = (function() {
       }
 
       switch (contentType) {
-      case FORM_URLENCODED:
-      case FORM_DATA:
-        definitions[contentType] = new RAML.Services.TryIt.NamedParameters(definition.formParameters);
-        break;
-      default:
-        definitions[contentType] = new RAML.Services.TryIt.BodyType(definition);
+        case FORM_URLENCODED:
+        case FORM_DATA:
+          //For RAML 0.8 formParameters should be defined, but for RAML 1.0 properties node
+          if (definition.formParameters) {
+            definitions[contentType] = new RAML.Services.TryIt.NamedParameters(definition.formParameters);
+          } else if (definition.properties) {
+            definitions[contentType] = new RAML.Services.TryIt.BodyType(definition.properties);
+          }
+          break;
+        default:
+          definitions[contentType] = new RAML.Services.TryIt.BodyType(definition);
       }
     });
   };
@@ -7430,7 +7450,7 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "    </section>\n" +
     "\n" +
     "\n" +
-    "    <section class=\"raml-console-resource-section\" ng-if=\"methodInfo.body\">\n" +
+    "    <section class=\"raml-console-resource-section raml-console-documentation-body\" ng-if=\"methodInfo.body\">\n" +
     "      <h3 class=\"raml-console-resource-heading-a\">\n" +
     "        Body\n" +
     "      </h3>\n" +
@@ -7444,12 +7464,7 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "          <section ng-if=\"value.formParameters\">\n" +
     "             <div class=\"raml-console-resource-param\" ng-repeat=\"formParam in value.formParameters\">\n" +
     "              <h4 class=\"raml-console-resource-param-heading\">{{formParam[0].displayName}}<span class=\"raml-console-resource-param-instructional\">{{parameterDocumentation(formParam[0])}}</span></h4>\n" +
-    "\n" +
     "              <p markdown=\"formParam[0].description\" class=\"raml-console-marked-content\"></p>\n" +
-    "\n" +
-    "              <p ng-if=\"formParam[0].example !== undefined\">\n" +
-    "                <span class=\"raml-console-resource-param-example\"><b>Example:</b> {{formParam[0].example}}</span>\n" +
-    "              </p>\n" +
     "            </div>\n" +
     "          </section>\n" +
     "\n" +
@@ -8247,7 +8262,7 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "              </select>\n" +
     "            </div>\n" +
     "\n" +
-    "            <div class=\"raml-console-sidebar-row\" ng-switch=\"context.bodyContent.isForm(context.bodyContent.selected)\">\n" +
+    "            <div class=\"raml-console-sidebar-row raml-console-body-data\" ng-switch=\"context.bodyContent.isForm(context.bodyContent.selected)\">\n" +
     "              <div ng-switch-when=\"false\">\n" +
     "\n" +
     "                <div ng-switch=\"isFileBody(context.bodyContent.definitions[context.bodyContent.selected])\">\n" +
@@ -8271,16 +8286,35 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "\n" +
     "\n" +
     "              <div ng-switch-when=\"true\">\n" +
-    "                <p class=\"raml-console-sidebar-input-container\" ng-repeat=\"param in context.bodyContent.definitions[context.bodyContent.selected].plain\">\n" +
-    "                  <span class=\"raml-console-sidebar-input-tooltip-container\" ng-if=\"param.definitions[0].description\">\n" +
-    "                    <button tabindex=\"-1\" class=\"raml-console-sidebar-input-tooltip\"><span class=\"raml-console-visuallyhidden\">Show documentation</span></button>\n" +
-    "                    <span class=\"raml-console-sidebar-tooltip-flyout\">\n" +
-    "                      <span markdown=\"param.definitions[0].description\" class=\"raml-console-marked-content\"></span>\n" +
-    "                    </span>\n" +
-    "                  </span>\n" +
-    "\n" +
-    "                  <raml-field context=\"context\" type=\"type\" types=\"types\" param=\"param.definitions[0]\" model=\"context.bodyContent.definitions[context.bodyContent.selected].values[param.definitions[0].id]\"></raml-field>\n" +
-    "                </p>\n" +
+    "\n" +
+    "                <div ng-switch=\"hasFormParameters\">\n" +
+    "                  <div ng-switch-when=\"true\">\n" +
+    "                    <p class=\"raml-console-sidebar-input-container\" ng-repeat=\"param in context.bodyContent.definitions[context.bodyContent.selected].plain\">\n" +
+    "                      <span class=\"raml-console-sidebar-input-tooltip-container\" ng-init=\"paramDescription = param.definitions[0].description\" ng-if=\"paramDescription\">\n" +
+    "                        <button tabindex=\"-1\" class=\"raml-console-sidebar-input-tooltip\"><span class=\"raml-console-visuallyhidden\">Show documentation</span></button>\n" +
+    "                        <span class=\"raml-console-sidebar-tooltip-flyout\">\n" +
+    "                          <span markdown=\"paramDescription\" class=\"raml-console-marked-content\"></span>\n" +
+    "                        </span>\n" +
+    "                      </span>\n" +
+    "\n" +
+    "                      <raml-field context=\"context\" type=\"type\" types=\"types\" param=\"param.definitions[0]\" model=\"context.bodyContent.definitions[context.bodyContent.selected].values[param.definitions[0].id]\"></raml-field>\n" +
+    "                    </p>\n" +
+    "                  </div>\n" +
+    "\n" +
+    "                  <div ng-switch-when=\"false\">\n" +
+    "                    <p class=\"raml-console-sidebar-input-container\" ng-repeat=\"(key, param) in context.bodyContent.definitions[context.bodyContent.selected].contentType\">\n" +
+    "                      <span class=\"raml-console-sidebar-input-tooltip-container\" ng-init=\"paramDescription = param.description\" ng-if=\"paramDescription\">\n" +
+    "                        <button tabindex=\"-1\" class=\"raml-console-sidebar-input-tooltip\"><span class=\"raml-console-visuallyhidden\">Show documentation</span></button>\n" +
+    "                        <span class=\"raml-console-sidebar-tooltip-flyout\">\n" +
+    "                          <span markdown=\"paramDescription\" class=\"raml-console-marked-content\"></span>\n" +
+    "                        </span>\n" +
+    "                      </span>\n" +
+    "\n" +
+    "                      <raml-field context=\"context\" type=\"type\" types=\"types\" param=\"param\" model=\"getFormModel(param)\"></raml-field>\n" +
+    "                    </p>\n" +
+    "                  </div>\n" +
+    "                </div>\n" +
+    "\n" +
     "              </div>\n" +
     "            </div>\n" +
     "          </section>\n" +

src/app/directives/documentation.tpl.html

@@ -91,7 +91,7 @@ <h4 class="raml-console-resource-param-heading">{{key}}</h4>
     </section>
 
 
-    <section class="raml-console-resource-section" ng-if="methodInfo.body">
+    <section class="raml-console-resource-section raml-console-documentation-body" ng-if="methodInfo.body">
       <h3 class="raml-console-resource-heading-a">
         Body
       </h3>
@@ -105,12 +105,7 @@ <h4 class="raml-console-request-body-heading">
           <section ng-if="value.formParameters">
              <div class="raml-console-resource-param" ng-repeat="formParam in value.formParameters">
               <h4 class="raml-console-resource-param-heading">{{formParam[0].displayName}}<span class="raml-console-resource-param-instructional">{{parameterDocumentation(formParam[0])}}</span></h4>
-
               <p markdown="formParam[0].description" class="raml-console-marked-content"></p>
-
-              <p ng-if="formParam[0].example !== undefined">
-                <span class="raml-console-resource-param-example"><b>Example:</b> {{formParam[0].example}}</span>
-              </p>
             </div>
           </section>
 

src/app/directives/raml-field.js

@@ -41,13 +41,15 @@
           context = context || bodyContent.definitions[bodyContent.selected];
         }
 
-        Object.keys(context.plain).map(function (key) {
-          var definition = context.plain[key].definitions[0];
+        if (context.plain) {
+          Object.keys(context.plain).map(function (key) {
+            var definition = context.plain[key].definitions[0];
 
-          if ($scope.isEnum(definition)) {
-            context.values[definition.id][0] =  getParamType(definition)['enum'][0];
-          }
-        });
+            if ($scope.isEnum(definition)) {
+              context.values[definition.id][0] =  getParamType(definition)['enum'][0];
+            }
+          });
+        }
 
         $scope.isFile = function (param) {
           return param.type === 'file';

src/app/directives/raml-initializer.js

@@ -64,6 +64,7 @@
 
       /**
        * @param {Promise} promise
+       * @param {Object} options
        * @param {Boolean} options.isLoadingFromUrl
        */
       function loadFromPromise(promise, options) {

src/app/directives/sidebar.js

@@ -325,7 +325,7 @@
         };
 
         $scope.hasExampleValue = function (value) {
-          return typeof value !== 'undefined' ? true : false;
+          return typeof value !== 'undefined';
         };
 
         $scope.context.forceRequest = false;
@@ -511,7 +511,6 @@
               Object.keys(securitySchemes).map(function(key) {
                 if (securitySchemes[key].type === $scope.currentSchemeType) {
                   scheme = securitySchemes && securitySchemes[key];
-                  return;
                 }
               });
 
@@ -688,6 +687,19 @@
         $scope.uploadFile = function (event) {
           $scope.context.bodyContent.definitions[$scope.context.bodyContent.selected].value  = event.files[0];
         };
+
+        $scope.hasFormParameters = $scope.context.bodyContent && $scope.context.bodyContent.selected ? $scope.methodInfo.body[$scope.context.bodyContent.selected].hasOwnProperty('formParameters') : undefined;
+
+
+        $scope.getFormModel = function(param) {
+          var definitions = $scope.context.bodyContent.definitions[$scope.context.bodyContent.selected];
+          if ($scope.hasFormParameters) {
+            return definitions.values[param.definitions[0].id];
+          } else if (definitions.contentType && param.name) {
+            var example = definitions.contentType[param.name].example;
+            return example ? [example] : example;
+          }
+        };
       }]
     };
   };

src/app/directives/sidebar.tpl.html

@@ -87,7 +87,7 @@ <h4 class="raml-console-sidebar-subhead">Body</h4>
               </select>
             </div>
 
-            <div class="raml-console-sidebar-row" ng-switch="context.bodyContent.isForm(context.bodyContent.selected)">
+            <div class="raml-console-sidebar-row raml-console-body-data" ng-switch="context.bodyContent.isForm(context.bodyContent.selected)">
               <div ng-switch-when="false">
 
                 <div ng-switch="isFileBody(context.bodyContent.definitions[context.bodyContent.selected])">
@@ -111,16 +111,35 @@ <h4 class="raml-console-sidebar-subhead">Body</h4>
 
 
               <div ng-switch-when="true">
-                <p class="raml-console-sidebar-input-container" ng-repeat="param in context.bodyContent.definitions[context.bodyContent.selected].plain">
-                  <span class="raml-console-sidebar-input-tooltip-container" ng-if="param.definitions[0].description">
-                    <button tabindex="-1" class="raml-console-sidebar-input-tooltip"><span class="raml-console-visuallyhidden">Show documentation</span></button>
-                    <span class="raml-console-sidebar-tooltip-flyout">
-                      <span markdown="param.definitions[0].description" class="raml-console-marked-content"></span>
-                    </span>
-                  </span>
-
-                  <raml-field context="context" type="type" types="types" param="param.definitions[0]" model="context.bodyContent.definitions[context.bodyContent.selected].values[param.definitions[0].id]"></raml-field>
-                </p>
+
+                <div ng-switch="hasFormParameters">
+                  <div ng-switch-when="true">
+                    <p class="raml-console-sidebar-input-container" ng-repeat="param in context.bodyContent.definitions[context.bodyContent.selected].plain">
+                      <span class="raml-console-sidebar-input-tooltip-container" ng-init="paramDescription = param.definitions[0].description" ng-if="paramDescription">
+                        <button tabindex="-1" class="raml-console-sidebar-input-tooltip"><span class="raml-console-visuallyhidden">Show documentation</span></button>
+                        <span class="raml-console-sidebar-tooltip-flyout">
+                          <span markdown="paramDescription" class="raml-console-marked-content"></span>
+                        </span>
+                      </span>
+
+                      <raml-field context="context" type="type" types="types" param="param.definitions[0]" model="context.bodyContent.definitions[context.bodyContent.selected].values[param.definitions[0].id]"></raml-field>
+                    </p>
+                  </div>
+
+                  <div ng-switch-when="false">
+                    <p class="raml-console-sidebar-input-container" ng-repeat="(key, param) in context.bodyContent.definitions[context.bodyContent.selected].contentType">
+                      <span class="raml-console-sidebar-input-tooltip-container" ng-init="paramDescription = param.description" ng-if="paramDescription">
+                        <button tabindex="-1" class="raml-console-sidebar-input-tooltip"><span class="raml-console-visuallyhidden">Show documentation</span></button>
+                        <span class="raml-console-sidebar-tooltip-flyout">
+                          <span markdown="paramDescription" class="raml-console-marked-content"></span>
+                        </span>
+                      </span>
+
+                      <raml-field context="context" type="type" types="types" param="param" model="getFormModel(param)"></raml-field>
+                    </p>
+                  </div>
+                </div>
+
               </div>
             </div>
           </section>

src/common/try_it/body_content.js

@@ -19,12 +19,17 @@
       }
 
       switch (contentType) {
-      case FORM_URLENCODED:
-      case FORM_DATA:
-        definitions[contentType] = new RAML.Services.TryIt.NamedParameters(definition.formParameters);
-        break;
-      default:
-        definitions[contentType] = new RAML.Services.TryIt.BodyType(definition);
+        case FORM_URLENCODED:
+        case FORM_DATA:
+          //For RAML 0.8 formParameters should be defined, but for RAML 1.0 properties node
+          if (definition.formParameters) {
+            definitions[contentType] = new RAML.Services.TryIt.NamedParameters(definition.formParameters);
+          } else if (definition.properties) {
+            definitions[contentType] = new RAML.Services.TryIt.BodyType(definition.properties);
+          }
+          break;
+        default:
+          definitions[contentType] = new RAML.Services.TryIt.BodyType(definition);
       }
     });
   };

test/regression/assertions/resource.js

@@ -170,6 +170,15 @@ function Resource (poName) {
     var panel = this.po.getResourcePanel(resource);
     expect(panel.isPresent()).toBe(isOpen);
   };
+
+  this.ifDisplayingProperties = function (resource, properties) {
+    var bodyProperties = this.po.getTryItBodyPanelParameters(resource);
+
+    properties.forEach(function (name, index) {
+      var property = bodyProperties.get(index);
+      expect(property.getText()).toContain(name);
+    });
+  };
 }
 
 module.exports = Resource;

test/regression/assets/directive-resource-bodies-08.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/resource-bodies-08.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>

test/regression/assets/directive-resource-bodies-10.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/resource-bodies-10.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>