fix: Add missing eventing to firstMile video (#4640)

* fix: add eventing to onboarding wizard videos

Author: wdoconnell

src/homepageExperience/components/steps/Overview.tsx

@@ -1,39 +1,59 @@
-import React, {PureComponent} from 'react'
+import React, {FC, useEffect, useRef} from 'react'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+import {event} from 'src/cloud/utils/reporting'
 
-export class Overview extends PureComponent {
-  render() {
-    return (
-      <div>
-        <h1>Hello, Time-Series World!</h1>
-        <article>
-          <p>Welcome and thanks for checking out InfluxData!</p>
+type Props = {
+  wizard: string
+}
+
+export const Overview: FC<Props> = ({wizard}) => {
+  const videoFrame = useRef<null | HTMLIFrameElement>(null)
+
+  // iFrames represent separate browsing context, requiring this workaround. For more, see resolution of this ticket (https://github.com/influxdata/ui/issues/4623)
 
-          <p>
-            In the next 5 minutes, you will set up InfluxData on your machine
-            and write and execute some basic queries.
-          </p>
+  useEffect(() => {
+    const checkVidClick = () => {
+      if (
+        document.activeElement &&
+        document.activeElement.nodeName.toLowerCase() === 'iframe' &&
+        videoFrame.current &&
+        videoFrame.current === document.activeElement
+      ) {
+        event(`firstMile.${wizard}Video.clicked`)
+      }
+    }
+    window.addEventListener('blur', checkVidClick)
+  }, [])
 
-          <iframe
-            width="560"
-            height="315"
-            src="https://www.youtube.com/embed/KZwr1xBDbBQ"
-            title="InfluxData - What is Time Series"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            style={{marginBottom: '20px'}}
-          />
+  return (
+    <div>
+      <h1>Hello, Time-Series World!</h1>
+      <article>
+        <p>Welcome and thanks for checking out InfluxData!</p>
 
-          <p>
-            Join our{' '}
-            <SafeBlankLink href="https://www.influxdata.com/slack">
-              community slack{' '}
-            </SafeBlankLink>{' '}
-            to ask any questions you have along the way!
-          </p>
-        </article>
-      </div>
-    )
-  }
+        <p>
+          In the next 5 minutes, you will set up InfluxData on your machine and
+          write and execute some basic queries.
+        </p>
+        <iframe
+          ref={videoFrame}
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/KZwr1xBDbBQ"
+          title="InfluxData - What is Time Series"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          style={{marginBottom: '20px'}}
+        />
+        <p>
+          Join our{' '}
+          <SafeBlankLink href="https://www.influxdata.com/slack">
+            community slack{' '}
+          </SafeBlankLink>{' '}
+          to ask any questions you have along the way!
+        </p>
+      </article>
+    </div>
+  )
 }

src/homepageExperience/containers/GoWizard.tsx

@@ -91,7 +91,7 @@ export class GoWizard extends PureComponent<null, State> {
   renderStep = () => {
     switch (this.state.currentStep) {
       case 1: {
-        return <Overview />
+        return <Overview wizard="goWizard" />
       }
       case 2: {
         return <InstallDependencies />
@@ -129,7 +129,7 @@ export class GoWizard extends PureComponent<null, State> {
         )
       }
       default: {
-        return <Overview />
+        return <Overview wizard="goWizard" />
       }
     }
   }

src/homepageExperience/containers/NodejsWizard.tsx

@@ -91,7 +91,7 @@ export class NodejsWizard extends PureComponent<null, State> {
   renderStep = () => {
     switch (this.state.currentStep) {
       case 1: {
-        return <Overview />
+        return <Overview wizard="nodejsWizard" />
       }
       case 2: {
         return <InstallDependencies />
@@ -129,7 +129,7 @@ export class NodejsWizard extends PureComponent<null, State> {
         )
       }
       default: {
-        return <Overview />
+        return <Overview wizard="nodejsWizard" />
       }
     }
   }

src/homepageExperience/containers/PythonWizard.tsx

@@ -92,7 +92,7 @@ export class PythonWizard extends PureComponent<null, State> {
   renderStep = () => {
     switch (this.state.currentStep) {
       case 1: {
-        return <Overview />
+        return <Overview wizard="pythonWizard" />
       }
       case 2: {
         return <InstallDependencies />
@@ -130,7 +130,7 @@ export class PythonWizard extends PureComponent<null, State> {
         )
       }
       default: {
-        return <Overview />
+        return <Overview wizard="pythonWizard" />
       }
     }
   }