feat: Notebook feedback changes (#17952)

frontend/src/scenes/notebooks/Notebook/Notebook.tsx

@@ -79,7 +79,7 @@ export function Notebook({ shortId, editable = false, initialAutofocus = 'start'
                         className="my-4"
                         action={{
                             onClick: duplicateNotebook,
-                            children: 'Create notebook',
+                            children: 'Create copy',
                         }}
                     >
                         <b>This is a template.</b> You can create a copy of it to edit and use as your own.

frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx

@@ -4,7 +4,7 @@ import './NotebookPopover.scss'
 import { Notebook } from './Notebook'
 import { notebookPopoverLogic } from 'scenes/notebooks/Notebook/notebookPopoverLogic'
 import { LemonButton } from '@posthog/lemon-ui'
-import { IconFullScreen, IconChevronRight, IconLink } from 'lib/lemon-ui/icons'
+import { IconFullScreen, IconChevronRight, IconOpenInNew, IconShare } from 'lib/lemon-ui/icons'
 import { useEffect, useMemo, useRef } from 'react'
 import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
 import { NotebookListMini } from './NotebookListMini'
@@ -14,6 +14,7 @@ import { notebookLogic } from './notebookLogic'
 import { urls } from 'scenes/urls'
 import { NotebookPopoverDropzone } from './NotebookPopoverDropzone'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
+import { openNotebookShareDialog } from './NotebookShare'
 
 export function NotebookPopoverCard(): JSX.Element | null {
     const { visibility, shownAtLeastOnce, fullScreen, selectedNotebook, initialAutofocus, droppedResource } =
@@ -53,8 +54,16 @@ export function NotebookPopoverCard(): JSX.Element | null {
                         to={urls.notebook(selectedNotebook)}
                         onClick={() => setVisibility('hidden')}
                         status="primary-alt"
-                        icon={<IconLink />}
-                        tooltip="Go to Notebook"
+                        icon={<IconOpenInNew />}
+                        tooltip="View notebook outside of popover"
+                        tooltipPlacement="left"
+                    />
+                    <LemonButton
+                        size="small"
+                        onClick={() => openNotebookShareDialog({ shortId: selectedNotebook })}
+                        status="primary-alt"
+                        icon={<IconShare />}
+                        tooltip="Share notebook"
                         tooltipPlacement="left"
                     />
 

frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx

@@ -0,0 +1,72 @@
+import { LemonBanner, LemonButton, LemonDivider } from '@posthog/lemon-ui'
+import { combineUrl } from 'kea-router'
+import { IconCopy } from 'lib/lemon-ui/icons'
+import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
+import { copyToClipboard } from 'lib/utils'
+import posthog from 'posthog-js'
+import { useState } from 'react'
+import { urls } from 'scenes/urls'
+
+export type NotebookShareProps = {
+    shortId: string
+}
+export function NotebookShare({ shortId }: NotebookShareProps): JSX.Element {
+    const url = combineUrl(`${window.location.origin}${urls.notebook(shortId)}`).url
+
+    const [interestTracked, setInterestTracked] = useState(false)
+
+    const trackInterest = (): void => {
+        posthog.capture('pressed interested in notebook sharing', { url })
+    }
+
+    return (
+        <div className="space-y-2">
+            <h3>Internal Link</h3>
+            <p>
+                <b>Click the button below</b> to copy a direct link to this Notebook. Make sure the person you share it
+                with has access to this PostHog project.
+            </p>
+            <LemonButton
+                type="secondary"
+                fullWidth
+                center
+                sideIcon={<IconCopy />}
+                onClick={async () => await copyToClipboard(url, 'notebook link')}
+                title={url}
+            >
+                <span className="truncate">{url}</span>
+            </LemonButton>
+
+            <LemonDivider className="my-4" />
+
+            <h3>External Sharing</h3>
+
+            <LemonBanner
+                type="warning"
+                action={{
+                    children: !interestTracked ? 'I would like this!' : 'Thanks!',
+                    onClick: () => {
+                        if (!interestTracked) {
+                            trackInterest()
+                            setInterestTracked(true)
+                        }
+                    },
+                }}
+            >
+                We don’t currently support sharing notebooks externally, but it’s on our roadmap!
+            </LemonBanner>
+        </div>
+    )
+}
+
+export function openNotebookShareDialog({ shortId }: NotebookShareProps): void {
+    LemonDialog.open({
+        title: 'Share notebook',
+        content: <NotebookShare shortId={shortId} />,
+        width: 600,
+        primaryButton: {
+            children: 'Close',
+            type: 'secondary',
+        },
+    })
+}

frontend/src/scenes/notebooks/NotebookScene.tsx

@@ -15,6 +15,7 @@ import {
     IconExport,
     IconHelpOutline,
     IconNotification,
+    IconShare,
 } from 'lib/lemon-ui/icons'
 import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
 import { notebooksModel } from '~/models/notebooksModel'
@@ -25,6 +26,7 @@ import './NotebookScene.scss'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { NotebookLoadingState } from './Notebook/NotebookLoadingState'
+import { openNotebookShareDialog } from './Notebook/NotebookShare'
 
 interface NotebookSceneProps {
     shortId?: string
@@ -102,6 +104,11 @@ export function NotebookScene(): JSX.Element {
                                         icon: <IconNotification />,
                                         onClick: () => setShowHistory(!showHistory),
                                     },
+                                    {
+                                        label: 'Share',
+                                        icon: <IconShare />,
+                                        onClick: () => openNotebookShareDialog({ shortId: notebookId }),
+                                    },
                                     !isTemplate && {
                                         label: 'Delete',
                                         icon: <IconDelete />,

frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx

@@ -91,6 +91,7 @@ export function NotebooksTable(): JSX.Element {
                     },
                     children: 'Get started',
                 }}
+                dismissKey="notebooks-preview-banner"
             >
                 <b>Welcome to the preview of Notebooks</b> - a great way to bring Insights, Replays, Feature Flags and
                 many more PostHog prodcuts together into one place.