Improves UX for readonly codemirrors so that users can copy/paste

awx/ui/client/legacy/styles/codemirror.less

@@ -37,15 +37,6 @@
 
 // Disabled
 textarea[disabled="disabled"] + div[id*="-container"]{
-        .CodeMirror {
-            cursor: not-allowed;
-        }
-
-        .CodeMirror.cm-s-default,
-        .CodeMirror-line {
-            background-color: @ebgrey;
-        }
-
         .CodeMirror-gutters {
             border-color: @b7grey;
         }
@@ -55,12 +46,4 @@ textarea[disabled="disabled"] + div[id*="-container"]{
             background-color: @default-bg;
             color: @default-interface-txt;
         }
-
-        .CodeMirror-lines {
-            cursor: default;
-        }
-
-        .CodeMirror-cursors {
-            display: none;
-        }
 }

awx/ui/client/lib/components/code-mirror/_index.less

@@ -18,6 +18,11 @@
     flex: 1 0 auto;
 }
 
+.atCodeMirror-labelRightSide{
+    display: flex;
+    align-items: center;
+}
+
 .atCodeMirror-labelText{
     text-transform: uppercase;
     color: #707070;
@@ -74,3 +79,8 @@
 		margin-left: 10px;
 	}
 }
+
+.atCodeMirror-badge{
+    display: initial; 
+    margin-right: 20px;
+}

awx/ui/client/lib/components/code-mirror/code-mirror.directive.js

@@ -13,8 +13,12 @@ function atCodeMirrorController (
     ParseVariableString
 ) {
     const vm = this;
-
     function init (vars) {
+        if ($scope.disabled === 'true') {
+            $scope.disabled = true;
+        } else if ($scope.disabled === 'false') {
+            $scope.disabled = false;
+        }
         $scope.variables = ParseVariableString(_.cloneDeep(vars));
         $scope.parseType = ParseType;
         const options = {

awx/ui/client/lib/components/code-mirror/code-mirror.strings.js

@@ -9,8 +9,8 @@ function CodeMirrorStrings (BaseString) {
         VARIABLES: t.s('VARIABLES'),
         EXPAND: t.s('EXPAND'),
         YAML: t.s('YAML'),
-        JSON: t.s('JSON')
+        JSON: t.s('JSON'),
-
+        READONLY: t.s('READ ONLY')
     };
 
     ns.tooltip = {

awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js

@@ -16,8 +16,12 @@ function atCodeMirrorModalController (
     ParseVariableString
 ) {
     const vm = this;
-
     function resize () {
+        if ($scope.disabled === 'true') {
+            $scope.disabled = true;
+        } else if ($scope.disabled === 'false') {
+            $scope.disabled = false;
+        }
         const editor = $(`${CodeMirrorModalID} .CodeMirror`)[0].CodeMirror;
         const height = $(ModalHeight).height() - $(ModalHeader).height() -
             $(ModalFooter).height() - 100;
@@ -30,6 +34,11 @@ function atCodeMirrorModalController (
     }
 
     function init () {
+        if ($scope.disabled === 'true') {
+            $scope.disabled = true;
+        } else if ($scope.disabled === 'false') {
+            $scope.disabled = false;
+        }
         $(CodeMirrorModalID).modal('show');
         $scope.extra_variables = ParseVariableString(_.cloneDeep($scope.variables));
         $scope.parseType = ParseType;

awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html

@@ -42,7 +42,10 @@
                             </div>
                          </div>
                     </div>
-                    <div>
+                    <div class="atCodeMirror-labelRightSide">
+                        <div class="at-RowItem-tag at-RowItem-tag--header atCodeMirror-badge" ng-show="disabled === 'true' || disabled === true">
+                            {{ vm.strings.get('label.READONLY')}}
+                        </div>
                         <button type="button" class="close" ng-click="closeFn()">
                             <i class="fa fa-times-circle"></i>
                         </button>