feat: arduino init client page (#5380)

* feat: add init client page to arduino wizard

Author: david-rusnak

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

@@ -7,28 +7,33 @@ import {
   createAuthorization,
   getAllResources,
 } from 'src/authorizations/actions/thunks'
+import {getBuckets} from 'src/buckets/actions/thunks'
+
+// Components
+import CodeSnippet from 'src/shared/components/CodeSnippet'
+import {
+  Columns,
+  ComponentSize,
+  Grid,
+  InfluxColors,
+  Panel,
+} from '@influxdata/clockface'
+import WriteDataHelperBuckets from 'src/writeData/components/WriteDataHelperBuckets'
+import {WriteDataDetailsContext} from 'src/writeData/components/WriteDataDetailsContext'
 
 // 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'
+import {getTimezoneOffset} from 'src/dashboards/utils/getTimezoneOffset'
 
 type OwnProps = {
   setTokenValue: (tokenValue: string) => void
@@ -47,32 +52,29 @@ export const InitializeClient: FC<OwnProps> = ({
   const me = useSelector(getMe)
   const allPermissionTypes = useSelector(getAllTokensResources)
   const dispatch = useDispatch()
-
+  const url =
+    me.quartzMe?.clusterHost || 'https://us-west-2-1.aws.cloud2.influxdata.com/'
   const currentAuth = useSelector((state: AppState) => {
     return state.resources.tokens.currentAuth.item
   })
+  const token = currentAuth.token
 
   const sortedPermissionTypes = useMemo(
     () => allPermissionTypes.sort((a, b) => collator.compare(a, b)),
     [allPermissionTypes]
   )
+
   const {bucket} = useContext(WriteDataDetailsContext)
 
   useEffect(() => {
     dispatch(getBuckets())
+    dispatch(getAllResources())
   }, []) // 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 = {
@@ -95,22 +97,112 @@ export const InitializeClient: FC<OwnProps> = ({
 
   useEffect(() => {
     const fireKeyboardCopyEvent = event => {
-      if (
-        keyboardCopyTriggered(event) &&
-        (userSelection().includes('influx config create') ||
-          userSelection().includes('influx bucket create'))
-      ) {
+      if (keyboardCopyTriggered(event) && userSelection().includes('#define')) {
         logCopyCodeSnippet()
       }
     }
     document.addEventListener('keydown', fireKeyboardCopyEvent)
     return () => document.removeEventListener('keydown', fireKeyboardCopyEvent)
   }, [])
 
+  const codeSnippet = `#if defined(ESP32)
+  #include <WiFiMulti.h>
+  WiFiMulti wifiMulti;
+  #define DEVICE "ESP32"
+  #elif defined(ESP8266)
+  #include <ESP8266WiFiMulti.h>
+  ESP8266WiFiMulti wifiMulti;
+  #define DEVICE "ESP8266"
+  #endif
+  
+  #include <InfluxDbClient.h>
+  #include <InfluxDbCloud.h>
+  
+  // WiFi AP SSID
+  #define WIFI_SSID "YOUR_WIFI_SSID"
+  // WiFi password
+  #define WIFI_PASSWORD "YOUR_WIFI_PASSWORD"
+  
+  #define INFLUXDB_URL "${url}"
+  #define INFLUXDB_TOKEN "${token}"
+  #define INFLUXDB_ORG "${org.id}"
+  #define INFLUXDB_BUCKET "${
+    bucket.name === '<BUCKET>' ? 'YOUR_BUCKET' : bucket.name
+  }"
+  
+  // Time zone info
+  #define TZ_INFO "UTC${-getTimezoneOffset() / 60}"
+  
+  // Declare InfluxDB client instance with preconfigured InfluxCloud certificate
+  InfluxDBClient client(INFLUXDB_URL, INFLUXDB_ORG, INFLUXDB_BUCKET, INFLUXDB_TOKEN, InfluxDbCloud2CACert);
+  
+  // Declare Data point
+  Point sensor("wifi_status");
+  
+  void setup() {
+    Serial.begin(115200);
+  
+    // Setup wifi
+    WiFi.mode(WIFI_STA);
+    wifiMulti.addAP(WIFI_SSID, WIFI_PASSWORD);
+  
+    Serial.print("Connecting to wifi");
+    while (wifiMulti.run() != WL_CONNECTED) {
+      Serial.print(".");
+      delay(100);
+    }
+    Serial.println();
+  
+    // Accurate time is necessary for certificate validation and writing in batches
+    // We use the NTP servers in your area as provided by: https://www.pool.ntp.org/zone/
+    // Syncing progress and the time will be printed to Serial.
+    timeSync(TZ_INFO, "pool.ntp.org", "time.nis.gov");
+  
+  
+    // Check server connection
+    if (client.validateConnection()) {
+      Serial.print("Connected to InfluxDB: ");
+      Serial.println(client.getServerUrl());
+    } else {
+      Serial.print("InfluxDB connection failed: ");
+      Serial.println(client.getLastErrorMessage());
+    }
+  }`
+
   // Events log handling
   const logCopyCodeSnippet = () => {
-    event(`firstMile.arduinoWizard.buckets.code.copied`)
+    event(`firstMile.arduinoWizard.initializeClient.code.copied`)
   }
 
-  return <h1>Initialize Client</h1>
+  return (
+    <>
+      <h1>Initialize Client</h1>
+      <p>Select or create a bucket to initialize the arduino client with.</p>
+      <Panel backgroundColor={InfluxColors.Grey15}>
+        <Panel.Body size={ComponentSize.ExtraSmall}>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column widthSM={Columns.Twelve}>
+                <WriteDataHelperBuckets useSimplifiedBucketForm={true} />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Panel.Body>
+      </Panel>
+      <p className="small-margins">
+        Paste the following snippet into a blank Arduino sketch file.
+      </p>
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="arduino"
+      />
+      <p style={{fontSize: '14px', marginTop: '8px', marginBottom: '48px'}}>
+        Note: you will need to set the{' '}
+        <code className="homepage-wizard--code-highlight">WIFI_SSID</code> and{' '}
+        <code className="homepage-wizard--code-highlight">WIFI_PASSWORD</code>{' '}
+        variables to the correct values for your wifi router.
+      </p>
+    </>
+  )
 }