Merge pull request #11821 from influxdata/feat/show-scraper-name

feat(ui): Display scraper name in scrapers list

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
 

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="Name" width="33%" />
-            <IndexList.HeaderCell columnName="Bucket" width="50%" />
+            <IndexList.HeaderCell columnName="URL" width="34%" />
+            <IndexList.HeaderCell columnName="Bucket" width="33%" />
           </IndexList.Header>
           <IndexList.Body columnCount={3} emptyState={emptyState}>
             {this.scrapersList}

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}
+              onUpdate={this.handleUpdateScraperName}
-              name={scraper.url}
+              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})
   }
 }

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