[UI Framework] Add isReadOnly prop to KuiCodeEditor. (#14804)

* Add isReadOnly prop to KuiCodeEditor.
* Place cursor at beginning of code editor if it's read-only.
* Surface prompt for isReadOnly mode. Only show cursor when the editor is focused.

ui_framework/dist/ui_framework.css

@@ -688,6 +688,10 @@ input[type="button"] {
 
 .kuiCodeEditorWrapper {
   position: relative; }
+  .kuiCodeEditorWrapper .ace_hidden-cursors {
+    opacity: 0; }
+  .kuiCodeEditorWrapper.kuiCodeEditorWrapper-isEditing .ace_hidden-cursors {
+    opacity: 1; }
 
 .kuiCodeEditorKeyboardHint {
   position: absolute;

ui_framework/doc_site/src/views/code_editor/code_editor_example.js

@@ -11,6 +11,9 @@ import {
 import CodeEditor from './code_editor';
 const codeEditorSource = require('!!raw-loader!./code_editor');
 
+import ReadOnly from './read_only';
+const readOnlySource = require('!!raw-loader!./read_only');
+
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
@@ -36,5 +39,17 @@ export default props => (
         <CodeEditor />
       </GuideDemo>
     </GuideSection>
+
+    <GuideSection
+      title="Read-only"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: readOnlySource,
+      }]}
+    >
+      <GuideDemo>
+        <ReadOnly />
+      </GuideDemo>
+    </GuideSection>
   </GuidePage>
 );

ui_framework/doc_site/src/views/code_editor/read_only.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+import 'brace/mode/less';
+import 'brace/theme/github';
+
+import {
+  KuiCodeEditor
+} from '../../../../components';
+
+export default class extends Component {
+  state = {
+    value: '<p>This code is read only</p>'
+  };
+
+  render() {
+    return (
+      <KuiCodeEditor
+        mode="less"
+        theme="github"
+        width="100%"
+        value={this.state.value}
+        setOptions={{ fontSize: '14px' }}
+        isReadOnly
+      />
+    );
+  }
+}

ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KuiCodeEditor hint element should be disabled when the ui ace box gains focus 1`] = `
+exports[`KuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
 <div
   className="kuiCodeEditorKeyboardHint kuiCodeEditorKeyboardHint-isInactive"
   data-test-subj="codeEditorHint"
@@ -13,17 +13,21 @@ exports[`KuiCodeEditor hint element should be disabled when the ui ace box gains
   <p
     className="kuiText kuiVerticalRhythmSmall"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
     className="kuiText kuiVerticalRhythmSmall"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
 
-exports[`KuiCodeEditor hint element should be enabled when the ui ace box loses focus 1`] = `
+exports[`KuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
 <div
   className="kuiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
@@ -36,12 +40,16 @@ exports[`KuiCodeEditor hint element should be enabled when the ui ace box loses
   <p
     className="kuiText kuiVerticalRhythmSmall"
   >
-    Press Enter to start editing.
+    Press Enter to start 
+    editing
+    .
   </p>
   <p
     className="kuiText kuiVerticalRhythmSmall"
   >
-    When you’re done, press Escape to stop editing.
+    When you’re done, press Escape to stop 
+    editing
+    .
   </p>
 </div>
 `;
@@ -60,12 +68,28 @@ exports[`KuiCodeEditor is rendered 1`] = `
     <p
       class="kuiText kuiVerticalRhythmSmall"
     >
-      Press Enter to start editing.
+      <!-- react-text: 4 -->
+      Press Enter to start 
+      <!-- /react-text -->
+      <!-- react-text: 5 -->
+      editing
+      <!-- /react-text -->
+      <!-- react-text: 6 -->
+      .
+      <!-- /react-text -->
     </p>
     <p
       class="kuiText kuiVerticalRhythmSmall"
     >
-      When you’re done, press Escape to stop editing.
+      <!-- react-text: 8 -->
+      When you’re done, press Escape to stop 
+      <!-- /react-text -->
+      <!-- react-text: 9 -->
+      editing
+      <!-- /react-text -->
+      <!-- react-text: 10 -->
+      .
+      <!-- /react-text -->
     </p>
   </div>
   <div
@@ -158,3 +182,133 @@ exports[`KuiCodeEditor is rendered 1`] = `
   </div>
 </div>
 `;
+
+exports[`KuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
+<div
+  class="kuiCodeEditorWrapper"
+>
+  <div
+    class="kuiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="42"
+    role="button"
+    tabindex="0"
+  >
+    <p
+      class="kuiText kuiVerticalRhythmSmall"
+    >
+      <!-- react-text: 4 -->
+      Press Enter to start 
+      <!-- /react-text -->
+      <!-- react-text: 5 -->
+      interacting with the code
+      <!-- /react-text -->
+      <!-- react-text: 6 -->
+      .
+      <!-- /react-text -->
+    </p>
+    <p
+      class="kuiText kuiVerticalRhythmSmall"
+    >
+      <!-- react-text: 8 -->
+      When you’re done, press Escape to stop 
+      <!-- /react-text -->
+      <!-- react-text: 9 -->
+      interacting with the code
+      <!-- /react-text -->
+      <!-- react-text: 10 -->
+      .
+      <!-- /react-text -->
+    </p>
+  </div>
+  <div
+    class=" ace_editor ace-tm"
+    id="brace-editor"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+        style="display: none;"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;

ui_framework/src/components/code_editor/_code_editor.scss

@@ -1,5 +1,15 @@
 .kuiCodeEditorWrapper {
   position: relative;
+
+  .ace_hidden-cursors {
+    opacity: 0;
+  }
+
+  &.kuiCodeEditorWrapper-isEditing {
+    .ace_hidden-cursors {
+      opacity: 1;
+    }
+  }
 }
 
 .kuiCodeEditorKeyboardHint {