feat(telegrafPage): use OverlayController to open instructions overlay (#5640)

Author: blegesse-w

src/overlays/components/OverlayController.tsx

@@ -18,6 +18,7 @@ import NoteEditorOverlay from 'src/dashboards/components/NoteEditorOverlay'
 import AllAccessTokenOverlay from 'src/authorizations/components/AllAccessTokenOverlay'
 import TelegrafConfigOverlay from 'src/telegrafs/components/TelegrafConfigOverlay'
 import TelegrafOutputOverlay from 'src/telegrafs/components/TelegrafOutputOverlay'
+import TelegrafInstructionsOverlay from 'src/telegrafs/components/TelegrafInstructionsOverlay'
 import OrgSwitcherOverlay from 'src/pageLayout/components/OrgSwitcherOverlay'
 import CreateBucketOverlay from 'src/buckets/components/createBucketForm/CreateBucketOverlay'
 import AssetLimitOverlay from 'src/cloud/components/AssetLimitOverlay'
@@ -95,6 +96,11 @@ export const OverlayController: FunctionComponent = () => {
       case 'telegraf-output':
         activeOverlay.current = <TelegrafOutputOverlay onClose={onClose} />
         break
+      case 'telegraf-instructions':
+        activeOverlay.current = (
+          <TelegrafInstructionsOverlay onClose={onClose} />
+        )
+        break
       case 'switch-organizations':
         activeOverlay.current = <OrgSwitcherOverlay onClose={onClose} />
         break

src/overlays/components/index.tsx

@@ -52,6 +52,14 @@ export const TelegrafOutputOverlay = RouteOverlay(
   }
 )
 
+export const TelegrafInstructionsOverlay = RouteOverlay(
+  OverlayHandler,
+  'telegraf-instructions',
+  (history, params) => {
+    history.push(`/orgs/${params.orgID}/load-data/telegrafs`)
+  }
+)
+
 export const AddAnnotationDEOverlay = RouteOverlay(
   OverlayHandler,
   'add-annotation',

src/overlays/reducers/overlays.ts

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

src/telegrafs/components/CollectorCard.scss

@@ -0,0 +1,7 @@
+.setup-instructions {
+  cursor: pointer;
+  color: #00a3ff;
+}
+.setup-instructions:hover {
+  color: #00c9ff;
+}

src/telegrafs/components/CollectorCard.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {PureComponent, MouseEvent, RefObject, createRef} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
-import {withRouter, RouteComponentProps, Link} from 'react-router-dom'
+import {withRouter, RouteComponentProps} from 'react-router-dom'
 
 // Components
 import {
@@ -24,6 +24,7 @@ import {
   addTelegrafLabelAsync,
   removeTelegrafLabelAsync,
 } from 'src/telegrafs/actions/thunks'
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 
 import {cloneTelegraf} from 'src/telegrafs/actions/thunks'
 // Selectors
@@ -38,6 +39,9 @@ import {AppState, Label, Telegraf} from 'src/types'
 // Utils
 import {setCloneName} from 'src/utils/naming'
 
+// Styles
+import './CollectorCard.scss'
+
 interface OwnProps {
   collector: Telegraf
   onDelete: (telegraf: Telegraf) => void
@@ -52,7 +56,7 @@ class CollectorRow extends PureComponent<
   Props & RouteComponentProps<{orgID: string}>
 > {
   public render() {
-    const {collector, org} = this.props
+    const {collector} = this.props
 
     return (
       <ResourceCard
@@ -75,12 +79,13 @@ class CollectorRow extends PureComponent<
           placeholder={`Describe ${collector.name}`}
         />
         <ResourceCard.Meta>
-          <Link
-            to={`/orgs/${org.id}/load-data/telegrafs/${collector.id}/instructions`}
+          <span
+            className="setup-instructions"
             data-testid="setup-instructions-link"
+            onClick={this.openInstructionsOverlay}
           >
             Setup Instructions
-          </Link>
+          </span>
         </ResourceCard.Meta>
         {this.labels}
       </ResourceCard>
@@ -131,6 +136,16 @@ class CollectorRow extends PureComponent<
     )
   }
 
+  private openInstructionsOverlay = e => {
+    e.preventDefault()
+    const {showOverlay, dismissOverlay, collector} = this.props
+    return showOverlay(
+      'telegraf-instructions',
+      {collectorId: collector.id},
+      dismissOverlay
+    )
+  }
+
   private handleUpdateName = (name: string) => {
     const {onUpdate, collector} = this.props
 
@@ -199,6 +214,8 @@ const mdtp = {
   cloneTelegraf,
   onAddLabel: addTelegrafLabelAsync,
   onRemoveLabel: removeTelegrafLabelAsync,
+  showOverlay,
+  dismissOverlay,
 }
 
 const connector = connect(mstp, mdtp)

src/telegrafs/components/TelegrafInstructionsOverlay.tsx

@@ -1,11 +1,9 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, {FC, useContext} from 'react'
 import {connect, ConnectedProps} from 'react-redux'
-import {get} from 'lodash'
 import {withRouter, RouteComponentProps} from 'react-router-dom'
 
 // Components
-import {ErrorHandling} from 'src/shared/decorators/errors'
 import {Overlay} from '@influxdata/clockface'
 import TelegrafInstructions from 'src/dataLoaders/components/verifyStep/TelegrafInstructions'
 import GetResources from 'src/resources/components/GetResources'
@@ -17,64 +15,53 @@ import {Telegraf, AppState, ResourceType} from 'src/types'
 import {getAll, getToken} from 'src/resources/selectors'
 import {clearDataLoaders} from 'src/dataLoaders/actions/dataLoaders'
 
+// Contexts
+import {OverlayContext} from 'src/overlays/components/OverlayController'
+
+interface OwnProps {
+  onClose: () => void
+}
+
 type ReduxProps = ConnectedProps<typeof connector>
-type Props = ReduxProps & RouteComponentProps<{orgID: string; id: string}>
+type Props = OwnProps &
+  ReduxProps &
+  RouteComponentProps<{orgID: string; id: string}>
 
-@ErrorHandling
-export class TelegrafInstructionsOverlay extends PureComponent<Props> {
-  public render() {
-    const {token} = this.props
-    return (
-      <Overlay visible={true}>
-        <Overlay.Container maxWidth={700}>
-          <Overlay.Header
-            title="Telegraf Setup Instructions"
-            onDismiss={this.handleDismiss}
-          />
-          <Overlay.Body>
-            <GetResources resources={[ResourceType.Authorizations]}>
-              <TelegrafInstructions
-                token={token}
-                configID={get(this.collector, 'id', '')}
-              />
-            </GetResources>
-          </Overlay.Body>
-        </Overlay.Container>
-      </Overlay>
-    )
-  }
+const TelegrafInstructionsOverlay: FC<Props> = props => {
+  const {token} = props
+  const {params} = useContext(OverlayContext)
 
-  private get collector() {
-    const {
-      match: {
-        params: {id},
-      },
-      collectors,
-    } = this.props
-    return collectors.find(c => c.id === id)
+  const collector = () => {
+    const {collectors} = props
+    const collector = collectors.find(c => c.id === params.collectorId)
+    return collector.id || ''
   }
 
-  private handleDismiss = (): void => {
-    const {
-      history,
-      match: {
-        params: {orgID},
-      },
-      onClearDataLoaders,
-    } = this.props
-    this.setState({
-      collectorID: null,
-    })
+  const handleDismiss = (): void => {
+    const {onClearDataLoaders, onClose} = props
     onClearDataLoaders()
-    history.push(`/orgs/${orgID}/load-data/telegrafs/`)
+    onClose()
   }
+
+  return (
+    <Overlay.Container maxWidth={700}>
+      <Overlay.Header
+        title="Telegraf Setup Instructions"
+        onDismiss={handleDismiss}
+      />
+      <Overlay.Body>
+        <GetResources resources={[ResourceType.Authorizations]}>
+          <TelegrafInstructions token={token} configID={collector()} />
+        </GetResources>
+      </Overlay.Body>
+    </Overlay.Container>
+  )
 }
 
 const mstp = (state: AppState) => {
   const {
     me: {name},
   } = state
-
   const token = getToken(state)
   const telegrafs = getAll<Telegraf>(state, ResourceType.Telegrafs)
 

src/telegrafs/containers/TelegrafsPage.tsx

@@ -9,7 +9,6 @@ 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 TelegrafInstructionsOverlay from 'src/telegrafs/components/TelegrafInstructionsOverlay'
 import TelegrafUIRefreshWizard from 'src/dataLoaders/components/collectorsWizard/TelegrafUIRefreshWizard'
 import {Page} from '@influxdata/clockface'
 import OverlayHandler, {
@@ -57,10 +56,6 @@ class TelegrafsPage extends PureComponent {
             path={`${telegrafsPath}/:id/view`}
             component={TelegrafConfigOverlay}
           />
-          <Route
-            path={`${telegrafsPath}/:id/instructions`}
-            component={TelegrafInstructionsOverlay}
-          />
           <Route
             path={`${telegrafsPath}/new`}
             component={TelegrafUIRefreshWizard}