feat: add ui eventing for multi-org phase 2 (#6415)

* chore: eventing for multi-org phase 2

* fix: prettier

* fix: prettier

* chore: update naming convention for events

* chore: address pr comments

* chore: alphabetize multi org events

* chore: add an account name selector

* fix: prettier

* chore: update eventing name

* fix: remove org failure from event

Author: blegesse-w

src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/CreateOrganizationOverlay.tsx

@@ -92,18 +92,29 @@ import {getOrgCreationAllowancesThunk} from 'src/identity/allowances/actions/thu
 import {generateProviderMap} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/utils/generateProviderMap'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
+// Eventing
+import {event} from 'src/cloud/utils/reporting'
+import {
+  CreateOrgOverlayEvent,
+  multiOrgTag,
+} from 'src/identity/events/multiOrgEvents'
+
 const switchToNewOrgButtonStyle = {
   color: 'black',
   textDecoration: 'underline',
   cursor: 'pointer',
 }
 
-const SwitchToNewOrgButton = (url: string): JSX.Element => {
+const SwitchToNewOrgButton = (
+  url: string,
+  handleClick: () => void
+): JSX.Element => {
   return (
     <a
       href={url}
       data-testid="go-to-new-org--link"
       style={switchToNewOrgButtonStyle}
+      onClick={handleClick}
     >
       Switch to new org.
     </a>
@@ -205,13 +216,15 @@ export const CreateOrganizationOverlay: FC = () => {
     retrieveClusters()
   }, [])
 
-  // Event Handlers
-  const createNewOrgPopup = (newOrg: CreatedOrg) => {
+  const createNewOrgPopup = (
+    newOrg: CreatedOrg,
+    handleSwitchToNewOrgEvent: () => void
+  ) => {
     const newOrgUrl = `${CLOUD_URL}/orgs/${newOrg.id}`
 
     const switchToOrgLink =
       newOrg.provisioningStatus === 'provisioned'
-        ? () => SwitchToNewOrgButton(newOrgUrl)
+        ? () => SwitchToNewOrgButton(newOrgUrl, handleSwitchToNewOrgEvent)
         : null
 
     dispatch(notify(quartzOrgCreateSuccess(newOrg.name, switchToOrgLink)))
@@ -233,12 +246,26 @@ export const CreateOrganizationOverlay: FC = () => {
         orgCreationAllowed => {
           dispatch(getQuartzOrganizationsThunk(currentAccountId))
 
-          createNewOrgPopup(newOrg)
+          // Event Handlers
+          const handleSwitchToNewOrgEvent = () => {
+            event(CreateOrgOverlayEvent.SwitchToNewOrg, multiOrgTag, {
+              newOrgID: newOrg.id,
+              newOrgName: newOrg.name,
+              oldOrgID: currentOrgId,
+            })
+          }
+          createNewOrgPopup(newOrg, handleSwitchToNewOrgEvent)
 
           if (!orgCreationAllowed) {
             dispatch(notify(quartzOrgQuotaReached()))
           }
 
+          event(CreateOrgOverlayEvent.OrgCreated, multiOrgTag, {
+            newOrgID: newOrg.id,
+            newOrgName: newOrg.name,
+            oldOrgID: currentOrgId,
+          })
+
           history.push(`/orgs/${currentOrgId}/accounts/orglist`)
 
           onClose()

src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/MenuItem.tsx

@@ -1,20 +1,36 @@
 // Libraries
 import React, {FC} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
 import {
   AlignItems,
   Dropdown,
   FlexBox,
   Icon,
   IconFont,
 } from '@influxdata/clockface'
-import {useDispatch} from 'react-redux'
 
 // Components
 import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
 
+// Selectors
+import {selectCurrentAccount, selectUser} from 'src/identity/selectors'
+
+// Eventing
+import {HeaderNavEvent, multiOrgTag} from 'src/identity/events/multiOrgEvents'
+import {event} from 'src/cloud/utils/reporting'
+
 export const CreateOrganizationMenuItem: FC = () => {
   const dispatch = useDispatch()
+  const user = useSelector(selectUser)
+  const account = useSelector(selectCurrentAccount)
+
   const handleCreateOrg = () => {
+    event(HeaderNavEvent.CreateOrgClick, multiOrgTag, {
+      userId: user.id,
+      accountId: account.id,
+      accountName: account.name,
+      accountType: account.type,
+    })
     dispatch(
       showOverlay('create-organization', null, () => dispatch(dismissOverlay()))
     )

src/identity/components/GlobalHeader/OrgDropdown.tsx

@@ -33,9 +33,11 @@ import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Selectors
 import {
+  selectCurrentAccount,
   selectOrgCreationAllowance,
   selectOrgCreationAllowanceStatus,
   selectOrgCreationAvailableUpgrade,
+  selectUser,
 } from 'src/identity/selectors'
 import {CreateOrganizationMenuItem} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/CreateOrganization/MenuItem'
 import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
@@ -56,10 +58,18 @@ export const OrgDropdown: FC<Props> = ({activeOrg, orgsList}) => {
   const orgCreationAllowanceStatus = useSelector(
     selectOrgCreationAllowanceStatus
   )
+  const user = useSelector(selectUser)
+  const account = useSelector(selectCurrentAccount)
 
   const dispatch = useDispatch()
 
   const openMarketoOverlay = () => {
+    event(HeaderNavEvent.UpgradeButtonClick, multiOrgTag, {
+      accountId: account.id,
+      accountName: account.name,
+      accountType: account.type,
+      userId: user.id,
+    })
     dispatch(
       showOverlay('marketo-upgrade-account-overlay', null, () =>
         dispatch(dismissOverlay())

src/identity/components/MarketoAccountUpgradeOverlay.tsx

@@ -14,7 +14,12 @@ import {
 import {OverlayContext} from 'src/overlays/components/OverlayController'
 
 // Selectors
-import {selectCurrentAccountId, selectUser} from 'src/identity/selectors'
+import {
+  selectCurrentAccountId,
+  selectCurrentAccountName,
+  selectCurrentAccountType,
+  selectUser,
+} from 'src/identity/selectors'
 
 // Error Reporting
 import {reportErrorThroughHoneyBadger} from 'src/shared/utils/errors'
@@ -29,6 +34,13 @@ import {
 // Utils
 import {notify} from 'src/shared/actions/notifications'
 
+// Eventing
+import {
+  AccountUpgradeOverlay,
+  multiOrgTag,
+} from 'src/identity/events/multiOrgEvents'
+import {event} from 'src/cloud/utils/reporting'
+
 // Styles
 import './MarketoAccountUpgradeOverlay.scss'
 
@@ -70,13 +82,28 @@ interface MarketoFormElement extends Element {
 }
 
 // If marketo isn't working, still need the user to have some means of contacting sales.
-const SalesFormLink = (): JSX.Element => {
+const SalesFormLink = () => {
+  const user = useSelector(selectUser)
+  const accountId = useSelector(selectCurrentAccountId)
+  const accountName = useSelector(selectCurrentAccountName)
+  const accountType = useSelector(selectCurrentAccountType)
+
+  const handleEventing = () => {
+    event(AccountUpgradeOverlay.SalesFormLinkClick, multiOrgTag, {
+      userId: user.id,
+      accountId,
+      accountName,
+      accountType,
+    })
+  }
+
   return (
     <a
       data-testid="use-sales-form--link"
       href={BACKUP_CONTACT_SALES_LINK}
       target="_blank"
       style={popupLinkStyle}
+      onClick={handleEventing}
     >
       Click here to contact sales.
     </a>
@@ -89,6 +116,8 @@ export const MarketoAccountUpgradeOverlay: FC = () => {
 
   const user = useSelector(selectUser)
   const accountId = useSelector(selectCurrentAccountId)
+  const accountName = useSelector(selectCurrentAccountName)
+  const accountType = useSelector(selectCurrentAccountType)
 
   const [scriptHasLoaded, setScriptHasLoaded] = useState(false)
   const [formHasLoaded, setFormHasLoaded] = useState(false)
@@ -99,7 +128,6 @@ export const MarketoAccountUpgradeOverlay: FC = () => {
     delete window.MktoForms2
     onClose()
   }
-
   const handleComment = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (window.MktoForms2.getForm) {
       try {
@@ -137,6 +165,12 @@ export const MarketoAccountUpgradeOverlay: FC = () => {
     try {
       window.MktoForms2.getForm(MARKETO_FORM_ID).submit()
       dispatch(notify(marketoFormSubmitSuccess()))
+      event(AccountUpgradeOverlay.MarketoAccountUpgrade, multiOrgTag, {
+        accountId,
+        accountName,
+        accountType,
+        userId: user.id,
+      })
       onClose()
     } catch (err) {
       handleError(MarketoError.FormSubmitError, err)

src/identity/components/OrganizationListTab/OrgBannerPanel.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FC} from 'react'
-import {useDispatch} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
 import {useHistory} from 'react-router-dom'
 import {BannerPanel, FlexBox, Gradients, IconFont} from '@influxdata/clockface'
 
@@ -13,6 +13,16 @@ import {availableUpgrade} from 'src/client/unityRoutes'
 // Utils
 import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
 
+// Selectors
+import {
+  selectCurrentAccountId,
+  selectCurrentAccountName,
+} from 'src/identity/selectors'
+
+// Eventing
+import {multiOrgTag, OrgListEvent} from 'src/identity/events/multiOrgEvents'
+import {event} from 'src/cloud/utils/reporting'
+
 interface OrgAllowance {
   availableUpgrade: availableUpgrade
   isAtOrgLimit: boolean
@@ -28,8 +38,16 @@ export const OrgBannerPanel: FC<OrgAllowance> = ({
 }) => {
   const dispatch = useDispatch()
   const history = useHistory()
+  const accountId = useSelector(selectCurrentAccountId)
+  const accountName = useSelector(selectCurrentAccountName)
 
   const handleUpgradeAccount = () => {
+    event(OrgListEvent.UpgradeAccount, multiOrgTag, {
+      availableUpgrade,
+      accountId,
+      accountName,
+    })
+
     if (availableUpgrade === 'pay_as_you_go') {
       history.push(`/checkout`)
     } else {

src/identity/events/multiOrgEvents.ts

@@ -2,35 +2,43 @@ export const multiOrgTag = {
   initiative: 'multiOrg',
 }
 
+export enum AccountUpgradeOverlay {
+  MarketoAccountUpgrade = 'userProfile.marketoAccountUpgrade.formSubmitted',
+  SalesFormLinkClick = 'userProfile.marketoAccountUpgrade.salesFormLinkClicked',
+}
+
+export enum CreateOrgOverlayEvent {
+  OrgCreated = 'headerNav.createOrgOverlay.orgCreated',
+  SwitchToNewOrg = 'headerNav.createOrgOverlay.switchedToNewOrg',
+}
+
+export enum DeleteOrgOverlay {
+  DeleteOrg = 'userProfile.orgProfileTab.orgDeleted',
+}
+
 export enum HeaderNavEvent {
   AccountDropdownClick = 'headerNav.accountDropdown.clicked',
   AccountSwitch = 'headerNav.accountDropdown.accountSwitched',
 
+  CreateOrgClick = 'headerNav.createOrg.clicked',
   OrgDropdownClick = 'headerNav.orgDropdown.clicked',
   OrgSwitch = 'headerNav.orgDropdown.orgSwitched',
 
+  UpgradeButtonClick = 'headerNav.upgradeButton.clicked',
   UserAvatarClick = 'headerNav.userAvatarIcon.clicked',
   UserProfileClick = 'headerNav.userAvatarProfile.clicked',
   UserLogoutClick = 'headerNav.userAvatarLogOut.clicked',
 }
 
-export enum UserProfileEvent {
-  DefaultAccountChange = 'userProfile.defaultAccountDropdown.defaultAccountChanged',
-  DefaultOrgChange = 'userProfile.defaultOrgDropdown.defaultOrgChanged',
-}
-
-export enum UserProfileEventPrefix {
-  Default = 'userProfile.default',
-  Account = 'Account',
-  Organization = 'Org',
-}
-
 export enum MainMenuEventPrefix {
+  ChangeDefaultAccount = 'userProfile.defaultAccountDropdown',
+  ChangeDefaultOrg = 'userProfile.defaultOrgDropdown',
   SwitchOrg = 'headerNav.org',
   SwitchAccount = 'headerNav.account',
+}
 
-  ChangeDefaultOrg = 'userProfile.defaultOrgDropdown',
-  ChangeDefaultAccount = 'userProfile.defaultAccountDropdown',
+export enum OrgListEvent {
+  UpgradeAccount = 'accountSettings.orgsTab.upgradeBannerClicked',
 }
 
 export enum TypeAheadEventPrefix {
@@ -40,3 +48,14 @@ export enum TypeAheadEventPrefix {
   UserProfileSearchAccount = 'userProfile.defaultAccountDropdown',
   UserProfileSearchOrg = 'userProfile.defaultOrgDropdown',
 }
+
+export enum UserProfileEvent {
+  DefaultAccountChange = 'userProfile.defaultAccountDropdown.defaultAccountChanged',
+  DefaultOrgChange = 'userProfile.defaultOrgDropdown.defaultOrgChanged',
+}
+
+export enum UserProfileEventPrefix {
+  Account = 'Account',
+  Default = 'userProfile.default',
+  Organization = 'Org',
+}

src/identity/selectors/index.ts

@@ -14,6 +14,12 @@ export const selectCurrentAccountId = (
   return state.identity.currentIdentity.account.id
 }
 
+export const selectCurrentAccountName = (
+  state: AppState
+): AppState['identity']['currentIdentity']['account']['name'] => {
+  return state.identity.currentIdentity.account.name
+}
+
 export const selectCurrentAccountType = (
   state: AppState
 ): AppState['identity']['currentIdentity']['account']['type'] => {

src/organizations/components/OrgProfileTab/DeletePaidOrgOverlay.tsx

@@ -39,6 +39,10 @@ import {notify} from 'src/shared/actions/notifications'
 import {OverlayContext} from 'src/overlays/components/OverlayController'
 import {reportErrorThroughHoneyBadger} from 'src/shared/utils/errors'
 
+// Eventing
+import {DeleteOrgOverlay, multiOrgTag} from 'src/identity/events/multiOrgEvents'
+import {event} from 'src/cloud/utils/reporting'
+
 // Styles
 import './DeletePaidOrgOverlay.scss'
 
@@ -107,6 +111,13 @@ export const DeletePaidOrgOverlay: FC = () => {
       .then(() => {
         clearTimeout(responseTimer)
         dispatch(notify(deleteOrgSuccess(org.name, account.name)))
+        event(DeleteOrgOverlay.DeleteOrg, multiOrgTag, {
+          accountId: account.id,
+          accoutnName: account.name,
+          accountType: account.type,
+          orgName: org.name,
+          userId: org.id,
+        })
         setTimeout(() => {
           onClose()
           window.location.href = CLOUD_URL