feat: Added dropdown menu to notebook panel

frontend/src/scenes/notebooks/NotebookMenu.tsx

@@ -0,0 +1,54 @@
+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 (
+        <LemonMenu
+            items={[
+                {
+                    items: [
+                        {
+                            label: 'Export JSON',
+                            icon: <IconExport />,
+                            onClick: () => exportJSON(),
+                        },
+                        {
+                            label: 'History',
+                            icon: <IconNotification />,
+                            onClick: () => setShowHistory(!showHistory),
+                        },
+                        !isLocalOnly && {
+                            label: 'Share',
+                            icon: <IconShare />,
+                            onClick: () => openNotebookShareDialog({ shortId }),
+                        },
+                        !notebook?.is_template && {
+                            label: 'Delete',
+                            icon: <IconDelete />,
+                            status: 'danger',
+
+                            onClick: () => {
+                                notebooksModel.actions.deleteNotebook(shortId, notebook?.title)
+                                router.actions.push(urls.notebooks())
+                            },
+                        },
+                    ],
+                },
+            ]}
+            actionable
+        >
+            <LemonButton aria-label="more" icon={<IconEllipsis />} status="stealth" size="small" />
+        </LemonMenu>
+    )
+}

frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.tsx

@@ -2,16 +2,16 @@ 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'
 
 export function NotebookPanel(): JSX.Element | null {
     const { selectedNotebook, initialAutofocus, droppedResource, dropProperties } = useValues(notebookPanelLogic)
@@ -52,16 +52,9 @@ export function NotebookPanel(): JSX.Element | null {
                                 tooltipPlacement="left"
                             />
 
-                            <LemonButton
-                                size="small"
-                                onClick={() => openNotebookShareDialog({ shortId: selectedNotebook })}
-                                status="primary-alt"
-                                icon={<IconShare />}
-                                tooltip="Share notebook"
-                                tooltipPlacement="left"
-                            />
-
                             {contentWidthHasEffect && <NotebookExpandButton status="primary-alt" size="small" />}
+
+                            <NotebookMenu shortId={selectedNotebook} />
                         </span>
                     </header>
 

frontend/src/scenes/notebooks/NotebookScene.tsx

@@ -7,26 +7,14 @@ 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'
 
 interface NotebookSceneProps {
     shortId?: string
@@ -42,8 +30,7 @@ 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 }))
     const { selectNotebook, closeSidePanel } = useActions(notebookPanelLogic)
     const { selectedNotebook, visibility } = useValues(notebookPanelLogic)
 
@@ -90,42 +77,8 @@ export function NotebookScene(): JSX.Element {
                 <div className="flex gap-2 items-center">
                     <NotebookSyncInfo shortId={notebookId} />
 
-                    <LemonMenu
-                        items={[
-                            {
-                                items: [
-                                    {
-                                        label: 'Export JSON',
-                                        icon: <IconExport />,
-                                        onClick: () => exportJSON(),
-                                    },
-                                    {
-                                        label: 'History',
-                                        icon: <IconNotification />,
-                                        onClick: () => setShowHistory(!showHistory),
-                                    },
-                                    {
-                                        label: 'Share',
-                                        icon: <IconShare />,
-                                        onClick: () => openNotebookShareDialog({ shortId: notebookId }),
-                                    },
-                                    !isTemplate && {
-                                        label: 'Delete',
-                                        icon: <IconDelete />,
-                                        status: 'danger',
+                    <NotebookMenu shortId={notebookId} />
 
-                                        onClick: () => {
-                                            notebooksModel.actions.deleteNotebook(notebookId, notebook?.title)
-                                            router.actions.push(urls.notebooks())
-                                        },
-                                    },
-                                ],
-                            },
-                        ]}
-                        actionable
-                    >
-                        <LemonButton aria-label="more" icon={<IconEllipsis />} status="stealth" size="small" />
-                    </LemonMenu>
                     <LemonButton
                         type="secondary"
                         icon={<IconHelpOutline />}