diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png index e18ecc8d6a5a5..5bff9a3fddcff 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png and b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png differ diff --git a/frontend/src/models/notebooksModel.ts b/frontend/src/models/notebooksModel.ts index b30f62506d61a..057d896c0ce41 100644 --- a/frontend/src/models/notebooksModel.ts +++ b/frontend/src/models/notebooksModel.ts @@ -28,7 +28,7 @@ export const SCRATCHPAD_NOTEBOOK: NotebookListItemType = { export const openNotebook = async ( notebookId: string, - target: NotebookTarget = NotebookTarget.Auto, + target: NotebookTarget, focus: EditorFocusPosition | undefined = undefined, // operations to run against the notebook once it has opened and the editor is ready onOpen: (logic: BuiltLogic) => void = () => {} @@ -60,8 +60,8 @@ export const notebooksModel = kea([ actions({ setScratchpadNotebook: (notebook: NotebookListItemType) => ({ notebook }), createNotebook: ( + location: NotebookTarget, title?: string, - location: NotebookTarget = NotebookTarget.Auto, content?: JSONContent[], onCreate?: (notebook: BuiltLogic) => void ) => ({ @@ -186,7 +186,7 @@ export const notebooksModel = kea([ }, })) - await actions.createNotebook(dashboard.name + ' (copied)', NotebookTarget.Auto, resources) + await actions.createNotebook(NotebookTarget.Scene, dashboard.name + ' (copied)', resources) }, })), ]) diff --git a/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts b/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts index 97313393db0a8..b1a7799d5d14d 100644 --- a/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts +++ b/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts @@ -38,6 +38,7 @@ export type NotebookLogicMode = 'notebook' | 'canvas' export type NotebookLogicProps = { shortId: string mode?: NotebookLogicMode + target?: NotebookTarget } async function runWhenEditorIsReady(waitForEditor: () => boolean, fn: () => any): Promise { @@ -293,7 +294,7 @@ export const notebookLogic = kea([ actions.clearLocalContent() } - await openNotebook(response.short_id, NotebookTarget.Auto) + await openNotebook(response.short_id, props.target ?? NotebookTarget.Scene) return response }, diff --git a/frontend/src/scenes/notebooks/NotebookMenu.tsx b/frontend/src/scenes/notebooks/NotebookMenu.tsx new file mode 100644 index 0000000000000..ea307f726c8b9 --- /dev/null +++ b/frontend/src/scenes/notebooks/NotebookMenu.tsx @@ -0,0 +1,55 @@ +import { useActions, useValues } from 'kea' +import { NotebookLogicProps, notebookLogic } from './Notebook/notebookLogic' +import { LemonButton } from '@posthog/lemon-ui' +import { IconDelete, IconEllipsis, IconExport, IconNotification, IconShare } from 'lib/lemon-ui/icons' +import { LemonMenu } from 'lib/lemon-ui/LemonMenu' +import { notebooksModel } from '~/models/notebooksModel' +import { router } from 'kea-router' +import { urls } from 'scenes/urls' +import './NotebookScene.scss' +import { openNotebookShareDialog } from './Notebook/NotebookShare' + +export function NotebookMenu({ shortId }: NotebookLogicProps): JSX.Element { + const { notebook, showHistory, isLocalOnly } = useValues(notebookLogic({ shortId })) + const { exportJSON, setShowHistory } = useActions(notebookLogic({ shortId })) + + return ( + , + onClick: () => exportJSON(), + }, + { + label: 'History', + icon: , + onClick: () => setShowHistory(!showHistory), + }, + !isLocalOnly && { + label: 'Share', + icon: , + onClick: () => openNotebookShareDialog({ shortId }), + }, + !isLocalOnly && + !notebook?.is_template && { + label: 'Delete', + icon: , + status: 'danger', + + onClick: () => { + notebooksModel.actions.deleteNotebook(shortId, notebook?.title) + router.actions.push(urls.notebooks()) + }, + }, + ], + }, + ]} + actionable + > + } status="stealth" size="small" /> + + ) +} diff --git a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx index 50bde849b55ae..c1bd1fae46a14 100644 --- a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx +++ b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx @@ -2,21 +2,22 @@ import { useActions, useValues } from 'kea' import './NotebookPanel.scss' import { Notebook } from '../Notebook/Notebook' import { LemonButton } from '@posthog/lemon-ui' -import { IconOpenInNew, IconShare } from 'lib/lemon-ui/icons' +import { IconOpenInNew } from 'lib/lemon-ui/icons' import { useMemo } from 'react' import { NotebookListMini } from '../Notebook/NotebookListMini' import { NotebookExpandButton, NotebookSyncInfo } from '../Notebook/NotebookMeta' import { notebookLogic } from '../Notebook/notebookLogic' import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' -import { openNotebookShareDialog } from '../Notebook/NotebookShare' import { notebookPanelLogic } from './notebookPanelLogic' import { NotebookPanelDropzone } from './NotebookPanelDropzone' import { urls } from 'scenes/urls' +import { NotebookMenu } from '../NotebookMenu' +import { NotebookTarget } from '~/types' export function NotebookPanel(): JSX.Element | null { const { selectedNotebook, initialAutofocus, droppedResource, dropProperties } = useValues(notebookPanelLogic) const { selectNotebook, closeSidePanel } = useActions(notebookPanelLogic) - const { notebook, isLocalOnly } = useValues(notebookLogic({ shortId: selectedNotebook })) + const { notebook } = useValues(notebookLogic({ shortId: selectedNotebook, target: NotebookTarget.Popover })) const editable = !notebook?.is_template const { ref, size } = useResizeBreakpoints({ @@ -52,18 +53,9 @@ export function NotebookPanel(): JSX.Element | null { tooltipPlacement="left" /> - {!isLocalOnly ? ( - openNotebookShareDialog({ shortId: selectedNotebook })} - status="primary-alt" - icon={} - tooltip="Share notebook" - tooltipPlacement="left" - /> - ) : null} - {contentWidthHasEffect && } + + diff --git a/frontend/src/scenes/notebooks/NotebookScene.tsx b/frontend/src/scenes/notebooks/NotebookScene.tsx index 64e21c6c24410..a6a4ad229270f 100644 --- a/frontend/src/scenes/notebooks/NotebookScene.tsx +++ b/frontend/src/scenes/notebooks/NotebookScene.tsx @@ -7,26 +7,15 @@ import { NotebookSceneLogicProps, notebookSceneLogic } from './notebookSceneLogi import { LemonButton, LemonTag } from '@posthog/lemon-ui' import { NotebookExpandButton, NotebookSyncInfo } from './Notebook/NotebookMeta' import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator' -import { - IconArrowRight, - IconDelete, - IconEllipsis, - IconExport, - IconHelpOutline, - IconNotification, - IconShare, -} from 'lib/lemon-ui/icons' -import { LemonMenu } from 'lib/lemon-ui/LemonMenu' -import { notebooksModel } from '~/models/notebooksModel' -import { router } from 'kea-router' -import { urls } from 'scenes/urls' +import { IconArrowRight, IconHelpOutline } from 'lib/lemon-ui/icons' import { LOCAL_NOTEBOOK_TEMPLATES } from './NotebookTemplates/notebookTemplates' 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' import { notebookPanelLogic } from './NotebookPanel/notebookPanelLogic' +import { NotebookMenu } from './NotebookMenu' +import { NotebookTarget } from '~/types' interface NotebookSceneProps { shortId?: string @@ -42,8 +31,9 @@ export const scene: SceneExport = { export function NotebookScene(): JSX.Element { const { notebookId, loading } = useValues(notebookSceneLogic) - const { notebook, conflictWarningVisible, showHistory } = useValues(notebookLogic({ shortId: notebookId })) - const { exportJSON, setShowHistory } = useActions(notebookLogic({ shortId: notebookId })) + const { notebook, conflictWarningVisible } = useValues( + notebookLogic({ shortId: notebookId, target: NotebookTarget.Scene }) + ) const { selectNotebook, closeSidePanel } = useActions(notebookPanelLogic) const { selectedNotebook, visibility } = useValues(notebookPanelLogic) @@ -90,42 +80,8 @@ export function NotebookScene(): JSX.Element {
- , - onClick: () => exportJSON(), - }, - { - label: 'History', - icon: , - onClick: () => setShowHistory(!showHistory), - }, - { - label: 'Share', - icon: , - onClick: () => openNotebookShareDialog({ shortId: notebookId }), - }, - !isTemplate && { - label: 'Delete', - icon: , - status: 'danger', + - onClick: () => { - notebooksModel.actions.deleteNotebook(notebookId, notebook?.title) - router.actions.push(urls.notebooks()) - }, - }, - ], - }, - ]} - actionable - > - } status="stealth" size="small" /> - } diff --git a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx index 29493464d7760..d240cf1179a53 100644 --- a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx +++ b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx @@ -99,8 +99,8 @@ export function NotebookSelectList(props: NotebookSelectProps): JSX.Element { const title = newNotebookTitle ?? `Notes ${dayjs().format('DD/MM')}` createNotebook( - title, NotebookTarget.Popover, + title, notebookResource ? [notebookResource] : undefined, (theNotebookLogic) => { props.onNotebookOpened?.(theNotebookLogic) diff --git a/frontend/src/scenes/notebooks/notebookSceneLogic.ts b/frontend/src/scenes/notebooks/notebookSceneLogic.ts index e7659c203c5d0..2d8656ddd5447 100644 --- a/frontend/src/scenes/notebooks/notebookSceneLogic.ts +++ b/frontend/src/scenes/notebooks/notebookSceneLogic.ts @@ -1,5 +1,5 @@ import { afterMount, connect, kea, key, path, props, selectors } from 'kea' -import { Breadcrumb } from '~/types' +import { Breadcrumb, NotebookTarget } from '~/types' import type { notebookSceneLogicType } from './notebookSceneLogicType' import { notebookLogic } from './Notebook/notebookLogic' @@ -41,7 +41,7 @@ export const notebookSceneLogic = kea([ afterMount(({ actions, props }) => { if (props.shortId === 'new') { - actions.createNotebook() + actions.createNotebook(NotebookTarget.Scene) } else { actions.loadNotebook() } diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 895839b45170f..31652f6674cd8 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -3114,7 +3114,7 @@ export type NotebookNodeResource = { export enum NotebookTarget { Popover = 'popover', - Auto = 'auto', + Scene = 'scene', } export type NotebookSyncStatus = 'synced' | 'saving' | 'unsaved' | 'local'