Merge pull request #119 from jeff-phillips-18/bind

Address terminology inconsistencies in the binding step for ordering

dist/less/_bind-service.less

@@ -36,6 +36,10 @@
   margin-top: 30px;
 }
 
+.bind-service-selection {
+  margin-bottom: 5px;
+}
+
 .bind-status {
   display: flex;
   font-size: 16px;

dist/origin-web-common-ui.js

@@ -35,27 +35,32 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "  <form>\n" +
     "    <div class=\"form-group\">\n" +
     "      <label>\n" +
-    "        <h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>\n" +
+    "        <h3>Create a binding for application <strong>{{ctrl.applicationName}}</strong></h3>\n" +
     "      </label>\n" +
     "      <span class=\"help-block\">\n" +
-    "        Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.\n" +
+    "        Bindings create a secret containing the necessary information for an application to use a service.\n" +
     "      </span>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "\n" +
+    "  <label ng-if=\"!ctrl.allowNoBinding\">\n" +
+    "    Select a service:\n" +
+    "  </label>\n" +
     "  <form name=\"ctrl.formName\">\n" +
     "    <fieldset>\n" +
     "      <div class=\"radio\">\n" +
-    "        <label ng-if=\"ctrl.allowNoBinding\">\n" +
-    "          <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"null\">\n" +
-    "          Do not bind at this time.\n" +
-    "        </label>\n" +
-    "        <div ng-if=\"ctrl.allowNoBinding\" class=\"bind-description\">\n" +
+    "        <div ng-if=\"ctrl.allowNoBinding\" class=\"bind-service-selection\">\n" +
+    "          <label>\n" +
+    "            <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"null\">\n" +
+    "            Do not bind at this time.\n" +
+    "          </label>\n" +
+    "          <div class=\"bind-description\">\n" +
     "          <span class=\"help-block service-instance-name\">\n" +
-    "            You can create the binding later from your project.\n" +
+    "            Bindings can be created later from within a project.\n" +
     "          </span>\n" +
+    "          </div>\n" +
     "        </div>\n" +
-    "        <div ng-repeat=\"serviceInstance in ctrl.bindableServiceInstances\">\n" +
+    "        <div ng-repeat=\"serviceInstance in ctrl.bindableServiceInstances\" class=\"bind-service-selection\">\n" +
     "          <label>\n" +
     "            <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"serviceInstance\">\n" +
     "            {{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}\n" +
@@ -144,9 +149,9 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "  <form>\n" +
     "    <div class=\"form-group\">\n" +
     "        <label>\n" +
-    "          <h3>Bind <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong> to an existing application</strong></h3>\n" +
+    "          <h3>Create a binding for <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong></h3>\n" +
     "        </label>\n" +
-    "        <span class=\"help-block\">Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.</span>\n" +
+    "        <span class=\"help-block\">Bindings create a secret containing the necessary information for an application to use this service.</span>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "\n" +
@@ -155,7 +160,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "      <div class=\"radio\">\n" +
     "        <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"application\" ng-disabled=\"!ctrl.applications.length\">\n" +
-    "          Bind to an application\n" +
+    "          Create a secret and inject it into an application\n" +
     "        </label>\n" +
     "        <div class=\"application-select\">\n" +
     "          <ui-select ng-model=\"ctrl.appToBind\"\n" +
@@ -176,17 +181,17 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "        </div>\n" +
     "        <label class=\"bind-choice\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"secret-only\">\n" +
-    "          Create a secret in my project\n" +
+    "          Create a secret in <strong>{{ctrl.projectName}}</strong> to be used later\n" +
     "        </label>\n" +
     "        <div class=\"help-block bind-description\">\n" +
-    "          You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" +
+    "          Secrets can be referenced later from an application.\n" +
     "        </div>\n" +
     "        <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"none\">\n" +
     "          Do not bind at this time\n" +
     "        </label>\n" +
     "        <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" +
-    "          You can create the binding later from your project.\n" +
+    "          Bindings can be created later from within a project.\n" +
     "        </div>\n" +
     "      </div>\n" +
     "    </fieldset>\n" +
@@ -515,6 +520,7 @@ angular.module('openshiftCommonUI').component('bindServiceForm', {
     applications: '<',
     formName: '=',
     allowNoBinding: '<?',
+    projectName: '<',
     bindType: '=', // One of: 'none', 'application', 'secret-only'
     appToBind: '=' // only applicable to 'application' bindType
   },

dist/origin-web-common.css

@@ -45,6 +45,9 @@
   margin-bottom: 20px;
   margin-top: 30px;
 }
+.bind-service-selection {
+  margin-bottom: 5px;
+}
 .bind-status {
   display: flex;
   font-size: 16px;

dist/origin-web-common.js

@@ -206,27 +206,32 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "  <form>\n" +
     "    <div class=\"form-group\">\n" +
     "      <label>\n" +
-    "        <h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>\n" +
+    "        <h3>Create a binding for application <strong>{{ctrl.applicationName}}</strong></h3>\n" +
     "      </label>\n" +
     "      <span class=\"help-block\">\n" +
-    "        Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.\n" +
+    "        Bindings create a secret containing the necessary information for an application to use a service.\n" +
     "      </span>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "\n" +
+    "  <label ng-if=\"!ctrl.allowNoBinding\">\n" +
+    "    Select a service:\n" +
+    "  </label>\n" +
     "  <form name=\"ctrl.formName\">\n" +
     "    <fieldset>\n" +
     "      <div class=\"radio\">\n" +
-    "        <label ng-if=\"ctrl.allowNoBinding\">\n" +
-    "          <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"null\">\n" +
-    "          Do not bind at this time.\n" +
-    "        </label>\n" +
-    "        <div ng-if=\"ctrl.allowNoBinding\" class=\"bind-description\">\n" +
+    "        <div ng-if=\"ctrl.allowNoBinding\" class=\"bind-service-selection\">\n" +
+    "          <label>\n" +
+    "            <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"null\">\n" +
+    "            Do not bind at this time.\n" +
+    "          </label>\n" +
+    "          <div class=\"bind-description\">\n" +
     "          <span class=\"help-block service-instance-name\">\n" +
-    "            You can create the binding later from your project.\n" +
+    "            Bindings can be created later from within a project.\n" +
     "          </span>\n" +
+    "          </div>\n" +
     "        </div>\n" +
-    "        <div ng-repeat=\"serviceInstance in ctrl.bindableServiceInstances\">\n" +
+    "        <div ng-repeat=\"serviceInstance in ctrl.bindableServiceInstances\" class=\"bind-service-selection\">\n" +
     "          <label>\n" +
     "            <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"serviceInstance\">\n" +
     "            {{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}\n" +
@@ -315,9 +320,9 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "  <form>\n" +
     "    <div class=\"form-group\">\n" +
     "        <label>\n" +
-    "          <h3>Bind <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong> to an existing application</strong></h3>\n" +
+    "          <h3>Create a binding for <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong></h3>\n" +
     "        </label>\n" +
-    "        <span class=\"help-block\">Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.</span>\n" +
+    "        <span class=\"help-block\">Bindings create a secret containing the necessary information for an application to use this service.</span>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "\n" +
@@ -326,7 +331,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "      <div class=\"radio\">\n" +
     "        <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"application\" ng-disabled=\"!ctrl.applications.length\">\n" +
-    "          Bind to an application\n" +
+    "          Create a secret and inject it into an application\n" +
     "        </label>\n" +
     "        <div class=\"application-select\">\n" +
     "          <ui-select ng-model=\"ctrl.appToBind\"\n" +
@@ -347,17 +352,17 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "        </div>\n" +
     "        <label class=\"bind-choice\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"secret-only\">\n" +
-    "          Create a secret in my project\n" +
+    "          Create a secret in <strong>{{ctrl.projectName}}</strong> to be used later\n" +
     "        </label>\n" +
     "        <div class=\"help-block bind-description\">\n" +
-    "          You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" +
+    "          Secrets can be referenced later from an application.\n" +
     "        </div>\n" +
     "        <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"none\">\n" +
     "          Do not bind at this time\n" +
     "        </label>\n" +
     "        <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" +
-    "          You can create the binding later from your project.\n" +
+    "          Bindings can be created later from within a project.\n" +
     "        </div>\n" +
     "      </div>\n" +
     "    </fieldset>\n" +
@@ -686,6 +691,7 @@ angular.module('openshiftCommonUI').component('bindServiceForm', {
     applications: '<',
     formName: '=',
     allowNoBinding: '<?',
+    projectName: '<',
     bindType: '=', // One of: 'none', 'application', 'secret-only'
     appToBind: '=' // only applicable to 'application' bindType
   },

dist/scripts/templates.js

@@ -6,27 +6,32 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
     "  <form>\n" +
     "    <div class=\"form-group\">\n" +
     "      <label>\n" +
-    "        <h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>\n" +
+    "        <h3>Create a binding for application <strong>{{ctrl.applicationName}}</strong></h3>\n" +
     "      </label>\n" +
     "      <span class=\"help-block\">\n" +
-    "        Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.\n" +
+    "        Bindings create a secret containing the necessary information for an application to use a service.\n" +
     "      </span>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "\n" +
+    "  <label ng-if=\"!ctrl.allowNoBinding\">\n" +
+    "    Select a service:\n" +
+    "  </label>\n" +
     "  <form name=\"ctrl.formName\">\n" +
     "    <fieldset>\n" +
     "      <div class=\"radio\">\n" +
-    "        <label ng-if=\"ctrl.allowNoBinding\">\n" +
-    "          <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"null\">\n" +
-    "          Do not bind at this time.\n" +
-    "        </label>\n" +
-    "        <div ng-if=\"ctrl.allowNoBinding\" class=\"bind-description\">\n" +
+    "        <div ng-if=\"ctrl.allowNoBinding\" class=\"bind-service-selection\">\n" +
+    "          <label>\n" +
+    "            <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"null\">\n" +
+    "            Do not bind at this time.\n" +
+    "          </label>\n" +
+    "          <div class=\"bind-description\">\n" +
     "          <span class=\"help-block service-instance-name\">\n" +
-    "            You can create the binding later from your project.\n" +
+    "            Bindings can be created later from within a project.\n" +
     "          </span>\n" +
+    "          </div>\n" +
     "        </div>\n" +
-    "        <div ng-repeat=\"serviceInstance in ctrl.bindableServiceInstances\">\n" +
+    "        <div ng-repeat=\"serviceInstance in ctrl.bindableServiceInstances\" class=\"bind-service-selection\">\n" +
     "          <label>\n" +
     "            <input type=\"radio\" ng-model=\"ctrl.serviceToBind\" ng-value=\"serviceInstance\">\n" +
     "            {{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}\n" +
@@ -115,9 +120,9 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
     "  <form>\n" +
     "    <div class=\"form-group\">\n" +
     "        <label>\n" +
-    "          <h3>Bind <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong> to an existing application</strong></h3>\n" +
+    "          <h3>Create a binding for <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong></h3>\n" +
     "        </label>\n" +
-    "        <span class=\"help-block\">Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.</span>\n" +
+    "        <span class=\"help-block\">Bindings create a secret containing the necessary information for an application to use this service.</span>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "\n" +
@@ -126,7 +131,7 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
     "      <div class=\"radio\">\n" +
     "        <label class=\"bind-choice\" ng-disabled=\"!ctrl.applications.length\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"application\" ng-disabled=\"!ctrl.applications.length\">\n" +
-    "          Bind to an application\n" +
+    "          Create a secret and inject it into an application\n" +
     "        </label>\n" +
     "        <div class=\"application-select\">\n" +
     "          <ui-select ng-model=\"ctrl.appToBind\"\n" +
@@ -147,17 +152,17 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
     "        </div>\n" +
     "        <label class=\"bind-choice\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"secret-only\">\n" +
-    "          Create a secret in my project\n" +
+    "          Create a secret in <strong>{{ctrl.projectName}}</strong> to be used later\n" +
     "        </label>\n" +
     "        <div class=\"help-block bind-description\">\n" +
-    "          You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.\n" +
+    "          Secrets can be referenced later from an application.\n" +
     "        </div>\n" +
     "        <label ng-if=\"ctrl.allowNoBinding\" class=\"bind-choice\">\n" +
     "          <input type=\"radio\" ng-model=\"ctrl.bindType\" value=\"none\">\n" +
     "          Do not bind at this time\n" +
     "        </label>\n" +
     "        <div ng-if=\"ctrl.allowNoBinding\" class=\"help-block bind-description\">\n" +
-    "          You can create the binding later from your project.\n" +
+    "          Bindings can be created later from within a project.\n" +
     "        </div>\n" +
     "      </div>\n" +
     "    </fieldset>\n" +

src/components/binding/bindApplicationForm.html

@@ -2,27 +2,32 @@
   <form>
     <div class="form-group">
       <label>
-        <h3>Bind a service to <strong>{{ctrl.applicationName}}</strong></h3>
+        <h3>Create a binding for application <strong>{{ctrl.applicationName}}</strong></h3>
       </label>
       <span class="help-block">
-        Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.
+        Bindings create a secret containing the necessary information for an application to use a service.
       </span>
     </div>
   </form>
 
+  <label ng-if="!ctrl.allowNoBinding">
+    Select a service:
+  </label>
   <form name="ctrl.formName">
     <fieldset>
       <div class="radio">
-        <label ng-if="ctrl.allowNoBinding">
-          <input type="radio" ng-model="ctrl.serviceToBind" ng-value="null">
-          Do not bind at this time.
-        </label>
-        <div ng-if="ctrl.allowNoBinding" class="bind-description">
+        <div ng-if="ctrl.allowNoBinding" class="bind-service-selection">
+          <label>
+            <input type="radio" ng-model="ctrl.serviceToBind" ng-value="null">
+            Do not bind at this time.
+          </label>
+          <div class="bind-description">
           <span class="help-block service-instance-name">
-            You can create the binding later from your project.
+            Bindings can be created later from within a project.
           </span>
+          </div>
         </div>
-        <div ng-repeat="serviceInstance in ctrl.bindableServiceInstances">
+        <div ng-repeat="serviceInstance in ctrl.bindableServiceInstances" class="bind-service-selection">
           <label>
             <input type="radio" ng-model="ctrl.serviceToBind" ng-value="serviceInstance">
             {{ctrl.serviceClasses[serviceInstance.spec.serviceClassName].osbMetadata.displayName || serviceInstance.spec.serviceClassName}}

src/components/binding/bindServiceForm.html

@@ -2,9 +2,9 @@
   <form>
     <div class="form-group">
         <label>
-          <h3>Bind <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong> to an existing application</strong></h3>
+          <h3>Create a binding for <strong>{{ctrl.serviceClass.osbMetadata.displayName || ctrl.serviceClassName}}</strong></h3>
         </label>
-        <span class="help-block">Binding to a provisioned service will create a secret containing the information necessary for your application to use the service.</span>
+        <span class="help-block">Bindings create a secret containing the necessary information for an application to use this service.</span>
     </div>
   </form>
 
@@ -13,7 +13,7 @@
       <div class="radio">
         <label class="bind-choice" ng-disabled="!ctrl.applications.length">
           <input type="radio" ng-model="ctrl.bindType" value="application" ng-disabled="!ctrl.applications.length">
-          Bind to an application
+          Create a secret and inject it into an application
         </label>
         <div class="application-select">
           <ui-select ng-model="ctrl.appToBind"
@@ -34,17 +34,17 @@
         </div>
         <label class="bind-choice">
           <input type="radio" ng-model="ctrl.bindType" value="secret-only">
-          Create a secret in my project
+          Create a secret in <strong>{{ctrl.projectName}}</strong> to be used later
         </label>
         <div class="help-block bind-description">
-          You can reference this secret later from any application either as environment variables or configuration files mounted as volumes.
+          Secrets can be referenced later from an application.
         </div>
         <label ng-if="ctrl.allowNoBinding" class="bind-choice">
           <input type="radio" ng-model="ctrl.bindType" value="none">
           Do not bind at this time
         </label>
         <div ng-if="ctrl.allowNoBinding" class="help-block bind-description">
-          You can create the binding later from your project.
+          Bindings can be created later from within a project.
         </div>
       </div>
     </fieldset>

src/components/binding/bindServiceForm.js

@@ -8,6 +8,7 @@ angular.module('openshiftCommonUI').component('bindServiceForm', {
     applications: '<',
     formName: '=',
     allowNoBinding: '<?',
+    projectName: '<',
     bindType: '=', // One of: 'none', 'application', 'secret-only'
     appToBind: '=' // only applicable to 'application' bindType
   },

src/styles/_bind-service.less

@@ -36,6 +36,10 @@
   margin-top: 30px;
 }
 
+.bind-service-selection {
+  margin-bottom: 5px;
+}
+
 .bind-status {
   display: flex;
   font-size: 16px;