Add TableInteractionEvent analytics for secret scanning table (#61491)

heiskr · Copilot · Copilot · web-flow · commit b6c3a4f83ece · 2026-06-09T18:59:26.000Z
Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: heiskr &lt;1221423+heiskr@users.noreply.github.com&gt;
diff --git a/data/ui.yml b/data/ui.yml
@@ -273,6 +273,8 @@ secret_scanning:
   filter_all: All
   filter_yes: 'Yes'
   filter_no: 'No'
+  clear_filters: Clear filters
+  clear_filters_aria_label: Clear all filters and search
   showing_patterns: 'Showing {filtered} of {total} patterns'
   column_provider: Provider
   column_secret: Secret
diff --git a/src/events/lib/schema.ts b/src/events/lib/schema.ts
@@ -646,6 +646,39 @@ const preference = {
   },
 }
 
+const tableInteraction = {
+  type: 'object',
+  additionalProperties: false,
+  required: ['type', 'context', 'table_interaction_name', 'table_interaction_type'],
+  properties: {
+    context,
+    type: {
+      type: 'string',
+      pattern: '^tableInteraction$',
+    },
+    table_interaction_name: {
+      type: 'string',
+      description:
+        'Identifier for the table being interacted with (e.g. "secret-scanning-patterns").',
+    },
+    table_interaction_type: {
+      type: 'string',
+      enum: ['search', 'filter', 'sort', 'paginate', 'reset'],
+      description: 'The kind of interaction the user performed with the table.',
+    },
+    table_interaction_field_name: {
+      type: 'string',
+      description:
+        'The field/column the interaction targeted (e.g. "pushProtection"). Omitted for whole-table actions.',
+    },
+    table_interaction_field_value: {
+      type: 'string',
+      description:
+        'The value applied to the field (e.g. the filter value, search query, sort direction, or page number).',
+    },
+  },
+}
+
 const validation = {
   type: 'object',
   additionalProperties: false,
@@ -682,6 +715,7 @@ export const schemas = {
   clipboard,
   print,
   preference,
+  tableInteraction,
   validation,
 }
 
@@ -699,6 +733,7 @@ export const hydroNames = {
   clipboard: 'docs.v0.ClipboardEvent',
   print: 'docs.v0.PrintEvent',
   preference: 'docs.v0.PreferenceEvent',
+  tableInteraction: 'docs.v0.TableInteractionEvent',
   validation: 'docs.v0.ValidationEvent',
 } as Record<keyof typeof schemas, string>
 
diff --git a/src/events/tests/middleware.ts b/src/events/tests/middleware.ts
@@ -210,4 +210,38 @@ describe('POST /events', () => {
     })
     expect(statusCode).toBe(400)
   })
+
+  test('should accept a tableInteraction filter event', async () => {
+    const { statusCode } = await checkEvent({
+      type: 'tableInteraction',
+      context: pageExample.context,
+      table_interaction_name: 'secret-scanning-patterns',
+      table_interaction_type: 'filter',
+      table_interaction_field_name: 'pushProtection',
+      table_interaction_field_value: 'yes',
+    })
+    expect(statusCode).toBe(200)
+  })
+
+  test('should accept a tableInteraction event without optional fields', async () => {
+    const { statusCode } = await checkEvent({
+      type: 'tableInteraction',
+      context: pageExample.context,
+      table_interaction_name: 'secret-scanning-patterns',
+      table_interaction_type: 'reset',
+    })
+    expect(statusCode).toBe(200)
+  })
+
+  test('should reject a tableInteraction event with an invalid interaction type', async () => {
+    const { statusCode } = await checkEvent({
+      type: 'tableInteraction',
+      context: pageExample.context,
+      table_interaction_name: 'secret-scanning-patterns',
+      table_interaction_type: 'not-a-valid-type',
+      table_interaction_field_name: 'pushProtection',
+      table_interaction_field_value: 'yes',
+    })
+    expect(statusCode).toBe(400)
+  })
 })
diff --git a/src/events/types.ts b/src/events/types.ts
@@ -12,6 +12,7 @@ export enum EventType {
   preference = 'preference',
   clipboard = 'clipboard',
   print = 'print',
+  tableInteraction = 'tableInteraction',
 }
 
 export type EventProps = {
@@ -135,4 +136,10 @@ export type EventPropsByType = {
     survey_comment_language?: string
     survey_connected_event_id?: string
   }
+  [EventType.tableInteraction]: {
+    table_interaction_name: string
+    table_interaction_type: 'search' | 'filter' | 'sort' | 'paginate' | 'reset'
+    table_interaction_field_name?: string
+    table_interaction_field_value?: string
+  }
 }
diff --git a/src/fixtures/fixtures/data/ui.yml b/src/fixtures/fixtures/data/ui.yml
@@ -273,6 +273,8 @@ secret_scanning:
   filter_all: All
   filter_yes: 'Yes'
   filter_no: 'No'
+  clear_filters: Clear filters
+  clear_filters_aria_label: Clear all filters and search
   showing_patterns: 'Showing {filtered} of {total} patterns'
   column_provider: Provider
   column_secret: Secret
diff --git a/src/secret-scanning/components/SecretScanningTable.tsx b/src/secret-scanning/components/SecretScanningTable.tsx
@@ -1,11 +1,32 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'
 import { DataTable, Table } from '@primer/react/experimental'
-import { TextInput, ActionMenu, ActionList, Pagination } from '@primer/react'
+import { TextInput, ActionMenu, ActionList, Pagination, Button } from '@primer/react'
+import debounce from 'lodash/debounce'
 import { useTranslation } from '@/languages/components/useTranslation'
+import { sendEvent } from '@/events/components/events'
+import { EventType } from '@/events/types'
+import { sanitizeSearchQuery } from '@/search/lib/sanitize-search-query'
 import type { SecretScanningData } from '@/types'
 
 const PAGE_SIZE = 25
 
+// Identifies this table in the docs.v0.TableInteractionEvent analytics.
+const TABLE_INTERACTION_NAME = 'secret-scanning-patterns'
+
+// Maps DataTable column ids to the canonical analytics field name so that a
+// filter and a sort on the same column report the same
+// table_interaction_field_name. Filter keys already use these canonical names.
+const COLUMN_FIELD_NAMES: Record<string, string> = {
+  provider: 'provider',
+  supportedSecret: 'secret',
+  isPublic: 'partnerAlert',
+  isPrivateWithGhas: 'userAlert',
+  hasPushProtection: 'pushProtection',
+  hasValidityCheck: 'validityCheck',
+  hasExtendedMetadata: 'metadata',
+  base64Supported: 'base64',
+}
+
 type SecretScanningRow = SecretScanningData & { id: string }
 
 type FilterState = {
@@ -17,20 +38,81 @@ type FilterState = {
   base64: 'all' | 'yes' | 'no'
 }
 
+type FilterKey = Exclude<keyof FilterState, 'search'>
+
+const DEFAULT_FILTERS: FilterState = {
+  search: '',
+  pushProtection: 'all',
+  validityCheck: 'all',
+  partnerAlert: 'all',
+  metadata: 'all',
+  base64: 'all',
+}
+
+type TableInteractionType = 'search' | 'filter' | 'sort' | 'paginate' | 'reset'
+
 export function SecretScanningTable({ data }: { data: SecretScanningData[] }) {
   const { t } = useTranslation('secret_scanning')
-  const [filters, setFilters] = useState<FilterState>({
-    search: '',
-    pushProtection: 'all',
-    validityCheck: 'all',
-    partnerAlert: 'all',
-    metadata: 'all',
-    base64: 'all',
-  })
+  const [filters, setFilters] = useState<FilterState>(DEFAULT_FILTERS)
   const [currentPage, setCurrentPage] = useState(1)
   const [sortColumn, setSortColumn] = useState<string | undefined>(undefined)
   const [sortDirection, setSortDirection] = useState<'ASC' | 'DESC'>('ASC')
 
+  // Emit a TableInteractionEvent for analytics (github/docs-engineering#6593).
+  const trackInteraction = useCallback(
+    (interactionType: TableInteractionType, fieldName?: string, fieldValue?: string) => {
+      sendEvent({
+        type: EventType.tableInteraction,
+        table_interaction_name: TABLE_INTERACTION_NAME,
+        table_interaction_type: interactionType,
+        table_interaction_field_name: fieldName,
+        table_interaction_field_value: fieldValue,
+      })
+    },
+    [],
+  )
+
+  // Debounce search tracking so we record the settled query, not every keystroke.
+  const debouncedTrackSearchRef = useRef<ReturnType<typeof debounce> | null>(null)
+  useEffect(() => {
+    debouncedTrackSearchRef.current = debounce((query: string) => {
+      // Sanitize before logging: users may paste a real secret into this
+      // table's search to check support, and the query is sent to analytics.
+      trackInteraction('search', 'search', sanitizeSearchQuery(query))
+    }, 500)
+    return () => {
+      debouncedTrackSearchRef.current?.flush()
+      debouncedTrackSearchRef.current?.cancel()
+    }
+  }, [trackInteraction])
+
+  const handleFilterChange = useCallback(
+    (field: FilterKey, value: 'all' | 'yes' | 'no') => {
+      setFilters((f) => ({ ...f, [field]: value }))
+      setCurrentPage(1)
+      trackInteraction('filter', field, value)
+    },
+    [trackInteraction],
+  )
+
+  const handleReset = useCallback(() => {
+    setFilters(DEFAULT_FILTERS)
+    setCurrentPage(1)
+    setSortColumn(undefined)
+    setSortDirection('ASC')
+    debouncedTrackSearchRef.current?.cancel()
+    trackInteraction('reset')
+  }, [trackInteraction])
+
+  const hasActiveFilters =
+    filters.search !== '' ||
+    filters.pushProtection !== 'all' ||
+    filters.validityCheck !== 'all' ||
+    filters.partnerAlert !== 'all' ||
+    filters.metadata !== 'all' ||
+    filters.base64 !== 'all' ||
+    sortColumn !== undefined
+
   // Add stable IDs once based on original data order
   const dataWithIds: SecretScanningRow[] = useMemo(() => {
     return data.map((entry, i) => ({ ...entry, id: `${entry.secretType}-${i}` }))
@@ -92,51 +174,49 @@ export function SecretScanningTable({ data }: { data: SecretScanningData[] }) {
           <FilterDropdown
             label={t('filter_push_protection')}
             value={filters.pushProtection}
-            onChange={(v) => {
-              setFilters((f) => ({ ...f, pushProtection: v }))
-              setCurrentPage(1)
-            }}
+            onChange={(v) => handleFilterChange('pushProtection', v)}
           />
           <FilterDropdown
             label={t('filter_validity_check')}
             value={filters.validityCheck}
-            onChange={(v) => {
-              setFilters((f) => ({ ...f, validityCheck: v }))
-              setCurrentPage(1)
-            }}
+            onChange={(v) => handleFilterChange('validityCheck', v)}
           />
           <FilterDropdown
             label={t('filter_partner_alert')}
             value={filters.partnerAlert}
-            onChange={(v) => {
-              setFilters((f) => ({ ...f, partnerAlert: v }))
-              setCurrentPage(1)
-            }}
+            onChange={(v) => handleFilterChange('partnerAlert', v)}
           />
           <FilterDropdown
             label={t('filter_metadata')}
             value={filters.metadata}
-            onChange={(v) => {
-              setFilters((f) => ({ ...f, metadata: v }))
-              setCurrentPage(1)
-            }}
+            onChange={(v) => handleFilterChange('metadata', v)}
           />
           <FilterDropdown
             label={t('filter_base64')}
             value={filters.base64}
-            onChange={(v) => {
-              setFilters((f) => ({ ...f, base64: v }))
-              setCurrentPage(1)
-            }}
+            onChange={(v) => handleFilterChange('base64', v)}
           />
+          {hasActiveFilters && (
+            <Button
+              variant="invisible"
+              size="small"
+              onClick={handleReset}
+              aria-label={t('clear_filters_aria_label')}
+            >
+              {t('clear_filters')}
+            </Button>
+          )}
         </div>
         <TextInput
           aria-label={t('search_aria_label')}
           placeholder={t('search_placeholder')}
           value={filters.search}
           onChange={(e) => {
-            setFilters((f) => ({ ...f, search: e.target.value }))
+            const value = e.target.value
+            setFilters((f) => ({ ...f, search: value }))
             setCurrentPage(1)
+            if (value.trim()) debouncedTrackSearchRef.current?.(value)
+            else debouncedTrackSearchRef.current?.cancel()
           }}
         />
       </div>
@@ -168,6 +248,11 @@ export function SecretScanningTable({ data }: { data: SecretScanningData[] }) {
               setSortColumn(String(columnId))
               setSortDirection(direction)
               setCurrentPage(1)
+              trackInteraction(
+                'sort',
+                COLUMN_FIELD_NAMES[String(columnId)] ?? String(columnId),
+                direction,
+              )
             }}
             columns={[
               {
@@ -280,7 +365,10 @@ export function SecretScanningTable({ data }: { data: SecretScanningData[] }) {
           aria-label={t('pagination_label')}
           pageCount={pageCount}
           currentPage={currentPage}
-          onPageChange={(_e: React.MouseEvent, page: number) => setCurrentPage(page)}
+          onPageChange={(_e: React.MouseEvent, page: number) => {
+            setCurrentPage(page)
+            trackInteraction('paginate', 'page', String(page))
+          }}
         />
       )}
     </div>

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ export enum EventType {`
`12`	`12`	`preference = 'preference',`
`13`	`13`	`clipboard = 'clipboard',`
`14`	`14`	`print = 'print',`
	`15`	`+ tableInteraction = 'tableInteraction',`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`export type EventProps = {`
`@@ -135,4 +136,10 @@ export type EventPropsByType = {`
`135`	`136`	`survey_comment_language?: string`
`136`	`137`	`survey_connected_event_id?: string`
`137`	`138`	`}`
	`139`	`+ [EventType.tableInteraction]: {`
	`140`	`+ table_interaction_name: string`
	`141`	`+ table_interaction_type: 'search' \| 'filter' \| 'sort' \| 'paginate' \| 'reset'`
	`142`	`+ table_interaction_field_name?: string`
	`143`	`+ table_interaction_field_value?: string`
	`144`	`+ }`
`138`	`145`	`}`