+ {filters.date_from === DEFAULT_RECORDING_FILTERS.date_from ? (
+ <>
+ No matching recordings found
+ setFilters({ date_from: '-30d' })}
+ >
+ Search over the last 30 days
+
+
+ ) : (
+
+ )}
+
+ )}
+
+ )
+}
+
+function UnusableEventsWarning(props: { unusableEventsInFilter: string[] }): JSX.Element {
+ // TODO add docs on how to enrich custom events with session_id and link to it from here
+ return (
+
+
Cannot use these events to filter for session recordings:
+ Events have to have a to be used to filter recordings. This is
+ added automatically by{' '}
+
+ the Web SDK
+
+ ,{' '}
+
+ and the Mobile SDKs (Android, iOS, React Native and Flutter)
+
+
+
+ )
+}
+
+function List<
+ T extends {
+ id: string | number
+ [key: string]: any
+ }
+>({
+ notebooksHref,
+ setActiveItemId,
+ headerActions,
+ footerActions,
+ sections,
+ onChangeSections,
+ activeItemId,
+ onScrollListEdge,
+ loading,
+ emptyState,
+}: {
+ title?: string
+ notebooksHref: PlaylistProps['notebooksHref']
+ activeItemId: T['id'] | null
+ setActiveItemId: (item: T) => void
+ headerActions: PlaylistProps['headerActions']
+ footerActions: PlaylistProps['footerActions']
+ sections: PlaylistProps['sections']
+ onChangeSections?: (activeKeys: string[]) => void
+ onScrollListEdge: PlaylistProps['onScrollListEdge']
+ loading: PlaylistProps['loading']
+ emptyState: PlaylistProps['listEmptyState']
+}): JSX.Element {
+ const lastScrollPositionRef = useRef(0)
+ const contentRef = useRef(null)
+
+ const handleScroll = (e: React.UIEvent): void => {
+ // If we are scrolling down then check if we are at the bottom of the list
+ if (e.currentTarget.scrollTop > lastScrollPositionRef.current) {
+ const scrollPosition = e.currentTarget.scrollTop + e.currentTarget.clientHeight
+ if (e.currentTarget.scrollHeight - scrollPosition < SCROLL_TRIGGER_OFFSET) {
+ onScrollListEdge?.('bottom')
+ }
+ }
+
+ // Same again but if scrolling to the top
+ if (e.currentTarget.scrollTop < lastScrollPositionRef.current) {
+ if (e.currentTarget.scrollTop < SCROLL_TRIGGER_OFFSET) {
+ onScrollListEdge?.('top')
+ }
+ }
+
+ lastScrollPositionRef.current = e.currentTarget.scrollTop
+ }
+
+ const initiallyOpenSections = sections.filter((s) => s.initiallyOpen).map((s) => s.key)
+
+ return (
+