From b1feeb7b3d54137357d9d655cb3ec00f8de294d1 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 15:51:18 -0800
Subject: [PATCH 01/17] Condense layout of scraper form

---
 .../components/configureStep/ScraperTarget.tsx           | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx b/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
index 271aea8a7a1..af19316e9ed 100644
--- a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
+++ b/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
@@ -7,7 +7,6 @@ import {
   Input,
   Columns,
   Grid,
-  ComponentSize,
   InputType,
   ComponentStatus,
 } from 'src/clockface'
@@ -34,7 +33,7 @@ export class ScraperTarget extends PureComponent<Props> {
     return (
       <Grid>
         <Grid.Row>
-          <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.Two}>
+          <Grid.Column widthSM={Columns.Six}>
             <Form.Element
               label="Name"
               errorMessage={this.nameEmpty && 'Target name is empty'}
@@ -45,11 +44,12 @@ export class ScraperTarget extends PureComponent<Props> {
                 name="name"
                 onChange={this.handleChangeName}
                 titleText="Name"
-                size={ComponentSize.Medium}
                 autoFocus={true}
                 status={this.nameStatus}
               />
             </Form.Element>
+          </Grid.Column>
+          <Grid.Column widthSM={Columns.Six}>
             <Form.Element label="Bucket">
               <BucketDropdown
                 selected={bucket}
@@ -58,7 +58,7 @@ export class ScraperTarget extends PureComponent<Props> {
               />
             </Form.Element>
           </Grid.Column>
-          <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.Two}>
+          <Grid.Column widthSM={Columns.Twelve}>
             <Form.Element
               label="Target URL"
               errorMessage={this.urlEmpty && 'Target URL is empty'}
@@ -69,7 +69,6 @@ export class ScraperTarget extends PureComponent<Props> {
                 name="url"
                 onChange={this.handleChangeURL}
                 titleText="Target URL"
-                size={ComponentSize.Medium}
                 status={this.urlStatus}
               />
             </Form.Element>

From 833d6a232118138cd70b7237748e43b66c493c84 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 16:16:27 -0800
Subject: [PATCH 02/17] Introduce overlay component for creating scrapers

---
 .../components/CreateScraperOverlay.tsx       | 176 ++++++++++++++++++
 ui/src/organizations/actions/orgView.ts       |   5 +
 ui/src/organizations/components/Scrapers.tsx  |  69 ++++---
 3 files changed, 228 insertions(+), 22 deletions(-)
 create mode 100644 ui/src/dataLoaders/components/CreateScraperOverlay.tsx

diff --git a/ui/src/dataLoaders/components/CreateScraperOverlay.tsx b/ui/src/dataLoaders/components/CreateScraperOverlay.tsx
new file mode 100644
index 00000000000..f0f7f150df8
--- /dev/null
+++ b/ui/src/dataLoaders/components/CreateScraperOverlay.tsx
@@ -0,0 +1,176 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import _ from 'lodash'
+
+// Components
+import {Button, ComponentColor, ComponentStatus} from '@influxdata/clockface'
+import {
+  Form,
+  OverlayContainer,
+  OverlayHeading,
+  OverlayBody,
+  OverlayFooter,
+} from 'src/clockface'
+import ScraperTarget from 'src/dataLoaders/components/configureStep/ScraperTarget'
+
+// Actions
+import {
+  setScraperTargetBucket,
+  setScraperTargetURL,
+  setScraperTargetName,
+  saveScraperTarget,
+} from 'src/dataLoaders/actions/dataLoaders'
+import {setBucketInfo} from 'src/dataLoaders/actions/steps'
+import {notify as notifyAction, notify} from 'src/shared/actions/notifications'
+
+// Types
+import {Bucket, ScraperTargetResponse} from '@influxdata/influx'
+import {AppState} from 'src/types/v2/index'
+import {
+  scraperCreateSuccess,
+  scraperCreateFailed,
+} from 'src/shared/copy/v2/notifications'
+
+interface OwnProps {
+  onDismiss: () => void
+  buckets: Bucket[]
+  onCreate: (scraper: ScraperTargetResponse) => void
+}
+
+interface DispatchProps {
+  onSetScraperTargetBucket: typeof setScraperTargetBucket
+  onSetScraperTargetURL: typeof setScraperTargetURL
+  onSetScraperTargetName: typeof setScraperTargetName
+  onSaveScraperTarget: typeof saveScraperTarget
+  onSetBucketInfo: typeof setBucketInfo
+  notify: typeof notifyAction
+}
+
+interface StateProps {
+  scraperBucket: string
+  url: string
+  currentBucket: string
+  name: string
+}
+
+type Props = OwnProps & DispatchProps & StateProps
+
+export class Scraping extends PureComponent<Props> {
+  public componentDidMount() {
+    const {
+      buckets,
+      scraperBucket,
+      currentBucket,
+      onSetScraperTargetBucket,
+    } = this.props
+
+    if (!scraperBucket) {
+      onSetScraperTargetBucket(currentBucket || _.get(buckets, '0.name', ''))
+    }
+  }
+
+  public render() {
+    const {
+      onDismiss,
+      scraperBucket,
+      onSetScraperTargetURL,
+      onSetScraperTargetName,
+      url,
+      buckets,
+      name,
+    } = this.props
+
+    return (
+      <OverlayContainer maxWidth={600}>
+        <OverlayHeading title="Create Scraper" onDismiss={onDismiss} />
+        <Form onSubmit={this.handleSubmit}>
+          <OverlayBody>
+            <h5 className="wizard-step--sub-title">
+              Scrapers collect data from multiple targets at regular intervals
+              and to write to a bucket
+            </h5>
+            <ScraperTarget
+              bucket={scraperBucket}
+              buckets={buckets}
+              onSelectBucket={this.handleSelectBucket}
+              onChangeURL={onSetScraperTargetURL}
+              onChangeName={onSetScraperTargetName}
+              url={url}
+              name={name}
+            />
+          </OverlayBody>
+          <OverlayFooter>
+            <Button text="Cancel" onClick={onDismiss} />
+            <Button
+              status={this.submitButtonStatus}
+              text="Create"
+              onClick={this.handleSubmit}
+              color={ComponentColor.Success}
+            />
+          </OverlayFooter>
+        </Form>
+      </OverlayContainer>
+    )
+  }
+
+  private handleSelectBucket = (bucket: Bucket) => {
+    const {onSetBucketInfo, onSetScraperTargetBucket} = this.props
+    const {organization, organizationID, id, name} = bucket
+
+    onSetBucketInfo(organization, organizationID, name, id)
+    onSetScraperTargetBucket(bucket.name)
+  }
+
+  private get submitButtonStatus(): ComponentStatus {
+    if (
+      !this.props.url ||
+      !this.props.name ||
+      !this.props.buckets ||
+      !this.props.buckets.length
+    ) {
+      return ComponentStatus.Disabled
+    }
+    return ComponentStatus.Default
+  }
+
+  private handleSubmit = async () => {
+    try {
+      const {onSaveScraperTarget, onDismiss, notify} = this.props
+      await onSaveScraperTarget()
+      onDismiss()
+      notify(scraperCreateSuccess())
+    } catch (e) {
+      console.error(e)
+      notify(scraperCreateFailed())
+    }
+  }
+}
+
+const mstp = ({
+  dataLoading: {
+    dataLoaders: {scraperTarget},
+    steps: {bucket},
+  },
+}: AppState): StateProps => {
+  return {
+    currentBucket: bucket,
+    scraperBucket: scraperTarget.bucket,
+    url: scraperTarget.url,
+    name: scraperTarget.name,
+  }
+}
+
+const mdtp: DispatchProps = {
+  onSetScraperTargetBucket: setScraperTargetBucket,
+  onSetScraperTargetURL: setScraperTargetURL,
+  onSaveScraperTarget: saveScraperTarget,
+  onSetBucketInfo: setBucketInfo,
+  onSetScraperTargetName: setScraperTargetName,
+  notify: notifyAction,
+}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(Scraping)
diff --git a/ui/src/organizations/actions/orgView.ts b/ui/src/organizations/actions/orgView.ts
index c25fb1d510d..2df03be4aac 100644
--- a/ui/src/organizations/actions/orgView.ts
+++ b/ui/src/organizations/actions/orgView.ts
@@ -1,4 +1,5 @@
 import {Task, Organization} from 'src/types/v2'
+import {ScraperTargetRequest} from '@influxdata/influx'
 
 import {client} from 'src/utils/api'
 
@@ -26,3 +27,7 @@ export const getTasks = (org: Organization) => async dispatch => {
 
   dispatch(populateTasks(tasksWithOrg))
 }
+
+export const createScraper = (scraper: ScraperTargetRequest) => async () => {
+  await client.scrapers.create(scraper)
+}
diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx
index 212fb5871ce..88363d8fd33 100644
--- a/ui/src/organizations/components/Scrapers.tsx
+++ b/ui/src/organizations/components/Scrapers.tsx
@@ -1,6 +1,7 @@
 // Libraries
 import _ from 'lodash'
 import React, {PureComponent, ChangeEvent} from 'react'
+import {connect} from 'react-redux'
 
 // APIs
 import {client} from 'src/utils/api'
@@ -13,11 +14,18 @@ import {
   IconFont,
   ComponentSize,
 } from '@influxdata/clockface'
-import {EmptyState, Input, InputType, Tabs} from 'src/clockface'
-import DataLoadersWizard from 'src/dataLoaders/components/DataLoadersWizard'
+import {
+  EmptyState,
+  Input,
+  InputType,
+  Tabs,
+  OverlayTechnology,
+} from 'src/clockface'
+import CreateScraperOverlay from 'src/dataLoaders/components/CreateScraperOverlay'
 
 // Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
+import {createScraper} from 'src/organizations/actions/orgView'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -25,7 +33,6 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 // Types
 import {ScraperTargetResponse, Bucket} from '@influxdata/influx'
 import {OverlayState} from 'src/types'
-import {DataLoaderType, DataLoaderStep} from 'src/types/v2/dataLoaders'
 import {
   scraperDeleteSuccess,
   scraperDeleteFailed,
@@ -34,7 +41,7 @@ import {
 } from 'src/shared/copy/v2/notifications'
 import FilterList from 'src/shared/components/Filter'
 
-interface Props {
+interface OwnProps {
   scrapers: ScraperTargetResponse[]
   onChange: () => void
   orgName: string
@@ -42,13 +49,18 @@ interface Props {
   notify: NotificationsActions.PublishNotificationActionCreator
 }
 
+interface DispatchProps {
+  createScraper: typeof createScraper
+}
+
+type Props = OwnProps & DispatchProps
 interface State {
   overlayState: OverlayState
   searchTerm: string
 }
 
 @ErrorHandling
-export default class Scrapers extends PureComponent<Props, State> {
+class Scrapers extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
 
@@ -90,13 +102,13 @@ export default class Scrapers extends PureComponent<Props, State> {
             />
           )}
         </FilterList>
-        <DataLoadersWizard
-          visible={this.isOverlayVisible}
-          onCompleteSetup={this.handleDismissDataLoaders}
-          startingType={DataLoaderType.Scraping}
-          startingStep={DataLoaderStep.Configure}
-          buckets={this.buckets}
-        />
+        <OverlayTechnology visible={this.isOverlayVisible}>
+          <CreateScraperOverlay
+            buckets={this.buckets}
+            onDismiss={this.handleDismissOverlay}
+            onCreate={this.handleCreateScraper}
+          />
+        </OverlayTechnology>
       </>
     )
   }
@@ -114,24 +126,28 @@ export default class Scrapers extends PureComponent<Props, State> {
     return this.state.overlayState === OverlayState.Open
   }
 
+  private handleShowOverlay = () => {
+    this.setState({overlayState: OverlayState.Open})
+  }
+
+  private handleDismissOverlay = () => {
+    this.setState({overlayState: OverlayState.Closed})
+    this.props.onChange()
+  }
+
   private get createScraperButton(): JSX.Element {
     return (
       <Button
         text="Create Scraper"
         icon={IconFont.Plus}
         color={ComponentColor.Primary}
-        onClick={this.handleAddScraper}
+        onClick={this.handleShowOverlay}
       />
     )
   }
 
-  private handleAddScraper = () => {
-    this.setState({overlayState: OverlayState.Open})
-  }
-
-  private handleDismissDataLoaders = () => {
-    this.setState({overlayState: OverlayState.Closed})
-    this.props.onChange()
+  private handleCreateScraper = (scraper: ScraperTargetResponse): void => {
+    this.props.createScraper(scraper)
   }
 
   private get emptyState(): JSX.Element {
@@ -142,7 +158,7 @@ export default class Scrapers extends PureComponent<Props, State> {
       return (
         <EmptyState size={ComponentSize.Medium}>
           <EmptyState.Text
-            text={`${orgName} does not own any Scrapers, why not create one?`}
+            text={`${orgName} does not own any Scrapers , why not create one?`}
             highlightWords={['Scrapers']}
           />
           {this.createScraperButton}
@@ -152,7 +168,7 @@ export default class Scrapers extends PureComponent<Props, State> {
 
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text text="No Scraper buckets match your query" />
+        <EmptyState.Text text="No Scrapers match your query" />
       </EmptyState>
     )
   }
@@ -189,3 +205,12 @@ export default class Scrapers extends PureComponent<Props, State> {
     this.setState({searchTerm: e.target.value})
   }
 }
+
+const mdtp = {
+  createScraper: createScraper,
+}
+
+export default connect<{}, DispatchProps, OwnProps>(
+  null,
+  mdtp
+)(Scrapers)

From bd2e72fc2836ed8208cba963d76c971bd50b4d5c Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 18:41:07 -0800
Subject: [PATCH 03/17] Simplify Bucket selection dropdown

---
 .../components/BucketsDropdown.tsx            | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/ui/src/dataLoaders/components/BucketsDropdown.tsx b/ui/src/dataLoaders/components/BucketsDropdown.tsx
index a43d1e59951..48ee4b13810 100644
--- a/ui/src/dataLoaders/components/BucketsDropdown.tsx
+++ b/ui/src/dataLoaders/components/BucketsDropdown.tsx
@@ -8,19 +8,21 @@ import {Dropdown, ComponentStatus} from 'src/clockface'
 import {Bucket} from '@influxdata/influx'
 
 interface Props {
-  selected: string
+  selectedBucketID: string
   buckets: Bucket[]
   onSelectBucket: (bucket: Bucket) => void
 }
 
 class BucketsDropdown extends PureComponent<Props> {
   public render() {
+    const {selectedBucketID, onSelectBucket} = this.props
+
     return (
       <Dropdown
         titleText={this.title}
         status={this.status}
-        selectedID={this.selectedID}
-        onChange={this.handleSelectBucket}
+        selectedID={selectedBucketID}
+        onChange={onSelectBucket}
       >
         {this.dropdownBuckets}
       </Dropdown>
@@ -43,10 +45,6 @@ class BucketsDropdown extends PureComponent<Props> {
     return ComponentStatus.Default
   }
 
-  private get selectedID(): string {
-    return this.props.selected || ''
-  }
-
   private get isBucketsEmpty(): boolean {
     const {buckets} = this.props
     return !buckets || !buckets.length
@@ -59,17 +57,11 @@ class BucketsDropdown extends PureComponent<Props> {
     }
 
     return buckets.map(b => (
-      <Dropdown.Item key={b.name} value={b.name} id={b.name}>
+      <Dropdown.Item key={b.name} value={b} id={b.id}>
         {b.name}
       </Dropdown.Item>
     ))
   }
-
-  private handleSelectBucket = (bucketName: string) => {
-    const bucket = this.props.buckets.find(b => b.name === bucketName)
-
-    this.props.onSelectBucket(bucket)
-  }
 }
 
 export default BucketsDropdown

From cecc08db6480f6e05721b2274a1321451d6f34a1 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 18:41:53 -0800
Subject: [PATCH 04/17] Relocate create scraper overlay component

---
 .../components/CreateScraperOverlay.tsx       | 176 ------------------
 .../components/CreateScraperOverlay.tsx       | 143 ++++++++++++++
 ui/src/organizations/components/Scrapers.tsx  |   4 +-
 3 files changed, 145 insertions(+), 178 deletions(-)
 delete mode 100644 ui/src/dataLoaders/components/CreateScraperOverlay.tsx
 create mode 100644 ui/src/organizations/components/CreateScraperOverlay.tsx

diff --git a/ui/src/dataLoaders/components/CreateScraperOverlay.tsx b/ui/src/dataLoaders/components/CreateScraperOverlay.tsx
deleted file mode 100644
index f0f7f150df8..00000000000
--- a/ui/src/dataLoaders/components/CreateScraperOverlay.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
-import _ from 'lodash'
-
-// Components
-import {Button, ComponentColor, ComponentStatus} from '@influxdata/clockface'
-import {
-  Form,
-  OverlayContainer,
-  OverlayHeading,
-  OverlayBody,
-  OverlayFooter,
-} from 'src/clockface'
-import ScraperTarget from 'src/dataLoaders/components/configureStep/ScraperTarget'
-
-// Actions
-import {
-  setScraperTargetBucket,
-  setScraperTargetURL,
-  setScraperTargetName,
-  saveScraperTarget,
-} from 'src/dataLoaders/actions/dataLoaders'
-import {setBucketInfo} from 'src/dataLoaders/actions/steps'
-import {notify as notifyAction, notify} from 'src/shared/actions/notifications'
-
-// Types
-import {Bucket, ScraperTargetResponse} from '@influxdata/influx'
-import {AppState} from 'src/types/v2/index'
-import {
-  scraperCreateSuccess,
-  scraperCreateFailed,
-} from 'src/shared/copy/v2/notifications'
-
-interface OwnProps {
-  onDismiss: () => void
-  buckets: Bucket[]
-  onCreate: (scraper: ScraperTargetResponse) => void
-}
-
-interface DispatchProps {
-  onSetScraperTargetBucket: typeof setScraperTargetBucket
-  onSetScraperTargetURL: typeof setScraperTargetURL
-  onSetScraperTargetName: typeof setScraperTargetName
-  onSaveScraperTarget: typeof saveScraperTarget
-  onSetBucketInfo: typeof setBucketInfo
-  notify: typeof notifyAction
-}
-
-interface StateProps {
-  scraperBucket: string
-  url: string
-  currentBucket: string
-  name: string
-}
-
-type Props = OwnProps & DispatchProps & StateProps
-
-export class Scraping extends PureComponent<Props> {
-  public componentDidMount() {
-    const {
-      buckets,
-      scraperBucket,
-      currentBucket,
-      onSetScraperTargetBucket,
-    } = this.props
-
-    if (!scraperBucket) {
-      onSetScraperTargetBucket(currentBucket || _.get(buckets, '0.name', ''))
-    }
-  }
-
-  public render() {
-    const {
-      onDismiss,
-      scraperBucket,
-      onSetScraperTargetURL,
-      onSetScraperTargetName,
-      url,
-      buckets,
-      name,
-    } = this.props
-
-    return (
-      <OverlayContainer maxWidth={600}>
-        <OverlayHeading title="Create Scraper" onDismiss={onDismiss} />
-        <Form onSubmit={this.handleSubmit}>
-          <OverlayBody>
-            <h5 className="wizard-step--sub-title">
-              Scrapers collect data from multiple targets at regular intervals
-              and to write to a bucket
-            </h5>
-            <ScraperTarget
-              bucket={scraperBucket}
-              buckets={buckets}
-              onSelectBucket={this.handleSelectBucket}
-              onChangeURL={onSetScraperTargetURL}
-              onChangeName={onSetScraperTargetName}
-              url={url}
-              name={name}
-            />
-          </OverlayBody>
-          <OverlayFooter>
-            <Button text="Cancel" onClick={onDismiss} />
-            <Button
-              status={this.submitButtonStatus}
-              text="Create"
-              onClick={this.handleSubmit}
-              color={ComponentColor.Success}
-            />
-          </OverlayFooter>
-        </Form>
-      </OverlayContainer>
-    )
-  }
-
-  private handleSelectBucket = (bucket: Bucket) => {
-    const {onSetBucketInfo, onSetScraperTargetBucket} = this.props
-    const {organization, organizationID, id, name} = bucket
-
-    onSetBucketInfo(organization, organizationID, name, id)
-    onSetScraperTargetBucket(bucket.name)
-  }
-
-  private get submitButtonStatus(): ComponentStatus {
-    if (
-      !this.props.url ||
-      !this.props.name ||
-      !this.props.buckets ||
-      !this.props.buckets.length
-    ) {
-      return ComponentStatus.Disabled
-    }
-    return ComponentStatus.Default
-  }
-
-  private handleSubmit = async () => {
-    try {
-      const {onSaveScraperTarget, onDismiss, notify} = this.props
-      await onSaveScraperTarget()
-      onDismiss()
-      notify(scraperCreateSuccess())
-    } catch (e) {
-      console.error(e)
-      notify(scraperCreateFailed())
-    }
-  }
-}
-
-const mstp = ({
-  dataLoading: {
-    dataLoaders: {scraperTarget},
-    steps: {bucket},
-  },
-}: AppState): StateProps => {
-  return {
-    currentBucket: bucket,
-    scraperBucket: scraperTarget.bucket,
-    url: scraperTarget.url,
-    name: scraperTarget.name,
-  }
-}
-
-const mdtp: DispatchProps = {
-  onSetScraperTargetBucket: setScraperTargetBucket,
-  onSetScraperTargetURL: setScraperTargetURL,
-  onSaveScraperTarget: saveScraperTarget,
-  onSetBucketInfo: setBucketInfo,
-  onSetScraperTargetName: setScraperTargetName,
-  notify: notifyAction,
-}
-
-export default connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(Scraping)
diff --git a/ui/src/organizations/components/CreateScraperOverlay.tsx b/ui/src/organizations/components/CreateScraperOverlay.tsx
new file mode 100644
index 00000000000..fdedc75d215
--- /dev/null
+++ b/ui/src/organizations/components/CreateScraperOverlay.tsx
@@ -0,0 +1,143 @@
+// Libraries
+import React, {PureComponent, ChangeEvent} from 'react'
+import {connect} from 'react-redux'
+import _ from 'lodash'
+
+// Components
+import {Button, ComponentColor, ComponentStatus} from '@influxdata/clockface'
+import {
+  Form,
+  OverlayContainer,
+  OverlayHeading,
+  OverlayBody,
+  OverlayFooter,
+} from 'src/clockface'
+import CreateScraperForm from 'src/organizations/components/CreateScraperForm'
+
+// Actions
+import {notify as notifyAction, notify} from 'src/shared/actions/notifications'
+
+// Types
+import {Bucket, ScraperTargetRequest} from '@influxdata/influx'
+import {
+  scraperCreateSuccess,
+  scraperCreateFailed,
+} from 'src/shared/copy/v2/notifications'
+
+interface OwnProps {
+  buckets: Bucket[]
+  onCreate: (scraper: ScraperTargetRequest) => void
+  onDismiss: () => void
+}
+
+interface DispatchProps {
+  notify: typeof notifyAction
+}
+
+type Props = OwnProps & DispatchProps
+
+interface State {
+  scraper: ScraperTargetRequest
+}
+
+class CreateScraperOverlay extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {
+      scraper: {
+        name: 'My Cool Scraper',
+        type: ScraperTargetRequest.TypeEnum.Prometheus,
+        url: 'http://localhost:9999/metrics',
+        orgID: this.props.buckets[0].organizationID,
+        bucketID: this.props.buckets[0].id,
+      },
+    }
+  }
+
+  public render() {
+    const {scraper} = this.state
+    const {onDismiss, buckets} = this.props
+
+    return (
+      <OverlayContainer maxWidth={600}>
+        <OverlayHeading title="Create Scraper" onDismiss={onDismiss} />
+        <Form onSubmit={this.handleSubmit}>
+          <OverlayBody>
+            <h5 className="wizard-step--sub-title">
+              Scrapers collect data from multiple targets at regular intervals
+              and to write to a bucket
+            </h5>
+            <CreateScraperForm
+              buckets={buckets}
+              url={scraper.url}
+              name={scraper.name}
+              selectedBucketID={scraper.bucketID}
+              onInputChange={this.handleInputChange}
+              onSelectBucket={this.handleSelectBucket}
+            />
+          </OverlayBody>
+          <OverlayFooter>
+            <Button text="Cancel" onClick={onDismiss} />
+            <Button
+              status={this.submitButtonStatus}
+              text="Create"
+              onClick={this.handleSubmit}
+              color={ComponentColor.Success}
+            />
+          </OverlayFooter>
+        </Form>
+      </OverlayContainer>
+    )
+  }
+
+  private handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    const key = e.target.name
+    const scraper = {...this.state.scraper, [key]: value}
+
+    this.setState({
+      scraper,
+    })
+  }
+
+  private handleSelectBucket = (bucket: Bucket) => {
+    const {organizationID, id} = bucket
+    const scraper = {...this.state.scraper, orgID: organizationID, bucketID: id}
+
+    this.setState({scraper})
+  }
+
+  private get submitButtonStatus(): ComponentStatus {
+    const {scraper} = this.state
+
+    if (!scraper.url || !scraper.name || !scraper.bucketID) {
+      return ComponentStatus.Disabled
+    }
+
+    return ComponentStatus.Default
+  }
+
+  private handleSubmit = async () => {
+    try {
+      const {onCreate, onDismiss, notify} = this.props
+      const {scraper} = this.state
+
+      await onCreate(scraper)
+      onDismiss()
+      notify(scraperCreateSuccess())
+    } catch (e) {
+      console.error(e)
+      notify(scraperCreateFailed())
+    }
+  }
+}
+
+const mdtp: DispatchProps = {
+  notify: notifyAction,
+}
+
+export default connect<null, DispatchProps, OwnProps>(
+  null,
+  mdtp
+)(CreateScraperOverlay)
diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx
index 88363d8fd33..c6c0d6abfae 100644
--- a/ui/src/organizations/components/Scrapers.tsx
+++ b/ui/src/organizations/components/Scrapers.tsx
@@ -21,7 +21,7 @@ import {
   Tabs,
   OverlayTechnology,
 } from 'src/clockface'
-import CreateScraperOverlay from 'src/dataLoaders/components/CreateScraperOverlay'
+import CreateScraperOverlay from 'src/organizations/components/CreateScraperOverlay'
 
 // Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
@@ -105,8 +105,8 @@ class Scrapers extends PureComponent<Props, State> {
         <OverlayTechnology visible={this.isOverlayVisible}>
           <CreateScraperOverlay
             buckets={this.buckets}
-            onDismiss={this.handleDismissOverlay}
             onCreate={this.handleCreateScraper}
+            onDismiss={this.handleDismissOverlay}
           />
         </OverlayTechnology>
       </>

From be5c9fecf7e034ff596f151113f2d45e7566bc3d Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 18:42:05 -0800
Subject: [PATCH 05/17] Introduce create scraper form component

---
 .../components/CreateScraperForm.tsx          | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 ui/src/organizations/components/CreateScraperForm.tsx

diff --git a/ui/src/organizations/components/CreateScraperForm.tsx b/ui/src/organizations/components/CreateScraperForm.tsx
new file mode 100644
index 00000000000..e6cd7914d39
--- /dev/null
+++ b/ui/src/organizations/components/CreateScraperForm.tsx
@@ -0,0 +1,112 @@
+// Libraries
+import React, {PureComponent, ChangeEvent} from 'react'
+import _ from 'lodash'
+
+// Components
+import {Form, Input, Columns, Grid} from 'src/clockface'
+import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
+import {Bucket} from '@influxdata/influx'
+
+interface Props {
+  buckets: Bucket[]
+  name: string
+  url: string
+  selectedBucketID: string
+  onInputChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onSelectBucket: (bucket: Bucket) => void
+}
+
+export class ScraperTarget extends PureComponent<Props> {
+  constructor(props: Props) {
+    super(props)
+  }
+
+  public render() {
+    const {
+      onInputChange,
+      url,
+      name,
+      onSelectBucket,
+      buckets,
+      selectedBucketID,
+    } = this.props
+
+    return (
+      <Grid>
+        <Grid.Row>
+          <Grid.Column widthSM={Columns.Six}>
+            <Form.ValidationElement
+              label="Name"
+              validationFunc={this.handleNameValidation}
+              value={name}
+            >
+              {status => (
+                <Input
+                  value={name}
+                  name="name"
+                  onChange={onInputChange}
+                  titleText="Name"
+                  placeholder="Name this scraper"
+                  autoFocus={true}
+                  status={status}
+                />
+              )}
+            </Form.ValidationElement>
+          </Grid.Column>
+          <Grid.Column widthSM={Columns.Six}>
+            <Form.Element label="Bucket to store scraped metrics">
+              <BucketDropdown
+                selectedBucketID={selectedBucketID}
+                buckets={buckets}
+                onSelectBucket={onSelectBucket}
+              />
+            </Form.Element>
+          </Grid.Column>
+          <Grid.Column widthSM={Columns.Twelve}>
+            <Form.ValidationElement
+              label="Target URL"
+              validationFunc={this.handleUrlValidation}
+              value={url}
+            >
+              {status => (
+                <Input
+                  value={url}
+                  name="url"
+                  placeholder="http://"
+                  onChange={onInputChange}
+                  titleText="Target URL"
+                  status={status}
+                />
+              )}
+            </Form.ValidationElement>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    )
+  }
+
+  private handleNameValidation = (name: string): string | null => {
+    if (!name) {
+      return 'Name cannot be empty'
+    }
+
+    return null
+  }
+
+  private handleUrlValidation = (url: string): string | null => {
+    if (!url) {
+      return 'Target URL cannot be empty'
+    }
+
+    const isURLValid =
+      _.startsWith('http://', url) || _.startsWith('https://', url)
+
+    if (!isURLValid) {
+      return 'Target URL must begin with "http://"'
+    }
+
+    return null
+  }
+}
+
+export default ScraperTarget

From c7e22f070117ea51ba9c57714ff5864de41959bc Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 18:44:29 -0800
Subject: [PATCH 06/17] Add missing blank header cell to scrapers table

---
 ui/src/organizations/components/ScraperList.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/organizations/components/ScraperList.tsx b/ui/src/organizations/components/ScraperList.tsx
index 42616633b2f..1f16abe9e0e 100644
--- a/ui/src/organizations/components/ScraperList.tsx
+++ b/ui/src/organizations/components/ScraperList.tsx
@@ -23,9 +23,10 @@ export default class ScraperList extends PureComponent<Props> {
       <>
         <IndexList>
           <IndexList.Header>
-            <IndexList.HeaderCell columnName="Name" width="33%" />
-            <IndexList.HeaderCell columnName="URL" width="34%" />
-            <IndexList.HeaderCell columnName="Bucket" width="33%" />
+            <IndexList.HeaderCell columnName="Name" width="50%" />
+            <IndexList.HeaderCell columnName="Target URL" width="20%" />
+            <IndexList.HeaderCell columnName="Bucket" width="15%" />
+            <IndexList.HeaderCell columnName="" width="15%" />
           </IndexList.Header>
           <IndexList.Body columnCount={3} emptyState={emptyState}>
             {this.scrapersList}

From 0f41edf63edd74c8622a9f068c42aff998154f90 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 18:53:58 -0800
Subject: [PATCH 07/17] Fix URL validation

---
 ui/src/organizations/components/CreateScraperForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/organizations/components/CreateScraperForm.tsx b/ui/src/organizations/components/CreateScraperForm.tsx
index e6cd7914d39..b6f53fa3743 100644
--- a/ui/src/organizations/components/CreateScraperForm.tsx
+++ b/ui/src/organizations/components/CreateScraperForm.tsx
@@ -99,7 +99,7 @@ export class ScraperTarget extends PureComponent<Props> {
     }
 
     const isURLValid =
-      _.startsWith('http://', url) || _.startsWith('https://', url)
+      _.startsWith(url, 'http://') || _.startsWith(url, 'https://')
 
     if (!isURLValid) {
       return 'Target URL must begin with "http://"'

From 8f70ff7f98f232958389cb2ae530247b84ca59a8 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 1 Mar 2019 19:12:52 -0800
Subject: [PATCH 08/17] WIP cleanup

---
 .../select/SelectCollectorsStep.tsx                 |  2 +-
 .../collectorsWizard/select/StreamingSelector.tsx   | 12 +++++++++---
 .../components/configureStep/ScraperTarget.tsx      | 10 ++++++++--
 .../components/__snapshots__/Scrapers.test.tsx.snap | 13 +++++++++----
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/ui/src/dataLoaders/components/collectorsWizard/select/SelectCollectorsStep.tsx b/ui/src/dataLoaders/components/collectorsWizard/select/SelectCollectorsStep.tsx
index db15c95ce35..f4a9f995933 100644
--- a/ui/src/dataLoaders/components/collectorsWizard/select/SelectCollectorsStep.tsx
+++ b/ui/src/dataLoaders/components/collectorsWizard/select/SelectCollectorsStep.tsx
@@ -65,7 +65,7 @@ export class SelectCollectorsStep extends PureComponent<Props> {
             telegrafPlugins={this.props.telegrafPlugins}
             onTogglePluginBundle={this.handleTogglePluginBundle}
             buckets={this.props.buckets}
-            bucket={this.props.bucket}
+            selectedBucketName={this.props.bucket}
             onSelectBucket={this.handleSelectBucket}
           />
         </FancyScrollbar>
diff --git a/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx b/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx
index a68924ec8ce..649d520bd3b 100644
--- a/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx
+++ b/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx
@@ -30,7 +30,7 @@ import {Bucket} from '@influxdata/influx'
 
 export interface Props {
   buckets: Bucket[]
-  bucket: string
+  selectedBucketName: string
   pluginBundles: BundleName[]
   telegrafPlugins: TelegrafPlugin[]
   onTogglePluginBundle: (telegrafPlugin: string, isSelected: boolean) => void
@@ -68,7 +68,7 @@ class StreamingSelector extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {bucket, buckets} = this.props
+    const {buckets} = this.props
     const {searchTerm} = this.state
 
     return (
@@ -77,7 +77,7 @@ class StreamingSelector extends PureComponent<Props, State> {
           <Grid.Column widthSM={Columns.Five}>
             <FormElement label="Bucket">
               <BucketDropdown
-                selected={bucket}
+                selectedBucketID={this.selectedBucketID}
                 buckets={buckets}
                 onSelectBucket={this.handleSelectBucket}
               />
@@ -117,6 +117,12 @@ class StreamingSelector extends PureComponent<Props, State> {
     )
   }
 
+  private get selectedBucketID(): string {
+    const {buckets, selectedBucketName} = this.props
+
+    return buckets.find(b => b.name === selectedBucketName).id
+  }
+
   private handleSelectBucket = (bucket: Bucket) => {
     this.props.onSelectBucket(bucket)
   }
diff --git a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx b/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
index af19316e9ed..4cdda9c0891 100644
--- a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
+++ b/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
@@ -29,7 +29,7 @@ export class ScraperTarget extends PureComponent<Props> {
   }
 
   public render() {
-    const {onSelectBucket, url, name, bucket, buckets} = this.props
+    const {onSelectBucket, url, name, buckets} = this.props
     return (
       <Grid>
         <Grid.Row>
@@ -52,7 +52,7 @@ export class ScraperTarget extends PureComponent<Props> {
           <Grid.Column widthSM={Columns.Six}>
             <Form.Element label="Bucket">
               <BucketDropdown
-                selected={bucket}
+                selectedBucketID={this.selectedBucketID}
                 buckets={buckets}
                 onSelectBucket={onSelectBucket}
               />
@@ -78,6 +78,12 @@ export class ScraperTarget extends PureComponent<Props> {
     )
   }
 
+  private get selectedBucketID(): string {
+    const {buckets, bucket} = this.props
+
+    return buckets.find(b => b.name === bucket).id
+  }
+
   private get urlStatus(): ComponentStatus {
     if (this.urlEmpty) {
       return ComponentStatus.Error
diff --git a/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap b/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap
index ef44c05fef0..1d6d654aa46 100644
--- a/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap
+++ b/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap
@@ -7,17 +7,22 @@ exports[`ScraperList rendering renders 1`] = `
       <IndexListHeaderCell
         alignment="left"
         columnName="Name"
-        width="33%"
+        width="50%"
       />
       <IndexListHeaderCell
         alignment="left"
-        columnName="URL"
-        width="34%"
+        columnName="Target URL"
+        width="20%"
       />
       <IndexListHeaderCell
         alignment="left"
         columnName="Bucket"
-        width="33%"
+        width="15%"
+      />
+      <IndexListHeaderCell
+        alignment="left"
+        columnName=""
+        width="15%"
       />
     </IndexListHeader>
     <IndexListBody

From 8254a60d21e7c9f4d35d06a0246fc847d016d484 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 12:11:30 -0800
Subject: [PATCH 09/17] Use CreateScraperOverlay in buckets list

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 .../components/BucketsDropdown.test.tsx       |  2 +-
 .../components/DataLoaderSwitcher.tsx         | 22 ++----
 .../select/StreamingSelector.test.tsx         |  2 +-
 .../components/CreateScraperOverlay.tsx       | 70 ++++++++++---------
 ui/src/organizations/components/Scrapers.tsx  | 42 +++--------
 5 files changed, 54 insertions(+), 84 deletions(-)

diff --git a/ui/src/dataLoaders/components/BucketsDropdown.test.tsx b/ui/src/dataLoaders/components/BucketsDropdown.test.tsx
index 80a856e5b57..7a8bf0fdd46 100644
--- a/ui/src/dataLoaders/components/BucketsDropdown.test.tsx
+++ b/ui/src/dataLoaders/components/BucketsDropdown.test.tsx
@@ -11,7 +11,7 @@ import {bucket} from 'mocks/dummyData'
 
 const setup = (override = {}) => {
   const props = {
-    selected: '',
+    selectedBucketID: '',
     buckets: [],
     onSelectBucket: jest.fn(),
     ...override,
diff --git a/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx b/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
index 2b39c32780d..2e0ea1ad79f 100644
--- a/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
+++ b/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
@@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'
 import _ from 'lodash'
 
 // Components
-import DataLoadersWizard from 'src/dataLoaders/components/DataLoadersWizard'
+import CreateScraperOverlay from 'src/organizations/components/CreateScraperOverlay'
 import CollectorsWizard from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
 import LineProtocolWizard from 'src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard'
 
@@ -23,27 +23,17 @@ interface Props {
 
 class DataLoaderSwitcher extends PureComponent<Props> {
   public render() {
-    const {
-      buckets,
-      type,
-      visible,
-      onCompleteSetup,
-      startingStep,
-      startingSubstep,
-      startingType,
-    } = this.props
+    const {buckets, type, visible, onCompleteSetup} = this.props
 
     switch (type) {
-      case DataLoaderType.Scraping:
       case DataLoaderType.Empty:
+        return <div />
+      case DataLoaderType.Scraping:
         return (
-          <DataLoadersWizard
+          <CreateScraperOverlay
             visible={visible}
-            onCompleteSetup={onCompleteSetup}
             buckets={buckets}
-            startingStep={startingStep}
-            startingSubstep={startingSubstep}
-            startingType={startingType}
+            onDismiss={onCompleteSetup}
           />
         )
       case DataLoaderType.Streaming:
diff --git a/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx b/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx
index 369b0c087b9..c44f5529d0c 100644
--- a/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx
+++ b/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx
@@ -17,7 +17,7 @@ const setup = (override = {}) => {
     onTogglePluginBundle: jest.fn(),
     buckets: [],
     bucket: '',
-    selectedBucket: '',
+    selectedBucketName: '',
     onSelectBucket: jest.fn(),
     ...override,
   }
diff --git a/ui/src/organizations/components/CreateScraperOverlay.tsx b/ui/src/organizations/components/CreateScraperOverlay.tsx
index fdedc75d215..bc8b546baf4 100644
--- a/ui/src/organizations/components/CreateScraperOverlay.tsx
+++ b/ui/src/organizations/components/CreateScraperOverlay.tsx
@@ -11,11 +11,13 @@ import {
   OverlayHeading,
   OverlayBody,
   OverlayFooter,
+  OverlayTechnology,
 } from 'src/clockface'
 import CreateScraperForm from 'src/organizations/components/CreateScraperForm'
 
 // Actions
 import {notify as notifyAction, notify} from 'src/shared/actions/notifications'
+import {createScraper} from 'src/organizations/actions/orgView'
 
 // Types
 import {Bucket, ScraperTargetRequest} from '@influxdata/influx'
@@ -25,13 +27,14 @@ import {
 } from 'src/shared/copy/v2/notifications'
 
 interface OwnProps {
+  visible: boolean
   buckets: Bucket[]
-  onCreate: (scraper: ScraperTargetRequest) => void
   onDismiss: () => void
 }
 
 interface DispatchProps {
   notify: typeof notifyAction
+  onCreateScraper: typeof createScraper
 }
 
 type Props = OwnProps & DispatchProps
@@ -57,37 +60,39 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
 
   public render() {
     const {scraper} = this.state
-    const {onDismiss, buckets} = this.props
+    const {onDismiss, buckets, visible} = this.props
 
     return (
-      <OverlayContainer maxWidth={600}>
-        <OverlayHeading title="Create Scraper" onDismiss={onDismiss} />
-        <Form onSubmit={this.handleSubmit}>
-          <OverlayBody>
-            <h5 className="wizard-step--sub-title">
-              Scrapers collect data from multiple targets at regular intervals
-              and to write to a bucket
-            </h5>
-            <CreateScraperForm
-              buckets={buckets}
-              url={scraper.url}
-              name={scraper.name}
-              selectedBucketID={scraper.bucketID}
-              onInputChange={this.handleInputChange}
-              onSelectBucket={this.handleSelectBucket}
-            />
-          </OverlayBody>
-          <OverlayFooter>
-            <Button text="Cancel" onClick={onDismiss} />
-            <Button
-              status={this.submitButtonStatus}
-              text="Create"
-              onClick={this.handleSubmit}
-              color={ComponentColor.Success}
-            />
-          </OverlayFooter>
-        </Form>
-      </OverlayContainer>
+      <OverlayTechnology visible={visible}>
+        <OverlayContainer maxWidth={600}>
+          <OverlayHeading title="Create Scraper" onDismiss={onDismiss} />
+          <Form onSubmit={this.handleSubmit}>
+            <OverlayBody>
+              <h5 className="wizard-step--sub-title">
+                Scrapers collect data from multiple targets at regular intervals
+                and to write to a bucket
+              </h5>
+              <CreateScraperForm
+                buckets={buckets}
+                url={scraper.url}
+                name={scraper.name}
+                selectedBucketID={scraper.bucketID}
+                onInputChange={this.handleInputChange}
+                onSelectBucket={this.handleSelectBucket}
+              />
+            </OverlayBody>
+            <OverlayFooter>
+              <Button text="Cancel" onClick={onDismiss} />
+              <Button
+                status={this.submitButtonStatus}
+                text="Create"
+                onClick={this.handleSubmit}
+                color={ComponentColor.Success}
+              />
+            </OverlayFooter>
+          </Form>
+        </OverlayContainer>
+      </OverlayTechnology>
     )
   }
 
@@ -120,10 +125,10 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
 
   private handleSubmit = async () => {
     try {
-      const {onCreate, onDismiss, notify} = this.props
+      const {onCreateScraper, onDismiss, notify} = this.props
       const {scraper} = this.state
 
-      await onCreate(scraper)
+      await onCreateScraper(scraper)
       onDismiss()
       notify(scraperCreateSuccess())
     } catch (e) {
@@ -135,6 +140,7 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
 
 const mdtp: DispatchProps = {
   notify: notifyAction,
+  onCreateScraper: createScraper,
 }
 
 export default connect<null, DispatchProps, OwnProps>(
diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx
index c6c0d6abfae..357b851aed9 100644
--- a/ui/src/organizations/components/Scrapers.tsx
+++ b/ui/src/organizations/components/Scrapers.tsx
@@ -1,7 +1,6 @@
 // Libraries
 import _ from 'lodash'
 import React, {PureComponent, ChangeEvent} from 'react'
-import {connect} from 'react-redux'
 
 // APIs
 import {client} from 'src/utils/api'
@@ -14,18 +13,11 @@ import {
   IconFont,
   ComponentSize,
 } from '@influxdata/clockface'
-import {
-  EmptyState,
-  Input,
-  InputType,
-  Tabs,
-  OverlayTechnology,
-} from 'src/clockface'
+import {EmptyState, Input, InputType, Tabs} from 'src/clockface'
 import CreateScraperOverlay from 'src/organizations/components/CreateScraperOverlay'
 
 // Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
-import {createScraper} from 'src/organizations/actions/orgView'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -41,7 +33,7 @@ import {
 } from 'src/shared/copy/v2/notifications'
 import FilterList from 'src/shared/components/Filter'
 
-interface OwnProps {
+interface Props {
   scrapers: ScraperTargetResponse[]
   onChange: () => void
   orgName: string
@@ -49,11 +41,6 @@ interface OwnProps {
   notify: NotificationsActions.PublishNotificationActionCreator
 }
 
-interface DispatchProps {
-  createScraper: typeof createScraper
-}
-
-type Props = OwnProps & DispatchProps
 interface State {
   overlayState: OverlayState
   searchTerm: string
@@ -102,13 +89,11 @@ class Scrapers extends PureComponent<Props, State> {
             />
           )}
         </FilterList>
-        <OverlayTechnology visible={this.isOverlayVisible}>
-          <CreateScraperOverlay
-            buckets={this.buckets}
-            onCreate={this.handleCreateScraper}
-            onDismiss={this.handleDismissOverlay}
-          />
-        </OverlayTechnology>
+        <CreateScraperOverlay
+          visible={this.isOverlayVisible}
+          buckets={this.buckets}
+          onDismiss={this.handleDismissOverlay}
+        />
       </>
     )
   }
@@ -146,10 +131,6 @@ class Scrapers extends PureComponent<Props, State> {
     )
   }
 
-  private handleCreateScraper = (scraper: ScraperTargetResponse): void => {
-    this.props.createScraper(scraper)
-  }
-
   private get emptyState(): JSX.Element {
     const {orgName} = this.props
     const {searchTerm} = this.state
@@ -206,11 +187,4 @@ class Scrapers extends PureComponent<Props, State> {
   }
 }
 
-const mdtp = {
-  createScraper: createScraper,
-}
-
-export default connect<{}, DispatchProps, OwnProps>(
-  null,
-  mdtp
-)(Scrapers)
+export default Scrapers

From 592e301d5a665d3b642235c68ef8301f83f74064 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 12:20:09 -0800
Subject: [PATCH 10/17] Remove unused components and update tests a little bit

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 .../components/DataLoaderSwitcher.test.tsx    |  25 +-
 .../components/DataLoaderSwitcher.tsx         |   2 +-
 .../components/DataLoadersWizard.tsx          | 224 ------------------
 .../dataLoaders/components/StepSwitcher.tsx   |  56 -----
 .../ConfigureDataSourceStep.test.tsx          |  51 ----
 .../configureStep/ConfigureDataSourceStep.tsx |  55 -----
 .../ConfigureDataSourceSwitcher.tsx           |  36 ---
 .../configureStep/ScraperTarget.test.tsx      |  54 -----
 .../configureStep/ScraperTarget.tsx           | 119 ----------
 .../components/configureStep/Scraping.tsx     | 169 -------------
 10 files changed, 20 insertions(+), 771 deletions(-)
 delete mode 100644 ui/src/dataLoaders/components/DataLoadersWizard.tsx
 delete mode 100644 ui/src/dataLoaders/components/StepSwitcher.tsx
 delete mode 100644 ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.test.tsx
 delete mode 100644 ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.tsx
 delete mode 100644 ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx
 delete mode 100644 ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx
 delete mode 100644 ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
 delete mode 100644 ui/src/dataLoaders/components/configureStep/Scraping.tsx

diff --git a/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx b/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx
index 22df7692550..a0dc604dd30 100644
--- a/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx
+++ b/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx
@@ -4,7 +4,7 @@ import {shallow} from 'enzyme'
 
 // Components
 import DataLoaderSwitcher from 'src/dataLoaders/components/DataLoaderSwitcher'
-import DataLoadersWizard from 'src/dataLoaders/components/DataLoadersWizard'
+import CreateScraperOverlay from 'src/organizations/components/CreateScraperOverlay'
 import CollectorsWizard from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
 import LineProtocolWizard from 'src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard'
 
@@ -26,13 +26,26 @@ const setup = (override = {}) => {
 }
 
 describe('DataLoading.Components.DataLoaderSwitcher', () => {
-  it('renders data loaders wizard', () => {
-    const {wrapper} = setup()
+  describe('if type is empty', () => {
+    it('renders empty div', () => {
+      const {wrapper} = setup()
 
-    const wizard = wrapper.find(DataLoadersWizard)
+      const emptyDiv = wrapper.find({'data-testid': 'data-loader-empty'})
 
-    expect(wrapper.exists()).toBe(true)
-    expect(wizard.exists()).toBe(true)
+      expect(wrapper.exists()).toBe(true)
+      expect(emptyDiv.exists()).toBe(true)
+    })
+  })
+
+  describe('if type is scraping', () => {
+    it('renders create scraper overlay', () => {
+      const {wrapper} = setup()
+
+      const overlay = wrapper.find(CreateScraperOverlay)
+
+      expect(wrapper.exists()).toBe(true)
+      expect(overlay.exists()).toBe(true)
+    })
   })
 
   describe('if type is streaming', () => {
diff --git a/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx b/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
index 2e0ea1ad79f..a0a52d71b51 100644
--- a/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
+++ b/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
@@ -27,7 +27,7 @@ class DataLoaderSwitcher extends PureComponent<Props> {
 
     switch (type) {
       case DataLoaderType.Empty:
-        return <div />
+        return <div data-testid="data-loader-empty" />
       case DataLoaderType.Scraping:
         return (
           <CreateScraperOverlay
diff --git a/ui/src/dataLoaders/components/DataLoadersWizard.tsx b/ui/src/dataLoaders/components/DataLoadersWizard.tsx
deleted file mode 100644
index 44f33f35897..00000000000
--- a/ui/src/dataLoaders/components/DataLoadersWizard.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
-import _ from 'lodash'
-
-// Components
-import {ErrorHandling} from 'src/shared/decorators/errors'
-import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
-import StepSwitcher from 'src/dataLoaders/components/StepSwitcher'
-
-// Actions
-import {notify as notifyAction} from 'src/shared/actions/notifications'
-import {
-  setBucketInfo,
-  incrementCurrentStepIndex,
-  decrementCurrentStepIndex,
-  setCurrentStepIndex,
-  setSubstepIndex,
-  clearSteps,
-} from 'src/dataLoaders/actions/steps'
-
-import {
-  setDataLoadersType,
-  clearDataLoaders,
-} from 'src/dataLoaders/actions/dataLoaders'
-
-// Types
-import {Links} from 'src/types/v2/links'
-import {DataLoaderType, Substep} from 'src/types/v2/dataLoaders'
-import {Notification, NotificationFunc} from 'src/types'
-import {AppState} from 'src/types/v2'
-import {Bucket} from '@influxdata/influx'
-
-export interface DataLoaderStepProps {
-  links: Links
-  currentStepIndex: number
-  substep: Substep
-  onSetCurrentStepIndex: (stepNumber: number) => void
-  onIncrementCurrentStepIndex: () => void
-  onDecrementCurrentStepIndex: () => void
-  onSetSubstepIndex: (index: number, subStep: Substep) => void
-  notify: (message: Notification | NotificationFunc) => void
-  onCompleteSetup: () => void
-  onExit: () => void
-}
-
-interface OwnProps {
-  onCompleteSetup: () => void
-  visible: boolean
-  buckets: Bucket[]
-  startingType?: DataLoaderType
-  startingStep?: number
-  startingSubstep?: Substep
-}
-
-interface DispatchProps {
-  notify: (message: Notification | NotificationFunc) => void
-  onSetBucketInfo: typeof setBucketInfo
-  onSetDataLoadersType: typeof setDataLoadersType
-  onIncrementCurrentStepIndex: typeof incrementCurrentStepIndex
-  onDecrementCurrentStepIndex: typeof decrementCurrentStepIndex
-  onSetCurrentStepIndex: typeof setCurrentStepIndex
-  onSetSubstepIndex: typeof setSubstepIndex
-  onClearDataLoaders: typeof clearDataLoaders
-  onClearSteps: typeof clearSteps
-}
-
-interface StateProps {
-  links: Links
-  currentStepIndex: number
-  substep: Substep
-  username: string
-  bucket: string
-  org: string
-  type: DataLoaderType
-}
-
-type Props = OwnProps & StateProps & DispatchProps
-
-@ErrorHandling
-class DataLoadersWizard extends PureComponent<Props> {
-  public componentDidMount() {
-    this.handleSetBucketInfo()
-    this.handleSetStartingValues()
-  }
-
-  public componentDidUpdate(prevProps: Props) {
-    const hasBecomeVisible = !prevProps.visible && this.props.visible
-
-    if (hasBecomeVisible) {
-      this.handleSetBucketInfo()
-      this.handleSetStartingValues()
-    }
-  }
-
-  public render() {
-    const {
-      currentStepIndex,
-      visible,
-      bucket,
-      org,
-      onSetBucketInfo,
-      buckets,
-      type,
-    } = this.props
-
-    return (
-      <WizardOverlay
-        visible={visible}
-        title={'Data Loading'}
-        onDismiss={this.handleDismiss}
-      >
-        <StepSwitcher
-          currentStepIndex={currentStepIndex}
-          onboardingStepProps={this.stepProps}
-          bucketName={bucket}
-          onSetBucketInfo={onSetBucketInfo}
-          type={type}
-          org={org}
-          buckets={buckets}
-        />
-      </WizardOverlay>
-    )
-  }
-
-  private handleSetBucketInfo = () => {
-    const {bucket, buckets} = this.props
-
-    if (!bucket && (buckets && buckets.length)) {
-      const {organization, organizationID, name, id} = buckets[0]
-
-      this.props.onSetBucketInfo(organization, organizationID, name, id)
-    }
-  }
-
-  private handleSetStartingValues = () => {
-    const {startingStep, startingType, startingSubstep} = this.props
-
-    const hasStartingStep = startingStep || startingStep === 0
-    const hasStartingSubstep = startingSubstep || startingSubstep === 0
-    const hasStartingType =
-      startingType || startingType === DataLoaderType.Empty
-
-    if (hasStartingType) {
-      this.props.onSetDataLoadersType(startingType)
-    }
-
-    if (hasStartingSubstep) {
-      this.props.onSetSubstepIndex(
-        hasStartingStep ? startingStep : 0,
-        startingSubstep
-      )
-    } else if (hasStartingStep) {
-      this.props.onSetCurrentStepIndex(startingStep)
-    }
-  }
-
-  private handleDismiss = () => {
-    this.props.onCompleteSetup()
-    this.props.onClearDataLoaders()
-    this.props.onClearSteps()
-  }
-
-  private get stepProps(): DataLoaderStepProps {
-    const {
-      links,
-      notify,
-      substep,
-      onCompleteSetup,
-      currentStepIndex,
-      onSetCurrentStepIndex,
-      onSetSubstepIndex,
-      onDecrementCurrentStepIndex,
-      onIncrementCurrentStepIndex,
-    } = this.props
-
-    return {
-      substep,
-      currentStepIndex,
-      onSetCurrentStepIndex,
-      onSetSubstepIndex,
-      onIncrementCurrentStepIndex,
-      onDecrementCurrentStepIndex,
-      links,
-      notify,
-      onCompleteSetup,
-      onExit: this.handleDismiss,
-    }
-  }
-}
-
-const mstp = ({
-  links,
-  dataLoading: {
-    dataLoaders: {type},
-    steps: {currentStep, substep, bucket, org},
-  },
-  me: {name},
-}: AppState): StateProps => ({
-  links,
-  type,
-  currentStepIndex: currentStep,
-  substep,
-  username: name,
-  bucket,
-  org,
-})
-
-const mdtp: DispatchProps = {
-  notify: notifyAction,
-  onSetBucketInfo: setBucketInfo,
-  onSetDataLoadersType: setDataLoadersType,
-  onIncrementCurrentStepIndex: incrementCurrentStepIndex,
-  onDecrementCurrentStepIndex: decrementCurrentStepIndex,
-  onSetCurrentStepIndex: setCurrentStepIndex,
-  onSetSubstepIndex: setSubstepIndex,
-  onClearDataLoaders: clearDataLoaders,
-  onClearSteps: clearSteps,
-}
-
-export default connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(DataLoadersWizard)
diff --git a/ui/src/dataLoaders/components/StepSwitcher.tsx b/ui/src/dataLoaders/components/StepSwitcher.tsx
deleted file mode 100644
index 011ca7e9072..00000000000
--- a/ui/src/dataLoaders/components/StepSwitcher.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import _ from 'lodash'
-
-// Components
-import ConfigureDataSourceStep from 'src/dataLoaders/components/configureStep/ConfigureDataSourceStep'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-// Actions
-import {setBucketInfo} from 'src/dataLoaders/actions/steps'
-
-// Types
-import {DataLoaderType, DataLoaderStep} from 'src/types/v2/dataLoaders'
-import {DataLoaderStepProps} from 'src/dataLoaders/components/DataLoadersWizard'
-import {Bucket} from '@influxdata/influx'
-
-interface Props {
-  onboardingStepProps: DataLoaderStepProps
-  bucketName: string
-  buckets: Bucket[]
-  type: DataLoaderType
-  currentStepIndex: number
-  onSetBucketInfo: typeof setBucketInfo
-  org: string
-}
-
-@ErrorHandling
-class StepSwitcher extends PureComponent<Props> {
-  public render() {
-    const {
-      currentStepIndex,
-      onboardingStepProps,
-      bucketName,
-      org,
-      buckets,
-      type,
-    } = this.props
-
-    switch (currentStepIndex) {
-      case DataLoaderStep.Configure:
-        return (
-          <ConfigureDataSourceStep
-            {...onboardingStepProps}
-            buckets={buckets}
-            bucket={bucketName}
-            org={org}
-            type={type}
-          />
-        )
-      default:
-        return <div />
-    }
-  }
-}
-
-export default StepSwitcher
diff --git a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.test.tsx b/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.test.tsx
deleted file mode 100644
index 5aab806db14..00000000000
--- a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Libraries
-import React from 'react'
-import {shallow} from 'enzyme'
-
-// Components
-import {ConfigureDataSourceStep} from 'src/dataLoaders/components/configureStep/ConfigureDataSourceStep'
-import ConfigureDataSourceSwitcher from 'src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher'
-
-// Types
-import {DataLoaderType} from 'src/types/v2/dataLoaders'
-
-// Dummy Data
-import {defaultOnboardingStepProps} from 'mocks/dummyData'
-
-const setup = (override = {}) => {
-  const props = {
-    ...defaultOnboardingStepProps,
-    telegrafPlugins: [],
-    onSetActiveTelegrafPlugin: jest.fn(),
-    onUpdateTelegrafPluginConfig: jest.fn(),
-    onSetPluginConfiguration: jest.fn(),
-    type: DataLoaderType.Empty,
-    onAddConfigValue: jest.fn(),
-    onRemoveConfigValue: jest.fn(),
-    onSaveTelegrafConfig: jest.fn(),
-    authToken: '',
-    currentStepIndex: 3,
-    substep: 0,
-    location: null,
-    router: null,
-    routes: [],
-    onSetConfigArrayValue: jest.fn(),
-    bucket: '',
-    org: '',
-    username: '',
-    buckets: [],
-    ...override,
-  }
-
-  return shallow(<ConfigureDataSourceStep {...props} />)
-}
-
-describe('Onboarding.Components.ConfigureStep.ConfigureDataSourceStep', () => {
-  it('renders switcher and buttons', async () => {
-    const wrapper = setup()
-    const switcher = wrapper.find(ConfigureDataSourceSwitcher)
-
-    expect(wrapper.exists()).toBe(true)
-    expect(switcher.exists()).toBe(true)
-  })
-})
diff --git a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.tsx b/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.tsx
deleted file mode 100644
index 97c408b2b34..00000000000
--- a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceStep.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import _ from 'lodash'
-
-// Components
-import {ErrorHandling} from 'src/shared/decorators/errors'
-import ConfigureDataSourceSwitcher from 'src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher'
-
-// Types
-import {DataLoaderStepProps} from 'src/dataLoaders/components/DataLoadersWizard'
-import {DataLoaderType} from 'src/types/v2/dataLoaders'
-import {Bucket} from '@influxdata/influx'
-
-export interface OwnProps extends DataLoaderStepProps {
-  type: DataLoaderType
-  bucket: string
-  org: string
-  buckets: Bucket[]
-}
-
-type Props = OwnProps
-
-@ErrorHandling
-export class ConfigureDataSourceStep extends PureComponent<Props> {
-  constructor(props: Props) {
-    super(props)
-  }
-
-  public render() {
-    const {type, bucket, org, buckets} = this.props
-
-    return (
-      <ConfigureDataSourceSwitcher
-        buckets={buckets}
-        bucket={bucket}
-        org={org}
-        dataLoaderType={type}
-        onClickNext={this.handleNext}
-      />
-    )
-  }
-
-  private handleNext = async () => {
-    const {onIncrementCurrentStepIndex, type, onExit} = this.props
-
-    if (type === DataLoaderType.Scraping) {
-      onExit()
-      return
-    }
-
-    onIncrementCurrentStepIndex()
-  }
-}
-
-export default ConfigureDataSourceStep
diff --git a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx b/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx
deleted file mode 100644
index a42efcaf0da..00000000000
--- a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import _ from 'lodash'
-
-// Components
-import {ErrorHandling} from 'src/shared/decorators/errors'
-import EmptyDataSourceState from 'src/dataLoaders/components/configureStep/EmptyDataSourceState'
-import Scraping from 'src/dataLoaders/components/configureStep/Scraping'
-
-// Types
-import {DataLoaderType} from 'src/types/v2/dataLoaders'
-import {Bucket} from '@influxdata/influx'
-
-export interface Props {
-  dataLoaderType: DataLoaderType
-  buckets: Bucket[]
-  bucket: string
-  org: string
-  onClickNext: () => void
-}
-
-@ErrorHandling
-class ConfigureDataSourceSwitcher extends PureComponent<Props> {
-  public render() {
-    const {dataLoaderType, onClickNext, buckets} = this.props
-
-    switch (dataLoaderType) {
-      case DataLoaderType.Scraping:
-        return <Scraping onClickNext={onClickNext} buckets={buckets} />
-      default:
-        return <EmptyDataSourceState />
-    }
-  }
-}
-
-export default ConfigureDataSourceSwitcher
diff --git a/ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx b/ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx
deleted file mode 100644
index 59bfc0960e8..00000000000
--- a/ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// Libraries
-import React from 'react'
-import {shallow} from 'enzyme'
-
-// Components
-import {ScraperTarget} from 'src/dataLoaders/components/configureStep/ScraperTarget'
-
-const setup = (override = {}) => {
-  const props = {
-    bucket: '',
-    buckets: [],
-    onSelectBucket: jest.fn(),
-    onChangeURL: jest.fn(),
-    onChangeName: jest.fn(),
-    url: '',
-    name: '',
-    ...override,
-  }
-  const wrapper = shallow(<ScraperTarget {...props} />)
-
-  return {wrapper}
-}
-
-describe('ScraperTarget', () => {
-  describe('rendering', () => {
-    it('renders correctly with no bucket, url, name', () => {
-      const {wrapper} = setup()
-      expect(wrapper.exists()).toBe(true)
-
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('renders correctly with bucket', () => {
-      const {wrapper} = setup({bucket: 'defbuck'})
-      expect(wrapper.exists()).toBe(true)
-
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('renders correctly with url', () => {
-      const {wrapper} = setup({url: 'http://url.com'})
-      expect(wrapper.exists()).toBe(true)
-
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('renders correctly with name', () => {
-      const {wrapper} = setup({name: 'MyScraper'})
-      expect(wrapper.exists()).toBe(true)
-
-      expect(wrapper).toMatchSnapshot()
-    })
-  })
-})
diff --git a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx b/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
deleted file mode 100644
index 4cdda9c0891..00000000000
--- a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-// Libraries
-import React, {PureComponent, ChangeEvent} from 'react'
-
-// Components
-import {
-  Form,
-  Input,
-  Columns,
-  Grid,
-  InputType,
-  ComponentStatus,
-} from 'src/clockface'
-import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
-import {Bucket} from '@influxdata/influx'
-
-interface Props {
-  bucket: string
-  buckets: Bucket[]
-  onSelectBucket: (bucket: Bucket) => void
-  onChangeURL: (value: string) => void
-  onChangeName: (value: string) => void
-  url: string
-  name: string
-}
-
-export class ScraperTarget extends PureComponent<Props> {
-  constructor(props: Props) {
-    super(props)
-  }
-
-  public render() {
-    const {onSelectBucket, url, name, buckets} = this.props
-    return (
-      <Grid>
-        <Grid.Row>
-          <Grid.Column widthSM={Columns.Six}>
-            <Form.Element
-              label="Name"
-              errorMessage={this.nameEmpty && 'Target name is empty'}
-            >
-              <Input
-                type={InputType.Text}
-                value={name}
-                name="name"
-                onChange={this.handleChangeName}
-                titleText="Name"
-                autoFocus={true}
-                status={this.nameStatus}
-              />
-            </Form.Element>
-          </Grid.Column>
-          <Grid.Column widthSM={Columns.Six}>
-            <Form.Element label="Bucket">
-              <BucketDropdown
-                selectedBucketID={this.selectedBucketID}
-                buckets={buckets}
-                onSelectBucket={onSelectBucket}
-              />
-            </Form.Element>
-          </Grid.Column>
-          <Grid.Column widthSM={Columns.Twelve}>
-            <Form.Element
-              label="Target URL"
-              errorMessage={this.urlEmpty && 'Target URL is empty'}
-            >
-              <Input
-                type={InputType.Text}
-                value={url}
-                name="url"
-                onChange={this.handleChangeURL}
-                titleText="Target URL"
-                status={this.urlStatus}
-              />
-            </Form.Element>
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-    )
-  }
-
-  private get selectedBucketID(): string {
-    const {buckets, bucket} = this.props
-
-    return buckets.find(b => b.name === bucket).id
-  }
-
-  private get urlStatus(): ComponentStatus {
-    if (this.urlEmpty) {
-      return ComponentStatus.Error
-    }
-    return ComponentStatus.Default
-  }
-
-  private get urlEmpty(): boolean {
-    return !this.props.url
-  }
-
-  private get nameStatus(): ComponentStatus {
-    if (this.nameEmpty) {
-      return ComponentStatus.Error
-    }
-    return ComponentStatus.Default
-  }
-  private get nameEmpty(): boolean {
-    return !this.props.name
-  }
-
-  private handleChangeURL = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    this.props.onChangeURL(value)
-  }
-
-  private handleChangeName = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    this.props.onChangeName(value)
-  }
-}
-
-export default ScraperTarget
diff --git a/ui/src/dataLoaders/components/configureStep/Scraping.tsx b/ui/src/dataLoaders/components/configureStep/Scraping.tsx
deleted file mode 100644
index 48a0db972d0..00000000000
--- a/ui/src/dataLoaders/components/configureStep/Scraping.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
-import _ from 'lodash'
-
-// Components
-import {Form, ComponentStatus} from 'src/clockface'
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
-import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
-import ScraperTarget from 'src/dataLoaders/components/configureStep/ScraperTarget'
-
-// Actions
-import {
-  setScraperTargetBucket,
-  setScraperTargetURL,
-  setScraperTargetName,
-  saveScraperTarget,
-} from 'src/dataLoaders/actions/dataLoaders'
-import {setBucketInfo} from 'src/dataLoaders/actions/steps'
-import {notify as notifyAction, notify} from 'src/shared/actions/notifications'
-
-// Types
-import {Bucket} from '@influxdata/influx'
-import {AppState} from 'src/types/v2/index'
-import {
-  scraperCreateSuccess,
-  scraperCreateFailed,
-} from 'src/shared/copy/v2/notifications'
-
-interface OwnProps {
-  onClickNext: () => void
-  buckets: Bucket[]
-}
-
-interface DispatchProps {
-  onSetScraperTargetBucket: typeof setScraperTargetBucket
-  onSetScraperTargetURL: typeof setScraperTargetURL
-  onSetScraperTargetName: typeof setScraperTargetName
-  onSaveScraperTarget: typeof saveScraperTarget
-  onSetBucketInfo: typeof setBucketInfo
-  notify: typeof notifyAction
-}
-
-interface StateProps {
-  scraperBucket: string
-  url: string
-  currentBucket: string
-  name: string
-}
-
-type Props = OwnProps & DispatchProps & StateProps
-
-export class Scraping extends PureComponent<Props> {
-  public componentDidMount() {
-    const {
-      buckets,
-      scraperBucket,
-      currentBucket,
-      onSetScraperTargetBucket,
-    } = this.props
-
-    if (!scraperBucket) {
-      onSetScraperTargetBucket(currentBucket || _.get(buckets, '0.name', ''))
-    }
-  }
-
-  public render() {
-    const {
-      scraperBucket,
-      onSetScraperTargetURL,
-      onSetScraperTargetName,
-      url,
-      buckets,
-      name,
-    } = this.props
-
-    return (
-      <Form onSubmit={this.handleSubmit} className="data-loading--form">
-        <FancyScrollbar
-          autoHide={false}
-          className="data-loading--scroll-content"
-        >
-          <div>
-            <h3 className="wizard-step--title">Add Scraper Target</h3>
-            <h5 className="wizard-step--sub-title">
-              Scrapers collect data from multiple targets at regular intervals
-              and to write to a bucket
-            </h5>
-          </div>
-          <ScraperTarget
-            bucket={scraperBucket}
-            buckets={buckets}
-            onSelectBucket={this.handleSelectBucket}
-            onChangeURL={onSetScraperTargetURL}
-            onChangeName={onSetScraperTargetName}
-            url={url}
-            name={name}
-          />
-        </FancyScrollbar>
-        <OnboardingButtons
-          autoFocusNext={false}
-          nextButtonStatus={this.nextButtonStatus}
-          nextButtonText={'Finish'}
-          className="data-loading--button-container"
-        />
-      </Form>
-    )
-  }
-
-  private handleSelectBucket = (bucket: Bucket) => {
-    const {onSetBucketInfo, onSetScraperTargetBucket} = this.props
-    const {organization, organizationID, id, name} = bucket
-
-    onSetBucketInfo(organization, organizationID, name, id)
-    onSetScraperTargetBucket(bucket.name)
-  }
-
-  private get nextButtonStatus(): ComponentStatus {
-    if (
-      !this.props.url ||
-      !this.props.name ||
-      !this.props.buckets ||
-      !this.props.buckets.length
-    ) {
-      return ComponentStatus.Disabled
-    }
-    return ComponentStatus.Default
-  }
-
-  private handleSubmit = async () => {
-    try {
-      const {onSaveScraperTarget, onClickNext, notify} = this.props
-      await onSaveScraperTarget()
-      onClickNext()
-      notify(scraperCreateSuccess())
-    } catch (e) {
-      console.error(e)
-      notify(scraperCreateFailed())
-    }
-  }
-}
-
-const mstp = ({
-  dataLoading: {
-    dataLoaders: {scraperTarget},
-    steps: {bucket},
-  },
-}: AppState): StateProps => {
-  return {
-    currentBucket: bucket,
-    scraperBucket: scraperTarget.bucket,
-    url: scraperTarget.url,
-    name: scraperTarget.name,
-  }
-}
-
-const mdtp: DispatchProps = {
-  onSetScraperTargetBucket: setScraperTargetBucket,
-  onSetScraperTargetURL: setScraperTargetURL,
-  onSaveScraperTarget: saveScraperTarget,
-  onSetBucketInfo: setBucketInfo,
-  onSetScraperTargetName: setScraperTargetName,
-  notify: notifyAction,
-}
-
-export default connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(Scraping)

From e5cc680d37f8af8f13d7f8d9912b8f3f0ca79e73 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 12:30:06 -0800
Subject: [PATCH 11/17] Update unit tests

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 .../components/DataLoaderSwitcher.test.tsx    |   4 +-
 .../select/StreamingSelector.test.tsx         |  10 +-
 .../__snapshots__/ScraperTarget.test.tsx.snap | 265 ------------------
 .../__snapshots__/Buckets.test.tsx.snap       |  24 +-
 4 files changed, 13 insertions(+), 290 deletions(-)
 delete mode 100644 ui/src/dataLoaders/components/configureStep/__snapshots__/ScraperTarget.test.tsx.snap

diff --git a/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx b/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx
index a0dc604dd30..30c47156efc 100644
--- a/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx
+++ b/ui/src/dataLoaders/components/DataLoaderSwitcher.test.tsx
@@ -28,7 +28,7 @@ const setup = (override = {}) => {
 describe('DataLoading.Components.DataLoaderSwitcher', () => {
   describe('if type is empty', () => {
     it('renders empty div', () => {
-      const {wrapper} = setup()
+      const {wrapper} = setup({type: DataLoaderType.Empty})
 
       const emptyDiv = wrapper.find({'data-testid': 'data-loader-empty'})
 
@@ -39,7 +39,7 @@ describe('DataLoading.Components.DataLoaderSwitcher', () => {
 
   describe('if type is scraping', () => {
     it('renders create scraper overlay', () => {
-      const {wrapper} = setup()
+      const {wrapper} = setup({type: DataLoaderType.Scraping})
 
       const overlay = wrapper.find(CreateScraperOverlay)
 
diff --git a/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx b/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx
index c44f5529d0c..a5daa1f8b5e 100644
--- a/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx
+++ b/ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.test.tsx
@@ -10,14 +10,18 @@ import {Input} from 'src/clockface'
 // Constants
 import {PLUGIN_BUNDLE_OPTIONS} from 'src/dataLoaders/constants/pluginConfigs'
 
+// Mocks
+import {buckets} from 'mocks/dummyData'
+
 const setup = (override = {}) => {
+  const selectedBucketName = buckets[0].name
+
   const props = {
     telegrafPlugins: [],
     pluginBundles: [],
     onTogglePluginBundle: jest.fn(),
-    buckets: [],
-    bucket: '',
-    selectedBucketName: '',
+    buckets,
+    selectedBucketName,
     onSelectBucket: jest.fn(),
     ...override,
   }
diff --git a/ui/src/dataLoaders/components/configureStep/__snapshots__/ScraperTarget.test.tsx.snap b/ui/src/dataLoaders/components/configureStep/__snapshots__/ScraperTarget.test.tsx.snap
deleted file mode 100644
index 51528bb0fe6..00000000000
--- a/ui/src/dataLoaders/components/configureStep/__snapshots__/ScraperTarget.test.tsx.snap
+++ /dev/null
@@ -1,265 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScraperTarget rendering renders correctly with bucket 1`] = `
-<Grid>
-  <GridRow>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage="Target name is empty"
-        label="Name"
-      >
-        <Input
-          autoFocus={true}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="name"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="error"
-          testID="input-field"
-          titleText="Name"
-          type="text"
-          value=""
-        />
-      </FormElement>
-      <FormElement
-        label="Bucket"
-      >
-        <BucketsDropdown
-          buckets={Array []}
-          onSelectBucket={[MockFunction]}
-          selected="defbuck"
-        />
-      </FormElement>
-    </GridColumn>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage="Target URL is empty"
-        label="Target URL"
-      >
-        <Input
-          autoFocus={false}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="url"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="error"
-          testID="input-field"
-          titleText="Target URL"
-          type="text"
-          value=""
-        />
-      </FormElement>
-    </GridColumn>
-  </GridRow>
-</Grid>
-`;
-
-exports[`ScraperTarget rendering renders correctly with name 1`] = `
-<Grid>
-  <GridRow>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage={false}
-        label="Name"
-      >
-        <Input
-          autoFocus={true}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="name"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="default"
-          testID="input-field"
-          titleText="Name"
-          type="text"
-          value="MyScraper"
-        />
-      </FormElement>
-      <FormElement
-        label="Bucket"
-      >
-        <BucketsDropdown
-          buckets={Array []}
-          onSelectBucket={[MockFunction]}
-          selected=""
-        />
-      </FormElement>
-    </GridColumn>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage="Target URL is empty"
-        label="Target URL"
-      >
-        <Input
-          autoFocus={false}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="url"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="error"
-          testID="input-field"
-          titleText="Target URL"
-          type="text"
-          value=""
-        />
-      </FormElement>
-    </GridColumn>
-  </GridRow>
-</Grid>
-`;
-
-exports[`ScraperTarget rendering renders correctly with no bucket, url, name 1`] = `
-<Grid>
-  <GridRow>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage="Target name is empty"
-        label="Name"
-      >
-        <Input
-          autoFocus={true}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="name"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="error"
-          testID="input-field"
-          titleText="Name"
-          type="text"
-          value=""
-        />
-      </FormElement>
-      <FormElement
-        label="Bucket"
-      >
-        <BucketsDropdown
-          buckets={Array []}
-          onSelectBucket={[MockFunction]}
-          selected=""
-        />
-      </FormElement>
-    </GridColumn>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage="Target URL is empty"
-        label="Target URL"
-      >
-        <Input
-          autoFocus={false}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="url"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="error"
-          testID="input-field"
-          titleText="Target URL"
-          type="text"
-          value=""
-        />
-      </FormElement>
-    </GridColumn>
-  </GridRow>
-</Grid>
-`;
-
-exports[`ScraperTarget rendering renders correctly with url 1`] = `
-<Grid>
-  <GridRow>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage="Target name is empty"
-        label="Name"
-      >
-        <Input
-          autoFocus={true}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="name"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="error"
-          testID="input-field"
-          titleText="Name"
-          type="text"
-          value=""
-        />
-      </FormElement>
-      <FormElement
-        label="Bucket"
-      >
-        <BucketsDropdown
-          buckets={Array []}
-          onSelectBucket={[MockFunction]}
-          selected=""
-        />
-      </FormElement>
-    </GridColumn>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage={false}
-        label="Target URL"
-      >
-        <Input
-          autoFocus={false}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name="url"
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="default"
-          testID="input-field"
-          titleText="Target URL"
-          type="text"
-          value="http://url.com"
-        />
-      </FormElement>
-    </GridColumn>
-  </GridRow>
-</Grid>
-`;
diff --git a/ui/src/organizations/components/__snapshots__/Buckets.test.tsx.snap b/ui/src/organizations/components/__snapshots__/Buckets.test.tsx.snap
index f6744591684..a3102a114e4 100644
--- a/ui/src/organizations/components/__snapshots__/Buckets.test.tsx.snap
+++ b/ui/src/organizations/components/__snapshots__/Buckets.test.tsx.snap
@@ -335,16 +335,8 @@ Object {
         />
       </div>
       <div
-        class="overlay-tech"
-      >
-        <div
-          class="overlay--dialog"
-          data-testid="overlay-children"
-        />
-        <div
-          class="overlay--mask"
-        />
-      </div>
+        data-testid="data-loader-empty"
+      />
     </div>
   </body>,
   "container": <div>
@@ -678,16 +670,8 @@ Object {
       />
     </div>
     <div
-      class="overlay-tech"
-    >
-      <div
-        class="overlay--dialog"
-        data-testid="overlay-children"
-      />
-      <div
-        class="overlay--mask"
-      />
-    </div>
+      data-testid="data-loader-empty"
+    />
   </div>,
   "debug": [Function],
   "getAllByAltText": [Function],

From c4a4669c88670ccd9be3e317afe9ea4068e580a7 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 12:55:47 -0800
Subject: [PATCH 12/17] Allow override of initial bucket selection in create
 scraper overlay

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 .../components/DataLoaderSwitcher.tsx         | 15 +++++++----
 .../organizations/components/BucketList.tsx   | 26 +++----------------
 .../components/CreateScraperOverlay.tsx       | 20 ++++++++++++--
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx b/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
index a0a52d71b51..dd483bfc112 100644
--- a/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
+++ b/ui/src/dataLoaders/components/DataLoaderSwitcher.tsx
@@ -8,7 +8,7 @@ import CollectorsWizard from 'src/dataLoaders/components/collectorsWizard/Collec
 import LineProtocolWizard from 'src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard'
 
 // Types
-import {Substep, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {DataLoaderType} from 'src/types/v2/dataLoaders'
 import {Bucket} from '@influxdata/influx'
 
 interface Props {
@@ -16,14 +16,18 @@ interface Props {
   onCompleteSetup: () => void
   visible: boolean
   buckets: Bucket[]
-  startingType?: DataLoaderType
-  startingStep?: number
-  startingSubstep?: Substep
+  overrideBucketIDSelection?: string
 }
 
 class DataLoaderSwitcher extends PureComponent<Props> {
   public render() {
-    const {buckets, type, visible, onCompleteSetup} = this.props
+    const {
+      buckets,
+      type,
+      visible,
+      onCompleteSetup,
+      overrideBucketIDSelection,
+    } = this.props
 
     switch (type) {
       case DataLoaderType.Empty:
@@ -34,6 +38,7 @@ class DataLoaderSwitcher extends PureComponent<Props> {
             visible={visible}
             buckets={buckets}
             onDismiss={onCompleteSetup}
+            overrideBucketIDSelection={overrideBucketIDSelection}
           />
         )
       case DataLoaderType.Streaming:
diff --git a/ui/src/organizations/components/BucketList.tsx b/ui/src/organizations/components/BucketList.tsx
index be58277a6d3..61f6ceea588 100644
--- a/ui/src/organizations/components/BucketList.tsx
+++ b/ui/src/organizations/components/BucketList.tsx
@@ -15,7 +15,7 @@ import {setBucketInfo} from 'src/dataLoaders/actions/steps'
 
 // Types
 import {OverlayState} from 'src/types'
-import {Substep, DataLoaderStep, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {DataLoaderType} from 'src/types/v2/dataLoaders'
 import {setDataLoadersType} from 'src/dataLoaders/actions/dataLoaders'
 import {AppState} from 'src/types/v2'
 
@@ -73,6 +73,7 @@ class BucketList extends PureComponent<Props & WithRouterProps, State> {
       onDeleteBucket,
       onFilterChange,
     } = this.props
+    const {bucketID} = this.state
 
     return (
       <>
@@ -108,7 +109,7 @@ class BucketList extends PureComponent<Props & WithRouterProps, State> {
           visible={this.isDataLoadersWizardVisible}
           onCompleteSetup={this.handleDismissDataLoaders}
           buckets={buckets}
-          {...this.startingValues}
+          overrideBucketIDSelection={bucketID}
         />
       </>
     )
@@ -118,27 +119,6 @@ class BucketList extends PureComponent<Props & WithRouterProps, State> {
     return this.props.buckets.find(b => b.id === this.state.bucketID)
   }
 
-  private get startingValues(): {
-    startingType: DataLoaderType
-    startingStep: number
-    startingSubstep?: Substep
-  } {
-    const {dataLoaderType} = this.props
-
-    switch (dataLoaderType) {
-      case DataLoaderType.Scraping:
-        return {
-          startingType: DataLoaderType.Scraping,
-          startingStep: DataLoaderStep.Configure,
-        }
-      case DataLoaderType.LineProtocol:
-        return {
-          startingType: DataLoaderType.LineProtocol,
-          startingStep: DataLoaderStep.Configure,
-        }
-    }
-  }
-
   private handleCloseModal = () => {
     this.setState({bucketOverlayState: OverlayState.Closed})
   }
diff --git a/ui/src/organizations/components/CreateScraperOverlay.tsx b/ui/src/organizations/components/CreateScraperOverlay.tsx
index bc8b546baf4..add26ffa13c 100644
--- a/ui/src/organizations/components/CreateScraperOverlay.tsx
+++ b/ui/src/organizations/components/CreateScraperOverlay.tsx
@@ -30,6 +30,7 @@ interface OwnProps {
   visible: boolean
   buckets: Bucket[]
   onDismiss: () => void
+  overrideBucketIDSelection?: string
 }
 
 interface DispatchProps {
@@ -53,11 +54,26 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
         type: ScraperTargetRequest.TypeEnum.Prometheus,
         url: 'http://localhost:9999/metrics',
         orgID: this.props.buckets[0].organizationID,
-        bucketID: this.props.buckets[0].id,
+        bucketID:
+          this.props.overrideBucketIDSelection || this.props.buckets[0].id,
       },
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.visible === false &&
+      this.props.visible === true &&
+      this.props.overrideBucketIDSelection
+    ) {
+      const scraper = {
+        ...this.state.scraper,
+        bucketID: this.props.overrideBucketIDSelection,
+      }
+      this.setState({scraper})
+    }
+  }
+
   public render() {
     const {scraper} = this.state
     const {onDismiss, buckets, visible} = this.props
@@ -143,7 +159,7 @@ const mdtp: DispatchProps = {
   onCreateScraper: createScraper,
 }
 
-export default connect<null, DispatchProps, OwnProps>(
+export default connect<{}, DispatchProps, OwnProps>(
   null,
   mdtp
 )(CreateScraperOverlay)

From c3995c1d03df756d8ed4b82d453fbe917a0f5391 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 14:14:50 -0800
Subject: [PATCH 13/17] Disable scraper/collector create button and show
 warning when no buckets exist

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 ui/src/organizations/components/Buckets.tsx   |  4 +-
 .../organizations/components/Collectors.tsx   | 54 ++++++++++++++++---
 .../components/CreateScraperOverlay.tsx       | 19 +++++--
 .../components/NoBucketsWarning.tsx           | 21 ++++++++
 ui/src/organizations/components/Scrapers.tsx  | 42 ++++++++++++---
 5 files changed, 117 insertions(+), 23 deletions(-)
 create mode 100644 ui/src/organizations/components/NoBucketsWarning.tsx

diff --git a/ui/src/organizations/components/Buckets.tsx b/ui/src/organizations/components/Buckets.tsx
index 3f71a1702df..a765e575f25 100644
--- a/ui/src/organizations/components/Buckets.tsx
+++ b/ui/src/organizations/components/Buckets.tsx
@@ -196,7 +196,7 @@ export default class Buckets extends PureComponent<Props, State> {
 
     if (_.isEmpty(searchTerm)) {
       return (
-        <EmptyState size={ComponentSize.Medium}>
+        <EmptyState size={ComponentSize.Large}>
           <EmptyState.Text
             text={`${org.name} does not own any Buckets , why not create one?`}
             highlightWords={['Buckets']}
@@ -212,7 +212,7 @@ export default class Buckets extends PureComponent<Props, State> {
     }
 
     return (
-      <EmptyState size={ComponentSize.Medium}>
+      <EmptyState size={ComponentSize.Large}>
         <EmptyState.Text text="No Buckets match your query" />
       </EmptyState>
     )
diff --git a/ui/src/organizations/components/Collectors.tsx b/ui/src/organizations/components/Collectors.tsx
index ebffe4853f1..c3391a87501 100644
--- a/ui/src/organizations/components/Collectors.tsx
+++ b/ui/src/organizations/components/Collectors.tsx
@@ -14,11 +14,12 @@ import {
   IconFont,
   ComponentSize,
   Columns,
+  ComponentStatus,
 } from '@influxdata/clockface'
 import {EmptyState, Grid, Input, InputType, Tabs} from 'src/clockface'
 import CollectorsWizard from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
 import FilterList from 'src/shared/components/Filter'
-
+import NoBucketsWarning from 'src/organizations/components/NoBucketsWarning'
 // APIS
 import {client} from 'src/utils/api'
 
@@ -87,7 +88,7 @@ export class Collectors extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {collectors, buckets} = this.props
+    const {collectors} = this.props
     const {searchTerm} = this.state
 
     return (
@@ -107,6 +108,10 @@ export class Collectors extends PureComponent<Props, State> {
         <Grid>
           <Grid.Row>
             <Grid.Column widthSM={Columns.Twelve}>
+              <NoBucketsWarning
+                visible={this.hasNoBuckets}
+                resourceName="Telegraf Configurations"
+              />
               <FilterList<Telegraf>
                 searchTerm={searchTerm}
                 searchKeys={['plugins.0.config.bucket', 'labels[].name']}
@@ -135,12 +140,7 @@ export class Collectors extends PureComponent<Props, State> {
             </Grid.Column>
           </Grid.Row>
         </Grid>
-        <CollectorsWizard
-          visible={this.isDataLoaderVisible}
-          onCompleteSetup={this.handleDismissDataLoaders}
-          startingStep={0}
-          buckets={buckets}
-        />
+        {this.collectorsWizard}
         <TelegrafInstructionsOverlay
           visible={this.isInstructionsVisible}
           collector={this.selectedCollector}
@@ -154,6 +154,33 @@ export class Collectors extends PureComponent<Props, State> {
     )
   }
 
+  private get hasNoBuckets(): boolean {
+    const {buckets} = this.props
+
+    if (!buckets || !buckets.length) {
+      return true
+    }
+
+    return false
+  }
+
+  private get collectorsWizard(): JSX.Element {
+    const {buckets} = this.props
+
+    if (this.hasNoBuckets) {
+      return
+    }
+
+    return (
+      <CollectorsWizard
+        visible={this.isDataLoaderVisible}
+        onCompleteSetup={this.handleDismissDataLoaders}
+        startingStep={0}
+        buckets={buckets}
+      />
+    )
+  }
+
   private get selectedCollector() {
     return this.props.collectors.find(c => c.id === this.state.collectorID)
   }
@@ -203,12 +230,23 @@ export class Collectors extends PureComponent<Props, State> {
   }
 
   private get createButton(): JSX.Element {
+    let status = ComponentStatus.Default
+    let titleText = 'Create a new Telegraf Configuration'
+
+    if (this.hasNoBuckets) {
+      status = ComponentStatus.Disabled
+      titleText =
+        'You need at least 1 bucket in order to create a Telegraf Configuration'
+    }
+
     return (
       <Button
         text="Create Configuration"
         icon={IconFont.Plus}
         color={ComponentColor.Primary}
         onClick={this.handleAddCollector}
+        status={status}
+        titleText={titleText}
       />
     )
   }
diff --git a/ui/src/organizations/components/CreateScraperOverlay.tsx b/ui/src/organizations/components/CreateScraperOverlay.tsx
index add26ffa13c..30b3ae8b5be 100644
--- a/ui/src/organizations/components/CreateScraperOverlay.tsx
+++ b/ui/src/organizations/components/CreateScraperOverlay.tsx
@@ -48,14 +48,18 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
 
+    const bucketID =
+      this.props.overrideBucketIDSelection || this.props.buckets[0].id
+
+    const orgID = this.props.buckets.find(b => b.id === bucketID).organizationID
+
     this.state = {
       scraper: {
         name: 'My Cool Scraper',
         type: ScraperTargetRequest.TypeEnum.Prometheus,
         url: 'http://localhost:9999/metrics',
-        orgID: this.props.buckets[0].organizationID,
-        bucketID:
-          this.props.overrideBucketIDSelection || this.props.buckets[0].id,
+        orgID,
+        bucketID,
       },
     }
   }
@@ -66,9 +70,14 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
       this.props.visible === true &&
       this.props.overrideBucketIDSelection
     ) {
+      const bucketID = this.props.overrideBucketIDSelection
+      const orgID = this.props.buckets.find(b => b.id === bucketID)
+        .organizationID
+
       const scraper = {
         ...this.state.scraper,
-        bucketID: this.props.overrideBucketIDSelection,
+        bucketID,
+        orgID,
       }
       this.setState({scraper})
     }
@@ -76,7 +85,7 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
 
   public render() {
     const {scraper} = this.state
-    const {onDismiss, buckets, visible} = this.props
+    const {onDismiss, visible, buckets} = this.props
 
     return (
       <OverlayTechnology visible={visible}>
diff --git a/ui/src/organizations/components/NoBucketsWarning.tsx b/ui/src/organizations/components/NoBucketsWarning.tsx
new file mode 100644
index 00000000000..f35290c190b
--- /dev/null
+++ b/ui/src/organizations/components/NoBucketsWarning.tsx
@@ -0,0 +1,21 @@
+// Libraries
+import React, {SFC} from 'react'
+
+interface Props {
+  visible: boolean
+  resourceName: string
+}
+
+const NoBucketsWarning: SFC<Props> = ({visible, resourceName}) => {
+  return (
+    visible && (
+      <div>
+        You don't currently have any buckets. Any{' '}
+        <strong>{resourceName}</strong> you have will not be able to write data
+        until a bucket is created and they are directed to that bucket.
+      </div>
+    )
+  )
+}
+
+export default NoBucketsWarning
diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx
index 357b851aed9..bf312d675d5 100644
--- a/ui/src/organizations/components/Scrapers.tsx
+++ b/ui/src/organizations/components/Scrapers.tsx
@@ -12,9 +12,11 @@ import {
   ComponentColor,
   IconFont,
   ComponentSize,
+  ComponentStatus,
 } from '@influxdata/clockface'
 import {EmptyState, Input, InputType, Tabs} from 'src/clockface'
 import CreateScraperOverlay from 'src/organizations/components/CreateScraperOverlay'
+import NoBucketsWarning from 'src/organizations/components/NoBucketsWarning'
 
 // Actions
 import * as NotificationsActions from 'src/types/actions/notifications'
@@ -75,6 +77,7 @@ class Scrapers extends PureComponent<Props, State> {
           />
           {this.createScraperButton}
         </Tabs.TabContentsHeader>
+        <NoBucketsWarning visible={this.hasNoBuckets} resourceName="Scrapers" />
         <FilterList<ScraperTargetResponse>
           searchTerm={searchTerm}
           searchKeys={['name', 'url']}
@@ -89,22 +92,35 @@ class Scrapers extends PureComponent<Props, State> {
             />
           )}
         </FilterList>
-        <CreateScraperOverlay
-          visible={this.isOverlayVisible}
-          buckets={this.buckets}
-          onDismiss={this.handleDismissOverlay}
-        />
+        {this.createScraperOverlay}
       </>
     )
   }
 
-  private get buckets(): Bucket[] {
+  private get hasNoBuckets(): boolean {
     const {buckets} = this.props
 
     if (!buckets || !buckets.length) {
-      return []
+      return true
     }
-    return buckets
+
+    return false
+  }
+
+  private get createScraperOverlay(): JSX.Element {
+    const {buckets} = this.props
+
+    if (this.hasNoBuckets) {
+      return
+    }
+
+    return (
+      <CreateScraperOverlay
+        visible={this.isOverlayVisible}
+        buckets={buckets}
+        onDismiss={this.handleDismissOverlay}
+      />
+    )
   }
 
   private get isOverlayVisible(): boolean {
@@ -121,12 +137,22 @@ class Scrapers extends PureComponent<Props, State> {
   }
 
   private get createScraperButton(): JSX.Element {
+    let status = ComponentStatus.Default
+    let titleText = 'Create a new Scraper'
+
+    if (this.hasNoBuckets) {
+      status = ComponentStatus.Disabled
+      titleText = 'You need at least 1 bucket in order to create a scraper'
+    }
+
     return (
       <Button
         text="Create Scraper"
         icon={IconFont.Plus}
         color={ComponentColor.Primary}
         onClick={this.handleShowOverlay}
+        status={status}
+        titleText={titleText}
       />
     )
   }

From 589cffd010cbb46c66105d2816121d633b0d1806 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 14:58:15 -0800
Subject: [PATCH 14/17] Introduce alert component in clockface

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 ui/src/clockface/components/alerts/Alert.scss | 108 ++++++++++++++++++
 ui/src/clockface/components/alerts/Alert.tsx  |  31 +++++
 ui/src/clockface/index.ts                     |   2 +
 3 files changed, 141 insertions(+)
 create mode 100644 ui/src/clockface/components/alerts/Alert.scss
 create mode 100644 ui/src/clockface/components/alerts/Alert.tsx

diff --git a/ui/src/clockface/components/alerts/Alert.scss b/ui/src/clockface/components/alerts/Alert.scss
new file mode 100644
index 00000000000..b1b95dbbeaf
--- /dev/null
+++ b/ui/src/clockface/components/alerts/Alert.scss
@@ -0,0 +1,108 @@
+@import 'src/style/modules';
+
+/*
+  Alert
+  ------------------------------------------------------------------------------
+*/
+
+.alert {
+  width: 100%;
+  border-radius: $radius;
+  padding: $ix-border;
+  font-size: $form-md-font;
+  user-select: none;
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ol,
+  ul,
+  li {
+    font-weight: 600;
+    strong {
+      font-weight: 900;
+    }
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  p {
+    font-size: $form-md-font;
+  }
+}
+
+.alert--contents {
+  width: 100%;
+  border-radius: $radius - 1px;
+  padding: $ix-marg-b;
+  background-color: rgba($g3-castle, 0.85);
+}
+
+.alert--has-icon {
+  padding-left: $ix-marg-d + $ix-marg-b;
+  position: relative;
+}
+
+.alert--icon {
+  position: absolute;
+  top: 50%;
+  left: $ix-marg-b + $ix-marg-a;
+  transform: translateY(-50%);
+  font-size: 1.5em;
+  color: rgba($g3-castle, 0.85);
+}
+
+/*  Color Modifiers */
+@mixin alertColorModifier($mainColor, $accentColor, $textColor, $boldColor) {
+  color: $textColor;
+
+  strong {
+    color: $boldColor;
+  }
+
+  @include gradient-h($mainColor, $accentColor);
+}
+
+.alert--default {
+  @include alertColorModifier($g7-graphite, $g5-pepper, $g13-mist, $g20-white);
+}
+
+.alert--primary {
+  @include alertColorModifier($c-ocean, $c-star, $c-hydrogen, $g20-white);
+}
+
+.alert--secondary {
+  @include alertColorModifier($c-comet, $c-star, $c-moonstone, $g20-white);
+}
+
+.alert--success {
+  @include alertColorModifier(
+    $c-rainforest,
+    $c-viridian,
+    $c-wasabi,
+    $g20-white
+  );
+}
+
+.alert--warning {
+  @include alertColorModifier($c-pineapple, $c-thunder, $c-sulfur, $g20-white);
+}
+
+.alert--danger {
+  @include alertColorModifier(
+    $c-dreamsicle,
+    $c-curacao,
+    $c-marmelade,
+    $g20-white
+  );
+}
diff --git a/ui/src/clockface/components/alerts/Alert.tsx b/ui/src/clockface/components/alerts/Alert.tsx
new file mode 100644
index 00000000000..3b850673839
--- /dev/null
+++ b/ui/src/clockface/components/alerts/Alert.tsx
@@ -0,0 +1,31 @@
+// Libraries
+import React, {SFC} from 'react'
+import classnames from 'classnames'
+
+// Types
+import {ComponentColor, IconFont} from '@influxdata/clockface'
+
+// Styles
+import 'src/clockface/components/alerts/Alert.scss'
+
+interface Props {
+  children: JSX.Element | JSX.Element[]
+  color: ComponentColor
+  icon?: IconFont
+}
+
+const Alert: SFC<Props> = ({children, color, icon}) => {
+  const className = classnames('alert', {
+    [`alert--${color}`]: color,
+    'alert--has-icon': icon,
+  })
+
+  return (
+    <div className={className}>
+      {icon && <span className={`alert--icon icon ${icon}`} />}
+      <div className="alert--contents">{children}</div>
+    </div>
+  )
+}
+
+export default Alert
diff --git a/ui/src/clockface/index.ts b/ui/src/clockface/index.ts
index c077dfd3cd2..db70aac0244 100644
--- a/ui/src/clockface/index.ts
+++ b/ui/src/clockface/index.ts
@@ -1,4 +1,5 @@
 // Import Components
+import Alert from './components/alerts/Alert'
 import AutoInput from './components/auto_input/AutoInput'
 import ConfirmationButton from './components/confirmation_button/ConfirmationButton'
 import Dropdown, {DropdownMode} from './components/dropdowns/Dropdown'
@@ -54,6 +55,7 @@ import {
 
 // Fire de lazer
 export {
+  Alert,
   Alignment,
   AutoComplete,
   AutoInput,

From 1aad9cdc9b9a01f8b0ee9ff6535254c542f35e41 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 14:58:29 -0800
Subject: [PATCH 15/17] Use alert component in no buckets warning

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 .../components/NoBucketsWarning.tsx              | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/src/organizations/components/NoBucketsWarning.tsx b/ui/src/organizations/components/NoBucketsWarning.tsx
index f35290c190b..9b763e14458 100644
--- a/ui/src/organizations/components/NoBucketsWarning.tsx
+++ b/ui/src/organizations/components/NoBucketsWarning.tsx
@@ -1,6 +1,10 @@
 // Libraries
 import React, {SFC} from 'react'
 
+// Components
+import {ComponentColor, IconFont} from '@influxdata/clockface'
+import {Alert} from 'src/clockface'
+
 interface Props {
   visible: boolean
   resourceName: string
@@ -9,11 +13,13 @@ interface Props {
 const NoBucketsWarning: SFC<Props> = ({visible, resourceName}) => {
   return (
     visible && (
-      <div>
-        You don't currently have any buckets. Any{' '}
-        <strong>{resourceName}</strong> you have will not be able to write data
-        until a bucket is created and they are directed to that bucket.
-      </div>
+      <Alert color={ComponentColor.Primary} icon={IconFont.AlertTriangle}>
+        <p>
+          You don't currently have any buckets. Any{' '}
+          <strong>{resourceName}</strong> you have will not be able to write
+          data until a bucket is created and they are directed to that bucket.
+        </p>
+      </Alert>
     )
   )
 }

From c85a0a252680c3649d60b19b4e857477556dbc67 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 15:10:41 -0800
Subject: [PATCH 16/17] Update scraper e2e tests

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 ui/cypress/e2e/scrapers.test.ts               | 36 +++++++++++++------
 .../components/CreateScraperOverlay.tsx       |  7 +++-
 ui/src/organizations/components/Scrapers.tsx  |  7 ++--
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/ui/cypress/e2e/scrapers.test.ts b/ui/cypress/e2e/scrapers.test.ts
index 86bf88940a0..2adb7f7ad3b 100644
--- a/ui/cypress/e2e/scrapers.test.ts
+++ b/ui/cypress/e2e/scrapers.test.ts
@@ -19,13 +19,13 @@ describe('Scrapers', () => {
   })
 
   describe('from the org view', () => {
-    it('can create a scraper', () => {
-      const newScraper = 'Scraper'
+    it('can create a scraper from the create button in the page header', () => {
+      const newScraper = '🐍craper'
       const newURL = 'http://google.com'
 
       cy.getByTestID('table-row').should('have.length', 0)
 
-      cy.contains('Create').click()
+      cy.getByTestID('create-scraper-button-header').click()
       cy.getByTestID('overlay--container').within(() => {
         cy.getByInputName('name')
           .clear()
@@ -33,14 +33,30 @@ describe('Scrapers', () => {
         cy.getByInputName('url')
           .clear()
           .type(newURL)
-        cy.get('.button')
-          .contains('Finish')
-          .click()
+        cy.getByTestID('create-scraper--submit').click()
       })
 
-      cy.getByTestID('table-row')
-        .should('have.length', 1)
-        .and('contain', newScraper)
+      cy.getByTestID('table-row').should('have.length', 1)
+    })
+
+    it('can create a scraper from the create button in the empty state', () => {
+      const newScraper = '🐍craper'
+      const newURL = 'http://google.com'
+
+      cy.getByTestID('table-row').should('have.length', 0)
+
+      cy.getByTestID('create-scraper-button-empty').click()
+      cy.getByTestID('overlay--container').within(() => {
+        cy.getByInputName('name')
+          .clear()
+          .type(newScraper)
+        cy.getByInputName('url')
+          .clear()
+          .type(newURL)
+        cy.getByTestID('create-scraper--submit').click()
+      })
+
+      cy.getByTestID('table-row').should('have.length', 1)
     })
 
     it('can update scrapers name', () => {
@@ -63,7 +79,7 @@ describe('Scrapers', () => {
       })
     })
 
-    it.skip('can delete a scraper', () => {
+    it('can delete a scraper', () => {
       const scraperName = 'New Scraper'
       const url = 'http://google.com'
       const type = 'Prometheus'
diff --git a/ui/src/organizations/components/CreateScraperOverlay.tsx b/ui/src/organizations/components/CreateScraperOverlay.tsx
index 30b3ae8b5be..47fce50f934 100644
--- a/ui/src/organizations/components/CreateScraperOverlay.tsx
+++ b/ui/src/organizations/components/CreateScraperOverlay.tsx
@@ -107,12 +107,17 @@ class CreateScraperOverlay extends PureComponent<Props, State> {
               />
             </OverlayBody>
             <OverlayFooter>
-              <Button text="Cancel" onClick={onDismiss} />
+              <Button
+                text="Cancel"
+                onClick={onDismiss}
+                testID="create-scraper--cancel"
+              />
               <Button
                 status={this.submitButtonStatus}
                 text="Create"
                 onClick={this.handleSubmit}
                 color={ComponentColor.Success}
+                testID="create-scraper--submit"
               />
             </OverlayFooter>
           </Form>
diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx
index bf312d675d5..da0e2c97935 100644
--- a/ui/src/organizations/components/Scrapers.tsx
+++ b/ui/src/organizations/components/Scrapers.tsx
@@ -75,7 +75,7 @@ class Scrapers extends PureComponent<Props, State> {
             onChange={this.handleFilterChange}
             onBlur={this.handleFilterBlur}
           />
-          {this.createScraperButton}
+          {this.createScraperButton('create-scraper-button-header')}
         </Tabs.TabContentsHeader>
         <NoBucketsWarning visible={this.hasNoBuckets} resourceName="Scrapers" />
         <FilterList<ScraperTargetResponse>
@@ -136,7 +136,7 @@ class Scrapers extends PureComponent<Props, State> {
     this.props.onChange()
   }
 
-  private get createScraperButton(): JSX.Element {
+  private createScraperButton = (testID: string): JSX.Element => {
     let status = ComponentStatus.Default
     let titleText = 'Create a new Scraper'
 
@@ -153,6 +153,7 @@ class Scrapers extends PureComponent<Props, State> {
         onClick={this.handleShowOverlay}
         status={status}
         titleText={titleText}
+        testID={testID}
       />
     )
   }
@@ -168,7 +169,7 @@ class Scrapers extends PureComponent<Props, State> {
             text={`${orgName} does not own any Scrapers , why not create one?`}
             highlightWords={['Scrapers']}
           />
-          {this.createScraperButton}
+          {this.createScraperButton('create-scraper-button-empty')}
         </EmptyState>
       )
     }

From 7955bd3d429644f946933ef17dda51c4d29f6f9e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 4 Mar 2019 15:15:20 -0800
Subject: [PATCH 17/17] Update changelog

Co-Authored-By: Iris Scholten <ischolten.is@gmail.com>
---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e678905bb91..748e96d3a29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@
 
 1. [12302](https://github.com/influxdata/influxdb/pull/12302): Make code snippet copy functionality easier to use
 1. [12304](https://github.com/influxdata/influxdb/pull/12304): Always show live preview in Note Cell editor
+1. [12317](https://github.com/influxdata/influxdb/pull/12317): Redesign Create Scraper workflow
+1. [12317](https://github.com/influxdata/influxdb/pull/12317): Show warning in Telegrafs and Scrapers lists when user has no buckets
 
 ## v2.0.0-alpha.4 [2019-02-21]