Merge pull request #5250 from kensible/4876-disabled-tooltip

Added disabled tooltips in CTinT

awx/ui/client/legacy-styles/forms.less

@@ -245,13 +245,13 @@
 .Form-textArea{
     border-radius: 5px;
     color: @field-input-text;
-    background-color: @field-secondary-bg!important;
+    background-color: @field-secondary-bg;
     width:100%!important;
 }
 
 .Form-textInput{
     height: 30px;
-    background-color: @field-secondary-bg!important;
+    background-color: @field-secondary-bg;
     border-radius: 5px;
     border:1px solid @field-border;
     color: @field-input-text;

awx/ui/client/src/configuration/auth-form/configuration-auth.controller.js

@@ -163,7 +163,8 @@ export default [
 
         function addFieldInfo(form, key) {
             _.extend(form.fields[key], {
-                awPopOver: $scope.$parent.configDataResolve[key].help_text,
+                awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
+                    null: $scope.$parent.configDataResolve[key].help_text,
                 label: $scope.$parent.configDataResolve[key].label,
                 name: key,
                 toggleSource: key,

awx/ui/client/src/configuration/configuration.block.less

@@ -147,6 +147,8 @@ textarea[disabled="disabled"] + div[id*="-container"]{
 //Needed to show the not-allowed cursor over a Codemirror instance
 .Form-formGroup--disabled {
     cursor: not-allowed;
+    position: relative;
+    display: inline-block;
 
     // Filepicker and toggle disabling
     .Form-filePicker--pickerButton, .Form-filePicker--textBox,
@@ -155,4 +157,46 @@ textarea[disabled="disabled"] + div[id*="-container"]{
         cursor: not-allowed;
     }
 
+    // Adding explanatory tooltips for disabled fields
+    // Borrows styling from .popover
+    .Form-tooltip--disabled {
+        visibility: hidden;
+        background-color: @default-interface-txt;
+        color: @default-bg;
+        text-align: center;
+        border-radius: 6px;
+
+        position: absolute;
+        z-index: 1;
+        width: 200px;
+        bottom: 110%;
+        left: 50%;
+        margin-left: -100px;
+
+        background-clip: padding-box;
+        border: 1px solid rgba(0,0,0,.2);
+        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+        box-shadow: 0 5px 10px rgba(0,0,0,.2);
+        white-space: normal;
+
+        padding: 9px 14px;
+        font-size: 12px;
+        font-weight: bold;
+    }
+
+    &:hover .Form-tooltip--disabled {
+        visibility: visible;
+    }
+
+    .Form-tooltip--disabled::after {
+        content: " ";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -11px;
+        border-width: 11px;
+        border-style: solid;
+        border-color: @default-interface-txt transparent transparent transparent;
+    }
+
 }

awx/ui/client/src/configuration/jobs-form/configuration-jobs.controller.js

@@ -49,7 +49,8 @@ export default [
 
         function addFieldInfo(form, key) {
             _.extend(form.fields[key], {
-                awPopOver: $scope.$parent.configDataResolve[key].help_text,
+                awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
+                    null: $scope.$parent.configDataResolve[key].help_text,
                 label: $scope.$parent.configDataResolve[key].label,
                 name: key,
                 toggleSource: key,

awx/ui/client/src/configuration/system-form/configuration-system.controller.js

@@ -122,7 +122,8 @@ export default [
 
         function addFieldInfo(form, key) {
             _.extend(form.fields[key], {
-                awPopOver: $scope.$parent.configDataResolve[key].help_text,
+                awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
+                    null: $scope.$parent.configDataResolve[key].help_text,
                 label: $scope.$parent.configDataResolve[key].label,
                 name: key,
                 toggleSource: key,

awx/ui/client/src/configuration/ui-form/configuration-ui.controller.js

@@ -52,7 +52,8 @@
 
          function addFieldInfo(form, key) {
              _.extend(form.fields[key], {
-                 awPopOver: $scope.$parent.configDataResolve[key].help_text,
+                 awPopOver: ($scope.$parent.configDataResolve[key].defined_in_file) ?
+                     null: $scope.$parent.configDataResolve[key].help_text,
                  label: $scope.$parent.configDataResolve[key].label,
                  name: key,
                  toggleSource: key,

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

@@ -740,6 +740,10 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     html += (field.awFeature) ? "aw-feature=\"" + field.awFeature + "\" " : "";
                     html += ">\n";
 
+                    var definedInFileMessage = i18n._('This setting has been set manually in a settings file and is now disabled.');
+                    html += (field.definedInFile) ?
+                        `<span class="Form-tooltip--disabled">${definedInFileMessage}</span>` : ``;
+
                     // toggle switches
                     if(field.type === 'toggleSwitch') {
                         html += label();