feat: add eventing for helpbar (#4682)

* feat: add eventing for helpbar

* chore: clean up

* chore: add eventing for three helpbar links

* chore: clean up

Author: blegesse-w

src/pageLayout/containers/TreeNav.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FC, useContext, useEffect} from 'react'
-import {Link} from 'react-router-dom'
+import {Link, useLocation} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 import {connect, ConnectedProps} from 'react-redux'
 import {withRouter, RouteComponentProps} from 'react-router-dom'
@@ -42,7 +42,7 @@ const TreeSidebar: FC<ReduxProps & RouteComponentProps> = () =>
       AppSettingContext
     )
     const org = useSelector(getOrg)
-
+    const location = useLocation()
     useEffect(() => {
       if (isFlagEnabled('helpBar')) {
         const helpBarMenu = document.querySelectorAll<HTMLElement>(
@@ -72,23 +72,10 @@ const TreeSidebar: FC<ReduxProps & RouteComponentProps> = () =>
       }
     }
 
-    // Hiding Contact Support and Feedback code for Help Bar phase 1 release
-    // https://github.com/influxdata/ui/issues/3457
-    // https://github.com/influxdata/ui/issues/3454
-    // const handleSelect = (): void => {
-    //   const accountType = quartzMe?.accountType ?? 'free'
-    //   const isPayGCustomer = accountType !== 'free'
-
-    //   if (isPayGCustomer) {
-    //     showOverlay('payg-support', null, dismissOverlay)
-    //   } else {
-    //     showOverlay('free-account-support', null, dismissOverlay)
-    //   }
-    // }
-
-    // const openFeedbackOverlay = (): void => {
-    //   showOverlay('feedback-questions', null, dismissOverlay)
-    // }
+    const handleEventing = (link: string): void => {
+      const currentPage = location.pathname
+      event(`helpBar.${link}.opened`, {}, {from: currentPage})
+    }
 
     return (
       <OrgSettings>
@@ -173,30 +160,33 @@ const TreeSidebar: FC<ReduxProps & RouteComponentProps> = () =>
                   label="Documentation"
                   testID="nav-subitem-documentation"
                   linkElement={() => (
-                    <SafeBlankLink href="https://docs.influxdata.com/" />
+                    <SafeBlankLink
+                      href="https://docs.influxdata.com/"
+                      onClick={() => handleEventing('documentation')}
+                    />
                   )}
                 />
                 <TreeNav.SubItem
                   id="faqs"
                   label="FAQs"
                   testID="nav-subitem-faqs"
                   linkElement={() => (
-                    <SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/reference/faq/" />
+                    <SafeBlankLink
+                      href="https://docs.influxdata.com/influxdb/cloud/reference/faq/"
+                      onClick={() => handleEventing('faq')}
+                    />
                   )}
                 />
-                {/* <TreeNav.SubItem
-                id="contactSupport"
-                label="Contact Support"
-                testID="nav-subitem-contact-support"
-                onClick={handleSelect}
-              /> */}
                 <TreeNav.SubHeading label="Community" />
                 <TreeNav.SubItem
                   id="offcialForum"
                   label="Official Forum"
                   testID="nav-subitem-forum"
                   linkElement={() => (
-                    <SafeBlankLink href="https://community.influxdata.com" />
+                    <SafeBlankLink
+                      href="https://community.influxdata.com"
+                      onClick={() => handleEventing('officialForum')}
+                    />
                   )}
                 />
                 <TreeNav.SubItem
@@ -207,13 +197,6 @@ const TreeSidebar: FC<ReduxProps & RouteComponentProps> = () =>
                     <SafeBlankLink href="https://influxcommunity.slack.com/join/shared_invite/zt-156zm7ult-LcIW2T4TwLYeS8rZbCP1mw#/shared-invite/email" />
                   )}
                 />
-                {/* <TreeNav.SubHeading label="Feedback" />
-              <TreeNav.SubItem
-                id="feedback"
-                label="Feedback & Questions"
-                testID="nav-subitem-feedback-questions"
-                onClick={openFeedbackOverlay}
-              /> */}
               </TreeNav.SubMenu>
             </TreeNav.Item>
           ) : null}

src/support/components/FeedbackQuestionsOverlay.tsx

@@ -1,4 +1,5 @@
 import React, {FC, ChangeEvent, useContext, useState} from 'react'
+import {useSelector} from 'react-redux'
 
 // Components
 import {
@@ -17,16 +18,30 @@ import {OverlayContext} from 'src/overlays/components/OverlayController'
 // Types
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 
+// Selectors
+import {getOrg} from 'src/organizations/selectors'
+import {getMe} from 'src/me/selectors'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+
 interface OwnProps {
   onClose: () => void
 }
 
 const FeedbackQuestionsOverlay: FC<OwnProps> = () => {
   const {onClose} = useContext(OverlayContext)
+  const {id: orgID} = useSelector(getOrg)
+  const {id: meID} = useSelector(getMe)
   const [feedbackText, setFeedbackText] = useState('')
 
   const handleSubmit = () => {
     // handle form submit
+    event(
+      'helpBar.feedbackAndQuestions.submitted',
+      {},
+      {userID: meID, orgID: orgID}
+    )
   }
 
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {

src/support/components/PayGSupportOverlay.tsx

@@ -1,4 +1,5 @@
 import React, {FC, ChangeEvent, useContext, useState} from 'react'
+import {useSelector} from 'react-redux'
 
 // Components
 import {
@@ -25,12 +26,21 @@ import {OverlayContext} from 'src/overlays/components/OverlayController'
 // Types
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 
+// Selectors
+import {getOrg} from 'src/organizations/selectors'
+import {getMe} from 'src/me/selectors'
+
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+
 import './ContactSupport.scss'
 interface OwnProps {
   onClose: () => void
 }
 
 const PayGSupportOverlay: FC<OwnProps> = () => {
+  const {id: orgID} = useSelector(getOrg)
+  const {id: meID} = useSelector(getMe)
   const [subject, setSubject] = useState('')
   const [severity, setSeverity] = useState('')
   const [textInput, setTextInput] = useState('')
@@ -53,6 +63,7 @@ const PayGSupportOverlay: FC<OwnProps> = () => {
   }
   const handleSubmit = (): void => {
     // submit support form
+    event('helpBar.supportRequest.submitted', {}, {userID: meID, orgID: orgID})
   }
 
   const handleSubjectChange = (event: ChangeEvent<HTMLInputElement>) => {