Merge branch 'master' into dn-feat/persons-events-settings

PostHog · Oct 9, 2023 · 5944ff0 · 5944ff0
2 parents c7ec4a4 + febb718
commit 5944ff0
Show file tree

Hide file tree

Showing 45 changed files with 427 additions and 478 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.tsx b/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.tsx
@@ -1,47 +1,26 @@
-import { useState } from 'react'
 import { LemonButton } from '../LemonButton'
-import { IconClose, IconUnfoldLess, IconUnfoldMore } from '../icons'
+import { IconClose } from '../icons'
 import './LemonWidget.scss'
 import clsx from 'clsx'
 
 export interface LemonWidgetProps {
     title: string
-    collapsible?: boolean
     onClose?: () => void
     actions?: React.ReactNode
-    children: React.ReactChild
+    children: React.ReactNode
+    className?: string
 }
 
-export function LemonWidget({ title, collapsible = true, onClose, actions, children }: LemonWidgetProps): JSX.Element {
-    const [isExpanded, setIsExpanded] = useState<boolean>(true)
-
+export function LemonWidget({ title, onClose, actions, children, className }: LemonWidgetProps): JSX.Element {
     return (
-        <Widget>
+        <Widget className={className}>
             <Header>
-                {collapsible ? (
-                    <>
-                        <LemonButton
-                            onClick={() => setIsExpanded(!isExpanded)}
-                            size="small"
-                            status="primary-alt"
-                            className="flex-1"
-                        >
-                            <span className="flex-1 cursor-pointer">{title}</span>
-                        </LemonButton>
-                        <LemonButton
-                            onClick={() => setIsExpanded(!isExpanded)}
-                            size="small"
-                            icon={isExpanded ? <IconUnfoldLess /> : <IconUnfoldMore />}
-                        />
-                    </>
-                ) : (
-                    <span className="flex-1 text-primary-alt px-2">{title}</span>
-                )}
+                <span className="flex-1 text-primary-alt px-2">{title}</span>
                 {actions}
 
                 {onClose && <LemonButton status="danger" onClick={onClose} size="small" icon={<IconClose />} />}
             </Header>
-            {isExpanded && <Content>{children}</Content>}
+            <Content>{children}</Content>
         </Widget>
     )
 }
@@ -55,5 +34,5 @@ const Header = ({ children, className }: { children: React.ReactNode; className?
 }
 
 const Content = ({ children }: { children: React.ReactNode }): JSX.Element => {
-    return <div className="border-t border-border">{children}</div>
+    return <div className="LemonWidget__content border-t border-border">{children}</div>
 }
diff --git a/frontend/src/queries/nodes/DataTable/DataTableExport.tsx b/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
@@ -212,7 +212,7 @@ export function DataTableExport({ query }: DataTableExportProps): JSX.Element |
                             ? [
                                   <ExportWithConfirmation
                                       key={0}
-                                      placement={'bottomRight'}
+                                      placement={'topRight'}
                                       onConfirm={() => startDownload(query, false)}
                                       actor={isPersonsNode(query.source) ? 'persons' : 'events'}
                                       limit={EXPORT_MAX_LIMIT}

diff --git a/frontend/src/queries/nodes/DataTable/ExportWithConfirmation.tsx b/frontend/src/queries/nodes/DataTable/ExportWithConfirmation.tsx
@@ -18,6 +18,7 @@ export function ExportWithConfirmation({
 }: ExportWithConfirmationProps): JSX.Element {
     return (
         <Popconfirm
+            className="ant-popconfirm"
             placement={placement}
             title={
                 <>

diff --git a/frontend/src/scenes/batch_exports/utils.ts b/frontend/src/scenes/batch_exports/utils.ts
@@ -4,6 +4,7 @@ export function intervalToFrequency(interval: BatchExportConfiguration['interval
     return {
         day: 'daily',
         hour: 'hourly',
+        'every 5 minutes': 'every 5 minutes',
     }[interval]
 }
 

diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
@@ -32,8 +32,8 @@ import { posthogNodePasteRule, useSyncedAttributes } from './utils'
 import {
     NotebookNodeAttributes,
     NotebookNodeViewProps,
-    NotebookNodeWidget,
     CustomNotebookNodeAttributes,
+    NotebookNodeSettings,
 } from '../Notebook/utils'
 
 export interface NodeWrapperProps<T extends CustomNotebookNodeAttributes> {
@@ -54,7 +54,7 @@ export interface NodeWrapperProps<T extends CustomNotebookNodeAttributes> {
     autoHideMetadata?: boolean
     /** Expand the node if the component is clicked */
     expandOnClick?: boolean
-    widgets?: NotebookNodeWidget[]
+    settings?: NotebookNodeSettings
 }
 
 function NodeWrapper<T extends CustomNotebookNodeAttributes>({
@@ -74,7 +74,7 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>({
     getPos,
     attributes,
     updateAttributes,
-    widgets = [],
+    settings = null,
 }: NodeWrapperProps<T> & NotebookNodeViewProps<T>): JSX.Element {
     const mountedNotebookLogic = useMountedLogic(notebookLogic)
     const { isEditable, editingNodeId } = useValues(notebookLogic)
@@ -91,7 +91,7 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>({
         notebookLogic: mountedNotebookLogic,
         getPos,
         resizeable: resizeableOrGenerator,
-        widgets,
+        settings,
         startExpanded,
     }
     const nodeLogic = useMountedLogic(notebookNodeLogic(nodeLogicProps))
@@ -183,7 +183,7 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>({
 
                                                 {isEditable ? (
                                                     <>
-                                                        {widgets.length > 0 ? (
+                                                        {settings ? (
                                                             <LemonButton
                                                                 onClick={() =>
                                                                     setEditingNodeId(
@@ -259,7 +259,7 @@ export type CreatePostHogWidgetNodeOptions<T extends CustomNotebookNodeAttribute
         getAttributes: (match: ExtendedRegExpMatchArray) => Promise<T | null | undefined> | T | null | undefined
     }
     attributes: Record<keyof T, Partial<Attribute>>
-    widgets?: NotebookNodeWidget[]
+    settings?: NotebookNodeSettings
     serializedText?: (attributes: NotebookNodeAttributes<T>) => string
 }
 

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx
@@ -166,13 +166,7 @@ export const NotebookNodePlaylist = createPostHogWidgetNode<NotebookNodePlaylist
             return { filters: searchParams.filters }
         },
     },
-    widgets: [
-        {
-            key: 'settings',
-            label: 'Settings',
-            Component: Settings,
-        },
-    ],
+    settings: Settings,
 })
 
 export function buildPlaylistContent(filters: Partial<FilterType>): JSONContent {

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -205,12 +205,7 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
     },
     href: (attrs) =>
         attrs.query.kind === NodeKind.SavedInsightNode ? urls.insightView(attrs.query.shortId) : undefined,
-    widgets: [
-        {
-            key: 'settings',
-            Component: Settings,
-        },
-    ],
+    settings: Settings,
     pasteOptions: {
         find: urls.insightView('(.+)' as InsightShortId),
         getAttributes: async (match) => {

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeRecording.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeRecording.tsx
@@ -156,13 +156,7 @@ export const NotebookNodeRecording = createPostHogWidgetNode<NotebookNodeRecordi
             return { id: match[1], noInspector: false }
         },
     },
-    widgets: [
-        {
-            key: 'settings',
-            label: 'Settings',
-            Component: Settings,
-        },
-    ],
+    settings: Settings,
     serializedText: (attrs) => {
         return attrs.id
     },

diff --git a/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts b/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
@@ -23,7 +23,7 @@ import {
     NotebookNodeAction,
     NotebookNodeAttributeProperties,
     NotebookNodeAttributes,
-    NotebookNodeWidget,
+    NotebookNodeSettings,
 } from '../Notebook/utils'
 import { NotebookNodeType } from '~/types'
 import posthog from 'posthog-js'
@@ -36,7 +36,7 @@ export type NotebookNodeLogicProps = {
     notebookLogic: BuiltLogic<notebookLogicType>
     getPos: () => number
     resizeable: boolean | ((attributes: CustomNotebookNodeAttributes) => boolean)
-    widgets: NotebookNodeWidget[]
+    settings: NotebookNodeSettings
     messageListeners?: NotebookNodeMessagesListeners
     startExpanded: boolean
 } & NotebookNodeAttributeProperties<any>
@@ -116,7 +116,7 @@ export const notebookNodeLogic = kea<notebookNodeLogicType>([
     selectors({
         notebookLogic: [(_, p) => [p.notebookLogic], (notebookLogic) => notebookLogic],
         nodeAttributes: [(_, p) => [p.attributes], (nodeAttributes) => nodeAttributes],
-        widgets: [(_, p) => [p.widgets], (widgets) => widgets],
+        settings: [(_, p) => [p.settings], (settings) => settings],
 
         sendMessage: [
             (s) => [s.messageListeners],

diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -181,8 +181,8 @@
         }
     }
 
-    .NotebookNodeSettings__widgets {
-        &__content {
+    .NotebookSidebar__widget {
+        > .LemonWidget__content {
             max-height: calc(100vh - 220px);
             overflow: auto;
         }

diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookHistory.tsx
@@ -106,7 +106,7 @@ export function NotebookHistory(): JSX.Element {
     }
 
     return (
-        <LemonWidget title="Notebook History" collapsible={false} onClose={() => setShowHistory(false)}>
+        <LemonWidget title="Notebook History" onClose={() => setShowHistory(false)}>
             <div className="NotebookHistory">
                 <p className="m-3">
                     Below is the history of all persisted changes. You can select any version to view how it was at that

diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx
@@ -5,14 +5,15 @@ 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 { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
 import { NotebookListMini } from './NotebookListMini'
 import { notebooksModel } from '~/models/notebooksModel'
 import { NotebookExpandButton, NotebookSyncInfo } from './NotebookMeta'
 import { notebookLogic } from './notebookLogic'
 import { urls } from 'scenes/urls'
 import { NotebookPopoverDropzone } from './NotebookPopoverDropzone'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 
 export function NotebookPopoverCard(): JSX.Element | null {
     const { visibility, shownAtLeastOnce, fullScreen, selectedNotebook, initialAutofocus, droppedResource } =
@@ -26,8 +27,16 @@ export function NotebookPopoverCard(): JSX.Element | null {
     if (droppedResource) {
         return null
     }
+
+    const { ref, size } = useResizeBreakpoints({
+        0: 'small',
+        832: 'medium',
+    })
+
+    const contentWidthHasEffect = useMemo(() => fullScreen && size === 'medium', [fullScreen, size])
+
     return (
-        <div className="NotebookPopover__content__card">
+        <div ref={ref} className="NotebookPopover__content__card">
             <header className="flex items-center justify-between gap-2 font-semibold shrink-0 p-1 border-b">
                 <span className="flex items-center gap-1 text-primary-alt">
                     <NotebookListMini
@@ -49,7 +58,7 @@ export function NotebookPopoverCard(): JSX.Element | null {
                         tooltipPlacement="left"
                     />
 
-                    <NotebookExpandButton status="primary-alt" size="small" />
+                    {contentWidthHasEffect && <NotebookExpandButton status="primary-alt" size="small" />}
 
                     <LemonButton
                         size="small"

diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx
@@ -29,37 +29,25 @@ export const NotebookSidebar = (): JSX.Element | null => {
     )
 }
 
-const Widgets = ({ logic }: { logic: BuiltLogic<notebookNodeLogicType> }): JSX.Element | null => {
+const Widgets = ({ logic }: { logic: BuiltLogic<notebookNodeLogicType> }): JSX.Element => {
     const { setEditingNodeId } = useActions(notebookLogic)
-    const { widgets, nodeAttributes } = useValues(logic)
+    const { settings: Settings, nodeAttributes } = useValues(logic)
     const { updateAttributes, selectNode } = useActions(logic)
 
     return (
-        <div className="NotebookNodeSettings__widgets space-y-2 w-full">
-            {widgets.map(({ key, label, Component }) => (
-                <LemonWidget
-                    key={key}
-                    title={label ?? `Editing '${nodeAttributes.title}'`}
-                    collapsible={false}
-                    actions={
-                        <>
-                            <LemonButton
-                                icon={<IconEyeVisible />}
-                                size="small"
-                                status="primary"
-                                onClick={() => selectNode()}
-                            />
-                            <LemonButton size="small" status="primary" onClick={() => setEditingNodeId(null)}>
-                                Done
-                            </LemonButton>
-                        </>
-                    }
-                >
-                    <div className="NotebookNodeSettings__widgets__content">
-                        <Component attributes={nodeAttributes} updateAttributes={updateAttributes} />
-                    </div>
-                </LemonWidget>
-            ))}
-        </div>
+        <LemonWidget
+            title={`Editing '${nodeAttributes.title}'`}
+            className="NotebookSidebar__widget"
+            actions={
+                <>
+                    <LemonButton icon={<IconEyeVisible />} size="small" status="primary" onClick={() => selectNode()} />
+                    <LemonButton size="small" status="primary" onClick={() => setEditingNodeId(null)}>
+                        Done
+                    </LemonButton>
+                </>
+            }
+        >
+            {Settings ? <Settings attributes={nodeAttributes} updateAttributes={updateAttributes} /> : null}
+        </LemonWidget>
     )
 }
diff --git a/frontend/src/scenes/notebooks/Notebook/utils.ts b/frontend/src/scenes/notebooks/Notebook/utils.ts
@@ -46,12 +46,9 @@ export type NotebookNodeViewProps<T extends CustomNotebookNodeAttributes> = Omit
         node: NotebookNode
     }
 
-export type NotebookNodeWidget = {
-    key: string
-    label?: string
+export type NotebookNodeSettings =
     // 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
-}
+    (({ attributes, updateAttributes }: NotebookNodeAttributeProperties<any>) => JSX.Element) | null
 
 export type NotebookNodeAction = Pick<LemonButtonProps, 'icon'> & {
     text: string