feat(ui): add links for superset and grafana docs (#6548)

Author: mavarius

src/homepageExperience/components/HomepageExperience.scss

@@ -70,10 +70,10 @@ h1#first-mile--header {
 .homepage-wizard-next-steps {
   display: flex;
   max-width: 300px;
-  margin-top: 0 !important;
   h4 {
     background: linear-gradient(45deg, #fad9ff 0%, #f0fcff 100%);
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
 
     display: flex;
@@ -85,7 +85,12 @@ h1#first-mile--header {
     }
   }
 
+  .cf-icon {
+    margin-right: $cf-space-2xs;
+  }
+
   p {
+    color: $cf-grey-95;
     font-size: 14px;
     margin: 0;
     font-style: normal;

src/homepageExperience/components/steps/DashboardIntegrations.tsx

@@ -0,0 +1,64 @@
+import React, {FC} from 'react'
+
+// Components
+import {
+  AlignItems,
+  ComponentSize,
+  FlexBox,
+  FlexDirection,
+  Icon,
+  IconFont,
+  ResourceCard,
+} from '@influxdata/clockface'
+
+// Utils
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
+type Props = {
+  wizardEventName: string
+  handleNextStepEvent: (wizardEventName: string, nextStepName: string) => void
+}
+
+const DashboardIntegrations: FC<Props> = ({
+  wizardEventName,
+  handleNextStepEvent,
+}) => {
+  return (
+    <FlexBox
+      margin={ComponentSize.Large}
+      alignItems={AlignItems.Stretch}
+      direction={FlexDirection.Row}
+    >
+      <ResourceCard className="homepage-wizard-next-steps">
+        <SafeBlankLink
+          href="https://docs.influxdata.com/influxdb/cloud-iox/visualize-data/superset/"
+          onClick={() =>
+            handleNextStepEvent(wizardEventName, 'supersetIntegration')
+          }
+        >
+          <h4>
+            <Icon glyph={IconFont.DashH} />
+            Integrate with Supserset
+          </h4>
+        </SafeBlankLink>
+        <p>Create dashboards and alerts with Apache Superset.</p>
+      </ResourceCard>
+      <ResourceCard className="homepage-wizard-next-steps">
+        <SafeBlankLink
+          href="https://docs.influxdata.com/influxdb/cloud-iox/visualize-data/grafana/"
+          onClick={() =>
+            handleNextStepEvent(wizardEventName, 'grafanaIntegration')
+          }
+        >
+          <h4>
+            <Icon glyph={IconFont.DashH} />
+            Integrate with Grafana
+          </h4>
+        </SafeBlankLink>
+        <p>Create dashboards and alerts with Grafana.</p>
+      </ResourceCard>
+    </FlexBox>
+  )
+}
+
+export default DashboardIntegrations

src/homepageExperience/components/steps/Finish.tsx

@@ -1,23 +1,25 @@
 import React, {useEffect} from 'react'
+import confetti from 'canvas-confetti'
+
+// Components
 import {
   AlignItems,
   ComponentSize,
   FlexBox,
   FlexDirection,
   ResourceCard,
 } from '@influxdata/clockface'
-
-import confetti from 'canvas-confetti'
-
 import {
   BookIcon,
   CodeTerminalIcon,
 } from 'src/homepageExperience/components/HomepageIcons'
-import {SafeBlankLink} from 'src/utils/SafeBlankLink'
-
-import {event} from 'src/cloud/utils/reporting'
 import FeedbackBar from 'src/homepageExperience/components/FeedbackBar'
 import SampleAppCard from 'src/homepageExperience/components/steps/SampleAppCard'
+import DashboardIntegrations from 'src/homepageExperience/components/steps/DashboardIntegrations'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 type OwnProps = {
@@ -162,6 +164,12 @@ export const Finish = (props: OwnProps) => {
             wizardEventName={props.wizardEventName}
           />
         ) : null}
+        {isFlagEnabled('ioxOnboarding') && (
+          <DashboardIntegrations
+            handleNextStepEvent={handleNextStepEvent}
+            wizardEventName={props.wizardEventName}
+          />
+        )}
       </FlexBox>
     </>
   )