Merge branch 'master' into finalize-map

# Conflicts: # package.json
PostHog · Oct 30, 2023 · 8689dbe · 8689dbe
2 parents 2b10614 + 1744d12
commit 8689dbe
Show file tree

Hide file tree

Showing 22 changed files with 560 additions and 216 deletions.
diff --git a/.storybook/decorators/withFeatureFlags.tsx b/.storybook/decorators/withFeatureFlags.tsx
@@ -1,6 +1,12 @@
 import { setFeatureFlags } from '~/mocks/browser'
 import type { Decorator } from '@storybook/react'
 
+declare module '@storybook/types' {
+    interface Parameters {
+        featureFlags?: string[]
+    }
+}
+
 /** Global story decorator that allows setting feature flags.
  *
  * ```ts

diff --git a/.storybook/decorators/withMockDate.tsx b/.storybook/decorators/withMockDate.tsx
@@ -1,6 +1,12 @@
 import type { Decorator } from '@storybook/react'
 import MockDate from 'mockdate'
 
+declare module '@storybook/types' {
+    interface Parameters {
+        mockDate?: string | number | Date
+    }
+}
+
 /** Global story decorator that allows mocking of dates.
  *
  * ```ts

diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -41,7 +41,6 @@ declare module '@storybook/types' {
             /** If taking a component snapshot, you can narrow it down by specifying the selector. */
             snapshotTargetSelector?: string
         }
-        mockDate?: string | number | Date
         msw?: {
             mocks?: Mocks
         }

diff --git a/frontend/__snapshots__/posthog-3000-sidebar--dashboards.png b/frontend/__snapshots__/posthog-3000-sidebar--dashboards.png
diff --git a/frontend/src/layout/navigation-3000/Navigation.stories.tsx b/frontend/src/layout/navigation-3000/Navigation.stories.tsx
@@ -5,6 +5,7 @@ import { router } from 'kea-router'
 import { urls } from 'scenes/urls'
 import { App } from 'scenes/App'
 import { EMPTY_PAGINATED_RESPONSE } from '~/mocks/handlers'
+import { FEATURE_FLAGS } from 'lib/constants'
 
 const meta: Meta = {
     title: 'PostHog 3000/Navigation',
@@ -23,12 +24,12 @@ const meta: Meta = {
         layout: 'fullscreen',
         viewMode: 'story',
         mockDate: '2023-02-01',
+        featureFlags: [FEATURE_FLAGS.POSTHOG_3000],
     },
 }
 export default meta
 
 export function NavigationBase(): JSX.Element {
-    setFeatureFlags(['posthog-3000'])
     useEffect(() => {
         router.actions.push(urls.projectHomepage())
     }, [])
@@ -37,7 +38,7 @@ export function NavigationBase(): JSX.Element {
 }
 
 export function Navigation3000(): JSX.Element {
-    setFeatureFlags(['posthog-3000', 'posthog-3000-nav'])
+    setFeatureFlags([FEATURE_FLAGS.POSTHOG_3000, FEATURE_FLAGS.POSTHOG_3000_NAV])
     useEffect(() => {
         router.actions.push(urls.projectHomepage())
     }, [])

diff --git a/frontend/src/layout/navigation-3000/components/Sidebar.stories.tsx b/frontend/src/layout/navigation-3000/components/Sidebar.stories.tsx
@@ -8,14 +8,15 @@ import { Sidebar } from './Sidebar'
 import featureFlagsJson from '../../../scenes/feature-flags/__mocks__/feature_flags.json'
 import dashboardsJson from '../../../scenes/dashboard/__mocks__/dashboards.json'
 import { SidebarNavbarItem } from '../types'
-import { setFeatureFlags } from '~/mocks/browser'
+import { FEATURE_FLAGS } from 'lib/constants'
 
 const meta: Meta = {
     title: 'PostHog 3000/Sidebar',
     parameters: {
         mockDate: '2023-02-01',
         layout: 'fullscreen',
         viewMode: 'story',
+        featureFlags: [FEATURE_FLAGS.POSTHOG_3000, FEATURE_FLAGS.POSTHOG_3000_NAV],
     },
 }
 export default meta
@@ -32,7 +33,6 @@ const multipliedFeatureFlagsJson = {
 }
 
 export function Dashboards(): JSX.Element {
-    setFeatureFlags(['posthog-3000', 'posthog-3000-nav'])
     useStorybookMocks({
         get: {
             '/api/projects/:team_id/dashboards/': dashboardsJson,
@@ -52,7 +52,6 @@ export function Dashboards(): JSX.Element {
 }
 
 export function FeatureFlags(): JSX.Element {
-    setFeatureFlags(['posthog-3000', 'posthog-3000-nav'])
     useStorybookMocks({
         get: {
             '/api/projects/:team_id/feature_flags/': multipliedFeatureFlagsJson,

diff --git a/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx b/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
@@ -56,6 +56,7 @@ function TableRowRaw<T extends Record<string, any>>({
                 className={clsx(
                     rowClassNameDetermined,
                     rowStatusDetermined && `LemonTable__row--status-${rowStatusDetermined}`,
+                    extraProps?.onClick ? 'hover:underline cursor-pointer hover:bg-primary-highlight' : undefined,
                     className
                 )}
                 // eslint-disable-next-line react/forbid-dom-props

diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -559,6 +559,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                                     (response as any).result.length > 0 ||
                                     !responseLoading) && <LoadNext query={query.source} />
                             }
+                            onRow={context?.rowProps}
                         />
                     )}
                     {/* TODO: this doesn't seem like the right solution... */}

diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts
@@ -1,5 +1,5 @@
 import { InsightLogicProps } from '~/types'
-import { ComponentType } from 'react'
+import { ComponentType, HTMLProps } from 'react'
 import { DataTableNode } from '~/queries/schema'
 
 /** Pass custom metadata to queries. Used for e.g. custom columns in the DataTable. */
@@ -14,6 +14,7 @@ export interface QueryContext {
     insightProps?: InsightLogicProps
     emptyStateHeading?: string
     emptyStateDetail?: string
+    rowProps?: (record: unknown) => Omit<HTMLProps<HTMLTableRowElement>, 'key'>
 }
 
 export type QueryContextColumnTitleComponent = ComponentType<{

diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -138,7 +138,7 @@
         }
     }
 
-    &--compact {
+    &--compact:not(.Notebook--canvas) {
         .NotebookEditor {
             max-width: 800px;
         }

diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
@@ -1,5 +1,4 @@
-import { LemonButton, LemonInput, LemonSelect, LemonCheckbox } from '@posthog/lemon-ui'
-import { Tooltip } from 'antd'
+import { LemonButton, LemonInput, LemonSelect, LemonCheckbox, Tooltip } from '@posthog/lemon-ui'
 import { useValues, useActions } from 'kea'
 import {
     IconInfo,
@@ -17,6 +16,7 @@ import { IconWindow } from 'scenes/session-recordings/player/icons'
 import { playerSettingsLogic } from '../playerSettingsLogic'
 import { SessionRecordingPlayerMode, sessionRecordingPlayerLogic } from '../sessionRecordingPlayerLogic'
 import { playerInspectorLogic } from './playerInspectorLogic'
+import { InspectorSearchInfo } from './components/InspectorSearchInfo'
 
 const TabToIcon = {
     [SessionRecordingPlayerTab.ALL]: undefined,
@@ -88,6 +88,11 @@ export function PlayerInspectorControls(): JSX.Element {
                         type="search"
                         value={searchQuery}
                         fullWidth
+                        suffix={
+                            <Tooltip title={<InspectorSearchInfo />}>
+                                <IconInfo />
+                            </Tooltip>
+                        }
                     />
                 </div>
                 {windowIds.length > 1 ? (

diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/InspectorSearchInfo.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/InspectorSearchInfo.tsx
@@ -0,0 +1,92 @@
+export function InspectorSearchInfo(): JSX.Element {
+    return (
+        <>
+            Searching is "fuzzy" by default meaning that it will try and match many properties that are <i>close</i> to
+            the search query.
+            <br />
+            <table>
+                <thead>
+                    <tr>
+                        <th>Token</th>
+                        <th>Match type</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <code>jscript</code>
+                        </td>
+                        <td>fuzzy-match</td>
+                        <td>
+                            Items that fuzzy match <code>jscript</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>=scheme</code>
+                        </td>
+                        <td>exact-match</td>
+                        <td>
+                            Items that are <code>scheme</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>'python</code>
+                        </td>
+                        <td>include-match</td>
+                        <td>
+                            Items that include <code>python</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>!ruby</code>
+                        </td>
+                        <td>inverse-exact-match</td>
+                        <td>
+                            Items that do not include <code>ruby</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>^java</code>
+                        </td>
+                        <td>prefix-exact-match</td>
+                        <td>
+                            Items that start with <code>java</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>!^earlang</code>
+                        </td>
+                        <td>inverse-prefix-exact-match</td>
+                        <td>
+                            Items that do not start with <code>earlang</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>.js$</code>
+                        </td>
+                        <td>suffix-exact-match</td>
+                        <td>
+                            Items that end with <code>.js</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <code>!.go$</code>
+                        </td>
+                        <td>inverse-suffix-exact-match</td>
+                        <td>
+                            Items that do not end with <code>.go</code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </>
+    )
+}
diff --git a/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts b/frontend/src/scenes/session-recordings/player/inspector/playerInspectorLogic.ts
@@ -713,6 +713,7 @@ export const playerInspectorLogic = kea<playerInspectorLogicType>([
                     findAllMatches: true,
                     ignoreLocation: true,
                     shouldSort: false,
+                    useExtendedSearch: true,
                 }),
         ],