From 3d810a9ce5464ee18f04a31e1367d2e4d4bd3491 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 12 Feb 2019 10:07:55 -0800
Subject: [PATCH] feat(ui): Display scraper name in scrapers list

---
 CHANGELOG.md                                             | 1 +
 ui/src/organizations/components/ScraperList.tsx          | 5 +++--
 ui/src/organizations/components/ScraperRow.tsx           | 9 +++++----
 .../components/__snapshots__/Scrapers.test.tsx.snap      | 9 +++++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cde6619940..6964cf8566 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### Features
 1. [11809](https://github.com/influxdata/influxdb/pull/11809): Add the ability to name a scraper target
+1. [11821](https://github.com/influxdata/influxdb/pull/11821): Display scraper name as the first and only updatable column in scrapers list
 
 ### Bug Fixes
 
diff --git a/ui/src/organizations/components/ScraperList.tsx b/ui/src/organizations/components/ScraperList.tsx
index 52809fb4b5..42616633b2 100644
--- a/ui/src/organizations/components/ScraperList.tsx
+++ b/ui/src/organizations/components/ScraperList.tsx
@@ -23,8 +23,9 @@ export default class ScraperList extends PureComponent<Props> {
       <>
         <IndexList>
           <IndexList.Header>
-            <IndexList.HeaderCell columnName="URL" width="50%" />
-            <IndexList.HeaderCell columnName="Bucket" width="50%" />
+            <IndexList.HeaderCell columnName="Name" width="33%" />
+            <IndexList.HeaderCell columnName="URL" width="34%" />
+            <IndexList.HeaderCell columnName="Bucket" width="33%" />
           </IndexList.Header>
           <IndexList.Body columnCount={3} emptyState={emptyState}>
             {this.scrapersList}
diff --git a/ui/src/organizations/components/ScraperRow.tsx b/ui/src/organizations/components/ScraperRow.tsx
index d37237eb41..79918cb4c9 100644
--- a/ui/src/organizations/components/ScraperRow.tsx
+++ b/ui/src/organizations/components/ScraperRow.tsx
@@ -28,11 +28,12 @@ export default class ScraperRow extends PureComponent<Props> {
         <IndexList.Row>
           <IndexList.Cell>
             <EditableName
-              onUpdate={this.handleUpdateScraper}
-              name={scraper.url}
+              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
@@ -48,8 +49,8 @@ export default class ScraperRow extends PureComponent<Props> {
     )
   }
 
-  private handleUpdateScraper = (name: string) => {
+  private handleUpdateScraperName = (name: string) => {
     const {onUpdateScraper, scraper} = this.props
-    onUpdateScraper({...scraper, url: name})
+    onUpdateScraper({...scraper, name})
   }
 }
diff --git a/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap b/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap
index bcecc14d39..ef44c05fef 100644
--- a/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap
+++ b/ui/src/organizations/components/__snapshots__/Scrapers.test.tsx.snap
@@ -4,15 +4,20 @@ exports[`ScraperList rendering renders 1`] = `
 <Fragment>
   <IndexList>
     <IndexListHeader>
+      <IndexListHeaderCell
+        alignment="left"
+        columnName="Name"
+        width="33%"
+      />
       <IndexListHeaderCell
         alignment="left"
         columnName="URL"
-        width="50%"
+        width="34%"
       />
       <IndexListHeaderCell
         alignment="left"
         columnName="Bucket"
-        width="50%"
+        width="33%"
       />
     </IndexListHeader>
     <IndexListBody