From ba4f1afb90f7a03af41f27234194779e51dbcd2d Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Mon, 23 Sep 2024 11:45:09 +0100 Subject: [PATCH] feat(insights): Enable person modals on dashboard (#24677) Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Michael Matloka --- .../ExportedInsight/ExportedInsight.tsx | 1 + .../Cards/InsightCard/InsightCard.tsx | 1 + frontend/src/queries/Query/Query.tsx | 5 +- .../queries/nodes/InsightViz/InsightViz.tsx | 3 ++ .../nodes/InsightViz/InsightVizDisplay.tsx | 32 ++++++++++-- .../scenes/funnels/funnelPersonsModalLogic.ts | 18 ++----- .../scenes/retention/RetentionContainer.tsx | 9 ++-- .../src/scenes/retention/RetentionTable.tsx | 4 +- frontend/src/scenes/trends/Trends.tsx | 50 ++++++++++++++++--- 9 files changed, 91 insertions(+), 32 deletions(-) diff --git a/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx b/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx index dc0b5ec4adfd4..8e37d85ccee66 100644 --- a/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx +++ b/frontend/src/exporter/ExportedInsight/ExportedInsight.tsx @@ -102,6 +102,7 @@ export function ExportedInsight({ readOnly context={{ insightProps: insightLogicProps }} embedded + inSharedMode /> {showLegend && (
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx index f4f000f73536e..31f9243d986f8 100644 --- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx +++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx @@ -156,6 +156,7 @@ function InsightCardInternal( }} readOnly embedded + inSharedMode={placement === DashboardPlacement.Public} />
diff --git a/frontend/src/queries/Query/Query.tsx b/frontend/src/queries/Query/Query.tsx index 2bc97e21e2d7f..9a004a846569c 100644 --- a/frontend/src/queries/Query/Query.tsx +++ b/frontend/src/queries/Query/Query.tsx @@ -46,12 +46,14 @@ export interface QueryProps { readOnly?: boolean /** Reduce UI elements to only show data */ embedded?: boolean + /** Disables modals and other things */ + inSharedMode?: boolean /** Dashboard filters to override the ones in the query */ filtersOverride?: DashboardFilter | null } export function Query(props: QueryProps): JSX.Element | null { - const { query: propsQuery, setQuery: propsSetQuery, readOnly, embedded, filtersOverride } = props + const { query: propsQuery, setQuery: propsSetQuery, readOnly, embedded, filtersOverride, inSharedMode } = props const [localQuery, localSetQuery] = useState(propsQuery) useEffect(() => { @@ -113,6 +115,7 @@ export function Query(props: QueryProps): JSX.Element | null readOnly={readOnly} uniqueKey={uniqueKey} embedded={embedded} + inSharedMode={inSharedMode} filtersOverride={filtersOverride} /> ) diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx index 04d497891bc60..aa47a108cd4c4 100644 --- a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx +++ b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx @@ -36,6 +36,7 @@ type InsightVizProps = { context?: QueryContext readOnly?: boolean embedded?: boolean + inSharedMode?: boolean filtersOverride?: DashboardFilter | null } @@ -48,6 +49,7 @@ export function InsightViz({ context, readOnly, embedded, + inSharedMode, filtersOverride, }: InsightVizProps): JSX.Element { const [key] = useState(() => `InsightViz.${uniqueKey || uniqueNode++}`) @@ -101,6 +103,7 @@ export function InsightViz({ disableLastComputationRefresh={disableLastComputationRefresh} showingResults={showingResults} embedded={isEmbedded} + inSharedMode={inSharedMode} /> ) diff --git a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx index cd70dbbf36d78..69a30e9e727f8 100644 --- a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx +++ b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx @@ -43,6 +43,7 @@ export function InsightVizDisplay({ insightMode, context, embedded, + inSharedMode, }: { disableHeader?: boolean disableTable?: boolean @@ -53,6 +54,7 @@ export function InsightVizDisplay({ insightMode?: ItemMode context?: QueryContext embedded: boolean + inSharedMode?: boolean }): JSX.Element { const { insightProps, canEditInsight } = useValues(insightLogic) @@ -115,19 +117,41 @@ export function InsightVizDisplay({ function renderActiveView(): JSX.Element | null { switch (activeView) { case InsightType.TRENDS: - return + return ( + + ) case InsightType.STICKINESS: - return + return ( + + ) case InsightType.LIFECYCLE: - return + return ( + + ) case InsightType.FUNNELS: - return + return case InsightType.RETENTION: return ( ) case InsightType.PATHS: diff --git a/frontend/src/scenes/funnels/funnelPersonsModalLogic.ts b/frontend/src/scenes/funnels/funnelPersonsModalLogic.ts index 8393cda75732e..a8234d7f03065 100644 --- a/frontend/src/scenes/funnels/funnelPersonsModalLogic.ts +++ b/frontend/src/scenes/funnels/funnelPersonsModalLogic.ts @@ -78,19 +78,15 @@ export const funnelPersonsModalLogic = kea([ selectors({ canOpenPersonModal: [ - (s) => [s.funnelsFilter, s.isInDashboardContext], - (funnelsFilter, isInDashboardContext): boolean => { - return !isInDashboardContext && !funnelsFilter?.funnelAggregateByHogQL + (s) => [s.funnelsFilter], + (funnelsFilter): boolean => { + return !funnelsFilter?.funnelAggregateByHogQL }, ], }), listeners(({ values }) => ({ openPersonsModalForStep: ({ step, stepIndex, converted }) => { - if (values.isInDashboardContext) { - return - } - // Note - when in a legend the step.order is always 0 so we use stepIndex instead const stepNo = typeof stepIndex === 'number' ? stepIndex + 1 : step.order + 1 const title = funnelTitle({ @@ -111,10 +107,6 @@ export const funnelPersonsModalLogic = kea([ openPersonsModal({ title, query, additionalSelect: { matched_recordings: 'matched_recordings' } }) }, openPersonsModalForSeries: ({ step, series, converted }) => { - if (values.isInDashboardContext) { - return - } - const stepNo = step.order + 1 const breakdownValues = getBreakdownStepValues(series, series.order) const title = funnelTitle({ @@ -137,10 +129,6 @@ export const funnelPersonsModalLogic = kea([ openPersonsModal({ title, query, additionalSelect: { matched_recordings: 'matched_recordings' } }) }, openCorrelationPersonsModal: ({ correlation, success }) => { - if (values.isInDashboardContext) { - return - } - if (correlation.result_type === FunnelCorrelationResultsType.Properties) { const { breakdown, breakdown_value } = parseBreakdownValue(correlation.event.event) const title = funnelTitle({ diff --git a/frontend/src/scenes/retention/RetentionContainer.tsx b/frontend/src/scenes/retention/RetentionContainer.tsx index 15207bdb39a63..073b41d102335 100644 --- a/frontend/src/scenes/retention/RetentionContainer.tsx +++ b/frontend/src/scenes/retention/RetentionContainer.tsx @@ -22,7 +22,10 @@ export function RetentionContainer({ return (
{hideLineGraph ? ( - + <> + + {!inSharedMode ? : null} + ) : ( <>
@@ -30,9 +33,9 @@ export function RetentionContainer({
- +
- + {!inSharedMode ? : null} )}
diff --git a/frontend/src/scenes/retention/RetentionTable.tsx b/frontend/src/scenes/retention/RetentionTable.tsx index 7fb6d4a0c968f..4d1aa0b1fb509 100644 --- a/frontend/src/scenes/retention/RetentionTable.tsx +++ b/frontend/src/scenes/retention/RetentionTable.tsx @@ -12,7 +12,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic' import { retentionModalLogic } from './retentionModalLogic' import { retentionTableLogic } from './retentionTableLogic' -export function RetentionTable({ inCardView = false }: { inCardView?: boolean }): JSX.Element | null { +export function RetentionTable({ inSharedMode = false }: { inSharedMode?: boolean }): JSX.Element | null { const { insightProps } = useValues(insightLogic) const { tableHeaders, tableRows, isLatestPeriod, hideSizeColumn, retentionVizOptions } = useValues( retentionTableLogic(insightProps) @@ -71,7 +71,7 @@ export function RetentionTable({ inCardView = false }: { inCardView?: boolean }) { - if (!inCardView) { + if (!inSharedMode) { openModal(rowIndex) } }} diff --git a/frontend/src/scenes/trends/Trends.tsx b/frontend/src/scenes/trends/Trends.tsx index 517f71b86e0c9..fecffd720624d 100644 --- a/frontend/src/scenes/trends/Trends.tsx +++ b/frontend/src/scenes/trends/Trends.tsx @@ -16,12 +16,13 @@ interface Props { view: InsightType context?: QueryContext embedded?: boolean + inSharedMode?: boolean } -export function TrendInsight({ view, context, embedded }: Props): JSX.Element { +export function TrendInsight({ view, context, embedded, inSharedMode }: Props): JSX.Element { const { insightMode } = useValues(insightSceneLogic) const { insightProps, showPersonsModal: insightLogicShowPersonsModal } = useValues(insightLogic) - const showPersonsModal = insightLogicShowPersonsModal && !embedded + const showPersonsModal = insightLogicShowPersonsModal && !inSharedMode const { display, series, breakdownFilter, hasBreakdownMore, breakdownValuesLoading } = useValues( trendsDataLogic(insightProps) @@ -36,10 +37,24 @@ export function TrendInsight({ view, context, embedded }: Props): JSX.Element { display === ChartDisplayType.ActionsAreaGraph || display === ChartDisplayType.ActionsBar ) { - return + return ( + + ) } if (display === ChartDisplayType.BoldNumber) { - return + return ( + + ) } if (display === ChartDisplayType.ActionsTable) { const ActionsTable = InsightsTable @@ -53,13 +68,34 @@ export function TrendInsight({ view, context, embedded }: Props): JSX.Element { ) } if (display === ChartDisplayType.ActionsPie) { - return + return ( + + ) } if (display === ChartDisplayType.ActionsBarValue) { - return + return ( + + ) } if (display === ChartDisplayType.WorldMap) { - return + return ( + + ) } }