feat: Create Notebook from dashboard (#17968)

frontend/src/models/notebooksModel.ts

@@ -1,7 +1,7 @@
-import { actions, BuiltLogic, connect, kea, path, reducers } from 'kea'
+import { actions, BuiltLogic, connect, kea, listeners, path, reducers } from 'kea'
 
 import { loaders } from 'kea-loaders'
-import { NotebookListItemType, NotebookTarget, NotebookType } from '~/types'
+import { DashboardType, NotebookListItemType, NotebookNodeType, NotebookTarget, NotebookType } from '~/types'
 
 import api from 'lib/api'
 import posthog from 'posthog-js'
@@ -16,6 +16,8 @@ import { notebookLogicType } from 'scenes/notebooks/Notebook/notebookLogicType'
 import { urls } from 'scenes/urls'
 import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
 import { router } from 'kea-router'
+import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
+import { InsightVizNode, Node, NodeKind } from '~/queries/schema'
 
 export const SCRATCHPAD_NOTEBOOK: NotebookListItemType = {
     short_id: 'scratchpad',
@@ -74,6 +76,7 @@ export const notebooksModel = kea<notebooksModelType>([
         receiveNotebookUpdate: (notebook: NotebookListItemType) => ({ notebook }),
         loadNotebooks: true,
         deleteNotebook: (shortId: NotebookListItemType['short_id'], title?: string) => ({ shortId, title }),
+        createNotebookFromDashboard: (dashboard: DashboardType) => ({ dashboard }),
     }),
     connect({
         values: [teamLogic, ['currentTeamId']],
@@ -144,4 +147,49 @@ export const notebooksModel = kea<notebooksModelType>([
             },
         ],
     })),
+
+    listeners(({ actions }) => ({
+        createNotebookFromDashboard: async ({ dashboard }) => {
+            const queries = dashboard.tiles.reduce((acc, tile) => {
+                if (!tile.insight) {
+                    return acc
+                }
+                if (tile.insight.query) {
+                    return [
+                        ...acc,
+                        {
+                            title: tile.insight.name,
+                            query: tile.insight.query,
+                        },
+                    ]
+                }
+                const node = filtersToQueryNode(tile.insight.filters)
+
+                if (!node) {
+                    return acc
+                }
+
+                return [
+                    ...acc,
+                    {
+                        title: tile.insight.name,
+                        query: {
+                            kind: NodeKind.InsightVizNode,
+                            source: node,
+                        },
+                    },
+                ]
+            }, [] as { title: string; query: InsightVizNode | Node }[])
+
+            const resources = queries.map((x) => ({
+                type: NotebookNodeType.Query,
+                attrs: {
+                    title: x.title,
+                    query: x.query,
+                },
+            }))
+
+            await actions.createNotebook(dashboard.name + ' (copied)', NotebookTarget.Auto, resources)
+        },
+    })),
 ])

frontend/src/scenes/dashboard/DashboardHeader.tsx

@@ -31,6 +31,8 @@ import { duplicateDashboardLogic } from 'scenes/dashboard/duplicateDashboardLogi
 import { tagsModel } from '~/models/tagsModel'
 import { DashboardTemplateEditor } from './DashboardTemplateEditor'
 import { dashboardTemplateEditorLogic } from './dashboardTemplateEditorLogic'
+import { notebooksModel } from '~/models/notebooksModel'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 
 export const DASHBOARD_CANNOT_EDIT_MESSAGE =
     "You don't have edit permissions for this dashboard. Ask a dashboard collaborator with edit access to add you."
@@ -50,6 +52,7 @@ export function DashboardHeader(): JSX.Element | null {
     const { setDashboardMode, triggerDashboardUpdate } = useActions(dashboardLogic)
     const { asDashboardTemplate } = useValues(dashboardLogic)
     const { updateDashboard, pinDashboard, unpinDashboard } = useActions(dashboardsModel)
+    const { createNotebookFromDashboard } = useActions(notebooksModel)
 
     const { setDashboardTemplate, openDashboardTemplateEditor } = useActions(dashboardTemplateEditorLogic)
 
@@ -261,6 +264,15 @@ export function DashboardHeader(): JSX.Element | null {
                                             >
                                                 Duplicate dashboard
                                             </LemonButton>
+                                            <FlaggedFeature flag={'notebooks'}>
+                                                <LemonButton
+                                                    onClick={() => createNotebookFromDashboard(dashboard)}
+                                                    status="stealth"
+                                                    fullWidth
+                                                >
+                                                    Create notebook from dashboard
+                                                </LemonButton>
+                                            </FlaggedFeature>
                                             {canEditDashboard && (
                                                 <LemonButton
                                                     onClick={() => {