From 4838eef02570f78fb5a6cb14b022af49e921cbae Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Tue, 16 Jan 2024 11:25:02 -0800
Subject: [PATCH] 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
---
 .../OptionAccordion/DeployAccordion.tsx       | 80 +++++++++++++++++++
 .../containers/HomepageContents.tsx           | 11 +++
 2 files changed, 91 insertions(+)
 create mode 100644 src/homepageExperience/components/OptionAccordion/DeployAccordion.tsx

diff --git a/src/homepageExperience/components/OptionAccordion/DeployAccordion.tsx b/src/homepageExperience/components/OptionAccordion/DeployAccordion.tsx
new file mode 100644
index 0000000000..48c7ae6873
--- /dev/null
+++ b/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}
+                />
+              )
+            }}
+          />
+        </>
+      }
+    />
+  )
+}
diff --git a/src/homepageExperience/containers/HomepageContents.tsx b/src/homepageExperience/containers/HomepageContents.tsx
index 0c0db04d92..ee55c24af0 100644
--- a/src/homepageExperience/containers/HomepageContents.tsx
+++ b/src/homepageExperience/containers/HomepageContents.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {FC} from 'react'
+import {useSelector} from 'react-redux'
 
 // Components
 import {
@@ -19,6 +20,9 @@ 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'
@@ -26,11 +30,17 @@ import {ManageDatabasesAccordion} from 'src/homepageExperience/components/Option
 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>