feat(telegrafsPage): use OverlayController to trigger telegraf output overlay (#5636)

Author: blegesse-w

src/telegrafs/components/Collectors.test.tsx

@@ -18,6 +18,8 @@ const setup = (override = {}) => {
     buckets: [],
     onUpdateTelegraf: jest.fn(),
     onDeleteTelegraf: jest.fn(),
+    showOverlay: jest.fn(),
+    dismissOverlay: jest.fn(),
     ...override,
   }
 

src/telegrafs/components/Collectors.tsx

@@ -26,6 +26,7 @@ import ResourceSortDropdown from 'src/shared/components/resource_sort_dropdown/R
 
 // Actions
 import {updateTelegraf, deleteTelegraf} from 'src/telegrafs/actions/thunks'
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -42,9 +43,6 @@ import {getAll} from 'src/resources/selectors'
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 
-type ReduxProps = ConnectedProps<typeof connector>
-type Props = ReduxProps & RouteComponentProps<{orgID: string}>
-
 interface State {
   dataLoaderOverlay: OverlayState
   searchTerm: string
@@ -54,7 +52,12 @@ interface State {
   sortDirection: Sort
   sortType: SortTypes
 }
+interface DispatchProps {
+  showOverlay: (arg1: string, arg2: any, any) => {}
+}
 
+type ReduxProps = ConnectedProps<typeof connector>
+type Props = ReduxProps & RouteComponentProps<{orgID: string}> & DispatchProps
 @ErrorHandling
 export class Collectors extends PureComponent<Props, State> {
   constructor(props: Props) {
@@ -203,14 +206,8 @@ export class Collectors extends PureComponent<Props, State> {
   }
 
   private handleJustTheOutput = () => {
-    const {
-      history,
-      match: {
-        params: {orgID},
-      },
-    } = this.props
-
-    history.push(`/orgs/${orgID}/load-data/telegrafs/output`)
+    const {showOverlay, dismissOverlay} = this.props
+    showOverlay('telegraf-output', null, () => dismissOverlay())
     event('load_data.telegrafs.influxdb_output_plugin_button.clicked')
   }
 
@@ -270,6 +267,8 @@ const mstp = (state: AppState) => {
 const mdtp = {
   onUpdateTelegraf: updateTelegraf,
   onDeleteTelegraf: deleteTelegraf,
+  showOverlay,
+  dismissOverlay,
 }
 
 const connector = connect(mstp, mdtp)

src/telegrafs/components/TelegrafOutputOverlay.tsx

@@ -156,12 +156,15 @@ class TelegrafOutputOverlay extends PureComponent<Props> {
         <Overlay.Body>
           <p style={{marginTop: '-18px'}}>
             The $INFLUX_TOKEN can be generated on the
-            <Link to={`/orgs/${orgID}/load-data/tokens`}>
+            <Link
+              to={`/orgs/${orgID}/load-data/tokens`}
+              onClick={this.handleDismiss}
+            >
               &nbsp;API Tokens tab
             </Link>
             .
           </p>
-          <p>{bucket_dd}</p>
+          <div style={{marginBottom: '13px'}}>{bucket_dd}</div>
           <div className="output-overlay">
             <TemplateProvider
               variables={{

src/telegrafs/containers/TelegrafsPage.tsx

@@ -23,13 +23,6 @@ const TelegrafConfigOverlay = RouteOverlay(
     history.push(`/orgs/${params.orgID}/load-data/telegrafs`)
   }
 )
-const TelegrafOutputOverlay = RouteOverlay(
-  OverlayHandler as any,
-  'telegraf-output',
-  (history, params) => {
-    history.push(`/orgs/${params.orgID}/load-data/telegrafs`)
-  }
-)
 
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
@@ -68,10 +61,6 @@ class TelegrafsPage extends PureComponent {
             path={`${telegrafsPath}/:id/instructions`}
             component={TelegrafInstructionsOverlay}
           />
-          <Route
-            path={`${telegrafsPath}/output`}
-            component={TelegrafOutputOverlay}
-          />
           <Route
             path={`${telegrafsPath}/new`}
             component={TelegrafUIRefreshWizard}