From b6b0e6134c18c2f7d7d508d68dad61ac9ba65d0a Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 9 Nov 2017 09:22:48 -0800
Subject: [PATCH] [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            |   4 +
 .../views/code_editor/code_editor_example.js  |  15 ++
 .../src/views/code_editor/read_only.js        |  27 +++
 .../__snapshots__/code_editor.test.js.snap    | 170 +++++++++++++++++-
 .../components/code_editor/_code_editor.scss  |  10 ++
 .../src/components/code_editor/code_editor.js | 106 ++++++++---
 .../code_editor/code_editor.test.js           |  81 +++++----
 7 files changed, 346 insertions(+), 67 deletions(-)
 create mode 100644 ui_framework/doc_site/src/views/code_editor/read_only.js

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index bd4e82c6b101de..a926f5382fb9b9 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/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;
diff --git a/ui_framework/doc_site/src/views/code_editor/code_editor_example.js b/ui_framework/doc_site/src/views/code_editor/code_editor_example.js
index 35afd30f044736..e8af21a45ceb45 100644
--- a/ui_framework/doc_site/src/views/code_editor/code_editor_example.js
+++ b/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>
 );
diff --git a/ui_framework/doc_site/src/views/code_editor/read_only.js b/ui_framework/doc_site/src/views/code_editor/read_only.js
new file mode 100644
index 00000000000000..5c455e5e89a60c
--- /dev/null
+++ b/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
+      />
+    );
+  }
+}
diff --git a/ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap
index c4faf3450cac83..971c88b219d5fa 100644
--- a/ui_framework/src/components/code_editor/__snapshots__/code_editor.test.js.snap
+++ b/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>
+`;
diff --git a/ui_framework/src/components/code_editor/_code_editor.scss b/ui_framework/src/components/code_editor/_code_editor.scss
index bd246acc422230..880453440015a4 100644
--- a/ui_framework/src/components/code_editor/_code_editor.scss
+++ b/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 {
diff --git a/ui_framework/src/components/code_editor/code_editor.js b/ui_framework/src/components/code_editor/code_editor.js
index 5b8604693f0dd9..b0ec265234c128 100644
--- a/ui_framework/src/components/code_editor/code_editor.js
+++ b/ui_framework/src/components/code_editor/code_editor.js
@@ -6,9 +6,9 @@ import AceEditor from 'react-ace';
 import { htmlIdGenerator, keyCodes } from '../../../services';
 
 export class KuiCodeEditor extends Component {
-
   state = {
-    isHintActive: true
+    isHintActive: true,
+    isEditing: false,
   };
 
   idGenerator = htmlIdGenerator();
@@ -30,6 +30,15 @@ export class KuiCodeEditor extends Component {
     }
   }
 
+  onFocusAce = (...args) => {
+    this.setState({
+      isEditing: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus(...args);
+    }
+  }
+
   onBlurAce = (...args) => {
     this.stopEditing();
     if (this.props.onBlur) {
@@ -45,12 +54,17 @@ export class KuiCodeEditor extends Component {
   };
 
   startEditing = () => {
-    this.setState({ isHintActive: false });
+    this.setState({
+      isHintActive: false,
+    });
     this.aceEditor.editor.textInput.focus();
   }
 
   stopEditing() {
-    this.setState({ isHintActive: true });
+    this.setState({
+      isHintActive: true,
+      isEditing: false,
+    });
   }
 
   render() {
@@ -58,42 +72,79 @@ export class KuiCodeEditor extends Component {
       width,
       height,
       onBlur, // eslint-disable-line no-unused-vars
+      isReadOnly,
+      setOptions,
+      cursorStart,
       ...rest,
     } = this.props;
 
-    const classes = classNames('kuiCodeEditorKeyboardHint', {
+    const classes = classNames('kuiCodeEditorWrapper', {
+      'kuiCodeEditorWrapper-isEditing': this.state.isEditing,
+    });
+
+    const promptClasses = classNames('kuiCodeEditorKeyboardHint', {
       'kuiCodeEditorKeyboardHint-isInactive': !this.state.isHintActive
     });
 
+    let filteredCursorStart;
+
+    const options = { ...setOptions };
+
+    if (isReadOnly) {
+      // Put the cursor at the beginning of the editor, so that it doesn't look like
+      // a prompt to begin typing.
+      filteredCursorStart = -1;
+
+      Object.assign(options, {
+        readOnly: true,
+        highlightActiveLine: false,
+        highlightGutterLine: false,
+      });
+    } else {
+      filteredCursorStart = cursorStart;
+    }
+
+    const activity =
+      isReadOnly
+      ? 'interacting with the code'
+      : 'editing';
+
+    const prompt = (
+      <div
+        className={promptClasses}
+        id={this.idGenerator('codeEditor')}
+        ref={(hint) => { this.editorHint = hint; }}
+        tabIndex="0"
+        role="button"
+        onClick={this.startEditing}
+        onKeyDown={this.onKeyDownHint}
+        data-test-subj="codeEditorHint"
+      >
+        <p className="kuiText kuiVerticalRhythmSmall">
+          Press Enter to start {activity}.
+        </p>
+
+        <p className="kuiText kuiVerticalRhythmSmall">
+          When you&rsquo;re done, press Escape to stop {activity}.
+        </p>
+      </div>
+    );
+
     return (
       <div
-        className="kuiCodeEditorWrapper"
+        className={classes}
         style={{ width, height }}
       >
-        <div
-          className={classes}
-          id={this.idGenerator('codeEditor')}
-          ref={(hint) => { this.editorHint = hint; }}
-          tabIndex="0"
-          role="button"
-          onClick={this.startEditing}
-          onKeyDown={this.onKeyDownHint}
-          data-test-subj="codeEditorHint"
-        >
-          <p className="kuiText kuiVerticalRhythmSmall">
-            Press Enter to start editing.
-          </p>
-
-          <p className="kuiText kuiVerticalRhythmSmall">
-            When you&rsquo;re done, press Escape to stop editing.
-          </p>
-        </div>
+        {prompt}
 
         <AceEditor
           ref={this.aceEditorRef}
           width={width}
           height={height}
+          onFocus={this.onFocusAce}
           onBlur={this.onBlurAce}
+          setOptions={options}
+          cursorStart={filteredCursorStart}
           {...rest}
         />
       </div>
@@ -105,4 +156,11 @@ KuiCodeEditor.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   onBlur: PropTypes.func,
+  isReadOnly: PropTypes.bool,
+  setOptions: PropTypes.object,
+  cursorStart: PropTypes.number,
+};
+
+KuiCodeEditor.defaultProps = {
+  setOptions: {},
 };
diff --git a/ui_framework/src/components/code_editor/code_editor.test.js b/ui_framework/src/components/code_editor/code_editor.test.js
index de9bd430d4b394..e204f4bf02edbc 100644
--- a/ui_framework/src/components/code_editor/code_editor.test.js
+++ b/ui_framework/src/components/code_editor/code_editor.test.js
@@ -14,53 +14,64 @@ jest.mock('../../services/accessibility/html_id_generator', () => ({
 }));
 
 describe('KuiCodeEditor', () => {
-  let element;
-
-  beforeEach(() => {
-    element = mount(<KuiCodeEditor/>);
-  });
-
   test('is rendered', () => {
-    const component = mount(<KuiCodeEditor {...requiredProps}/>);
+    const component = mount(<KuiCodeEditor {...requiredProps} />);
     expect(takeMountedSnapshot(component)).toMatchSnapshot();
   });
 
-  describe('hint element', () => {
-    test('should be tabable', () => {
-      expect(element.find('[data-test-subj="codeEditorHint"]').prop('tabIndex')).toBe('0');
+  describe('props', () => {
+    describe('isReadOnly', () => {
+      test(`renders alternate hint text`, () => {
+        const component = mount(<KuiCodeEditor isReadOnly />);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
     });
+  });
 
-    test('should be disabled when the ui ace box gains focus', () => {
-      const hint = element.find('[data-test-subj="codeEditorHint"]');
-      hint.simulate('keydown', { keyCode: keyCodes.ENTER });
-      expect(hint).toMatchSnapshot();
-    });
+  describe('behavior', () => {
+    let component;
 
-    test('should be enabled when the ui ace box loses focus', () => {
-      const hint = element.find('[data-test-subj="codeEditorHint"]');
-      hint.simulate('keydown', { keyCode: keyCodes.ENTER });
-      element.instance().onBlurAce();
-      expect(hint).toMatchSnapshot();
+    beforeEach(() => {
+      component = mount(<KuiCodeEditor/>);
     });
-  });
 
-  describe('interaction', () => {
-    test('bluring the ace textbox should call a passed onBlur prop', () => {
-      const blurSpy = sinon.spy();
-      const el = mount(<KuiCodeEditor onBlur={blurSpy}/>);
-      el.instance().onBlurAce();
-      expect(blurSpy.called).toBe(true);
+    describe('hint element', () => {
+      test('should be tabable', () => {
+        expect(component.find('[data-test-subj="codeEditorHint"]').prop('tabIndex')).toBe('0');
+      });
+
+      test('should be disabled when the ui ace box gains focus', () => {
+        const hint = component.find('[data-test-subj="codeEditorHint"]');
+        hint.simulate('keydown', { keyCode: keyCodes.ENTER });
+        expect(hint).toMatchSnapshot();
+      });
+
+      test('should be enabled when the ui ace box loses focus', () => {
+        const hint = component.find('[data-test-subj="codeEditorHint"]');
+        hint.simulate('keydown', { keyCode: keyCodes.ENTER });
+        component.instance().onBlurAce();
+        expect(hint).toMatchSnapshot();
+      });
     });
 
-    test('pressing escape in ace textbox will enable overlay', () => {
-      element.instance().onKeydownAce({
-        preventDefault: () => {},
-        stopPropagation: () => {},
-        keyCode: keyCodes.ESCAPE
+    describe('interaction', () => {
+      test('bluring the ace textbox should call a passed onBlur prop', () => {
+        const blurSpy = sinon.spy();
+        const el = mount(<KuiCodeEditor onBlur={blurSpy}/>);
+        el.instance().onBlurAce();
+        expect(blurSpy.called).toBe(true);
+      });
+
+      test('pressing escape in ace textbox will enable overlay', () => {
+        component.instance().onKeydownAce({
+          preventDefault: () => {},
+          stopPropagation: () => {},
+          keyCode: keyCodes.ESCAPE
+        });
+        expect(
+          component.find('[data-test-subj="codeEditorHint"]').matchesElement(document.activeElement)
+        ).toBe(true);
       });
-      expect(
-        element.find('[data-test-subj="codeEditorHint"]').matchesElement(document.activeElement)
-      ).toBe(true);
     });
   });
 });