move query based insight one level out

PostHog · Jul 29, 2024 · eb73f1c · eb73f1c
1 parent 110c9d5
commit eb73f1c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 46 deletions.
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx b/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'
 
@@ -76,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}
@@ -97,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"
@@ -116,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"
@@ -129,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"
@@ -147,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"
@@ -158,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"
@@ -179,7 +178,7 @@ export const InsightCard: Story = (args) => {
             {examples.map((e) => (
                 <InsightCardComponent
                     key={e.id}
-                    insight={e}
+                    insight={getQueryBasedInsightModel(e)}
                     rename={() => {}}
                     duplicate={() => {}}
                     placement="SavedInsightGrid"

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -10,7 +10,6 @@ import { insightLogic } from 'scenes/insights/insightLogic'
 
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-import { getQueryBasedInsightModel } from '~/queries/nodes/InsightViz/utils'
 import { Query } from '~/queries/Query/Query'
 import { QueryContext } from '~/queries/types'
 import {
@@ -20,15 +19,15 @@ import {
     DashboardType,
     InsightColor,
     InsightLogicProps,
-    InsightModel,
+    QueryBasedInsightModel,
 } from '~/types'
 
 import { ResizeHandle1D, ResizeHandle2D } from '../handles'
 import { InsightMeta } from './InsightMeta'
 
 export interface InsightCardProps extends Resizeable, React.HTMLAttributes<HTMLDivElement> {
     /** Insight to display. */
-    insight: InsightModel
+    insight: QueryBasedInsightModel
     /** id of the dashboard the card is on (when the card is being displayed on a dashboard) **/
     dashboardId?: DashboardType['id']
     /** Whether the insight has been called to load. */
@@ -78,7 +77,7 @@ export interface FilterBasedCardContentProps
 
 function InsightCardInternal(
     {
-        insight: legacyInsight,
+        insight,
         dashboardId,
         ribbonColor,
         loadingQueued,
@@ -108,7 +107,6 @@ function InsightCardInternal(
     }: InsightCardProps,
     ref: React.Ref<HTMLDivElement>
 ): JSX.Element {
-    const insight = getQueryBasedInsightModel(legacyInsight)
     const { theme } = useValues(themeLogic)
     const insightLogicProps: InsightLogicProps = {
         dashboardItemId: insight.short_id,

diff --git a/frontend/src/scenes/dashboard/DashboardItems.tsx b/frontend/src/scenes/dashboard/DashboardItems.tsx
@@ -135,11 +135,11 @@ export function DashboardItems(): JSX.Element {
                             removeFromDashboard: () => removeTile(tile),
                         }
 
-                        if (insight && legacyInsight) {
+                        if (insight) {
                             return (
                                 <InsightCard
                                     key={tile.id}
-                                    insight={legacyInsight}
+                                    insight={insight}
                                     stale={stale}
                                     loadingQueued={isRefreshingQueued(insight.short_id)}
                                     loading={isRefreshing(insight.short_id)}

diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -399,7 +399,7 @@ function SavedInsightsGrid(): JSX.Element {
                     return (
                         <InsightCard
                             key={insight.short_id}
-                            insight={{ ...legacyInsight }}
+                            insight={insight}
                             rename={() => renameInsight(insight)}
                             duplicate={() => duplicateInsight(insight)}
                             deleteWithUndo={async () =>