v2t: add v2t to client/branded (#62364)

client/branded/src/components/panel/TabbedPanelContent.fixtures.ts

@@ -1,5 +1,6 @@
 import { of } from 'rxjs'
 
+import { noOpTelemetryRecorder } from '@sourcegraph/shared/src/telemetry'
 import { NOOP_TELEMETRY_SERVICE } from '@sourcegraph/shared/src/telemetry/telemetryService'
 
 import type { Panel, TabbedPanelContent } from './TabbedPanelContent'
@@ -28,4 +29,5 @@ export const panelProps: React.ComponentPropsWithoutRef<typeof TabbedPanelConten
     platformContext: {} as any,
     settingsCascade: { subjects: null, final: null },
     telemetryService: NOOP_TELEMETRY_SERVICE,
+    telemetryRecorder: noOpTelemetryRecorder,
 }

client/branded/src/components/panel/TabbedPanelContent.tsx

@@ -9,6 +9,7 @@ import { map } from 'rxjs/operators'
 import type { FetchFileParameters } from '@sourcegraph/shared/src/backend/file'
 import type { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
 import type { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
+import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import {
     Button,
@@ -30,7 +31,7 @@ import { EmptyPanelView } from './views/EmptyPanelView'
 
 import styles from './TabbedPanelContent.module.scss'
 
-interface TabbedPanelContentProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps {
+interface TabbedPanelContentProps extends PlatformContextProps, SettingsCascadeProps, TelemetryProps, TelemetryV2Props {
     repoName?: string
     fetchHighlightedFileLineRanges: (parameters: FetchFileParameters, force?: boolean) => Observable<string[][]>
 }
@@ -90,8 +91,11 @@ export const TabbedPanelContent = React.memo<TabbedPanelContentProps>(props => {
     const [currentTabLabel, currentTabID] = hash.split('=')
 
     const trackTabClick = useCallback(
-        (title: string) => props.telemetryService.log(`ReferencePanelClicked${title}`),
-        [props.telemetryService]
+        (title: string) => {
+            props.telemetryService.log(`ReferencePanelClicked${title}`)
+            props.telemetryRecorder.recordEvent('blob.referencePanelTab', 'click')
+        },
+        [props.telemetryService, props.telemetryRecorder]
     )
 
     const panels: Panel[] | undefined = useObservable(

client/branded/src/search-ui/components/FileContentSearchResult.test.tsx

@@ -12,6 +12,7 @@ import {
 
 import '@sourcegraph/shared/src/testing/mockReactVisibilitySensor'
 
+import { noOpTelemetryRecorder } from '@sourcegraph/shared/src/telemetry'
 import { renderWithBrandedContext } from '@sourcegraph/wildcard/src/testing'
 
 import { FileContentSearchResult } from './FileContentSearchResult'
@@ -28,6 +29,7 @@ describe('FileContentSearchResult', () => {
         fetchHighlightedFileLineRanges: HIGHLIGHTED_FILE_LINES_REQUEST,
         settingsCascade: NOOP_SETTINGS_CASCADE,
         telemetryService: NOOP_TELEMETRY_SERVICE,
+        telemetryRecorder: noOpTelemetryRecorder,
     }
 
     it('renders one result container', () => {

client/branded/src/search-ui/components/FileContentSearchResult.tsx

@@ -23,7 +23,7 @@ import {
     getRevision,
 } from '@sourcegraph/shared/src/search/stream'
 import { useSettings, type SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
-import { noOpTelemetryRecorder } from '@sourcegraph/shared/src/telemetry'
+import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { Icon } from '@sourcegraph/wildcard'
 
@@ -38,7 +38,7 @@ import resultStyles from './ResultContainer.module.scss'
 
 const DEFAULT_VISIBILITY_OFFSET = { bottom: -500 }
 
-interface Props extends SettingsCascadeProps, TelemetryProps {
+interface Props extends SettingsCascadeProps, TelemetryProps, TelemetryV2Props {
     /**
      * The file match search result.
      */
@@ -95,6 +95,7 @@ export const FileContentSearchResult: React.FunctionComponent<React.PropsWithChi
     showAllMatches,
     openInNewTab,
     telemetryService,
+    telemetryRecorder,
     fetchHighlightedFileLineRanges,
     onSelect,
 }) => {
@@ -202,8 +203,7 @@ export const FileContentSearchResult: React.FunctionComponent<React.PropsWithChi
                     className={resultStyles.copyButton}
                     filePath={result.path}
                     telemetryService={telemetryService}
-                    // TODO (dadlerj): update to use a real telemetry recorder
-                    telemetryRecorder={noOpTelemetryRecorder}
+                    telemetryRecorder={telemetryRecorder}
                 />
             </span>
         </>
@@ -243,7 +243,13 @@ export const FileContentSearchResult: React.FunctionComponent<React.PropsWithChi
             className={classNames(resultStyles.copyButtonContainer, containerClassName)}
             rankingDebug={result.debug}
             repoLastFetched={result.repoLastFetched}
-            actions={<SearchResultPreviewButton result={result} telemetryService={telemetryService} />}
+            actions={
+                <SearchResultPreviewButton
+                    result={result}
+                    telemetryService={telemetryService}
+                    telemetryRecorder={telemetryRecorder}
+                />
+            }
         >
             <VisibilitySensor
                 onChange={(visible: boolean) => visible && onVisible()}
@@ -256,6 +262,7 @@ export const FileContentSearchResult: React.FunctionComponent<React.PropsWithChi
                         grouped={expanded ? expandedGroups : collapsedGroups}
                         settingsCascade={settingsCascade}
                         telemetryService={telemetryService}
+                        telemetryRecorder={telemetryRecorder}
                         openInNewTab={openInNewTab}
                     />
                     {collapsible && (

client/branded/src/search-ui/components/FileMatchChildren.tsx

@@ -7,24 +7,25 @@ import { SourcegraphURL } from '@sourcegraph/common'
 import type { MatchGroup } from '@sourcegraph/shared/src/components/ranking/PerFileResultRanking'
 import { type ContentMatch, getFileMatchUrl } from '@sourcegraph/shared/src/search/stream'
 import type { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
+import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { codeCopiedEvent } from '@sourcegraph/shared/src/tracking/event-log-creators'
+import { V2CodyCopyPageTypes, codeCopiedEvent } from '@sourcegraph/shared/src/tracking/event-log-creators'
 
 import { CodeExcerpt } from './CodeExcerpt'
 import { navigateToCodeExcerpt, navigateToFileOnMiddleMouseButtonClick } from './codeLinkNavigation'
 
 import styles from './FileMatchChildren.module.scss'
 import resultStyles from './ResultContainer.module.scss'
 
-interface FileMatchProps extends SettingsCascadeProps, TelemetryProps {
+interface FileMatchProps extends SettingsCascadeProps, TelemetryProps, TelemetryV2Props {
     result: ContentMatch
     grouped: MatchGroup[]
     /* Clicking on a match opens the link in a new tab */
     openInNewTab?: boolean
 }
 
 export const FileMatchChildren: React.FunctionComponent<React.PropsWithChildren<FileMatchProps>> = props => {
-    const { result, grouped, telemetryService } = props
+    const { result, grouped, telemetryService, telemetryRecorder } = props
 
     const createCodeExcerptLink = (group: MatchGroup): string => {
         const match = group.matches[0]
@@ -47,7 +48,8 @@ export const FileMatchChildren: React.FunctionComponent<React.PropsWithChildren<
 
     const logEventOnCopy = useCallback(() => {
         telemetryService.log(...codeCopiedEvent('search-result'))
-    }, [telemetryService])
+        telemetryRecorder.recordEvent('code', 'copy', { metadata: { page: V2CodyCopyPageTypes['search-result'] } })
+    }, [telemetryService, telemetryRecorder])
 
     return (
         <div data-testid="file-match-children" data-selectable-search-results-group="true">

client/branded/src/search-ui/components/FilePathSearchResult.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import { getFileMatchUrl, getRepositoryUrl, getRevision, type PathMatch } from '@sourcegraph/shared/src/search/stream'
 import type { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
-import { noOpTelemetryRecorder } from '@sourcegraph/shared/src/telemetry'
+import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 
 import { CopyPathAction } from './CopyPathAction'
@@ -22,13 +22,14 @@ export interface FilePathSearchResult extends SettingsCascadeProps {
     index: number
 }
 
-export const FilePathSearchResult: FC<FilePathSearchResult & TelemetryProps> = ({
+export const FilePathSearchResult: FC<FilePathSearchResult & TelemetryProps & TelemetryV2Props> = ({
     result,
     repoDisplayName,
     onSelect,
     containerClassName,
     index,
     telemetryService,
+    telemetryRecorder,
     settingsCascade,
 }) => {
     const repoAtRevisionURL = getRepositoryUrl(result.repository, result.branches)
@@ -54,8 +55,7 @@ export const FilePathSearchResult: FC<FilePathSearchResult & TelemetryProps> = (
                 filePath={result.path}
                 className={resultStyles.copyButton}
                 telemetryService={telemetryService}
-                // TODO (dadlerj): update to use a real telemetry recorder
-                telemetryRecorder={noOpTelemetryRecorder}
+                telemetryRecorder={telemetryRecorder}
             />
         </span>
     )
@@ -71,7 +71,13 @@ export const FilePathSearchResult: FC<FilePathSearchResult & TelemetryProps> = (
             rankingDebug={result.debug}
             className={classNames(resultStyles.copyButtonContainer, containerClassName)}
             repoLastFetched={result.repoLastFetched}
-            actions={<SearchResultPreviewButton result={result} telemetryService={telemetryService} />}
+            actions={
+                <SearchResultPreviewButton
+                    result={result}
+                    telemetryService={telemetryService}
+                    telemetryRecorder={telemetryRecorder}
+                />
+            }
         />
     )
 }

client/branded/src/search-ui/components/OwnerSearchResult.tsx

@@ -8,6 +8,7 @@ import type { BuildSearchQueryURLParameters, QueryState, SearchContextProps } fr
 import { FilterKind, findFilter } from '@sourcegraph/shared/src/search/query/query'
 import { appendFilter, omitFilter } from '@sourcegraph/shared/src/search/query/transformer'
 import { getOwnerMatchUrl, type OwnerMatch } from '@sourcegraph/shared/src/search/stream'
+import { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { Link } from '@sourcegraph/wildcard'
 
@@ -16,7 +17,10 @@ import { ResultContainer } from './ResultContainer'
 import styles from './OwnerSearchResult.module.scss'
 import resultStyles from './ResultContainer.module.scss'
 
-export interface OwnerSearchResultProps extends Pick<SearchContextProps, 'selectedSearchContextSpec'>, TelemetryProps {
+export interface OwnerSearchResultProps
+    extends Pick<SearchContextProps, 'selectedSearchContextSpec'>,
+        TelemetryProps,
+        TelemetryV2Props {
     result: OwnerMatch
     onSelect: () => void
     containerClassName?: string
@@ -38,6 +42,7 @@ export const OwnerSearchResult: React.FunctionComponent<OwnerSearchResultProps>
     buildSearchURLQueryFromQueryState,
     selectedSearchContextSpec,
     telemetryService,
+    telemetryRecorder,
 }) => {
     const displayName = useMemo(() => {
         let displayName = ''
@@ -95,12 +100,15 @@ export const OwnerSearchResult: React.FunctionComponent<OwnerSearchResultProps>
     const logSearchOwnerClicked = (): void => {
         if (url.startsWith('mailto:')) {
             telemetryService.log('searchResults:ownershipMailto:clicked')
+            telemetryRecorder.recordEvent('search.results.ownership.mailTo', 'click')
         }
         if (url.startsWith('/users/')) {
             telemetryService.log('searchResults:ownershipUsers:clicked')
+            telemetryRecorder.recordEvent('search.results.ownership.users', 'click')
         }
         if (url.startsWith('/teams/')) {
             telemetryService.log('searchResults:ownershipTeams:clicked')
+            telemetryRecorder.recordEvent('search.results.ownership.teams', 'click')
         }
     }
 

client/branded/src/search-ui/components/QueryExamples.tsx

@@ -4,6 +4,7 @@ import { mdiOpenInNew } from '@mdi/js'
 import classNames from 'classnames'
 
 import { SearchPatternType } from '@sourcegraph/shared/src/graphql-operations'
+import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { buildSearchURLQuery } from '@sourcegraph/shared/src/util/url'
 import {
@@ -26,7 +27,7 @@ import { type QueryExamplesSection, useQueryExamples } from './useQueryExamples'
 
 import styles from './QueryExamples.module.scss'
 
-export interface QueryExamplesProps extends TelemetryProps {
+export interface QueryExamplesProps extends TelemetryProps, TelemetryV2Props {
     selectedSearchContextSpec?: string
     isSourcegraphDotCom?: boolean
     patternType: SearchPatternType
@@ -35,6 +36,7 @@ export interface QueryExamplesProps extends TelemetryProps {
 export const QueryExamples: React.FunctionComponent<QueryExamplesProps> = ({
     selectedSearchContextSpec,
     telemetryService,
+    telemetryRecorder,
     isSourcegraphDotCom = false,
     patternType,
 }) => {
@@ -47,8 +49,9 @@ export const QueryExamples: React.FunctionComponent<QueryExamplesProps> = ({
     const onQueryExampleClick = useCallback(
         (query: string) => {
             telemetryService.log('QueryExampleClicked', { queryExample: query }, { queryExample: query })
+            telemetryRecorder.recordEvent('search.queryExample', 'click')
         },
-        [telemetryService]
+        [telemetryService, telemetryRecorder]
     )
 
     return isSourcegraphDotCom ? (

client/branded/src/search-ui/components/SearchResultPreviewButton.tsx

@@ -1,16 +1,17 @@
 import type { FC } from 'react'
 
+import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { Button } from '@sourcegraph/wildcard'
 
 import { useSearchResultState, type SearchResultPreview } from '../stores/results-store'
 
-interface SearchResultPreviewButtonProps extends TelemetryProps {
+interface SearchResultPreviewButtonProps extends TelemetryProps, TelemetryV2Props {
     result: SearchResultPreview
 }
 
 export const SearchResultPreviewButton: FC<SearchResultPreviewButtonProps> = props => {
-    const { result, telemetryService } = props
+    const { result, telemetryService, telemetryRecorder } = props
     const { previewBlob, setPreviewBlob, clearPreview } = useSearchResultState()
 
     const isActive =
@@ -22,9 +23,11 @@ export const SearchResultPreviewButton: FC<SearchResultPreviewButtonProps> = pro
         if (isActive) {
             clearPreview()
             telemetryService.log('SearchFilePreviewOpen', {}, {})
+            telemetryRecorder.recordEvent('search.filePreview', 'open')
         } else {
             setPreviewBlob(result)
             telemetryService.log('SearchFilePreviewClose', {}, {})
+            telemetryRecorder.recordEvent('search.filePreview', 'close')
         }
     }
 

client/branded/src/search-ui/components/SymbolSearchResult.tsx

@@ -12,9 +12,9 @@ import { HighlightResponseFormat } from '@sourcegraph/shared/src/graphql-operati
 import { getFileMatchUrl, getRepositoryUrl, getRevision, type SymbolMatch } from '@sourcegraph/shared/src/search/stream'
 import { isSettingsValid, type SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
 import { SymbolKind } from '@sourcegraph/shared/src/symbols/SymbolKind'
-import { noOpTelemetryRecorder } from '@sourcegraph/shared/src/telemetry'
+import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry'
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
-import { codeCopiedEvent } from '@sourcegraph/shared/src/tracking/event-log-creators'
+import { codeCopiedEvent, V2CodyCopyPageTypes } from '@sourcegraph/shared/src/tracking/event-log-creators'
 
 import { CodeExcerpt } from './CodeExcerpt'
 import { navigateToCodeExcerpt, navigateToFileOnMiddleMouseButtonClick } from './codeLinkNavigation'
@@ -27,7 +27,7 @@ import styles from './SymbolSearchResult.module.scss'
 
 const DEFAULT_VISIBILITY_OFFSET = { bottom: -500 }
 
-export interface SymbolSearchResultProps extends TelemetryProps, SettingsCascadeProps {
+export interface SymbolSearchResultProps extends TelemetryProps, TelemetryV2Props, SettingsCascadeProps {
     result: SymbolMatch
     openInNewTab?: boolean
     repoDisplayName: string
@@ -45,6 +45,7 @@ export const SymbolSearchResult: React.FunctionComponent<SymbolSearchResultProps
     containerClassName,
     index,
     telemetryService,
+    telemetryRecorder,
     settingsCascade,
     fetchHighlightedFileLineRanges,
 }) => {
@@ -69,8 +70,7 @@ export const SymbolSearchResult: React.FunctionComponent<SymbolSearchResultProps
                 filePath={result.path}
                 className={resultStyles.copyButton}
                 telemetryService={telemetryService}
-                // TODO (dadlerj): update to use a real telemetry recorder
-                telemetryRecorder={noOpTelemetryRecorder}
+                telemetryRecorder={telemetryRecorder}
             />
         </span>
     )
@@ -84,7 +84,8 @@ export const SymbolSearchResult: React.FunctionComponent<SymbolSearchResultProps
 
     const logEventOnCopy = useCallback(() => {
         telemetryService.log(...codeCopiedEvent('search-result'))
-    }, [telemetryService])
+        telemetryRecorder.recordEvent('code', 'copy', { metadata: { page: V2CodyCopyPageTypes['search-result'] } })
+    }, [telemetryService, telemetryRecorder])
 
     const [hasBeenVisible, setHasBeenVisible] = useState(false)
     const [highlightedLines, setHighlightedLines] = useState<string[] | undefined>(undefined)
@@ -114,13 +115,16 @@ export const SymbolSearchResult: React.FunctionComponent<SymbolSearchResultProps
                         { durationMs: endTime - startTime },
                         { durationMs: endTime - startTime }
                     )
+                    telemetryRecorder.recordEvent('search.frontendLatency', 'codeLoad', {
+                        metadata: { durationMs: endTime - startTime },
+                    })
                     if (!isErrorLike(res)) {
                         setHighlightedLines(res.map(arr => arr[0]))
                     }
                 })
         }
         return () => subscription?.unsubscribe()
-    }, [result, hasBeenVisible, fetchHighlightedFileLineRanges, telemetryService])
+    }, [result, hasBeenVisible, fetchHighlightedFileLineRanges, telemetryService, telemetryRecorder])
 
     return (
         <ResultContainer