feat: add executeQuery page for arduino wizard (#5400)

* feat: add executeQuery page for arduino wizard

* fix: add text and dynamic bucket names

Co-authored-by: alex wang <alexwang@alexs-MacBook-Pro.local>
Co-authored-by: David R <drusnak@influxdata.com>

Author: 3 people

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

@@ -1,9 +1,13 @@
 // Libraries
 import React, {useEffect} from 'react'
 
+// Components
+import CodeSnippet from 'src/shared/components/CodeSnippet'
+import {DEFAULT_BUCKET} from 'src/writeData/components/WriteDataDetailsContext'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
 // Utils
 import {event} from 'src/cloud/utils/reporting'
-
 import {keyboardCopyTriggered, userSelection} from 'src/utils/crossPlatform'
 
 const logCopyCodeSnippet = () => {
@@ -16,6 +20,64 @@ type OwnProps = {
 
 export const ExecuteQuery = (props: OwnProps) => {
   const {bucket} = props
+  const bucketName = bucket === DEFAULT_BUCKET ? 'sample-bucket' : bucket
+
+  const codeSnippet = `void loop() {
+    // ... code from Write Data step 
+    
+    // Query will find the RSSI values for last minute for each connected WiFi network with this device
+     String query = "from(bucket: \"${bucketName}\")\n\
+   |> range(start: -1m)\n\
+   |> filter(fn: (r) => r._measurement == \"wifi_status\" and r._field == \"rssi\")";
+   
+     // Print composed query
+     Serial.println("Querying for RSSI values written to the \"${bucketName}\" bucket in the last 1 min... ");
+     Serial.println(query);
+   
+     // Send query to the server and get result
+     FluxQueryResult result = client.query(query);
+   
+     Serial.println("Results : ");
+     // Iterate over rows.
+     while (result.next()) {
+       // Get converted value for flux result column 'SSID'
+       String ssid = result.getValueByName("SSID").getString();
+       Serial.print("SSID '");
+       Serial.print(ssid);
+   
+       Serial.print("' with RSSI ");
+       // Get value of column named '_value'
+       long value = result.getValueByName("_value").getLong();
+       Serial.print(value);
+   
+       // Get value for the _time column
+       FluxDateTime time = result.getValueByName("_time").getDateTime();
+   
+       String timeStr = time.format("%F %T");
+   
+       Serial.print(" at ");
+       Serial.print(timeStr);
+   
+       Serial.println();
+     }
+   
+     // Report any error
+     if (result.getError() != "") {
+       Serial.print("Query result error: ");
+       Serial.println(result.getError());
+     }
+   
+     // Close the result
+     result.close();
+   
+     Serial.println("==========");
+   
+     delay(5000);
+   }`
+
+  const fluxExample = `from(bucket: “weather-data”)
+  |> range(start: -10m)
+  |> filter(fn: (r) => r._measurement == “temperature”)`
 
   useEffect(() => {
     const fireKeyboardCopyEvent = event => {
@@ -30,5 +92,40 @@ export const ExecuteQuery = (props: OwnProps) => {
     return () => document.removeEventListener('keydown', fireKeyboardCopyEvent)
   }, [])
 
-  return <h1>Execute a Flux Query on {bucket}</h1>
+  return (
+    <>
+      <h1>Execute a Flux Query</h1>
+      <p>
+        Now let's query the data we wrote into the database. We use the Flux
+        scripting language to query data.{' '}
+        <SafeBlankLink
+          href="https://docs.influxdata.com/influxdb/v2.2/reference/syntax/flux/"
+          onClick={() =>
+            event('firstMile.arduinoWizard.documentation.link.clicked')
+          }
+        >
+          Flux
+        </SafeBlankLink>{' '}
+        is designed for querying, analyzing, and acting on data.
+        <br />
+        <br />
+        Here's an example of a basic Flux script:
+      </p>
+      <CodeSnippet
+        text={fluxExample}
+        showCopyControl={false}
+        language="properties"
+      ></CodeSnippet>
+      <p className="small-margins">
+        In this query, we are looking for data points within the last 1 minute
+        with a measurement of{' '}
+        <code className="homepage-wizard--code-highlight">"wifi_status"</code>.
+      </p>
+      <CodeSnippet
+        text={codeSnippet}
+        onCopy={logCopyCodeSnippet}
+        language="arduino"
+      />
+    </>
+  )
 }