chore: add a beta label to console logs text search (#17776)

* chore: add a beta label to console logs text search * fix height so empty state always visible * Update frontend/src/scenes/session-recordings/filters/AdvancedSessionRecordingsFilters.tsx Co-authored-by: David Newell <[email protected]> --------- Co-authored-by: David Newell <[email protected]>
PostHog · Oct 4, 2023 · b4f4fa5 · b4f4fa5
1 parent 7f6be48
commit b4f4fa5
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 72 deletions.
diff --git a/frontend/src/scenes/session-recordings/filters/AdvancedSessionRecordingsFilters.tsx b/frontend/src/scenes/session-recordings/filters/AdvancedSessionRecordingsFilters.tsx
@@ -14,7 +14,7 @@ import {
 } from '~/types'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { DurationFilter } from './DurationFilter'
-import { LemonButtonWithDropdown, LemonCheckbox, LemonInput } from '@posthog/lemon-ui'
+import { LemonButtonWithDropdown, LemonCheckbox, LemonInput, LemonTag, Tooltip } from '@posthog/lemon-ui'
 import { TestAccountFilter } from 'scenes/insights/filters/TestAccountFilter'
 import { teamLogic } from 'scenes/teamLogic'
 import { useValues } from 'kea'
@@ -131,91 +131,97 @@ export const AdvancedSessionRecordingsFilters = ({
                 </>
             )}
 
-            <LemonLabel info="Show recordings that have captured console log messages">
-                Filter by console logs
-            </LemonLabel>
-            <FlaggedFeature flag={FEATURE_FLAGS.CONSOLE_RECORDING_SEARCH}>
-                <LemonInput
-                    size={'small'}
-                    fullWidth={true}
-                    placeholder={'containing text'}
-                    value={filters.console_search_query}
-                    onChange={(s) => {
-                        setFilters({
-                            console_search_query: s,
-                        })
-                    }}
-                />
-            </FlaggedFeature>
-            <ConsoleFilters
-                filters={filters}
-                setConsoleFilters={(x) =>
-                    setFilters({
-                        console_logs: x,
-                    })
-                }
-            />
+            <ConsoleFilters filters={filters} setFilters={setFilters} />
         </div>
     )
 }
 
 function ConsoleFilters({
     filters,
-    setConsoleFilters,
+    setFilters,
 }: {
     filters: RecordingFilters
-    setConsoleFilters: (selection: FilterableLogLevel[]) => void
+    setFilters: (filterS: RecordingFilters) => void
 }): JSX.Element {
-    function updateChoice(checked: boolean, level: FilterableLogLevel): void {
+    function updateLevelChoice(checked: boolean, level: FilterableLogLevel): void {
         const newChoice = filters.console_logs?.filter((c) => c !== level) || []
         if (checked) {
-            setConsoleFilters([...newChoice, level])
+            setFilters({
+                console_logs: [...newChoice, level],
+            })
         } else {
-            setConsoleFilters(newChoice)
+            setFilters({
+                console_logs: newChoice,
+            })
         }
     }
 
     return (
-        <LemonButtonWithDropdown
-            status="stealth"
-            type="secondary"
-            data-attr={'console-filters'}
-            dropdown={{
-                sameWidth: true,
-                closeOnClickInside: false,
-                overlay: [
-                    <>
-                        <LemonCheckbox
-                            size="small"
-                            fullWidth
-                            checked={!!filters.console_logs?.includes('log')}
-                            onChange={(checked) => {
-                                updateChoice(checked, 'log')
-                            }}
-                            label={'log'}
-                        />
-                        <LemonCheckbox
-                            size="small"
-                            fullWidth
-                            checked={!!filters.console_logs?.includes('warn')}
-                            onChange={(checked) => updateChoice(checked, 'warn')}
-                            label={'warn'}
-                        />
-                        <LemonCheckbox
-                            size="small"
-                            fullWidth
-                            checked={!!filters.console_logs?.includes('error')}
-                            onChange={(checked) => updateChoice(checked, 'error')}
-                            label={'error'}
-                        />
-                    </>,
-                ],
-                actionable: true,
-            }}
-        >
-            {filters.console_logs?.map((x) => `console.${x}`).join(' or ') || (
-                <span className={'text-muted'}>Console types to filter for...</span>
-            )}
-        </LemonButtonWithDropdown>
+        <>
+            <LemonLabel>Filter by console logs</LemonLabel>
+            <FlaggedFeature flag={FEATURE_FLAGS.CONSOLE_RECORDING_SEARCH}>
+                <div className={'flex flex-row space-x-2'}>
+                    <LemonInput
+                        className={'grow'}
+                        placeholder={'containing text'}
+                        value={filters.console_search_query}
+                        onChange={(s) => {
+                            setFilters({
+                                console_search_query: s,
+                            })
+                        }}
+                    />
+
+                    <Tooltip
+                        placement="bottom"
+                        title={<>Filter recordings by console logs. Only matches recordings since October 4th.</>}
+                    >
+                        <LemonTag type={'highlight'}>Beta</LemonTag>
+                    </Tooltip>
+                </div>
+            </FlaggedFeature>
+            <LemonButtonWithDropdown
+                status="stealth"
+                type="secondary"
+                data-attr={'console-filters'}
+                fullWidth={true}
+                dropdown={{
+                    sameWidth: true,
+                    closeOnClickInside: false,
+                    overlay: [
+                        <>
+                            <LemonCheckbox
+                                size="small"
+                                fullWidth
+                                checked={!!filters.console_logs?.includes('log')}
+                                onChange={(checked) => {
+                                    updateLevelChoice(checked, 'log')
+                                }}
+                                label={'log'}
+                            />
+                            <LemonCheckbox
+                                size="small"
+                                fullWidth
+                                checked={!!filters.console_logs?.includes('warn')}
+                                onChange={(checked) => updateLevelChoice(checked, 'warn')}
+                                label={'warn'}
+                            />
+                            <LemonCheckbox
+                                size="small"
+                                fullWidth
+                                checked={!!filters.console_logs?.includes('error')}
+                                onChange={(checked) => updateLevelChoice(checked, 'error')}
+                                label={'error'}
+                            />
+                        </>,
+                    ],
+                    actionable: true,
+                }}
+            >
+                {filters.console_logs?.map((x) => `console.${x}`).join(' or ') || (
+                    <span className={'text-muted'}>Console types to filter for...</span>
+                )}
+            </LemonButtonWithDropdown>
+        </>
     )
 }
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
@@ -33,7 +33,7 @@
         justify-content: flex-start;
         // NOTE: Somewhat random way to offset the various headers and tabs above the playlist
         height: calc(100vh - 14rem);
-        min-height: 30rem;
+        min-height: 41rem;
 
         .SessionRecordingsPlaylist__left-column {
             max-width: 350px;