feat: notebooks sharing step 1

cypress/support/e2e.ts

@@ -3,10 +3,8 @@ import './commands'
 import 'cypress-axe'
 import { decideResponse } from '../fixtures/api/decide'
 
-try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require('cypress-terminal-report/src/installLogsCollector')()
-} catch {}
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+require('cypress-terminal-report/src/installLogsCollector')()
 
 // Add console errors into cypress logs. This helps with failures in Github Actions which otherwise swallows them.
 // From: https://github.com/cypress-io/cypress/issues/300#issuecomment-688915086

frontend/src/exporter/ExportedNotebook/ExportedNotebook.tsx

@@ -0,0 +1,15 @@
+import { Notebook } from 'scenes/notebooks/Notebook/Notebook'
+import { NotebookMode, NotebookType } from '~/types'
+
+export function ExportedNotebook(props: { notebook: NotebookType }): JSX.Element {
+    return (
+        <div className={'ExportedNotebook Notebook--compact pt-4 px-8 mb-8'}>
+            <Notebook
+                shortId={props.notebook.short_id}
+                cachedNotebook={props.notebook}
+                editable={false}
+                viewMode={NotebookMode.SharedView}
+            />
+        </div>
+    )
+}

frontend/src/exporter/Exporter.stories.tsx → frontend/src/exporter/Exporter.insight-and-dashboard.stories.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import { Exporter } from './Exporter'
-import { dashboard } from '~/exporter/__mocks__/Exporter.mocks'
+import { dashboard, notebook } from '~/exporter/__mocks__/Exporter.mocks'
 import { ExportType } from '~/exporter/types'
 
 type Story = StoryObj<typeof Exporter>
@@ -142,3 +142,6 @@ UserPathsInsight.args = { insight: require('../mocks/fixtures/api/projects/:team
 
 export const Dashboard: Story = Template.bind({})
 Dashboard.args = { dashboard }
+
+export const Notebook = Template.bind({})
+Notebook.args = { notebook }

frontend/src/exporter/Exporter.notebook.stories.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Exporter } from './Exporter'
+import { notebook } from '~/exporter/__mocks__/Exporter.mocks'
+
+export default {
+    title: 'Exporter/Exporter',
+    component: Exporter,
+    args: {
+        type: 'embed',
+        whitelabel: false,
+        noHeader: false,
+        legend: false,
+    },
+    parameters: {
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+            source: { state: 'close' },
+        },
+        testOptions: {
+            // KLUDGE: duplicated from Exporter.insight-and-dashboard.stories.tsx
+            // so that we can set the correct waitForLoadersToDisappear
+            waitForLoadersToDisappear: '.Notebook',
+        },
+        mockDate: '2023-02-01',
+        viewMode: 'story',
+    },
+} as ComponentMeta<typeof Exporter>
+
+const Template: ComponentStory<typeof Exporter> = (props) => {
+    useEffect(() => {
+        document.body.className = ''
+        document.documentElement.className = `export-type-${props.type}`
+    }, [props.type])
+    return (
+        <div className={`storybook-export-type-${props.type}`}>
+            <Exporter {...props} />
+        </div>
+    )
+}
+
+export const Notebook = Template.bind({})
+Notebook.args = { notebook }

frontend/src/exporter/Exporter.tsx

@@ -14,11 +14,12 @@ import { teamLogic } from 'scenes/teamLogic'
 import { SessionRecordingPlayer } from 'scenes/session-recordings/player/SessionRecordingPlayer'
 import { SessionRecordingPlayerMode } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
 import { exporterViewLogic } from './exporterViewLogic'
+import { ExportedNotebook } from '~/exporter/ExportedNotebook/ExportedNotebook'
 
 export function Exporter(props: ExportedData): JSX.Element {
     // NOTE: Mounting the logic is important as it is used by sub-logics
     const { exportedData } = useValues(exporterViewLogic(props))
-    const { type, dashboard, insight, recording, accessToken, ...exportOptions } = exportedData
+    const { type, dashboard, insight, recording, notebook, accessToken, ...exportOptions } = exportedData
     const { whitelabel, showInspector = false } = exportOptions
 
     const { currentTeam } = useValues(teamLogic)
@@ -83,16 +84,20 @@ export function Exporter(props: ExportedData): JSX.Element {
                     autoPlay={false}
                     noInspector={!showInspector}
                 />
+            ) : notebook ? (
+                <ExportedNotebook notebook={notebook} />
             ) : (
                 <h1 className="text-center p-4">Something went wrong...</h1>
             )}
-            {!whitelabel && dashboard && (
+            {!whitelabel && (dashboard || notebook) && (
                 <div className="text-center pb-4">
                     {type === ExportType.Image ? <Logo className="text-lg" /> : null}
                     <div>
                         Made with{' '}
                         <Link
-                            to="https://posthog.com?utm_medium=in-product&utm_campaign=shared-dashboard"
+                            to={`https://posthog.com?utm_medium=in-product&utm_campaign=shared-${
+                                dashboard ? 'dashboard' : 'notebook'
+                            }`}
                             target="_blank"
                         >
                             PostHog — open-source product analytics

frontend/src/exporter/__mocks__/Exporter.mocks.tsx

@@ -6,6 +6,7 @@ import {
     InsightColor,
     InsightShortId,
     InsightType,
+    NotebookType,
 } from '~/types'
 import { FunnelLayout, ShownAsValue } from 'lib/constants'
 
@@ -1258,3 +1259,92 @@ export const dashboard: DashboardType = {
     effective_privilege_level: 37,
     tags: [],
 }
+
+export const notebook = {
+    short_id: 'BF5V6QRk',
+    title: 'Example Exported Notebook! 🥳',
+    content: {
+        type: 'doc',
+        content: [
+            {
+                type: 'heading',
+                attrs: {
+                    level: 1,
+                },
+                content: [
+                    {
+                        text: 'Example Exported Notebook! 🥳',
+                        type: 'text',
+                    },
+                ],
+            },
+            {
+                type: 'paragraph',
+                content: [
+                    {
+                        text: 'Notebooks are a powerful way of working with all of the various parts of PostHog, allowing you to bring Insights, Replays, Feature Flags, Events and much more into one place. Whether it is an ',
+                        type: 'text',
+                    },
+                    {
+                        text: 'ad-hoc analysis',
+                        type: 'text',
+                        marks: [
+                            {
+                                type: 'bold',
+                            },
+                        ],
+                    },
+                    {
+                        text: ' or a ',
+                        type: 'text',
+                    },
+                    {
+                        text: 'bug investigation',
+                        type: 'text',
+                        marks: [
+                            {
+                                type: 'bold',
+                            },
+                        ],
+                    },
+                    {
+                        text: ' or a ',
+                        type: 'text',
+                    },
+                    {
+                        text: 'feature release',
+                        type: 'text',
+                        marks: [
+                            {
+                                type: 'bold',
+                            },
+                        ],
+                    },
+                    {
+                        text: '. We have only just got started with Notebooks so try it out and let us know what you think.',
+                        type: 'text',
+                    },
+                ],
+            },
+        ],
+    },
+    version: 0,
+    created_at: '2023-06-19T16:05:39.318986Z',
+    created_by: {
+        id: 17167,
+        uuid: '01830cdb-626b-0000-1f82-98ea06a5e75e',
+        distinct_id: 'NqCqvZGlRnjkrqXDUfjrj889UfgJWMV5Gzoluet5W65',
+        first_name: 'Annika',
+        email: 'annika@posthog.com',
+        is_email_verified: true,
+    },
+    last_modified_at: '2023-06-19T16:05:39.318458Z',
+    last_modified_by: {
+        id: 17167,
+        uuid: '01830cdb-626b-0000-1f82-98ea06a5e75e',
+        distinct_id: 'NqCqvZGlRnjkrqXDUfjrj889UfgJWMV5Gzoluet5W65',
+        first_name: 'Annika',
+        email: 'annika@posthog.com',
+        is_email_verified: true,
+    },
+} satisfies NotebookType

frontend/src/exporter/types.ts

@@ -1,4 +1,4 @@
-import { DashboardType, InsightModel, SessionRecordingType } from '~/types'
+import { DashboardType, InsightModel, NotebookType, SessionRecordingType } from '~/types'
 
 export enum ExportType {
     Image = 'image',
@@ -19,5 +19,6 @@ export interface ExportedData extends ExportOptions {
     type: ExportType
     dashboard?: DashboardType
     insight?: InsightModel
+    notebook?: NotebookType
     recording?: SessionRecordingType
 }

frontend/src/lib/api.ts

@@ -22,6 +22,7 @@ import {
     IntegrationType,
     MediaUploadResponse,
     NewEarlyAccessFeatureType,
+    NotebookListItemType,
     NotebookType,
     OrganizationResourcePermissionType,
     OrganizationType,
@@ -519,6 +520,10 @@ class ApiRequest {
         return this.notebooks(teamId).addPathComponent(id)
     }
 
+    public notebookSharing(id: NotebookType['short_id'], teamId?: TeamType['id']): ApiRequest {
+        return this.notebook(id, teamId).addPathComponent('sharing')
+    }
+
     // Batch Exports
     public batchExports(teamId?: TeamType['id']): ApiRequest {
         return this.projectsDetail(teamId).addPathComponent('batch_exports')
@@ -1101,17 +1106,21 @@ const api = {
             dashboardId,
             insightId,
             recordingId,
+            notebookShortId,
         }: {
             dashboardId?: DashboardType['id']
             insightId?: InsightModel['id']
             recordingId?: SessionRecordingType['id']
+            notebookShortId?: NotebookType['short_id']
         }): Promise<SharingConfigurationType | null> {
             return dashboardId
                 ? new ApiRequest().dashboardSharing(dashboardId).get()
                 : insightId
                 ? new ApiRequest().insightSharing(insightId).get()
                 : recordingId
                 ? new ApiRequest().recordingSharing(recordingId).get()
+                : notebookShortId
+                ? new ApiRequest().notebookSharing(notebookShortId).get()
                 : null
         },
 
@@ -1120,10 +1129,12 @@ const api = {
                 dashboardId,
                 insightId,
                 recordingId,
+                notebookShortId,
             }: {
                 dashboardId?: DashboardType['id']
                 insightId?: InsightModel['id']
                 recordingId?: SessionRecordingType['id']
+                notebookShortId?: NotebookType['short_id']
             },
             data: Partial<SharingConfigurationType>
         ): Promise<SharingConfigurationType | null> {
@@ -1133,6 +1144,8 @@ const api = {
                 ? new ApiRequest().insightSharing(insightId).update({ data })
                 : recordingId
                 ? new ApiRequest().recordingSharing(recordingId).update({ data })
+                : notebookShortId
+                ? new ApiRequest().notebookSharing(notebookShortId).update({ data })
                 : null
         },
     },
@@ -1306,6 +1319,10 @@ const api = {
         ): Promise<NotebookType> {
             return await new ApiRequest().notebook(notebookId).update({ data })
         },
+        // TODO do I need this?
+        async listBasic(): Promise<PaginatedResponse<NotebookListItemType>> {
+            return await new ApiRequest().notebooks().withQueryString('basic=true').get()
+        },
         async list(
             contains?: { type: NotebookNodeType; attrs: Record<string, string> }[],
             createdBy?: UserBasicType['uuid'],

frontend/src/lib/components/ResizableTable/columnConfiguratorLogic.ts

@@ -0,0 +1,48 @@
+import type { columnConfiguratorLogicType } from './columnConfiguratorLogicType'
+import { tableConfigLogic } from 'lib/components/ResizableTable/tableConfigLogic'
+import { kea } from 'kea'
+import { teamLogic } from 'scenes/teamLogic'
+
+export interface ColumnConfiguratorLogicProps {
+    selectedColumns: string[] // the columns the table is currently displaying
+}
+
+export const columnConfiguratorLogic = kea<columnConfiguratorLogicType>({
+    path: ['lib', 'components', 'ResizableTable', 'columnConfiguratorLogic'],
+    props: { selectedColumns: [] } as ColumnConfiguratorLogicProps,
+    connect: [tableConfigLogic],
+    actions: {
+        selectColumn: (column: string) => ({ column }),
+        unselectColumn: (column: string) => ({ column }),
+        resetColumns: (columns: string[]) => ({ columns }),
+        setColumns: (columns: string[]) => ({ columns }),
+        toggleSaveAsDefault: true,
+        save: true,
+    },
+    reducers: ({ props }) => ({
+        selectedColumns: [
+            props.selectedColumns,
+            {
+                selectColumn: (state, { column }) => Array.from(new Set([...state, column])),
+                unselectColumn: (state, { column }) => state.filter((c) => c !== column),
+                resetColumns: (_, { columns }) => columns,
+                setColumns: (_, { columns }) => columns,
+            },
+        ],
+        saveAsDefault: [
+            false,
+            {
+                toggleSaveAsDefault: (state) => !state,
+            },
+        ],
+    }),
+    listeners: ({ values, actions }) => ({
+        save: () => {
+            tableConfigLogic.actions.setSelectedColumns(values.selectedColumns)
+            if (values.saveAsDefault) {
+                teamLogic.actions.updateCurrentTeam({ live_events_columns: values.selectedColumns })
+                actions.toggleSaveAsDefault()
+            }
+        },
+    }),
+})