feat: no mixing the streams

frontend/src/lib/constants.tsx

@@ -174,7 +174,6 @@ export const FEATURE_FLAGS = {
     AI_SESSION_SUMMARY: 'ai-session-summary', // owner: #team-replay
     AI_SESSION_PERMISSIONS: 'ai-session-permissions', // owner: #team-replay
     SESSION_REPLAY_DOCTOR: 'session-replay-doctor', // owner: #team-replay
-    SAVED_NOT_PINNED: 'saved-not-pinned', // owner: #team-replay
     AUDIT_LOGS_ACCESS: 'audit-logs-access', // owner: #team-growth
     SUBSCRIBE_FROM_PAYGATE: 'subscribe-from-paygate', // owner: #team-growth
     HEATMAPS_UI: 'heatmaps-ui', // owner: @benjackwhite

frontend/src/scenes/session-recordings/player/player-meta/PlayerMetaLinks.tsx

@@ -1,10 +1,8 @@
 import { IconDownload, IconEllipsis, IconNotebook, IconPin, IconPinFilled, IconTrash } from '@posthog/icons'
 import { LemonButton, LemonButtonProps, LemonDialog, LemonMenu, LemonMenuItems } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconComment } from 'lib/lemon-ui/icons'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useMemo } from 'react'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
 import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
@@ -26,14 +24,8 @@ function PinToPlaylistButton(): JSX.Element {
     const { maybePersistRecording } = useActions(sessionRecordingPlayerLogic)
     const nodeLogic = useNotebookNode()
 
-    let tooltip = logicProps.pinned ? 'Unpin from this list' : 'Pin to this list'
-    let description = 'Pin'
-    const { featureFlags } = useValues(featureFlagLogic)
-    const isTestingSaved = featureFlags[FEATURE_FLAGS.SAVED_NOT_PINNED] === 'test'
-    if (isTestingSaved) {
-        tooltip = logicProps.pinned ? 'Remove from this list' : 'Save to this list (for one year)'
-        description = 'Save'
-    }
+    const tooltip = logicProps.pinned ? 'Unpin from this list' : 'Pin to this list'
+    const description = 'Pin'
 
     return logicProps.setPinned && !logicProps.pinned ? (
         <LemonButton

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

@@ -164,8 +164,12 @@ export function Playlist({
                     'xl:flex-row': true,
                 })}
             >
-                <div className="flex flex-col gap-2 xl:max-w-80">
-                    <DraggableToNotebook href={notebooksHref}>{filterActions}</DraggableToNotebook>
+                <div className="flex flex-col xl:max-w-80">
+                    {filterActions && (
+                        <DraggableToNotebook className="mb-2" href={notebooksHref}>
+                            {filterActions}
+                        </DraggableToNotebook>
+                    )}
                     <div
                         ref={playlistRef}
                         data-attr={dataAttr}

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

@@ -5,10 +5,8 @@ import clsx from 'clsx'
 import { useValues } from 'kea'
 import { PropertyIcon } from 'lib/components/PropertyIcon/PropertyIcon'
 import { TZLabel } from 'lib/components/TZLabel'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { colonDelimitedDuration } from 'lib/utils'
 import { DraggableToNotebook } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 import { asDisplay } from 'scenes/persons/person-utils'
@@ -134,11 +132,8 @@ function FirstURL(props: { startUrl: string | undefined }): JSX.Element {
 }
 
 function PinnedIndicator(): JSX.Element | null {
-    const { featureFlags } = useValues(featureFlagLogic)
-    const isTestingSaved = featureFlags[FEATURE_FLAGS.SAVED_NOT_PINNED] === 'test'
-    const description = isTestingSaved ? 'saved' : 'pinned'
     return (
-        <Tooltip placement="top-end" title={<>This recording is {description} to this list.</>}>
+        <Tooltip placement="top-end" title={<>This recording is pinned to this list.</>}>
             <IconPinFilled className="text-sm text-orange shrink-0" />
         </Tooltip>
     )

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

@@ -2,9 +2,7 @@ import { LemonBadge, LemonButton, Link, Spinner } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
 import { EmptyMessage } from 'lib/components/EmptyMessage/EmptyMessage'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
 import { Playlist, PlaylistSection } from 'scenes/session-recordings/playlist/Playlist'
 import { urls } from 'scenes/urls'
@@ -24,8 +22,20 @@ import { SessionRecordingsPlaylistTroubleshooting } from './SessionRecordingsPla
 
 export function SessionRecordingsPlaylist({
     showContent = true,
+    canMixFiltersAndPinned = true,
     ...props
-}: SessionRecordingPlaylistLogicProps & { showContent?: boolean }): JSX.Element {
+}: SessionRecordingPlaylistLogicProps & {
+    showContent?: boolean
+    /**
+     * Historically we allowed playlists to mix filters and pinned recordings.
+     * But we don't want to... however, some users might use playlists with pinned recordings
+     * and filters.
+     *
+     * This prop allows us to allow that case or not.
+     * Eventually this will be removed and we'll only allow one or the other.
+     */
+    canMixFiltersAndPinned?: boolean
+}): JSX.Element {
     const logicProps: SessionRecordingPlaylistLogicProps = {
         ...props,
         autoPlay: props.autoPlay ?? true,
@@ -45,11 +55,6 @@ export function SessionRecordingsPlaylist({
     } = useValues(logic)
     const { maybeLoadSessionRecordings, setSelectedRecordingId, setFilters, resetFilters } = useActions(logic)
 
-    const { featureFlags } = useValues(featureFlagLogic)
-    const isTestingSaved = featureFlags[FEATURE_FLAGS.SAVED_NOT_PINNED] === 'test'
-
-    const pinnedDescription = isTestingSaved ? 'Saved' : 'Pinned'
-
     const notebookNode = useNotebookNode()
 
     const sections: PlaylistSection[] = []
@@ -59,7 +64,7 @@ export function SessionRecordingsPlaylist({
             key: 'pinned',
             title: (
                 <div className="flex flex-row deprecated-space-x-1 items-center">
-                    <span>{pinnedDescription} recordings</span>
+                    <span>Pinned recordings</span>
                     <LemonBadge.Number count={pinnedRecordings.length} status="muted" size="small" />
                 </div>
             ),
@@ -71,33 +76,37 @@ export function SessionRecordingsPlaylist({
         })
     }
 
-    sections.push({
-        key: 'other',
-        title: (
-            <div className="flex flex-row deprecated-space-x-1 items-center">
-                <span>Results</span>
-                <LemonBadge.Number count={otherRecordings.length} status="muted" size="small" />
-            </div>
-        ),
-        items: otherRecordings,
-        initiallyOpen: !pinnedRecordings.length,
-        render: ({ item, isActive }) => <SessionRecordingPreview recording={item} isActive={isActive} pinned={false} />,
-        footer: (
-            <div className="p-4">
-                <div className="h-10 flex items-center justify-center gap-2 text-secondary">
-                    {sessionRecordingsResponseLoading ? (
-                        <>
-                            <Spinner textColored /> Loading older recordings
-                        </>
-                    ) : hasNext ? (
-                        <LemonButton onClick={() => maybeLoadSessionRecordings('older')}>Load more</LemonButton>
-                    ) : (
-                        'No more results'
-                    )}
+    if ((pinnedRecordings.length > 0 && canMixFiltersAndPinned) || pinnedRecordings.length === 0) {
+        sections.push({
+            key: 'other',
+            title: (
+                <div className="flex flex-row deprecated-space-x-1 items-center">
+                    <span>Results</span>
+                    <LemonBadge.Number count={otherRecordings.length} status="muted" size="small" />
                 </div>
-            </div>
-        ),
-    })
+            ),
+            items: otherRecordings,
+            initiallyOpen: !pinnedRecordings.length,
+            render: ({ item, isActive }) => (
+                <SessionRecordingPreview recording={item} isActive={isActive} pinned={false} />
+            ),
+            footer: (
+                <div className="p-4">
+                    <div className="h-10 flex items-center justify-center gap-2 text-secondary">
+                        {sessionRecordingsResponseLoading ? (
+                            <>
+                                <Spinner textColored /> Loading older recordings
+                            </>
+                        ) : hasNext ? (
+                            <LemonButton onClick={() => maybeLoadSessionRecordings('older')}>Load more</LemonButton>
+                        ) : (
+                            'No more results'
+                        )}
+                    </div>
+                </div>
+            ),
+        })
+    }
 
     return (
         <BindLogic logic={sessionRecordingsPlaylistLogic} props={logicProps}>
@@ -109,7 +118,7 @@ export function SessionRecordingsPlaylist({
                     sections={sections}
                     headerActions={<SessionRecordingsPlaylistTopSettings filters={filters} setFilters={setFilters} />}
                     filterActions={
-                        notebookNode ? null : (
+                        notebookNode || (!canMixFiltersAndPinned && !!pinnedRecordings.length) ? null : (
                             <RecordingsUniversalFilters
                                 resetFilters={resetFilters}
                                 filters={filters}

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

@@ -4,6 +4,7 @@ import { EditableField } from 'lib/components/EditableField/EditableField'
 import { NotFound } from 'lib/components/NotFound'
 import { PageHeader } from 'lib/components/PageHeader'
 import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
+import { dayjs } from 'lib/dayjs'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { SceneExport } from 'scenes/sceneTypes'
@@ -144,6 +145,7 @@ export function SessionRecordingsPlaylistScene(): JSX.Element {
                     onFiltersChange={setFilters}
                     onPinnedChange={onPinnedChange}
                     pinnedRecordings={pinnedRecordings ?? []}
+                    canMixFiltersAndPinned={dayjs(playlist.created_at).isBefore('2025-03-11')}
                     updateSearchParams={true}
                 />
             </div>