Merge pull request #6976 from marshmalien/feat/diffMode

Add --Diff Mode support to JT and Ad Hoc Command forms

awx/ui/client/src/inventories-hosts/inventories/adhoc/adhoc.controller.js

@@ -166,6 +166,10 @@ function adhocController($q, $scope, $stateParams,
     $scope.envParseType = 'yaml';
     ParseTypeChange({ scope: $scope, field_id: 'adhoc_extra_vars' , variable: "extra_vars"});
 
+    $scope.toggleForm = function(key) {
+        $scope[key] = !$scope[key];
+    };
+
     $scope.formCancel = function(){
         $state.go('^');
     };

awx/ui/client/src/inventories-hosts/inventories/adhoc/adhoc.form.js

@@ -77,16 +77,6 @@ export default ['i18n', function(i18n) {
                     init: 'false'
                 }
             },
-            become_enabled: {
-                label: i18n._('Enable Privilege Escalation'),
-                type: 'checkbox',
-
-                column: 2,
-                awPopOver: "<p>If enabled,  run this playbook as an administrator. This is the equivalent of passing the<code> --become</code> option to the <code> ansible</code> command. </p>",
-                dataPlacement: 'right',
-                dataTitle: i18n._('Become Privilege Escalation'),
-                dataContainer: "body"
-            },
             verbosity: {
                 label: i18n._('Verbosity'),
                 excludeModal: true,
@@ -120,6 +110,24 @@ export default ['i18n', function(i18n) {
                 dataPlacement: 'right',
                 dataContainer: "body"
             },
+            diff_mode: {
+                label: i18n._('Diff Mode'),
+                type: 'toggleSwitch',
+                toggleSource: 'diff_mode',
+                dataTitle: i18n._('Diff Mode'),
+                dataPlacement: 'right',
+                dataContainer: 'body',
+                awPopOver: "<p>" + i18n._("If enabled, textual changes made to any templated files on the host are shown in the standard output.") + "</p>",
+            },
+            become_enabled: {
+                label: i18n._('Enable Privilege Escalation'),
+                type: 'checkbox',
+                column: 2,
+                awPopOver: "<p>If enabled,  run this playbook as an administrator. This is the equivalent of passing the<code> --become</code> option to the <code> ansible</code> command. </p>",
+                dataPlacement: 'right',
+                dataTitle: i18n._('Become Privilege Escalation'),
+                dataContainer: "body"
+            },
             extra_vars: {
                 label: i18n._('Extra Variables'),
                 type: 'textarea',

awx/ui/client/src/job-submission/job-submission.controller.js

@@ -159,7 +159,7 @@ export default
 
                     // General catch-all for "other prompts" - used in this link function and to hide the Other Prompts tab when
                     // it should be hidden
-                    $scope.has_other_prompts = (data.ask_verbosity_on_launch || data.ask_job_type_on_launch || data.ask_limit_on_launch || data.ask_tags_on_launch || data.ask_skip_tags_on_launch || data.ask_variables_on_launch) ? true : false;
+                    $scope.has_other_prompts = (data.ask_verbosity_on_launch || data.ask_job_type_on_launch || data.ask_limit_on_launch || data.ask_tags_on_launch || data.ask_skip_tags_on_launch || data.ask_variables_on_launch || data.ask_diff_mode_on_launch) ? true : false;
                     $scope.password_needed = data.passwords_needed_to_start && data.passwords_needed_to_start.length > 0;
                     $scope.has_default_inventory = data.defaults && data.defaults.inventory && data.defaults.inventory.id;
                     $scope.has_default_credential = data.defaults && data.defaults.credential && data.defaults.credential.id;
@@ -218,6 +218,10 @@ export default
                         $scope.other_prompt_data.skip_tags = $scope.other_prompt_data.skip_tags_options;
                     }
 
+                    if($scope.ask_diff_mode_on_launch) {
+                        $scope.other_prompt_data.diff_mode = (data.defaults && data.defaults.diff_mode) ? data.defaults.diff_mode : false;
+                    }
+
                     if($scope.ask_variables_on_launch) {
                         $scope.jobLaunchVariables = (data.defaults && data.defaults.extra_vars) ? data.defaults.extra_vars : "---";
                         $scope.other_prompt_data.parseType = 'yaml';
@@ -499,6 +503,10 @@ export default
                 }
             };
 
+            $scope.toggleForm = function(key) {
+                $scope.other_prompt_data[key] = !$scope.other_prompt_data[key];
+            };
+
             $scope.updateParseType = function() {
                 // This is what the ParseTypeChange factory is expecting
                 // It shares the same scope with this directive and will

awx/ui/client/src/job-submission/job-submission.partial.html

@@ -250,6 +250,17 @@
                             </select>
                         </div>
                     </div>
+                    <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ask_diff_mode_on_launch">
+                        <label for="diff_mode">
+                            <span class="Form-inputLabel" translate>Diff Mode</span>
+                        </label>
+                        <div>
+                            <div class="ScheduleToggle" ng-class="{'is-on': other_prompt_data.diff_mode}" aw-tool-tip="" data-placement="top" data-original-title="" title="">
+                                <button ng-show="other_prompt_data.diff_mode" class="ScheduleToggle-switch is-on" ng-click="toggleForm('diff_mode')" translate>ON</button>
+                                <button ng-show="!other_prompt_data.diff_mode" class="ScheduleToggle-switch ng-hide" ng-click="toggleForm('diff_mode')" translate>OFF</button>
+                            </div>
+                        </div>
+                    </div>
                 </form>
             </div>
             <div ng-if="survey_enabled" ng-show="step === 'survey'" class="JobSubmission-form">

awx/ui/client/src/scheduler/scheduleToggle.block.less

@@ -4,13 +4,14 @@
 
 .ScheduleToggle {
     border-radius: 5px;
-    border: 1px solid @default-icon;
+    border: 1px solid @default-link;
-    background-color: @default-icon;
+    background-color: @default-link;
     width: 42px;
     margin-top: 2px;
     cursor: pointer;
     display: flex;
     height: 18px;
+    overflow: hidden;
 
     &.ScheduleToggle--disabled  {
         cursor: not-allowed;
@@ -23,10 +24,10 @@
 }
 
 .ScheduleToggle-switch {
-    color: @default-interface-txt;
+    color: @default-link;
     background-color: @default-bg;
     margin-left: 7px;
-    border-left: 1px solid @default-icon;
+    border-left: 1px solid @default-link;
     margin-right: 0px;
     text-align: center;
     text-transform: uppercase;

awx/ui/client/src/shared/form-generator.js

@@ -768,8 +768,22 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                     // toggle switches
                     if(field.type === 'toggleSwitch') {
-                        html += label();
+                        let labelOptions = {};
-                            html += `<div class="ScheduleToggle" ng-class="{'is-on': ${field.toggleSource}}" aw-tool-tip=""
+
+                        if (field.subCheckbox) {
+                            labelOptions.checkbox = {
+                                id: `${this.form.name}_${fld}_ask_chbox`,
+                                ngModel: field.subCheckbox.variable,
+                                ngShow: field.subCheckbox.ngShow,
+                                ngChange: field.subCheckbox.ngChange,
+                                ngDisabled: field.ngDisabled || field.subCheckbox.ngDisabled,
+                                text: field.subCheckbox.text || ''
+                            };
+                        }
+
+                        html += label(labelOptions);
+
+                        html += `<div class="ScheduleToggle" ng-class="{'is-on': ${field.toggleSource}}" aw-tool-tip=""
                             data-placement="top">
                             <button ng-show="${field.toggleSource}" class="ScheduleToggle-switch is-on" ng-click="toggleForm('${field.toggleSource}')">ON</button>
                             <button ng-show="!${field.toggleSource}" class="ScheduleToggle-switch" ng-click="toggleForm('${field.toggleSource}')">OFF</button>

awx/ui/client/src/templates/job_templates/add-job-template/job-template-add.controller.js

@@ -132,6 +132,10 @@
                 });
             }
 
+            $scope.toggleForm = function(key) {
+                $scope[key] = !$scope[key];
+            };
+
             // Update playbook select whenever project value changes
             selectPlaybook = function (oldValue, newValue) {
                 var url;
@@ -262,7 +266,7 @@
                             }
                         }
                     }
-
+                    data.ask_diff_mode_on_launch = $scope.ask_diff_mode_on_launch ? $scope.ask_diff_mode_on_launch : false;
                     data.ask_tags_on_launch = $scope.ask_tags_on_launch ? $scope.ask_tags_on_launch : false;
                     data.ask_skip_tags_on_launch = $scope.ask_skip_tags_on_launch ? $scope.ask_skip_tags_on_launch : false;
                     data.ask_limit_on_launch = $scope.ask_limit_on_launch ? $scope.ask_limit_on_launch : false;

awx/ui/client/src/templates/job_templates/edit-job-template/job-template-edit.controller.js

@@ -191,6 +191,10 @@ export default
                 });
             }
 
+            $scope.toggleForm = function(key) {
+                $scope[key] = !$scope[key];
+            };
+
             $scope.jobTypeChange = function() {
                 sync_playbook_select2();
             };
@@ -475,6 +479,7 @@ export default
                         }
                     }
 
+                    data.ask_diff_mode_on_launch = $scope.ask_diff_mode_on_launch ? $scope.ask_diff_mode_on_launch : false;
                     data.ask_tags_on_launch = $scope.ask_tags_on_launch ? $scope.ask_tags_on_launch : false;
                     data.ask_skip_tags_on_launch = $scope.ask_skip_tags_on_launch ? $scope.ask_skip_tags_on_launch : false;
                     data.ask_limit_on_launch = $scope.ask_limit_on_launch ? $scope.ask_limit_on_launch : false;

awx/ui/client/src/templates/job_templates/factories/callback-help-init.factory.js

@@ -113,6 +113,9 @@ export default
                     scope.ask_skip_tags_on_launch = (data.ask_skip_tags_on_launch) ? true : false;
                     master.ask_skip_tags_on_launch = scope.ask_skip_tags_on_launch;
 
+                    scope.ask_diff_mode_on_launch = (data.ask_diff_mode_on_launch) ? true : false;
+                    master.ask_diff_mode_on_launch = scope.ask_diff_mode_on_launch;
+
                     scope.job_tag_options = (data.job_tags) ? data.job_tags.split(',')
                         .map((i) => ({name: i, label: i, value: i})) : [];
                     scope.job_tags = scope.job_tag_options;

awx/ui/client/src/templates/job_templates/job-template.form.js

@@ -248,6 +248,19 @@ function(NotificationsList, CompletedJobsList, i18n) {
                     },
                     ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
                 },
+                diff_mode: {
+                    label: i18n._('Diff Mode'),
+                    type: 'toggleSwitch',
+                    toggleSource: 'diff_mode',
+                    dataTitle: i18n._('Diff Mode'),
+                    dataPlacement: 'right',
+                    dataContainer: 'body',
+                    awPopOver: "<p>" + i18n._("If enabled, textual changes made to any templated files on the host are shown in the standard output.") + "</p>",
+                    subCheckbox: {
+                        variable: 'ask_diff_mode_on_launch',
+                        text: i18n._('Prompt on launch')
+                    },
+                },
                 checkbox_group: {
                     label: i18n._('Options'),
                     type: 'checkbox_group',