Service params editing

components/app-framework/src/filters/json.filter.js

@@ -0,0 +1,32 @@
+(function () {
+  'use strict';
+
+  // The filters
+  angular.module('app.framework.filters')
+    .filter('jsonString', jsonStringFilter);
+
+  /**
+   * @namespace app.framework.filters.jsonStringFilter
+   * @memberof app.framework.filters
+   * @name jsonStringFilter
+   * @description An angular filter which will format the JSON object as a string OR show a supplied invalid message
+   * @param {object} $filter - Angular $filter service
+   * @returns {Function} The filter itself
+   */
+  function jsonStringFilter($filter) {
+    var jsonStringFilter = function (obj, invalidMsg) {
+
+      try {
+        return angular.toJson(obj);
+      } catch (e) {
+        return $filter('translate')(invalidMsg) || '';
+      }
+    };
+
+    // Ensure the filter is reapplied on change of language
+    jsonStringFilter.$stateful = true;
+
+    return jsonStringFilter;
+  }
+
+})();

components/app-framework/src/widgets/async-task-dialog/async-task-dialog.html

@@ -23,24 +23,26 @@ <h4 translate>{{asyncTaskDialogCtrl.content.title}}</h4>
     </div>
   </div>
   <div class="form-actions modal-footer" ng-class="{ 'disable-margin': asyncTaskDialogCtrl.disableMargin() } ">
-    <button ng-if="!asyncTaskDialogCtrl.context.noCancel"
-            translate
-            ng-disabled="asyncTaskDialogCtrl.disableButtons || asyncTaskDialogCtrl.showSpinner"
-            type="button" class="btn btn-default"
-            ng-click="$dismiss()">{{ asyncTaskDialogCtrl.context.buttonTitles.cancel }}
-    </button>
-    <button ng-if="!asyncTaskDialogCtrl.context.noSubmit"
-            class="btn"
-            translate
-            ng-class="{
-                        'btn-primary': !asyncTaskDialogCtrl.context.submitCommit(),
-                        'btn-commit': asyncTaskDialogCtrl.context.submitCommit()
-                      }"
-            ng-click="asyncTaskDialogCtrl.invokeAction()"
-            ng-disabled="asyncTaskDialogCtrl.disableSubmit()"
-            type="submit">
-      {{ asyncTaskDialogCtrl.context.buttonTitles.submit }}
-    </button>
+    <div class="async-footer-buttons" ng-class="{'async-footer-hidden' : asyncTaskDialogCtrl.hideFooter}">
+      <button ng-if="!asyncTaskDialogCtrl.context.noCancel"
+              translate
+              ng-disabled="asyncTaskDialogCtrl.disableButtons || asyncTaskDialogCtrl.showSpinner"
+              type="button" class="btn btn-default"
+              ng-click="$dismiss()">{{ asyncTaskDialogCtrl.context.buttonTitles.cancel }}
+      </button>
+      <button ng-if="!asyncTaskDialogCtrl.context.noSubmit"
+              class="btn"
+              translate
+              ng-class="{
+                          'btn-primary': !asyncTaskDialogCtrl.context.submitCommit(),
+                          'btn-commit': asyncTaskDialogCtrl.context.submitCommit()
+                        }"
+              ng-click="asyncTaskDialogCtrl.invokeAction()"
+              ng-disabled="asyncTaskDialogCtrl.disableSubmit()"
+              type="submit">
+        {{ asyncTaskDialogCtrl.context.buttonTitles.submit }}
+      </button>
+    </div>
   </div>
 </div>
 

components/app-framework/src/widgets/json-text-input/json-text-input.directive.js

@@ -0,0 +1,31 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.framework.widgets')
+    .directive('jsonTextInput', jsonTextInput);
+
+  /**
+   * @name jsonTextInput
+   * @description A directive that displays JSON.
+   * @returns {object} The directive definition object
+   */
+  function jsonTextInput() {
+    return {
+      restrict: 'A',
+      require: 'ngModel',
+      scope: {
+        ngModel: '='
+      },
+      link: function ($scope, elem, attr, ngModelCtrl) {
+        ngModelCtrl.$parsers.push(function (viewValue) {
+          try {
+            return angular.fromJson(viewValue);
+          } catch (e) {
+            return undefined;
+          }
+        });
+      }
+    };
+  }
+})();

components/app-framework/src/widgets/wizard/wizard.html

@@ -69,36 +69,37 @@ <h4 translate>{{ wizardCtrl.workflow.title }}</h4>
   </div>
 
   <div class="wizard-foot" ng-if="!wizardCtrl.workflow.hideFooter">
+    <div class="wizard-foot-buttons" ng-class="{'wizard-footer-hidden' : wizardCtrl.options.hideFooterButtons}">
+      <button type="button"
+              translate
+              class="btn btn-default cancel"
+              ng-click="wizardCtrl.cancel()"
+              ng-disabled="wizardCtrl.cancelBtnDisabled"
+              ng-if="wizardCtrl.allowCancel()">
+        {{ wizardCtrl.steps[wizardCtrl.currentIndex].cancelBtnText || wizardCtrl.btnText.cancel || 'buttons.cancel' }}
+      </button>
 
-    <button type="button"
-            translate
-            class="btn btn-default cancel"
-            ng-click="wizardCtrl.cancel()"
-            ng-disabled="wizardCtrl.cancelBtnDisabled"
-            ng-if="wizardCtrl.allowCancel()">
-      {{ wizardCtrl.steps[wizardCtrl.currentIndex].cancelBtnText || wizardCtrl.btnText.cancel || 'buttons.cancel' }}
-    </button>
-
-    <button type="button"
-      translate
-      class="btn btn-default back"
-      ng-click="wizardCtrl.back()"
-      ng-disabled="wizardCtrl.backBtnDisabled"
-      ng-if="wizardCtrl.workflow.allowBack()">
-      {{ wizardCtrl.steps[wizardCtrl.currentIndex].backBtnText || wizardCtrl.btnText.back || 'buttons.back' }}
-    </button>
+      <button type="button"
+        translate
+        class="btn btn-default back"
+        ng-click="wizardCtrl.back()"
+        ng-disabled="wizardCtrl.backBtnDisabled"
+        ng-if="wizardCtrl.workflow.allowBack()">
+        {{ wizardCtrl.steps[wizardCtrl.currentIndex].backBtnText || wizardCtrl.btnText.back || 'buttons.back' }}
+      </button>
 
-    <button type="button"
-      translate
-      class="btn next"
-      ng-class="{
-                  'btn-primary': !wizardCtrl.stepCommit,
-                  'btn-commit': wizardCtrl.stepCommit
-                }"
-      ng-click="wizardCtrl.next()"
-      ng-if="wizardCtrl.currentIndex !== -1 && !wizardCtrl.steps[wizardCtrl.currentIndex].hideNext"
-      ng-disabled="wizardCtrl.disableNext()">
-      {{ wizardCtrl.steps[wizardCtrl.currentIndex].nextBtnText || wizardCtrl.btnText.next || 'buttons.next' }}
-    </button>
+      <button type="button"
+        translate
+        class="btn next"
+        ng-class="{
+                    'btn-primary': !wizardCtrl.stepCommit,
+                    'btn-commit': wizardCtrl.stepCommit
+                  }"
+        ng-click="wizardCtrl.next()"
+        ng-if="wizardCtrl.currentIndex !== -1 && !wizardCtrl.steps[wizardCtrl.currentIndex].hideNext"
+        ng-disabled="wizardCtrl.disableNext()">
+        {{ wizardCtrl.steps[wizardCtrl.currentIndex].nextBtnText || wizardCtrl.btnText.next || 'buttons.next' }}
+      </button>
+    </div>
   </div>
 </div>

components/app-framework/src/widgets/wizard/wizard.scss

@@ -14,4 +14,26 @@
 
 .wizard-nav-step-number, .wizard-nav-step-number-complete, .wizard-nav-item-sep {
   display: none;
-}
+}
+
+
+.wizard-foot {
+  overflow: hidden;
+  .wizard-foot-buttons {
+
+    button {
+      transition: margin-left 0.5s, margin-right 0.5s;
+    }
+
+    &.wizard-footer-hidden {
+
+      button:first-child {
+        margin-left: -200px
+      }
+
+      button:last-child {
+        margin-right: -200px
+      }
+    }
+  }
+}

components/app-theme/src/scss/style/components/_async_task_dialog.scss

@@ -1,3 +1,6 @@
+$async-dialog-header-height: $console-unit-space * 3;
+$async-dialog-footer-height: $button-height + $console-unit-space * 2 + 1;
+
 .async-dialog {
   margin-right: $detail-view-margin;
   margin-left: $detail-view-margin;
@@ -20,10 +23,33 @@
   .modal-footer {
     margin-top: $console-unit-space * 2;
     padding-top: $console-unit-space;
+    height: $async-dialog-footer-height;
+    overflow: hidden;
+    flex: 0 0 $async-dialog-footer-height;
   }
 
   .disable-margin {
     margin-top: 0;
   }
 
+
+  .modal-footer {
+    .async-footer-buttons {
+
+      button {
+        transition: margin-left 0.5s, margin-right 0.5s;
+      }
+
+      &.async-footer-hidden {
+
+        button:first-child {
+          margin-left: -200px
+        }
+
+        button:last-child {
+          margin-right: -200px
+        }
+      }
+    }
+  }
 }

components/cloud-foundry/frontend/i18n/en_US/app.json

@@ -226,6 +226,12 @@
             "name-error-pattern": "Name contains invalid pattern",
             "plan-label": "Plan",
             "plan-placeholder": "Select a Plan",
+            "params-label": "Parameters",
+            "service-params": "Service Parameters",
+            "params-placeholder": "Enter Service Parameter JSON",
+            "tags-label": "Tags",
+            "edit-params": "Edit",
+            "done": "Done",
             "button": {
               "yes": "Create",
               "no": "@:buttons.cancel"

components/cloud-foundry/frontend/src/view/applications/workflows/add-service-workflow/add-service-workflow.directive.js

@@ -257,6 +257,10 @@
         app_guid: vm.data.app.summary.guid
       };
 
+      if (vm.options.userInput.params) {
+        bindingSpec.parameters = vm.options.userInput.params;
+      }
+
       return bindingModel.createServiceBinding(vm.data.cnsiGuid, bindingSpec)
         .then(function (newBinding) {
           if (angular.isDefined(newBinding.metadata)) {

components/cloud-foundry/frontend/src/view/applications/workflows/add-service-workflow/add-service-workflow.scss

@@ -36,7 +36,7 @@
 
   .select-instance-tabs {
 
-    min-height: 264px;
+    min-height: 300px;
 
     .nav.nav-tabs {
       .uib-tab > a {
@@ -62,7 +62,7 @@
     .no-bindable-instances > td {
       text-align: center;
       p {
-        margin: $console-unit-space / 2;
+        margin: $console-half-space;
       }
     }
 

components/cloud-foundry/frontend/src/view/applications/workflows/add-service-workflow/instance.html

@@ -53,6 +53,27 @@
           </button>
         </td>
       </table>
+
+      <div class="form-group form-json-editor-input"
+        ng-class="{'has-error': addInstanceForm.createNewForm.name.$invalid && addInstanceForm.createNewForm.name.$dirty}">
+        <label class="control-label" required translate>
+          app.app-info.app-tabs.services.create.params-label
+        </label>
+        <a href="#" class="input-box-edit" ng-click="wizardCtrl.options.editParams = true; wizardCtrl.options.hideFooterButtons = true" translate>app.app-info.app-tabs.services.create.edit-params</a>
+        <div class="json-edit-box">{{ wizardCtrl.options.userInput.params | jsonString }}</div>
+      </div>
+
     </form>
   </div>
 </div>
+
+<!-- Parameter editor -->
+<div class="async-dialog-param-editor" ng-class="{'param-editor-open' : wizardCtrl.options.editParams}">
+  <div class="param-editor-container">
+    <p translate>app.app-info.app-tabs.services.create.service-params</p>
+    <textarea placeholder="{{ 'app.app-info.app-tabs.services.create.params-placeholder' | translate}}" json-text-input ng-model="wizardCtrl.options.userInput.params"></textarea>
+    <div class="param-editor-buttons">
+      <a translate class="done-button btn btn-commit" ng-click="wizardCtrl.options.editParams = false; wizardCtrl.options.hideFooterButtons = false">app.app-info.app-tabs.services.create.done</a>
+    </div>
+  </div>
+</div>

components/cloud-foundry/frontend/src/view/applications/workflows/create-service-instance/create-service-instance.html

@@ -26,11 +26,30 @@
   </div>
 
   <div class="form-group tags-input-field" focusable-input>
-    <label class="control-label" translate>Service Instance Tags</label>
+    <label class="control-label" translate>app.app-info.app-tabs.services.create.tags-label</label>
     <tags-input
       min-length="1"
       ng-model="asyncTaskDialogCtrl.context.options.userInput.tags"
     ></tags-input>
   </div>
 
+  <div class="form-group form-json-editor-input"
+    ng-class="{'has-error': addInstanceForm.createNewForm.name.$invalid && addInstanceForm.createNewForm.name.$dirty}">
+    <label class="control-label" required translate>
+      app.app-info.app-tabs.services.create.params-label
+    </label>
+    <a href="#" class="input-box-edit" ng-click="asyncTaskDialogCtrl.editParams = true; asyncTaskDialogCtrl.hideFooter = true" translate>app.app-info.app-tabs.services.create.edit-params</a>
+    <div class="json-edit-box">{{ asyncTaskDialogCtrl.context.options.userInput.params | jsonString }}</div>
+  </div>
 </form>
+
+<!-- Parameter editor -->
+<div class="async-dialog-param-editor" ng-class="{'param-editor-open' : asyncTaskDialogCtrl.editParams}">
+  <div class="param-editor-container">
+    <p translate>app.app-info.app-tabs.services.create.service-params</p>
+    <textarea placeholder="{{ 'app.app-info.app-tabs.services.create.params-placeholder' | translate}}" json-text-input ng-model="asyncTaskDialogCtrl.context.options.userInput.params"></textarea>
+    <div class="param-editor-buttons">
+      <a translate class="done-button btn btn-commit" ng-click="asyncTaskDialogCtrl.editParams = false; asyncTaskDialogCtrl.hideFooter = false">app.app-info.app-tabs.services.create.done</a>
+    </div>
+  </div>
+</div>