fix: sources / upload data (CSV Data) refactor (#3557)

Author: ChitlangeSahas

src/writeData/components/FileUploadSection.tsx

@@ -41,7 +41,7 @@ const FileUploadSection = () => {
         weight={FontWeight.Regular}
         style={{marginBottom: '24px'}}
       >
-        Upload line protocol or Annotated CSVs with the click of a button
+        Upload line protocol or Annotated CSVs
       </Heading>
       <SquareGrid cardSize="170px" gutter={ComponentSize.Small}>
         {items.map(item => (

src/writeData/components/WriteDataItem.tsx

@@ -9,6 +9,7 @@ const LazySVG = React.lazy(() => import('src/perf/components/LazySVG'))
 
 // Utils
 import {getOrg} from 'src/organizations/selectors'
+import {event} from 'src/cloud/utils/reporting'
 
 // Graphics
 import placeholderLogo from 'src/writeData/graphics/placeholderLogo.svg'
@@ -44,6 +45,7 @@ const WriteDataItem: FC<Props> = ({
   const org = useSelector(getOrg)
 
   const handleClick = (): void => {
+    event(`sources.load_data.${name}.clicked`)
     history.push(`/${ORGS}/${org.id}/load-data/${url}`)
   }
 

src/writeData/components/fileUploads/UploadDataDetailsView.tsx

@@ -87,11 +87,13 @@ const UploadDataDetailsView: FC = () => {
                   className="write-data--details-content markdown-format"
                   data-testid="load-data-details-content"
                 >
-                  <Panel backgroundColor={InfluxColors.Grey15}>
-                    <Panel.Body size={ComponentSize.ExtraSmall}>
-                      <WriteDataHelperBuckets />
-                    </Panel.Body>
-                  </Panel>
+                  {name !== 'csv' ?? (
+                    <Panel backgroundColor={InfluxColors.Grey15}>
+                      <Panel.Body size={ComponentSize.ExtraSmall}>
+                        <WriteDataHelperBuckets />
+                      </Panel.Body>
+                    </Panel>
+                  )}
                   <div className="write-data--uploader-wrapper">
                     {!isNonannotatedCSV &&
                       (isLP ? <LineProtocolTabs /> : <CsvMethod />)}

src/writeData/constants/contentFileUploads.ts

@@ -22,21 +22,21 @@ export const WRITE_DATA_FILE_UPLOADS: FileUpload[] = [
     image: CSVLogo,
     markdown: AnnotatedCSVMarkdown,
   },
-  {
-    id: 'csv',
-    name: 'CSV Data',
-    image: CSVLogo,
-    markdown: CSVMarkdown,
-  },
   {
     id: 'lp',
     name: 'Line Protocol',
     image: LPLogo,
     markdown: LPMarkdown,
   },
+  {
+    id: 'csv',
+    name: 'CSV Data (CLI)',
+    image: CSVLogo,
+    markdown: CSVMarkdown,
+  },
 ]
 
 export const search = (term: string): FileUpload[] =>
   WRITE_DATA_FILE_UPLOADS.filter(item =>
     item.name.toLowerCase().includes(term.toLowerCase())
-  ).sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+  )