From eb73f1cab5e5d78797b6a46983d41d09d0ae7c25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Mon, 29 Jul 2024 18:31:15 +0200
Subject: [PATCH] move query based insight one level out

---
 .../Cards/InsightCard/InsightCard.stories.tsx | 75 +++++++++----------
 .../Cards/InsightCard/InsightCard.tsx         |  8 +-
 .../src/scenes/dashboard/DashboardItems.tsx   |  4 +-
 .../scenes/saved-insights/SavedInsights.tsx   |  2 +-
 4 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx
index f392abeb5c698..1361a7acb0155 100644
--- 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
index ec07cc5c127a5..98a0d9db71bba 100644
--- 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,7 +19,7 @@ import {
     DashboardType,
     InsightColor,
     InsightLogicProps,
-    InsightModel,
+    QueryBasedInsightModel,
 } from '~/types'
 
 import { ResizeHandle1D, ResizeHandle2D } from '../handles'
@@ -28,7 +27,7 @@ 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
index 7ff189ecb5b75..4d74b142e26fa 100644
--- 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
index 7f6a0a26fd1a0..f3027c5eb6b5b 100644
--- 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 () =>