Tweak OverlayTechnology lifecycle and fix test

ui/src/shared/components/OverlayTechnology.tsx

@@ -12,6 +12,14 @@ interface State {
 
 @ErrorHandling
 class OverlayTechnology extends Component<Props, State> {
+  public static getDerivedStateFromProps(props) {
+    if (props.visible) {
+      return {showChildren: true}
+    }
+
+    return {}
+  }
+
   private animationTimer: number
 
   constructor(props: Props) {
@@ -23,17 +31,10 @@ class OverlayTechnology extends Component<Props, State> {
   }
 
   public componentDidUpdate(prevProps) {
-    if (prevProps.visible === true && this.props.visible === false) {
+    if (prevProps.visible && !this.props.visible) {
+      clearTimeout(this.animationTimer)
       this.animationTimer = window.setTimeout(this.hideChildren, 300)
-      return
     }
-
-    if (prevProps.visible === false && this.props.visible === true) {
-      this.showChildren()
-      return
-    }
-
-    return
   }
 
   public render() {
@@ -65,13 +66,8 @@ class OverlayTechnology extends Component<Props, State> {
     return `overlay-tech ${visible ? 'show' : ''}`
   }
 
-  private showChildren = (): void => {
-    this.setState({showChildren: true})
-  }
-
   private hideChildren = (): void => {
     this.setState({showChildren: false})
-    clearTimeout(this.animationTimer)
   }
 }
 

ui/test/tempVars/components/TemplateControlDropdown.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {shallow} from 'enzyme'
 
-import SimpleOverlayTechnology from 'src/shared/components/SimpleOverlayTechnology'
+import OverlayTechnology from 'src/shared/components/OverlayTechnology'
 import TemplateVariableEditor from 'src/tempVars/components/TemplateVariableEditor'
 import TemplateControlDropdown from 'src/tempVars/components/TemplateControlDropdown'
 import {source} from 'test/resources'
@@ -33,14 +33,24 @@ const defaultProps = {
 
 describe('TemplateControlDropdown', () => {
   it('should show a TemplateVariableEditor overlay when the settings icon is clicked', () => {
-    const wrapper = shallow(<TemplateControlDropdown {...defaultProps} />)
+    const wrapper = shallow(<TemplateControlDropdown {...defaultProps} />, {
+      context: {
+        store: {},
+      },
+    })
 
-    expect(wrapper.find(SimpleOverlayTechnology)).toHaveLength(0)
+    const children = wrapper
+      .find(OverlayTechnology)
+      .dive()
+      .find("[data-test='overlay-children']")
+      .children()
+
+    expect(children).toHaveLength(0)
 
     wrapper.find("[data-test='edit']").simulate('click')
 
     const elements = wrapper
-      .find(SimpleOverlayTechnology)
+      .find(OverlayTechnology)
       .dive()
       .find(TemplateVariableEditor)