feat: arduino firstMile scaffolding (#5273)

* feat: add arduino wizard outline

Author: david-rusnak

src/homepageExperience/components/HomepageIcons.tsx

@@ -1,6 +1,76 @@
 import React from 'react'
 
 // Language icons
+export const ArduinoIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    id="Layer_1"
+    x="0px"
+    y="0px"
+    width="108"
+    height="66"
+    enableBackground="new 0 0 342.394 261.395"
+    xmlSpace="preserve"
+    viewBox="25.84 27.72 288.36 197.67"
+  >
+    <g>
+      <g>
+        <path
+          fill="#00878F"
+          d="M314.2,96.221c0-37.77-31.866-68.504-71.038-68.504c-3.61,0-7.279,0.244-10.928,0.772    c-30.429,4.34-50.798,26.238-62.203,43.026c-11.432-16.788-31.797-38.686-62.23-43.026c-3.634-0.528-7.31-0.772-10.92-0.772    c-39.183,0-71.041,30.734-71.041,68.504c0,37.784,31.858,68.504,71.01,68.504c3.634,0,7.317-0.24,10.951-0.753    c30.433-4.367,50.798-26.268,62.23-43.076c11.405,16.808,31.774,38.709,62.203,43.076c3.649,0.513,7.318,0.753,10.959,0.753    C282.342,164.725,314.2,134.005,314.2,96.221 M104.363,139.916c-2.496,0.356-5.025,0.542-7.513,0.542    c-25.76,0-46.721-19.856-46.721-44.237c0-24.38,20.961-44.25,46.752-44.25c2.464,0,4.986,0.207,7.489,0.547    c28.667,4.092,46.224,32.374,52.174,43.692C150.591,107.554,133.037,135.825,104.363,139.916 M183.511,96.221    c5.95-11.329,23.487-39.611,52.162-43.703c2.487-0.34,5.029-0.547,7.489-0.547c25.776,0,46.745,19.87,46.745,44.25    c0,24.381-20.961,44.237-46.714,44.237c-2.473,0-5.009-0.186-7.52-0.542C206.998,135.825,189.445,107.538,183.511,96.221"
+        />
+        <rect
+          x="77.303"
+          y="89.53"
+          fill="#00878F"
+          width="42.652"
+          height="13.748"
+        />
+        <polygon
+          fill="#00878F"
+          points="247.897,103.278 262.316,103.278 262.316,89.53 247.897,89.53 247.897,75.064 234.115,75.064     234.115,89.53 219.672,89.53 219.672,103.278 234.115,103.278 234.115,117.743 247.897,117.743   "
+        />
+        <path
+          fill="#00878F"
+          d="M46.014,185.097l-12.448,39.679h10.049l2.025-8.129h11.413l2.2,8.129h10.431l-12.631-39.679H46.014z     M47.531,209.031l3.599-14.53l3.917,14.53H47.531z"
+        />
+        <path
+          fill="#00878F"
+          d="M107.086,198.348c0-7.627-4.145-13.251-15.123-13.251H75.977v39.679h9.819v-12.577h4.952l5.957,12.577    h11.6l-7.745-14.526C104.889,207.928,107.086,203.79,107.086,198.348 M90.989,204.324h-5.193v-11.203h5.002    c4.578,0,5.838,1.762,5.838,5.28C96.636,202.811,94.393,204.324,90.989,204.324"
+        />
+        <path
+          fill="#00878F"
+          d="M128.025,185.098h-12.988v39.678h13.049c16.835,0,19.697-10.815,19.697-20.203    C147.783,192.112,142.85,185.098,128.025,185.098 M128.575,216.647h-3.722v-23.526h2.866c8.781,0,9.575,4.131,9.575,11.887    C137.294,211.71,136.69,216.647,128.575,216.647"
+        />
+        <path
+          fill="#00878F"
+          d="M176.855,209.326c0,6.049-1.654,8.049-6.117,8.049c-3.714,0-6.045-1.52-6.045-8.103v-24.175h-9.815v26.013    c0,12.011,8.669,14.275,15.444,14.275c7.022,0,15.978-2.502,15.978-14.225v-26.063h-9.445L176.855,209.326L176.855,209.326z"
+        />
+        <polygon
+          fill="#00878F"
+          points="195.081,193.214 205.34,193.214 205.34,216.647 195.081,216.647 195.081,224.776 225.487,224.776     225.487,216.647 215.164,216.647 215.164,193.214 225.487,193.214 225.487,185.098 195.081,185.098   "
+        />
+        <polygon
+          fill="#00878F"
+          points="257.155,208.913 244.294,185.098 233.595,185.098 233.595,224.776 242.884,224.776     242.819,199.38 256.372,224.776 266.31,224.776 266.31,185.098 257.155,185.098   "
+        />
+        <path
+          fill="#00878F"
+          d="M289.46,184.579c-12.032,0-16.609,8.83-16.609,20.789c0,13.129,5.25,20.018,16.655,20.018    c12.762,0,16.96-8.965,16.96-20.446C306.466,189.798,300.747,184.579,289.46,184.579 M289.506,217.376    c-5.67,0-6.228-4.011-6.228-12.008c0-9.687,0.928-12.815,6.182-12.815c5.781,0,6.58,2.698,6.58,12.387    C296.04,214.094,295.241,217.376,289.506,217.376"
+        />
+        <g>
+          <path
+            fill="#00878F"
+            d="M300.654,39.428c0-3.536,2.808-6.396,6.214-6.396c3.484,0,6.292,2.86,6.292,6.396     c0,3.666-2.808,6.37-6.292,6.37C303.462,45.798,300.654,42.938,300.654,39.428z M312.068,39.428c0-2.86-2.158-5.408-5.2-5.408     c-2.964,0-5.122,2.21-5.122,5.408c0,3.302,2.418,5.408,5.122,5.408C309.91,44.836,312.068,42.678,312.068,39.428z      M303.904,35.372h3.094c2.418,0,3.276,1.04,3.276,2.652c0,1.092-0.52,1.924-1.508,2.34l1.508,3.043h-2.158l-1.118-2.679h-1.144     v2.679h-1.95L303.904,35.372L303.904,35.372z M306.843,39.35c0.857,0,1.403-0.312,1.403-1.326c0-0.884-0.338-1.248-1.43-1.248     h-0.962v2.574H306.843z"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
 export const PythonIcon = (
   <svg
     width="65"

src/homepageExperience/components/steps/arduino/ArduinoSteps.scss

@@ -0,0 +1,9 @@
+.small-margins {
+  margin-top: 0px;
+  margin-bottom: 8px;
+}
+
+.large-margins {
+  margin-top: 48px;
+  margin-bottom: 8px;
+}

src/homepageExperience/components/steps/arduino/ExecuteAggregateQuery.tsx

@@ -0,0 +1,33 @@
+// Libraries
+import React, {useEffect} from 'react'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+
+const logCopyCodeSnippet = () => {
+  event('firstMile.arduinoWizard.executeAggregateQuery.code.copied')
+}
+
+type OwnProps = {
+  bucket: string
+}
+
+export const ExecuteAggregateQuery = (props: OwnProps) => {
+  const {bucket} = props
+
+  useEffect(() => {
+    const fireKeyboardCopyEvent = event => {
+      if (
+        keyboardCopyTriggered(event) &&
+        userSelection().includes('influx query')
+      ) {
+        logCopyCodeSnippet()
+      }
+    }
+    document.addEventListener('keydown', fireKeyboardCopyEvent)
+    return () => document.removeEventListener('keydown', fireKeyboardCopyEvent)
+  }, [])
+
+  return <h1>Execute a Flux Aggregate Query on {bucket}</h1>
+}

src/homepageExperience/components/steps/arduino/ExecuteQuery.tsx

@@ -0,0 +1,34 @@
+// Libraries
+import React, {useEffect} from 'react'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+
+import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+
+const logCopyCodeSnippet = () => {
+  event('firstMile.arduinoWizard.executeQuery.code.copied')
+}
+
+type OwnProps = {
+  bucket: string
+}
+
+export const ExecuteQuery = (props: OwnProps) => {
+  const {bucket} = props
+
+  useEffect(() => {
+    const fireKeyboardCopyEvent = event => {
+      if (
+        keyboardCopyTriggered(event) &&
+        userSelection().includes('influx query')
+      ) {
+        logCopyCodeSnippet()
+      }
+    }
+    document.addEventListener('keydown', fireKeyboardCopyEvent)
+    return () => document.removeEventListener('keydown', fireKeyboardCopyEvent)
+  }, [])
+
+  return <h1>Execute a Flux Query on {bucket}</h1>
+}

src/homepageExperience/components/steps/arduino/InitializeClient.tsx

@@ -0,0 +1,116 @@
+// Libraries
+import React, {FC, useContext, useEffect, useMemo} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
+
+// Actions
+import {
+  createAuthorization,
+  getAllResources,
+} from 'src/authorizations/actions/thunks'
+
+// Selectors
+import {getOrg} from 'src/organizations/selectors'
+import {getMe} from 'src/me/selectors'
+import {getAllTokensResources} from 'src/resources/selectors'
+
+// Thunks
+import {getBuckets} from 'src/buckets/actions/thunks'
+
+// Helper Components
+import {WriteDataDetailsContext} from 'src/writeData/components/WriteDataDetailsContext'
+
+// Utils
+import {allAccessPermissions} from 'src/authorizations/utils/permissions'
+import {event} from 'src/cloud/utils/reporting'
+import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+
+// Types
+import {AppState, Authorization} from 'src/types'
+
+// Styles
+import './ArduinoSteps.scss'
+
+type OwnProps = {
+  setTokenValue: (tokenValue: string) => void
+  tokenValue: string
+  onSelectBucket: (bucketName: string) => void
+}
+
+const collator = new Intl.Collator(navigator.language || 'en-US')
+
+export const InitializeClient: FC<OwnProps> = ({
+  setTokenValue,
+  tokenValue,
+  onSelectBucket,
+}) => {
+  const org = useSelector(getOrg)
+  const me = useSelector(getMe)
+  const allPermissionTypes = useSelector(getAllTokensResources)
+  const dispatch = useDispatch()
+
+  const currentAuth = useSelector((state: AppState) => {
+    return state.resources.tokens.currentAuth.item
+  })
+
+  const sortedPermissionTypes = useMemo(
+    () => allPermissionTypes.sort((a, b) => collator.compare(a, b)),
+    [allPermissionTypes]
+  )
+  const {bucket} = useContext(WriteDataDetailsContext)
+
+  useEffect(() => {
+    dispatch(getBuckets())
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    onSelectBucket(bucket.name)
+  }, [bucket.name, onSelectBucket])
+
+  useEffect(() => {
+    const fetchResources = async () => {
+      await dispatch(getAllResources())
+    }
+    fetchResources()
+  }, [])
+
+  useEffect(() => {
+    if (sortedPermissionTypes.length && tokenValue === null) {
+      const authorization: Authorization = {
+        orgID: org.id,
+        description: `onboarding-arduinoWizard-token-${Date.now()}`,
+        permissions: allAccessPermissions(sortedPermissionTypes, org.id, me.id),
+      }
+
+      dispatch(createAuthorization(authorization))
+      event(`firstMile.arduinoWizard.tokens.tokenCreated`)
+    }
+  }, [sortedPermissionTypes.length])
+
+  // when token generated, save it to the parent component
+  useEffect(() => {
+    if (currentAuth.token) {
+      setTokenValue(currentAuth.token)
+    }
+  }, [currentAuth.token])
+
+  useEffect(() => {
+    const fireKeyboardCopyEvent = event => {
+      if (
+        keyboardCopyTriggered(event) &&
+        (userSelection().includes('influx config create') ||
+          userSelection().includes('influx bucket create'))
+      ) {
+        logCopyCodeSnippet()
+      }
+    }
+    document.addEventListener('keydown', fireKeyboardCopyEvent)
+    return () => document.removeEventListener('keydown', fireKeyboardCopyEvent)
+  }, [])
+
+  // Events log handling
+  const logCopyCodeSnippet = () => {
+    event(`firstMile.arduinoWizard.buckets.code.copied`)
+  }
+
+  return <h1>Initialize Client</h1>
+}

src/homepageExperience/components/steps/arduino/InstallDependencies.tsx

@@ -0,0 +1,115 @@
+import {
+  ComponentColor,
+  Button,
+  ButtonGroup,
+  Orientation,
+} from '@influxdata/clockface'
+
+import React, {FC, useEffect, useState} from 'react'
+import {useDispatch} from 'react-redux'
+import {getBuckets} from 'src/buckets/actions/thunks'
+import {event} from 'src/cloud/utils/reporting'
+import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
+
+export const InstallDependencies: FC = () => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(getBuckets())
+  }, [])
+
+  const headingWithMargin = {marginTop: '48px', marginBottom: '0px'}
+
+  const logCopyCodeSnippet = OS => {
+    event(`firstMile.cliWizard.installDependencies${OS}.code.copied`)
+  }
+
+  type CurrentOSSelection = 'Linux' | 'Mac' | 'Windows'
+  const [currentSelection, setCurrentSelection] = useState<CurrentOSSelection>(
+    'Mac'
+  )
+
+  useEffect(() => {
+    const fireKeyboardCopyEvent = event => {
+      if (
+        keyboardCopyTriggered(event) &&
+        userSelection().includes('brew install')
+      ) {
+        logCopyCodeSnippet('Mac')
+      }
+      if (
+        keyboardCopyTriggered(event) &&
+        (userSelection().includes('Expand-Archive') ||
+          userSelection().includes('mv'))
+      ) {
+        logCopyCodeSnippet('Windows')
+      }
+      if (
+        keyboardCopyTriggered(event) &&
+        (userSelection().includes('wget') ||
+          userSelection().includes('tar') ||
+          userSelection().includes('sudo'))
+      ) {
+        logCopyCodeSnippet('Linux')
+      }
+    }
+    document.addEventListener('keydown', fireKeyboardCopyEvent)
+    return () => document.removeEventListener('keydown', fireKeyboardCopyEvent)
+  }, [])
+
+  return (
+    <>
+      <h1>Install Dependencies</h1>
+      <ButtonGroup orientation={Orientation.Horizontal}>
+        <Button
+          text="mac OS"
+          color={
+            currentSelection === 'Mac'
+              ? ComponentColor.Primary
+              : ComponentColor.Default
+          }
+          onClick={() => {
+            setCurrentSelection('Mac')
+          }}
+        />
+        <Button
+          text="windows"
+          color={
+            currentSelection === 'Windows'
+              ? ComponentColor.Primary
+              : ComponentColor.Default
+          }
+          onClick={() => {
+            setCurrentSelection('Windows')
+          }}
+        />
+        <Button
+          text="linux"
+          color={
+            currentSelection === 'Linux'
+              ? ComponentColor.Primary
+              : ComponentColor.Default
+          }
+          onClick={() => {
+            setCurrentSelection('Linux')
+          }}
+        />
+      </ButtonGroup>
+      {currentSelection === 'Mac' && (
+        <>
+          <h2 style={headingWithMargin}>Use Homebrew</h2>
+        </>
+      )}
+      {currentSelection === 'Windows' && (
+        <>
+          <h2 style={headingWithMargin}>Download the CLI package</h2>
+        </>
+      )}
+      {currentSelection === 'Linux' && (
+        <>
+          <h2 style={headingWithMargin}>Download from the command line</h2>
+        </>
+      )}
+    </>
+  )
+}