chore: open / close notebook widgets (#17375)

* chore: open / close notebook widgets

frontend/src/lib/constants.tsx

@@ -158,7 +158,6 @@ export const FEATURE_FLAGS = {
     REFERRAL_SOURCE_SELECT: 'referral-source-select', // owner: @raquelmsmith
     SURVEYS_MULTIPLE_CHOICE: 'surveys-multiple-choice', // owner: @liyiy
     CS_DASHBOARDS: 'cs-dashboards', // owner: @pauldambra
-    NOTEBOOK_SETTINGS_WIDGETS: 'notebook-settings-widgets', // owner: #team-monitoring
     PRODUCT_SPECIFIC_ONBOARDING: 'product-specific-onboarding', // owner: @raquelmsmith
     REDIRECT_SIGNUPS_TO_INSTANCE: 'redirect-signups-to-instance', // owner: @raquelmsmith
     APPS_AND_EXPORTS_UI: 'apps-and-exports-ui', // owner: @benjackwhite

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

@@ -67,7 +67,8 @@ export function NodeWrapper<T extends CustomNotebookNodeAttributes>({
     widgets = [],
 }: NodeWrapperProps<T> & NotebookNodeViewProps<T>): JSX.Element {
     const mountedNotebookLogic = useMountedLogic(notebookLogic)
-    const { isEditable } = useValues(mountedNotebookLogic)
+    const { isEditable, isShowingSidebar } = useValues(mountedNotebookLogic)
+    const { setIsShowingSidebar } = useActions(mountedNotebookLogic)
 
     // nodeId can start null, but should then immediately be generated
     const nodeId = attributes.nodeId
@@ -86,7 +87,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)
@@ -165,11 +166,12 @@ export function NodeWrapper<T extends CustomNotebookNodeAttributes>({
                                         />
                                     )}
 
-                                    {!!widgets.length && isEditable ? (
+                                    {widgets.length > 0 ? (
                                         <LemonButton
-                                            onClick={() => setWidgetsVisible(true)}
+                                            onClick={() => setIsShowingSidebar(!isShowingSidebar)}
                                             size="small"
                                             icon={<IconFilter />}
+                                            active={isShowingSidebar && selected}
                                         />
                                     ) : null}
 

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

@@ -14,7 +14,7 @@ import { SessionRecordingPlayer } from 'scenes/session-recordings/player/Session
 import { useMemo, useState } from 'react'
 import { fromParamsGivenUrl } 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, NotebookNodeAttributeProperties } from '../Notebook/utils'
@@ -130,7 +130,6 @@ export const NotebookNodePlaylist = createPostHogWidgetNode<NotebookNodePlaylist
         {
             key: 'settings',
             label: 'Settings',
-            icon: <IconSettings />,
             Component: Settings,
         },
     ],

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

@@ -7,7 +7,6 @@ import { useMemo } from 'react'
 import { notebookNodeLogic } from './notebookNodeLogic'
 import { NotebookNodeViewProps, NotebookNodeAttributeProperties } from '../Notebook/utils'
 import clsx from 'clsx'
-import { IconSettings } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 import api from 'lib/api'
 import { containsHogQLQuery, isHogQLQuery, isNodeWithSource } from '~/queries/utils'
@@ -154,7 +153,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, NotebookNodeAttributeProperties } 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

@@ -70,7 +70,6 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
             timestamp,
             sessionRecordingId,
         }),
-        setWidgetsVisible: (visible: boolean) => ({ visible }),
         setPreviousNode: (node: Node | null) => ({ node }),
         setNextNode: (node: Node | null) => ({ node }),
         deleteNode: true,
@@ -112,22 +111,12 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
                 setNextNode: (_, { node }) => node,
             },
         ],
-        widgetsVisible: [
-            false,
-            {
-                setWidgetsVisible: (_, { visible }) => visible,
-            },
-        ],
     })),
 
     selectors({
         notebookLogic: [(_, p) => [p.notebookLogic], (notebookLogic) => notebookLogic],
         nodeAttributes: [(_, p) => [p.attributes], (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/Notebook.tsx

@@ -13,8 +13,6 @@ import { NotebookConflictWarning } from './NotebookConflictWarning'
 import { NotebookLoadingState } from './NotebookLoadingState'
 import { Editor } from './Editor'
 import { EditorFocusPosition } from './utils'
-import { FlaggedFeature } from 'lib/components/FlaggedFeature'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { NotebookSidebar } from './NotebookSidebar'
 import { ErrorBoundary } from '~/layout/ErrorBoundary'
 
@@ -99,9 +97,7 @@ export function Notebook({ shortId, editable = false, initialAutofocus = null }:
                 ) : null}
 
                 <div className="flex flex-1 justify-center space-x-2">
-                    <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOK_SETTINGS_WIDGETS}>
-                        <NotebookSidebar />
-                    </FlaggedFeature>
+                    <NotebookSidebar />
                     <ErrorBoundary>
                         <Editor
                             initialContent={content}

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}>
                     <div className="NotebookNodeSettings__widgets__content">
                         <Component attributes={nodeAttributes} updateAttributes={updateAttributes} />
                     </div>

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 }),
@@ -166,6 +167,13 @@ export const notebookLogic = kea<notebookLogicType>([
                 setEditable: (_, { editable }) => editable,
             },
         ],
+        isShowingSidebar: [
+            false,
+            {
+                setSelectedNodeId: (showing, { selectedNodeId }) => (selectedNodeId ? showing : false),
+                setIsShowingSidebar: (_, { showing }) => showing,
+            },
+        ],
     }),
     loaders(({ values, props, actions }) => ({
         notebook: [
@@ -334,10 +342,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

@@ -48,7 +48,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 }: NotebookNodeAttributeProperties<any>) => JSX.Element
 }