feat(ui): add deployments option accordion (#6845)

* feat(ui): add deployments option accordion

* feat(ui): only show deploy to free users

* chore: add feature flag

src/homepageExperience/components/OptionAccordion/DeployAccordion.tsx

@@ -0,0 +1,80 @@
+// Libraries
+import React, {FC} from 'react'
+
+// Components
+import {IconFont, InfluxColors} from '@influxdata/clockface'
+import {OptionAccordion} from 'src/homepageExperience/components/OptionAccordion/OptionAccordion'
+import {OptionAccordionElement} from 'src/homepageExperience/components/OptionAccordion/OptionAccordionElement'
+import {OptionLink} from './OptionLink'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+
+export const DeployAccordion: FC = () => {
+  const optionId = 'deployInstance'
+
+  const handleServerlessClick = () => {
+    event(`homeOptions.${optionId}.serverless.clicked`)
+  }
+
+  const handleDedicatedClick = () => {
+    event(`homeOptions.${optionId}.dedicated.clicked`)
+  }
+
+  const handleClusteredClick = () => {
+    event(`homeOptions.${optionId}.clustered.clicked`)
+  }
+
+  return (
+    <OptionAccordion
+      headerIcon={IconFont.Cube}
+      headerIconColor={InfluxColors.Star}
+      headerTitle="Deploy"
+      headerDescription="Run InfluxDB where you need it."
+      optionId="deployInstance"
+      bodyContent={
+        <>
+          <OptionAccordionElement
+            elementTitle="Cloud Serverless"
+            elementDescription="A fully managed, elastic, multi-tenant service best for smaller workloads."
+            cta={() => {
+              return (
+                <OptionLink
+                  title="Learn More"
+                  href="https://docs.influxdata.com/influxdb/cloud-serverless/"
+                  onClick={handleServerlessClick}
+                />
+              )
+            }}
+          />
+          <OptionAccordionElement
+            elementTitle="Cloud Dedicated"
+            elementDescription="A fully managed, single-tenant service for high volume production workloads."
+            cta={() => {
+              return (
+                <OptionLink
+                  title="Learn More"
+                  href="https://docs.influxdata.com/influxdb/cloud-dedicated/"
+                  onClick={handleDedicatedClick}
+                />
+              )
+            }}
+          />
+          <OptionAccordionElement
+            elementTitle="Clustered"
+            elementDescription="A self-managed database for on-premises or private cloud deployments."
+            cta={() => {
+              return (
+                <OptionLink
+                  title="Learn More"
+                  href="https://docs.influxdata.com/influxdb/clustered/"
+                  onClick={handleClusteredClick}
+                />
+              )
+            }}
+          />
+        </>
+      }
+    />
+  )
+}

src/homepageExperience/containers/HomepageContents.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {FC} from 'react'
+import {useSelector} from 'react-redux'
 
 // Components
 import {
@@ -19,18 +20,27 @@ import {CloudWidgets} from 'src/me/components/CloudWidgets'
 // Constants
 import {CLOUD} from 'src/shared/constants'
 
+// Selectors
+import {selectCurrentIdentity} from 'src/identity/selectors'
+
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 import UsageProvider from 'src/usage/context/usage'
 import {ManageDatabasesAccordion} from 'src/homepageExperience/components/OptionAccordion/ManageDatabasesAccordion'
 import {AddDataAccordion} from 'src/homepageExperience/components/OptionAccordion/AddDataAccordion'
 import {QueryDataAccordion} from 'src/homepageExperience/components/OptionAccordion/QueryDataAccordion'
 import {VisualizeAccordion} from 'src/homepageExperience/components/OptionAccordion/VisualizeAccordion'
+import {DeployAccordion} from 'src/homepageExperience/components/OptionAccordion/DeployAccordion'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Styles
 import 'src/homepageExperience/containers/HomepageContents.scss'
 
 export const HomepageContents: FC = () => {
+  const {account} = useSelector(selectCurrentIdentity)
+  const freeAccount = CLOUD && account.type === 'free'
+  const showDeployAccordion = freeAccount && isFlagEnabled('deployAccordion')
+
   return (
     <Page titleTag={pageTitleSuffixer(['Get Started'])}>
       <Page.Header fullWidth={true}>
@@ -66,6 +76,7 @@ export const HomepageContents: FC = () => {
                   <AddDataAccordion />
                   <QueryDataAccordion />
                   <VisualizeAccordion />
+                  {showDeployAccordion && <DeployAccordion />}
                 </FlexBox.Child>
               </FlexBox>
             </Grid.Column>