-
- )
-}
diff --git a/frontend/src/layout/TopContent/CommandPaletteButton.tsx b/frontend/src/layout/TopContent/CommandPaletteButton.tsx
new file mode 100644
index 00000000000..583f2fead3f
--- /dev/null
+++ b/frontend/src/layout/TopContent/CommandPaletteButton.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { useActions, useValues } from 'kea'
+import { commandPaletteLogic } from 'lib/components/CommandPalette/commandPaletteLogic'
+import { SearchOutlined } from '@ant-design/icons'
+import { platformCommandControlKey } from 'lib/utils'
+
+export function CommandPaletteButton(): JSX.Element {
+ const { isPaletteShown } = useValues(commandPaletteLogic)
+ const { showPalette } = useActions(commandPaletteLogic)
+
+ return (
+
+
-
-
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandPalette/CommandInput.tsx b/frontend/src/lib/components/CommandPalette/CommandInput.tsx
new file mode 100644
index 00000000000..d16616826ce
--- /dev/null
+++ b/frontend/src/lib/components/CommandPalette/CommandInput.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { SearchOutlined, EditOutlined } from '@ant-design/icons'
+import { useValues, useActions } from 'kea'
+import { commandPaletteLogic } from './commandPaletteLogic'
+import PostHogIcon from './../../../../public/icon-white.svg'
+import rrwebBlockClass from 'lib/utils/rrwebBlockClass'
+
+export function CommandInput(): JSX.Element {
+ const { input, isSqueak, activeFlow } = useValues(commandPaletteLogic)
+ const { setInput } = useActions(commandPaletteLogic)
+
+ return (
+
+ {!isMobile() &&
+
+
+
+ {isSqueak ? (
+ 
+ ) : activeFlow ? (
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandPalette/CommandResults.tsx b/frontend/src/lib/components/CommandPalette/CommandResults.tsx
new file mode 100644
index 00000000000..12c20e67d52
--- /dev/null
+++ b/frontend/src/lib/components/CommandPalette/CommandResults.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { CommandResult as CommandResultType } from './commandPaletteLogic'
+import { useEventListener } from 'lib/hooks/useEventListener'
+import { useActions, useMountedLogic, useValues } from 'kea'
+import { commandPaletteLogic } from './commandPaletteLogic'
+
+interface CommandResultProps {
+ result: CommandResultType
+ focused?: boolean
+}
+
+function CommandResult({ result, focused }: CommandResultProps): JSX.Element {
+ const { onMouseEnterResult, onMouseLeaveResult, executeResult } = useActions(commandPaletteLogic)
+
+ const isExecutable = !!result.executor
+
+ return (
+ {
+ onMouseEnterResult(result.index)
+ }}
+ onMouseLeave={() => {
+ onMouseLeaveResult()
+ }}
+ onClick={() => {
+ if (isExecutable) executeResult(result)
+ }}
+ >
+
+ )
+}
+
+interface ResultsGroupProps {
+ scope: string
+ results: CommandResultType[]
+ activeResultIndex: number
+}
+
+export function ResultsGroup({ scope, results, activeResultIndex }: ResultsGroupProps): JSX.Element {
+ return (
+ <>
+ {result.display}
+ {scope}
+ {results.map((result) => (
+
+ {commandSearchResultsGrouped.map(([scope, results]) => (
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandPalette/commandPaletteLogic.ts b/frontend/src/lib/components/CommandPalette/commandPaletteLogic.ts
new file mode 100644
index 00000000000..42c28957d73
--- /dev/null
+++ b/frontend/src/lib/components/CommandPalette/commandPaletteLogic.ts
@@ -0,0 +1,680 @@
+import { kea } from 'kea'
+import { router } from 'kea-router'
+import { commandPaletteLogicType } from 'types/lib/components/CommandPalette/commandPaletteLogicType'
+import Fuse from 'fuse.js'
+import { dashboardsModel } from '~/models/dashboardsModel'
+import { Parser } from 'expr-eval'
+import _ from 'lodash'
+import {
+ CommentOutlined,
+ FundOutlined,
+ RiseOutlined,
+ ContainerOutlined,
+ AimOutlined,
+ CheckOutlined,
+ SyncOutlined,
+ TagOutlined,
+ ClockCircleOutlined,
+ UserOutlined,
+ UsergroupAddOutlined,
+ ExperimentOutlined,
+ SettingOutlined,
+ MessageOutlined,
+ TeamOutlined,
+ LinkOutlined,
+ CalculatorOutlined,
+ FunnelPlotOutlined,
+ GatewayOutlined,
+ InteractionOutlined,
+ MailOutlined,
+ KeyOutlined,
+ VideoCameraOutlined,
+ SendOutlined,
+ LogoutOutlined,
+ PlusOutlined,
+ LineChartOutlined,
+} from '@ant-design/icons'
+import { DashboardType } from '~/types'
+import api from 'lib/api'
+import { appUrlsLogic } from '../AppEditorLink/appUrlsLogic'
+import { copyToClipboard, isURL } from 'lib/utils'
+import { personalAPIKeysLogic } from '../PersonalAPIKeys/personalAPIKeysLogic'
+
+// If CommandExecutor returns CommandFlow, flow will be entered
+export type CommandExecutor = () => CommandFlow | void
+
+export interface CommandResultTemplate {
+ icon: any // any, because Ant Design icons are some weird ForwardRefExoticComponent type
+ display: string
+ synonyms?: string[]
+ prefixApplied?: string
+ executor?: CommandExecutor | true // true means "just clear input"
+ guarantee?: boolean // show result always and first, regardless of fuzzy search
+}
+
+export type CommandResult = CommandResultTemplate & {
+ source: Command | CommandFlow
+ index?: number
+}
+
+export type CommandResolver = (
+ argument?: string,
+ prefixApplied?: string
+) => CommandResultTemplate[] | CommandResultTemplate | null
+
+export interface Command {
+ key: string // Unique command identification key
+ prefixes?: string[] // Command prefixes, e.g. "go to". Prefix-less case is dynamic base command (e.g. Dashboard)
+ resolver: CommandResolver | CommandResultTemplate[] | CommandResultTemplate // Resolver based on arguments (prefix excluded)
+ scope: string
+}
+
+export interface CommandFlow {
+ icon?: any
+ instruction?: string
+ resolver: CommandResolver | CommandResultTemplate[] | CommandResultTemplate
+ scope: string
+}
+
+export type CommandRegistrations = {
+ [commandKey: string]: Command
+}
+
+export type RegExpCommandPairs = [RegExp | null, Command][]
+
+const RESULTS_MAX = 5
+
+const GLOBAL_COMMAND_SCOPE = 'global'
+
+function resolveCommand(source: Command | CommandFlow, argument?: string, prefixApplied?: string): CommandResult[] {
+ // run resolver or use ready-made results
+ let results = source.resolver instanceof Function ? source.resolver(argument, prefixApplied) : source.resolver
+ if (!results) return [] // skip if no result
+ if (!Array.isArray(results)) results = [results] // work with a single result and with an array of results
+ const resultsWithCommand: CommandResult[] = results.map((result) => {
+ return { ...result, source }
+ })
+ return resultsWithCommand
+}
+
+export const commandPaletteLogic = kea<
+ commandPaletteLogicType
+
+ )
+}
diff --git a/frontend/src/lib/components/CompareFilter/compareFilterLogic.js b/frontend/src/lib/components/CompareFilter/compareFilterLogic.js
index 1e168273fde..55d232dcba2 100644
--- a/frontend/src/lib/components/CompareFilter/compareFilterLogic.js
+++ b/frontend/src/lib/components/CompareFilter/compareFilterLogic.js
@@ -5,12 +5,14 @@ import { objectsEqual } from 'lib/utils'
export const compareFilterLogic = kea({
actions: () => ({
setCompare: (compare) => ({ compare }),
+ toggleCompare: true,
}),
reducers: ({ actions }) => ({
compare: [
false,
{
[actions.setCompare]: (_, { compare }) => compare,
+ [actions.toggleCompare]: (previousCompare) => !previousCompare,
},
],
}),
diff --git a/frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx b/frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx
index 91b3c6d94bd..40facf1eacd 100644
--- a/frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx
+++ b/frontend/src/lib/components/PersonalAPIKeys/PersonalAPIKeys.tsx
@@ -62,7 +62,11 @@ function CreateKeyModal({
}
function RowValue(value: string): JSX.Element {
- return value ?
+ {(!activeFlow || activeFlow.instruction) &&
+
+ <>
+
+
-