From d24ea60e8226692a64383c4d2cfee854bf1c1c9a Mon Sep 17 00:00:00 2001 From: Ben White Date: Thu, 12 Oct 2023 18:02:45 +0200 Subject: [PATCH] feat: Notebook feedback changes (#17952) --- .../scenes/notebooks/Notebook/Notebook.tsx | 2 +- .../notebooks/Notebook/NotebookPopover.tsx | 15 +++- .../notebooks/Notebook/NotebookShare.tsx | 72 +++++++++++++++++++ .../src/scenes/notebooks/NotebookScene.tsx | 7 ++ .../NotebooksTable/NotebooksTable.tsx | 1 + 5 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx index f6fc4be7a1ae5..43146b75b270f 100644 --- a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx +++ b/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', }} > This is a template. You can create a copy of it to edit and use as your own. diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx index 37015d2dbb177..1db1ed1567ba6 100644 --- a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx +++ b/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={} - tooltip="Go to Notebook" + icon={} + tooltip="View notebook outside of popover" + tooltipPlacement="left" + /> + openNotebookShareDialog({ shortId: selectedNotebook })} + status="primary-alt" + icon={} + tooltip="Share notebook" tooltipPlacement="left" /> diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookShare.tsx new file mode 100644 index 0000000000000..c40031ad20dfc --- /dev/null +++ b/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 ( +
+

Internal Link

+

+ Click the button below to copy a direct link to this Notebook. Make sure the person you share it + with has access to this PostHog project. +

+ } + onClick={async () => await copyToClipboard(url, 'notebook link')} + title={url} + > + {url} + + + + +

External Sharing

+ + { + if (!interestTracked) { + trackInterest() + setInterestTracked(true) + } + }, + }} + > + We don’t currently support sharing notebooks externally, but it’s on our roadmap! + +
+ ) +} + +export function openNotebookShareDialog({ shortId }: NotebookShareProps): void { + LemonDialog.open({ + title: 'Share notebook', + content: , + width: 600, + primaryButton: { + children: 'Close', + type: 'secondary', + }, + }) +} diff --git a/frontend/src/scenes/notebooks/NotebookScene.tsx b/frontend/src/scenes/notebooks/NotebookScene.tsx index a69e66f2ce483..3296ac21f97d6 100644 --- a/frontend/src/scenes/notebooks/NotebookScene.tsx +++ b/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: , onClick: () => setShowHistory(!showHistory), }, + { + label: 'Share', + icon: , + onClick: () => openNotebookShareDialog({ shortId: notebookId }), + }, !isTemplate && { label: 'Delete', icon: , diff --git a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx index 2ce18eba28801..6f57e08427f01 100644 --- a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx +++ b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx @@ -91,6 +91,7 @@ export function NotebooksTable(): JSX.Element { }, children: 'Get started', }} + dismissKey="notebooks-preview-banner" > Welcome to the preview of Notebooks - a great way to bring Insights, Replays, Feature Flags and many more PostHog prodcuts together into one place.