feat(telegrafPage): user OverlayController to open /view (#5641)

Author: blegesse-w

src/telegrafs/components/CollectorCard.tsx

@@ -190,8 +190,8 @@ class CollectorRow extends PureComponent<
   }
 
   private handleOpenConfig = (): void => {
-    const {collector, history, org} = this.props
-    history.push(`/orgs/${org.id}/load-data/telegrafs/${collector.id}/view`)
+    const {collector, showOverlay, dismissOverlay} = this.props
+    showOverlay('telegraf-config', {collectorId: collector.id}, dismissOverlay)
   }
 
   private cloneTelegraf = (): void => {

src/telegrafs/components/TelegrafConfig.tsx

@@ -20,7 +20,6 @@ interface Props {
 export class TelegrafConfig extends PureComponent<Props> {
   public render() {
     const {config, onChangeConfig} = this.props
-
     return (
       <Suspense
         fallback={

src/telegrafs/components/TelegrafConfigOverlayForm.tsx

@@ -1,7 +1,6 @@
 // Libraries
 import React, {FC, useState, useContext} from 'react'
 import {useSelector, useDispatch} from 'react-redux'
-import {useRouteMatch} from 'react-router-dom'
 
 // Components
 import TelegrafConfig from 'src/telegrafs/components/TelegrafConfig'
@@ -35,28 +34,18 @@ import {AppState, ResourceType, Telegraf} from 'src/types'
 // Selectors
 import {getAll} from 'src/resources/selectors'
 
-type Params = {orgID: string; id: string}
-interface Match {
-  params: Params
-}
-
 const TelegrafConfigOverlayForm: FC = () => {
   const dispatch = useDispatch()
   const getTelegrafs = (state: AppState): Telegraf[] => {
     return getAll<Telegraf>(state, ResourceType.Telegrafs)
   }
   const telegrafs = useSelector(getTelegrafs)
-  const {onClose} = useContext(OverlayContext)
-  const match: Match = useRouteMatch({
-    path: '/orgs/:orgID/load-data/telegrafs/:id/view',
-    exact: true,
-    strict: false,
-  })
+  const {params, onClose} = useContext(OverlayContext)
 
   let telegraf
 
-  if (match?.params?.id) {
-    telegraf = telegrafs.find(tel => tel.id === match.params.id)
+  if (params?.collectorId) {
+    telegraf = telegrafs.find(tel => tel.id === params.collectorId)
   }
 
   const [workingConfig, updateWorkingConfig] = useState<string>(

src/telegrafs/containers/TelegrafsPage.tsx

@@ -11,17 +11,6 @@ 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'
-import OverlayHandler, {
-  RouteOverlay,
-} from 'src/overlays/components/RouteOverlay'
-
-const TelegrafConfigOverlay = RouteOverlay(
-  OverlayHandler as any,
-  'telegraf-config',
-  (history, params) => {
-    history.push(`/orgs/${params.orgID}/load-data/telegrafs`)
-  }
-)
 
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
@@ -52,10 +41,6 @@ class TelegrafsPage extends PureComponent {
           </LimitChecker>
         </Page>
         <Switch>
-          <Route
-            path={`${telegrafsPath}/:id/view`}
-            component={TelegrafConfigOverlay}
-          />
           <Route
             path={`${telegrafsPath}/new`}
             component={TelegrafUIRefreshWizard}