From 7c0d4f85c3340371471a3297e73fccd495c3c5cd Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Wed, 10 Apr 2019 16:19:51 -0700
Subject: [PATCH] feat(ui): sync note editor text and preview scrolling

---
 CHANGELOG.md                                  |  5 +++
 ui/src/dashboards/components/NoteEditor.tsx   | 35 ++++++++++++++++---
 .../components/NoteEditorPreview.tsx          | 10 ++++--
 .../dashboards/components/NoteEditorText.tsx  | 20 +++++++++++
 4 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cdfe070b548..320cfd12407 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,10 +6,15 @@
 1. [13078](https://github.com/influxdata/influxdb/pull/13078): Add the option to create a Dashboard from a Template.
 1. [13161](https://github.com/influxdata/influxdb/pull/13161): Add the ability to add labels on variables
 1. [13171](https://github.com/influxdata/influxdb/pull/13171): Add switch organizations dropdown to home navigation menu item.
+1. [13173](https://github.com/influxdata/influxdb/pull/13173): Add create org to side nav
 
 ### Bug Fixes
+1. [13284](https://github.com/influxdata/influxdb/pull/13284): Update shift to timeShift in the flux functions side bar
 
 ### UI Improvements
+1. [13287](https://github.com/influxdata/influxdb/pull/13287): Update cursor to grab when hovering draggable areas
+1. [13311](https://github.com/influxdata/influxdb/pull/13311): Sync note editor text and preview scrolling
+1. [13249](https://github.com/influxdata/influxdb/pull/13249): Add the ability to create a bucket when creating an organization
 
 ## v2.0.0-alpha.7 [2019-03-28]
 
diff --git a/ui/src/dashboards/components/NoteEditor.tsx b/ui/src/dashboards/components/NoteEditor.tsx
index 0b722f6b564..d0790154c88 100644
--- a/ui/src/dashboards/components/NoteEditor.tsx
+++ b/ui/src/dashboards/components/NoteEditor.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
@@ -38,9 +38,16 @@ interface OwnProps {}
 
 type Props = StateProps & DispatchProps & OwnProps
 
-class NoteEditor extends PureComponent<Props> {
+interface State {
+  scrollTop: number
+}
+
+class NoteEditor extends PureComponent<Props, State> {
+  public state = {scrollTop: 0}
+
   public render() {
     const {note, onSetNote} = this.props
+    const {scrollTop} = this.state
 
     return (
       <div className="note-editor">
@@ -57,8 +64,17 @@ class NoteEditor extends PureComponent<Props> {
           {this.visibilityToggle}
         </div>
         <div className="note-editor--body">
-          <NoteEditorText note={note} onChangeNote={onSetNote} />
-          <NoteEditorPreview note={note} />
+          <NoteEditorText
+            note={note}
+            onChangeNote={onSetNote}
+            onScroll={this.handleEditorScroll}
+            scrollTop={scrollTop}
+          />
+          <NoteEditorPreview
+            note={note}
+            scrollTop={scrollTop}
+            onScroll={this.handlePreviewScroll}
+          />
         </div>
       </div>
     )
@@ -81,6 +97,17 @@ class NoteEditor extends PureComponent<Props> {
       </ComponentSpacer>
     )
   }
+
+  private handleEditorScroll = (scrollTop: number) => {
+    this.setState({scrollTop})
+  }
+
+  private handlePreviewScroll = (e: MouseEvent<HTMLElement>) => {
+    const target = e.target as HTMLElement
+    const {scrollTop} = target
+
+    this.setState({scrollTop})
+  }
 }
 
 const mstp = (state: AppState) => {
diff --git a/ui/src/dashboards/components/NoteEditorPreview.tsx b/ui/src/dashboards/components/NoteEditorPreview.tsx
index 2767d8516ff..aa5980413e2 100644
--- a/ui/src/dashboards/components/NoteEditorPreview.tsx
+++ b/ui/src/dashboards/components/NoteEditorPreview.tsx
@@ -1,16 +1,22 @@
-import React, {SFC} from 'react'
+import React, {SFC, MouseEvent} from 'react'
 import ReactMarkdown from 'react-markdown'
 
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 
 interface Props {
   note: string
+  scrollTop: number
+  onScroll: (e: MouseEvent) => void
 }
 
 const NoteEditorPreview: SFC<Props> = props => {
   return (
     <div className="note-editor--preview">
-      <FancyScrollbar className="note-editor--preview-scroll">
+      <FancyScrollbar
+        className="note-editor--preview-scroll"
+        scrollTop={props.scrollTop}
+        setScrollTop={props.onScroll}
+      >
         <div className="note-editor--markdown-container">
           <ReactMarkdown
             source={props.note}
diff --git a/ui/src/dashboards/components/NoteEditorText.tsx b/ui/src/dashboards/components/NoteEditorText.tsx
index a0dd445515c..9db5c4e580b 100644
--- a/ui/src/dashboards/components/NoteEditorText.tsx
+++ b/ui/src/dashboards/components/NoteEditorText.tsx
@@ -1,6 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {Controlled as ReactCodeMirror, IInstance} from 'react-codemirror2'
+import {ScrollInfo} from 'codemirror'
 
 // Utils
 import {humanizeNote} from 'src/dashboards/utils/notes'
@@ -22,9 +23,20 @@ const noOp = () => {}
 interface Props {
   note: string
   onChangeNote: (value: string) => void
+  onScroll: (scrollTop: number) => void
+  scrollTop: number
 }
 
 class NoteEditorText extends PureComponent<Props, {}> {
+  private editor: IInstance
+
+  public componentDidUpdate() {
+    const currentScrollTop = this.editor.getScrollInfo().top
+    if (this.props.scrollTop !== currentScrollTop) {
+      this.editor.scrollTo(0, this.props.scrollTop)
+    }
+  }
+
   public render() {
     const {note} = this.props
 
@@ -36,12 +48,14 @@ class NoteEditorText extends PureComponent<Props, {}> {
         onBeforeChange={this.handleChange}
         onTouchStart={noOp}
         editorDidMount={this.handleMount}
+        onScroll={this.handleScroll}
       />
     )
   }
 
   private handleMount = (instance: IInstance) => {
     instance.focus()
+    this.editor = instance
   }
 
   private handleChange = (_, __, note: string) => {
@@ -49,6 +63,12 @@ class NoteEditorText extends PureComponent<Props, {}> {
 
     onChangeNote(note)
   }
+
+  private handleScroll = (__: IInstance, scrollInfo: ScrollInfo) => {
+    const {onScroll} = this.props
+
+    onScroll(scrollInfo.top)
+  }
 }
 
 export default NoteEditorText