Merge branch 'master' into stylelint

.eslintrc.js

@@ -86,6 +86,11 @@ module.exports = {
                         name: '@ant-design/icons',
                         message: 'Please use icons from the @posthog/icons package instead',
                     },
+                    {
+                        name: 'antd',
+                        importNames: ['Tooltip'],
+                        message: 'Please use Tooltip from @posthog/lemon-ui instead.',
+                    },
                 ],
             },
         ],

.vscode/launch.json

@@ -21,15 +21,15 @@
                 "redbeat.RedBeatScheduler",
                 "--without-heartbeat",
                 "--without-gossip",
-                "--without-mingle"
+                "--without-mingle",
+                "-Ofair",
+                "-n",
+                "node@%h"
             ],
             "env": {
-                "PYTHONUNBUFFERED": "1",
+                "SKIP_ASYNC_MIGRATIONS_SETUP": "0",
                 "DEBUG": "1",
-                "CLICKHOUSE_SECURE": "False",
-                "KAFKA_HOSTS": "localhost:9092",
-                "DATABASE_URL": "postgres://posthog:posthog@localhost:5432/posthog",
-                "WORKER_CONCURRENCY": "2",
+                "BILLING_SERVICE_URL": "https://billing.dev.posthog.dev",
                 "SKIP_SERVICE_VERSION_REQUIREMENTS": "1"
             }
         },

ee/billing/billing_manager.py

@@ -191,15 +191,6 @@ def _get_stripe_portal_url(self, organization: Organization) -> BillingStatus:
 
         return data["url"]
 
-    def _get_plans(self, plan_keys: Optional[str]):
-        res = requests.get(
-            f'{BILLING_SERVICE_URL}/api/plans{"?keys=" + plan_keys if plan_keys else ""}',
-        )
-
-        handle_billing_service_error(res)
-
-        return res.json()
-
     def _get_products(self, organization: Optional[Organization]):
         headers = {}
         params = {"plan": "standard"}

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -1,4 +1,4 @@
-import { CommandPalette } from 'lib/components/CommandPalette'
+import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
 import { useMountedLogic, useValues } from 'kea'
 import { ReactNode, useEffect } from 'react'
 import { Breadcrumbs } from './components/Breadcrumbs'

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx

@@ -81,9 +81,12 @@ export const SidePanelDocs = (): JSX.Element => {
                 <LemonButton
                     size="small"
                     sideIcon={<IconExternal />}
-                    to={currentUrl}
                     targetBlank
-                    onClick={() => closeSidePanel()}
+                    // We can't use the normal `to` property as that is intercepted to open this panel :D
+                    onClick={() => {
+                        window.open(currentUrl, '_blank')?.focus()
+                        closeSidePanel()
+                    }}
                 >
                     Open in new tab
                 </LemonButton>

frontend/src/layout/navigation/TopBar/TopBar.tsx

@@ -4,7 +4,7 @@ import { SitePopover } from './SitePopover'
 import { Announcement } from './Announcement'
 import { navigationLogic } from '../navigationLogic'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { CommandPalette } from 'lib/components/CommandPalette'
+import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
 import { Link } from 'lib/lemon-ui/Link'
 import { IconMenu, IconMenuOpen } from 'lib/lemon-ui/icons'
 import './TopBar.scss'

frontend/src/lib/api.ts

@@ -1258,7 +1258,7 @@ const api = {
             const params = toParams(
                 {
                     limit: LOGS_PORTION_LIMIT,
-                    type_filter: typeFilters,
+                    level_filter: typeFilters,
                     search: searchTerm || undefined,
                     before: trailingEntry?.timestamp,
                     after: leadingEntry?.timestamp,

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

@@ -55,6 +55,7 @@ import { insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz'
 import { getCachedResults } from '~/queries/nodes/InsightViz/utils'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 type DisplayedType = ChartDisplayType | 'RetentionContainer' | 'FunnelContainer' | 'PathsContainer'
 
@@ -278,9 +279,8 @@ function InsightCardInternal(
 
     const { insightLoading } = useValues(insightLogic(insightLogicProps))
     const { insightDataLoading } = useValues(insightDataLogic(insightLogicProps))
-    const { isFunnelWithEnoughSteps, hasFunnelResults, areExclusionFiltersValid } = useValues(
-        funnelDataLogic(insightLogicProps)
-    )
+    const { hasFunnelResults } = useValues(funnelDataLogic(insightLogicProps))
+    const { isFunnelWithEnoughSteps, areExclusionFiltersValid } = useValues(insightVizDataLogic(insightLogicProps))
 
     let tooFewFunnelSteps = false
     let invalidFunnelExclusion = false

frontend/src/lib/components/CommandBar/ActionBar.tsx

@@ -0,0 +1,19 @@
+import { useValues } from 'kea'
+
+import { actionBarLogic } from './actionBarLogic'
+
+import ActionInput from './ActionInput'
+import ActionResults from './ActionResults'
+
+const ActionBar = (): JSX.Element => {
+    const { activeFlow } = useValues(actionBarLogic)
+
+    return (
+        <div className="flex flex-col h-full">
+            {(!activeFlow || activeFlow.instruction) && <ActionInput />}
+            {<ActionResults />}
+        </div>
+    )
+}
+
+export default ActionBar

frontend/src/lib/components/CommandBar/ActionInput.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useActions, useValues } from 'kea'
+
+import { LemonInput } from '@posthog/lemon-ui'
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+
+import { actionBarLogic } from './actionBarLogic'
+import { IconChevronRight, IconEdit } from 'lib/lemon-ui/icons'
+import { CommandFlow } from 'lib/components/CommandPalette/commandPaletteLogic'
+
+type PrefixIconProps = {
+    activeFlow: CommandFlow | null
+}
+const PrefixIcon = ({ activeFlow }: PrefixIconProps): React.ReactElement | null => {
+    if (activeFlow) {
+        return <activeFlow.icon className="palette__icon" /> ?? <IconEdit className="palette__icon" />
+    } else {
+        return <IconChevronRight className="palette__icon" />
+    }
+}
+
+const ActionInput = (): JSX.Element => {
+    const { input, activeFlow } = useValues(actionBarLogic)
+    const { setInput } = useActions(actionBarLogic)
+
+    return (
+        <div className="border-b">
+            <LemonInput
+                size="small"
+                className="CommandBar__input"
+                fullWidth
+                prefix={<PrefixIcon activeFlow={activeFlow} />}
+                suffix={<KeyboardShortcut escape muted />}
+                placeholder={activeFlow?.instruction ?? 'What would you like to do? Try some suggestions…'}
+                autoFocus
+                value={input}
+                onChange={setInput}
+            />
+        </div>
+    )
+}
+
+export default ActionInput

frontend/src/lib/components/CommandBar/ActionResult.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react'
+import { useActions } from 'kea'
+
+import { actionBarLogic } from './actionBarLogic'
+import { getNameFromActionScope } from './utils'
+import { CommandResultDisplayable } from '../CommandPalette/commandPaletteLogic'
+
+type SearchResultProps = {
+    result: CommandResultDisplayable
+    focused: boolean
+}
+
+const ActionResult = ({ result, focused }: SearchResultProps): JSX.Element => {
+    const { executeResult, onMouseEnterResult, onMouseLeaveResult } = useActions(actionBarLogic)
+
+    const ref = useRef<HTMLDivElement | null>(null)
+    const isExecutable = !!result.executor
+
+    useEffect(() => {
+        if (focused) {
+            ref.current?.scrollIntoView()
+        }
+    }, [focused])
+
+    return (
+        <div className={`border-l-4 ${isExecutable ? 'border-primary' : ''}`}>
+            <div
+                className={`w-full pl-3 pr-2 ${
+                    focused ? 'bg-secondary-3000-hover' : 'bg-secondary-3000'
+                } border-b cursor-pointer`}
+                onMouseEnter={() => {
+                    onMouseEnterResult(result.index)
+                }}
+                onMouseLeave={() => {
+                    onMouseLeaveResult()
+                }}
+                onClick={() => {
+                    if (isExecutable) {
+                        executeResult(result)
+                    }
+                }}
+                ref={ref}
+            >
+                <div className="px-2 py-3 w-full space-y-0.5 flex flex-col items-start">
+                    {result.source.scope && (
+                        <span className="text-muted-3000 text-xs">{getNameFromActionScope(result.source.scope)}</span>
+                    )}
+                    <span className="text-text-3000">{result.display}</span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ActionResult

frontend/src/lib/components/CommandBar/ActionResults.tsx

@@ -0,0 +1,42 @@
+import { useValues } from 'kea'
+
+import { CommandResultDisplayable } from '../CommandPalette/commandPaletteLogic'
+
+import { actionBarLogic } from './actionBarLogic'
+import ActionResult from './ActionResult'
+import { getNameFromActionScope } from 'lib/components/CommandBar/utils'
+
+type ResultsGroupProps = {
+    scope: string
+    results: CommandResultDisplayable[]
+    activeResultIndex: number
+}
+
+const ResultsGroup = ({ scope, results, activeResultIndex }: ResultsGroupProps): JSX.Element => {
+    return (
+        <>
+            <div className="border-b pl-3 pr-2 pt-1 pb-1 bg-bg-3000-light">{getNameFromActionScope(scope)}</div>
+            {results.map((result) => (
+                <ActionResult
+                    key={`command_result_${result.index}`}
+                    result={result}
+                    focused={result.index === activeResultIndex}
+                />
+            ))}
+        </>
+    )
+}
+
+const ActionResults = (): JSX.Element => {
+    const { commandSearchResultsGrouped, activeResultIndex } = useValues(actionBarLogic)
+
+    return (
+        <div className="grow overscroll-none overflow-y-auto">
+            {commandSearchResultsGrouped.map(([scope, results]) => (
+                <ResultsGroup key={scope} scope={scope} results={results} activeResultIndex={activeResultIndex} />
+            ))}
+        </div>
+    )
+}
+
+export default ActionResults

frontend/src/lib/components/CommandBar/CommandBar.tsx

@@ -0,0 +1,30 @@
+import { useRef } from 'react'
+import { useActions, useValues } from 'kea'
+
+import { useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
+
+import { commandBarLogic } from './commandBarLogic'
+import { BarStatus } from './types'
+
+import './index.scss'
+import SearchBar from './SearchBar'
+import { LemonModal } from '@posthog/lemon-ui'
+import ActionBar from './ActionBar'
+
+function CommandBar(): JSX.Element | null {
+    const containerRef = useRef<HTMLDivElement | null>(null)
+    const { barStatus } = useValues(commandBarLogic)
+    const { hideCommandBar } = useActions(commandBarLogic)
+
+    useOutsideClickHandler(containerRef, hideCommandBar, [])
+
+    return (
+        <LemonModal isOpen={barStatus !== BarStatus.HIDDEN} simple closable={false} width={800}>
+            <div className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col" ref={containerRef}>
+                {barStatus === BarStatus.SHOW_SEARCH ? <SearchBar /> : <ActionBar />}
+            </div>
+        </LemonModal>
+    )
+}
+
+export default CommandBar

frontend/src/lib/components/CommandBar/SearchBar.tsx

@@ -0,0 +1,21 @@
+import { useMountedLogic } from 'kea'
+
+import { searchBarLogic } from './searchBarLogic'
+
+import SearchInput from './SearchInput'
+import SearchResults from './SearchResults'
+import SearchTabs from './SearchTabs'
+
+const SearchBar = (): JSX.Element => {
+    useMountedLogic(searchBarLogic) // load initial results
+
+    return (
+        <div className="flex flex-col h-full">
+            <SearchInput />
+            <SearchResults />
+            <SearchTabs />
+        </div>
+    )
+}
+
+export default SearchBar

frontend/src/lib/components/CommandBar/SearchBarTab.tsx

@@ -0,0 +1,23 @@
+import { useActions } from 'kea'
+
+import { resultTypeToName } from './constants'
+import { searchBarLogic } from './searchBarLogic'
+import { ResultTypeWithAll } from './types'
+
+type SearchBarTabProps = {
+    type: ResultTypeWithAll
+    active: boolean
+    count?: number | null
+}
+
+const SearchBarTab = ({ type, active, count }: SearchBarTabProps): JSX.Element => {
+    const { setActiveTab } = useActions(searchBarLogic)
+    return (
+        <div className={`px-3 py-2 cursor-pointer text-xs ${active && 'font-bold'}`} onClick={() => setActiveTab(type)}>
+            {resultTypeToName[type]}
+            {count != null && <span className="ml-1 text-xxs text-muted-3000">{count}</span>}
+        </div>
+    )
+}
+
+export default SearchBarTab

frontend/src/lib/components/CommandBar/SearchInput.tsx

@@ -0,0 +1,28 @@
+import { useActions, useValues } from 'kea'
+
+import { LemonInput } from '@posthog/lemon-ui'
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+
+import { searchBarLogic } from './searchBarLogic'
+
+const SearchInput = (): JSX.Element => {
+    const { searchQuery } = useValues(searchBarLogic)
+    const { setSearchQuery } = useActions(searchBarLogic)
+
+    return (
+        <div className="border-b">
+            <LemonInput
+                type="search"
+                size="small"
+                className="CommandBar__input"
+                fullWidth
+                suffix={<KeyboardShortcut escape muted />}
+                autoFocus
+                value={searchQuery}
+                onChange={setSearchQuery}
+            />
+        </div>
+    )
+}
+
+export default SearchInput