Move new note overlay to react-router

ui/src/dashboards/actions/notes.ts

@@ -12,37 +12,14 @@ import {createView} from 'src/shared/utils/view'
 import {GetState} from 'src/types/v2'
 import {NoteEditorMode, MarkdownView, ViewType} from 'src/types/v2/dashboards'
 import {NoteEditorState} from 'src/dashboards/reducers/notes'
+import {Dispatch} from 'redux-thunk'
 
 export type Action =
-  | OpenNoteEditorAction
   | CloseNoteEditorAction
   | SetIsPreviewingAction
   | ToggleShowNoteWhenEmptyAction
   | SetNoteAction
-
-interface OpenNoteEditorAction {
-  type: 'OPEN_NOTE_EDITOR'
-  payload: {initialState: Partial<NoteEditorState>}
-}
-
-export const openNoteEditor = (
-  initialState: Partial<NoteEditorState>
-): OpenNoteEditorAction => ({
-  type: 'OPEN_NOTE_EDITOR',
-  payload: {initialState},
-})
-
-export const addNote = (): OpenNoteEditorAction => ({
-  type: 'OPEN_NOTE_EDITOR',
-  payload: {
-    initialState: {
-      mode: NoteEditorMode.Adding,
-      viewID: null,
-      toggleVisible: false,
-      note: '',
-    },
-  },
-})
+  | SetNoteStateAction
 
 interface CloseNoteEditorAction {
   type: 'CLOSE_NOTE_EDITOR'
@@ -83,7 +60,7 @@ export const setNote = (note: string): SetNoteAction => ({
 })
 
 export const createNoteCell = (dashboardID: string) => async (
-  dispatch,
+  dispatch: Dispatch<Action>,
   getState: GetState
 ) => {
   const dashboard = getState().dashboards.find(d => d.id === dashboardID)
@@ -100,13 +77,60 @@ export const createNoteCell = (dashboardID: string) => async (
   return dispatch(createCellWithView(dashboard, view))
 }
 
-export const updateViewNote = () => async (dispatch, getState: GetState) => {
+export interface SetNoteStateAction {
+  type: 'SET_NOTE_STATE'
+  payload: Partial<NoteEditorState>
+}
+
+export const setNoteState = (
+  noteState: Partial<NoteEditorState>
+): SetNoteStateAction => ({
+  type: 'SET_NOTE_STATE',
+  payload: noteState,
+})
+
+export const loadNote = (id: string) => async (
+  dispatch: Dispatch<Action>,
+  getState: GetState
+) => {
+  const {
+    views: {views},
+  } = getState()
+  const currentViewState = views[id]
+
+  if (!currentViewState) {
+    return
+  }
+
+  const view = currentViewState.view
+
+  const note: string = get(view, 'properties.note', '')
+  const showNoteWhenEmpty: boolean = get(
+    view,
+    'properties.showNoteWhenEmpty',
+    false
+  )
+
+  const initialState = {
+    viewID: view.id,
+    note,
+    showNoteWhenEmpty,
+    mode: NoteEditorMode.Editing,
+  }
+
+  dispatch(setNoteState(initialState))
+}
+
+export const updateViewNote = (id: string) => async (
+  dispatch: Dispatch<Action>,
+  getState: GetState
+) => {
   const state = getState()
-  const {note, showNoteWhenEmpty, viewID} = state.noteEditor
-  const view: any = get(state, `views.${viewID}.view`)
+  const {note, showNoteWhenEmpty} = state.noteEditor
+  const view: any = get(state, `views.views.${id}.view`)
 
   if (!view) {
-    throw new Error(`could not find view with id "${viewID}"`)
+    throw new Error(`could not find view with id "${id}"`)
   }
 
   if (isUndefined(view.properties.note)) {

ui/src/dashboards/components/Dashboard.tsx

@@ -24,6 +24,7 @@ interface Props {
   setScrollTop: (e: MouseEvent<HTMLElement>) => void
   onEditView: (cellID: string) => void
   onAddCell: () => void
+  onEditNote: (id: string) => void
 }
 
 @ErrorHandling
@@ -42,6 +43,7 @@ class DashboardComponent extends PureComponent<Props> {
       inPresentationMode,
       setScrollTop,
       onAddCell,
+      onEditNote,
     } = this.props
 
     return (
@@ -63,6 +65,7 @@ class DashboardComponent extends PureComponent<Props> {
               onDeleteCell={onDeleteCell}
               onPositionChange={onPositionChange}
               onEditView={onEditView}
+              onEditNote={onEditNote}
             />
           ) : (
             <DashboardEmpty onAddCell={onAddCell} />

ui/src/dashboards/components/DashboardHeader.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {Component} from 'react'
-import {connect} from 'react-redux'
 
 // Components
 import {Page} from 'src/pageLayout'
@@ -21,9 +20,6 @@ import {
   DASHBOARD_NAME_MAX_LENGTH,
 } from 'src/dashboards/constants/index'
 
-// Actions
-import {addNote} from 'src/dashboards/actions/notes'
-
 // Types
 import * as AppActions from 'src/types/actions/app'
 import * as QueriesModels from 'src/types/queries'
@@ -33,7 +29,7 @@ interface DefaultProps {
   zoomedTimeRange: QueriesModels.TimeRange
 }
 
-interface OwnProps extends DefaultProps {
+interface Props extends DefaultProps {
   activeDashboard: string
   dashboard: Dashboard
   timeRange: QueriesModels.TimeRange
@@ -48,15 +44,10 @@ interface OwnProps extends DefaultProps {
   toggleVariablesControlBar: () => void
   isShowingVariablesControlBar: boolean
   isHidden: boolean
+  onAddNote: () => void
 }
 
-interface DispatchProps {
-  onAddNote: typeof addNote
-}
-
-type Props = OwnProps & DispatchProps
-
-class DashboardHeader extends Component<Props> {
+export default class DashboardHeader extends Component<Props> {
   public static defaultProps: DefaultProps = {
     zoomedTimeRange: {
       upper: null,
@@ -73,7 +64,6 @@ class DashboardHeader extends Component<Props> {
       timeRange: {upper, lower},
       zoomedTimeRange: {upper: zoomedUpper, lower: zoomedLower},
       isHidden,
-      onAddNote,
       toggleVariablesControlBar,
       isShowingVariablesControlBar,
       onAddCell,
@@ -103,7 +93,7 @@ class DashboardHeader extends Component<Props> {
           <Button
             icon={IconFont.TextBlock}
             text="Add Note"
-            onClick={onAddNote}
+            onClick={this.handleAddNote}
           />
           <AutoRefreshDropdown
             onChoose={handleChooseAutoRefresh}
@@ -137,16 +127,11 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
+  private handleAddNote = () => {
+    this.props.onAddNote()
+  }
+
   private handleClickPresentationButton = (): void => {
     this.props.handleClickPresentationButton()
   }
 }
-
-const mdtp = {
-  onAddNote: addNote,
-}
-
-export default connect<{}, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(DashboardHeader)

ui/src/dashboards/components/DashboardPage.tsx

@@ -11,7 +11,6 @@ import DashboardHeader from 'src/dashboards/components/DashboardHeader'
 import DashboardComponent from 'src/dashboards/components/Dashboard'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
 import {HoverTimeProvider} from 'src/dashboards/utils/hoverTime'
-import NoteEditorContainer from 'src/dashboards/components/NoteEditorContainer'
 import VariablesControlBar from 'src/dashboards/components/variablesControlBar/VariablesControlBar'
 
 // Actions
@@ -164,6 +163,7 @@ class DashboardPage extends Component<Props, State> {
             autoRefresh={autoRefresh}
             isHidden={inPresentationMode}
             onAddCell={this.handleAddCell}
+            onAddNote={this.showNoteOverlay}
             onManualRefresh={onManualRefresh}
             zoomedTimeRange={zoomedTimeRange}
             onRenameDashboard={this.handleRenameDashboard}
@@ -193,11 +193,11 @@ class DashboardPage extends Component<Props, State> {
               onDeleteCell={this.handleDeleteDashboardCell}
               onEditView={this.handleEditView}
               onAddCell={this.handleAddCell}
+              onEditNote={this.showNoteOverlay}
             />
           )}
           {children}
         </HoverTimeProvider>
-        <NoteEditorContainer />
       </Page>
     )
   }
@@ -240,6 +240,14 @@ class DashboardPage extends Component<Props, State> {
     this.showVEO()
   }
 
+  private showNoteOverlay = async (id?: string): Promise<void> => {
+    if (id) {
+      this.props.router.push(`${this.props.location.pathname}/notes/${id}/edit`)
+    } else {
+      this.props.router.push(`${this.props.location.pathname}/notes/new`)
+    }
+  }
+
   private handleEditView = (cellID: string): void => {
     this.showVEO(cellID)
   }