fix: add eventing to multi-org (#5486)

Author: wdoconnell

src/identity/components/GlobalHeader/AccountDropdown.tsx

@@ -7,13 +7,22 @@ type OrgSummaryItem = OrganizationSummaries[number]
 import {OrganizationSummaries, UserAccount} from 'src/client/unityRoutes'
 
 interface Props {
-  activeOrg: OrgSummaryItem
   activeAccount: UserAccount
   accountsList: UserAccount[]
+  activeOrg: OrgSummaryItem
 }
 
+// Eventing
+import {
+  HeaderNavEvent,
+  MainMenuEventPrefix,
+  multiOrgTag,
+  TypeAheadEventPrefix,
+} from 'src/identity/events/multiOrgEvents'
+import {event} from 'src/cloud/utils/reporting'
+
 // Styles
-const style = {width: 'auto'}
+const accountDropdownStyle = {width: 'auto'}
 const menuStyle = {width: '250px'}
 
 // Components
@@ -26,9 +35,9 @@ import {
 import {CLOUD_URL} from 'src/shared/constants'
 
 export const AccountDropdown: FC<Props> = ({
-  activeOrg,
-  activeAccount,
   accountsList,
+  activeAccount,
+  activeOrg,
 }) => {
   const selectedAccount = {
     id: activeAccount.id.toString(),
@@ -50,23 +59,35 @@ export const AccountDropdown: FC<Props> = ({
 
   // Quartz handles switching accounts by having the user hit this URL.
   const switchAccount = (account: TypeAheadMenuItem) => {
+    event(HeaderNavEvent.AccountSwitch, multiOrgTag, {
+      newAccountID: account.id,
+      newAccountName: account.name,
+    })
     window.location.href = `${CLOUD_URL}/accounts/${account.id}`
   }
 
+  const sendDropdownClickEvent = () => {
+    event(HeaderNavEvent.AccountDropdownClick, multiOrgTag)
+  }
+
   return (
-    <GlobalHeaderDropdown
-      dropdownMenuStyle={menuStyle}
-      mainMenuHeaderIcon={IconFont.Switch_New}
-      mainMenuHeaderText="Switch Account"
-      mainMenuOptions={accountMainMenu}
-      mainMenuTestID="globalheader--account-dropdown-main"
-      style={style}
-      testID="globalheader--account-dropdown"
-      typeAheadInputPlaceholder="Search Accounts"
-      typeAheadMenuOptions={accountsList}
-      typeAheadOnSelectOption={switchAccount}
-      typeAheadSelectedOption={selectedAccount}
-      typeAheadTestID="globalheader--account-dropdown-typeahead"
-    />
+    <div onClick={sendDropdownClickEvent}>
+      <GlobalHeaderDropdown
+        dropdownMenuStyle={menuStyle}
+        mainMenuEventPrefix={MainMenuEventPrefix.SwitchAccount}
+        mainMenuHeaderIcon={IconFont.Switch_New}
+        mainMenuHeaderText="Switch Account"
+        mainMenuOptions={accountMainMenu}
+        mainMenuTestID="globalheader--account-dropdown-main"
+        style={accountDropdownStyle}
+        testID="globalheader--account-dropdown"
+        typeAheadEventPrefix={TypeAheadEventPrefix.HeaderNavSearchAccount}
+        typeAheadInputPlaceholder="Search Accounts"
+        typeAheadMenuOptions={accountsList}
+        typeAheadOnSelectOption={switchAccount}
+        typeAheadSelectedOption={selectedAccount}
+        typeAheadTestID="globalheader--account-dropdown-typeahead"
+      />
+    </div>
   )
 }

src/identity/components/GlobalHeader/GlobalHeaderDropdown/GlobalHeaderTypeAheadMenu.tsx

@@ -1,21 +1,30 @@
+// Libraries
 import React, {ChangeEvent} from 'react'
 import {Dropdown, Input} from '@influxdata/clockface'
 import {FixedSizeList as List} from 'react-window'
 import classnames from 'classnames'
 import {TypeAheadMenuItem} from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown'
 
+// Eventing
+import {
+  multiOrgTag,
+  TypeAheadEventPrefix,
+} from 'src/identity/events/multiOrgEvents'
+import {event} from 'src/cloud/utils/reporting'
+
 type Props = {
   defaultSelectedItem?: TypeAheadMenuItem
-  style?: React.CSSProperties
-  typeAheadPlaceHolder: string
-  typeAheadMenuOptions: TypeAheadMenuItem[]
   onSelectOption: (item: TypeAheadMenuItem) => void
+  style?: React.CSSProperties
   testID: string
+  typeAheadEventPrefix: TypeAheadEventPrefix
+  typeAheadMenuOptions: TypeAheadMenuItem[]
+  typeAheadPlaceHolder: string
 }
 
 type State = {
-  searchTerm: string
   queryResults: TypeAheadMenuItem[]
+  searchTerm: string
   selectedItem: TypeAheadMenuItem
 }
 
@@ -25,15 +34,15 @@ export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {
-      searchTerm: '',
       queryResults: this.props.typeAheadMenuOptions,
+      searchTerm: '',
       selectedItem: this.props.defaultSelectedItem,
     }
   }
 
-  private selectAllTextInInput = (event?: ChangeEvent<HTMLInputElement>) => {
-    if (event) {
-      event.target.select()
+  private selectAllTextInInput = (evt?: ChangeEvent<HTMLInputElement>) => {
+    if (evt) {
+      evt.target.select()
     }
   }
 
@@ -57,8 +66,8 @@ export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
     }
   }
 
-  private handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const filterString = event?.target?.value
+  private handleInputChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    const filterString = evt?.target?.value
     this.applyFilter(filterString)
   }
 
@@ -85,6 +94,19 @@ export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
     }
   }
 
+  private sendTypeAheadSearchEvent = (evt: ChangeEvent<HTMLInputElement>) => {
+    const {typeAheadEventPrefix} = this.props
+
+    // No event should be sent if the input field is empty, or just contains whitespace.
+
+    if (
+      typeof evt?.target?.value === 'string' &&
+      evt.target.value.trim().length
+    ) {
+      event(`${typeAheadEventPrefix}.searched`, multiOrgTag)
+    }
+  }
+
   private calculateDropdownHeight = (numberOfItems: number) =>
     Math.min(numberOfItems * this.listItemHeight, this.maxDropdownHeight)
 
@@ -100,6 +122,7 @@ export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
         testID={this.props.testID}
         onClear={this.clearFilter}
         onFocus={this.selectAllTextInInput}
+        onBlur={this.sendTypeAheadSearchEvent}
         className="global-header--typeahead-input"
       />
     )

src/identity/components/GlobalHeader/GlobalHeaderDropdown/index.tsx

@@ -20,6 +20,14 @@ import './GlobalHeaderDropdown.scss'
 // Types
 import GlobalHeaderTypeAheadMenu from 'src/identity/components/GlobalHeader/GlobalHeaderDropdown/GlobalHeaderTypeAheadMenu'
 
+// Eventing
+import {
+  MainMenuEventPrefix,
+  multiOrgTag,
+  TypeAheadEventPrefix,
+} from 'src/identity/events/multiOrgEvents'
+import {event} from 'src/cloud/utils/reporting'
+
 export interface MainMenuItem {
   name: string
   iconFont: string
@@ -34,20 +42,22 @@ export interface TypeAheadMenuItem {
 export interface Props extends StandardFunctionProps {
   defaultButtonText?: string
   defaultTestID?: string
-  dropdownButtonSize?: ComponentSize
   dropdownButtonIcon?: IconFont
+  dropdownButtonSize?: ComponentSize
   dropdownMenuStyle?: React.CSSProperties
   dropdownMenuTheme?: DropdownMenuTheme
-  mainMenuHeaderText?: string
+  mainMenuEventPrefix?: MainMenuEventPrefix
   mainMenuHeaderIcon?: IconFont
+  mainMenuHeaderText?: string
   mainMenuOptions: MainMenuItem[]
   mainMenuTestID?: string
   onlyRenderSubmenu?: boolean
   testID?: string
-  typeAheadSelectedOption?: TypeAheadMenuItem
-  typeAheadMenuOptions: TypeAheadMenuItem[]
+  typeAheadEventPrefix: TypeAheadEventPrefix
   typeAheadInputPlaceholder?: string
+  typeAheadMenuOptions: TypeAheadMenuItem[]
   typeAheadOnSelectOption?: (item: TypeAheadMenuItem | null) => void
+  typeAheadSelectedOption?: TypeAheadMenuItem
   typeAheadTestID?: string
 }
 
@@ -80,46 +90,63 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
     const {
       defaultButtonText,
       defaultTestID,
-      dropdownButtonSize,
       dropdownButtonIcon,
+      dropdownButtonSize,
     } = this.props
     const {selectedItem} = this.state
     return (
       <Dropdown.Button
         active={active}
+        className="global-header--dropdown-button"
         onClick={onClick}
         size={dropdownButtonSize}
-        trailingIcon={dropdownButtonIcon || IconFont.DoubleCaretVertical}
-        className="global-header--dropdown-button"
         testID={defaultTestID}
+        trailingIcon={dropdownButtonIcon || IconFont.DoubleCaretVertical}
       >
         {selectedItem?.name || defaultButtonText}
       </Dropdown.Button>
     )
   }
 
+  private sendMainMenuEvent = (menuItem: string) => () => {
+    const {mainMenuEventPrefix} = this.props
+    event(`${mainMenuEventPrefix}${menuItem}.clicked`, multiOrgTag)
+  }
+
   private toggleShowTypeAheadMenu = () => {
+    const {mainMenuEventPrefix} = this.props
     const {showTypeAheadMenu} = this.state
+    // 'Clicked the switch button' event only emitted when opening the typeahead.
+    if (!showTypeAheadMenu) {
+      event(`${mainMenuEventPrefix}Switch.clicked`, multiOrgTag)
+    }
     this.setState({showTypeAheadMenu: !showTypeAheadMenu})
   }
 
   private renderMainMenuOptions = () => {
     const {mainMenuOptions} = this.props
     return (
       <div>
-        {mainMenuOptions.map(value => {
-          const iconEl = <Icon glyph={value.iconFont} className="button-icon" />
-          const textEl = <span>{value.name}</span>
+        {mainMenuOptions.map(menuItem => {
+          const iconEl = (
+            <Icon glyph={menuItem.iconFont} className="button-icon" />
+          )
+          const textEl = <span>{menuItem.name}</span>
           return (
-            <Dropdown.HrefItem
-              key={value.name}
-              href={value.href}
-              className="global-header--align-center"
-              testID={`${this.props.mainMenuTestID}-${value.name}`}
+            <div
+              onClick={this.sendMainMenuEvent(menuItem.name)}
+              key={`eventWrapper.${menuItem.name}`}
             >
-              {iconEl}
-              {textEl}
-            </Dropdown.HrefItem>
+              <Dropdown.HrefItem
+                className="global-header--align-center"
+                key={menuItem.name}
+                href={menuItem.href}
+                testID={`${this.props.mainMenuTestID}-${menuItem.name}`}
+              >
+                {iconEl}
+                {textEl}
+              </Dropdown.HrefItem>
+            </div>
           )
         })}
       </div>
@@ -130,29 +157,31 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
     const {typeAheadMenuOptions} = this.props
     const {selectedItem} = this.state
     const {
+      dropdownMenuStyle,
+      typeAheadEventPrefix,
       typeAheadInputPlaceholder,
       typeAheadOnSelectOption,
-      dropdownMenuStyle,
     } = this.props
     return (
       <GlobalHeaderTypeAheadMenu
-        typeAheadPlaceHolder={typeAheadInputPlaceholder}
-        typeAheadMenuOptions={typeAheadMenuOptions}
+        defaultSelectedItem={selectedItem}
         onSelectOption={typeAheadOnSelectOption}
         style={dropdownMenuStyle}
-        defaultSelectedItem={selectedItem}
         testID={this.props.typeAheadTestID}
+        typeAheadEventPrefix={typeAheadEventPrefix}
+        typeAheadMenuOptions={typeAheadMenuOptions}
+        typeAheadPlaceHolder={typeAheadInputPlaceholder}
       />
     )
   }
 
   private renderMenu = () => {
     const {
-      mainMenuHeaderText,
-      dropdownMenuTheme = DropdownMenuTheme.None,
       dropdownMenuStyle,
-      typeAheadMenuOptions,
+      dropdownMenuTheme = DropdownMenuTheme.None,
+      mainMenuHeaderText,
       onlyRenderSubmenu = false,
+      typeAheadMenuOptions,
     } = this.props
     const {showTypeAheadMenu} = this.state
 
@@ -210,8 +239,8 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
     return (
       <Dropdown
         {...dropdownProps}
-        disableAutoFocus
         button={this.dropdownButton}
+        disableAutoFocus
         menu={this.renderMenu}
         testID={this.props.testID}
       />