Polish/scraper overlay

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]
 

ui/cypress/e2e/scrapers.test.ts

@@ -19,28 +19,44 @@ 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()
           .type(newScraper)
         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'

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
+  );
+}

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

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,

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,

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

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({type: DataLoaderType.Empty})
 
-    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({type: DataLoaderType.Scraping})
+
+      const overlay = wrapper.find(CreateScraperOverlay)
+
+      expect(wrapper.exists()).toBe(true)
+      expect(overlay.exists()).toBe(true)
+    })
   })
 
   describe('if type is streaming', () => {

ui/src/dataLoaders/components/DataLoaderSwitcher.tsx

@@ -3,22 +3,20 @@ 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'
 
 // Types
-import {Substep, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {DataLoaderType} from 'src/types/v2/dataLoaders'
 import {Bucket} from '@influxdata/influx'
 
 interface Props {
   type: DataLoaderType
   onCompleteSetup: () => void
   visible: boolean
   buckets: Bucket[]
-  startingType?: DataLoaderType
-  startingStep?: number
-  startingSubstep?: Substep
+  overrideBucketIDSelection?: string
 }
 
 class DataLoaderSwitcher extends PureComponent<Props> {
@@ -28,22 +26,19 @@ class DataLoaderSwitcher extends PureComponent<Props> {
       type,
       visible,
       onCompleteSetup,
-      startingStep,
-      startingSubstep,
-      startingType,
+      overrideBucketIDSelection,
     } = this.props
 
     switch (type) {
-      case DataLoaderType.Scraping:
       case DataLoaderType.Empty:
+        return <div data-testid="data-loader-empty" />
+      case DataLoaderType.Scraping:
         return (
-          <DataLoadersWizard
+          <CreateScraperOverlay
             visible={visible}
-            onCompleteSetup={onCompleteSetup}
             buckets={buckets}
-            startingStep={startingStep}
-            startingSubstep={startingSubstep}
-            startingType={startingType}
+            onDismiss={onCompleteSetup}
+            overrideBucketIDSelection={overrideBucketIDSelection}
           />
         )
       case DataLoaderType.Streaming: