fix: show other recordings in playlist (#25104)

PostHog · Sep 23, 2024 · 8c4939d · 8c4939d
1 parent e1c0eb6
commit 8c4939d
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png b/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png
diff --git a/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png b/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png
diff --git a/frontend/src/lib/components/Playlist/Playlist.tsx b/frontend/src/lib/components/Playlist/Playlist.tsx
@@ -41,6 +41,7 @@ export type PlaylistProps<T> = {
     // Optionally select the first item in the list. Only works in controlled mode
     selectInitialItem?: boolean
     onSelect?: (item: T) => void
+    onChangeSections?: (activeKeys: string[]) => void
     'data-attr'?: string
     activeItemId?: string
 }
@@ -67,6 +68,7 @@ export function Playlist<
     listEmptyState,
     selectInitialItem,
     onSelect,
+    onChangeSections,
     'data-attr': dataAttr,
 }: PlaylistProps<T>): JSX.Element {
     const [controlledActiveItemId, setControlledActiveItemId] = useState<T['id'] | null>(
@@ -111,6 +113,7 @@ export function Playlist<
                         onClickCollapse={() => setListCollapsed(true)}
                         activeItemId={activeItemId}
                         setActiveItemId={onChangeActiveItem}
+                        onChangeSections={onChangeSections}
                         emptyState={listEmptyState}
                     />
                 )}
@@ -146,6 +149,7 @@ function List<
     setActiveItemId,
     headerActions = [],
     sections,
+    onChangeSections,
     activeItemId,
     onScrollListEdge,
     loading,
@@ -158,6 +162,7 @@ function List<
     setActiveItemId: (item: T) => void
     headerActions: PlaylistProps<T>['headerActions']
     sections: PlaylistProps<T>['sections']
+    onChangeSections?: (activeKeys: string[]) => void
     onScrollListEdge: PlaylistProps<T>['onScrollListEdge']
     loading: PlaylistProps<T>['loading']
     emptyState: PlaylistProps<T>['listEmptyState']
@@ -254,6 +259,7 @@ function List<
                                     ),
                                     className: 'p-0',
                                 }))}
+                                onChange={onChangeSections}
                                 multiple
                                 embedded
                                 size="small"

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -39,7 +39,8 @@ export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicPr
         activeSessionRecordingId,
         hasNext,
     } = useValues(logic)
-    const { maybeLoadSessionRecordings, summarizeSession, setSelectedRecordingId, setFilters } = useActions(logic)
+    const { maybeLoadSessionRecordings, summarizeSession, setSelectedRecordingId, setFilters, setShowOtherRecordings } =
+        useActions(logic)
 
     const { featureFlags } = useValues(featureFlagLogic)
     const isTestingSaved = featureFlags[FEATURE_FLAGS.SAVED_NOT_PINNED] === 'test'
@@ -108,6 +109,7 @@ export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicPr
                     title="Recordings"
                     embedded={!!notebookNode}
                     sections={sections}
+                    onChangeSections={(activeSections) => setShowOtherRecordings(activeSections.includes('other'))}
                     headerActions={[
                         {
                             key: 'settings',

diff --git a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
@@ -308,7 +308,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         summarizeSession: (id: SessionRecordingType['id']) => ({ id }),
         loadNext: true,
         loadPrev: true,
-        toggleShowOtherRecordings: (show?: boolean) => ({ show }),
+        setShowOtherRecordings: (show: boolean) => ({ show }),
     }),
     propsChanged(({ actions, props }, oldProps) => {
         // If the defined list changes, we need to call the loader to either load the new items or change the list
@@ -445,7 +445,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
             {
                 loadPinnedRecordingsSuccess: (state, { pinnedRecordings }) =>
                     pinnedRecordings.length === 0 ? true : state,
-                toggleShowOtherRecordings: (state, { show }) => (show === undefined ? !state : show),
+                setShowOtherRecordings: (_, { show }) => show,
             },
         ],
         unusableEventsInFilter: [