Improve placeholder and description for build hook commands

Author: spadgett

app/scripts/controllers/edit/buildConfig.js

@@ -139,6 +139,20 @@ angular.module('openshiftConsole')
       type: {}
     };
 
+    $scope.getArgumentsDescription = function() {
+      var commandType = _.get($scope, 'buildHookSelection.type.id', '');
+      switch (commandType) {
+      case 'args':
+        return 'Enter the arguments that will be appended to the default image entry point.';
+      case 'commandArgs':
+        return 'Enter the arguments that will be appended to the command.';
+      case 'scriptArgs':
+        return 'Enter the arguments that will be appended to the script.';
+      }
+
+      return undefined;
+    };
+
     var getInitialBuildHookSelection = function() {
       var hasArgs = !_.isEmpty(_.get($scope, 'buildConfig.spec.postCommit.args'));
       var hasCommand = !_.isEmpty(_.get($scope, 'buildConfig.spec.postCommit.command'));

app/scripts/directives/editCommand.js

@@ -7,6 +7,8 @@ angular.module('openshiftConsole')
       scope: {
         args: '=',
         type: '@',
+        placeholder: '@',
+        description: '=',
         isRequired: '='
       },
       templateUrl: 'views/directives/_edit-command.html',

app/views/directives/_edit-command.html

@@ -33,15 +33,18 @@
     </span>
   </p>
   <div class="form-group">
-    <label class="sr-only" ng-attr-for="{{id}}-add-arg">Add {{type || 'Command'}}</label>
+    <label class="sr-only" ng-attr-for="{{id}}-add-arg">
+      <span ng-if="placeholder">{{placeholder}}</span>
+      <span ng-if="!placeholder">Add argument</span>
+    </label>
     <!-- Single-line entry -->
     <span ng-show="!multiline" class="input-group">
       <input type="text"
              ng-model="nextArg"
              name="nextArg"
              ng-attr-id="{{id}}-add-arg"
              on-enter="addArg()"
-             placeholder="Add {{type || 'command'}}"
+             ng-attr-placeholder="{{placeholder || 'Add argument'}}"
              class="form-control"
              autocorrect="off"
              autocapitalize="off"
@@ -64,7 +67,7 @@
                 name="nextArg"
                 rows="10"
                 ng-attr-id="{{id}}-add-arg"
-                placeholder="Add {{type || 'command'}}"
+                ng-attr-placeholder="{{placeholder || 'Add argument'}}"
                 class="form-control"
                 autocorrect="off"
                 autocapitalize="off"
@@ -77,23 +80,21 @@
            ng-disabled="!nextArg"
            ng-attr-aria-disabled="!nextArg"
            role="button">Add</a>
-     </div>
+      </div>
     </span>
-  </div>
-  <div class="help-block">
-    <div ng-if="!type">
-      Enter the command to run inside the container. The command is considered successful if its exit code is 0.
-      Drag and drop command arguments to reorder them.
-    </div>
-    <div ng-if="type">
-      Enter the arguments that will be appended to the container's command. Drag and drop arguments to reorder them.
+    <div class="help-block">
+      <span ng-if="description">{{description}}</span>
+      <span ng-if="!description">
+        Enter the command to run inside the container. The command is considered successful if its
+        exit code is 0. Drag and drop to reorder arguments.
+      </span>
     </div>
   </div>
   <div class="mar-top-sm mar-bottom-md">
     <a href="" ng-click="multiline = !multiline">Switch to {{multiline ? 'Single-line' : 'Multiline'}} Editor</a>
     <span ng-show="input.args.length">
       <span class="action-divider">|</span>
-      <a href="" ng-click="clear()" role="button">Clear {{ (type || 'Command') | sentenceCase }}</a>
+      <a href="" ng-click="clear()" role="button">Clear {{ (type || 'Command') | upperFirst }}</a>
     </span>
   </div>
   <!-- Add a hidden input to help with form validation. -->

app/views/edit/build-config.html

@@ -582,6 +582,7 @@ <h4>Script</h4>
                             <h4>Command</h4>
                             <edit-command
                               args="updatedBuildConfig.spec.postCommit.command"
+                              placeholder="Add to command"
                               is-required="true">
                             </edit-command>
                           </div>
@@ -590,7 +591,8 @@ <h4>Command</h4>
                             <h4>Arguments</h4>
                             <edit-command
                               args="updatedBuildConfig.spec.postCommit.args"
-                              type="argument"
+                              type="arguments"
+                              description="getArgumentsDescription()"
                               is-required="true">
                             </edit-command>
                           </div>

dist/scripts/scripts.js

@@ -7178,6 +7178,18 @@ id:"scriptArgs",
 label:"Shell script with arguments"
 } ], a.buildHookSelection = {
 type:{}
+}, a.getArgumentsDescription = function() {
+var b = _.get(a, "buildHookSelection.type.id", "");
+switch (b) {
+case "args":
+return "Enter the arguments that will be appended to the default image entry point.";
+
+case "commandArgs":
+return "Enter the arguments that will be appended to the command.";
+
+case "scriptArgs":
+return "Enter the arguments that will be appended to the script.";
+}
 };
 var n = function() {
 var b = !_.isEmpty(_.get(a, "buildConfig.spec.postCommit.args")), c = !_.isEmpty(_.get(a, "buildConfig.spec.postCommit.command")), d = !!_.get(a, "buildConfig.spec.postCommit.script");
@@ -12887,6 +12899,8 @@ restrict:"E",
 scope:{
 args:"=",
 type:"@",
+placeholder:"@",
+description:"=",
 isRequired:"="
 },
 templateUrl:"views/directives/_edit-command.html",

dist/scripts/templates.js

@@ -5839,37 +5839,38 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</span>\n" +
     "</p>\n" +
     "<div class=\"form-group\">\n" +
-    "<label class=\"sr-only\" ng-attr-for=\"{{id}}-add-arg\">Add {{type || 'Command'}}</label>\n" +
+    "<label class=\"sr-only\" ng-attr-for=\"{{id}}-add-arg\">\n" +
+    "<span ng-if=\"placeholder\">{{placeholder}}</span>\n" +
+    "<span ng-if=\"!placeholder\">Add argument</span>\n" +
+    "</label>\n" +
     "\n" +
     "<span ng-show=\"!multiline\" class=\"input-group\">\n" +
-    "<input type=\"text\" ng-model=\"nextArg\" name=\"nextArg\" ng-attr-id=\"{{id}}-add-arg\" on-enter=\"addArg()\" placeholder=\"Add {{type || 'command'}}\" class=\"form-control\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
+    "<input type=\"text\" ng-model=\"nextArg\" name=\"nextArg\" ng-attr-id=\"{{id}}-add-arg\" on-enter=\"addArg()\" ng-attr-placeholder=\"{{placeholder || 'Add argument'}}\" class=\"form-control\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
     "<span class=\"input-group-btn\">\n" +
     "\n" +
     "<a class=\"btn btn-default\" href=\"\" ng-click=\"addArg()\" ng-disabled=\"!nextArg\" ng-attr-aria-disabled=\"!nextArg\" role=\"button\">Add</a>\n" +
     "</span>\n" +
     "</span>\n" +
     "\n" +
     "<span ng-show=\"multiline\">\n" +
-    "<textarea ng-model=\"nextArg\" name=\"nextArg\" rows=\"10\" ng-attr-id=\"{{id}}-add-arg\" placeholder=\"Add {{type || 'command'}}\" class=\"form-control\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
+    "<textarea ng-model=\"nextArg\" name=\"nextArg\" rows=\"10\" ng-attr-id=\"{{id}}-add-arg\" ng-attr-placeholder=\"{{placeholder || 'Add argument'}}\" class=\"form-control\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
     "      </textarea>\n" +
     "<div class=\"mar-top-md\">\n" +
     "<a class=\"btn btn-default\" href=\"\" ng-click=\"addArg()\" ng-disabled=\"!nextArg\" ng-attr-aria-disabled=\"!nextArg\" role=\"button\">Add</a>\n" +
     "</div>\n" +
     "</span>\n" +
-    "</div>\n" +
     "<div class=\"help-block\">\n" +
-    "<div ng-if=\"!type\">\n" +
-    "Enter the command to run inside the container. The command is considered successful if its exit code is 0. Drag and drop command arguments to reorder them.\n" +
-    "</div>\n" +
-    "<div ng-if=\"type\">\n" +
-    "Enter the arguments that will be appended to the container's command. Drag and drop arguments to reorder them.\n" +
+    "<span ng-if=\"description\">{{description}}</span>\n" +
+    "<span ng-if=\"!description\">\n" +
+    "Enter the command to run inside the container. The command is considered successful if its exit code is 0. Drag and drop to reorder arguments.\n" +
+    "</span>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div class=\"mar-top-sm mar-bottom-md\">\n" +
     "<a href=\"\" ng-click=\"multiline = !multiline\">Switch to {{multiline ? 'Single-line' : 'Multiline'}} Editor</a>\n" +
     "<span ng-show=\"input.args.length\">\n" +
     "<span class=\"action-divider\">|</span>\n" +
-    "<a href=\"\" ng-click=\"clear()\" role=\"button\">Clear {{ (type || 'Command') | sentenceCase }}</a>\n" +
+    "<a href=\"\" ng-click=\"clear()\" role=\"button\">Clear {{ (type || 'Command') | upperFirst }}</a>\n" +
     "</span>\n" +
     "</div>\n" +
     "\n" +
@@ -9356,12 +9357,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<div ng-if=\"buildHookSelection.type.id === 'command' || buildHookSelection.type.id === 'commandArgs'\">\n" +
     "<h4>Command</h4>\n" +
-    "<edit-command args=\"updatedBuildConfig.spec.postCommit.command\" is-required=\"true\">\n" +
+    "<edit-command args=\"updatedBuildConfig.spec.postCommit.command\" placeholder=\"Add to command\" is-required=\"true\">\n" +
     "</edit-command>\n" +
     "</div>\n" +
     "<div ng-if=\"buildHookSelection.type.id === 'args' || buildHookSelection.type.id === 'commandArgs' || buildHookSelection.type.id === 'scriptArgs' \">\n" +
     "<h4>Arguments</h4>\n" +
-    "<edit-command args=\"updatedBuildConfig.spec.postCommit.args\" type=\"argument\" is-required=\"true\">\n" +
+    "<edit-command args=\"updatedBuildConfig.spec.postCommit.args\" type=\"arguments\" description=\"getArgumentsDescription()\" is-required=\"true\">\n" +
     "</edit-command>\n" +
     "</div>\n" +
     "</fieldset>\n" +