Improve implementation of overlay wrapper

ui/src/flux/components/FluxOverlay.tsx

@@ -18,7 +18,7 @@ interface Props {
   mode: string
   source?: Source
   service?: Service
-  onDismiss?: () => void
+  onDismiss: () => void
   notify: (message: Notification) => void
   createService: CreateServiceAsync
   updateService: UpdateServiceAsync

ui/src/flux/containers/CheckServices.tsx

@@ -27,7 +27,22 @@ interface Props {
   links: Links
 }
 
-export class CheckServices extends PureComponent<Props & WithRouterProps> {
+interface State {
+  showOverlay: boolean
+}
+
+export class CheckServices extends PureComponent<
+  Props & WithRouterProps,
+  State
+> {
+  constructor(props: Props & WithRouterProps) {
+    super(props)
+
+    this.state = {
+      showOverlay: false,
+    }
+  }
+
   public async componentDidMount() {
     const source = this.props.sources.find(
       s => s.id === this.props.params.sourceID
@@ -38,6 +53,10 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
     }
 
     await this.props.fetchServicesAsync(source)
+
+    if (!this.props.services.length) {
+      this.setState({showOverlay: true})
+    }
   }
 
   public render() {
@@ -69,14 +88,22 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
   }
 
   private get renderOverlay(): JSX.Element {
-    const {services} = this.props
+    const {showOverlay} = this.state
 
     return (
-      <OverlayTechnology visible={!services.length}>
-        <FluxOverlay mode="new" source={this.source} />
+      <OverlayTechnology visible={showOverlay}>
+        <FluxOverlay
+          mode="new"
+          source={this.source}
+          onDismiss={this.handleDismissOverlay}
+        />
       </OverlayTechnology>
     )
   }
+
+  private handleDismissOverlay = (): void => {
+    this.setState({showOverlay: false})
+  }
 }
 
 const mdtp = {