chore: cleanup replay filters (#20109)

PostHog · Feb 2, 2024 · 06cea34 · 06cea34
1 parent 683412c
commit 06cea34
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 80 deletions.
diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png
diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png
diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
@@ -168,5 +168,11 @@ body:not(.posthog-3000) {
                 background-color: var(--bg-light);
             }
         }
+
+        &--disabled {
+            > div {
+                width: 100%;
+            }
+        }
     }
 }
diff --git a/frontend/src/scenes/dashboard/DashboardTemplateVariables.tsx b/frontend/src/scenes/dashboard/DashboardTemplateVariables.tsx
@@ -36,7 +36,6 @@ export function DashboardTemplateVariables(): JSX.Element {
                                 setVariable(variable.name, filters)
                             }}
                             typeKey={'variable_' + variable.name}
-                            buttonCopy=""
                             hideDeleteBtn={true}
                             hideRename={true}
                             hideDuplicate={true}

diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.tsx
@@ -26,8 +26,9 @@ export interface ActionFilterProps {
     addFilterDefaultOptions?: Record<string, any>
     mathAvailability?: MathAvailability
     /** Text copy for the action button to add more events/actions (graph series) */
-    buttonCopy: string
+    buttonCopy?: string
     buttonType?: LemonButtonProps['type']
+    buttonProps?: LemonButtonProps
     /** Whether the full control is enabled or not */
     disabled?: boolean
     /** Bordered view */
@@ -80,6 +81,7 @@ export const ActionFilter = React.forwardRef<HTMLDivElement, ActionFilterProps>(
         addFilterDefaultOptions = {},
         mathAvailability = MathAvailability.All,
         buttonCopy = '',
+        buttonProps = { fullWidth: true },
         disabled = false,
         sortable = false,
         showSeriesIndicator = false,
@@ -214,7 +216,7 @@ export const ActionFilter = React.forwardRef<HTMLDivElement, ActionFilterProps>(
                             data-attr="add-action-event-button"
                             icon={<IconPlusMini />}
                             disabled={reachedLimit || disabled || readOnly}
-                            fullWidth
+                            {...buttonProps}
                         >
                             {!reachedLimit
                                 ? buttonCopy || 'Action or event'

diff --git a/frontend/src/scenes/session-recordings/filters/AdvancedSessionRecordingsFilters.tsx b/frontend/src/scenes/session-recordings/filters/AdvancedSessionRecordingsFilters.tsx
@@ -30,11 +30,56 @@ export const AdvancedSessionRecordingsFilters = ({
 
     return (
         <div className="space-y-2">
+            <LemonLabel info="Show recordings where all of the events or actions listed below happen.">
+                Events and actions
+            </LemonLabel>
+
+            <ActionFilter
+                filters={localFilters}
+                setFilters={(payload) => {
+                    setLocalFilters(payload)
+                }}
+                typeKey="session-recordings"
+                mathAvailability={MathAvailability.None}
+                buttonCopy="Add filter"
+                hideRename
+                hideDuplicate
+                showNestedArrow={false}
+                actionsTaxonomicGroupTypes={[TaxonomicFilterGroupType.Actions, TaxonomicFilterGroupType.Events]}
+                propertiesTaxonomicGroupTypes={[
+                    TaxonomicFilterGroupType.EventProperties,
+                    TaxonomicFilterGroupType.EventFeatureFlags,
+                    TaxonomicFilterGroupType.Elements,
+                    TaxonomicFilterGroupType.HogQLExpression,
+                    ...groupsTaxonomicTypes,
+                ]}
+                propertyFiltersPopover
+                addFilterDefaultOptions={{
+                    id: '$pageview',
+                    name: '$pageview',
+                    type: EntityTypes.EVENTS,
+                }}
+                buttonProps={{ type: 'secondary', size: 'small' }}
+            />
+
+            <LemonLabel info="Show recordings by persons who match the set criteria">Persons and cohorts</LemonLabel>
+
             <TestAccountFilter
                 filters={filters}
                 onChange={(testFilters) => setFilters({ filter_test_accounts: testFilters.filter_test_accounts })}
             />
 
+            {showPropertyFilters && (
+                <PropertyFilters
+                    pageKey="session-recordings"
+                    taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties, TaxonomicFilterGroupType.Cohorts]}
+                    propertyFilters={filters.properties}
+                    onChange={(properties) => {
+                        setFilters({ properties })
+                    }}
+                />
+            )}
+
             <LemonLabel>Time and duration</LemonLabel>
             <div className="flex flex-wrap gap-2">
                 <DateFilter
@@ -68,57 +113,6 @@ export const AdvancedSessionRecordingsFilters = ({
                 />
             </div>
 
-            <LemonLabel info="Show recordings where all of the events or actions listed below happen.">
-                Filter by events and actions
-            </LemonLabel>
-
-            <ActionFilter
-                filters={localFilters}
-                setFilters={(payload) => {
-                    setLocalFilters(payload)
-                }}
-                typeKey="session-recordings"
-                mathAvailability={MathAvailability.None}
-                buttonCopy="Filter for events or actions"
-                hideRename
-                hideDuplicate
-                showNestedArrow={false}
-                actionsTaxonomicGroupTypes={[TaxonomicFilterGroupType.Actions, TaxonomicFilterGroupType.Events]}
-                propertiesTaxonomicGroupTypes={[
-                    TaxonomicFilterGroupType.EventProperties,
-                    TaxonomicFilterGroupType.EventFeatureFlags,
-                    TaxonomicFilterGroupType.Elements,
-                    TaxonomicFilterGroupType.HogQLExpression,
-                    ...groupsTaxonomicTypes,
-                ]}
-                propertyFiltersPopover
-                addFilterDefaultOptions={{
-                    id: '$pageview',
-                    name: '$pageview',
-                    type: EntityTypes.EVENTS,
-                }}
-            />
-
-            {showPropertyFilters && (
-                <>
-                    <LemonLabel info="Show recordings by persons who match the set criteria">
-                        Filter by persons and cohorts
-                    </LemonLabel>
-
-                    <PropertyFilters
-                        pageKey="session-recordings"
-                        taxonomicGroupTypes={[
-                            TaxonomicFilterGroupType.PersonProperties,
-                            TaxonomicFilterGroupType.Cohorts,
-                        ]}
-                        propertyFilters={filters.properties}
-                        onChange={(properties) => {
-                            setFilters({ properties })
-                        }}
-                    />
-                </>
-            )}
-
             <ConsoleFilters filters={filters} setFilters={setFilters} />
         </div>
     )
@@ -146,7 +140,7 @@ function ConsoleFilters({
 
     return (
         <>
-            <LemonLabel>Filter by console logs</LemonLabel>
+            <LemonLabel>Console logs</LemonLabel>
             <div className="flex flex-row space-x-2">
                 <LemonInput
                     className="grow"

diff --git a/frontend/src/scenes/session-recordings/filters/SessionRecordingsFilters.tsx b/frontend/src/scenes/session-recordings/filters/SessionRecordingsFilters.tsx
@@ -1,4 +1,4 @@
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, LemonSegmentedButton } from '@posthog/lemon-ui'
 import equal from 'fast-deep-equal'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
 import { useEffect, useState } from 'react'
@@ -70,16 +70,36 @@ export function SessionRecordingsFilters({
     }, [filters])
 
     return (
-        <div className="relative flex flex-col gap-2 p-3">
-            {onReset && (
-                <span className="absolute top-2 right-2">
-                    <LemonButton size="small" onClick={onReset}>
-                        Reset
-                    </LemonButton>
-                </span>
-            )}
+        <div className="relative flex flex-col gap-6 p-3">
+            <div className="space-y-1">
+                {onReset && (
+                    <span className="absolute top-2 right-2">
+                        <LemonButton size="small" onClick={onReset}>
+                            Reset
+                        </LemonButton>
+                    </span>
+                )}
+
+                <LemonLabel info="Show recordings where all of below filters match.">Find sessions by:</LemonLabel>
 
-            <LemonLabel info="Show recordings where all of below filters match.">Find sessions by:</LemonLabel>
+                <LemonSegmentedButton
+                    size="small"
+                    value={showAdvancedFilters ? 'advanced' : 'simple'}
+                    options={[
+                        {
+                            value: 'simple',
+                            label: 'Simple filters',
+                            disabledReason: hasAdvancedFilters
+                                ? 'You are only allowed person filters and a single pageview event (filtered by current url) to switch back to simple filters'
+                                : undefined,
+                        },
+                        { value: 'advanced', label: 'Advanced filters' },
+                    ]}
+                    onChange={(newValue) => setShowAdvancedFilters(newValue === 'advanced')}
+                    data-attr={`session-recordings-show-${showAdvancedFilters ? 'simple' : 'advanced'}-filters`}
+                    fullWidth
+                />
+            </div>
 
             {showAdvancedFilters ? (
                 <AdvancedSessionRecordingsFilters
@@ -97,21 +117,6 @@ export function SessionRecordingsFilters({
                     setLocalFilters={setLocalFilters}
                 />
             )}
-
-            <div>
-                <LemonButton
-                    size="small"
-                    onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
-                    disabledReason={
-                        hasAdvancedFilters
-                            ? 'You are only allowed person filters and a single pageview event (filtered by current url) to switch back to simple filters'
-                            : undefined
-                    }
-                    data-attr={`session-recordings-show-${showAdvancedFilters ? 'simple' : 'advanced'}-filters`}
-                >
-                    Show {showAdvancedFilters ? 'simple filters' : 'advanced filters'}
-                </LemonButton>
-            </div>
         </div>
     )
 }