Service params editing (#1253)

* Allow parameters to be supplied when creating a service instance and binding to an application * Bug fix * Address PR feedback * Fix for failing unit test * e2e test fix * Address PR feedback * Fix bug when re-editing a parameter
cloudfoundry · Sep 21, 2017 · 957e6bd · 957e6bd
1 parent 9d5683a
commit 957e6bd
Show file tree

Hide file tree

Showing 17 changed files with 360 additions and 58 deletions.
diff --git a/components/app-framework/src/filters/json.filter.js b/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;
+  }
+
+})();
diff --git a/components/app-framework/src/utils/auto-focus/focus-when.directive.js b/components/app-framework/src/utils/auto-focus/focus-when.directive.js
@@ -0,0 +1,28 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.framework.utils')
+    .directive('focusWhen', focusWhen);
+
+  /**
+   * A simple attribute directive to set focus on an element when a value is set
+   * @param {Object} $timeout - the Angular $timeout service
+   * @returns {Object} the focus-when directive
+   * */
+  function focusWhen($timeout) {
+    return {
+      restrict: 'A',
+      link: function (scope, element, attrs) {
+        scope.$watch(attrs.focusWhen, function (nv) {
+          if (nv) {
+            $timeout(function () {
+              element[0].focus();
+            }, 0);
+          }
+        });
+      }
+    };
+  }
+
+})();
diff --git a/components/app-framework/src/utils/focusable-input/focusable-input.directive.js b/components/app-framework/src/utils/focusable-input/focusable-input.directive.js
@@ -28,9 +28,11 @@
         element.find('input').on('focus', handleOnFocus);
         element.find('select-input').on('focus', handleOnFocus);
         element.find('tags-input').on('focus', handleOnFocus);
+        element.find('textarea').on('focus', handleOnFocus);
         element.find('input').on('blur', handleOnBlur);
         element.find('select-input').on('blur', handleOnBlur);
         element.find('tags-input').on('blur', handleOnBlur);
+        element.find('textarea').on('blur', handleOnBlur);
 
         function handleOnFocus() {
           element.addClass(focusedClass);

diff --git a/components/app-framework/src/widgets/async-task-dialog/async-task-dialog.html b/components/app-framework/src/widgets/async-task-dialog/async-task-dialog.html
@@ -23,24 +23,26 @@ <h4 translate translate-values="{{asyncTaskDialogCtrl.content.titleTranslateValu
     </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>
 
diff --git a/components/app-framework/src/widgets/json-text-input/json-text-input.directive.js b/components/app-framework/src/widgets/json-text-input/json-text-input.directive.js
@@ -0,0 +1,34 @@
+(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;
+          }
+        });
+        ngModelCtrl.$formatters.push(function (value) {
+          return angular.toJson(value, 2);
+        });
+      }
+    };
+  }
+})();
diff --git a/components/app-framework/src/widgets/json-text-input/json-text-input.scss b/components/app-framework/src/widgets/json-text-input/json-text-input.scss
@@ -0,0 +1,16 @@
+.json-input-field {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;  
+
+  &.form-group {
+    width: 100%;
+  }
+
+  textarea {
+    outline: 0;
+    border: 0;
+    font-family: monospace;
+    font-size: $font-size-monospace;
+  }
+}
diff --git a/components/app-framework/src/widgets/widgets.scss b/components/app-framework/src/widgets/widgets.scss
@@ -11,6 +11,7 @@
 @import "flyout/flyout";
 @import "gallery-card/gallery-card";
 @import "global-spinner/global-spinner";
+@import "json-text-input/json-text-input";
 @import "json-tree-view/json-tree-view";
 @import "log-viewer/logs-viewer";
 @import "paginator/paginator";

diff --git a/components/app-framework/src/widgets/wizard/wizard.html b/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>
diff --git a/components/app-framework/src/widgets/wizard/wizard.scss b/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
+      }
+    }
+  }
+}
diff --git a/components/app-theme/src/scss/style/components/_async_task_dialog.scss b/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
+        }
+      }
+    }
+  }
 }
diff --git a/components/cloud-foundry/frontend/i18n/en_US/app.json b/components/cloud-foundry/frontend/i18n/en_US/app.json
@@ -244,10 +244,19 @@
             "name-error-pattern": "Name contains invalid pattern",
             "plan-label": "Plan",
             "plan-placeholder": "Select a Plan",
+            "params-label": "Instance Parameters",
+            "binding-params-label": "Binding Parameters",
+            "service-params": "Service Instance Parameters",
+            "binding-params": "Service Binding Parameters",
+            "params-placeholder": "Enter Service Parameter JSON",
+            "tags-label": "Tags",
+            "edit-params": "Edit",
+            "done": "Done",
             "button": {
               "yes": "Create",
               "no": "@:buttons.cancel"
-            }
+            },
+            "json-error-invalid": "Must be valid JSON"
           },
           "view-envs": {
             "title": "{{instanceName}}: Variables"

diff --git a/...nd/src/view/applications/workflows/add-service-workflow/add-service-workflow.directive.js b/...nd/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 && 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)) {

diff --git a/...y/frontend/src/view/applications/workflows/add-service-workflow/add-service-workflow.scss b/...y/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;
       }
     }