feat(ui): curate client libary list for sql (#6556)

* feat(ui): curate client libary list for sql

* chore: appease linter

* refactor: move useSelector outside of return

* refactor: change relative import

Author: mavarius

src/writeData/components/ClientLibrarySectionSql.tsx

@@ -0,0 +1,86 @@
+// Libraries
+import React, {useContext} from 'react'
+import {useSelector} from 'react-redux'
+import {useHistory} from 'react-router-dom'
+import {ORGS} from 'src/shared/constants/routes'
+import {searchClients} from 'src/writeData'
+
+// Utils
+import {getOrg} from 'src/organizations/selectors'
+import {event} from 'src/cloud/utils/reporting'
+
+// Contexts
+import {WriteDataSearchContext} from 'src/writeData/containers/WriteDataPage'
+
+// Components
+import {
+  SquareGrid,
+  ComponentSize,
+  Heading,
+  HeadingElement,
+  FontWeight,
+} from '@influxdata/clockface'
+import WriteDataItem from 'src/writeData/components/WriteDataItem'
+
+const ClientLibrarySectionSql = () => {
+  const {searchTerm} = useContext(WriteDataSearchContext)
+  const items = searchClients(searchTerm)
+
+  const history = useHistory()
+  const org = useSelector(getOrg)
+
+  const onBoardingItems = {
+    python: 'python',
+  }
+
+  if (!items.length) {
+    return null
+  }
+
+  return (
+    <div
+      className="write-data--section"
+      data-testid="write-data--section client-libraries"
+    >
+      <Heading
+        element={HeadingElement.H2}
+        weight={FontWeight.Regular}
+        style={{marginTop: '24px', marginBottom: '4px'}}
+      >
+        Client Libraries
+      </Heading>
+      <Heading
+        element={HeadingElement.H5}
+        weight={FontWeight.Regular}
+        style={{marginBottom: '24px'}}
+      >
+        Back-end, front-end, and mobile applications
+      </Heading>
+      <SquareGrid cardSize="170px" gutter={ComponentSize.Small}>
+        {items.map(item => {
+          const goto = () => {
+            event('Load data client library clicked', {type: item.name})
+            if (onBoardingItems.hasOwnProperty(`${item.id}`)) {
+              return history.push(
+                `/${ORGS}/${org.id}/new-user-setup/${onBoardingItems[item.id]}`
+              )
+            }
+          }
+          if (onBoardingItems.hasOwnProperty(`${item.id}`)) {
+            return (
+              <WriteDataItem
+                key={item.id}
+                id={item.id}
+                name={item.name}
+                image={item.logo}
+                onClick={goto}
+              />
+            )
+          }
+        })}
+      </SquareGrid>
+    </div>
+  )
+}
+
+export default ClientLibrarySectionSql

src/writeData/components/WriteDataSections.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {FC, useContext} from 'react'
+import {useSelector} from 'react-redux'
 
 // Contexts
 import {WriteDataSearchContext} from 'src/writeData/containers/WriteDataPage'
@@ -14,14 +15,17 @@ import {CLOUD} from 'src/shared/constants'
 import {EmptyState, ComponentSize} from '@influxdata/clockface'
 import FileUploadSection from 'src/writeData/components/FileUploadSection'
 import ClientLibrarySection from 'src/writeData/components/ClientLibrarySection'
+import ClientLibrarySectionSql from 'src/writeData/components/ClientLibrarySectionSql'
 import TelegrafPluginSection from 'src/writeData/components/TelegrafPluginSection'
 import CloudNativeSources from 'src/writeData/subscriptions/components/CloudNativeSources'
 
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {isOrgIOx} from 'src/organizations/selectors'
 
 const WriteDataSections: FC = () => {
   const {searchTerm} = useContext(WriteDataSearchContext)
+  const isIOxOrg = useSelector(isOrgIOx)
   const hasResults =
     !!searchUploads(searchTerm).length ||
     !!searchClients(searchTerm).length ||
@@ -40,7 +44,7 @@ const WriteDataSections: FC = () => {
   return (
     <>
       <FileUploadSection />
-      <ClientLibrarySection />
+      {isIOxOrg ? <ClientLibrarySectionSql /> : <ClientLibrarySection />}
       {CLOUD && isFlagEnabled('subscriptionsUI') && <CloudNativeSources />}
       <TelegrafPluginSection />
     </>