diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png index 74b40ab40f06b..778ec9f8e032d 100644 Binary files a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png and b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png differ diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png index 485598913a015..edb4cd9e5b175 100644 Binary files a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png and b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png differ diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss index 5ae1f8b55bc58..c8019214081ed 100644 --- 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 index fcba45b559c74..702ecb89753a5 100644 --- 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 index 9768b5a9114da..b6561c9cff1aa 100644 --- 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 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( addFilterDefaultOptions = {}, mathAvailability = MathAvailability.All, buttonCopy = '', + buttonProps = { fullWidth: true }, disabled = false, sortable = false, showSeriesIndicator = false, @@ -214,7 +216,7 @@ export const ActionFilter = React.forwardRef( data-attr="add-action-event-button" icon={} 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 index a6bfb07bba567..449e765af6a93 100644 --- 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 (
+ + Events and actions + + + { + 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' }} + /> + + Persons and cohorts + setFilters({ filter_test_accounts: testFilters.filter_test_accounts })} /> + {showPropertyFilters && ( + { + setFilters({ properties }) + }} + /> + )} + Time and duration
- - Filter by events and actions - - - { - 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 && ( - <> - - Filter by persons and cohorts - - - { - setFilters({ properties }) - }} - /> - - )} -
) @@ -146,7 +140,7 @@ function ConsoleFilters({ return ( <> - Filter by console logs + Console logs
- {onReset && ( - - - Reset - - - )} +
+
+ {onReset && ( + + + Reset + + + )} + + Find sessions by: - Find sessions by: + setShowAdvancedFilters(newValue === 'advanced')} + data-attr={`session-recordings-show-${showAdvancedFilters ? 'simple' : 'advanced'}-filters`} + fullWidth + /> +
{showAdvancedFilters ? ( )} - -
- 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'} - -
) }