diff --git a/ui/src/dataLoaders/actions/telegrafEditor.ts b/ui/src/dataLoaders/actions/telegrafEditor.ts
index 49d61133efe..a7b9f5f2087 100644
--- a/ui/src/dataLoaders/actions/telegrafEditor.ts
+++ b/ui/src/dataLoaders/actions/telegrafEditor.ts
@@ -19,15 +19,21 @@ export const setActivePlugins = (plugins: TelegrafEditorActivePluginState) => ({
 })
 
 export type EditorAction =
-  | ReturnType<typeof setMode>
+  | ReturnType<typeof setLookup>
+  | ReturnType<typeof setList>
   | ReturnType<typeof setText>
   | ReturnType<typeof setBucket>
   | ReturnType<typeof setFilter>
   | ReturnType<typeof reset>
 
-export const setMode = (mode: 'adding' | 'indexing') => ({
-  type: 'SET_TELEGRAF_EDITOR_MODE' as 'SET_TELEGRAF_EDITOR_MODE',
-  payload: mode,
+export const setLookup = (show: boolean) => ({
+  type: 'SET_TELEGRAF_EDITOR_LOOKUP' as 'SET_TELEGRAF_EDITOR_LOOKUP',
+  payload: show,
+})
+
+export const setList = (show: boolean) => ({
+  type: 'SET_TELEGRAF_EDITOR_LIST' as 'SET_TELEGRAF_EDITOR_LIST',
+  payload: show,
 })
 
 export const setText = (text: string) => ({
diff --git a/ui/src/dataLoaders/components/TelegrafEditor.scss b/ui/src/dataLoaders/components/TelegrafEditor.scss
index a3ea7bccfa4..374faf4aec8 100644
--- a/ui/src/dataLoaders/components/TelegrafEditor.scss
+++ b/ui/src/dataLoaders/components/TelegrafEditor.scss
@@ -1,31 +1,173 @@
 @import '~src/style/_influx-colors.scss';
+@import '~src/style/_variables.scss';
 
-.telegraf-editor--plugins {
-  .display {
-    color: $g7-graphite;
-    margin-top: 8px;
-    padding: 0 12px;
+// Main Layout
+.telegraf-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+  width: 100%;
+}
+
+.telegraf-editor--heading {
+  text-align: center;
+  padding-bottom: $ix-marg-c;
+}
+
+.telegraf-editor--body {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+.telegraf-editor--column-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  height: 30px;
+  background-color: $g4-onyx;
+  color: $g15-platinum;
+  border-radius: $ix-radius $ix-radius 0 0;
+
+  .telegraf-editor--column__collapsed & {
+    padding: $ix-marg-a;
   }
+}
 
-  .entry {
-    cursor: pointer;
-    padding: 0 12px;
-    padding-left: 24px;
-
-    label {
-      font-size: 12px;
-      color: $g9-mountain;
-      display: block;
-      margin-bottom: 4px;
-      cursor: pointer;
-    }
+.telegraf-editor--title {
+  font-size: 13px;
+  white-space: nowrap;
+  user-select: none;
+  line-height: 32px;
+  font-weight: 600;
+
+  .telegraf-editor--column__collapsed & {
+    display: none;
+  }
+}
+
+.telegraf-editor--title__collapsed {
+  font-size: 13px;
+  white-space: nowrap;
+  user-select: none;
+  line-height: 32px;
+  font-weight: 600;
+  transform-origin: bottom left;
+  transform: rotate(90deg);
+  position: absolute;
+  left: -2px;
+  top: 8px;
+}
+
+// Column Layout
+.telegraf-editor--left-column,
+.telegraf-editor--middle-column,
+.telegraf-editor--right-column {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: $g4-onyx;
+  border-radius: $ix-radius;
+}
+
+.telegraf-editor--left-column {
+  flex: 0 0 180px;
+  margin-right: $ix-marg-a;
+  position: relative;
+}
+
+.telegraf-editor--middle-column {
+  flex: 1 0 0;
+  border-radius: $ix-radius 0 0 $ix-radius;
+  overflow: hidden;
+}
+
+.telegraf-editor--right-column {
+  flex: 0 0 180px;
+  border-left: 0;
+  border-radius: 0 $ix-radius $ix-radius 0;
+  position: relative;
+}
+
+.telegraf-editor--column-section {
+  padding: $ix-marg-a + $ix-marg-b;
+  padding-top: 0;
+
+  p {
+    margin: 0;
   }
+}
+
+.telegraf-editor--column__collapsed {
+  flex-basis: 30px;
+  overflow: hidden;
+}
+
+// Monaco Editor
+.telegraf-editor--monaco {
+  border: $ix-border solid $g4-onyx;
+  border-radius: $ix-radius;
+  border-right: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+// Plugins List
+.telegraf-plugins {
+  border: $ix-border solid $g4-onyx;
+  border-radius: $ix-radius;
+  background-color: $g2-kevlar;
+}
+
+.telegraf-plugins--list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
 
-  .input,
-  .output,
-  .processor,
-  .aggregator,
-  .bundle {
-    @extend .entry;
+.telegraf-plugins--item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 6px 8px;
+}
+
+.telegraf-plugins--divider {
+  user-select: none;
+  font-weight: 600;
+  font-size: 13px;
+  color: $g9-mountain;
+  background-color: $g1-raven;
+  text-transform: uppercase;
+  cursor: default;
+}
+
+.telegraf-plugins--plugin {
+  background-color: $g2-kevlar;
+  transition: background-color 0.25s ease, color 0.25s ease;
+
+  &:hover {
+    cursor: pointer;
+    color: $g18-cloud;
+    background-color: $g5-pepper;
   }
 }
+
+.telegraf-plugins--item-name {
+  font-size: 13px;
+  font-weight: 700;
+}
+.telegraf-plugins--item-description {
+  font-size: 11px;
+  font-weight: 500;
+  padding-left: 6px;
+  opacity: 0.75;
+}
+
+// Search
+.telegraf-editor--filter {
+  margin: $ix-marg-a;
+}
diff --git a/ui/src/dataLoaders/components/TelegrafEditor.tsx b/ui/src/dataLoaders/components/TelegrafEditor.tsx
index 183df879582..f6312f2aeae 100644
--- a/ui/src/dataLoaders/components/TelegrafEditor.tsx
+++ b/ui/src/dataLoaders/components/TelegrafEditor.tsx
@@ -3,8 +3,9 @@ import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
-import {Grid, Columns} from '@influxdata/clockface'
+import {Alert, ComponentColor} from '@influxdata/clockface'
 import TelegrafEditorSidebar from 'src/dataLoaders/components/TelegrafEditorSidebar'
+import TelegrafEditorPluginLookup from 'src/dataLoaders/components/TelegrafEditorPluginLookup'
 import TelegrafEditorMonaco from 'src/dataLoaders/components/TelegrafEditorMonaco'
 
 // Styles
@@ -35,33 +36,23 @@ class TelegrafEditor extends PureComponent<Props> {
 
   render() {
     return (
-      <Grid style={{height: '100%'}}>
-        <Grid.Row style={{textAlign: 'center'}}>
-          <h3 className="wizard-step--title">What do you want to monitor?</h3>
-          <h5 className="wizard-step--sub-title">
-            Telegraf is a plugin-based data collection agent which writes
-            metrics to a bucket in InfluxDB
-            <br />
-            Use the editor below to configure as many of the 200+{' '}
-            <a
-              href="https://v2.docs.influxdata.com/v2.0/reference/telegraf-plugins/#input-plugins"
-              target="_blank"
-            >
-              plugins
-            </a>{' '}
-            as you require
-          </h5>
-        </Grid.Row>
-        <Grid.Row style={{height: 'calc(100% - 128px)'}}>
+      <div className="telegraf-editor">
+        <div className="telegraf-editor--heading">
+          <Alert color={ComponentColor.Default}>
+            This tool will help create a configuration file for Telegraf, but
+            you will have to download and run Telegraf externally to get data
+            into your bucket.
+          </Alert>
+        </div>
+        <div className="telegraf-editor--body">
           <TelegrafEditorSidebar
             onJump={this.handleJump}
             onAdd={this.handleAdd}
           />
-          <Grid.Column widthXS={Columns.Nine} style={{height: '100%'}}>
-            <TelegrafEditorMonaco ref={this.connect} />
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
+          <TelegrafEditorMonaco ref={this.connect} />
+          <TelegrafEditorPluginLookup onJump={this.handleJump} />
+        </div>
+      </div>
     )
   }
 
diff --git a/ui/src/dataLoaders/components/TelegrafEditorFooter.tsx b/ui/src/dataLoaders/components/TelegrafEditorFooter.tsx
new file mode 100644
index 00000000000..253c6e41715
--- /dev/null
+++ b/ui/src/dataLoaders/components/TelegrafEditorFooter.tsx
@@ -0,0 +1,65 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import {downloadTextFile} from 'src/shared/utils/download'
+import {ComponentColor, Button} from '@influxdata/clockface'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {AppState} from 'src/types'
+
+interface OwnProps {
+  onDismiss: () => void
+}
+
+interface StateProps {
+  script: string
+}
+
+interface DispatchProps {}
+
+type Props = StateProps & DispatchProps & OwnProps
+
+export class TelegrafEditorFooter extends PureComponent<Props> {
+  public render() {
+    if (!isFlagEnabled('telegrafEditor')) {
+      return false
+    }
+
+    return (
+      <>
+        <Button
+          color={ComponentColor.Secondary}
+          text="Download Config"
+          onClick={this.handleDownloadConfig}
+        />
+        <Button
+          color={ComponentColor.Primary}
+          text="Save Config"
+          onClick={this.handleSaveConfig}
+        />
+      </>
+    )
+  }
+
+  private handleDownloadConfig = () => {
+    downloadTextFile(this.props.script, 'telegraf', '.conf')
+  }
+
+  private handleSaveConfig = () => {
+    this.props.onDismiss()
+  }
+}
+
+const mstp = (state: AppState): StateProps => {
+  const script = state.telegrafEditor.text
+
+  return {
+    script,
+  }
+}
+
+const mdtp: DispatchProps = {}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(TelegrafEditorFooter)
diff --git a/ui/src/dataLoaders/components/TelegrafEditorMonaco.tsx b/ui/src/dataLoaders/components/TelegrafEditorMonaco.tsx
index 360b7e713c0..20be6527d42 100644
--- a/ui/src/dataLoaders/components/TelegrafEditorMonaco.tsx
+++ b/ui/src/dataLoaders/components/TelegrafEditorMonaco.tsx
@@ -32,11 +32,17 @@ class TelegrafEditorMonaco extends PureComponent<Props> {
     const {script} = this.props
 
     return (
-      <Editor
-        script={script}
-        onChangeScript={this.handleChange}
-        willMount={this.connect}
-      />
+      <div className="telegraf-editor--middle-column">
+        <div className="telegraf-editor--column-heading">
+          <span className="telegraf-editor--title">Configuration File</span>
+        </div>
+        <Editor
+          className="telegraf-editor--monaco"
+          script={script}
+          onChangeScript={this.handleChange}
+          willMount={this.connect}
+        />
+      </div>
     )
   }
 
diff --git a/ui/src/dataLoaders/components/TelegrafEditorPluginList.tsx b/ui/src/dataLoaders/components/TelegrafEditorPluginList.tsx
index 69d3cc26338..c6a8e6f19f9 100644
--- a/ui/src/dataLoaders/components/TelegrafEditorPluginList.tsx
+++ b/ui/src/dataLoaders/components/TelegrafEditorPluginList.tsx
@@ -1,5 +1,8 @@
+// Libraries
 import React, {PureComponent} from 'react'
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
+
+// Components
+import {DapperScrollbars} from '@influxdata/clockface'
 import {
   TelegrafEditorPluginState,
   TelegrafEditorActivePluginState,
@@ -47,7 +50,7 @@ function groupPlugins(plugins: Array<ListPlugin>, pluginFilter: string) {
     .reduce((prev, curr) => {
       prev.push({
         type: 'display',
-        name: '-- ' + curr.category + ' --',
+        name: curr.category,
       })
 
       const items = curr.items.slice(0).sort((a: ListPlugin, b: ListPlugin) => {
@@ -72,8 +75,11 @@ class PluginList extends PureComponent<PluginProps> {
     const list = groupPlugins(plugins, filter).map((k: ListPlugin) => {
       if (k.type === 'display') {
         return (
-          <div className={k.type} key={`_plugin_${k.type}.${k.name}`}>
-            {k.name}
+          <div
+            className="telegraf-plugins--item telegraf-plugins--divider"
+            key={`_plugin_${k.type}.${k.name}`}
+          >
+            {k.name}s
           </div>
         )
       }
@@ -82,25 +88,29 @@ class PluginList extends PureComponent<PluginProps> {
 
       // NOTE: written this way to bypass typescript: alex
       if (k['description']) {
-        description = <label>{k['description']}</label>
+        description = (
+          <dd className="telegraf-plugins--item-description">
+            {k['description']}
+          </dd>
+        )
       }
 
       return (
         <div
-          className={k.type}
+          className="telegraf-plugins--item telegraf-plugins--plugin"
           key={`_plugin_${k.type}.${k.name}`}
           onClick={() => onClick(k)}
         >
-          {k.name}
+          <dt className="telegraf-plugins--item-name">{k.name}</dt>
           {description}
         </div>
       )
     })
 
     return (
-      <FancyScrollbar autoHide={false} className="telegraf-editor--plugins">
-        {list}
-      </FancyScrollbar>
+      <DapperScrollbars autoHide={false} className="telegraf-plugins">
+        <dl className="telegraf-plugins--list">{list}</dl>
+      </DapperScrollbars>
     )
   }
 }
diff --git a/ui/src/dataLoaders/components/TelegrafEditorPluginLookup.tsx b/ui/src/dataLoaders/components/TelegrafEditorPluginLookup.tsx
new file mode 100644
index 00000000000..685eb91602f
--- /dev/null
+++ b/ui/src/dataLoaders/components/TelegrafEditorPluginLookup.tsx
@@ -0,0 +1,77 @@
+// Libraries
+import React, {FC} from 'react'
+import {connect} from 'react-redux'
+import classnames from 'classnames'
+
+// Components
+import PluginList from 'src/dataLoaders/components/TelegrafEditorPluginList'
+import {AppState} from 'src/types'
+import {SquareButton, IconFont, ComponentSize} from '@influxdata/clockface'
+import {setLookup} from 'src/dataLoaders/actions/telegrafEditor'
+
+// Types
+import {
+  TelegrafEditorActivePluginState,
+  TelegrafEditorActivePlugin,
+} from 'src/dataLoaders/reducers/telegrafEditor'
+
+interface PluginStateProps {
+  plugins: TelegrafEditorActivePluginState
+  show: boolean
+}
+
+interface OwnProps {
+  onJump: (which: TelegrafEditorActivePlugin) => void
+}
+
+interface PluginDispatchProps {
+  onChangeLookup: typeof setLookup
+}
+
+type Props = OwnProps & PluginStateProps & PluginDispatchProps
+
+const TelegrafEditorSideBar: FC<Props> = ({
+  plugins,
+  onJump,
+  show,
+  onChangeLookup,
+}) => {
+  const columnClassName = classnames('telegraf-editor--right-column', {
+    'telegraf-editor--column__collapsed': !show,
+  })
+  const icon = show ? IconFont.EyeOpen : IconFont.EyeClosed
+  const header = 'Plugins'
+
+  return (
+    <div className={columnClassName}>
+      <div className="telegraf-editor--column-heading">
+        <span className="telegraf-editor--title">{header}</span>
+        <SquareButton
+          icon={icon}
+          size={ComponentSize.ExtraSmall}
+          onClick={() => onChangeLookup(!show)}
+        />
+      </div>
+      {show && <PluginList plugins={plugins} filter="" onClick={onJump} />}
+      {!show && (
+        <span className="telegraf-editor--title__collapsed">{header} </span>
+      )}
+    </div>
+  )
+}
+
+const mstp = (state: AppState): PluginStateProps => {
+  const plugins = state.telegrafEditorActivePlugins || []
+  const show = state.telegrafEditor.showLookup
+
+  return {plugins, show}
+}
+
+const mdtp: PluginDispatchProps = {
+  onChangeLookup: setLookup,
+}
+
+export default connect<PluginStateProps, PluginDispatchProps>(
+  mstp,
+  mdtp
+)(TelegrafEditorSideBar)
diff --git a/ui/src/dataLoaders/components/TelegrafEditorSidebar.tsx b/ui/src/dataLoaders/components/TelegrafEditorSidebar.tsx
index cf9425d87c9..d16d92d5005 100644
--- a/ui/src/dataLoaders/components/TelegrafEditorSidebar.tsx
+++ b/ui/src/dataLoaders/components/TelegrafEditorSidebar.tsx
@@ -1,28 +1,20 @@
 import React, {PureComponent, SyntheticEvent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
+import classnames from 'classnames'
+
 import PluginList from 'src/dataLoaders/components/TelegrafEditorPluginList'
-import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
-import {AppState, Bucket} from 'src/types'
+import {AppState} from 'src/types'
 import {
   TelegrafEditorPluginState,
-  TelegrafEditorActivePluginState,
   TelegrafEditorPlugin,
   TelegrafEditorActivePlugin,
 } from 'src/dataLoaders/reducers/telegrafEditor'
-import {
-  setFilter,
-  setBucket,
-  setMode,
-} from 'src/dataLoaders/actions/telegrafEditor'
+import {setFilter, setList} from 'src/dataLoaders/actions/telegrafEditor'
 import {
   Input,
   IconFont,
-  FormElement,
-  Grid,
-  Columns,
-  Tabs,
   ComponentSize,
-  Orientation,
+  SquareButton,
 } from '@influxdata/clockface'
 
 interface PluginStateProps {
@@ -30,26 +22,6 @@ interface PluginStateProps {
   filter: string
 }
 
-interface ActivePluginStateProps {
-  plugins: TelegrafEditorActivePluginState
-  filter: string
-}
-
-const mstp_1 = (state: AppState): ActivePluginStateProps => {
-  const plugins = state.telegrafEditorActivePlugins || []
-  const filter = state.telegrafEditor.filter
-
-  return {
-    plugins,
-    filter,
-  }
-}
-
-const ActivePluginList = connect<ActivePluginStateProps, {}>(
-  mstp_1,
-  null
-)(PluginList)
-
 const mstp_2 = (state: AppState): PluginStateProps => {
   const plugins = state.telegrafEditorPlugins || []
   const filter = state.telegrafEditor.filter
@@ -66,16 +38,13 @@ const AllPluginList = connect<PluginStateProps, {}>(
 )(PluginList)
 
 interface StateProps {
-  buckets: Bucket[]
-  bucket: Bucket
   filter: string
-  mode: 'adding' | 'indexing'
+  show: boolean
 }
 
 interface DispatchProps {
   onSetFilter: typeof setFilter
-  onSetBucket: typeof setBucket
-  onSetMode: typeof setMode
+  onSetList: typeof setList
 }
 
 interface OwnProps {
@@ -87,91 +56,60 @@ type TelegrafEditorSidebarProps = StateProps & DispatchProps & OwnProps
 
 class TelegrafEditorSideBar extends PureComponent<TelegrafEditorSidebarProps> {
   render() {
-    const {
-      bucket,
-      buckets,
-      filter,
-      mode,
-      onAdd,
-      onJump,
-      onSetMode,
-      onSetBucket,
-      onSetFilter,
-    } = this.props
+    const {filter, show, onAdd, onSetList, onSetFilter} = this.props
+    const columnClassName = classnames('telegraf-editor--left-column', {
+      'telegraf-editor--column__collapsed': !show,
+    })
+    const icon = show ? IconFont.EyeOpen : IconFont.EyeClosed
+    const header = 'Browse & Add Plugins'
+
     return (
-      <Grid.Column widthXS={Columns.Three} style={{height: '100%'}}>
-        <FormElement label="Bucket">
-          <BucketDropdown
-            buckets={buckets}
-            selectedBucketID={bucket.id}
-            onSelectBucket={onSetBucket}
+      <div className={columnClassName}>
+        <div className="telegraf-editor--column-heading">
+          <span className="telegraf-editor--title">{header}</span>
+          <SquareButton
+            icon={icon}
+            size={ComponentSize.ExtraSmall}
+            onClick={() => onSetList(!show)}
+          />
+        </div>
+        {show && (
+          <Input
+            className="telegraf-editor--filter"
+            size={ComponentSize.Small}
+            icon={IconFont.Search}
+            value={filter}
+            onBlur={(evt: SyntheticEvent<any>) => {
+              onSetFilter((evt.target as any).value)
+            }}
+            style={{}}
+            onChange={(evt: ChangeEvent<any>) => {
+              onSetFilter(evt.target.value)
+            }}
+            placeholder="Filter Plugins..."
           />
-        </FormElement>
-        <Input
-          className="wizard-step--filter"
-          size={ComponentSize.Small}
-          icon={IconFont.Search}
-          value={filter}
-          onBlur={(evt: SyntheticEvent<any>) => {
-            onSetFilter((evt.target as any).value)
-          }}
-          onChange={(evt: ChangeEvent<any>) => {
-            onSetFilter(evt.target.value)
-          }}
-          placeholder="Filter Plugins..."
-        />
-        <Tabs.Container
-          orientation={Orientation.Horizontal}
-          style={{height: 'calc(100% - 114px)', marginTop: '18px'}}
-        >
-          <Tabs>
-            <Tabs.Tab
-              id="lookup"
-              text="Plugin Lookup"
-              active={mode === 'indexing'}
-              onClick={() => {
-                onSetMode('indexing')
-              }}
-            />
-            <Tabs.Tab
-              id="add"
-              text="Add Plugins"
-              active={mode === 'adding'}
-              onClick={() => {
-                onSetMode('adding')
-              }}
-            />
-          </Tabs>
-          <Tabs.TabContents padding={ComponentSize.Small}>
-            {mode === 'indexing' && <ActivePluginList onClick={onJump} />}
-            {mode === 'adding' && <AllPluginList onClick={onAdd} />}
-          </Tabs.TabContents>
-        </Tabs.Container>
-      </Grid.Column>
+        )}
+        {show && <AllPluginList onClick={onAdd} />}
+        {!show && (
+          <div className="telegraf-editor--title__collapsed">{header}</div>
+        )}
+      </div>
     )
   }
 }
 
 const mstp_3 = (state: AppState): StateProps => {
   const filter = state.telegrafEditor.filter
-  const mode = state.telegrafEditor.mode
-  const buckets = state.buckets.list || []
-  const bucket =
-    state.telegrafEditor.bucket || buckets.length
-      ? buckets[0]
-      : ({id: null} as Bucket)
+  const show = state.telegrafEditor.showList
 
   return {
-    buckets,
-    bucket,
-    mode,
     filter,
+    show,
   }
 }
 
 const mdtp_3: DispatchProps = {
-  onSetMode: setMode,
-  onSetBucket: setBucket,
+  onSetList: setList,
   onSetFilter: setFilter,
 }
 
diff --git a/ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx b/ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx
index ee7c3285e3c..dcf11c6b434 100644
--- a/ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx
+++ b/ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx
@@ -7,6 +7,7 @@ import {withRouter, WithRouterProps} from 'react-router'
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
+import TelegrafEditorFooter from 'src/dataLoaders/components/TelegrafEditorFooter'
 
 const spinner = <div />
 const TelegrafEditor = Loadable({
@@ -23,7 +24,6 @@ const CollectorsStepSwitcher = Loadable({
   },
 })
 import {isFlagEnabled, FeatureFlag} from 'src/shared/utils/featureFlag'
-import {ComponentColor, Button} from '@influxdata/clockface'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -46,7 +46,6 @@ import {reset} from 'src/dataLoaders/actions/telegrafEditor'
 import {Links} from 'src/types/links'
 import {Substep, TelegrafPlugin} from 'src/types/dataLoaders'
 import {AppState, Bucket, Organization} from 'src/types'
-import {downloadTextFile} from 'src/shared/utils/download'
 
 export interface CollectorsStepProps {
   currentStepIndex: number
@@ -96,6 +95,7 @@ class CollectorsWizard extends PureComponent<AllProps, State> {
       buckets: [],
     }
   }
+
   public componentDidMount() {
     this.handleSetBucketInfo()
     this.props.onSetCurrentStepIndex(0)
@@ -108,20 +108,7 @@ class CollectorsWizard extends PureComponent<AllProps, State> {
       <WizardOverlay
         title="Create a Telegraf Config"
         onDismiss={this.handleDismiss}
-        footer={
-          <FeatureFlag name="telegrafEditor">
-            <Button
-              color={ComponentColor.Secondary}
-              text="Download Config"
-              onClick={this.handleDownloadConfig}
-            />
-            <Button
-              color={ComponentColor.Primary}
-              text="Save Config"
-              onClick={this.handleSaveConfig}
-            />
-          </FeatureFlag>
-        }
+        footer={<TelegrafEditorFooter onDismiss={this.handleDismiss} />}
       >
         <FeatureFlag name="telegrafEditor">
           <TelegrafEditor />
@@ -145,14 +132,6 @@ class CollectorsWizard extends PureComponent<AllProps, State> {
     }
   }
 
-  private handleDownloadConfig = () => {
-    downloadTextFile(this.props.text, 'telegraf', '.conf')
-  }
-
-  private handleSaveConfig = () => {
-    this.handleDismiss()
-  }
-
   private handleDismiss = () => {
     const {router, org} = this.props
 
diff --git a/ui/src/dataLoaders/components/collectorsWizard/verify/VerifyCollectorsStep.tsx b/ui/src/dataLoaders/components/collectorsWizard/verify/VerifyCollectorsStep.tsx
index 83a0dc09be5..2901eaf5886 100644
--- a/ui/src/dataLoaders/components/collectorsWizard/verify/VerifyCollectorsStep.tsx
+++ b/ui/src/dataLoaders/components/collectorsWizard/verify/VerifyCollectorsStep.tsx
@@ -1,7 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
-import _ from 'lodash'
 
 // Components
 import {Form} from '@influxdata/clockface'
diff --git a/ui/src/dataLoaders/reducers/telegrafEditor.ts b/ui/src/dataLoaders/reducers/telegrafEditor.ts
index a3df84779ba..4949a0567a4 100644
--- a/ui/src/dataLoaders/reducers/telegrafEditor.ts
+++ b/ui/src/dataLoaders/reducers/telegrafEditor.ts
@@ -40,10 +40,9 @@ export interface TelegrafEditorActivePlugin {
 
 export type TelegrafEditorActivePluginState = Array<TelegrafEditorActivePlugin>
 
-type TelegrafEditorMode = 'adding' | 'indexing'
-
 export interface TelegrafEditorState {
-  mode: TelegrafEditorMode
+  showLookup: boolean
+  showList: boolean
   bucket: Bucket | null
   text: string
   filter: string
@@ -212,7 +211,8 @@ bucket = "aboatwright's Bucket"
 ]
 
 const INITIAL_EDITOR: TelegrafEditorState = {
-  mode: 'adding',
+  showLookup: true,
+  showList: true,
   bucket: null,
   text: '',
   filter: '',
@@ -247,8 +247,10 @@ export function editorReducer(
   action: EditorAction
 ): TelegrafEditorState {
   switch (action.type) {
-    case 'SET_TELEGRAF_EDITOR_MODE':
-      return {...state, mode: action.payload}
+    case 'SET_TELEGRAF_EDITOR_LOOKUP':
+      return {...state, showLookup: action.payload}
+    case 'SET_TELEGRAF_EDITOR_LIST':
+      return {...state, showList: action.payload}
     case 'SET_TELEGRAF_EDITOR_TEXT':
       return {...state, text: action.payload}
     case 'SET_TELEGRAF_EDITOR_ACTIVE_BUCKET':