feat: Only show other recordings if there are no pinned ones by default

frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx

@@ -75,6 +75,8 @@ function RecordingsLists(): JSX.Element {
         showAdvancedFilters,
         hasAdvancedFilters,
         logicProps,
+        showOtherRecordings,
+        recordingsCount,
     } = useValues(sessionRecordingsPlaylistLogic)
     const {
         setSelectedRecordingId,
@@ -84,6 +86,7 @@ function RecordingsLists(): JSX.Element {
         setShowSettings,
         resetFilters,
         setShowAdvancedFilters,
+        toggleShowOtherRecordings,
     } = useActions(sessionRecordingsPlaylistLogic)
 
     const onRecordingClick = (recording: SessionRecordingType): void => {
@@ -139,17 +142,15 @@ function RecordingsLists(): JSX.Element {
                                 placement="bottom"
                                 title={
                                     <>
-                                        Showing {otherRecordings.length + pinnedRecordings.length} results.
+                                        Showing {recordingsCount} results.
                                         <br />
                                         Scrolling to the bottom or the top of the list will load older or newer
                                         recordings respectively.
                                     </>
                                 }
                             >
                                 <span>
-                                    <CounterBadge>
-                                        {Math.min(999, otherRecordings.length + pinnedRecordings.length)}+
-                                    </CounterBadge>
+                                    <CounterBadge>{Math.min(999, recordingsCount)}+</CounterBadge>
                                 </span>
                             </Tooltip>
                         </span>
@@ -219,37 +220,46 @@ function RecordingsLists(): JSX.Element {
                             </div>
                         ))}
 
-                        {pinnedRecordings.length && otherRecordings.length ? (
-                            <div className="px-3 py-2 text-muted-alt border-b uppercase font-semibold text-xs">
+                        {pinnedRecordings.length ? (
+                            <div className="flex justify-between items-center pl-3 pr-1 py-2 text-muted-alt border-b uppercase font-semibold text-xs">
                                 Other recordings
+                                <LemonButton size="xsmall" onClick={() => toggleShowOtherRecordings()}>
+                                    {showOtherRecordings ? 'Hide' : 'Show'}
+                                </LemonButton>
                             </div>
                         ) : null}
 
-                        {otherRecordings.map((rec) => (
-                            <div key={rec.id} className="border-b">
-                                <SessionRecordingPreview
-                                    recording={rec}
-                                    onClick={() => onRecordingClick(rec)}
-                                    onPropertyClick={onPropertyClick}
-                                    isActive={activeSessionRecordingId === rec.id}
-                                    pinned={false}
-                                />
-                            </div>
-                        ))}
+                        <>
+                            {showOtherRecordings
+                                ? otherRecordings.map((rec) => (
+                                      <div key={rec.id} className="border-b">
+                                          <SessionRecordingPreview
+                                              recording={rec}
+                                              onClick={() => onRecordingClick(rec)}
+                                              onPropertyClick={onPropertyClick}
+                                              isActive={activeSessionRecordingId === rec.id}
+                                              pinned={false}
+                                          />
+                                      </div>
+                                  ))
+                                : null}
 
-                        <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
-                            {sessionRecordingsResponseLoading ? (
-                                <>
-                                    <Spinner textColored /> Loading older recordings
-                                </>
-                            ) : hasNext ? (
-                                <LemonButton status="primary" onClick={() => maybeLoadSessionRecordings('older')}>
-                                    Load more
-                                </LemonButton>
-                            ) : (
-                                'No more results'
-                            )}
-                        </div>
+                            <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
+                                {!showOtherRecordings && totalFiltersCount ? (
+                                    <>Filters do not apply to pinned recordings</>
+                                ) : sessionRecordingsResponseLoading ? (
+                                    <>
+                                        <Spinner textColored /> Loading older recordings
+                                    </>
+                                ) : hasNext ? (
+                                    <LemonButton status="primary" onClick={() => maybeLoadSessionRecordings('older')}>
+                                        Load more
+                                    </LemonButton>
+                                ) : (
+                                    'No more results'
+                                )}
+                            </div>
+                        </>
                     </ul>
                 ) : sessionRecordingsResponseLoading ? (
                     <>

frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx

@@ -146,7 +146,7 @@ export function SessionRecordingsPlaylistScene(): JSX.Element {
                     </>
                 }
             />
-            {playlist.short_id ? (
+            {playlist.short_id && pinnedRecordings !== null ? (
                 <div className="SessionRecordingPlaylistHeightWrapper">
                     <SessionRecordingsPlaylist
                         filters={playlist.filters}

frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.test.ts

@@ -489,5 +489,29 @@ describe('sessionRecordingsPlaylistLogic', () => {
                 }).toMatchValues({ totalFiltersCount: 0 })
             })
         })
+
+        describe('pinned playlists', () => {
+            it('should not show others if there are pinned recordings', () => {
+                logic = sessionRecordingsPlaylistLogic({
+                    key: 'tests',
+                    updateSearchParams: true,
+                    pinnedRecordings: ['1234'],
+                })
+                logic.mount()
+
+                expectLogic(logic).toMatchValues({ showOtherRecordings: false })
+            })
+
+            it('should show others if there are no pinned recordings', () => {
+                logic = sessionRecordingsPlaylistLogic({
+                    key: 'tests',
+                    updateSearchParams: true,
+                    pinnedRecordings: [],
+                })
+                logic.mount()
+
+                expectLogic(logic).toMatchValues({ showOtherRecordings: true })
+            })
+        })
     })
 })

frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts

@@ -2,6 +2,7 @@ import equal from 'fast-deep-equal'
 import { actions, afterMount, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import { actionToUrl, router, urlToAction } from 'kea-router'
+import { subscriptions } from 'kea-subscriptions'
 import api from 'lib/api'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { objectClean, objectsEqual } from 'lib/utils'
@@ -240,6 +241,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         maybeLoadSessionRecordings: (direction?: 'newer' | 'older') => ({ direction }),
         loadNext: true,
         loadPrev: true,
+        toggleShowOtherRecordings: (show?: boolean) => ({ show }),
     }),
     propsChanged(({ actions, props }, oldProps) => {
         if (!objectsEqual(props.filters, oldProps.filters)) {
@@ -340,6 +342,17 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         ],
     })),
     reducers(({ props }) => ({
+        // If we initialise with pinned recordings then we don't show others by default
+        // but if we go down to 0 pinned recordings then we show others
+        showOtherRecordings: [
+            !props.pinnedRecordings?.length,
+            {
+                loadPinnedRecordingsSuccess: (state, { pinnedRecordings }) =>
+                    pinnedRecordings.length === 0 ? true : state,
+                toggleShowOtherRecordings: (state, { show }) => (show === undefined ? !state : show),
+            },
+        ],
+
         unusableEventsInFilter: [
             [] as string[],
             {
@@ -654,6 +667,13 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
                 return [...pinnedRecordings, ...otherRecordings]
             },
         ],
+
+        recordingsCount: [
+            (s) => [s.pinnedRecordings, s.otherRecordings, s.showOtherRecordings],
+            (pinnedRecordings, otherRecordings, showOtherRecordings): number => {
+                return showOtherRecordings ? otherRecordings.length + pinnedRecordings.length : pinnedRecordings.length
+            },
+        ],
     }),
 
     actionToUrl(({ props, values }) => {
@@ -713,9 +733,19 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         }
     }),
 
+    subscriptions(({ actions }) => ({
+        showOtherRecordings: (showOtherRecordings: boolean) => {
+            if (showOtherRecordings) {
+                actions.loadSessionRecordings()
+            }
+        },
+    })),
+
     // NOTE: It is important this comes after urlToAction, as it will override the default behavior
-    afterMount(({ actions }) => {
-        actions.loadSessionRecordings()
+    afterMount(({ actions, values }) => {
+        if (values.showOtherRecordings) {
+            actions.loadSessionRecordings()
+        }
         actions.loadPinnedRecordings()
     }),
 ])