Refactor overlay technology to not use redux store

ui/src/App.tsx

@@ -2,7 +2,6 @@ import React, {SFC, ReactChildren} from 'react'
 
 import SideNav from 'src/side_nav'
 import Notifications from 'src/shared/components/Notifications'
-import Overlay from 'src/shared/components/OverlayTechnology'
 
 interface Props {
   children: ReactChildren
@@ -10,7 +9,6 @@ interface Props {
 
 const App: SFC<Props> = ({children}) => (
   <div className="chronograf-root">
-    <Overlay />
     <Notifications />
     <SideNav />
     {children}

ui/src/shared/actions/overlayTechnology.ts

@@ -1,34 +0,0 @@
-import {ReactElement} from 'react'
-
-type OverlayNodeType = ReactElement<any>
-
-interface Options {
-  dismissOnClickOutside?: boolean
-  dismissOnEscape?: boolean
-  transitionTime?: number
-}
-
-export type ShowOverlayActionCreator = (
-  OverlayNode: OverlayNodeType,
-  options: Options
-) => ShowOverlayAction
-
-interface ShowOverlayAction {
-  type: 'SHOW_OVERLAY'
-  payload: {
-    OverlayNode
-    options
-  }
-}
-
-export const showOverlay = (
-  OverlayNode: OverlayNodeType,
-  options: Options
-): ShowOverlayAction => ({
-  type: 'SHOW_OVERLAY',
-  payload: {OverlayNode, options},
-})
-
-export const dismissOverlay = () => ({
-  type: 'DISMISS_OVERLAY',
-})

ui/src/shared/components/OverlayTechnology.tsx

@@ -1,104 +1,74 @@
-import React, {PureComponent, Component} from 'react'
-import {connect} from 'react-redux'
+import React, {Component} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-import {dismissOverlay} from 'src/shared/actions/overlayTechnology'
-
 interface Props {
-  OverlayNode?: Component<any>
-  dismissOnClickOutside?: boolean
-  dismissOnEscape?: boolean
-  transitionTime?: number
-  handleDismissOverlay: () => void
-}
-
-interface State {
+  children: JSX.Element
   visible: boolean
 }
 
-export const OverlayContext = React.createContext()
+interface State {
+  showChildren: boolean
+}
 
 @ErrorHandling
-class Overlay extends PureComponent<Props, State> {
-  public static defaultProps: Partial<Props> = {
-    dismissOnClickOutside: false,
-    dismissOnEscape: false,
-    transitionTime: 300,
-  }
-
+class OverlayTechnology extends Component<Props, State> {
   private animationTimer: number
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
 
     this.state = {
-      visible: false,
+      showChildren: false,
     }
   }
 
   public componentDidUpdate(prevProps) {
-    if (prevProps.OverlayNode === null && this.props.OverlayNode) {
-      return this.setState({visible: true})
+    if (prevProps.visible === true && this.props.visible === false) {
+      this.animationTimer = window.setTimeout(this.hideChildren, 300)
+      return
     }
+
+    if (prevProps.visible === false && this.props.visible === true) {
+      this.showChildren()
+      return
+    }
+
+    return
   }
 
   public render() {
-    const {OverlayNode} = this.props
-
     return (
-      <OverlayContext.Provider
-        value={{
-          onDismissOverlay: this.handleAnimateDismiss,
-        }}
-      >
-        <div className={this.overlayClass}>
-          <div className="overlay--dialog">{OverlayNode}</div>
-          <div className="overlay--mask" onClick={this.handleClickOutside} />
-        </div>
-      </OverlayContext.Provider>
+      <div className={this.overlayClass}>
+        {this.childContainer}
+        <div className="overlay--mask" />
+      </div>
     )
   }
 
+  private get childContainer(): JSX.Element {
+    const {children} = this.props
+    const {showChildren} = this.state
+
+    if (showChildren) {
+      return <div className="overlay--dialog">{children}</div>
+    }
+
+    return <div className="overlay--dialog" />
+  }
+
   private get overlayClass(): string {
-    const {visible} = this.state
+    const {visible} = this.props
     return `overlay-tech ${visible ? 'show' : ''}`
   }
 
-  public handleClickOutside = () => {
-    const {handleDismissOverlay, dismissOnClickOutside} = this.props
-
-    if (dismissOnClickOutside) {
-      handleDismissOverlay()
-    }
+  private showChildren = (): void => {
+    this.setState({showChildren: true})
   }
 
-  public handleAnimateDismiss = () => {
-    const {transitionTime} = this.props
-    this.setState({visible: false})
-    this.animationTimer = window.setTimeout(this.handleDismiss, transitionTime)
-  }
-
-  public handleDismiss = () => {
-    const {handleDismissOverlay} = this.props
-    handleDismissOverlay()
+  private hideChildren = (): void => {
+    this.setState({showChildren: false})
     clearTimeout(this.animationTimer)
   }
 }
 
-const mapStateToProps = ({
-  overlayTechnology: {
-    OverlayNode,
-    options: {dismissOnClickOutside, dismissOnEscape, transitionTime},
-  },
-}) => ({
-  OverlayNode,
-  dismissOnClickOutside,
-  dismissOnEscape,
-  transitionTime,
-})
-
-const mapDispatchToProps = {
-  handleDismissOverlay: dismissOverlay,
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Overlay)
+export default OverlayTechnology

ui/src/shared/reducers/overlayTechnology.ts

@@ -1,29 +0,0 @@
-const initialState = {
-  options: {
-    dismissOnClickOutside: false,
-    dismissOnEscape: false,
-    transitionTime: 300,
-  },
-  OverlayNode: null,
-}
-
-export default function overlayTechnology(state = initialState, action) {
-  switch (action.type) {
-    case 'SHOW_OVERLAY': {
-      const {OverlayNode, options} = action.payload
-
-      return {...state, OverlayNode, options}
-    }
-
-    case 'DISMISS_OVERLAY': {
-      const {options} = initialState
-      return {
-        ...state,
-        OverlayNode: null,
-        options,
-      }
-    }
-  }
-
-  return state
-}

ui/src/store/configureStore.js

@@ -14,7 +14,6 @@ import adminReducers from 'src/admin/reducers'
 import kapacitorReducers from 'src/kapacitor/reducers'
 import dashboardUI from 'src/dashboards/reducers/ui'
 import cellEditorOverlay from 'src/dashboards/reducers/cellEditorOverlay'
-import overlayTechnology from 'src/shared/reducers/overlayTechnology'
 import dashTimeV1 from 'src/dashboards/reducers/dashTimeV1'
 import persistStateEnhancer from './persistStateEnhancer'
 import servicesReducer from 'src/shared/reducers/services'
@@ -28,7 +27,6 @@ const rootReducer = combineReducers({
   ...adminReducers,
   dashboardUI,
   cellEditorOverlay,
-  overlayTechnology,
   dashTimeV1,
   logs: logsReducer,
   routing: routerReducer,