chore: open / close notebook widgets

frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.tsx

@@ -34,7 +34,7 @@ export function LemonWidget({ title, collapsible = true, onClose, children }: Le
                         />
                     </>
                 ) : (
-                    <span className="flex-1">{title}</span>
+                    <span className="flex-1 text-primary-alt px-2">{title}</span>
                 )}
                 {onClose && <LemonButton status="danger" onClick={onClose} size="small" icon={<IconClose />} />}
             </Header>

frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx

@@ -66,6 +66,7 @@ export function NodeWrapper<T extends CustomNotebookNodeAttributes>({
 }: NodeWrapperProps<T> & NotebookNodeViewProps<T>): JSX.Element {
     const mountedNotebookLogic = useMountedLogic(notebookLogic)
     const { isEditable } = useValues(mountedNotebookLogic)
+    const { setIsShowingSidebar } = useActions(mountedNotebookLogic)
 
     // nodeId can start null, but should then immediately be generated
     const nodeId = node.attrs.nodeId
@@ -84,7 +85,7 @@ export function NodeWrapper<T extends CustomNotebookNodeAttributes>({
     }
     const nodeLogic = useMountedLogic(notebookNodeLogic(nodeLogicProps))
     const { title, resizeable, expanded } = useValues(nodeLogic)
-    const { setExpanded, deleteNode, setWidgetsVisible } = useActions(nodeLogic)
+    const { setExpanded, deleteNode } = useActions(nodeLogic)
 
     const [ref, inView] = useInView({ triggerOnce: true })
     const contentRef = useRef<HTMLDivElement | null>(null)
@@ -163,9 +164,9 @@ export function NodeWrapper<T extends CustomNotebookNodeAttributes>({
                                         />
                                     )}
 
-                                    {!!widgets.length && isEditable ? (
+                                    {widgets.length > 0 ? (
                                         <LemonButton
-                                            onClick={() => setWidgetsVisible(true)}
+                                            onClick={() => setIsShowingSidebar(true)}
                                             size="small"
                                             icon={<IconFilter />}
                                         />

frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx

@@ -15,7 +15,7 @@ import { SessionRecordingPlayer } from 'scenes/session-recordings/player/Session
 import { useMemo, useRef, useState } from 'react'
 import { fromParamsGivenUrl, uuid } from 'lib/utils'
 import { LemonButton } from '@posthog/lemon-ui'
-import { IconChevronLeft, IconSettings } from 'lib/lemon-ui/icons'
+import { IconChevronLeft } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 import { notebookNodeLogic } from './notebookNodeLogic'
 import { JSONContent, NotebookNodeViewProps, NotebookNodeWidgetSettings } from '../Notebook/utils'
@@ -135,7 +135,6 @@ export const NotebookNodePlaylist = createPostHogWidgetNode<NotebookNodePlaylist
         {
             key: 'settings',
             label: 'Settings',
-            icon: <IconSettings />,
             Component: Settings,
         },
     ],

frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx

@@ -8,7 +8,6 @@ import { useMemo } from 'react'
 import { notebookNodeLogic } from './notebookNodeLogic'
 import { NotebookNodeViewProps, NotebookNodeWidgetSettings } from '../Notebook/utils'
 import clsx from 'clsx'
-import { IconSettings } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 import api from 'lib/api'
 
@@ -133,7 +132,6 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
         {
             key: 'settings',
             label: 'Settings',
-            icon: <IconSettings />,
             Component: Settings,
         },
     ],

frontend/src/scenes/notebooks/Nodes/NotebookNodeRecording.tsx

@@ -15,7 +15,6 @@ import {
 } from 'scenes/session-recordings/playlist/SessionRecordingPreview'
 import { notebookNodeLogic } from './notebookNodeLogic'
 import { LemonSwitch } from '@posthog/lemon-ui'
-import { IconSettings } from 'lib/lemon-ui/icons'
 import { JSONContent, NotebookNodeViewProps, NotebookNodeWidgetSettings } from '../Notebook/utils'
 
 const HEIGHT = 500
@@ -102,7 +101,6 @@ export const NotebookNodeRecording = createPostHogWidgetNode<NotebookNodeRecordi
         {
             key: 'settings',
             label: 'Settings',
-            icon: <IconSettings />,
             Component: Settings,
         },
     ],

frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts

@@ -64,7 +64,6 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
             timestamp,
             sessionRecordingId,
         }),
-        setWidgetsVisible: (visible: boolean) => ({ visible }),
         setPreviousNode: (node: Node | null) => ({ node }),
         setNextNode: (node: Node | null) => ({ node }),
         deleteNode: true,
@@ -106,22 +105,12 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
                 setNextNode: (_, { node }) => node,
             },
         ],
-        widgetsVisible: [
-            false,
-            {
-                setWidgetsVisible: (_, { visible }) => visible,
-            },
-        ],
     })),
 
     selectors({
         notebookLogic: [(_, p) => [p.notebookLogic], (notebookLogic) => notebookLogic],
         nodeAttributes: [(_, p) => [p.nodeAttributes], (nodeAttributes) => nodeAttributes],
         widgets: [(_, p) => [p.widgets], (widgets) => widgets],
-        isShowingWidgets: [
-            (s, p) => [s.widgetsVisible, p.widgets],
-            (widgetsVisible, widgets) => !!widgets.length && widgetsVisible,
-        ],
     }),
 
     listeners(({ actions, values, props }) => ({

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

@@ -6,6 +6,7 @@ import { notebookNodeLogicType } from '../Nodes/notebookNodeLogicType'
 
 export const NotebookSidebar = (): JSX.Element | null => {
     const { selectedNodeLogic, isShowingSidebar, isEditable } = useValues(notebookLogic)
+    const { setIsShowingSidebar } = useActions(notebookLogic)
 
     if (!isEditable) {
         return null
@@ -17,23 +18,29 @@ export const NotebookSidebar = (): JSX.Element | null => {
                 'NotebookSidebar--showing': isShowingSidebar,
             })}
         >
-            <div className="NotebookSidebar__content">{selectedNodeLogic && <Widgets logic={selectedNodeLogic} />}</div>
+            <div className="NotebookSidebar__content">
+                {selectedNodeLogic && isShowingSidebar && (
+                    <Widgets logic={selectedNodeLogic} onClose={() => setIsShowingSidebar(false)} />
+                )}
+            </div>
         </div>
     )
 }
 
-export const Widgets = ({ logic }: { logic: BuiltLogic<notebookNodeLogicType> }): JSX.Element | null => {
-    const { widgets, nodeAttributes, isShowingWidgets } = useValues(logic)
-    const { updateAttributes, setWidgetsVisible } = useActions(logic)
-
-    if (!isShowingWidgets) {
-        return null
-    }
+export const Widgets = ({
+    logic,
+    onClose,
+}: {
+    logic: BuiltLogic<notebookNodeLogicType>
+    onClose: () => void
+}): JSX.Element | null => {
+    const { widgets, nodeAttributes } = useValues(logic)
+    const { updateAttributes } = useActions(logic)
 
     return (
         <div className="NotebookNodeSettings__widgets space-y-2 w-full">
             {widgets.map(({ key, label, Component }) => (
-                <LemonWidget key={key} title={label} onClose={() => setWidgetsVisible(false)}>
+                <LemonWidget key={key} title={label} collapsible={false} onClose={onClose}>
                     <Component attributes={nodeAttributes} updateAttributes={updateAttributes} />
                 </LemonWidget>
             ))}

frontend/src/scenes/notebooks/Notebook/notebookLogic.ts

@@ -77,6 +77,7 @@ export const notebookLogic = kea<notebookLogicType>([
         exportJSON: true,
         showConflictWarning: true,
         onUpdateEditor: true,
+        setIsShowingSidebar: (showing: boolean) => ({ showing }),
         registerNodeLogic: (nodeLogic: BuiltLogic<notebookNodeLogicType>) => ({ nodeLogic }),
         unregisterNodeLogic: (nodeLogic: BuiltLogic<notebookNodeLogicType>) => ({ nodeLogic }),
         setEditable: (editable: boolean) => ({ editable }),
@@ -162,6 +163,13 @@ export const notebookLogic = kea<notebookLogicType>([
                 setEditable: (_, { editable }) => editable,
             },
         ],
+        isShowingSidebar: [
+            false,
+            {
+                setSelectedNodeId: () => false,
+                setIsShowingSidebar: (_, { showing }) => showing,
+            },
+        ],
     }),
     loaders(({ values, props, actions }) => ({
         notebook: [
@@ -327,10 +335,6 @@ export const notebookLogic = kea<notebookLogicType>([
                 }
             },
         ],
-        isShowingSidebar: [
-            (s) => [s.selectedNodeLogic],
-            (selectedNodeLogic) => selectedNodeLogic?.values.isShowingWidgets,
-        ],
     }),
     sharedListeners(({ values, actions }) => ({
         onNotebookChange: () => {

frontend/src/scenes/notebooks/Notebook/utils.ts

@@ -44,7 +44,6 @@ export type NotebookNodeViewProps<T extends CustomNotebookNodeAttributes> = Omit
 export type NotebookNodeWidget = {
     key: string
     label: string
-    icon: JSX.Element
     // using 'any' here shouldn't be necessary but I couldn't figure out how to set a generic on the notebookNodeLogic props
     Component: ({ attributes, updateAttributes }: NotebookNodeWidgetSettings<any>) => JSX.Element
 }