diff --git a/static/app/views/replays/detail/playlist/index.tsx b/static/app/views/replays/detail/playlist/index.tsx index e18fb134d4c1ca..61e5c380240459 100644 --- a/static/app/views/replays/detail/playlist/index.tsx +++ b/static/app/views/replays/detail/playlist/index.tsx @@ -1,3 +1,9 @@ +import {parseAsString, useQueryState} from 'nuqs'; + +import {Flex, Grid} from '@sentry/scraps/layout'; +import {Text} from '@sentry/scraps/text'; + +import {Alert} from 'sentry/components/core/alert'; import ReplayTable from 'sentry/components/replays/table/replayTable'; import { ReplayBrowserColumn, @@ -6,6 +12,8 @@ import { ReplayOSColumn, ReplaySessionColumn, } from 'sentry/components/replays/table/replayTableColumns'; +import {ProvidedFormattedQuery} from 'sentry/components/searchQueryBuilder/formattedQuery'; +import {t} from 'sentry/locale'; import {useReplayPlaylist} from 'sentry/utils/replays/playback/providers/replayPlaylistProvider'; import {useLocation} from 'sentry/utils/useLocation'; import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj'; @@ -28,20 +36,37 @@ const MOBILE_COLUMNS = [ export default function Playlist() { const {replays, currentReplayIndex, isLoading} = useReplayPlaylist(); const location = useLocation(); + const [query] = useQueryState('query', parseAsString.withDefault('')); const {allMobileProj} = useAllMobileProj({}); const columns = allMobileProj ? MOBILE_COLUMNS : VISIBLE_COLUMNS; + const rows = query ? 'max-content auto' : 'auto'; + return ( - + + + {query ? ( + } + > + {t('This playlist is filtered by:')} + + ) : null} + + + ); }