Merge branch 'master' into dn/action-filter-dnd

.storybook/preview.tsx

@@ -15,6 +15,17 @@ const setupMsw = () => {
     // Make sure the msw worker is started
     worker.start({
         quiet: true,
+        onUnhandledRequest(request, print) {
+            // MSW warns on all unhandled requests, but we don't necessarily care
+            const pathAllowList = ['/images/']
+
+            if (pathAllowList.some((path) => request.url.pathname.startsWith(path))) {
+                return
+            }
+
+            // Otherwise, default MSW warning behavior
+            print.warning()
+        },
     })
     ;(window as any).__mockServiceWorker = worker
     ;(window as any).POSTHOG_APP_CONTEXT = getStorybookAppContext()

cypress/e2e/notebooks.cy.ts

@@ -7,16 +7,23 @@ describe('Notebooks', () => {
                 'loadSessionRecordingsList'
             )
         })
+
         cy.fixture('api/session-recordings/recording.json').then((recording) => {
             cy.intercept('GET', /api\/projects\/\d+\/session_recordings\/.*\?.*/, { body: recording }).as(
                 'loadSessionRecording'
             )
         })
+
         cy.fixture('api/notebooks/notebooks.json').then((notebook) => {
             cy.intercept('GET', /api\/projects\/\d+\/notebooks\//, { body: notebook }).as('loadNotebooksList')
         })
+
         cy.fixture('api/notebooks/notebook.json').then((notebook) => {
             cy.intercept('GET', /api\/projects\/\d+\/notebooks\/.*\//, { body: notebook }).as('loadNotebook')
+            // this means saving doesn't work but so what?
+            cy.intercept('PATCH', /api\/projects\/\d+\/notebooks\/.*\//, (req, res) => {
+                res.reply(req.body)
+            }).as('patchNotebook')
         })
 
         cy.clickNavMenu('dashboards')
@@ -53,4 +60,45 @@ describe('Notebooks', () => {
         cy.get('.ph-recording.NotebookNode').should('be.visible')
         cy.get('.NotebookRecordingTimestamp').should('contain.text', '0:00')
     })
+
+    it('Can add a number list', () => {
+        cy.get('li').contains('Notebooks').should('exist').click()
+        cy.get('[data-attr="new-notebook"]').click()
+        // we don't actually get a new notebook because the API is mocked
+        // so, press enter twice to "exit" the timestamp block we start in
+        cy.get('.NotebookEditor').type('{enter}{enter}')
+        cy.get('.NotebookEditor').type('{enter}')
+        cy.get('.NotebookEditor').type('1. the first')
+        cy.get('.NotebookEditor').type('{enter}')
+        // no need to type the number now. it should be inserted automatically
+        cy.get('.NotebookEditor').type('the second')
+        cy.get('.NotebookEditor').type('{enter}')
+        cy.get('ol').should('contain.text', 'the first')
+        cy.get('ol').should('contain.text', 'the second')
+        // the numbered list auto inserts the next list item
+        cy.get('.NotebookEditor ol li').should('have.length', 3)
+    })
+
+    it('Can add bold', () => {
+        cy.get('li').contains('Notebooks').should('exist').click()
+        cy.get('[data-attr="new-notebook"]').click()
+        // we don't actually get a new notebook because the API is mocked
+        // so, press enter twice to "exit" the timestamp block we start in
+        cy.get('.NotebookEditor').type('{enter}{enter}')
+        cy.get('.NotebookEditor').type('**bold**')
+        cy.get('.NotebookEditor p').last().should('contain.html', '<strong>bold</strong>')
+    })
+
+    it('Can add bullet list', () => {
+        cy.get('li').contains('Notebooks').should('exist').click()
+        cy.get('[data-attr="new-notebook"]').click()
+        // we don't actually get a new notebook because the API is mocked
+        // so, press enter twice to "exit" the timestamp block we start in
+        cy.get('.NotebookEditor').type('{enter}{enter}')
+        cy.get('.NotebookEditor').type('* the first{enter}the second{enter}')
+        cy.get('ul').should('contain.text', 'the first')
+        cy.get('ul').should('contain.text', 'the second')
+        // the list auto inserts the next list item
+        cy.get('.NotebookEditor ul li').should('have.length', 3)
+    })
 })

frontend/src/lib/api.ts

@@ -1321,7 +1321,7 @@ const api = {
         },
         async update(
             notebookId: NotebookType['short_id'],
-            data: Pick<NotebookType, 'version' | 'content' | 'title'>
+            data: Pick<NotebookType, 'version' | 'content' | 'text_content' | 'title'>
         ): Promise<NotebookType> {
             return await new ApiRequest().notebook(notebookId).update({ data })
         },
@@ -1352,7 +1352,7 @@ const api = {
             }
             return await apiRequest.withQueryString(q).get()
         },
-        async create(data?: Pick<NotebookType, 'content' | 'title'>): Promise<NotebookType> {
+        async create(data?: Pick<NotebookType, 'content' | 'text_content' | 'title'>): Promise<NotebookType> {
             return await new ApiRequest().notebooks().create({ data })
         },
         async delete(notebookId: NotebookType['short_id']): Promise<NotebookType> {

frontend/src/lib/components/Cards/TextCard/TextCard.scss

@@ -9,13 +9,13 @@
     overflow-y: auto;
 
     ul {
-        list-style: disc;
-        padding-inline-start: 1.5em;
+        list-style-type: disc;
+        list-style-position: inside;
     }
 
     ol {
-        list-style: numeric;
-        padding-inline-start: 1.5em;
+        list-style-type: numeric;
+        list-style-position: inside;
     }
 
     img {

frontend/src/lib/components/Cards/TextCard/TextCard.tsx

@@ -24,15 +24,15 @@ interface TextCardProps extends React.HTMLAttributes<HTMLDivElement>, Resizeable
     showEditingControls?: boolean
 }
 
-interface TextCardBodyProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+interface TextCardBodyProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
     text: string
     closeDetails?: () => void
 }
 
-export function TextContent({ text, closeDetails, style }: TextCardBodyProps): JSX.Element {
+export function TextContent({ text, closeDetails, style, className }: TextCardBodyProps): JSX.Element {
     return (
         // eslint-disable-next-line react/forbid-dom-props
-        <div className="p-2 w-full overflow-auto" onClick={() => closeDetails?.()} style={style}>
+        <div className={clsx('p-2 w-full overflow-auto', className)} onClick={() => closeDetails?.()} style={style}>
             <ReactMarkdown>{text}</ReactMarkdown>
         </div>
     )

frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx

@@ -43,7 +43,6 @@ import { groupDisplayId } from 'scenes/persons/GroupActorDisplay'
 import { infiniteListLogicType } from 'lib/components/TaxonomicFilter/infiniteListLogicType'
 import { updatePropertyDefinitions } from '~/models/propertyDefinitionsModel'
 import { InlineHogQLEditor } from './InlineHogQLEditor'
-import { FEATURE_FLAGS } from 'lib/constants'
 
 export const eventTaxonomicGroupProps: Pick<TaxonomicFilterGroup, 'getPopoverHeader' | 'getIcon'> = {
     getPopoverHeader: (eventDefinition: EventDefinition): string => {
@@ -79,8 +78,6 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
             ['groupTypes', 'aggregationLabel'],
             groupPropertiesModel,
             ['allGroupProperties'],
-            featureFlagsLogic,
-            ['featureFlags'],
         ],
     },
     actions: () => ({
@@ -150,15 +147,13 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                 s.groupAnalyticsTaxonomicGroupNames,
                 s.eventNames,
                 s.excludedProperties,
-                s.featureFlags,
             ],
             (
                 teamId,
                 groupAnalyticsTaxonomicGroups,
                 groupAnalyticsTaxonomicGroupNames,
                 eventNames,
-                excludedProperties,
-                featureFlags
+                excludedProperties
             ): TaxonomicFilterGroup[] => {
                 const groups = [
                     {
@@ -404,6 +399,16 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                         getValue: (dashboard: DashboardType) => dashboard.id,
                         getPopoverHeader: () => `Dashboards`,
                     },
+                    {
+                        name: 'Notebooks',
+                        searchPlaceholder: 'notebooks',
+                        type: TaxonomicFilterGroupType.Notebooks,
+                        value: 'notebooks',
+                        endpoint: `api/projects/${teamId}/notebooks/`,
+                        getName: (notebook: NotebookType) => notebook.title || `Notebook ${notebook.short_id}`,
+                        getValue: (notebook: NotebookType) => notebook.short_id,
+                        getPopoverHeader: () => 'Notebooks',
+                    },
                     {
                         name: 'Sessions',
                         searchPlaceholder: 'sessions',
@@ -429,19 +434,6 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                     ...groupAnalyticsTaxonomicGroupNames,
                 ]
 
-                if (featureFlags[FEATURE_FLAGS.NOTEBOOKS]) {
-                    groups.push({
-                        name: 'Notebooks',
-                        searchPlaceholder: 'notebooks',
-                        type: TaxonomicFilterGroupType.Notebooks,
-                        value: 'notebooks',
-                        endpoint: `api/projects/${teamId}/notebooks/`,
-                        getName: (notebook: NotebookType) => notebook.title || `Notebook ${notebook.short_id}`,
-                        getValue: (notebook: NotebookType) => notebook.short_id,
-                        getPopoverHeader: () => 'Notebooks',
-                    })
-                }
-
                 return groups
             },
         ],

frontend/src/lib/constants.tsx

@@ -166,6 +166,7 @@ export const FEATURE_FLAGS = {
     // owner: #team-monitoring
     SESSION_RECORDING_ALLOW_V1_SNAPSHOTS: 'session-recording-allow-v1-snapshots',
     HOGQL_INSIGHTS: 'hogql-insights', // owner: @mariusandra
+    WEBHOOKS_DENYLIST: 'webhooks-denylist', // owner: #team-pipeline
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss

@@ -34,3 +34,15 @@
         border: 1px solid var(--danger);
     }
 }
+
+.LemonTextArea--preview {
+    ul {
+        list-style-type: disc;
+        list-style-position: inside;
+    }
+
+    ol {
+        list-style-type: decimal;
+        list-style-position: inside;
+    }
+}

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

@@ -138,7 +138,11 @@ export function LemonTextMarkdown({ value, onChange, ...editAreaProps }: LemonTe
                 {
                     key: 'preview',
                     label: 'Preview',
-                    content: value ? <TextContent text={value} /> : <i>Nothing to preview</i>,
+                    content: value ? (
+                        <TextContent text={value} className={'LemonTextArea--preview'} />
+                    ) : (
+                        <i>Nothing to preview</i>
+                    ),
                 },
             ]}
         />

frontend/src/mocks/handlers.ts

@@ -82,6 +82,10 @@ export const defaultMocks: Mocks = {
         },
         // We don't want to show the "new version available" banner in tests
         'https://api.github.com/repos/posthog/posthog-js/tags': () => [200, []],
+        'https://www.gravatar.com/avatar/:gravatar_id': () => [404, ''],
+        'https://app.posthog.com/api/early_access_features': {
+            earlyAccessFeatures: [],
+        },
     },
     post: {
         'https://app.posthog.com/e/': (): MockSignature => [200, 'ok'],