chore(ui): Use ResourceList component for Scrapers List

influxdata · May 10, 2019 · dda865a · dda865a
1 parent 5d99b0b
commit dda865a
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@
 ### UI Improvements
 1. [#13835](https://github.com/influxdata/influxdb/pull/13835): Render checkboxes in query builder tag selection lists
 1. [#13856](https://github.com/influxdata/influxdb/pull/13856): Fix jumbled card text in Telegraf configuration wizard
+1. [#13888](https://github.com/influxdata/influxdb/pull/13888): Change scrapers in scrapers list to be resource cards
 
 ## v2.0.0-alpha.9 [2019-05-01]
 

diff --git a/ui/cypress/e2e/scrapers.test.ts b/ui/cypress/e2e/scrapers.test.ts
@@ -18,12 +18,12 @@ describe('Scrapers', () => {
     })
   })
 
-  describe('from the org view', () => {
+  describe('from the org settings', () => {
     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.getByTestID('resource-card').should('have.length', 0)
 
       cy.getByTestID('create-scraper-button-header').click()
       cy.getByTestID('overlay--container').within(() => {
@@ -36,14 +36,14 @@ describe('Scrapers', () => {
         cy.getByTestID('create-scraper--submit').click()
       })
 
-      cy.getByTestID('table-row').should('have.length', 1)
+      cy.getByTestID('resource-card').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('resource-card').should('have.length', 0)
 
       cy.getByTestID('create-scraper-button-empty').click()
       cy.getByTestID('overlay--container').within(() => {
@@ -56,7 +56,7 @@ describe('Scrapers', () => {
         cy.getByTestID('create-scraper--submit').click()
       })
 
-      cy.getByTestID('table-row').should('have.length', 1)
+      cy.getByTestID('resource-card').should('have.length', 1)
     })
 
     it('can update scrapers name', () => {
@@ -92,13 +92,13 @@ describe('Scrapers', () => {
         })
       })
 
-      cy.getByTestID('table-row').should('have.length', 2)
+      cy.getByTestID('resource-card').should('have.length', 2)
 
       cy.getByTestID('confirmation-button')
         .last()
         .click({force: true})
 
-      cy.getByTestID('table-row').should('have.length', 1)
+      cy.getByTestID('resource-card').should('have.length', 1)
     })
   })
 })
diff --git a/ui/src/scrapers/components/ScraperList.tsx b/ui/src/scrapers/components/ScraperList.tsx
@@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'
 import memoizeOne from 'memoize-one'
 
 // Components
-import {IndexList} from 'src/clockface'
+import {ResourceList} from 'src/clockface'
 import ScraperRow from 'src/scrapers/components/ScraperRow'
 
 // Types
@@ -37,35 +37,37 @@ export default class ScraperList extends PureComponent<Props> {
 
     return (
       <>
-        <IndexList>
-          <IndexList.Header>
-            <IndexList.HeaderCell
+        <ResourceList>
+          <ResourceList.Header>
+            <ResourceList.Sorter
+              name={this.headerKeys[0]}
               sortKey={this.headerKeys[0]}
               sort={sortKey === this.headerKeys[0] ? sortDirection : Sort.None}
-              columnName="Name"
-              width="50%"
               onClick={onClickColumn}
             />
-            <IndexList.HeaderCell
+            <ResourceList.Sorter
+              name={this.headerKeys[1]}
               sortKey={this.headerKeys[1]}
               sort={sortKey === this.headerKeys[1] ? sortDirection : Sort.None}
-              columnName="Target URL"
-              width="20%"
               onClick={onClickColumn}
             />
-            <IndexList.HeaderCell columnName="Bucket" width="15%" />
-            <IndexList.HeaderCell columnName="" width="15%" />
-          </IndexList.Header>
-          <IndexList.Body columnCount={4} emptyState={emptyState}>
+            <ResourceList.Sorter
+              name={this.headerKeys[2]}
+              sortKey={this.headerKeys[2]}
+              sort={sortKey === this.headerKeys[2] ? sortDirection : Sort.None}
+              onClick={onClickColumn}
+            />
+          </ResourceList.Header>
+          <ResourceList.Body emptyState={emptyState}>
             {this.scrapersList}
-          </IndexList.Body>
-        </IndexList>
+          </ResourceList.Body>
+        </ResourceList>
       </>
     )
   }
 
   private get headerKeys(): SortKey[] {
-    return ['name', 'url']
+    return ['name', 'url', 'bucket']
   }
 
   public get scrapersList(): JSX.Element[] {

diff --git a/ui/src/scrapers/components/ScraperRow.tsx b/ui/src/scrapers/components/ScraperRow.tsx
@@ -2,17 +2,12 @@
 import React, {PureComponent} from 'react'
 
 // Components
-import {
-  ComponentSize,
-  IndexList,
-  ConfirmationButton,
-  Alignment,
-} from 'src/clockface'
+import {ResourceList, Context} from 'src/clockface'
 import {ScraperTargetResponse} from '@influxdata/influx'
-import EditableName from 'src/shared/components/EditableName'
 
 // Constants
 import {DEFAULT_SCRAPER_NAME} from 'src/dashboards/constants'
+import {IconFont, ComponentColor} from '@influxdata/clockface'
 
 interface Props {
   scraper: ScraperTargetResponse
@@ -22,33 +17,38 @@ interface Props {
 
 export default class ScraperRow extends PureComponent<Props> {
   public render() {
-    const {scraper, onDeleteScraper} = this.props
+    const {scraper} = this.props
     return (
       <>
-        <IndexList.Row>
-          <IndexList.Cell>
-            <EditableName
+        <ResourceList.Card
+          name={() => (
+            <ResourceList.EditableName
               onUpdate={this.handleUpdateScraperName}
               name={scraper.name}
               noNameString={DEFAULT_SCRAPER_NAME}
             />
-          </IndexList.Cell>
-          <IndexList.Cell>{scraper.url}</IndexList.Cell>
-          <IndexList.Cell>{scraper.bucket}</IndexList.Cell>
-          <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
-            <ConfirmationButton
-              size={ComponentSize.ExtraSmall}
-              text="Delete"
-              confirmText="Confirm"
-              returnValue={scraper}
-              onConfirm={onDeleteScraper}
-            />
-          </IndexList.Cell>
-        </IndexList.Row>
+          )}
+          metaData={() => [
+            <>Bucket: {scraper.bucket}</>,
+            <>URL: {scraper.url}</>,
+          ]}
+          contextMenu={() => this.contextMenu}
+        />
       </>
     )
   }
 
+  private get contextMenu(): JSX.Element {
+    const {onDeleteScraper} = this.props
+    return (
+      <Context>
+        <Context.Menu icon={IconFont.Trash} color={ComponentColor.Danger}>
+          <Context.Item label="Delete" action={onDeleteScraper} />
+        </Context.Menu>
+      </Context>
+    )
+  }
+
   private handleUpdateScraperName = async (name: string) => {
     const {onUpdateScraper, scraper} = this.props
     await onUpdateScraper({...scraper, name})

diff --git a/ui/src/scrapers/components/__snapshots__/Scrapers.test.tsx.snap b/ui/src/scrapers/components/__snapshots__/Scrapers.test.tsx.snap
@@ -2,35 +2,25 @@
 
 exports[`ScraperList rendering renders 1`] = `
 <Fragment>
-  <IndexList>
-    <IndexListHeader>
-      <IndexListHeaderCell
-        alignment="left"
-        columnName="Name"
+  <ResourceList>
+    <ResourceListHeader>
+      <ResourceListSorter
+        name="name"
         sort="none"
         sortKey="name"
-        width="50%"
       />
-      <IndexListHeaderCell
-        alignment="left"
-        columnName="Target URL"
+      <ResourceListSorter
+        name="url"
         sort="none"
         sortKey="url"
-        width="20%"
       />
-      <IndexListHeaderCell
-        alignment="left"
-        columnName="Bucket"
-        width="15%"
-      />
-      <IndexListHeaderCell
-        alignment="left"
-        columnName=""
-        width="15%"
+      <ResourceListSorter
+        name="bucket"
+        sort="none"
+        sortKey="bucket"
       />
-    </IndexListHeader>
-    <IndexListBody
-      columnCount={4}
+    </ResourceListHeader>
+    <ResourceListBody
       emptyState={<React.Fragment />}
     >
       <ScraperRow
@@ -67,7 +57,7 @@ exports[`ScraperList rendering renders 1`] = `
           }
         }
       />
-    </IndexListBody>
-  </IndexList>
+    </ResourceListBody>
+  </ResourceList>
 </Fragment>
 `;