fix: notes covered by adjacent cells (#13717)

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

* chore(portals): be the change

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>
 )

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} />
+}

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

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')

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

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 {

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

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 */