refactor(insights): remove filter based card content (PostHog#24050)

cypress/e2e/insights-date-picker.ts → cypress/e2e/insights-date-picker.cy.ts

@@ -1,8 +1,11 @@
+import 'cypress-network-idle'
+
 import { urls } from 'scenes/urls'
 
 describe('insights date picker', () => {
     beforeEach(() => {
         cy.visit(urls.insightNew())
+        cy.waitForNetworkIdle(300)
     })
 
     it('Can set the date filter and show the right grouping interval', () => {

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -2,7 +2,6 @@ import './ExportedInsight.scss'
 
 import clsx from 'clsx'
 import { BindLogic } from 'kea'
-import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
 import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
 import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
 import {
@@ -48,7 +47,7 @@ export function ExportedInsight({
 
     const insightLogicProps: InsightLogicProps = {
         dashboardItemId: insight.short_id,
-        cachedInsight: legacyInsight, // TODO: use query based insight here
+        cachedInsight: insight,
         doNotLoad: true,
     }
 
@@ -97,11 +96,13 @@ export function ExportedInsight({
                         'ExportedInsight__content--with-watermark': showWatermark,
                     })}
                 >
-                    {legacyInsight.query ? (
-                        <Query query={legacyInsight.query} cachedResults={legacyInsight} readOnly />
-                    ) : (
-                        <FilterBasedCardContent insight={legacyInsight} insightProps={insightLogicProps} />
-                    )}
+                    <Query
+                        query={insight.query}
+                        cachedResults={insight}
+                        readOnly
+                        context={{ insightProps: insightLogicProps }}
+                        embedded
+                    />
                     {showLegend && (
                         <div className="p-4">
                             <InsightLegend horizontal readOnly />

frontend/src/exporter/Exporter.stories.tsx

@@ -42,6 +42,7 @@ const Template: StoryFn<typeof Exporter> = (props) => {
 
 export const TrendsLineInsight: Story = Template.bind({})
 TrendsLineInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLine.json') }
+TrendsLineInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsLineInsightLegend: Story = Template.bind({})
 TrendsLineInsightLegend.args = {
@@ -67,38 +68,47 @@ TrendsLineMultiInsight.args = {
 TrendsLineMultiInsight.parameters = {
     mockDate: '2023-07-10',
 }
+TrendsLineMultiInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsLineBreakdownInsight: Story = Template.bind({})
 TrendsLineBreakdownInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLineBreakdown.json'),
 }
+TrendsLineBreakdownInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsBarInsight: Story = Template.bind({})
 TrendsBarInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsBar.json') }
+TrendsBarInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsBarBreakdownInsight: Story = Template.bind({})
 TrendsBarBreakdownInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsBarBreakdown.json'),
 }
+TrendsBarBreakdownInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsValueInsight: Story = Template.bind({})
 TrendsValueInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsValue.json') }
+TrendsValueInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsValueBreakdownInsight: Story = Template.bind({})
 TrendsValueBreakdownInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsValueBreakdown.json'),
 }
+TrendsValueBreakdownInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsAreaInsight: Story = Template.bind({})
 TrendsAreaInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsArea.json') }
+TrendsAreaInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsAreaBreakdownInsight: Story = Template.bind({})
 TrendsAreaBreakdownInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsAreaBreakdown.json'),
 }
+TrendsAreaBreakdownInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsNumberInsight: Story = Template.bind({})
 TrendsNumberInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsNumber.json') }
+TrendsNumberInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const TrendsTableInsight: Story = Template.bind({})
 TrendsTableInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsTable.json') }
@@ -183,9 +193,11 @@ RetentionBreakdownInsight.args = {
 
 export const LifecycleInsight: Story = Template.bind({})
 LifecycleInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/lifecycle.json') }
+LifecycleInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const StickinessInsight: Story = Template.bind({})
 StickinessInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/stickiness.json') }
+StickinessInsight.tags = ['test-skip'] // doesn't produce a helpful reference image, as canvas can't be captured
 
 export const UserPathsInsight: Story = Template.bind({})
 UserPathsInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/userPaths.json') }

frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, Story } from '@storybook/react'
 import { useState } from 'react'
 
 import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
+import { getQueryBasedInsightModel } from '~/queries/nodes/InsightViz/utils'
 import { NodeKind } from '~/queries/schema'
 import { ChartDisplayType, InsightColor, InsightModel, InsightShortId, TrendsFilterType } from '~/types'
 
@@ -12,6 +13,7 @@ import EXAMPLE_LIFECYCLE from '../../../../mocks/fixtures/api/projects/team_id/i
 import EXAMPLE_RETENTION from '../../../../mocks/fixtures/api/projects/team_id/insights/retention.json'
 import EXAMPLE_STICKINESS from '../../../../mocks/fixtures/api/projects/team_id/insights/stickiness.json'
 import EXAMPLE_TRENDS from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsLine.json'
+import EXAMPLE_TRENDS_BREAKDOWN_MANY from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsLineBreakdownMany.json'
 import EXAMPLE_TRENDS_MULTI from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsLineMulti.json'
 import EXAMPLE_TRENDS_PIE from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsPie.json'
 import EXAMPLE_TRENDS_TABLE from '../../../../mocks/fixtures/api/projects/team_id/insights/trendsTable.json'
@@ -23,6 +25,7 @@ import { InsightCard as InsightCardComponent } from './index'
 const examples = [
     EXAMPLE_TRENDS,
     EXAMPLE_TRENDS_MULTI,
+    EXAMPLE_TRENDS_BREAKDOWN_MANY,
     EXAMPLE_TRENDS_HORIZONTAL_BAR,
     EXAMPLE_TRENDS_TABLE,
     EXAMPLE_TRENDS_PIE,
@@ -74,13 +77,11 @@ export const InsightCard: Story = (args) => {
         <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(2, 1fr)', minWidth: '50rem' }}>
             {!wasItemRemoved && (
                 <InsightCardComponent
-                    insight={
-                        {
-                            ...EXAMPLE_TRENDS,
-                            name: args.insightName,
-                            description: args.insightDescription,
-                        } as unknown as InsightModel
-                    }
+                    insight={getQueryBasedInsightModel({
+                        ...EXAMPLE_TRENDS,
+                        name: args.insightName,
+                        description: args.insightDescription,
+                    } as unknown as InsightModel)}
                     ribbonColor={insightColor}
                     loading={args.loading}
                     apiErrored={args.apiErrored}
@@ -95,15 +96,13 @@ export const InsightCard: Story = (args) => {
                 />
             )}
             <InsightCardComponent
-                insight={
-                    {
-                        ...EXAMPLE_TRENDS,
-                        name: 'Wow, this name is really super duper ginormously off the charts long! How do we even manage to fit it in an insight card without it breaking?!',
-                        description:
-                            'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.',
-                        tags: ['every', 'green', 'bus', 'drives', 'fast', 'face'],
-                    } as unknown as InsightModel
-                }
+                insight={getQueryBasedInsightModel({
+                    ...EXAMPLE_TRENDS,
+                    name: 'Wow, this name is really super duper ginormously off the charts long! How do we even manage to fit it in an insight card without it breaking?!',
+                    description:
+                        'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.',
+                    tags: ['every', 'green', 'bus', 'drives', 'fast', 'face'],
+                } as unknown as InsightModel)}
                 rename={() => {}}
                 duplicate={() => {}}
                 placement="SavedInsightGrid"
@@ -114,9 +113,12 @@ export const InsightCard: Story = (args) => {
                 showResizeHandles={args.resizable}
             />
             <InsightCardComponent
-                insight={
-                    { ...EXAMPLE_TRENDS, name: '', description: '', last_modified_by: null } as unknown as InsightModel
-                }
+                insight={getQueryBasedInsightModel({
+                    ...EXAMPLE_TRENDS,
+                    name: '',
+                    description: '',
+                    last_modified_by: null,
+                } as unknown as InsightModel)}
                 rename={() => {}}
                 duplicate={() => {}}
                 placement="SavedInsightGrid"
@@ -127,14 +129,12 @@ export const InsightCard: Story = (args) => {
                 showResizeHandles={args.resizable}
             />
             <InsightCardComponent
-                insight={
-                    {
-                        ...EXAMPLE_FUNNEL,
-                        short_id: 'funnel_empty' as InsightShortId,
-                        filters: { ...EXAMPLE_FUNNEL.filters, events: EXAMPLE_FUNNEL.filters.events?.slice(0, 1) },
-                        name: 'What a pitiful funnel',
-                    } as unknown as InsightModel
-                }
+                insight={getQueryBasedInsightModel({
+                    ...EXAMPLE_FUNNEL,
+                    short_id: 'funnel_empty' as InsightShortId,
+                    filters: { ...EXAMPLE_FUNNEL.filters, events: EXAMPLE_FUNNEL.filters.events?.slice(0, 1) },
+                    name: 'What a pitiful funnel',
+                } as unknown as InsightModel)}
                 rename={() => {}}
                 duplicate={() => {}}
                 placement="SavedInsightGrid"
@@ -145,7 +145,10 @@ export const InsightCard: Story = (args) => {
                 showResizeHandles={args.resizable}
             />
             <InsightCardComponent
-                insight={{ ...EXAMPLE_FUNNEL, name: 'What a plentiful funnel' } as unknown as InsightModel}
+                insight={getQueryBasedInsightModel({
+                    ...EXAMPLE_FUNNEL,
+                    name: 'What a plentiful funnel',
+                } as unknown as InsightModel)}
                 rename={() => {}}
                 duplicate={() => {}}
                 placement="SavedInsightGrid"
@@ -156,15 +159,13 @@ export const InsightCard: Story = (args) => {
                 showResizeHandles={args.resizable}
             />
             <InsightCardComponent
-                insight={
-                    {
-                        ...EXAMPLE_TRENDS,
-                        filters: {
-                            ...EXAMPLE_TRENDS.filters,
-                            display: 'totally_wrong_display_type' as ChartDisplayType,
-                        } as TrendsFilterType,
-                    } as unknown as InsightModel
-                }
+                insight={getQueryBasedInsightModel({
+                    ...EXAMPLE_TRENDS,
+                    filters: {
+                        ...EXAMPLE_TRENDS.filters,
+                        display: 'totally_wrong_display_type' as ChartDisplayType,
+                    } as TrendsFilterType,
+                } as unknown as InsightModel)}
                 rename={() => {}}
                 duplicate={() => {}}
                 placement="SavedInsightGrid"
@@ -177,7 +178,7 @@ export const InsightCard: Story = (args) => {
             {examples.map((e) => (
                 <InsightCardComponent
                     key={e.id}
-                    insight={e}
+                    insight={getQueryBasedInsightModel(e)}
                     rename={() => {}}
                     duplicate={() => {}}
                     placement="SavedInsightGrid"
@@ -206,12 +207,12 @@ export const QueryInsightCard: Story = (args) => {
                     kind: NodeKind.InsightVizNode,
                     source: filtersToQueryNode(insight.filters),
                 }
+                const { filters: _, ...baseInsight } = insight
                 return (
                     <InsightCardComponent
                         key={insight.id}
                         insight={{
-                            ...insight,
-                            filters: {},
+                            ...baseInsight,
                             query,
                         }}
                         rename={() => {}}