From 0907045534facc0389246b5bd301dd0cae3ffe28 Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Wed, 27 Sep 2023 18:17:31 +0200
Subject: [PATCH] Added notice

---
 .../scenes/notebooks/Notebook/Notebook.tsx    | 15 ++-------
 .../notebooks/Notebook/NotebookHistory.tsx    | 33 +++++++++++++++++--
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
index 7d3fde0c8ea1b..924bd487a07ea 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
@@ -16,6 +16,7 @@ import { EditorFocusPosition } from './utils'
 import { NotebookSidebar } from './NotebookSidebar'
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 import { LemonButton } from '@posthog/lemon-ui'
+import { NotebookHistoryWarning } from './NotebookHistory'
 
 export type NotebookProps = {
     shortId: string
@@ -88,19 +89,7 @@ export function Notebook({ shortId, editable = false, initialAutofocus = null }:
                     </LemonBanner>
                 )}
 
-                {editable && showHistory ? (
-                    <LemonBanner type="info" className="my-4">
-                        <span className="flex items-center">
-                            <span className="flex-1">
-                                <b>Hello time traveller!</b> You are viewing an older revision of this Notebook. You can
-                            </span>
-
-                            <LemonButton>Discard</LemonButton>
-
-                            <LemonButton status="danger">Revert to this version</LemonButton>
-                        </span>
-                    </LemonBanner>
-                ) : null}
+                <NotebookHistoryWarning />
                 {notebook.short_id === SCRATCHPAD_NOTEBOOK.short_id ? (
                     <LemonBanner
                         type="info"
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx
index 823809b383216..089c3737899ad 100644
--- a/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx
@@ -2,7 +2,7 @@ import { useActions, useValues } from 'kea'
 import { notebookLogic } from './notebookLogic'
 import { ActivityLog } from 'lib/components/ActivityLog/ActivityLog'
 import { ActivityScope, HumanizedActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
-import { LemonButton, LemonWidget, lemonToast } from '@posthog/lemon-ui'
+import { LemonBanner, LemonButton, LemonWidget, lemonToast } from '@posthog/lemon-ui'
 import { JSONContent } from '@tiptap/core'
 
 export function NotebookHistory(): JSX.Element {
@@ -16,7 +16,7 @@ export function NotebookHistory(): JSX.Element {
             lemonToast.error('Could not revert to this version')
             return
         }
-        setPreviewContent(content as JSONContent, true)
+        setPreviewContent(content as JSONContent)
         // setShowHistory(false)
     }
 
@@ -39,3 +39,32 @@ export function NotebookHistory(): JSX.Element {
         </LemonWidget>
     )
 }
+
+export function NotebookHistoryWarning(): JSX.Element | null {
+    const { previewContent } = useValues(notebookLogic)
+    const { clearPreviewContent } = useActions(notebookLogic)
+
+    if (!previewContent) {
+        return null
+    }
+    return (
+        <LemonBanner type="info" className="my-4">
+            <span className="flex items-center gap-2">
+                <span className="flex-1">
+                    <b>Hello time traveller!</b>
+                    <br /> You are viewing an older revision of this Notebook. You can choose to revert to this version,
+                    or create a copy of it.
+                </span>
+
+                <span className="flex items-center gap-2">
+                    <LemonButton type="secondary" onClick={() => clearPreviewContent()}>
+                        Cancel
+                    </LemonButton>
+
+                    <LemonButton type="primary">Revert to this version</LemonButton>
+                    <LemonButton type="primary">Create a copy</LemonButton>
+                </span>
+            </span>
+        </LemonBanner>
+    )
+}