feat(telegrafPage): use OverlayController to open /new (#5644)

Author: blegesse-w

src/buckets/components/BucketCardActions.tsx

@@ -20,6 +20,7 @@ import {
   setDataLoadersType,
   setLocationOnDismiss,
 } from 'src/dataLoaders/actions/dataLoaders'
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 import {event} from 'src/cloud/utils/reporting'
 
 // Types
@@ -48,6 +49,8 @@ const BucketCardActions: FC<Props> = ({
   onSetDataLoadersBucket,
   onSetDataLoadersType,
   setLocationOnDismiss,
+  showOverlay,
+  dismissOverlay,
 }) => {
   const history = useHistory()
   const {orgID} = useParams<{orgID: string}>()
@@ -80,7 +83,7 @@ const BucketCardActions: FC<Props> = ({
 
     onSetDataLoadersType(DataLoaderType.Streaming)
     setLocationOnDismiss(`/orgs/${orgID}/load-data/buckets`)
-    history.push(`/orgs/${orgID}/load-data/telegrafs/new`)
+    showOverlay('telegraf-wizard', null, dismissOverlay)
   }
 
   const handleAddLineProtocol = () => {
@@ -158,6 +161,8 @@ const mdtp = {
   onSetDataLoadersBucket: setBucketInfo,
   onSetDataLoadersType: setDataLoadersType,
   setLocationOnDismiss,
+  showOverlay,
+  dismissOverlay,
 }
 
 const connector = connect(null, mdtp)

src/dataLoaders/components/collectorsWizard/TelegrafUIRefreshWizard.tsx

@@ -47,15 +47,18 @@ import {isSystemBucket} from 'src/buckets/constants'
 import {getBucketOverlayWidth} from 'src/buckets/constants'
 const TELEGRAF_UI_REFRESH_OVERLAY_DEFAULT_WIDTH = 1200
 
+interface OwnProps {
+  onClose: () => void
+}
+
 type ReduxProps = ConnectedProps<typeof connector>
-type Props = ReduxProps & RouteComponentProps<{orgID: string}>
+type Props = OwnProps & ReduxProps & RouteComponentProps<{orgID: string}>
 
 @ErrorHandling
 class TelegrafUIRefreshWizard extends PureComponent<Props> {
   public state = {
     pluginConfig: '',
     isValidConfiguration: false,
-    isVisible: true,
   }
 
   public componentDidMount() {
@@ -80,31 +83,35 @@ class TelegrafUIRefreshWizard extends PureComponent<Props> {
     }
 
     return (
-      <Overlay visible={this.state.isVisible}>
-        <Overlay.Container maxWidth={maxWidth}>
-          <Overlay.Header
-            title="Create a Telegraf Configuration"
-            onDismiss={this.handleDismiss}
-          />
-          <Overlay.Body className={overlayBodyClassName}>
-            <TelegrafUIRefreshStepSwitcher stepProps={this.stepProps} />
-          </Overlay.Body>
-          <Footer {...this.stepProps} />
-        </Overlay.Container>
-      </Overlay>
+      <Overlay.Container maxWidth={maxWidth}>
+        <Overlay.Header
+          title="Create a Telegraf Configuration"
+          onDismiss={this.handleDismiss}
+        />
+        <Overlay.Body className={overlayBodyClassName}>
+          <TelegrafUIRefreshStepSwitcher stepProps={this.stepProps} />
+        </Overlay.Body>
+        <Footer {...this.stepProps} />
+      </Overlay.Container>
     )
   }
 
   private handleDismiss = () => {
-    const {history, locationOnDismiss, org} = this.props
-    const {clearDataLoaders, onClearSteps} = this.props
+    const {
+      clearDataLoaders,
+      onClearSteps,
+      onClose,
+      history,
+      locationOnDismiss,
+    } = this.props
     clearDataLoaders()
     onClearSteps()
-    this.setState({isVisible: false})
-    const location = locationOnDismiss
-      ? locationOnDismiss
-      : `/orgs/${org.id}/load-data/telegrafs`
-    history.push(location)
+    if (locationOnDismiss) {
+      onClose()
+      history.push(locationOnDismiss)
+    } else {
+      onClose()
+    }
   }
 
   private handleSetIsValidConfiguration = (isValid: boolean) => {

src/dataLoaders/components/collectorsWizard/verify/VerifyCollectorsStep.tsx

@@ -83,11 +83,17 @@ export class VerifyCollectorStep extends PureComponent<Props> {
     const {
       match: {
         params: {orgID},
+        url,
       },
+      onExit,
       onClearDataLoaders,
     } = this.props
     onClearDataLoaders()
-    this.props.history.push(`/orgs/${orgID}/load-data/telegrafs`)
+    if (url.includes('telegraf-plugins')) {
+      this.props.history.push(`/orgs/${orgID}/load-data/telegrafs`)
+    } else {
+      onExit()
+    }
   }
 }
 

src/overlays/components/OverlayController.tsx

@@ -19,6 +19,7 @@ import AllAccessTokenOverlay from 'src/authorizations/components/AllAccessTokenO
 import TelegrafConfigOverlay from 'src/telegrafs/components/TelegrafConfigOverlay'
 import TelegrafOutputOverlay from 'src/telegrafs/components/TelegrafOutputOverlay'
 import TelegrafInstructionsOverlay from 'src/telegrafs/components/TelegrafInstructionsOverlay'
+import TelegrafUIRefreshWizard from 'src/dataLoaders/components/collectorsWizard/TelegrafUIRefreshWizard'
 import OrgSwitcherOverlay from 'src/pageLayout/components/OrgSwitcherOverlay'
 import CreateBucketOverlay from 'src/buckets/components/createBucketForm/CreateBucketOverlay'
 import AssetLimitOverlay from 'src/cloud/components/AssetLimitOverlay'
@@ -101,6 +102,9 @@ export const OverlayController: FunctionComponent = () => {
           <TelegrafInstructionsOverlay onClose={onClose} />
         )
         break
+      case 'telegraf-wizard':
+        activeOverlay.current = <TelegrafUIRefreshWizard onClose={onClose} />
+        break
       case 'switch-organizations':
         activeOverlay.current = <OrgSwitcherOverlay onClose={onClose} />
         break

src/overlays/components/index.tsx

@@ -59,6 +59,13 @@ export const TelegrafInstructionsOverlay = RouteOverlay(
     history.push(`/orgs/${params.orgID}/load-data/telegrafs`)
   }
 )
+export const TelegrafUIRefreshWizard = RouteOverlay(
+  OverlayHandler,
+  'telegraf-wizard',
+  (history, params) => {
+    history.push(`/orgs/${params.orgID}/load-data/telegrafs`)
+  }
+)
 
 export const AddAnnotationDEOverlay = RouteOverlay(
   OverlayHandler,

src/overlays/reducers/overlays.ts

@@ -16,6 +16,7 @@ export type OverlayID =
   | 'telegraf-config'
   | 'telegraf-output'
   | 'telegraf-instructions'
+  | 'telegraf-wizard'
   | 'switch-organizations'
   | 'create-bucket'
   | 'asset-limit'

src/telegrafs/components/Collectors.tsx

@@ -194,14 +194,8 @@ export class Collectors extends PureComponent<Props, State> {
   }
 
   private handleAddCollector = () => {
-    const {
-      history,
-      match: {
-        params: {orgID},
-      },
-    } = this.props
-
-    history.push(`/orgs/${orgID}/load-data/telegrafs/new`)
+    const {showOverlay, dismissOverlay} = this.props
+    showOverlay('telegraf-wizard', null, dismissOverlay)
     event('load_data.telegrafs.create_new_configuration.clicked')
   }
 

src/telegrafs/containers/TelegrafsPage.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {Route, Switch} from 'react-router-dom'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -9,20 +8,13 @@ import LoadDataHeader from 'src/settings/components/LoadDataHeader'
 import Collectors from 'src/telegrafs/components/Collectors'
 import GetResources from 'src/resources/components/GetResources'
 import LimitChecker from 'src/cloud/components/LimitChecker'
-import TelegrafUIRefreshWizard from 'src/dataLoaders/components/collectorsWizard/TelegrafUIRefreshWizard'
 import {Page} from '@influxdata/clockface'
 
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 
 // Types
 import {ResourceType} from 'src/types'
-
-// Constant
-import {ORGS, ORG_ID, TELEGRAFS} from 'src/shared/constants/routes'
-
-const telegrafsPath = `/${ORGS}/${ORG_ID}/load-data/${TELEGRAFS}`
-
 @ErrorHandling
 class TelegrafsPage extends PureComponent {
   public render() {
@@ -40,12 +32,6 @@ class TelegrafsPage extends PureComponent {
             </LoadDataTabbedPage>
           </LimitChecker>
         </Page>
-        <Switch>
-          <Route
-            path={`${telegrafsPath}/new`}
-            component={TelegrafUIRefreshWizard}
-          />
-        </Switch>
       </>
     )
   }