diff --git a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx index 2ad63cdd1488e..c66ba5e5cd904 100644 --- a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx +++ b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx @@ -5,7 +5,9 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' import { EditorFilterProps } from '~/types' export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element { - const { breakdownFilter, display, isTrends } = useValues(insightVizDataLogic(insightProps)) + const { breakdownFilter, display, isTrends, isSingleSeries, isDataWarehouseSeries } = useValues( + insightVizDataLogic(insightProps) + ) const { updateBreakdownFilter, updateDisplay } = useActions(insightVizDataLogic(insightProps)) return ( @@ -16,6 +18,11 @@ export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element { isTrends={isTrends} updateBreakdownFilter={updateBreakdownFilter} updateDisplay={updateDisplay} + disabledReason={ + !isSingleSeries && isDataWarehouseSeries + ? 'Breakdowns are not allowed for multiple series types' + : undefined + } /> ) } diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx index b924ba3232cc9..ffae45880111d 100644 --- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx +++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx @@ -47,7 +47,9 @@ export function PropertyGroupFilters({ } = useActions(propertyGroupFilterLogic(logicProps)) const showHeader = propertyGroupFilter.type && propertyGroupFilter.values.length > 1 - const disabledReason = isDataWarehouseSeries ? 'Cannot add filter groups to data warehouse series' : undefined + const disabledReason = isDataWarehouseSeries + ? 'Cannot add filter groups to data warehouse series. Use individual series filters' + : undefined return (
{propertyGroupFilter.values && ( diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx index 90c3694e89fd8..7b1ddbc90c3a1 100644 --- a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx +++ b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownButton.tsx @@ -7,7 +7,11 @@ import { useState } from 'react' import { taxonomicBreakdownFilterLogic } from './taxonomicBreakdownFilterLogic' import { TaxonomicBreakdownPopover } from './TaxonomicBreakdownPopover' -export function TaxonomicBreakdownButton(): JSX.Element { +interface TaxonomicBreakdownButtonProps { + disabledReason?: string +} + +export function TaxonomicBreakdownButton({ disabledReason }: TaxonomicBreakdownButtonProps): JSX.Element { const [open, setOpen] = useState(false) const { taxonomicBreakdownType } = useValues(taxonomicBreakdownFilterLogic) @@ -20,6 +24,7 @@ export function TaxonomicBreakdownButton(): JSX.Element { data-attr="add-breakdown-button" onClick={() => setOpen(!open)} sideIcon={null} + disabledReason={disabledReason} > {taxonomicBreakdownType === TaxonomicFilterGroupType.CohortsWithAllUsers ? 'Add cohort' diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter.tsx b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter.tsx index b9f04e806f15b..a6b1b69744db6 100644 --- a/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter.tsx +++ b/frontend/src/scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter.tsx @@ -12,6 +12,7 @@ export interface TaxonomicBreakdownFilterProps { breakdownFilter?: BreakdownFilter | null display?: ChartDisplayType | null isTrends: boolean + disabledReason?: string updateBreakdownFilter: (breakdownFilter: BreakdownFilter) => void updateDisplay: (display: ChartDisplayType | undefined) => void } @@ -21,6 +22,7 @@ export function TaxonomicBreakdownFilter({ breakdownFilter, display, isTrends, + disabledReason, updateBreakdownFilter, updateDisplay, }: TaxonomicBreakdownFilterProps): JSX.Element { @@ -47,7 +49,7 @@ export function TaxonomicBreakdownFilter({
{tags} - {!hasNonCohortBreakdown && } + {!hasNonCohortBreakdown && }
)