Use disable instead of readonly for oj-text-area to work around Jet issue (#170)

Author: rakillen

webui/src/css/app.css

@@ -344,6 +344,15 @@ h6:first-child {
   padding: 2px;
 }
 
+/*
+ a JET bug causes oj-text-area readonly=true text to not be selectable.
+ we use disabled=true instead, and use these styles to simulate readonly.
+ */
+.wkt-code-view.oj-text-field.oj-disabled .oj-text-field-input {
+  color: black;
+  padding: 0;
+}
+
 .wkt-dialog {
   width: 500px;
   height: 500px;

webui/src/js/views/domain-code-view.html

@@ -27,17 +27,17 @@
                           help.instruction="[[shellLabelMapper('selector-help')]]">
         </oj-select-single>
       </oj-form-layout>
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="domain" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{domainText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{domainText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="configMap" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{configMapText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{configMapText}}" disabled="true">
       </oj-text-area>
     </div>
   </oj-switcher>

webui/src/js/views/image-code-view.html

@@ -29,7 +29,7 @@
       <oj-text-area class="wkt-code-view"
                     max-rows="-1"
                     value="{{codeText}}"
-                    readonly="true">
+                    disabled="true">
       </oj-text-area>
     </div>
 

webui/src/js/views/ingress-code-view.html

@@ -26,7 +26,7 @@
                           help.instruction="[[shellLabelMapper('selector-help')]]">
         </oj-select-single>
       </oj-form-layout>
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{installScriptText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{installScriptText}}" disabled="true">
       </oj-text-area>
     </div>
 
@@ -38,12 +38,12 @@
                           help.instruction="[[shellLabelMapper('selector-help')]]">
         </oj-select-single>
       </oj-form-layout>
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{addRoutesScriptText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{addRoutesScriptText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="routesYaml" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{ingressRoutesYamlText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{ingressRoutesYamlText}}" disabled="true">
       </oj-text-area>
     </div>
 

webui/src/js/views/operator-code-view.html

@@ -14,6 +14,6 @@
   <oj-text-area class="wkt-code-view"
                 max-rows="-1"
                 value="{{codeText}}"
-                readonly="true">
+                disabled="true">
   </oj-text-area>
 </div>

webui/src/js/views/vz-application-code-view.html

@@ -27,17 +27,17 @@
                           help.instruction="[[shellLabelMapper('selector-help')]]">
         </oj-select-single>
       </oj-form-layout>
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="application" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{applicationText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{applicationText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="project" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{projectText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{projectText}}" disabled="true">
       </oj-text-area>
     </div>
   </oj-switcher>

webui/src/js/views/vz-component-code-view.html

@@ -27,17 +27,17 @@
                           help.instruction="[[shellLabelMapper('selector-help')]]">
         </oj-select-single>
       </oj-form-layout>
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="component" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{componentText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{componentText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="configMap" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{configMapText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{configMapText}}" disabled="true">
       </oj-text-area>
     </div>
   </oj-switcher>

webui/src/js/views/vz-install-code-view.html

@@ -27,12 +27,12 @@
                           help.instruction="[[shellLabelMapper('selector-help')]]">
         </oj-select-single>
       </oj-form-layout>
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{scriptText}}" disabled="true">
       </oj-text-area>
     </div>
 
     <div slot="verrazzano" class="oj-panel wkt-code-view-platform-frame">
-      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{verrazzanoResourceText}}" readonly="true">
+      <oj-text-area class="wkt-code-view" max-rows="-1" value="{{verrazzanoResourceText}}" disabled="true">
       </oj-text-area>
     </div>