Merge pull request #3594 from keithjgrant/407-job-launch-keyboard-nav

Job launch keyboard navigation improvements

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]

awx/ui/client/src/templates/prompt/prompt.controller.js

@@ -7,6 +7,7 @@ export default [ 'ProcessErrors', 'CredentialTypeModel', 'TemplatesStrings', '$f
 
         let scope;
         let modal;
+        let activeTab;
 
         vm.init = (_scope_) => {
             scope = _scope_;
@@ -137,6 +138,7 @@ export default [ 'ProcessErrors', 'CredentialTypeModel', 'TemplatesStrings', '$f
                                 _active: true,
                                 order: order
                             };
+                            activeTab = activeTab || vm.steps.inventory.tab;
                             order++;
                         }
                         if (vm.promptDataClone.launchConf.ask_credential_on_launch ||
@@ -152,6 +154,7 @@ export default [ 'ProcessErrors', 'CredentialTypeModel', 'TemplatesStrings', '$f
                                 _disabled: (order === 1 || vm.readOnlyPrompts) ? false : true,
                                 order: order
                             };
+                            activeTab = activeTab || vm.steps.credentials.tab;
                             order++;
                         }
                         if(vm.promptDataClone.launchConf.ask_verbosity_on_launch || vm.promptDataClone.launchConf.ask_job_type_on_launch || vm.promptDataClone.launchConf.ask_limit_on_launch || vm.promptDataClone.launchConf.ask_tags_on_launch || vm.promptDataClone.launchConf.ask_skip_tags_on_launch || (vm.promptDataClone.launchConf.ask_variables_on_launch && !vm.promptDataClone.launchConf.ignore_ask_variables) || vm.promptDataClone.launchConf.ask_diff_mode_on_launch) {
@@ -161,6 +164,7 @@ export default [ 'ProcessErrors', 'CredentialTypeModel', 'TemplatesStrings', '$f
                                 _disabled: (order === 1 || vm.readOnlyPrompts) ? false : true,
                                 order: order
                             };
+                            activeTab = activeTab || vm.steps.other_prompts.tab;
                             order++;
 
                             let codemirror = () =>  {
@@ -177,6 +181,7 @@ export default [ 'ProcessErrors', 'CredentialTypeModel', 'TemplatesStrings', '$f
                                 _disabled: (order === 1 || vm.readOnlyPrompts) ? false : true,
                                 order: order
                             };
+                            activeTab = activeTab || vm.steps.survey.tab;
                             order++;
                         }
                         vm.steps.preview.tab.order = order;
@@ -214,13 +219,21 @@ export default [ 'ProcessErrors', 'CredentialTypeModel', 'TemplatesStrings', '$f
                     if(vm.steps[step].tab.order === currentTab.order) {
                         vm.steps[step].tab._active = false;
                     } else if(vm.steps[step].tab.order === currentTab.order + 1) {
+                        activeTab = currentTab;
                         vm.steps[step].tab._active = true;
                         vm.steps[step].tab._disabled = false;
+                        scope.$broadcast('promptTabChange', { step });
                     }
                 }
             });
         };
 
+        vm.keypress = (event) => {
+          if (event.key === 'Enter') {
+            vm.next(activeTab);
+          }
+        };
+
         vm.finish = () => {
             // Disable the action button to prevent double clicking
             vm.actionButtonClicked = true;

awx/ui/client/src/templates/prompt/prompt.partial.html

@@ -7,12 +7,12 @@
             <at-tab id="prompt_survey_tab" ng-if="vm.steps.survey.tab" state="vm.steps.survey.tab">{{:: vm.strings.get('prompt.SURVEY') }}</at-tab>
             <at-tab id="prompt_preview_tab" state="vm.steps.preview.tab">{{:: vm.strings.get('prompt.PREVIEW') }}</at-tab>
         </at-tab-group>
-        <div class="Prompt-step">
+        <div class="Prompt-step" ng-keypress="vm.keypress($event)">
             <div ng-if="vm.steps.inventory.includeStep" ng-show="vm.steps.inventory.tab._active" id="prompt_inventory_step">
                 <prompt-inventory
-                prompt-data="vm.promptDataClone"
+                    prompt-data="vm.promptDataClone"
-                read-only-prompts="vm.readOnlyPrompts">
+                    read-only-prompts="vm.readOnlyPrompts">
-            </prompt-inventory>
+                </prompt-inventory>
             </div>
             <div ng-if="vm.steps.credential.includeStep" ng-show="vm.steps.credential.tab._active" id="prompt_credential_step">
                 <prompt-credential

awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.controller.js

@@ -12,7 +12,7 @@ export default
 
             let scope;
 
-            vm.init = (_scope_) => {
+            vm.init = (_scope_, controller, el) => {
                 scope = _scope_;
 
                 scope.parseType = 'yaml';
@@ -102,10 +102,27 @@ export default
                     return ToJSON(scope.parseType, scope.extraVariables, true);
                 }
                 scope.validate = validate;
+
+                function focusFirstInput () {
+                  const inputs = el.find('input[type=text], select, textarea:visible, .CodeMirror textarea');
+                  if (inputs.length) {
+                    inputs.get(0).focus();
+                  }
+                }
+
+                angular.element(el).ready(() => {
+                    focusFirstInput();
+                });
+
+                scope.$on('promptTabChange', (event, args) => {
+                    if (args.step === 'other_prompts') {
+                        angular.element(el).ready(() => {
+                          focusFirstInput();
+                        });
+                    }
+                });
             };
 
-
-
             vm.toggleDiff = () => {
                 scope.promptData.prompts.diffMode.value = !scope.promptData.prompts.diffMode.value;
             };

awx/ui/client/src/templates/prompt/steps/other-prompts/prompt-other-prompts.directive.js

@@ -28,7 +28,7 @@ export default [ 'templateUrl',
             const launchController = controllers[0];
             const promptOtherPromptsController = controllers[1];
 
-            promptOtherPromptsController.init(scope, launchController);
+            promptOtherPromptsController.init(scope, launchController, el);
         }
     };
 }];