From c3d823e5455efbce98a139d8335ff1c95551a3cd Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 30 Apr 2019 12:41:39 -0700
Subject: [PATCH] fix: notes covered by adjacent cells (#13717)

* fix(dashboards): notes being hiddent by adjascent cells

* chore(portals): be the change
---
 ui/src/App.tsx                                            | 6 ++++--
 ui/src/{shared/components => portals}/LegendPortal.tsx    | 0
 ui/src/portals/NotesPortal.tsx                            | 7 +++++++
 ui/src/{shared/components => portals}/TooltipPortal.tsx   | 0
 ui/src/shared/components/BoxTooltip.tsx                   | 2 +-
 ui/src/shared/components/HistogramTooltip.tsx             | 2 +-
 ui/src/shared/components/Legend.tsx                       | 2 +-
 ui/src/shared/components/cells/CellHeaderNoteTooltip.scss | 5 ++++-
 ui/src/shared/components/cells/CellHeaderNoteTooltip.tsx  | 8 ++++----
 ui/src/style/_variables.scss                              | 1 +
 10 files changed, 23 insertions(+), 10 deletions(-)
 rename ui/src/{shared/components => portals}/LegendPortal.tsx (100%)
 create mode 100644 ui/src/portals/NotesPortal.tsx
 rename ui/src/{shared/components => portals}/TooltipPortal.tsx (100%)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 9a6b2b628f..0edeaa819f 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -2,8 +2,9 @@ import React, {SFC, ReactChildren} from 'react'
 
 import RightClickLayer from 'src/clockface/components/right_click_menu/RightClickLayer'
 import Nav from 'src/pageLayout'
-import LegendPortal from 'src/shared/components/LegendPortal'
-import TooltipPortal from 'src/shared/components/TooltipPortal'
+import LegendPortal from 'src/portals/LegendPortal'
+import TooltipPortal from 'src/portals/TooltipPortal'
+import NotesPortal from 'src/portals/NotesPortal'
 import Notifications from 'src/shared/containers/Notifications'
 
 interface Props {
@@ -16,6 +17,7 @@ const App: SFC<Props> = ({children}) => (
     <Nav />
     <LegendPortal />
     <TooltipPortal />
+    <NotesPortal />
     {children}
   </Notifications>
 )
diff --git a/ui/src/shared/components/LegendPortal.tsx b/ui/src/portals/LegendPortal.tsx
similarity index 100%
rename from ui/src/shared/components/LegendPortal.tsx
rename to ui/src/portals/LegendPortal.tsx
diff --git a/ui/src/portals/NotesPortal.tsx b/ui/src/portals/NotesPortal.tsx
new file mode 100644
index 0000000000..07fd782061
--- /dev/null
+++ b/ui/src/portals/NotesPortal.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const NOTES_PORTAL_ID = 'notes-portal'
+
+export default function NotesPortal() {
+  return <div id={NOTES_PORTAL_ID} />
+}
diff --git a/ui/src/shared/components/TooltipPortal.tsx b/ui/src/portals/TooltipPortal.tsx
similarity index 100%
rename from ui/src/shared/components/TooltipPortal.tsx
rename to ui/src/portals/TooltipPortal.tsx
diff --git a/ui/src/shared/components/BoxTooltip.tsx b/ui/src/shared/components/BoxTooltip.tsx
index 3235e19c31..ee9a3f20f6 100644
--- a/ui/src/shared/components/BoxTooltip.tsx
+++ b/ui/src/shared/components/BoxTooltip.tsx
@@ -3,7 +3,7 @@ import React, {useRef, useLayoutEffect, FunctionComponent} from 'react'
 import {createPortal} from 'react-dom'
 
 // Constants
-import {TOOLTIP_PORTAL_ID} from 'src/shared/components/TooltipPortal'
+import {TOOLTIP_PORTAL_ID} from 'src/portals/TooltipPortal'
 
 interface Props {
   triggerRect: DOMRect
diff --git a/ui/src/shared/components/HistogramTooltip.tsx b/ui/src/shared/components/HistogramTooltip.tsx
index cd9a28c966..57f131ef75 100644
--- a/ui/src/shared/components/HistogramTooltip.tsx
+++ b/ui/src/shared/components/HistogramTooltip.tsx
@@ -4,7 +4,7 @@ import {uniq, flatten} from 'lodash'
 import {HistogramTooltipProps, useTooltipStyle} from '@influxdata/vis'
 import {format} from 'd3-format'
 
-import {TOOLTIP_PORTAL_ID} from 'src/shared/components/TooltipPortal'
+import {TOOLTIP_PORTAL_ID} from 'src/portals/TooltipPortal'
 
 const formatLarge = format('.4~s')
 const formatSmall = format('.4~g')
diff --git a/ui/src/shared/components/Legend.tsx b/ui/src/shared/components/Legend.tsx
index 9b837cfd14..093a0d078b 100644
--- a/ui/src/shared/components/Legend.tsx
+++ b/ui/src/shared/components/Legend.tsx
@@ -8,7 +8,7 @@ import {uniq, flatten, isNumber} from 'lodash'
 import DapperScrollbars from 'src/shared/components/dapperScrollbars/DapperScrollbars'
 
 // Constants
-import {LEGEND_PORTAL_ID} from 'src/shared/components/LegendPortal'
+import {LEGEND_PORTAL_ID} from 'src/portals/LegendPortal'
 import {DEFAULT_TIME_FORMAT} from 'src/shared/constants'
 
 // Types
diff --git a/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss b/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss
index b0041f9376..97e454d584 100644
--- a/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss
+++ b/ui/src/shared/components/cells/CellHeaderNoteTooltip.scss
@@ -1,8 +1,11 @@
 @import "src/style/modules";
 
+#notes-portal {
+  z-index: $z--notes-portal;
+}
+
 .cell-header-note-tooltip {
   position: fixed;
-  z-index: 3;
 }
 
 .cell-header-note-tooltip--content {
diff --git a/ui/src/shared/components/cells/CellHeaderNoteTooltip.tsx b/ui/src/shared/components/cells/CellHeaderNoteTooltip.tsx
index fed2528976..8906cf90a3 100644
--- a/ui/src/shared/components/cells/CellHeaderNoteTooltip.tsx
+++ b/ui/src/shared/components/cells/CellHeaderNoteTooltip.tsx
@@ -3,6 +3,9 @@ import React, {SFC, CSSProperties} from 'react'
 import {createPortal} from 'react-dom'
 import ReactMarkdown from 'react-markdown'
 
+// Constants
+import {NOTES_PORTAL_ID} from 'src/portals/NotesPortal'
+
 interface Props {
   note: string
   containerStyle: CSSProperties
@@ -29,10 +32,7 @@ const CellHeaderNoteTooltip: SFC<Props> = props => {
     </div>
   )
 
-  return createPortal(
-    content,
-    document.querySelector('.cell-header-note-tooltip-container')
-  )
+  return createPortal(content, document.querySelector(`#${NOTES_PORTAL_ID}`))
 }
 
 export default CellHeaderNoteTooltip
diff --git a/ui/src/style/_variables.scss b/ui/src/style/_variables.scss
index 17f20634c7..720d415fdf 100644
--- a/ui/src/style/_variables.scss
+++ b/ui/src/style/_variables.scss
@@ -31,6 +31,7 @@ $z--cell-header: 2;
 $z--cell-context: 3;
 $z--cell-context-hover: 100;
 $z--cell-resizer: 5;
+$z--notes-portal: 9999;
 $z--draggable-resizer-mask: 9999;
 
 /* Motifs */