feat: add showRecordingColumn option to data table, activate for surveys (#41502)

Author: adboio

frontend/src/queries/nodes/DataTable/DataTable.tsx

@@ -7,6 +7,7 @@ import { useCallback, useState } from 'react'
 import { PreAggregatedBadge } from 'lib/components/PreAggregatedBadge'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
+import ViewRecordingButton from 'lib/components/ViewRecordingButton/ViewRecordingButton'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
@@ -195,6 +196,7 @@ export function DataTable({
 
     const {
         showActions,
+        showRecordingColumn,
         showDateRange,
         showTestAccountFilters,
         showSearch,
@@ -219,6 +221,8 @@ export function DataTable({
 
     const eventActionsColumnShown =
         showActions && sourceFeatures.has(QueryFeature.eventActionsColumn) && columnsInResponse?.includes('*')
+    const recordingColumnShown =
+        showRecordingColumn && sourceFeatures.has(QueryFeature.eventActionsColumn) && columnsInResponse?.includes('*')
     const allColumns = sourceFeatures.has(QueryFeature.columnsInResponse)
         ? (columnsInResponse ?? columnsInQuery)
         : columnsInQuery
@@ -561,6 +565,35 @@ export function DataTable({
                     </>
                 ) : undefined,
         })),
+        ...(recordingColumnShown
+            ? [
+                  {
+                      dataIndex: '__recording' as any,
+                      title: '',
+                      render: function RenderRecording(_: any, { label, result }: DataTableRow) {
+                          if (label) {
+                              return { props: { colSpan: 0 } }
+                          }
+                          if (result && columnsInResponse?.includes('*')) {
+                              const event = result[columnsInResponse.indexOf('*')]
+                              return (
+                                  <ViewRecordingButton
+                                      sessionId={event?.properties?.$session_id}
+                                      recordingStatus={event?.properties?.$recording_status}
+                                      timestamp={event?.timestamp}
+                                      inModal
+                                      size="xsmall"
+                                      type="secondary"
+                                  />
+                              )
+                          }
+                          return null
+                      },
+                      width: 100,
+                      align: 'center' as const,
+                  },
+              ]
+            : []),
         ...(eventActionsColumnShown
             ? [
                   {

frontend/src/queries/nodes/DataTable/dataTableLogic.ts

@@ -239,6 +239,7 @@ export const dataTableLogic = kea<dataTableLogicType>([
                                 ? context.showOpenEditorButton
                                 : (query.showOpenEditorButton ?? true),
                         showResultsTable: query.showResultsTable ?? true,
+                        showRecordingColumn: query.showRecordingColumn ?? false,
                     }),
                 }
             },

frontend/src/queries/schema.json

@@ -9721,6 +9721,10 @@
                     ],
                     "description": "Include a property filter above the table"
                 },
+                "showRecordingColumn": {
+                    "description": "Show a recording column for events with session recordings",
+                    "type": "boolean"
+                },
                 "showReload": {
                     "description": "Show a reload button",
                     "type": "boolean"
@@ -25477,6 +25481,10 @@
                     ],
                     "description": "Include a property filter above the table"
                 },
+                "showRecordingColumn": {
+                    "description": "Show a recording column for events with session recordings",
+                    "type": "boolean"
+                },
                 "showReload": {
                     "description": "Show a reload button",
                     "type": "boolean"

frontend/src/queries/schema/schema-general.ts

@@ -1045,6 +1045,8 @@ interface DataTableNodeViewProps {
     showHogQLEditor?: boolean
     /** Show the kebab menu at the end of the row */
     showActions?: boolean
+    /** Show a recording column for events with session recordings */
+    showRecordingColumn?: boolean
     /** Show date range selector */
     showDateRange?: boolean
     /** Show the export button */

frontend/src/scenes/surveys/surveyLogic.tsx

@@ -1479,6 +1479,7 @@ export const surveyLogic = kea<surveyLogicType>([
                     propertiesViaUrl: true,
                     showExport: true,
                     showReload: true,
+                    showRecordingColumn: true,
                     showEventFilter: false,
                     showPropertyFilter: false,
                     showTimings: false,