fix: remove query params from notebooks parsing (#25802)

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

@@ -13,6 +13,7 @@ import { IconPeople, IconPerson, IconTrends } from '@posthog/icons'
 import { Query } from '~/queries/Query/Query'
 import { LemonDivider, LemonTag } from '@posthog/lemon-ui'
 import { DataTableNode, NodeKind } from '~/queries/schema'
+import { INTEGER_REGEX_MATCH_GROUPS } from './utils'
 
 const Component = ({ attributes }: NotebookNodeProps<NotebookNodeCohortAttributes>): JSX.Element => {
     const { id } = attributes
@@ -163,7 +164,7 @@ export const NotebookNodeCohort = createPostHogWidgetNode<NotebookNodeCohortAttr
         id: {},
     },
     pasteOptions: {
-        find: urls.cohort('(.+)'),
+        find: urls.cohort(INTEGER_REGEX_MATCH_GROUPS),
         getAttributes: async (match) => {
             return { id: parseInt(match[1]) }
         },

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

@@ -15,6 +15,7 @@ import { buildFlagContent } from './NotebookNodeFlag'
 import { useEffect } from 'react'
 import { NotFound } from 'lib/components/NotFound'
 import { IconFlag, IconRocket } from '@posthog/icons'
+import { UUID_REGEX_MATCH_GROUPS } from './utils'
 
 const Component = ({ attributes }: NotebookNodeProps<NotebookNodeEarlyAccessAttributes>): JSX.Element => {
     const { id } = attributes
@@ -129,7 +130,7 @@ export const NotebookNodeEarlyAccessFeature = createPostHogWidgetNode<NotebookNo
         id: {},
     },
     pasteOptions: {
-        find: urls.earlyAccessFeature('') + '(.+)',
+        find: urls.earlyAccessFeature(UUID_REGEX_MATCH_GROUPS),
         getAttributes: async (match) => {
             return { id: match[1] }
         },

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

@@ -18,6 +18,7 @@ import { ExperimentResult } from 'scenes/experiments/ExperimentResult'
 import { NotFound } from 'lib/components/NotFound'
 import { IconFlag, IconFlask } from '@posthog/icons'
 import { ResultsTag, StatusTag } from 'scenes/experiments/ExperimentView/components'
+import { INTEGER_REGEX_MATCH_GROUPS } from './utils'
 
 const Component = ({ attributes }: NotebookNodeProps<NotebookNodeExperimentAttributes>): JSX.Element => {
     const { id } = attributes
@@ -127,9 +128,9 @@ export const NotebookNodeExperiment = createPostHogWidgetNode<NotebookNodeExperi
         id: {},
     },
     pasteOptions: {
-        find: urls.experiment('') + '(.+)',
+        find: urls.experiment(INTEGER_REGEX_MATCH_GROUPS),
         getAttributes: async (match) => {
-            return { id: match[1] as unknown as number }
+            return { id: parseInt(match[1]) }
         },
     },
 })

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

@@ -18,6 +18,7 @@ import { buildSurveyContent } from './NotebookNodeSurvey'
 import { useEffect } from 'react'
 import { NotFound } from 'lib/components/NotFound'
 import { IconFlag, IconRocket } from '@posthog/icons'
+import { INTEGER_REGEX_MATCH_GROUPS } from './utils'
 
 const Component = ({ attributes }: NotebookNodeProps<NotebookNodeFlagAttributes>): JSX.Element => {
     const { id } = attributes
@@ -150,7 +151,7 @@ export const NotebookNodeFlag = createPostHogWidgetNode<NotebookNodeFlagAttribut
         id: {},
     },
     pasteOptions: {
-        find: urls.featureFlag('') + '(.+)',
+        find: urls.featureFlag(INTEGER_REGEX_MATCH_GROUPS),
         getAttributes: async (match) => {
             return { id: match[1] as FeatureFlagLogicProps['id'] }
         },

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

@@ -14,6 +14,7 @@ import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { JSONContent } from '@tiptap/core'
 import { useSummarizeInsight } from 'scenes/insights/summarizeInsight'
+import { SHORT_CODE_REGEX_MATCH_GROUPS } from './utils'
 
 const DEFAULT_QUERY: QuerySchema = {
     kind: NodeKind.DataTableNode,
@@ -242,7 +243,7 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
             : undefined,
     Settings,
     pasteOptions: {
-        find: urls.insightView('(.+)' as InsightShortId),
+        find: urls.insightView(SHORT_CODE_REGEX_MATCH_GROUPS as InsightShortId),
         getAttributes: async (match) => {
             return {
                 query: {

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

@@ -24,6 +24,7 @@ import { asDisplay } from 'scenes/persons/person-utils'
 import { IconComment } from 'lib/lemon-ui/icons'
 import { NotFound } from 'lib/components/NotFound'
 import { IconPerson } from '@posthog/icons'
+import { UUID_REGEX_MATCH_GROUPS } from './utils'
 
 const HEIGHT = 500
 const MIN_HEIGHT = '20rem'
@@ -158,7 +159,7 @@ export const NotebookNodeRecording = createPostHogWidgetNode<NotebookNodeRecordi
         },
     },
     pasteOptions: {
-        find: urls.replaySingle('([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})'),
+        find: urls.replaySingle(UUID_REGEX_MATCH_GROUPS),
         getAttributes: async (match) => {
             return { id: match[1], noInspector: false }
         },

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

@@ -15,6 +15,7 @@ import { SurveyDisplaySummary } from 'scenes/surveys/Survey'
 import { useEffect } from 'react'
 import { NotFound } from 'lib/components/NotFound'
 import { SurveyAppearancePreview } from 'scenes/surveys/SurveyAppearancePreview'
+import { UUID_REGEX_MATCH_GROUPS } from './utils'
 
 const Component = ({ attributes }: NotebookNodeProps<NotebookNodeSurveyAttributes>): JSX.Element => {
     const { id } = attributes
@@ -115,7 +116,7 @@ export const NotebookNodeSurvey = createPostHogWidgetNode<NotebookNodeSurveyAttr
         id: {},
     },
     pasteOptions: {
-        find: urls.survey('') + '(.+)',
+        find: urls.survey(UUID_REGEX_MATCH_GROUPS),
         getAttributes: async (match) => {
             return { id: match[1] }
         },

frontend/src/scenes/notebooks/Nodes/utils.test.tsx

@@ -1,6 +1,14 @@
 import { NodeViewProps } from '@tiptap/core'
-import { useSyncedAttributes } from './utils'
+import {
+    createUrlRegex,
+    INTEGER_REGEX_MATCH_GROUPS,
+    SHORT_CODE_REGEX_MATCH_GROUPS,
+    useSyncedAttributes,
+    UUID_REGEX_MATCH_GROUPS,
+} from './utils'
 import { renderHook, act } from '@testing-library/react'
+import { urls } from 'scenes/urls'
+import { InsightShortId } from '~/types'
 
 describe('notebook node utils', () => {
     jest.useFakeTimers()
@@ -133,4 +141,34 @@ describe('notebook node utils', () => {
             expect(nodeViewProps.updateAttributes).not.toHaveBeenCalled()
         })
     })
+
+    describe('paste matching handlers', () => {
+        it('matches the uuid regex', () => {
+            let url = urls.replaySingle(UUID_REGEX_MATCH_GROUPS)
+            let regex = createUrlRegex(url)
+            let matches = regex.exec('http://localhost/replay/0192c471-b890-7546-9eae-056d98b8c5a8')
+            expect(matches?.[1]).toEqual('0192c471-b890-7546-9eae-056d98b8c5a8')
+
+            url = urls.experiment(INTEGER_REGEX_MATCH_GROUPS)
+            regex = createUrlRegex(url)
+            matches = regex.exec('http://localhost/experiments/12345')
+            expect(matches?.[1]).toEqual('12345')
+
+            url = urls.insightView(SHORT_CODE_REGEX_MATCH_GROUPS as InsightShortId)
+            regex = createUrlRegex(url)
+            matches = regex.exec('http://localhost/insights/TAg12F')
+            expect(matches?.[1]).toEqual('TAg12F')
+        })
+        it('ignores any query params', () => {
+            let url = urls.replaySingle(UUID_REGEX_MATCH_GROUPS)
+            let regex = createUrlRegex(url)
+            let matches = regex.exec('http://localhost/replay/0192c471-b890-7546-9eae-056d98b8c5a8?filters=false')
+            expect(matches?.[1]).toEqual('0192c471-b890-7546-9eae-056d98b8c5a8')
+
+            url = urls.insightView(SHORT_CODE_REGEX_MATCH_GROUPS as InsightShortId)
+            regex = createUrlRegex(url)
+            matches = regex.exec('http://localhost/insights/TAg12F?dashboardId=1234')
+            expect(matches?.[1]).toEqual('TAg12F')
+        })
+    })
 })

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

@@ -6,6 +6,10 @@ import { CustomNotebookNodeAttributes, NotebookNodeAttributes } from '../Noteboo
 import { useCallback, useMemo, useRef } from 'react'
 import { tryJsonParse, uuid } from 'lib/utils'
 
+export const INTEGER_REGEX_MATCH_GROUPS = '([0-9]*)(.*)'
+export const SHORT_CODE_REGEX_MATCH_GROUPS = '([0-9a-zA-Z]*)(.*)'
+export const UUID_REGEX_MATCH_GROUPS = '([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})(.*)'
+
 export function createUrlRegex(path: string | RegExp, origin?: string): RegExp {
     origin = (origin || window.location.origin).replace('.', '\\.')
     return new RegExp(origin + path, 'ig')