From a352a5b8ffa1adcc2ac5fd0cbad7fff80723500c Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Mon, 18 Sep 2023 11:07:15 +0100
Subject: [PATCH] feat: detach saved insights in notebooks (#17443)

---
 .../scenes/notebooks/Nodes/NodeWrapper.tsx    | 50 +++++++++---------
 .../notebooks/Nodes/NotebookNodeQuery.tsx     | 52 +++++++++++++++++--
 .../scenes/notebooks/Notebook/Notebook.scss   |  5 --
 3 files changed, 73 insertions(+), 34 deletions(-)

diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
index 463d2ed4664d0..6d90866fe208e 100644
--- a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
@@ -156,33 +156,35 @@ export function NodeWrapper<T extends CustomNotebookNodeAttributes>({
                                         <span className="flex-1 cursor-pointer">{title}</span>
                                     </LemonButton>
 
-                                    {parsedHref && <LemonButton size="small" icon={<IconLink />} to={parsedHref} />}
+                                    <div className="flex space-x-1">
+                                        {parsedHref && <LemonButton size="small" icon={<IconLink />} to={parsedHref} />}
 
-                                    {expandable && (
-                                        <LemonButton
-                                            onClick={() => setExpanded(!expanded)}
-                                            size="small"
-                                            icon={expanded ? <IconUnfoldLess /> : <IconUnfoldMore />}
-                                        />
-                                    )}
+                                        {expandable && (
+                                            <LemonButton
+                                                onClick={() => setExpanded(!expanded)}
+                                                size="small"
+                                                icon={expanded ? <IconUnfoldLess /> : <IconUnfoldMore />}
+                                            />
+                                        )}
 
-                                    {widgets.length > 0 ? (
-                                        <LemonButton
-                                            onClick={() => setIsShowingSidebar(!isShowingSidebar)}
-                                            size="small"
-                                            icon={<IconFilter />}
-                                            active={isShowingSidebar && selected}
-                                        />
-                                    ) : null}
+                                        {widgets.length > 0 ? (
+                                            <LemonButton
+                                                onClick={() => setIsShowingSidebar(!isShowingSidebar)}
+                                                size="small"
+                                                icon={<IconFilter />}
+                                                active={isShowingSidebar && selected}
+                                            />
+                                        ) : null}
 
-                                    {isEditable && (
-                                        <LemonButton
-                                            onClick={() => deleteNode()}
-                                            size="small"
-                                            status="danger"
-                                            icon={<IconClose />}
-                                        />
-                                    )}
+                                        {isEditable && (
+                                            <LemonButton
+                                                onClick={() => deleteNode()}
+                                                size="small"
+                                                status="danger"
+                                                icon={<IconClose />}
+                                            />
+                                        )}
+                                    </div>
                                 </div>
                                 <div
                                     ref={contentRef}
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
index 791111be7b225..8cc364293fd49 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -1,17 +1,19 @@
 import { Query } from '~/queries/Query/Query'
 import { DataTableNode, InsightVizNode, NodeKind, QuerySchema } from '~/queries/schema'
 import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
+import { InsightLogicProps, InsightShortId, NotebookNodeType } from '~/types'
 import { useMountedLogic, useValues } from 'kea'
-import { InsightShortId, NotebookNodeType } from '~/types'
 import { useMemo } from 'react'
 import { notebookNodeLogic } from './notebookNodeLogic'
 import { NotebookNodeViewProps, NotebookNodeAttributeProperties } from '../Notebook/utils'
+import { containsHogQLQuery, isHogQLQuery, isNodeWithSource } from '~/queries/utils'
+import { LemonButton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { urls } from 'scenes/urls'
 import api from 'lib/api'
-import { containsHogQLQuery, isHogQLQuery, isNodeWithSource } from '~/queries/utils'
 
 import './NotebookNodeQuery.scss'
+import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 
 const DEFAULT_QUERY: QuerySchema = {
     kind: NodeKind.DataTableNode,
@@ -30,7 +32,7 @@ const Component = (props: NotebookNodeViewProps<NotebookNodeQueryAttributes>): J
     const { expanded } = useValues(nodeLogic)
 
     const modifiedQuery = useMemo(() => {
-        const modifiedQuery = { ...query }
+        const modifiedQuery = { ...query, full: false }
 
         if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             // We don't want to show the insights button for now
@@ -75,7 +77,7 @@ export const Settings = ({
     const { query } = attributes
 
     const modifiedQuery = useMemo(() => {
-        const modifiedQuery = { ...query }
+        const modifiedQuery = { ...query, full: false }
 
         if (NodeKind.DataTableNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             // We don't want to show the insights button for now
@@ -95,7 +97,47 @@ export const Settings = ({
         return modifiedQuery
     }, [query])
 
-    return (
+    const detachSavedInsight = (): void => {
+        if (attributes.query.kind === NodeKind.SavedInsightNode) {
+            const insightProps: InsightLogicProps = { dashboardItemId: attributes.query.shortId }
+            const dataLogic = insightDataLogic.findMounted(insightProps)
+
+            if (dataLogic) {
+                updateAttributes({ query: dataLogic.values.query as QuerySchema })
+            }
+        }
+    }
+
+    return attributes.query.kind === NodeKind.SavedInsightNode ? (
+        <div className="p-3 space-y-2">
+            <div className="text-lg font-semibold">Insight created outside of this notebook</div>
+            <div>
+                Changes made to the original insight will be reflected in the notebook. Or you can detach from the
+                insight to make changes independently in the notebook.
+            </div>
+
+            <div className="space-y-2">
+                <LemonButton
+                    center={true}
+                    type="secondary"
+                    fullWidth
+                    className="flex flex-1"
+                    to={urls.insightEdit(attributes.query.shortId)}
+                >
+                    Edit the insight
+                </LemonButton>
+                <LemonButton
+                    center={true}
+                    fullWidth
+                    type="secondary"
+                    className="flex flex-1"
+                    onClick={detachSavedInsight}
+                >
+                    Detach from insight
+                </LemonButton>
+            </div>
+        </div>
+    ) : (
         <div className="p-3">
             <Query
                 query={modifiedQuery}
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
index f272cacab53be..059b06a20d10a 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -125,7 +125,6 @@
     .NotebookSidebar {
         position: relative;
         width: 0px;
-        margin-top: 3.6rem; // Account for title
         transition: width var(--notebook-popover-transition-properties);
 
         .NotebookSidebar__content {
@@ -147,10 +146,6 @@
     }
 
     .NotebookNodeSettings__widgets {
-        position: sticky;
-        align-self: flex-start;
-        top: 65px;
-
         &__content {
             max-height: calc(100vh - 220px);
             overflow: auto;