-
-
-
- ))}
- {/* TODO: These buttons below are hardcoded right now, scene-based system coming in the next PR */}
-
-
- {breadcrumb.symbol}
{breadcrumb.name}
{breadcrumb.popover &&
@@ -88,3 +116,15 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
return breadcrumbContent
}
+
+interface HereProps {
+ breadcrumb: IBreadcrumb
+}
+
+function Here({ breadcrumb }: HereProps): JSX.Element {
+ return (
+
+ {breadcrumb.name ||
+ )
+}
diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
index f868dd473b6b4..6a1645dbcfd0e 100644
--- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
+++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
@@ -14,15 +14,18 @@
background: var(--accent-3000);
color: var(--default);
text-transform: capitalize;
+
.KeyboardShortcut--muted > & {
background: none;
color: var(--muted);
}
+
.ant-tooltip & {
color: #fff;
background: rgba(#000, 0.333);
border-color: rgba(#fff, 0.333);
}
+
& + .KeyboardShortcut__key {
margin-left: 0.25rem;
}
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index 26619b7fd6cf2..3ddc730007a56 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -1,7 +1,6 @@
import { LemonBadge } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { IconQuestion, IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
+import { IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
import { Popover } from 'lib/lemon-ui/Popover'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { Scene } from 'scenes/sceneTypes'
@@ -91,17 +90,6 @@ export function Navbar(): JSX.Element {
onClick={() => toggleTheme()}
persistentTooltip
/>
- = React.forwardR
if (tag === 'alpha') {
content = (
<>
- {content}
+ {content}
ALPHA
@@ -54,7 +54,7 @@ export const NavbarButton: FunctionComponent = React.forwardR
} else if (tag === 'beta') {
content = (
<>
- {content}
+ {content}
BETA
@@ -75,6 +75,8 @@ export const NavbarButton: FunctionComponent = React.forwardR
}}
className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
fullWidth
+ type="secondary"
+ stealth={true}
{...buttonProps}
>
{content}
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
index 4f3d08f139753..30c14c722c8d4 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
@@ -17,7 +17,7 @@
top: 0;
right: 0;
max-width: calc(100vw - 3rem);
- box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 30px rgb(0 0 0 / 20%);
[theme='dark'] & {
box-shadow: none;
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
index d011a0a6561de..1f85b5bf928de 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
@@ -98,6 +98,8 @@ export function SidePanel(): JSX.Element | null {
}
data-attr={`sidepanel-tab-${tab}`}
active={activeTab === tab}
+ type="secondary"
+ stealth={true}
>
{label}
diff --git a/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPane.tsx b/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPane.tsx
new file mode 100644
index 0000000000000..db6cab4ca16b8
--- /dev/null
+++ b/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPane.tsx
@@ -0,0 +1,17 @@
+import { LemonButton, Tooltip } from '@posthog/lemon-ui'
+import { useActions } from 'kea'
+import { IconClose } from 'lib/lemon-ui/icons'
+import { sidePanelStateLogic } from '../sidePanelStateLogic'
+
+export function SidePanelPaneHeader({ children }: { children: React.ReactNode }): JSX.Element {
+ const { closeSidePanel } = useActions(sidePanelStateLogic)
+
+ return (
+
+ {children}
+
+
+
+ )
+}
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
index 66672c2370cf1..413219b69f33c 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
@@ -1,13 +1,101 @@
-import { useValues } from 'kea'
-import { sidePanelDocsLogic } from './sidePanelDocsLogic'
+import { useActions, useValues } from 'kea'
+import { POSTHOG_WEBSITE_ORIGIN, sidePanelDocsLogic } from './sidePanelDocsLogic'
+import { useEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { SidePanelPaneHeader } from '../components/SidePanelPane'
+import { LemonButton, LemonSkeleton } from '@posthog/lemon-ui'
+import { IconExternal } from '@posthog/icons'
+import { themeLogic } from '../../themeLogic'
+
+function SidePanelDocsSkeleton(): JSX.Element {
+ return (
+ (null)
+ const [ready, setReady] = useState(false)
+ const { isDarkModeOn } = useValues(themeLogic)
+
+ useEffect(() => {
+ ref.current?.contentWindow?.postMessage(
+ {
+ type: 'theme-toggle',
+ isDarkModeOn,
+ },
+ '*'
+ )
+ }, [isDarkModeOn, ref.current])
+
+ useEffect(() => {
+ const onMessage = (event: MessageEvent): void => {
+ if (event.origin === POSTHOG_WEBSITE_ORIGIN) {
+ if (event.data.type === 'internal-navigation') {
+ updatePath(event.data.url)
+ return
+ }
+ if (event.data.type === 'docs-ready') {
+ setReady(true)
+ return
+ }
+
+ if (event.data.type === 'external-navigation') {
+ // This should only be triggered for app|eu.posthog.com links
+ handleExternalUrl(event.data.url)
+ return
+ }
+
+ console.warn('Unhandled iframe message from Docs:', event.data)
+ }
+ }
+
+ window.addEventListener('message', onMessage)
+
+ return () => window.removeEventListener('message', onMessage)
+ }, [ref.current])
+
+ useEffect(() => {
+ window.addEventListener('beforeunload', unmountIframe)
+
+ return () => {
+ window.removeEventListener('beforeunload', unmountIframe)
+ unmountIframe()
+ }
+ }, [])
- // NOTE: Currently we can't detect url changes from the iframe
return (
-
+
+
+
) : null
@@ -50,6 +78,7 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
+
+
+
+ {breadcrumbs.slice(0, -1).map((breadcrumb, index) => (
+
+
+ ))}
+
+
+ {breadcrumb.name ||
+ )
+}
diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
index f868dd473b6b4..6a1645dbcfd0e 100644
--- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
+++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
@@ -14,15 +14,18 @@
background: var(--accent-3000);
color: var(--default);
text-transform: capitalize;
+
.KeyboardShortcut--muted > & {
background: none;
color: var(--muted);
}
+
.ant-tooltip & {
color: #fff;
background: rgba(#000, 0.333);
border-color: rgba(#fff, 0.333);
}
+
& + .KeyboardShortcut__key {
margin-left: 0.25rem;
}
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index 26619b7fd6cf2..3ddc730007a56 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -1,7 +1,6 @@
import { LemonBadge } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { IconQuestion, IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
+import { IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
import { Popover } from 'lib/lemon-ui/Popover'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { Scene } from 'scenes/sceneTypes'
@@ -91,17 +90,6 @@ export function Navbar(): JSX.Element {
onClick={() => toggleTheme()}
persistentTooltip
/>
-
+
+ )
+}
export const SidePanelDocs = (): JSX.Element => {
- const { path } = useValues(sidePanelDocsLogic)
+ const { iframeSrc, currentUrl } = useValues(sidePanelDocsLogic)
+ const { updatePath, unmountIframe, closeSidePanel, handleExternalUrl } = useActions(sidePanelDocsLogic)
+ const ref = useRef
-
-
+ <>
+
+
+
+ {!ready &&
+
)
}
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSettings.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSettings.tsx
index 2b9009f3f5be8..4ed5684861719 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSettings.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSettings.tsx
@@ -2,10 +2,11 @@ import { useActions, useValues } from 'kea'
import { sidePanelSettingsLogic } from './sidePanelSettingsLogic'
import { Settings } from 'scenes/settings/Settings'
import { LemonButton } from '@posthog/lemon-ui'
-import { IconOpenInNew } from 'lib/lemon-ui/icons'
import { urls } from 'scenes/urls'
import { SettingsLogicProps, settingsLogic } from 'scenes/settings/settingsLogic'
import { useEffect } from 'react'
+import { SidePanelPaneHeader } from '../components/SidePanelPane'
+import { IconExternal } from '@posthog/icons'
export const SidePanelSettings = (): JSX.Element => {
const { settings } = useValues(sidePanelSettingsLogic)
@@ -26,19 +27,16 @@ export const SidePanelSettings = (): JSX.Element => {
return (
-
([
path(['scenes', 'navigation', 'sidepanel', 'sidePanelDocsLogic']),
@@ -14,32 +29,56 @@ export const sidePanelDocsLogic = kea([
actions({
openDocsPage: (urlOrPath: string) => ({ urlOrPath }),
+ updatePath: (path: string) => ({ path }),
+ setInitialPath: (path: string) => ({ path }),
+ unmountIframe: true,
+ handleExternalUrl: (urlOrPath: string) => ({ urlOrPath }),
}),
reducers(() => ({
- path: [
+ currentPath: [
+ null as string | null,
+ {
+ updatePath: (_, { path }) => sanitizePath(path),
+ },
+ ],
+ initialPath: [
'/docs' as string,
+ { persist: true },
{
- openDocsPage: (_, { urlOrPath }) => {
- let path = urlOrPath
- try {
- const url = new URL(urlOrPath)
- if (url.origin === POSTHOG_COM_DOMAIN) {
- path = url.pathname + url.search
- }
- } catch (e) {
- // not a valid URL, continue
- }
-
- return path[0] === '/' ? path : `/${path}`
- },
+ setInitialPath: (_, { path }) => sanitizePath(path),
},
],
})),
- listeners(({ actions }) => ({
- openDocsPage: () => {
+ selectors({
+ iframeSrc: [
+ (s) => [s.initialPath],
+ (initialPath) => {
+ return `${POSTHOG_WEBSITE_ORIGIN}${initialPath ?? ''}`
+ },
+ ],
+ currentUrl: [
+ (s) => [s.currentPath],
+ (currentPath) => {
+ return `${POSTHOG_WEBSITE_ORIGIN}${currentPath ?? ''}`
+ },
+ ],
+ }),
+
+ listeners(({ actions, values }) => ({
+ openDocsPage: ({ urlOrPath }) => {
+ actions.setInitialPath(getPathFromUrl(urlOrPath))
actions.openSidePanel(SidePanelTab.Docs)
},
+
+ unmountIframe: () => {
+ // Update the initialPath so that next time we load it is the same as last time
+ actions.setInitialPath(values.currentPath ?? '/docs')
+ },
+
+ handleExternalUrl: ({ urlOrPath }) => {
+ router.actions.push(getPathFromUrl(urlOrPath))
+ },
})),
])
diff --git a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
index b0c46bb1056c5..a8f42f536616c 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
@@ -35,10 +35,7 @@ export const sidePanelLogic = kea([
tabs.push(SidePanelTab.Support)
}
- if (featureFlags[FEATURE_FLAGS.SIDE_PANEL_DOCS]) {
- tabs.push(SidePanelTab.Docs)
- }
-
+ tabs.push(SidePanelTab.Docs)
tabs.push(SidePanelTab.Settings)
tabs.push(SidePanelTab.Activation)
diff --git a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
index 212405b31e8e9..1d1739651cb09 100644
--- a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
+++ b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
@@ -1,4 +1,4 @@
-import { connect, kea, path, props, selectors } from 'kea'
+import { actions, connect, kea, path, props, reducers, selectors } from 'kea'
import { organizationLogic } from 'scenes/organizationLogic'
import { teamLogic } from 'scenes/teamLogic'
import './Breadcrumbs.scss'
@@ -35,6 +35,17 @@ export const breadcrumbsLogic = kea([
['currentTeam'],
],
})),
+ actions({
+ setActionsContainer: (element: HTMLElement | null) => ({ element }),
+ }),
+ reducers({
+ actionsContainer: [
+ null as HTMLElement | null,
+ {
+ setActionsContainer: (_, { element }) => element,
+ },
+ ],
+ }),
selectors(() => ({
sceneBreadcrumbs: [
(s) => [
diff --git a/frontend/src/layout/navigation/ProjectSwitcher.tsx b/frontend/src/layout/navigation/ProjectSwitcher.tsx
index 8e8c9d5422e82..25f426f7a0e38 100644
--- a/frontend/src/layout/navigation/ProjectSwitcher.tsx
+++ b/frontend/src/layout/navigation/ProjectSwitcher.tsx
@@ -10,7 +10,6 @@ import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
import { AvailableFeature, TeamBasicType } from '~/types'
-import { navigationLogic } from './navigationLogic'
import { globalModalsLogic } from '../GlobalModals'
export function ProjectName({ team }: { team: TeamBasicType }): JSX.Element {
@@ -22,23 +21,22 @@ export function ProjectName({ team }: { team: TeamBasicType }): JSX.Element {
)
}
-export function ProjectSwitcherOverlay(): JSX.Element {
+export function ProjectSwitcherOverlay({ onClickInside }: { onClickInside?: () => void }): JSX.Element {
const { currentOrganization, projectCreationForbiddenReason } = useValues(organizationLogic)
const { currentTeam } = useValues(teamLogic)
const { guardAvailableFeature } = useActions(sceneLogic)
- const { hideProjectSwitcher } = useActions(navigationLogic)
const { showCreateProjectModal } = useActions(globalModalsLogic)
return (
{
- hideProjectSwitcher()
+ onClickInside?.()
updateCurrentTeam(team.id, '/')
}}
sideAction={{
icon:
-
+
+
-
+
+
+ setHedgehogModeEnabled(!hedgehogModeEnabled)}
+ icon={
+
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.scss b/frontend/src/layout/navigation/TopBar/TopBar.scss
index 950c5cfec2565..8e1732a7d2d34 100644
--- a/frontend/src/layout/navigation/TopBar/TopBar.scss
+++ b/frontend/src/layout/navigation/TopBar/TopBar.scss
@@ -12,6 +12,7 @@
background: var(--bg-bridge);
border-bottom: 1px solid var(--border);
gap: 1rem;
+
@include screen($sm) {
padding: 0.5rem 1rem;
}
@@ -63,6 +64,7 @@
.TopBar__lightning-mode-box {
background: var(--bridge) !important;
+
.LemonSwitch__slider {
background-color: var(--border) !important;
}
@@ -112,6 +114,7 @@
cursor: pointer;
font-size: 1.25rem;
padding: 0.125rem;
+
@include screen($sm) {
right: 1rem;
}
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx
index c769d91869ba1..9c307caa1c6f7 100644
--- a/frontend/src/layout/navigation/TopBar/TopBar.tsx
+++ b/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'
@@ -16,12 +16,19 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton'
import { ActivationSidebarToggle } from 'lib/components/ActivationSidebar/ActivationSidebarToggle'
+import { organizationLogic } from 'scenes/organizationLogic'
+import { LemonButtonWithDropdown, Lettermark } from '@posthog/lemon-ui'
+import { ProjectSwitcherOverlay } from '../ProjectSwitcher'
+import { topBarLogic } from './topBarLogic'
export function TopBar(): JSX.Element {
const { isSideBarShown, noSidebar, minimalTopBar, mobileLayout } = useValues(navigationLogic)
const { toggleSideBarBase, toggleSideBarMobile } = useActions(navigationLogic)
const { groupNamesTaxonomicTypes } = useValues(groupsModel)
const { featureFlags } = useValues(featureFlagLogic)
+ const { currentOrganization } = useValues(organizationLogic)
+ const { isProjectSwitcherShown } = useValues(topBarLogic)
+ const { toggleProjectSwitcher, hideProjectSwitcher } = useActions(topBarLogic)
const hasNotebooks = !!featureFlags[FEATURE_FLAGS.NOTEBOOKS]
@@ -71,11 +78,32 @@ export function TopBar(): JSX.Element {
)}
+
closeSidePanel()}
- icon={
- closeSidePanel()}>
- Done
-
-
+
Projects
- {!minimalTopBar && (
+ {!minimalTopBar ? (
<>
{hasNotebooks && ([
+ path(['layout', 'navigation', 'TopBar', 'topBarLogic']),
+ actions({
+ toggleProjectSwitcher: true,
+ hideProjectSwitcher: true,
+ }),
+ reducers({
+ isProjectSwitcherShown: [
+ false,
+ {
+ toggleProjectSwitcher: (state) => !state,
+ hideProjectSwitcher: () => false,
+ },
+ ],
+ }),
+])
diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts
index 2814fbb936b8e..f819384e973e3 100644
--- a/frontend/src/layout/navigation/navigationLogic.ts
+++ b/frontend/src/layout/navigation/navigationLogic.ts
@@ -21,10 +21,10 @@ export type ProjectNoticeVariant =
export const navigationLogic = kea([
path(['layout', 'navigation', 'navigationLogic']),
- connect({
+ connect(() => ({
values: [sceneLogic, ['sceneConfig', 'activeScene'], membersLogic, ['members', 'membersLoading']],
actions: [eventUsageLogic, ['reportProjectNoticeDismissed']],
- }),
+ })),
actions({
toggleSideBarBase: (override?: boolean) => ({ override }), // Only use the override for testing
toggleSideBarMobile: (override?: boolean) => ({ override }), // Only use the override for testing
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index eafca0665aedd..8a550defe3975 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1259,7 +1259,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,
diff --git a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss b/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss
index d91b3aee43f33..267ed27a7a08f 100644
--- a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss
+++ b/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss
@@ -28,13 +28,13 @@
right: 0;
width: 100%;
height: calc(100vh - 3.5rem);
-
display: flex;
flex-direction: column;
overflow: scroll;
> div > ul {
overflow: auto;
+
li {
margin-top: 0.5rem;
}
diff --git a/frontend/src/lib/components/ActivityLog/ActivityLog.tsx b/frontend/src/lib/components/ActivityLog/ActivityLog.tsx
index 9cd152bc34778..17c8c06a1ed40 100644
--- a/frontend/src/lib/components/ActivityLog/ActivityLog.tsx
+++ b/frontend/src/lib/components/ActivityLog/ActivityLog.tsx
@@ -39,7 +39,7 @@ const SkeletonLog = (): JSX.Element => {
, 'className'> {
- setPrimaryHeight?: (primaryHeight: number | undefined) => void
areDetailsShown?: boolean
setAreDetailsShown?: React.Dispatch>
ribbonColor?: InsightColor | null
@@ -31,7 +28,6 @@ export interface CardMetaProps extends Pick
}
export function CardMeta({
- setPrimaryHeight,
ribbonColor,
showEditingControls,
showDetailsControls,
@@ -44,76 +40,65 @@ export function CardMeta({
className,
samplingNotice,
}: CardMetaProps): JSX.Element {
- const { ref: primaryRef, height: primaryHeight, width: primaryWidth } = useResizeObserver()
+ const { ref: primaryRef, width: primaryWidth } = useResizeObserver()
const { ref: detailsRef, height: detailsHeight } = useResizeObserver()
- useEffect(() => {
- setPrimaryHeight?.(primaryHeight)
- }, [primaryHeight])
-
- const foldedHeight = `calc(${primaryHeight}px ${
- showDetailsControls ? '+ 2rem /* margins */' : ''
- } + 1px /* border */)`
- const unfoldedHeight = `calc(${primaryHeight}px + ${
- detailsHeight || 0
- }px + 3.5rem /* margins */ + 3px /* border and spacer */)`
- const transitionStyles = primaryHeight
- ? {
- entering: {
- height: unfoldedHeight,
- },
- entered: {
- height: unfoldedHeight,
- },
- exiting: { height: foldedHeight },
- exited: { height: foldedHeight },
- }
- : {}
-
const showDetailsButtonLabel = !!primaryWidth && primaryWidth > 480
return (
-
- {(transitionState) => (
-
+
+ )
)}
-
-
- {ribbonColor &&
- ribbonColor !==
- InsightColor.White /* White has historically meant no color synonymously to null */ && (
-
+
+
+ {ribbonColor &&
+ ribbonColor !==
+ InsightColor.White /* White has historically meant no color synonymously to null */ && (
+
+ )}
+
)
}
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
index 8176646fac6e3..2dbb9042ea037 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
@@ -8,10 +8,14 @@
border: 1px solid var(--border);
z-index: 3;
background: var(--bg-light);
+ display: flex;
+ flex-direction: column;
+
&--highlighted {
border-color: var(--primary);
outline: 1px solid var(--primary);
}
+
.ant-alert {
margin: 1rem;
width: 100%;
@@ -19,43 +23,45 @@
}
}
-.InsightViz {
- position: absolute;
- bottom: 0;
- left: 0;
+.InsightCard__viz {
+ position: relative;
+ flex: 1;
display: flex;
- align-items: center;
- justify-content: center;
- min-height: 0;
+ flex-direction: column;
width: 100%;
overflow: auto;
+
.LineGraph,
.AnnotationsOverlay {
- padding: 1rem;
+ padding: 0.5rem;
}
+
.insight-empty-state {
height: 100%; // Fix wonkiness when SpinnerOverlay is shown
font-size: 0.875rem; // Reduce font size
padding-top: 0;
padding-bottom: 0;
}
- > :first-child {
- margin-top: auto;
- }
- > :last-child {
- margin-bottom: auto;
+
+ .LemonTable {
+ border: none;
+ border-radius: 0;
+ background: none;
}
}
.InsightDetails {
font-size: 0.8125rem;
line-height: 1.5rem;
+
h5 {
margin-bottom: 0.125rem;
}
+
section:not(:last-child) {
margin-bottom: 0.5rem;
}
+
.LemonRow {
min-height: 2rem;
font-size: inherit;
@@ -67,6 +73,7 @@
padding: 0.5rem;
border-radius: var(--radius);
background: var(--side);
+
.LemonRow {
padding-left: 0;
padding-right: 0;
@@ -82,9 +89,11 @@
.InsightDetails__series {
margin: -0.125rem 0;
+
&:not(:first-child) {
margin-top: 0.5rem;
}
+
.LemonDivider {
width: calc(100% - 1.5rem);
margin-left: 1.5rem;
@@ -104,13 +113,16 @@
.InsightDetails__footer {
display: grid;
grid-template-columns: repeat(2, 1fr);
+
.profile-package {
vertical-align: middle;
}
+
.tz-label {
line-height: normal;
vertical-align: middle;
}
+
.taxonomic-breakdown-filter.tag-pill {
font-size: 0.8125rem;
padding: 0;
@@ -136,9 +148,11 @@
font-size: 0.6875rem;
font-weight: 600;
line-height: 1rem;
+
&.SeriesDisplay__raw-name--action,
&.SeriesDisplay__raw-name--event {
padding: 0.25rem;
+
&::before {
display: inline-block;
flex-shrink: 0;
@@ -153,9 +167,11 @@
font-weight: 700;
}
}
+
&.SeriesDisplay__raw-name--action::before {
content: 'A';
}
+
&.SeriesDisplay__raw-name--event::before {
content: 'E';
}
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
index 8fa80e6934cb9..29a4a050d3d55 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -1,6 +1,6 @@
import clsx from 'clsx'
import { BindLogic, useValues } from 'kea'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
import { Layout } from 'react-grid-layout'
import {
FunnelInvalidExclusionState,
@@ -35,13 +35,7 @@ import { WorldMap } from 'scenes/insights/views/WorldMap'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { BoldNumber } from 'scenes/insights/views/BoldNumber'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
-import {
- isFilterWithDisplay,
- isFunnelsFilter,
- isPathsFilter,
- isRetentionFilter,
- isTrendsFilter,
-} from 'scenes/insights/sharedUtils'
+import { isFilterWithDisplay, isFunnelsFilter, isPathsFilter, isRetentionFilter } from 'scenes/insights/sharedUtils'
import { Resizeable } from 'lib/components/Cards/CardMeta'
import { Query } from '~/queries/Query/Query'
import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
@@ -55,6 +49,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'
@@ -179,7 +174,6 @@ export function FilterBasedCardContent({
insightProps,
loading,
setAreDetailsShown,
- style,
apiErrored,
timedOut,
empty,
@@ -196,25 +190,10 @@ export function FilterBasedCardContent({
cachedResults: getCachedResults(insightProps.cachedInsight, query),
doNotLoad: insightProps.doNotLoad,
}
- useEffect(() => {
- // If displaying a BoldNumber Trends insight, we need to fire the window resize event
- // Without this, the value is only autosized before `metaPrimaryHeight` is determined, so it's wrong
- // With this, autosizing runs again after `metaPrimaryHeight` is ready
- if (
- // `display` should be ignored in non-Trends insight
- isTrendsFilter(insight.filters) &&
- insight.filters.display === ChartDisplayType.BoldNumber
- ) {
- window.dispatchEvent(new Event('resize'))
- }
- }, [style?.height])
-
return (
+
+
+
+
+
-
+ {meta}
- )}
-
+ {topHeading}
+
+ {showDetailsControls && setAreDetailsShown && (
+
-
-
-
- {meta}
+ {samplingNotice ? samplingNotice : null}
+ {showEditingControls && {topHeading}
-
- {showDetailsControls && setAreDetailsShown && (
-
- {metaDetails}
-
+ {/* By using a transition about displaying then we make sure we aren't rendering the content when not needed */}
+
+
+
+
+ {/* Stops the padding getting in the height calc */}
+
+ {metaDetails}
+ {
@@ -278,9 +257,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
@@ -299,7 +277,6 @@ function InsightCardInternal(
loading = true
}
- const [metaPrimaryHeight, setMetaPrimaryHeight] = useState(undefined)
const [areDetailsShown, setAreDetailsShown] = useState(false)
const canMakeQueryAPICalls =
@@ -327,7 +304,6 @@ function InsightCardInternal(
rename={rename}
duplicate={duplicate}
moveToDashboard={moveToDashboard}
- setPrimaryHeight={setMetaPrimaryHeight}
areDetailsShown={areDetailsShown}
setAreDetailsShown={setAreDetailsShown}
showEditingControls={showEditingControls}
@@ -335,17 +311,7 @@ function InsightCardInternal(
moreButtons={moreButtons}
/>
{insight.query ? (
-
+
{insight.result ? (
>
}
@@ -62,7 +57,6 @@ export function InsightMeta({
rename,
duplicate,
moveToDashboard,
- setPrimaryHeight,
areDetailsShown,
setAreDetailsShown,
showEditingControls = true,
@@ -91,13 +85,11 @@ export function InsightMeta({
return (
, Resizeable {
dashboardId?: string | number
@@ -24,29 +25,19 @@ interface TextCardProps extends React.HTMLAttributes, Resizeable
showEditingControls?: boolean
}
-interface TextCardBodyProps extends Pick, 'style' | 'className'> {
+interface TextCardBodyProps extends Pick, 'className'> {
text: string
closeDetails?: () => void
}
-export function TextContent({ text, closeDetails, style, className }: TextCardBodyProps): JSX.Element {
+export function TextContent({ text, closeDetails, className }: TextCardBodyProps): JSX.Element {
return (
- // eslint-disable-next-line react/forbid-dom-props
-
closeDetails?.()} style={style}>
+ (undefined)
-
if (!text) {
throw new Error('TextCard requires text')
}
@@ -82,83 +71,82 @@ export function TextCardInternal(
{...divProps}
ref={ref}
>
-
- dashboardId && push(urls.dashboardTextTile(dashboardId, textTile.id))}
- data-attr="edit-text"
- >
- Edit text
-
-
- {moveToDashboard && otherDashboards.length > 0 && (
- (
- {
- moveToDashboard(otherDashboard)
- }}
- fullWidth
- >
- {otherDashboard.name || Untitled}
-
- )),
- placement: 'right-start',
- fallbackPlacements: ['left-start'],
- actionable: true,
- closeParentPopoverOnClickInside: true,
- }}
- fullWidth
- >
- Move to
-
- )}
-
- Duplicate
-
- {moreButtons && (
+ {showEditingControls && (
+ (null)
+ const isExecutable = !!result.executor
+
+ useEffect(() => {
+ if (focused) {
+ ref.current?.scrollIntoView()
+ }
+ }, [focused])
+
+ return (
+ (null)
+ const { barStatus } = useValues(commandBarLogic)
+ const { hideCommandBar } = useActions(commandBarLogic)
+
+ useOutsideClickHandler(containerRef, hideCommandBar, [])
+
+ if (barStatus === BarStatus.HIDDEN) {
+ return null
+ }
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/SearchBar.tsx b/frontend/src/lib/components/CommandBar/SearchBar.tsx
new file mode 100644
index 0000000000000..fad41fbfa7978
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/SearchBar.tsx
@@ -0,0 +1,19 @@
+import { useMountedLogic } from 'kea'
+
+import { searchBarLogic } from './searchBarLogic'
+
+import { SearchInput } from './SearchInput'
+import { SearchResults } from './SearchResults'
+import { SearchTabs } from './SearchTabs'
+
+export const SearchBar = (): JSX.Element => {
+ useMountedLogic(searchBarLogic) // load initial results
+
+ return (
+ (null)
+
+ useLayoutEffect(() => {
+ if (keyboardFocused) {
+ // :HACKY: This uses the non-standard scrollIntoViewIfNeeded api
+ // to improve scroll behaviour. Change to scrollIntoView({ scrollMode: 'if-needed' })
+ // once available.
+ if ((ref.current as any)?.scrollIntoViewIfNeeded) {
+ ;(ref.current as any).scrollIntoViewIfNeeded(false)
+ } else {
+ ref.current?.scrollIntoView()
+ }
+
+ // set scrolling state to prevent mouse enter/leave events during
+ // keyboard navigation
+ setIsAutoScrolling(true)
+ setTimeout(() => {
+ setIsAutoScrolling(false)
+ }, 50)
+ }
+ }, [keyboardFocused])
+
+ return (
+ ([
+ path(['lib', 'components', 'CommandBar', 'actionBarLogic']),
+ connect({
+ actions: [
+ commandBarLogic,
+ ['hideCommandBar', 'setCommandBar'],
+ commandPaletteLogic,
+ [
+ 'showPalette',
+ 'hidePalette',
+ 'setInput',
+ 'executeResult',
+ 'backFlow',
+ 'onArrowUp',
+ 'onArrowDown',
+ 'onMouseEnterResult',
+ 'onMouseLeaveResult',
+ ],
+ ],
+ values: [
+ commandPaletteLogic,
+ [
+ 'input',
+ 'activeResultIndex',
+ 'commandRegistrations',
+ 'commandSearchResults',
+ 'commandSearchResultsGrouped',
+ 'activeFlow',
+ ],
+ ],
+ }),
+ listeners(({ actions }) => ({
+ hidePalette: () => {
+ // listen on hide action from legacy palette, and hide command bar
+ actions.hideCommandBar()
+ },
+ })),
+ afterMount(({ actions, values, cache }) => {
+ // trigger show action from legacy palette
+ actions.showPalette()
+
+ // register keyboard shortcuts
+ cache.onKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Enter' && values.commandSearchResults.length) {
+ // execute result
+ const result = values.commandSearchResults[values.activeResultIndex]
+ const isExecutable = !!result.executor
+ if (isExecutable) {
+ actions.executeResult(result)
+ }
+ } else if (event.key === 'ArrowDown') {
+ // navigate to next result
+ event.preventDefault()
+ actions.onArrowDown(values.commandSearchResults.length - 1)
+ } else if (event.key === 'ArrowUp') {
+ // navigate to previous result
+ event.preventDefault()
+ actions.onArrowUp()
+ } else if (event.key === 'Escape') {
+ event.preventDefault()
+
+ if (values.activeFlow) {
+ // return to previous flow
+ actions.backFlow()
+ } else if (values.input) {
+ // or erase input
+ actions.setInput('')
+ } else {
+ // or hide palette
+ actions.hidePalette()
+ }
+ } else if (event.key === 'Backspace') {
+ if (values.input.length === 0) {
+ // transition to search when pressing backspace with empty input
+ actions.setCommandBar(BarStatus.SHOW_SEARCH)
+ }
+ }
+ }
+ window.addEventListener('keydown', cache.onKeyDown)
+ }),
+ beforeUnmount(({ actions, cache }) => {
+ // trigger hide action from legacy palette
+ actions.hidePalette()
+
+ // unregister keyboard shortcuts
+ window.removeEventListener('keydown', cache.onKeyDown)
+ }),
+])
diff --git a/frontend/src/lib/components/CommandBar/commandBarLogic.ts b/frontend/src/lib/components/CommandBar/commandBarLogic.ts
new file mode 100644
index 0000000000000..59aeab9a38862
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/commandBarLogic.ts
@@ -0,0 +1,47 @@
+import { kea, path, actions, reducers, afterMount, beforeUnmount } from 'kea'
+import { BarStatus } from './types'
+
+import type { commandBarLogicType } from './commandBarLogicType'
+
+export const commandBarLogic = kea([
+ path(['lib', 'components', 'CommandBar', 'commandBarLogic']),
+ actions({
+ setCommandBar: (status: BarStatus) => ({ status }),
+ hideCommandBar: true,
+ toggleSearchBar: true,
+ toggleActionsBar: true,
+ }),
+ reducers({
+ barStatus: [
+ BarStatus.HIDDEN as BarStatus,
+ {
+ setCommandBar: (_, { status }) => status,
+ hideCommandBar: () => BarStatus.HIDDEN,
+ toggleSearchBar: (previousState) =>
+ previousState === BarStatus.HIDDEN ? BarStatus.SHOW_SEARCH : BarStatus.HIDDEN,
+ toggleActionsBar: (previousState) =>
+ previousState === BarStatus.HIDDEN ? BarStatus.SHOW_ACTIONS : BarStatus.HIDDEN,
+ },
+ ],
+ }),
+ afterMount(({ actions, cache }) => {
+ // register keyboard shortcuts
+ cache.onKeyDown = (event: KeyboardEvent) => {
+ if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+ event.preventDefault()
+ if (event.shiftKey) {
+ // cmd+shift+k opens actions
+ actions.toggleActionsBar()
+ } else {
+ // cmd+k opens search
+ actions.toggleSearchBar()
+ }
+ }
+ }
+ window.addEventListener('keydown', cache.onKeyDown)
+ }),
+ beforeUnmount(({ cache }) => {
+ // unregister keyboard shortcuts
+ window.removeEventListener('keydown', cache.onKeyDown)
+ }),
+])
diff --git a/frontend/src/lib/components/CommandBar/constants.ts b/frontend/src/lib/components/CommandBar/constants.ts
new file mode 100644
index 0000000000000..4b0d973cdb95a
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/constants.ts
@@ -0,0 +1,16 @@
+import { ResultTypeWithAll } from './types'
+
+export const resultTypeToName: Record = {
+ all: 'All',
+ action: 'Actions',
+ cohort: 'Cohorts',
+ dashboard: 'Dashboards',
+ experiment: 'Experiments',
+ feature_flag: 'Feature flags',
+ insight: 'Insights',
+}
+
+export const actionScopeToName: Record = {
+ global: 'Global',
+ insights: 'Insights',
+}
diff --git a/frontend/src/lib/components/CommandBar/index.scss b/frontend/src/lib/components/CommandBar/index.scss
new file mode 100644
index 0000000000000..80621cf83d7c9
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/index.scss
@@ -0,0 +1,4 @@
+.CommandBar__input {
+ border-color: transparent !important;
+ border-radius: 0;
+}
diff --git a/frontend/src/lib/components/CommandBar/searchBarLogic.ts b/frontend/src/lib/components/CommandBar/searchBarLogic.ts
new file mode 100644
index 0000000000000..fd69e079ec1a5
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/searchBarLogic.ts
@@ -0,0 +1,156 @@
+import { kea, path, actions, reducers, selectors, listeners, connect, afterMount, beforeUnmount } from 'kea'
+import { loaders } from 'kea-loaders'
+import { router } from 'kea-router'
+
+import api from 'lib/api'
+import { urls } from 'scenes/urls'
+import { InsightShortId } from '~/types'
+import { commandBarLogic } from './commandBarLogic'
+
+import type { searchBarLogicType } from './searchBarLogicType'
+import { BarStatus, ResultTypeWithAll, SearchResponse, SearchResult } from './types'
+
+export const searchBarLogic = kea([
+ path(['lib', 'components', 'CommandBar', 'searchBarLogic']),
+ connect({
+ actions: [commandBarLogic, ['hideCommandBar', 'setCommandBar']],
+ }),
+ actions({
+ setSearchQuery: (query: string) => ({ query }),
+ setActiveTab: (tab: ResultTypeWithAll) => ({ tab }),
+ onArrowUp: (activeIndex: number, maxIndex: number) => ({ activeIndex, maxIndex }),
+ onArrowDown: (activeIndex: number, maxIndex: number) => ({ activeIndex, maxIndex }),
+ onMouseEnterResult: (index: number) => ({ index }),
+ onMouseLeaveResult: true,
+ setIsAutoScrolling: (scrolling: boolean) => ({ scrolling }),
+ openResult: (index: number) => ({ index }),
+ }),
+ loaders({
+ searchResponse: [
+ null as SearchResponse | null,
+ {
+ setSearchQuery: async ({ query }, breakpoint) => {
+ await breakpoint(300)
+ return await api.get(`api/projects/@current/search?q=${query}`)
+ },
+ },
+ ],
+ }),
+ reducers({
+ searchQuery: ['', { setSearchQuery: (_, { query }) => query }],
+ keyboardResultIndex: [
+ 0,
+ {
+ setSearchQuery: () => 0,
+ setActiveTab: () => 0,
+ openResult: () => 0,
+ onArrowUp: (_, { activeIndex, maxIndex }) => (activeIndex > 0 ? activeIndex - 1 : maxIndex),
+ onArrowDown: (_, { activeIndex, maxIndex }) => (activeIndex < maxIndex ? activeIndex + 1 : 0),
+ },
+ ],
+ hoverResultIndex: [
+ null as number | null,
+ {
+ setSearchQuery: () => null,
+ setActiveTab: () => null,
+ onMouseEnterResult: (_, { index }) => index,
+ onMouseLeaveResult: () => null,
+ onArrowUp: () => null,
+ onArrowDown: () => null,
+ },
+ ],
+ activeTab: [
+ 'all' as ResultTypeWithAll,
+ {
+ setActiveTab: (_, { tab }) => tab,
+ },
+ ],
+ isAutoScrolling: [false, { setIsAutoScrolling: (_, { scrolling }) => scrolling }],
+ }),
+ selectors({
+ searchResults: [(s) => [s.searchResponse], (searchResponse) => searchResponse?.results],
+ searchCounts: [(s) => [s.searchResponse], (searchResponse) => searchResponse?.counts],
+ filterSearchResults: [
+ (s) => [s.searchResults, s.activeTab],
+ (searchResults, activeTab) => {
+ if (activeTab === 'all') {
+ return searchResults
+ }
+ return searchResults?.filter((r) => r.type === activeTab)
+ },
+ ],
+ maxIndex: [(s) => [s.filterSearchResults], (searchResults) => (searchResults ? searchResults.length - 1 : 0)],
+ activeResultIndex: [
+ (s) => [s.keyboardResultIndex, s.hoverResultIndex],
+ (keyboardResultIndex: number, hoverResultIndex: number | null) => hoverResultIndex || keyboardResultIndex,
+ ],
+ }),
+ listeners(({ values, actions }) => ({
+ openResult: ({ index }) => {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ const result = values.searchResults![index]
+ router.actions.push(urlForResult(result))
+ actions.hideCommandBar()
+ },
+ })),
+ afterMount(({ actions, values, cache }) => {
+ // load initial results
+ actions.setSearchQuery('')
+
+ // register keyboard shortcuts
+ cache.onKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Enter') {
+ // open result
+ event.preventDefault()
+ actions.openResult(values.activeResultIndex)
+ } else if (event.key === 'ArrowDown') {
+ // navigate to next result
+ event.preventDefault()
+ actions.onArrowDown(values.activeResultIndex, values.maxIndex)
+ } else if (event.key === 'ArrowUp') {
+ // navigate to previous result
+ event.preventDefault()
+ actions.onArrowUp(values.activeResultIndex, values.maxIndex)
+ } else if (event.key === 'Escape') {
+ // hide command bar
+ actions.hideCommandBar()
+ } else if (event.key === '>') {
+ const { value, selectionStart, selectionEnd } = event.target as HTMLInputElement
+ if (
+ values.searchQuery.length === 0 ||
+ (selectionStart !== null &&
+ selectionEnd !== null &&
+ (value.substring(0, selectionStart) + value.substring(selectionEnd)).length === 0)
+ ) {
+ // transition to actions when entering '>' with empty input, or when replacing the whole input
+ event.preventDefault()
+ actions.setCommandBar(BarStatus.SHOW_ACTIONS)
+ }
+ }
+ }
+ window.addEventListener('keydown', cache.onKeyDown)
+ }),
+ beforeUnmount(({ cache }) => {
+ // unregister keyboard shortcuts
+ window.removeEventListener('keydown', cache.onKeyDown)
+ }),
+])
+
+export const urlForResult = (result: SearchResult): string => {
+ switch (result.type) {
+ case 'action':
+ return urls.action(result.result_id)
+ case 'cohort':
+ return urls.cohort(result.result_id)
+ case 'dashboard':
+ return urls.dashboard(result.result_id)
+ case 'experiment':
+ return urls.experiment(result.result_id)
+ case 'feature_flag':
+ return urls.featureFlag(result.result_id)
+ case 'insight':
+ return urls.insightView(result.result_id as InsightShortId)
+ default:
+ throw new Error(`No action for type '${result.type}' defined.`)
+ }
+}
diff --git a/frontend/src/lib/components/CommandBar/types.ts b/frontend/src/lib/components/CommandBar/types.ts
new file mode 100644
index 0000000000000..4afc7e3ff66d2
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/types.ts
@@ -0,0 +1,16 @@
+export enum BarStatus {
+ HIDDEN = 'hidden',
+ SHOW_SEARCH = 'show_search',
+ SHOW_ACTIONS = 'show_actions',
+}
+
+export type ResultType = 'action' | 'cohort' | 'insight' | 'dashboard' | 'experiment' | 'feature_flag'
+
+export type ResultTypeWithAll = ResultType | 'all'
+
+export type SearchResult = { result_id: string; type: ResultType; name: string | null }
+
+export type SearchResponse = {
+ results: SearchResult[]
+ counts: Record
+}
diff --git a/frontend/src/lib/components/CommandBar/utils.ts b/frontend/src/lib/components/CommandBar/utils.ts
new file mode 100644
index 0000000000000..cb7a621c6d423
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/utils.ts
@@ -0,0 +1,9 @@
+import { actionScopeToName } from './constants'
+
+export const getNameFromActionScope = (scope: string): string => {
+ if (scope in actionScopeToName) {
+ return actionScopeToName[scope]
+ } else {
+ return scope
+ }
+}
diff --git a/frontend/src/lib/components/CommandPalette/index.scss b/frontend/src/lib/components/CommandPalette/CommandPalette.scss
similarity index 91%
rename from frontend/src/lib/components/CommandPalette/index.scss
rename to frontend/src/lib/components/CommandPalette/CommandPalette.scss
index 1ef01681263c1..0972ea918e81e 100644
--- a/frontend/src/lib/components/CommandPalette/index.scss
+++ b/frontend/src/lib/components/CommandPalette/CommandPalette.scss
@@ -29,6 +29,7 @@
max-height: 80%;
width: 100%;
}
+
@media (max-height: 500px) {
top: 0%;
max-height: 100%;
@@ -84,6 +85,7 @@
.palette__result--focused {
background: var(--default-dark);
+
&::before,
&::after {
content: '';
@@ -93,24 +95,27 @@
bottom: 0;
width: 0.375rem;
}
+
&::before {
- background: hsla(210, 10%, 19%, 1) !important;
+ background: hsl(210deg 10% 19% / 100%) !important;
}
+
&::after {
- background: rgba(255, 255, 255, 0.1);
+ background: rgb(255 255 255 / 10%);
}
}
.palette__result--executable {
cursor: pointer;
+
&::after {
background: var(--primary);
}
}
.palette__scope {
- background-color: rgba(255, 255, 255, 0.1);
- color: rgba(255, 255, 255, 0.8);
+ background-color: rgb(255 255 255 / 10%);
+ color: rgb(255 255 255 / 80%);
}
.palette__icon {
diff --git a/frontend/src/lib/components/CommandPalette/index.tsx b/frontend/src/lib/components/CommandPalette/CommandPalette.tsx
similarity index 77%
rename from frontend/src/lib/components/CommandPalette/index.tsx
rename to frontend/src/lib/components/CommandPalette/CommandPalette.tsx
index d7a1cf7776af9..ce07fb425829c 100644
--- a/frontend/src/lib/components/CommandPalette/index.tsx
+++ b/frontend/src/lib/components/CommandPalette/CommandPalette.tsx
@@ -6,9 +6,25 @@ import { CommandInput } from './CommandInput'
import { CommandResults } from './CommandResults'
import { useEventListener } from 'lib/hooks/useEventListener'
import squeakFile from 'public/squeak.mp3'
-import './index.scss'
+import './CommandPalette.scss'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { CommandBar } from '../CommandBar/CommandBar'
-export function CommandPalette(): JSX.Element | null {
+/** Use the new Cmd+K search when the respective feature flag is enabled. */
+export function CommandPalette(): JSX.Element {
+ const { featureFlags } = useValues(featureFlagLogic)
+
+ const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.CMD_K_SEARCH]
+
+ if (isUsingCmdKSearch) {
+ return ([
path(['lib', 'components', 'CommandPalette', 'commandPaletteLogic']),
connect({
actions: [personalAPIKeysLogic, ['createKey'], router, ['push']],
- values: [teamLogic, ['currentTeam'], userLogic, ['user']],
+ values: [teamLogic, ['currentTeam'], userLogic, ['user'], featureFlagLogic, ['featureFlags']],
logic: [preflightLogic],
}),
actions({
@@ -198,6 +200,10 @@ export const commandPaletteLogic = kea([
],
}),
selectors({
+ isUsingCmdKSearch: [
+ (selectors) => [selectors.featureFlags],
+ (featureFlags) => featureFlags[FEATURE_FLAGS.CMD_K_SEARCH],
+ ],
isSqueak: [
(selectors) => [selectors.input],
(input: string) => {
@@ -213,25 +219,37 @@ export const commandPaletteLogic = kea([
commandRegistrations: [
(selectors) => [
selectors.rawCommandRegistrations,
+ selectors.isUsingCmdKSearch,
dashboardsModel.selectors.nameSortedDashboards,
teamLogic.selectors.currentTeam,
],
- (rawCommandRegistrations: CommandRegistrations, dashboards: DashboardType[]): CommandRegistrations => ({
- ...rawCommandRegistrations,
- custom_dashboards: {
- key: 'custom_dashboards',
- resolver: dashboards.map((dashboard: DashboardType) => ({
- key: `dashboard_${dashboard.id}`,
- icon: IconTableChart,
- display: `Go to dashboard: ${dashboard.name}`,
- executor: () => {
- const { push } = router.actions
- push(urls.dashboard(dashboard.id))
- },
- })),
- scope: GLOBAL_COMMAND_SCOPE,
- },
- }),
+ (
+ rawCommandRegistrations: CommandRegistrations,
+ isUsingCmdKSearch,
+ dashboards: DashboardType[]
+ ): CommandRegistrations => {
+ if (isUsingCmdKSearch) {
+ // do not add dashboards to commands, as they can be navigated to via search
+ return rawCommandRegistrations
+ }
+
+ return {
+ ...rawCommandRegistrations,
+ custom_dashboards: {
+ key: 'custom_dashboards',
+ resolver: dashboards.map((dashboard: DashboardType) => ({
+ key: `dashboard_${dashboard.id}`,
+ icon: IconTableChart,
+ display: `Go to dashboard: ${dashboard.name}`,
+ executor: () => {
+ const { push } = router.actions
+ push(urls.dashboard(dashboard.id))
+ },
+ })),
+ scope: GLOBAL_COMMAND_SCOPE,
+ },
+ }
+ },
],
regexpCommandPairs: [
(selectors) => [selectors.commandRegistrations],
diff --git a/frontend/src/lib/components/CompactList/CompactList.scss b/frontend/src/lib/components/CompactList/CompactList.scss
index 13dfe6b0dd1b2..cd329a1d8e4f7 100644
--- a/frontend/src/lib/components/CompactList/CompactList.scss
+++ b/frontend/src/lib/components/CompactList/CompactList.scss
@@ -13,6 +13,7 @@
display: flex;
align-items: center;
justify-content: space-between;
+
h3 {
margin-bottom: 0;
font-weight: 600;
@@ -27,8 +28,7 @@
.scrollable-list {
flex: 1;
- overflow-y: auto;
- overflow-x: auto;
+ overflow: auto auto;
padding: 0 0.5rem 0.5rem;
}
}
diff --git a/frontend/src/lib/components/CompareFilter/CompareFilter.tsx b/frontend/src/lib/components/CompareFilter/CompareFilter.tsx
index e3ecfa66a82ab..02d2ad2e91f4b 100644
--- a/frontend/src/lib/components/CompareFilter/CompareFilter.tsx
+++ b/frontend/src/lib/components/CompareFilter/CompareFilter.tsx
@@ -1,12 +1,15 @@
import { useValues, useActions } from 'kea'
-import { compareFilterLogic } from './compareFilterLogic'
import { insightLogic } from 'scenes/insights/insightLogic'
import { LemonCheckbox } from '@posthog/lemon-ui'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
export function CompareFilter(): JSX.Element | null {
- const { insightProps } = useValues(insightLogic)
- const { compare, disabled } = useValues(compareFilterLogic(insightProps))
- const { setCompare } = useActions(compareFilterLogic(insightProps))
+ const { insightProps, canEditInsight } = useValues(insightLogic)
+
+ const { compare, supportsCompare } = useValues(insightVizDataLogic(insightProps))
+ const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
+
+ const disabled: boolean = !canEditInsight || !supportsCompare
// Hide compare filter control when disabled to avoid states where control is "disabled but checked"
if (disabled) {
@@ -15,9 +18,10 @@ export function CompareFilter(): JSX.Element | null {
return (
{
+ updateInsightFilter({ compare })
+ }}
checked={!!compare}
- disabled={disabled}
label={Compare to previous period}
bordered
size="small"
diff --git a/frontend/src/lib/components/CompareFilter/compareFilterLogic.ts b/frontend/src/lib/components/CompareFilter/compareFilterLogic.ts
deleted file mode 100644
index 899d545987442..0000000000000
--- a/frontend/src/lib/components/CompareFilter/compareFilterLogic.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { kea, props, key, path, connect, actions, selectors, listeners } from 'kea'
-import { ChartDisplayType, InsightLogicProps } from '~/types'
-import type { compareFilterLogicType } from './compareFilterLogicType'
-import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-
-export const compareFilterLogic = kea([
- props({} as InsightLogicProps),
- key(keyForInsightLogicProps('new')),
- path((key) => ['lib', 'components', 'CompareFilter', 'compareFilterLogic', key]),
- connect((props: InsightLogicProps) => ({
- values: [
- insightLogic(props),
- ['canEditInsight'],
- insightVizDataLogic(props),
- ['compare', 'display', 'insightFilter', 'isLifecycle', 'dateRange'],
- ],
- actions: [insightVizDataLogic(props), ['updateInsightFilter']],
- })),
- actions(() => ({
- setCompare: (compare: boolean) => ({ compare }),
- toggleCompare: true,
- })),
- selectors({
- disabled: [
- (s) => [s.canEditInsight, s.isLifecycle, s.display, s.dateRange],
- (canEditInsight, isLifecycle, display, dateRange) =>
- !canEditInsight ||
- isLifecycle ||
- display === ChartDisplayType.WorldMap ||
- dateRange?.date_from === 'all',
- ],
- }),
- listeners(({ values, actions }) => ({
- setCompare: ({ compare }) => {
- actions.updateInsightFilter({ compare })
- },
- toggleCompare: () => {
- actions.setCompare(!values.compare)
- },
- })),
-])
diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
index 99352b932cb9c..8f99bb64c0bde 100644
--- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
+++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
@@ -17,13 +17,13 @@
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
- -webkit-appearance: none;
+ appearance: none;
margin: 0;
}
/* Firefox */
input[type='number'] {
- -moz-appearance: textfield;
+ appearance: textfield;
}
}
@@ -40,8 +40,6 @@
border-radius: 0.25rem;
background-color: var(--bg-light);
box-sizing: border-box;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
margin-right: 0.25rem;
margin-left: 0.25rem;
line-height: 1.25rem;
@@ -56,6 +54,7 @@
margin: 0 0.25rem;
border-radius: var(--radius);
padding: 0.25rem;
+
&:hover {
background-color: var(--primary-highlight);
}
diff --git a/frontend/src/lib/components/DatePicker.scss b/frontend/src/lib/components/DatePicker.scss
index 0ac7693630d02..21ec676273bc1 100644
--- a/frontend/src/lib/components/DatePicker.scss
+++ b/frontend/src/lib/components/DatePicker.scss
@@ -7,25 +7,34 @@
color: var(--default);
background: var(--secondary-3000);
border-color: transparent;
+
.ant-picker-suffix {
color: var(--default);
}
}
+
.ant-picker-panel-container {
color: var(--default);
background: var(--bg-3000);
border: 1px solid var(--border);
+
* {
border-color: var(--border);
}
}
+
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
background: var(--primary-3000);
}
+
.ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
- .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(
- .ant-picker-cell-range-end
- ):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
+ .ant-picker-cell:hover:not(
+ .ant-picker-cell-selected,
+ .ant-picker-cell-range-start,
+ .ant-picker-cell-range-end,
+ .ant-picker-cell-range-hover-start,
+ .ant-picker-cell-range-hover-end
+ )
.ant-picker-cell-inner,
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover {
background: var(--secondary-3000);
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
index fa50237972939..664020d434acf 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
@@ -1,6 +1,6 @@
.definition-popover {
width: 20rem;
- padding: 0.5rem 0.75rem 0.75rem 0.75rem;
+ padding: 0.5rem 0.75rem 0.75rem;
.definition-popover-header {
display: flex;
@@ -94,6 +94,7 @@
.definition-popover-timemeta-user {
display: inline-flex;
}
+
.definition-popover-timemeta-spacer {
margin-right: 0.5rem;
}
diff --git a/frontend/src/lib/components/EditableField/EditableField.scss b/frontend/src/lib/components/EditableField/EditableField.scss
index e853c9c625741..c58f63e9d2114 100644
--- a/frontend/src/lib/components/EditableField/EditableField.scss
+++ b/frontend/src/lib/components/EditableField/EditableField.scss
@@ -2,17 +2,21 @@
display: flex;
align-items: center;
max-width: 100%;
+
&:not(.EditableField--multiline) {
line-height: 2rem;
}
+
i {
color: var(--muted);
}
+
.EditableField__notice {
font-size: 1.5rem;
color: var(--muted);
margin-left: 0.5rem;
}
+
.EditableField__highlight {
display: flex;
flex-direction: row;
@@ -25,6 +29,7 @@
white-space: pre-wrap;
overflow: auto;
}
+
&--editing .EditableField__highlight {
flex-grow: 1;
align-items: flex-end;
@@ -33,10 +38,12 @@
outline: 1px solid var(--border);
border-radius: var(--radius);
}
+
.EditableField__autosize {
align-self: center;
min-width: 0;
}
+
.EditableField__autosize__sizer {
position: absolute;
top: 0;
@@ -46,6 +53,7 @@
overflow: scroll;
white-space: pre;
}
+
.EditableField__actions {
flex-shrink: 0;
display: flex;
@@ -53,6 +61,7 @@
gap: 0.5rem;
margin-left: 0.5rem;
}
+
input,
textarea {
max-width: 100%;
@@ -63,6 +72,7 @@
outline: none;
padding: 0;
}
+
textarea {
align-self: center;
width: 100%;
diff --git a/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss b/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss
index a338a5a94800c..beebb4188566a 100644
--- a/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss
+++ b/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss
@@ -8,6 +8,7 @@
.title {
text-align: center;
}
+
.description {
text-align: center;
}
diff --git a/frontend/src/lib/components/Fade/Fade.scss b/frontend/src/lib/components/Fade/Fade.scss
index ae50db416ae05..3a37304c0f8e1 100644
--- a/frontend/src/lib/components/Fade/Fade.scss
+++ b/frontend/src/lib/components/Fade/Fade.scss
@@ -1,16 +1,18 @@
-@keyframes fadeComponentFadeIn {
+@keyframes Fade__fade-in {
0% {
opacity: 0;
}
+
100% {
opacity: 1;
}
}
-@keyframes fadeComponentFadeOut {
+@keyframes Fade__fade-out {
0% {
opacity: 1;
}
+
100% {
opacity: 0;
}
diff --git a/frontend/src/lib/components/Fade/Fade.tsx b/frontend/src/lib/components/Fade/Fade.tsx
index d611ead1591a0..cc4637bb26957 100644
--- a/frontend/src/lib/components/Fade/Fade.tsx
+++ b/frontend/src/lib/components/Fade/Fade.tsx
@@ -31,7 +31,7 @@ export function Fade({
{subscriptionsLoading && !subscriptions.length ? (
([
urlToAction(({ actions, values }) => ({
'*': (_, _search, hashParams) => {
- if ('supportModal' in hashParams && !values.isSupportFormOpen) {
+ if (values.isSupportFormOpen) {
+ return
+ }
+
+ // Legacy supportModal param
+ if ('supportModal' in hashParams) {
const [kind, area] = (hashParams['supportModal'] || '').split(':')
+ actions.openSupportForm(
+ Object.keys(SUPPORT_KIND_TO_SUBJECT).includes(kind) ? kind : null,
+ Object.keys(TARGET_AREA_TO_NAME).includes(area) ? area : null
+ )
+ } else if ((hashParams['panel'] as string | undefined)?.startsWith('support')) {
+ const [kind, area] = hashParams['panel'].split(':').slice(1)
+
actions.openSupportForm(
Object.keys(SUPPORT_KIND_TO_SUBJECT).includes(kind) ? kind : null,
Object.keys(TARGET_AREA_TO_NAME).includes(area) ? area : null
@@ -322,7 +334,8 @@ export const supportLogic = kea([
actionToUrl(({ values }) => {
const updateUrl = (): any => {
const hashParams = router.values.hashParams
- hashParams['supportModal'] = `${values.sendSupportRequest.kind || ''}:${
+ delete hashParams['supportModal'] // legacy value
+ hashParams['panel'] = `support:${values.sendSupportRequest.kind || ''}:${
values.sendSupportRequest.target_area || ''
}`
return [router.values.location.pathname, router.values.searchParams, hashParams]
@@ -332,7 +345,9 @@ export const supportLogic = kea([
setSendSupportRequestValue: () => updateUrl(),
closeSupportForm: () => {
const hashParams = router.values.hashParams
- delete hashParams['supportModal']
+ delete hashParams['supportModal'] // legacy value
+ delete hashParams['panel']
+
return [router.values.location.pathname, router.values.searchParams, hashParams]
},
}
diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
index 227fbe2346059..4861992b41aff 100644
--- a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
+++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
@@ -68,6 +68,10 @@
&.hover {
background-color: var(--primary-bg-hover);
border-radius: var(--radius);
+
+ .posthog-3000 & {
+ background-color: var(--bg-3000);
+ }
}
&.selected {
diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
index 11bf7380ce829..d4716286d5906 100644
--- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
+++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
@@ -5,10 +5,6 @@
display: flex;
flex-direction: column;
- .posthog-3000 & {
- background: var(--bg-3000);
- }
-
&.force-minimum-width {
min-width: 300px;
}
@@ -30,6 +26,7 @@
padding-top: 10px;
padding-left: 10px;
font-weight: 600;
+
&.with-border {
border-top: 1px solid var(--border-light);
}
@@ -48,10 +45,12 @@
color: var(--link);
background: var(--side);
border-color: var(--side);
+
&.taxonomic-count-zero {
color: var(--muted);
cursor: not-allowed;
}
+
&.taxonomic-pill-active {
color: #fff;
background: var(--link);
diff --git a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
index 4774449703e18..d0ac9a6fe4220 100644
--- a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
+++ b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
@@ -2,6 +2,7 @@
--timeline-seekbar-thickness: 0.125rem;
--timeline-seekbar-arrow-width: 0.5rem;
--timeline-seekbar-arrow-height: 0.75rem;
+
margin: 0.75rem 0.5rem;
}
@@ -27,9 +28,11 @@
line-height: 1.25rem;
font-size: 0.75rem;
font-weight: 500;
+
&::selection {
background: var(--primary-light); // Default selection background is invisible on primary
}
+
.Spinner {
margin-right: 0.25rem;
}
@@ -48,6 +51,7 @@
top: 0;
left: calc(var(--timeline-seekbar-thickness) * 2);
width: calc(100% - var(--timeline-seekbar-arrow-width) - var(--timeline-seekbar-thickness) * 3 - 1.25rem);
+
.LemonBadge:not(.LemonBadge--active) {
// Connect each badge to the line rightward to signal the direction in which the badge is applicable
border-right-color: transparent;
@@ -61,6 +65,7 @@
left: calc(var(--timeline-seekbar-section-progress-current) - var(--timeline-seekbar-thickness));
width: var(--timeline-seekbar-section-progress-next);
border-left: var(--timeline-seekbar-thickness) solid var(--bg-light);
+
&:last-child {
width: calc(var(--timeline-seekbar-section-progress-next) + 1.25rem);
}
@@ -80,6 +85,7 @@
position: absolute;
top: calc(var(--timeline-seekbar-thickness) / 2 - 0.625rem);
height: 1.25rem;
+
&::before {
content: '';
display: block;
@@ -98,6 +104,7 @@
left: 100%;
width: var(--timeline-seekbar-arrow-width);
cursor: pointer;
+
&::before {
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
diff --git a/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss b/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
index a135232f9a8a8..64f84a90265df 100644
--- a/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
+++ b/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
@@ -4,8 +4,8 @@
max-width: 15rem;
height: 100%;
cursor: pointer;
-
transition: 200ms ease margin;
+
.ant-input-affix-wrapper,
input {
background: var(--bg-bridge);
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
index f15998517e83d..63ef80121bccc 100644
--- a/frontend/src/lib/constants.tsx
+++ b/frontend/src/lib/constants.tsx
@@ -143,7 +143,6 @@ export const FEATURE_FLAGS = {
NOTEBOOKS: 'notebooks', // owner: #team-monitoring
EARLY_ACCESS_FEATURE_SITE_BUTTON: 'early-access-feature-site-button', // owner: @neilkakkar
HEDGEHOG_MODE_DEBUG: 'hedgehog-mode-debug', // owner: @benjackwhite
- AUTO_REDIRECT: 'auto-redirect', // owner: @lharries
GENERIC_SIGNUP_BENEFITS: 'generic-signup-benefits', // experiment, owner: @raquelmsmith
WEB_ANALYTICS: 'web-analytics', // owner @robbie-c #team-web-analytics
HIGH_FREQUENCY_BATCH_EXPORTS: 'high-frequency-batch-exports', // owner: @tomasfarias
@@ -168,13 +167,14 @@ export const FEATURE_FLAGS = {
SURVEYS_PAYGATES: 'surveys-paygates',
CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-monitoring
PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
+ CMD_K_SEARCH: 'cmd-k-search', // owner: @thmsobrmlr
PIPELINE_UI: 'pipeline-ui', // owner: #team-pipeline
NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-monitoring
SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-monitoring
PERSON_FEED_CANVAS: 'person-feed-canvas', // owner: #project-canvas
- SIDE_PANEL_DOCS: 'side-panel-docs', // owner: #noteforce-3000
MULTI_PROJECT_FEATURE_FLAGS: 'multi-project-feature-flags', // owner: @jurajmajerik #team-feature-success
NETWORK_PAYLOAD_CAPTURE: 'network-payload-capture', // owner: #team-monitoring
+ INSIGHT_HORIZONTAL_CONTROLS: 'insight-horizontal-controls', // owner: @benjackwhite
} as const
export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
diff --git a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
index 46fc8856b62d6..7a5d1c1db4b74 100644
--- a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
+++ b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
@@ -1,58 +1,71 @@
.LemonActionableTooltip {
max-width: var(--in-app-prompts-width);
padding: 0.5rem;
+
> * + * {
margin-top: 0.5rem;
}
+
.LemonActionableTooltip__header {
display: flex;
justify-content: space-between;
+
> * + * {
margin-left: 0.5rem;
}
}
+
.LemonActionableTooltip__title {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.75rem;
}
+
.LemonActionableTooltip__icon {
color: var(--primary);
display: flex;
align-items: center;
width: 1.5rem;
height: 1.5rem;
+
> svg {
width: 100%;
height: 100%;
}
}
+
.LemonActionableTooltip__body {
> * + * {
margin-top: 0.5rem;
}
}
+
.LemonActionableTooltip__footer {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
+
.LemonActionableTooltip__url-buttons {
display: flex;
width: 100%;
flex-direction: column;
+
> * + * {
margin-top: 0.25rem;
}
}
+
.LemonActionableTooltip__action-buttons {
display: flex;
width: 100%;
flex-direction: column;
+
> * + * {
margin-top: 0.25rem;
}
}
+
.LemonActionableTooltip__navigation {
color: var(--muted);
display: flex;
diff --git a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
index f3737f96455cb..186df996abe84 100644
--- a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
+++ b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
@@ -17,6 +17,7 @@
height: var(--lemon-badge-size);
font-size: var(--lemon-badge-font-size);
line-height: var(--lemon-badge-size);
+
// Just enough so the overall size is unaffected with a single digit (i.e. badge stays round)
padding: calc(var(--lemon-badge-size) / 8);
border-radius: calc(var(--lemon-badge-size) / 2);
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
index d287ee457a1a5..5ce621e0bb385 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -1,5 +1,4 @@
.LemonButton {
- --lemon-button-height: 2.5rem;
position: relative;
transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
transform 100ms ease;
@@ -8,7 +7,6 @@
flex-shrink: 0;
align-items: center;
justify-content: flex-start;
- min-height: var(--lemon-button-height);
padding: 0.25rem 0.75rem;
gap: 0.5rem;
background: none;
@@ -20,7 +18,13 @@
font-weight: 500;
cursor: pointer;
user-select: none;
- -webkit-appearance: none !important; // Important as this gets overridden by Ant styles...
+ appearance: none !important; // Important as this gets overridden by Ant styles...
+
+ > span {
+ display: flex;
+ flex: 1;
+ gap: 0.5rem;
+ }
.LemonButton__content {
flex: 1;
@@ -31,6 +35,11 @@
&[aria-disabled='true']:not(.LemonButton--loading) {
cursor: not-allowed;
+
+ > span {
+ cursor: not-allowed;
+ }
+
opacity: var(--opacity-disabled);
}
@@ -42,7 +51,6 @@
width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
- overflow: hidden;
.LemonButton__content {
overflow: hidden;
@@ -50,19 +58,19 @@
}
&.LemonButton--centered {
- justify-content: center;
+ > span {
+ justify-content: center !important;
+ }
+
.LemonButton__content {
- flex: initial;
- text-align: center;
+ flex: initial !important;
+ text-align: center !important;
}
}
&.LemonButton--has-icon {
padding-left: 0.5rem;
}
- &.LemonButton--has-side-icon {
- padding-right: 0.5rem;
- }
&.LemonButton--no-content {
padding-left: 0.5rem;
@@ -70,64 +78,40 @@
}
&.LemonButton--xsmall {
- --lemon-button-height: 1.5rem;
- padding: 0.125rem 0.375rem;
gap: 0.25rem;
font-size: 0.75rem;
- .LemonButton__icon {
- font-size: 0.875rem;
- }
-
- &.LemonButton--has-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- padding-left: 0.25rem;
+ > span {
+ gap: 0.25rem;
}
- &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- padding-right: 0.25rem;
+ .LemonButton__icon {
+ font-size: 0.875rem;
}
}
- &.LemonButton--small {
- --lemon-button-height: 2rem;
- padding: 0.125rem 0.5rem;
+ &.LemonButton--small,
+ .Breadcrumbs3000 & {
gap: 0.25rem;
- .LemonButton__icon {
- font-size: 1.25rem;
- }
-
- &.LemonButton--has-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- padding-left: 0.375rem;
+ > span {
+ gap: 0.25rem;
}
- &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- padding-right: 0.375rem;
+ .LemonButton__icon {
+ font-size: 1.25rem;
}
}
&.LemonButton--large {
- --lemon-button-height: 3.5rem;
- padding: 0.5rem 1rem;
- gap: 0.75rem;
font-size: 1rem;
- .LemonButton__icon {
- font-size: 1.75rem;
- }
-
- &.LemonButton--has-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- padding-left: 0.75rem;
+ > span {
+ gap: 0.75rem;
}
- &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- padding-right: 0.75rem;
+ .LemonButton__icon {
+ font-size: 1.75rem;
}
}
@@ -136,8 +120,6 @@
height: auto;
width: auto;
padding: 0;
- padding-left: 0;
- padding-right: 0;
&.LemonButton--full-width {
width: 100%;
@@ -149,109 +131,29 @@
font-size: 1.5rem;
flex-shrink: 0;
transition: color 200ms ease;
- justify-items: center;
- }
-
- // LemonStealth has some specific styles
- &.LemonButton--status-stealth {
- font-weight: 400;
- color: var(--default);
-
- &:not([aria-disabled='true']):hover,
- &.LemonButton--active {
- background: var(--primary-highlight);
- color: inherit; // Avoid links being colored on hover
- }
-
- &.LemonButton--active {
- font-weight: 500;
-
- // These buttons keep their font-weight when actve
- &.LemonButtonWithSideAction,
- &[role='menuitem'],
- &[aria-haspopup='true'] {
- font-weight: 400;
- }
- }
-
- .LemonButton__icon {
- color: var(--muted-alt);
- }
-
- // Secondary - outlined color style
- &.LemonButton--secondary {
- background: var(--bg-light);
- border: 1px solid var(--border);
-
- &:not([aria-disabled='true']):hover,
- &.LemonButton--active {
- background: var(--primary-highlight);
- border-color: var(--primary);
- }
-
- &:not([aria-disabled='true']):active {
- border-color: var(--primary-dark);
- }
- }
+ place-items: center center;
}
@each $status in ('primary', 'danger', 'primary-alt', 'muted') {
&.LemonButton--status-#{$status} {
- color: var(--#{$status}, var(--primary));
-
- &:not([aria-disabled='true']):hover,
- &.LemonButton--active {
- background: var(--#{$status}-highlight, var(--primary-highlight));
- }
- &:not([aria-disabled='true']):active {
- color: var(--#{$status}-dark, var(--primary-dark));
- .LemonButton__icon {
- color: var(--#{$status}-dark, var(--primary-dark));
- }
- }
+ color: var(--#{$status}-3000, var(--#{$status}, var(--primary)));
.LemonButton__icon {
- color: var(--#{$status});
+ color: var(--#{$status}-3000, var(--#{$status}));
}
// Primary - blocked color style
&.LemonButton--primary {
color: #fff;
- background: var(--#{$status});
- .LemonButton__icon {
- color: #fff;
- }
+ background: var(--#{$status}-3000, var(--#{$status}));
&:not([aria-disabled='true']):hover,
&.LemonButton--active {
color: #fff;
- background: var(--#{$status}-light, var(--#{$status}));
- .LemonButton__icon {
- color: #fff;
- }
- }
- &:not([aria-disabled='true']):active {
- background: var(--#{$status}-dark, var(--#{$status}));
- color: #fff;
- .LemonButton__icon {
- color: #fff;
- }
- }
- }
-
- // Secondary - outlined color style
- &.LemonButton--secondary {
- background: var(--bg-light);
- border: 1px solid var(--border);
-
- &:not([aria-disabled='true']):hover,
- &.LemonButton--active {
- background: var(--#{$status}-highlight, var(--primary-highlight));
- border-color: var(--#{$status});
}
&:not([aria-disabled='true']):active {
- border-color: var(--#{$status}-dark, var(--status));
+ color: #fff;
}
}
}
@@ -260,69 +162,15 @@
.ant-tooltip & {
// Buttons have an overriden style in tooltips, as they are always dark
&:hover {
- background: rgba(255, 255, 255, 0.15) !important;
+ background: rgb(255 255 255 / 15%) !important;
}
+
&:active {
- background: rgba(255, 255, 255, 0.2) !important;
+ background: rgb(255 255 255 / 20%) !important;
}
- .LemonButton__icon {
- color: #fff !important;
- }
- }
-
- .posthog-3000 & {
- font-size: 0.8125rem;
- border: none !important; // 3000 buttons never have borders
.LemonButton__icon {
- color: var(--muted);
- }
-
- &.LemonButton--status-primary {
- color: var(--muted);
- }
-
- &.LemonButton--status-stealth {
- color: var(--default);
- }
-
- &.LemonButton--primary {
- color: #fff;
- background: var(--primary-3000);
- &:not([aria-disabled='true']):hover,
- &.LemonButton--active {
- background: var(--primary-3000-hover);
- color: #fff;
- }
- .LemonButton__icon {
- color: #fff;
- }
- }
-
- &.LemonButton--secondary {
- color: var(--default);
- background: var(--secondary-3000);
- &:not([aria-disabled='true']):hover,
- &.LemonButton--active {
- background: var(--secondary-3000-hover);
- color: var(--default);
- }
- .LemonButton__icon {
- color: var(--default);
- }
- }
-
- &:not([aria-disabled='true']):hover,
- &.LemonButton--active {
- color: var(--default);
- background: var(--border);
- .LemonButton__icon {
- color: var(--default);
- }
- }
-
- &:not([aria-disabled='true']):active {
- transform: scale(calc(35 / 36));
+ color: #fff !important;
}
}
}
@@ -332,19 +180,11 @@
}
.LemonButtonWithSideAction__spacer {
- height: 1.5rem;
- width: 1.5rem;
box-sizing: content-box;
&.LemonButtonWithSideAction__spacer--divider {
- opacity: 0.17;
- padding-left: 0.375rem;
border-left: 1px solid currentColor;
}
-
- .LemonButton--small & {
- margin-left: 0.25rem;
- }
}
.LemonButtonWithSideAction__side-button {
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
index 1d0f1cd90b8a9..d52f2e601200e 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
@@ -5,6 +5,8 @@ import { Link } from '../Link'
import { Spinner } from '../Spinner/Spinner'
import { Tooltip, TooltipProps } from '../Tooltip'
import './LemonButton.scss'
+import './LemonButtonLegacy.scss'
+import './LemonButton3000.scss'
import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
import { PopoverReferenceContext } from '../Popover'
@@ -63,6 +65,8 @@ export interface LemonButtonPropsBase
/** Like plain `disabled`, except we enforce a reason to be shown in the tooltip. */
disabledReason?: string | null | false
noPadding?: boolean
+ /** Hides the button chrome until hover. */
+ stealth?: boolean
size?: 'xsmall' | 'small' | 'medium' | 'large'
'data-attr'?: string
'aria-label'?: string
@@ -92,6 +96,7 @@ export const LemonButton: React.FunctionComponent
- {icon ? {icon} : null}
- {children ? {children} : null}
- {sideIcon ? {sideIcon} : null}
+
+ {icon ? {icon} : null}
+ {children ? {children} : null}
+ {sideIcon ? {sideIcon} : null}
+
)
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
new file mode 100644
index 0000000000000..d7a53bb238fbb
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
@@ -0,0 +1,267 @@
+.posthog-3000 {
+ --transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
+ transform 200ms ease;
+
+ .LemonButton {
+ border-width: 0;
+ border-style: solid;
+ border-color: transparent;
+ min-height: 2em;
+ padding: 0;
+ position: relative;
+ outline: none;
+ transition: var(--transition);
+ border-radius: 6px;
+ cursor: pointer;
+
+ > span {
+ border-radius: 6px;
+ font-size: 0.875rem;
+ display: flex;
+ flex-direction: row;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: flex-start;
+ background: none;
+ border-width: 1px;
+ border-style: solid;
+ border-color: transparent;
+ font-weight: 500;
+ gap: 0.5rem;
+ line-height: 1.5rem;
+ min-height: 2em;
+ position: relative;
+ text-align: left;
+ transition: var(--transition);
+ padding: 0.25rem 0.75rem;
+ width: 100%;
+
+ .LemonButton__icon:first-child {
+ transition: var(--transition);
+ color: var(--default);
+ opacity: 0.5;
+ }
+ }
+
+ &.LemonButton--xsmall {
+ min-height: 1.5rem;
+ padding-left: 0;
+
+ > span {
+ min-height: 1.5rem;
+ padding: 0.125rem 0.375rem;
+ }
+
+ &.LemonButton--has-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ > span {
+ padding-left: 0.25rem;
+ }
+ }
+
+ &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ > span {
+ padding-right: 0.25rem;
+ }
+ }
+ }
+
+ &.LemonButton--small {
+ min-height: 1.8rem;
+
+ > span {
+ min-height: 1.8rem;
+ padding: 0.25rem 0.5rem;
+ }
+
+ &.LemonButton--has-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ > span {
+ padding-left: 0.375rem;
+ }
+ }
+
+ &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ > span {
+ padding-right: 0.375rem;
+ }
+ }
+ }
+
+ &.LemonButton--large {
+ min-height: 2.5rem;
+
+ > span {
+ gap: 0.75rem;
+ min-height: 2.5rem;
+ padding: 0.5rem 1rem;
+ }
+
+ &.LemonButton--has-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-left: 0;
+
+ > span {
+ padding-left: 0.75rem;
+ }
+ }
+
+ &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-right: 0;
+
+ > span {
+ padding-right: 0.75rem;
+ }
+ }
+ }
+
+ &.LemonButton--no-padding {
+ padding: 0;
+ min-height: 0;
+
+ > span {
+ padding: 0;
+ min-height: 0;
+ }
+ }
+
+ &:not(.LemonButton--tertiary) {
+ border-width: 1px;
+ padding-bottom: 1px;
+
+ > span {
+ margin: 0 -1px;
+ top: -1px;
+ }
+
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ > span {
+ top: -1.5px;
+ }
+ }
+
+ &:not([aria-disabled='true']):active {
+ > span {
+ top: -0.5px;
+ }
+ }
+ }
+
+ &.LemonButton--primary {
+ background: var(--primary-3000-frame-bg);
+ border-color: var(--primary-3000-frame-border);
+
+ > span {
+ background: var(--primary-3000-button-bg);
+ border-color: var(--primary-3000-button-border);
+ color: #111;
+ font-weight: 600;
+
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ border-color: var(--primary-3000-button-border-hover);
+ }
+ }
+ }
+
+ &.LemonButton--secondary {
+ background: var(--secondary-3000-frame-bg);
+ border-color: var(--secondary-3000-frame-border);
+
+ &:not([aria-disabled='true']):hover > span {
+ border-color: var(--secondary-3000-button-border-hover);
+ }
+
+ > span {
+ color: var(--default);
+ background: var(--accent-3000);
+ border-color: var(--secondary-3000-button-border);
+ }
+
+ &.LemonButton--active {
+ > span {
+ color: var(--default);
+ background: var(--bg-light);
+ border-color: var(--secondary-3000-button-border-hover);
+ }
+ }
+ }
+
+ &.LemonButton--is-stealth:not(.LemonButton--active) {
+ &:hover {
+ > span {
+ border-color: var(--secondary-3000-button-border);
+ }
+ }
+
+ &:not(:hover) {
+ background-color: transparent;
+ border-color: transparent;
+
+ > span {
+ background-color: transparent;
+ border-color: transparent;
+ color: var(--muted);
+ }
+ }
+ }
+
+ &.LemonButton--tertiary {
+ color: var(--default);
+
+ &.LemonButton--status-danger {
+ color: var(--danger);
+ }
+
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ background-color: var(--bg-3000);
+ }
+ }
+ }
+
+ .LemonButtonWithSideAction__spacer {
+ color: var(--muted);
+ height: 1.25rem;
+ width: 1.25rem;
+
+ &.LemonButtonWithSideAction__spacer--divider {
+ margin-left: 0.25rem;
+ padding: 0;
+ }
+ }
+
+ // SideAction buttons are buttons next to other buttons in the DOM but layered on top. since they're on another button, we don't want them to look like buttons.
+ .LemonButtonWithSideAction__side-button {
+ top: 1px;
+ right: 1px;
+ bottom: 4px;
+ width: 1.625rem;
+ transform: none;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+
+ & .LemonButton {
+ background: none !important;
+ border: none !important;
+ padding-bottom: 0 !important;
+ margin: 0 auto !important;
+ height: 100%;
+
+ > span {
+ margin: auto !important;
+ top: 0 !important;
+ background: none !important;
+ border: none !important;
+ }
+ }
+
+ &:not([aria-disabled='true']):hover {
+ background: rgb(0 0 0 / 10%);
+ }
+ }
+}
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
new file mode 100644
index 0000000000000..fc10519414fee
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
@@ -0,0 +1,193 @@
+body:not(.posthog-3000) {
+ .LemonButton {
+ --lemon-button-height: 2.5rem;
+
+ min-height: var(--lemon-button-height);
+
+ &.LemonButton--has-side-icon {
+ padding-right: 0.5rem;
+ }
+
+ &.LemonButton--xsmall {
+ padding: 0.125rem 0.375rem;
+
+ --lemon-button-height: 1.5rem;
+
+ &.LemonButton--has-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-left: 0.25rem;
+ }
+
+ &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-right: 0.25rem;
+ }
+ }
+
+ &.LemonButton--small,
+ .Breadcrumbs3000 & {
+ --lemon-button-height: 2rem;
+
+ padding: 0.125rem 0.5rem;
+
+ &.LemonButton--has-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-left: 0.375rem;
+ }
+
+ &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-right: 0.375rem;
+ }
+ }
+
+ &.LemonButton--full-width {
+ overflow: hidden;
+ }
+
+ &.LemonButton--large {
+ --lemon-button-height: 3.5rem;
+
+ padding: 0.5rem 1rem;
+
+ &.LemonButton--has-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-left: 0.75rem;
+ }
+
+ &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
+ &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ padding-right: 0.75rem;
+ }
+ }
+
+ &.LemonButton--no-padding {
+ min-height: 0;
+ height: auto;
+ width: auto;
+ padding: 0;
+ padding-left: 0;
+ padding-right: 0;
+
+ &.LemonButton--full-width {
+ width: 100%;
+ }
+ }
+
+ // LemonStealth has some specific styles
+ &.LemonButton--status-stealth {
+ font-weight: 400;
+ color: var(--default);
+
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ background: var(--primary-highlight);
+ color: inherit; // Avoid links being colored on hover
+ }
+
+ &.LemonButton--active {
+ font-weight: 500;
+
+ // These buttons keep their font-weight when actve
+ &.LemonButtonWithSideAction,
+ &[role='menuitem'],
+ &[aria-haspopup='true'] {
+ font-weight: 400;
+ }
+ }
+
+ .LemonButton__icon {
+ color: var(--muted-alt);
+ }
+
+ // Secondary - outlined color style
+ &.LemonButton--secondary {
+ background: var(--bg-light);
+ border: 1px solid var(--border);
+
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ background: var(--primary-highlight);
+ border-color: var(--primary);
+ }
+
+ &:not([aria-disabled='true']):active {
+ border-color: var(--primary-dark);
+ }
+ }
+ }
+
+ @each $status in ('primary', 'danger', 'primary-alt', 'muted') {
+ &.LemonButton--status-#{$status} {
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ background: var(--#{$status}-highlight, var(--primary-highlight));
+ }
+
+ &:not([aria-disabled='true']):active {
+ color: var(--#{$status}-dark, var(--primary-dark));
+
+ .LemonButton__icon {
+ color: var(--#{$status}-dark, var(--primary-dark));
+ }
+ }
+
+ // Primary - blocked color style
+ &.LemonButton--primary {
+ .LemonButton__icon {
+ color: #fff;
+ }
+
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ color: #fff;
+ background: var(--#{$status}-light, var(--#{$status}));
+
+ .LemonButton__icon {
+ color: #fff;
+ }
+ }
+
+ &:not([aria-disabled='true']):active {
+ color: #fff;
+ background: var(--#{$status}-dark, var(--#{$status}));
+
+ .LemonButton__icon {
+ color: #fff;
+ }
+ }
+ }
+
+ // Secondary - outlined color style
+ &.LemonButton--secondary {
+ background: var(--bg-light);
+ border: 1px solid var(--border);
+
+ &:not([aria-disabled='true']):hover,
+ &.LemonButton--active {
+ background: var(--#{$status}-highlight, var(--primary-highlight));
+ border-color: var(--#{$status});
+ }
+
+ &:not([aria-disabled='true']):active {
+ border-color: var(--#{$status}-dark, var(--status));
+ }
+ }
+ }
+ }
+ }
+
+ .LemonButtonWithSideAction__spacer {
+ height: 1.5rem;
+ width: 1.5rem;
+
+ &.LemonButtonWithSideAction__spacer--divider {
+ opacity: 0.17;
+ padding-left: 0.375rem;
+ }
+
+ .LemonButton--small & {
+ margin-left: 0.25rem;
+ }
+ }
+}
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
index 8d115c78884c6..8df6f4fc1166c 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
@@ -17,17 +17,20 @@
.LemonCalendar__month tr {
.LemonButton {
&.rounded-none {
- border-radius: 0px;
+ border-radius: 0;
}
+
&.rounded-r-none {
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
}
+
&.rounded-l-none {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
}
+
.LemonCalendar__today {
position: relative;
@@ -39,7 +42,7 @@
border-radius: 100%;
width: calc(var(--lemon-calendar-today-radius) * 2);
height: calc(var(--lemon-calendar-today-radius) * 2);
- background: currentcolor;
+ background: currentColor;
}
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss b/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
index 044e7b9f25603..f5fd7cf2493a4 100644
--- a/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
+++ b/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
@@ -1,5 +1,6 @@
.LemonCard {
transition: 200ms ease;
+
&.LemonCard--hoverEffect {
&:hover {
transform: scale(1.01);
diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
index 560b2ce2c48a3..8ffed36ab0d40 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -14,6 +14,7 @@
label {
--tick-length: 12.73; // Approximation of tick length, which is (3 + 6) * sqrt(2)
--box-color: var(--primary);
+
display: flex;
align-items: center;
cursor: pointer;
@@ -45,6 +46,7 @@
&.LemonCheckbox--full-width {
width: 100%;
+
label {
width: 100%;
}
@@ -61,7 +63,6 @@
.LemonCheckbox__box {
border-color: var(--box-color);
- border-color: var(--box-color);
}
}
}
@@ -70,10 +71,6 @@
--box-color: var(--primary-dark);
}
- &.LemonCheckbox--full-width label {
- width: 100%;
- }
-
&.LemonCheckbox--checked {
label {
.LemonCheckbox__box {
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
index 08c6f340c44bf..ecf859a354eec 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
@@ -12,14 +12,15 @@
display: flex;
flex-direction: column;
align-items: stretch;
+
&:not(:last-child) {
border-bottom-width: 1px;
}
}
.LemonCollapsePanel__header {
- min-height: 2.875rem;
- border-radius: 0;
+ min-height: 2.875rem !important;
+ border-radius: 0 !important;
padding: 0.5rem 0.75rem !important; // Override reduced side padding
font-weight: 500 !important; // Override status="stealth"'s font-weight
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
index bba49b00e27b7..1a266d6ba5b08 100644
--- a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
@@ -4,6 +4,7 @@
.FileDropTarget--active::after {
--file-drop-target-padding: 0.5rem;
+
content: '';
position: absolute;
top: calc(-1 * var(--file-drop-target-padding));
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
index 30eeee4083802..03943ad9f9bf1 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
@@ -19,6 +19,7 @@
&:hover:not([aria-disabled='true']) {
border-color: var(--primary-light);
}
+
&.LemonInput--focused:not([aria-disabled='true']) {
border-color: var(--primary);
}
@@ -74,6 +75,7 @@
// NOTE Design: Search inputs are given a specific small width
max-width: 240px;
}
+
&.LemonInput--full-width {
width: 100%;
max-width: 100%;
diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss
index 1858e38e78e92..f8ae353f277ac 100644
--- a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss
+++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss
@@ -1,28 +1,35 @@
.LemonMarkdown {
> * {
- margin: 0 0 0.5em 0;
+ margin: 0 0 0.5em;
+
&:last-child {
margin-bottom: 0;
}
}
+
ol,
ul,
dl {
padding-left: 1.5em;
}
+
ol {
list-style-type: decimal;
}
+
ul {
list-style-type: disc;
}
+
strong[level] {
// Low-key headings
display: block;
}
+
hr {
margin: 1em 0;
}
+
h1 {
margin-bottom: 0.25em;
font-weight: 600;
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
index 7e981fbe5f4bb..b061b90d56c35 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
@@ -1,7 +1,6 @@
import React, { FunctionComponent, ReactNode, useCallback, useMemo } from 'react'
import { LemonButton, LemonButtonProps } from '../LemonButton'
import { TooltipProps } from '../Tooltip'
-import { TooltipPlacement } from 'antd/lib/tooltip'
import { LemonDivider } from '../LemonDivider'
import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
import { useKeyboardNavigation } from './useKeyboardNavigation'
@@ -152,7 +151,7 @@ export function LemonMenuOverlay({ items, tooltipPlacement, itemsRef }: LemonMen
interface LemonMenuSectionListProps {
sections: LemonMenuSection[]
buttonSize: 'small' | 'medium'
- tooltipPlacement: TooltipPlacement | undefined
+ tooltipPlacement: TooltipProps['placement'] | undefined
itemsRef: React.RefObject[]> | undefined
}
@@ -201,7 +200,7 @@ export function LemonMenuSectionList({
interface LemonMenuItemListProps {
items: LemonMenuItem[]
buttonSize: 'small' | 'medium'
- tooltipPlacement: TooltipPlacement | undefined
+ tooltipPlacement: TooltipProps['placement'] | undefined
itemsRef: React.RefObject[]> | undefined
itemIndexOffset?: number
}
@@ -234,7 +233,7 @@ export function LemonMenuItemList({
interface LemonMenuItemButtonProps {
item: LemonMenuItem
size: 'small' | 'medium'
- tooltipPlacement: TooltipPlacement | undefined
+ tooltipPlacement: TooltipProps['placement'] | undefined
}
const LemonMenuItemButton: FunctionComponent> =
diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
index a3f0cae016830..50506eac65e68 100644
--- a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
+++ b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
@@ -1,14 +1,9 @@
.LemonModal__overlay {
position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-
+ inset: 0;
transition: background-color var(--modal-transition-time) ease-out,
backdrop-filter var(--modal-transition-time) ease-out;
z-index: var(--z-modal);
-
display: flex;
align-items: center;
justify-content: center;
@@ -24,7 +19,7 @@
&.ReactModal__Overlay--before-close {
background-color: transparent;
- backdrop-filter: blur(0px);
+ backdrop-filter: blur(0);
}
}
@@ -37,7 +32,7 @@
margin: 1rem auto;
border-radius: var(--radius);
background-color: var(--bg-light);
- border: 1px solid var(--border);
+ border: 1px solid var(--border-3000);
box-shadow: var(--shadow-elevation);
transition: opacity var(--modal-transition-time) ease-out, transform var(--modal-transition-time) ease-out;
display: flex;
@@ -62,13 +57,15 @@
transform: scale(1);
opacity: 1;
}
+
.LemonModal__close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 1;
+
&.LemonModal__close--highlighted {
- animation: tilt-shake 400ms;
+ animation: LemonModal__tilt-shake 400ms;
}
}
@@ -132,19 +129,23 @@
border-top: none;
}
-@keyframes tilt-shake {
+@keyframes LemonModal__tilt-shake {
0% {
transform: rotate(0deg);
}
+
16.666% {
transform: rotate(12deg);
}
+
50% {
transform: rotate(-10deg);
}
+
83.333% {
transform: rotate(8deg);
}
+
100% {
transform: rotate(0deg);
}
diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
index a1b6d8c5c03c8..f847cc3127765 100644
--- a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
+++ b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
@@ -117,6 +117,7 @@
.LemonRow--large {
@extend .LemonRow--tall;
+
font-size: 1rem;
.LemonRow__icon {
diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
index 84f6613726909..43285996e4742 100644
--- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
@@ -2,9 +2,8 @@
position: relative;
flex-shrink: 0;
width: fit-content;
- background: var(--bg-light);
border-radius: var(--radius);
- border: 1px solid var(--border);
+
> ul {
z-index: 1; // Place above slider
list-style: none;
@@ -15,70 +14,150 @@
&.LemonSegmentedButton--full-width {
width: 100%;
}
-}
-.LemonSegmentedButton__slider {
- // This is a real element and not ::after to avoid initial transition from 0 width
- transition: width 200ms ease, transform 200ms ease, border-radius 200ms ease;
- will-change: width, transform, border-radius;
- position: absolute;
- top: -1px; // 1px of border
- left: -1px; // 1px of border
- height: calc(100% + 2px); // 1px of border (top + bottom)
- width: calc(var(--lemon-segmented-button-slider-width) + 2px); // 1px of border (left + right)
- transform: translateX(var(--lemon-segmented-button-slider-offset));
- background: var(--primary);
- &.LemonSegmentedButton__slider--first {
- border-top-left-radius: var(--radius);
- border-bottom-left-radius: var(--radius);
- }
- &.LemonSegmentedButton__slider--last {
- border-top-right-radius: var(--radius);
- border-bottom-right-radius: var(--radius);
+ .LemonSegmentedButton__option {
+ display: flex;
+ flex: 1;
}
}
-.LemonSegmentedButton__option {
- display: flex;
- flex: 1;
- .LemonButton {
- // Original transition with outline added
- transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
- outline 200ms ease;
- outline: 1px solid transparent;
- border-radius: 0;
- min-height: calc(var(--lemon-button-height) - 2px);
+body:not(.posthog-3000) {
+ .LemonSegmentedButton {
+ background: var(--bg-light);
+ border: 1px solid var(--border);
}
- &:first-child,
- &:first-child .LemonButton {
- border-top-left-radius: var(--radius);
- border-bottom-left-radius: var(--radius);
- }
- &:last-child,
- &:last-child .LemonButton {
- border-top-right-radius: var(--radius);
- border-bottom-right-radius: var(--radius);
- }
- &:not(:last-child) {
- border-right: 1px solid var(--border);
+
+ .LemonSegmentedButton__slider {
+ // This is a real element and not ::after to avoid initial transition from 0 width
+ transition: width 200ms ease, transform 200ms ease, border-radius 200ms ease;
+ will-change: width, transform, border-radius;
+ position: absolute;
+ top: -1px; // 1px of border
+ left: -1px; // 1px of border
+ height: calc(100% + 2px); // 1px of border (top + bottom)
+ width: calc(var(--lemon-segmented-button-slider-width) + 2px); // 1px of border (left + right)
+ transform: translateX(var(--lemon-segmented-button-slider-offset));
+ background: var(--primary);
+
+ &.LemonSegmentedButton__slider--first {
+ border-top-left-radius: var(--radius);
+ border-bottom-left-radius: var(--radius);
+ }
+
+ &.LemonSegmentedButton__slider--last {
+ border-top-right-radius: var(--radius);
+ border-bottom-right-radius: var(--radius);
+ }
}
- &:not(.LemonSegmentedButton__option--disabled):not(.LemonSegmentedButton__option--selected) {
- &:hover .LemonButton {
- outline-color: var(--primary);
+
+ .LemonSegmentedButton__option {
+ .LemonButton {
+ // Original transition with outline added
+ transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
+ outline 200ms ease;
+ outline: 1px solid transparent;
+ border-radius: 0;
+ min-height: calc(var(--lemon-button-height) - 2px);
+
+ &:hover {
+ > span {
+ border-color: none !important;
+ }
+ }
+ }
+
+ &:first-child,
+ &:first-child .LemonButton {
+ border-top-left-radius: var(--radius);
+ border-bottom-left-radius: var(--radius);
+ }
+
+ &:last-child,
+ &:last-child .LemonButton {
+ border-top-right-radius: var(--radius);
+ border-bottom-right-radius: var(--radius);
}
- &:active .LemonButton {
- outline-color: var(--primary-dark);
+
+ &:not(:last-child) {
+ border-right: 1px solid var(--border);
+ }
+
+ &:not(.LemonSegmentedButton__option--disabled, .LemonSegmentedButton__option--selected) {
+ &:hover .LemonButton {
+ outline-color: var(--primary);
+ }
+
+ &:active .LemonButton {
+ outline-color: var(--primary-dark);
+ }
+ }
+
+ &.LemonSegmentedButton__option--selected {
+ .LemonButton,
+ .LemonButton__icon {
+ color: #fff;
+ }
+
+ .LemonButton {
+ &:hover,
+ &:active {
+ background: none; // Disable LemonButton's hover styles for the selected option
+ }
+ }
}
}
- &.LemonSegmentedButton__option--selected {
- .LemonButton,
- .LemonButton__icon {
- color: #fff;
+}
+
+.posthog-3000 {
+ .LemonSegmentedButton__option {
+ & .LemonButton,
+ & .LemonButton > span {
+ border-radius: 0;
}
- .LemonButton {
- &:hover,
- &:active {
- background: none; // Disable LemonButton's hover styles for the selected option
+
+ .LemonButton > span {
+ background: var(--bg-3000);
+
+ .LemonButton__icon,
+ .LemonButton__content {
+ opacity: 0.4;
+ }
+ }
+
+ .LemonButton.LemonButton--secondary:not([aria-disabled='true']):hover {
+ > span {
+ border-color: var(--secondary-3000-button-border);
+ }
+ }
+
+ &:first-child,
+ &:first-child .LemonButton,
+ &:first-child .LemonButton > span {
+ border-top-left-radius: var(--radius);
+ border-bottom-left-radius: var(--radius);
+ }
+
+ &:last-child,
+ &:last-child .LemonButton,
+ &:last-child .LemonButton > span {
+ border-top-right-radius: var(--radius);
+ border-bottom-right-radius: var(--radius);
+ }
+
+ &:not(:last-child) {
+ .LemonButton {
+ border-right: none;
+ }
+ }
+
+ &.LemonSegmentedButton__option--selected {
+ .LemonButton > span {
+ background-color: var(--bg-light);
+
+ .LemonButton__icon,
+ .LemonButton__content {
+ opacity: 1;
+ }
}
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
index 2fd4a2adb0a57..60a1e15ac10bb 100644
--- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
@@ -3,6 +3,9 @@ import React from 'react'
import { LemonButton } from '../LemonButton'
import { useSliderPositioning } from '../hooks'
import './LemonSegmentedButton.scss'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
export interface LemonSegmentedButtonOption {
value: T
@@ -37,20 +40,33 @@ export function LemonSegmentedButton({
fullWidth,
className,
}: LemonSegmentedButtonProps): JSX.Element {
- const { containerRef, selectionRef, sliderWidth, sliderOffset } = useSliderPositioning<
+ const { containerRef, selectionRef, sliderWidth, sliderOffset, transitioning } = useSliderPositioning<
HTMLDivElement,
- HTMLButtonElement
+ HTMLLIElement
>(value, 200)
+ const { featureFlags } = useValues(featureFlagLogic)
+
+ const has3000 = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+
+ let buttonProps = {}
+
+ if (has3000) {
+ buttonProps = { status: 'stealth', type: 'secondary', motion: false }
+ }
return (
+ When using sessions and session properties, events without session IDs will be excluded from the
+ set of results.{' '}
+ Learn more about sessions.
+
+ ) : null}
)
diff --git a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
index 81b5ae9d56b2c..4ac27f78933e1 100644
--- a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
@@ -7,6 +7,7 @@ import { getAllEventNames } from './utils'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { EditorFilterProps } from '~/types'
import { StickinessQuery, TrendsQuery } from '~/queries/schema'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Element {
const { actions: allActions } = useValues(actionsModel)
@@ -27,7 +28,8 @@ export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Ele
return (
closeDetails?.()}>
{text}
)
}
-export function TextCardBody({ text, closeDetails, style }: TextCardBodyProps): JSX.Element {
- return (
- // eslint-disable-next-line react/forbid-dom-props
- closeDetails?.()} style={style}>
-
- )
-}
-
export function TextCardInternal(
{
textTile,
@@ -67,8 +58,6 @@ export function TextCardInternal(
const { push } = useActions(router)
const { text } = textTile
- const [metaPrimaryHeight, setMetaPrimaryHeight] = useState
+
+
+ dashboardId && push(urls.dashboardTextTile(dashboardId, textTile.id))
+ }
+ data-attr="edit-text"
+ >
+ Edit text
+
+
+ {moveToDashboard && otherDashboards.length > 0 && (
+ (
+ {
+ moveToDashboard(otherDashboard)
+ }}
+ fullWidth
+ >
+ {otherDashboard.name || Untitled}
+
+ )),
+ placement: 'right-start',
+ fallbackPlacements: ['left-start'],
+ actionable: true,
+ closeParentPopoverOnClickInside: true,
+ }}
+ fullWidth
+ >
+ Move to
+
+ )}
+
+ Duplicate
+
+ {moreButtons && (
+ <>
+
+ Remove from dashboard
+
+ )}
- )}
-
- Remove from dashboard
-
- )}
-
- }
- setPrimaryHeight={setMetaPrimaryHeight}
- />
+ }
+ />
+
+ )}
-
+
{showResizeHandles && (
<>
diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss b/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
index f7d40aaf1a9b5..4fb411ba56520 100644
--- a/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
+++ b/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
@@ -1,19 +1,23 @@
.CodeSnippet {
position: relative;
font-size: 0.875rem;
+
&.CodeSnippet--compact {
font-size: 0.8125rem;
+
.CodeSnippet__actions {
top: 0.375rem;
right: 0.375rem;
}
}
+
.CodeSnippet__actions {
position: absolute;
display: flex;
top: 0.25rem;
right: 0.25rem;
gap: 0.5rem;
+
.LemonButton .LemonIcon {
color: #fff;
}
diff --git a/frontend/src/lib/components/CommandBar/ActionBar.tsx b/frontend/src/lib/components/CommandBar/ActionBar.tsx
new file mode 100644
index 0000000000000..24069e307cd41
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/ActionBar.tsx
@@ -0,0 +1,17 @@
+import { useValues } from 'kea'
+
+import { actionBarLogic } from './actionBarLogic'
+
+import { ActionInput } from './ActionInput'
+import { ActionResults } from './ActionResults'
+
+export const ActionBar = (): JSX.Element => {
+ const { activeFlow } = useValues(actionBarLogic)
+
+ return (
+
+ {(!activeFlow || activeFlow.instruction) &&
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/ActionInput.tsx b/frontend/src/lib/components/CommandBar/ActionInput.tsx
new file mode 100644
index 0000000000000..879b699ad1930
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/ActionInput.tsx
@@ -0,0 +1,41 @@
+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
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/ActionResult.tsx b/frontend/src/lib/components/CommandBar/ActionResult.tsx
new file mode 100644
index 0000000000000..a67082f3dfc98
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/ActionResult.tsx
@@ -0,0 +1,53 @@
+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
+}
+
+export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Element => {
+ const { executeResult, onMouseEnterResult, onMouseLeaveResult } = useActions(actionBarLogic)
+
+ const ref = useRef
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/ActionResults.tsx b/frontend/src/lib/components/CommandBar/ActionResults.tsx
new file mode 100644
index 0000000000000..059954357506e
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/ActionResults.tsx
@@ -0,0 +1,40 @@
+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 (
+ <>
+ {
+ onMouseEnterResult(result.index)
+ }}
+ onMouseLeave={() => {
+ onMouseLeaveResult()
+ }}
+ onClick={() => {
+ if (isExecutable) {
+ executeResult(result)
+ }
+ }}
+ ref={ref}
+ >
+
+
+ {result.source.scope && (
+ {getNameFromActionScope(result.source.scope)}
+ )}
+ {result.display}
+
+ {getNameFromActionScope(scope)}
+ {results.map((result) => (
+
+ {commandSearchResultsGrouped.map(([scope, results]) => (
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
new file mode 100644
index 0000000000000..3850051e60551
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -0,0 +1,49 @@
+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 { ActionBar } from './ActionBar'
+
+const CommandBarOverlay = ({ children }: { children?: React.ReactNode }): JSX.Element => (
+
+ {children}
+
+)
+
+export function CommandBar(): JSX.Element | null {
+ const containerRef = useRef
+ {barStatus === BarStatus.SHOW_SEARCH ?
+
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/SearchBarTab.tsx b/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
new file mode 100644
index 0000000000000..f218824187a26
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
@@ -0,0 +1,24 @@
+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
+}
+
+export const SearchBarTab = ({ type, active, count }: SearchBarTabProps): JSX.Element => {
+ const { setActiveTab } = useActions(searchBarLogic)
+ return (
+ setActiveTab(type)}
+ >
+ {resultTypeToName[type]}
+ {count != null && {count}}
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/SearchInput.tsx b/frontend/src/lib/components/CommandBar/SearchInput.tsx
new file mode 100644
index 0000000000000..40c08c942c5bb
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/SearchInput.tsx
@@ -0,0 +1,26 @@
+import { useActions, useValues } from 'kea'
+
+import { LemonInput } from '@posthog/lemon-ui'
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+
+import { searchBarLogic } from './searchBarLogic'
+
+export const SearchInput = (): JSX.Element => {
+ const { searchQuery } = useValues(searchBarLogic)
+ const { setSearchQuery } = useActions(searchBarLogic)
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/SearchResult.tsx b/frontend/src/lib/components/CommandBar/SearchResult.tsx
new file mode 100644
index 0000000000000..af88481772ff5
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/SearchResult.tsx
@@ -0,0 +1,84 @@
+import { useLayoutEffect, useRef } from 'react'
+import { useActions, useValues } from 'kea'
+
+import { resultTypeToName } from './constants'
+import { searchBarLogic, urlForResult } from './searchBarLogic'
+import { SearchResult as SearchResultType } from './types'
+import { LemonSkeleton } from '@posthog/lemon-ui'
+
+type SearchResultProps = {
+ result: SearchResultType
+ resultIndex: number
+ focused: boolean
+ keyboardFocused: boolean
+}
+
+export const SearchResult = ({ result, resultIndex, focused, keyboardFocused }: SearchResultProps): JSX.Element => {
+ const { isAutoScrolling } = useValues(searchBarLogic)
+ const { onMouseEnterResult, onMouseLeaveResult, openResult, setIsAutoScrolling } = useActions(searchBarLogic)
+
+ const ref = useRef {
+ if (isAutoScrolling) {
+ return
+ }
+ onMouseEnterResult(resultIndex)
+ }}
+ onMouseLeave={() => {
+ if (isAutoScrolling) {
+ return
+ }
+ onMouseLeaveResult()
+ }}
+ onClick={() => {
+ openResult(resultIndex)
+ }}
+ ref={ref}
+ >
+
+ )
+}
+
+export const SearchResultSkeleton = (): JSX.Element => (
+
+ {resultTypeToName[result.type]}
+ {result.name}
+
+ {location.host}
+ {urlForResult(result)}
+
+
+
+
+)
diff --git a/frontend/src/lib/components/CommandBar/SearchResults.tsx b/frontend/src/lib/components/CommandBar/SearchResults.tsx
new file mode 100644
index 0000000000000..1b2ab8ee00bd7
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/SearchResults.tsx
@@ -0,0 +1,40 @@
+import { useValues } from 'kea'
+
+import { DetectiveHog } from '../hedgehogs'
+
+import { searchBarLogic } from './searchBarLogic'
+import { SearchResult, SearchResultSkeleton } from './SearchResult'
+
+export const SearchResults = (): JSX.Element => {
+ const { filterSearchResults, searchResponseLoading, activeResultIndex, keyboardResultIndex } =
+ useValues(searchBarLogic)
+
+ return (
+
+
+
+ {searchResponseLoading && (
+ <>
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/SearchTabs.tsx b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
new file mode 100644
index 0000000000000..bc83ed1110a76
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
@@ -0,0 +1,22 @@
+import { useValues } from 'kea'
+
+import { searchBarLogic } from './searchBarLogic'
+import { SearchBarTab } from './SearchBarTab'
+import { ResultType } from './types'
+
+export const SearchTabs = (): JSX.Element | null => {
+ const { searchResponse, activeTab } = useValues(searchBarLogic)
+
+ if (!searchResponse) {
+ return null
+ }
+
+ return (
+
+
+ )}
+ {!searchResponseLoading &&
+ filterSearchResults?.map((result, index) => (
+ No results
+This doesn't happen often, but we're stumped!
+
+
+ )
+}
diff --git a/frontend/src/lib/components/CommandBar/actionBarLogic.ts b/frontend/src/lib/components/CommandBar/actionBarLogic.ts
new file mode 100644
index 0000000000000..aaee36bc40e3b
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/actionBarLogic.ts
@@ -0,0 +1,97 @@
+import { kea, path, listeners, connect, afterMount, beforeUnmount } from 'kea'
+
+import { commandPaletteLogic } from '../CommandPalette/commandPaletteLogic'
+import { commandBarLogic } from './commandBarLogic'
+
+import { BarStatus } from './types'
+
+import type { actionBarLogicType } from './actionBarLogicType'
+
+export const actionBarLogic = kea
diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
index 8221fb35faf4d..17b0dded01c1d 100644
--- a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
+++ b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
@@ -6,9 +6,11 @@
&.SelectableElement--selected {
background: var(--primary);
}
+
&:hover {
background: var(--primary-light);
}
+
&:active {
background: var(--primary-dark);
}
diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss
index 8c9452943f1f3..a16ea6a598aae 100644
--- a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss
+++ b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss
@@ -4,7 +4,7 @@
cursor: pointer;
margin: 0;
- &:after {
+ &::after {
// Hack for preloading images
position: absolute;
width: 0;
diff --git a/frontend/src/lib/components/HelpButton/HelpButton.tsx b/frontend/src/lib/components/HelpButton/HelpButton.tsx
index e15f1b62664f4..60fdb6f44e2d5 100644
--- a/frontend/src/lib/components/HelpButton/HelpButton.tsx
+++ b/frontend/src/lib/components/HelpButton/HelpButton.tsx
@@ -9,8 +9,6 @@ import {
IconHelpOutline,
IconQuestionAnswer,
IconMessages,
- IconFlare,
- IconLive,
IconSupport,
IconFeedback,
IconBugReport,
@@ -18,8 +16,6 @@ import {
import clsx from 'clsx'
import { Placement } from '@floating-ui/react'
import { DefaultAction, inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
-import { hedgehogbuddyLogic } from '../HedgehogBuddy/hedgehogbuddyLogic'
-import { HedgehogBuddyWithLogic } from '../HedgehogBuddy/HedgehogBuddy'
import { supportLogic } from '../Support/supportLogic'
import { SupportModal } from '../Support/SupportModal'
import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
@@ -88,8 +84,6 @@ export function HelpButton({
const { validProductTourSequences } = useValues(inAppPromptLogic)
const { runFirstValidSequence, promptAction } = useActions(inAppPromptLogic)
const { isPromptVisible } = useValues(inAppPromptLogic)
- const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
- const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
const { openSupportForm } = useActions(supportLogic)
const { isCloudOrDev } = useValues(preflightLogic)
@@ -103,20 +97,6 @@ export function HelpButton({
<>
-
-
)}
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
index 0470d5da983f5..51a33cfeeec3e 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
@@ -14,7 +14,7 @@
color: #c4c4c4;
font-size: 18px;
user-select: none;
- padding: 0px 5px;
+ padding: 0 5px;
}
.logical-row-divider {
@@ -23,7 +23,7 @@
text-transform: uppercase;
align-items: flex-start;
margin-top: 0.5rem;
- margin-bottom: 0px;
+ margin-bottom: 0;
&::before,
&::after {
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss
index 7834113d53f3f..0a33bc26c1aae 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss
@@ -29,7 +29,7 @@
background-color: inherit;
.ant-select-selection-search {
- padding-left: 0px !important;
+ padding-left: 0 !important;
}
.ant-select-selection-placeholder {
diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
index 6bfa3e13ada30..b30e128738345 100644
--- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
+++ b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -7,12 +7,12 @@
.property-group-and-or-separator {
color: var(--primary-alt);
- padding: 0.5rem 0px;
+ padding: 0.5rem 0;
font-size: 12px;
font-weight: 600;
position: relative;
- &:before {
+ &::before {
position: absolute;
left: 17px;
top: 0;
diff --git a/frontend/src/lib/components/PropertyKeyInfo.scss b/frontend/src/lib/components/PropertyKeyInfo.scss
index 23a2e43a5e18c..693cc701c17ea 100644
--- a/frontend/src/lib/components/PropertyKeyInfo.scss
+++ b/frontend/src/lib/components/PropertyKeyInfo.scss
@@ -31,8 +31,10 @@
.PropertyKeyInfo__overlay {
padding: 0.25rem;
+
p {
margin-bottom: 0.25rem;
+
&:last-child {
margin-bottom: 0;
}
diff --git a/frontend/src/lib/components/PropertyKeyInfo.tsx b/frontend/src/lib/components/PropertyKeyInfo.tsx
index 9094859a12b49..45aa9117086b7 100644
--- a/frontend/src/lib/components/PropertyKeyInfo.tsx
+++ b/frontend/src/lib/components/PropertyKeyInfo.tsx
@@ -3,13 +3,12 @@ import clsx from 'clsx'
import { Popover } from 'lib/lemon-ui/Popover'
import { getKeyMapping, PropertyKey, PropertyType } from 'lib/taxonomy'
import React, { useState } from 'react'
-import { LemonDivider } from '@posthog/lemon-ui'
-import { TooltipPlacement } from 'antd/lib/tooltip'
+import { LemonDivider, TooltipProps } from '@posthog/lemon-ui'
interface PropertyKeyInfoProps {
value: PropertyKey
type?: PropertyType
- tooltipPlacement?: TooltipPlacement
+ tooltipPlacement?: TooltipProps['placement']
disablePopover?: boolean
disableIcon?: boolean
/** @default true */
diff --git a/frontend/src/lib/components/Resizer/Resizer.scss b/frontend/src/lib/components/Resizer/Resizer.scss
index 4fa7711683239..52df99380745f 100644
--- a/frontend/src/lib/components/Resizer/Resizer.scss
+++ b/frontend/src/lib/components/Resizer/Resizer.scss
@@ -1,5 +1,6 @@
.Resizer {
--resizer-width: 8px;
+
position: absolute;
top: 0;
bottom: 0;
@@ -17,8 +18,8 @@
.Resizer__handle {
position: absolute;
left: calc(var(--resizer-width) / 2);
- top: 0px;
- bottom: 0px;
+ top: 0;
+ bottom: 0;
width: 1px;
&::before,
@@ -35,6 +36,7 @@
transition: 100ms ease transform;
background: var(--border);
}
+
&::after {
transition: 100ms ease transform;
background: var(--text-3000);
@@ -43,19 +45,20 @@
}
&--left {
- left: 0px;
+ left: 0;
transform: translateX(calc(var(--resizer-width) / 2 * -1));
}
&--right {
- right: 0px;
- transform: translateX(calc(var(--resizer-width) / 2 * +1));
+ right: 0;
+ transform: translateX(calc(var(--resizer-width) / 2 * 1));
}
&:hover .Resizer__handle::after,
&--resizing .Resizer__handle::after {
opacity: 0.25;
}
+
&--resizing .Resizer__handle::before,
&--resizing .Resizer__handle::after {
transform: scaleX(3);
diff --git a/frontend/src/lib/components/SelectGradientOverflow.scss b/frontend/src/lib/components/SelectGradientOverflow.scss
index c1c81e4405e4f..c583519744598 100644
--- a/frontend/src/lib/components/SelectGradientOverflow.scss
+++ b/frontend/src/lib/components/SelectGradientOverflow.scss
@@ -3,10 +3,12 @@
.ant-select-dropdown {
.scrollable-above::after {
@extend %mixin-gradient-overlay;
- background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+ background: linear-gradient(to bottom, rgb(255 255 255 / 100%), rgb(255 255 255 / 0%));
bottom: unset;
top: 0;
}
+
.scrollable-below::after {
@extend %mixin-gradient-overlay;
}
@@ -17,9 +19,7 @@
margin: 1px 4px 1px 0;
display: flex;
align-items: center;
- flex-basis: auto;
- flex-grow: 0;
- flex-shrink: 0;
+ flex: 0 0 auto;
overflow: hidden;
padding: 0 4px 0 8px;
font-size: inherit;
@@ -27,17 +27,21 @@
background: #f5f5f5;
border: 1px solid #f0f0f0;
user-select: none;
+
.label {
overflow: hidden;
text-overflow: ellipsis;
}
+
.btn-close {
font-size: 10px;
margin-left: 4px;
+
.anticon-close {
- color: rgba(0, 0, 0, 0.45);
+ color: rgb(0 0 0 / 45%);
+
& :hover {
- color: rgba(0, 0, 0, 0.75);
+ color: rgb(0 0 0 / 75%);
}
}
}
diff --git a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
index 1926ad2b7fb12..66f19b0bc54cb 100644
--- a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
+++ b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
@@ -119,11 +119,11 @@ export function EditSubscription({
{!subscription ? (
subscriptionLoading ? (
- {notebookProps ? (
-
-
- ) : (
-
+ )}
+ {is3000 && buttons && actionsContainer && createPortal(buttons, actionsContainer)}
{caption && {title}
-{title}
- )} - {description} + {} + {(!is3000 || description) && ( +
+
-
+ {!is3000 &&
+ (notebookProps ? (
+
+
+ ) : (
+
+ {!is3000 && {title}
+{title}
+ ))} + {description && {description}} +{buttons}
}
{buttons}
- {caption}
}
{delimited &&
-
) : (
diff --git a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
index 6707c6a097c55..50c782fc12682 100644
--- a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
+++ b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
@@ -88,7 +88,7 @@ export function ManageSubscriptions({
-
) : subscriptions.length ? (
diff --git a/frontend/src/lib/components/Support/supportLogic.ts b/frontend/src/lib/components/Support/supportLogic.ts
index 78bd137b8ffe2..af00389dcf7bf 100644
--- a/frontend/src/lib/components/Support/supportLogic.ts
+++ b/frontend/src/lib/components/Support/supportLogic.ts
@@ -309,9 +309,21 @@ export const supportLogic = kea({
option.disabledReason && 'LemonSegmentedButton__option--disabled',
option.value === value && 'LemonSegmentedButton__option--selected'
)}
+ ref={option.value === value ? selectionRef : undefined}
>
- ({
icon={option.icon}
data-attr={option['data-attr']}
center
+ {...buttonProps}
>
{option.label}
diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
index 5686b6af19412..51093dcb54c11 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
@@ -140,7 +140,7 @@ export function LemonSelect({
className={clsx(className, isClearButtonShown && 'LemonSelect--clearable')}
icon={activeLeaf?.icon}
// so that the pop-up isn't shown along with the close button
- sideIcon={isClearButtonShown ? : undefined}
+ sideIcon={isClearButtonShown ? <> : undefined}
type="secondary"
status="stealth"
{...buttonProps}
diff --git a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
index 81162b59129b2..a382503f15b58 100644
--- a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
+++ b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
@@ -1,6 +1,7 @@
.LemonSelectMultiple {
.ant-select {
width: 100%;
+
.ant-select-selector,
&.ant-select-single .ant-select-selector {
min-height: 40px;
@@ -9,7 +10,6 @@
font-size: 0.875rem;
text-align: left;
line-height: 1.25rem;
-
border: 1px solid var(--border);
background: var(--bg-light);
@@ -27,6 +27,7 @@
box-shadow: none;
}
}
+
&:not(.ant-select-disabled):active {
.ant-select-selector {
color: var(--primary-active);
@@ -67,12 +68,13 @@
padding: 0.5rem;
border-radius: var(--radius);
border: 1px solid var(--primary);
- margin: -4px 0px; // Counteract antd wrapper
+ margin: -4px 0; // Counteract antd wrapper
.ant-select-item {
- padding: 0px;
+ padding: 0;
background: none;
padding-bottom: 0.2rem;
+
.ant-select-item-option-content {
height: 40px;
cursor: pointer;
@@ -91,13 +93,14 @@
background: var(--primary-bg-active);
}
}
+
.ant-select-item-option-state {
display: none;
}
}
.ant-select-item-empty {
- padding: 0px;
+ padding: 0;
}
.ant-select-item-option-content {
@@ -110,6 +113,6 @@
align-items: center;
gap: 0.5rem;
height: 40px;
- padding: 0px 0.25rem;
+ padding: 0 0.25rem;
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss
index bbd07691933a2..29095c2aac936 100644
--- a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss
+++ b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss
@@ -4,12 +4,12 @@
background: linear-gradient(
90deg,
- rgba(190, 190, 190, 0.2) 25%,
- rgba(129, 129, 129, 0.24) 45%,
- rgba(190, 190, 190, 0.2) 65%
+ rgb(190 190 190 / 20%) 25%,
+ rgb(129 129 129 / 24%) 45%,
+ rgb(190 190 190 / 20%) 65%
);
background-size: 400% 100%;
- animation: lemon-skeleton-loading 2s ease infinite;
+ animation: LemonSkeleton__shimmer 2s ease infinite;
@media (prefers-reduced-motion) {
animation: none;
@@ -30,7 +30,7 @@
}
}
-@keyframes lemon-skeleton-loading {
+@keyframes LemonSkeleton__shimmer {
0% {
background-position: 100% 50%;
}
diff --git a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx
index 7bb37f0f5165b..67850000a6417 100644
--- a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx
@@ -54,7 +54,7 @@ export function Presets(): JSX.Element {
}
>
diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.scss b/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
index de26425709f08..fb05255736d2e 100644
--- a/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
+++ b/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
@@ -1,76 +1,26 @@
@import '../../../styles/mixins';
.EditorFiltersWrapper {
+ --editor-panel-group-min-width: 20rem;
+
flex-shrink: 0;
background: var(--bg-light);
- container-type: inline-size;
&:not(.EditorFiltersWrapper--embedded) {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem;
- margin-bottom: 1rem;
}
.EditorFilters {
- > * + * {
- margin-top: 1rem;
- }
-
- @container (min-width: 768px) {
- display: flex;
- gap: 2rem;
-
- .EditorFilterGroup {
- flex: 1;
- width: 50%;
- }
-
- > * + * {
- margin-top: 0;
- }
- }
- }
-
- &.EditorFiltersWrapper--singlecolumn {
- border: none;
- background: none;
- padding: 0px;
- margin-right: 1rem;
- container-type: normal;
-
- @include screen($xl) {
- --editor-panel-width: max(25vw, 28rem);
-
- .EditorFilters {
- width: var(--editor-panel-width);
- display: block;
- padding-right: 1rem;
- }
- }
-
- .EditorFilters {
- flex-direction: column;
- gap: 0rem;
-
- .EditorFilterGroup {
- width: auto;
- }
-
- > * + * {
- margin-top: 1rem;
- }
- }
- }
-
- &.EditorFiltersWrapper--embedded {
- margin-right: 0rem;
-
- @include screen($xl) {
- .EditorFilters {
- width: 100%;
- padding-right: 0rem;
- }
+ display: flex;
+ flex-flow: row wrap;
+ gap: 1rem;
+
+ .EditorFilterGroup {
+ flex: 1;
+ min-width: var(--editor-panel-group-min-width);
+ max-width: 100%;
}
}
}
diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
index 204dd70b069c7..fce497328f8ef 100644
--- a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
@@ -20,7 +20,6 @@ import { LifecycleToggles } from './LifecycleToggles'
import { GlobalAndOrFilters } from './GlobalAndOrFilters'
import { TrendsSeries } from './TrendsSeries'
import { TrendsSeriesLabel } from './TrendsSeriesLabel'
-import { TrendsFormulaLabel } from './TrendsFormulaLabel'
import { TrendsFormula } from './TrendsFormula'
import { Breakdown } from './Breakdown'
import { PathsEventsTypes } from 'scenes/insights/EditorFilters/PathsEventTypes'
@@ -39,6 +38,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import './EditorFilters.scss'
import { PathsHogQL } from 'scenes/insights/EditorFilters/PathsHogQL'
+import { LemonBanner, Link } from '@posthog/lemon-ui'
export interface EditorFiltersProps {
query: InsightQueryNode
@@ -62,6 +62,8 @@ export function EditorFilters({ query, showing, embedded }: EditorFiltersProps):
breakdown,
pathsFilter,
querySource,
+ shouldShowSessionAnalysisWarning,
+ hasFormula,
} = useValues(insightVizDataLogic(insightProps))
const { isStepsFunnel } = useValues(funnelDataLogic(insightProps))
@@ -141,10 +143,10 @@ export function EditorFilters({ query, showing, embedded }: EditorFiltersProps):
label: isTrends ? TrendsSeriesLabel : undefined,
component: TrendsSeries,
},
- isTrends
+ isTrends && hasFormula
? {
key: 'formula',
- label: TrendsFormulaLabel,
+ label: 'Formula',
component: TrendsFormula,
}
: null,
@@ -281,12 +283,11 @@ export function EditorFilters({ query, showing, embedded }: EditorFiltersProps):
-
diff --git a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx
index ebae9f02b466f..6524b6d573e7b 100644
--- a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx
@@ -13,7 +13,7 @@ export interface LemonSkeletonProps {
}
export function LemonSkeleton({ className, repeat, active = true, fade = false }: LemonSkeletonProps): JSX.Element {
const content = (
-
+
),
}
}
+
+export function updatedAtColumn(): LemonTableColumn {
+ return {
+ title: 'Updated',
+ dataIndex: 'updated_at',
+ render: function RenderCreatedAt(updated_at) {
+ return updated_at ? (
+ > = Reac
href: typeof to === 'string' ? to : undefined,
})
- const docsPanelEnabled = useFeatureFlag('SIDE_PANEL_DOCS')
const is3000 = useFeatureFlag('POSTHOG_3000')
const { openDocsPage } = useActions(sidePanelDocsLogic)
@@ -99,7 +98,7 @@ export const Link: React.FC> = Reac
return
}
- if (typeof to === 'string' && is3000 && docsPanelEnabled && isPostHogComDomain(to)) {
+ if (typeof to === 'string' && is3000 && isPostHogComDomain(to)) {
event.preventDefault()
openDocsPage(to)
return
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index 3e53c125cfb19..55c5f5986f204 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -8,9 +8,11 @@
h5 {
margin: 0.25rem 0.5rem;
}
+
p:last-child {
margin-bottom: 0;
}
+
&[data-floating-placement^='top'] {
perspective-origin: bottom;
}
@@ -45,7 +47,9 @@
.Popover[data-placement^='bottom'] & {
transform-origin: top;
margin-top: 0.25rem;
+ transform: rotateX(-6deg);
}
+
.Popover[data-placement^='bottom'].Popover--with-arrow & {
margin-top: 0.5rem;
}
@@ -53,7 +57,9 @@
.Popover[data-placement^='top'] & {
transform-origin: bottom;
margin-bottom: 0.25rem;
+ transform: rotateX(6deg);
}
+
.Popover[data-placement^='top'].Popover--with-arrow & {
margin-bottom: 0.5rem;
}
@@ -61,7 +67,9 @@
.Popover[data-placement^='left'] & {
transform-origin: right;
margin-right: 0.25rem;
+ transform: rotateY(-6deg);
}
+
.Popover[data-placement^='left'].Popover--with-arrow & {
margin-right: 0.5rem;
}
@@ -69,27 +77,13 @@
.Popover[data-placement^='right'] & {
transform-origin: left;
margin-left: 0.25rem;
+ transform: rotateY(6deg);
}
+
.Popover[data-placement^='right'].Popover--with-arrow & {
margin-left: 0.5rem;
}
- .Popover[data-placement^='bottom'] & {
- transform: rotateX(-6deg);
- }
-
- .Popover[data-placement^='top'] & {
- transform: rotateX(6deg);
- }
-
- .Popover[data-placement^='left'] & {
- transform: rotateY(-6deg);
- }
-
- .Popover[data-placement^='right'] & {
- transform: rotateY(6deg);
- }
-
.Popover.Popover--enter-active &,
.Popover.Popover--enter-done & {
opacity: 1;
@@ -101,9 +95,10 @@
}
.posthog-3000 & {
- background: var(--bg-3000);
+ background: var(--bg-light);
padding: 0.25rem;
}
+
.posthog-3000 .Popover--actionable & {
border-color: var(--border);
}
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
index 9185ae635f9a8..9e5a327867146 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
@@ -1,6 +1,7 @@
.profile-package {
display: inline-flex;
align-items: center;
+
&:not(:first-child) {
margin-left: 0.375rem;
}
@@ -75,9 +76,11 @@
.ProfileBubbles {
display: flex;
align-items: center;
+
> * {
outline: 0.125rem solid var(--bg-light);
}
+
> :not(:first-child) {
margin-left: -0.125rem;
}
diff --git a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
index 2e817a93317e0..9504dd20eb1c4 100644
--- a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
+++ b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
@@ -4,7 +4,9 @@
width: 1em;
height: 1em;
flex-shrink: 0;
+
--spinner-color: var(--brand-blue);
+
&.Spinner--textColored {
--spinner-color: currentColor;
}
@@ -12,6 +14,7 @@
.Spinner__layer {
transform-origin: center;
+
> circle {
display: block;
fill: transparent;
@@ -20,23 +23,27 @@
stroke: var(--spinner-color);
stroke-linecap: round;
}
+
&:nth-child(1) {
opacity: 0.333;
}
+
&:nth-child(2) {
animation: spin 1s infinite linear;
+
> circle {
- animation: writhe 1.5s infinite ease both;
+ animation: Spinner__writhe 1.5s infinite ease both;
}
}
}
-@keyframes writhe {
+@keyframes Spinner__writhe {
0%,
100% {
stroke-dashoffset: -60;
stroke-dasharray: 70;
}
+
50% {
stroke-dashoffset: -30;
stroke-dasharray: 70;
@@ -46,33 +53,31 @@
.SpinnerOverlay {
transition: opacity 0.2s ease;
position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
+ inset: 0;
text-align: center;
min-height: 6rem;
z-index: var(--z-content-overlay);
display: flex;
align-items: center;
justify-content: center;
+
&[aria-hidden='true'] {
opacity: 0;
pointer-events: none;
}
+
&::before {
content: '';
position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
+ inset: 0;
background: var(--bg-light);
opacity: 0.5;
}
+
.Spinner {
position: relative;
}
+
.posthog-3000 &.SpinnerOverlay--scene-level::before {
background: var(--bg-3000);
}
diff --git a/frontend/src/lib/lemon-ui/Splotch/Splotch.scss b/frontend/src/lib/lemon-ui/Splotch/Splotch.scss
index 5f1a03bd642e2..f183e17b5a6d8 100644
--- a/frontend/src/lib/lemon-ui/Splotch/Splotch.scss
+++ b/frontend/src/lib/lemon-ui/Splotch/Splotch.scss
@@ -8,18 +8,23 @@
width: 1rem;
height: 1rem;
border-radius: var(--radius);
+
.Splotch--blue & {
background: var(--blue);
}
+
.Splotch--purple & {
background: var(--purple);
}
+
.Splotch--green & {
background: var(--green);
}
+
.Splotch--black & {
background: var(--black);
}
+
.Splotch--white & {
background: #fff;
border: 1px solid var(--border);
diff --git a/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx b/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
index 0232b319bf732..04ebbd7e00412 100644
--- a/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
+++ b/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react'
+// eslint-disable-next-line no-restricted-imports
import { Tooltip as AntdTooltip } from 'antd'
import { TooltipProps as AntdTooltipProps } from 'antd/lib/tooltip'
import { useDebounce } from 'use-debounce'
diff --git a/frontend/src/lib/lemon-ui/hooks.ts b/frontend/src/lib/lemon-ui/hooks.ts
index 00a54ef235dc2..da53cbe7538eb 100644
--- a/frontend/src/lib/lemon-ui/hooks.ts
+++ b/frontend/src/lib/lemon-ui/hooks.ts
@@ -20,13 +20,11 @@ export function useSliderPositioning(null)
const [[selectionWidth, selectionOffset], setSelectionWidthAndOffset] = useState<[number, number]>([0, 0])
const [transitioning, setTransitioning] = useState(false)
- const { width: containerWidth } = useResizeObserver({ ref: containerRef })
+ const { width: containerWidth = 0 } = useResizeObserver({ ref: containerRef })
useLayoutEffect(() => {
- if (containerRef.current && selectionRef.current) {
- const { left: containerLeft } = containerRef.current.getBoundingClientRect()
- const { width, left: selectedOptionleft } = selectionRef.current.getBoundingClientRect()
- setSelectionWidthAndOffset([width, selectedOptionleft - containerLeft])
+ if (selectionRef.current) {
+ setSelectionWidthAndOffset([selectionRef.current.offsetWidth, selectionRef.current.offsetLeft])
if (hasRenderedInitiallyRef.current) {
setTransitioning(true)
const transitioningTimeout = setTimeout(() => setTransitioning(false), transitionMs)
@@ -35,7 +33,7 @@ export function useSliderPositioning([
}
if (props.cachedResults && !refresh) {
- return props.cachedResults
+ if (
+ props.cachedResults['result'] ||
+ props.cachedResults['results'] ||
+ !isInsightQueryNode(props.query)
+ ) {
+ return props.cachedResults
+ }
}
if (!values.currentTeamId) {
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
index 89ce0aff2b6ed..bc1db304a1058 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -3,6 +3,7 @@
width: 700px;
display: flex;
column-gap: 1rem;
+
@media (max-width: 960px) {
display: block;
width: auto;
@@ -15,6 +16,7 @@
.HalfColumn {
width: 50%;
+
@media (max-width: 960px) {
width: 100%;
}
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.scss b/frontend/src/queries/nodes/DataTable/DataTable.scss
index 60f05bbd38eda..ea5d0bf3de23e 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.scss
+++ b/frontend/src/queries/nodes/DataTable/DataTable.scss
@@ -3,17 +3,18 @@
max-width: 20rem;
}
- @keyframes DataTable--highlight {
+ @keyframes DataTable__highlight {
0% {
background-color: var(--mark);
}
+
100% {
background-color: initial;
}
}
.DataTable__row--highlight_once {
- animation: DataTable--highlight 2000ms ease-out;
+ animation: DataTable__highlight 2000ms ease-out;
}
.DataTable__row--category_row {
diff --git a/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts b/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts
index 53432d3c1009f..03d904476be9a 100644
--- a/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts
+++ b/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts
@@ -86,7 +86,6 @@ export const queryNodeToFilter = (query: InsightQueryNode): Partial
date_from: query.dateRange?.date_from,
entity_type: 'events',
sampling_factor: query.samplingFactor,
- aggregation_group_type_index: query.aggregation_group_type_index,
})
if (!isRetentionQuery(query) && !isPathsQuery(query)) {
@@ -107,6 +106,15 @@ export const queryNodeToFilter = (query: InsightQueryNode): Partial
Object.assign(filters, objectClean>>(query.breakdown))
}
+ if (!isLifecycleQuery(query) && !isStickinessQuery(query)) {
+ Object.assign(
+ filters,
+ objectClean({
+ aggregation_group_type_index: query.aggregation_group_type_index,
+ })
+ )
+ }
+
if (isTrendsQuery(query) || isStickinessQuery(query) || isLifecycleQuery(query) || isFunnelsQuery(query)) {
filters.interval = query.interval
}
diff --git a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx
index 3aa74ab817f71..9366b7b2ff2a6 100644
--- a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx
+++ b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx
@@ -9,6 +9,7 @@ export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element {
return (
+
+
)
})}
{/* The span is for accessibility, but also because @storybook/test-runner smoke tests require content */}
Loading…
diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
index e3bc0a676f39e..6ce695c71a252 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -74,6 +74,7 @@
border-radius: 0.625rem;
background-color: var(--border);
transition: background-color 100ms ease;
+
.LemonSwitch--checked & {
background-color: var(--primary-highlight);
}
@@ -99,9 +100,11 @@
background-color: var(--primary);
border-color: var(--primary);
}
+
.LemonSwitch--active & {
transform: scale(1.1);
}
+
.LemonSwitch--active.LemonSwitch--checked & {
transform: translateX(1rem) scale(1.1);
}
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
index fe0a5e5cda011..2a911f8ef6bb0 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -6,12 +6,16 @@
border: 1px solid var(--border);
overflow: hidden;
flex: 1;
+
--row-base-height: 3rem;
--row-horizontal-padding: 1rem;
+
&.LemonTable--with-ribbon {
--row-ribbon-width: 0.25rem;
+
.LemonTable__content > table > tbody > tr > :first-child {
position: relative;
+
&::after {
content: '';
position: absolute;
@@ -23,52 +27,64 @@
}
}
}
+
&--xs {
--row-base-height: 2rem;
+
.LemonTable__content > table > tbody > tr > td {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
}
+
&--small {
--row-base-height: 2.5rem;
}
+
&--embedded {
border: none;
border-radius: 0;
background: none;
}
+
&--borderless-rows {
tr {
border: none !important;
}
}
+
&--stealth {
border: none;
border-radius: 0;
background: none;
+
.LemonTable__content > table > thead {
background: none;
border: none;
}
}
+
&.LemonTable--inset {
--row-horizontal-padding: 0.5rem;
}
+
.PaginationControl {
height: var(--row-base-height);
padding: 0.5rem;
border-top: 1px solid var(--border);
}
+
.row-name {
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
+
&:not(:last-child) {
margin-bottom: 0.125rem;
}
}
+
.row-description {
display: inline-block;
max-width: 30rem;
@@ -80,6 +96,7 @@
width: 100%;
border-collapse: collapse;
border-spacing: 0;
+
> thead {
position: relative;
border-bottom: 1px solid var(--border);
@@ -87,64 +104,79 @@
font-size: 0.75rem;
letter-spacing: 0.03125rem;
text-transform: uppercase;
+
> tr {
> th {
font-weight: 700;
text-align: left;
}
+
&.LemonTable__row--grouping {
--row-base-height: 2.5rem; // Make group headers smaller for better hierarchy
}
}
}
+
> tbody {
> tr {
&.LemonTable__expansion {
position: relative;
background: var(--side);
+
> td {
// Disable padding inside the expansion for better tailored placement of contents
padding: 0 !important;
}
}
+
&.LemonTable__row--status-highlighted {
background: var(--primary-bg-hover);
color: var(--default);
font-weight: 600;
}
+
> td {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
}
+
> thead,
> tbody {
> tr {
height: var(--row-base-height);
+
&:not(:first-child) {
border-top: 1px solid var(--border);
}
+
> th,
> td {
padding-right: var(--row-horizontal-padding);
overflow: hidden;
text-overflow: ellipsis;
+
&:first-child {
padding-left: calc(var(--row-horizontal-padding) + var(--row-ribbon-width, 0px));
}
+
&.LemonTable__boundary:not(:first-child) {
padding-left: var(--row-horizontal-padding);
}
+
&.LemonTable__boundary:not(:first-of-type) {
border-left: 1px solid var(--border);
}
+
&.LemonTable__toggle {
padding-right: 0;
}
+
&.LemonTable__toggle + * {
border-left: none !important;
}
+
&[colspan='0'] {
// Hidden cells should not affect the width of the table
padding-left: 0 !important;
@@ -170,6 +202,7 @@
opacity: 0;
pointer-events: none;
z-index: 2;
+
.LemonTable--loading & {
opacity: 0.5;
pointer-events: auto;
@@ -178,6 +211,7 @@
.LemonTable__header {
cursor: default;
+
&.LemonTable__header--actionable {
cursor: pointer;
}
@@ -203,6 +237,7 @@ body:not(.storybook-test-runner) {
left: 0;
z-index: 1;
overflow: visible !important;
+
// Replicate .scrollable style for sticky cells
&::before {
transition: box-shadow 200ms ease;
@@ -217,19 +252,23 @@ body:not(.storybook-test-runner) {
box-shadow: -16px 0 16px 16px transparent;
}
}
+
.LemonTable__cell--sticky::before {
background: var(--bg-light);
}
+
tr.LemonTable__row--status-highlighted .LemonTable__cell--sticky::before {
background: #e8ecff; // TRICKY: This is a one-off opaque form of --primary-bg-hover, keep in sync with source
}
+
.LemonTable__header--sticky::before {
background: var(--mid);
}
+
.scrollable--left {
.LemonTable__cell--sticky::before,
.LemonTable__header--sticky::before {
- box-shadow: -16px 0 16px 16px rgba(0, 0, 0, 0.25);
+ box-shadow: -16px 0 16px 16px rgb(0 0 0 / 25%);
}
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
index 30844284a9cd8..314f0e2806528 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
@@ -10,6 +10,7 @@
background: var(--primary-bg-active);
border: none !important;
overflow: hidden;
+
&::after {
content: '';
position: absolute;
@@ -17,24 +18,27 @@
top: 0;
width: 50%;
height: 100%;
- animation: loading-bar 1.5s linear infinite;
+ animation: LemonTableLoader__swooping 1.5s linear infinite;
background: var(--primary);
}
+
&.LemonTableLoader--enter-active,
&.LemonTableLoader--enter-done {
height: 0.25rem;
}
}
-@keyframes loading-bar {
+@keyframes LemonTableLoader__swooping {
0% {
left: 0;
width: 33.333%;
transform: translateX(-100%);
}
+
50% {
width: 50%;
}
+
100% {
left: 100%;
width: 33.333%;
diff --git a/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx b/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
index 8b42779cba175..608c0b0b70657 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
@@ -42,3 +42,21 @@ export function createdByColumn
+
+ ) : (
+ —
+ )
+ },
+ align: 'right',
+ sorter: (a, b) => dayjs(a.updated_at || 0).diff(b.updated_at || 0),
+ }
+}
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
index 1f224b3e30eb6..4ff742148785c 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
@@ -3,6 +3,11 @@
display: flex;
flex-direction: column;
align-self: stretch;
+
+ .Navigation3000__scene > &:first-child,
+ .Navigation3000__scene > :first-child > &:first-child {
+ margin-top: -0.75rem;
+ }
}
.LemonTabs__bar {
@@ -14,6 +19,7 @@
flex-direction: row;
align-items: stretch;
overflow-x: auto;
+
&::before {
// The bottom border
content: '';
@@ -24,6 +30,7 @@
width: 100%;
background: var(--border);
}
+
&::after {
// The active tab slider
content: '';
@@ -34,6 +41,7 @@
width: var(--lemon-tabs-slider-width);
transform: translateX(var(--lemon-tabs-slider-offset));
background: var(--link);
+
.LemonTabs--transitioning & {
transition: width 200ms ease, transform 200ms ease;
}
@@ -44,19 +52,24 @@
.LemonTabs--transitioning & {
transition: color 200ms ease;
}
+
&:not(:last-child) {
margin-right: 2rem;
}
+
&:hover {
color: var(--link);
}
+
&:active {
color: var(--primary-dark);
}
+
&.LemonTabs__tab--active {
color: var(--link);
text-shadow: 0 0 0.25px currentColor; // Simulate increased weight without affecting width
}
+
a {
// Make tab labels that are links the same colors as regular tab labels
text-decoration: none;
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
index 055db35a70146..2e664294f0b4b 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
@@ -62,7 +62,7 @@
.LemonTag__right-button {
margin-left: 0.25rem;
- min-height: 1.5rem;
- padding: 0.125rem 0.125rem !important;
+ min-height: 1.5rem !important;
+ padding: 0.125rem !important;
}
}
diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss
index a07b371b26d90..7b4702499c601 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.scss
+++ b/frontend/src/lib/lemon-ui/Link/Link.scss
@@ -12,10 +12,12 @@
&:hover {
color: var(--primary-light);
}
+
&:active {
color: var(--primary-dark);
}
}
+
&:disabled {
opacity: var(--opacity-disabled);
cursor: not-allowed;
diff --git a/frontend/src/lib/lemon-ui/Link/Link.tsx b/frontend/src/lib/lemon-ui/Link/Link.tsx
index 12c1c9e966a47..5365eb5213073 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.tsx
+++ b/frontend/src/lib/lemon-ui/Link/Link.tsx
@@ -82,7 +82,6 @@ export const Link: React.FC
- {(isFunnels ? editorFilters : editorFilterGroups).map((editorFilterGroup) => (
+ {editorFilterGroups.map((editorFilterGroup) => (
+
+ {shouldShowSessionAnalysisWarning ? (
+
-
- {showDateRange && (
+
+
+ {!isRetention && (
-
)}
@@ -104,14 +122,14 @@ export function InsightDisplayConfig(): JSX.Element {
)}
- {showRetention && (
+ {!!isRetention && (
)}
- {showPaths && (
+ {!!isPaths && (
@@ -123,7 +141,7 @@ export function InsightDisplayConfig(): JSX.Element {
)}
-
+
{advancedOptions.length > 0 && (
@@ -133,17 +151,17 @@ export function InsightDisplayConfig(): JSX.Element {
)}
- {showChart && (
+ {supportsDisplay && (
)}
- {showFunnelDisplayLayout && (
+ {!!isStepsFunnel && (
)}
- {showFunnelBins && (
+ {!!isTimeToConvertFunnel && (
diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.scss b/frontend/src/queries/nodes/InsightViz/InsightViz.scss
new file mode 100644
index 0000000000000..a6197196fe264
--- /dev/null
+++ b/frontend/src/queries/nodes/InsightViz/InsightViz.scss
@@ -0,0 +1,151 @@
+.InsightViz {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ gap: 1rem;
+ container-type: inline-size;
+ flex: 1; // important for when rendered within a flex parent
+
+ &.InsightViz--horizontal {
+ flex-flow: row wrap;
+ align-items: start;
+
+ .EditorFiltersWrapper {
+ width: 100%;
+
+ @container (min-width: 768px) {
+ width: 30%;
+ min-width: 26rem;
+ max-width: 30rem;
+ }
+ }
+ }
+}
+
+.InsightVizDisplay {
+ --insight-viz-min-height: calc(80vh - 6rem);
+
+ display: flex;
+ flex-direction: column;
+
+ .NotebookNode & {
+ height: 100%;
+ flex: 1;
+ }
+
+ .InsightVizDisplay__content {
+ display: flex;
+ flex: 1;
+ position: relative;
+ flex-direction: column;
+
+ &--with-legend {
+ flex-direction: row;
+ }
+
+ .InsightVizDisplay__content__left {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ position: relative;
+ width: 100%;
+ }
+
+ .InsightVizDisplay__content__right {
+ flex-shrink: 1;
+ max-width: 45%;
+ max-height: var(--insight-viz-min-height);
+ width: fit-content;
+ margin: 1rem;
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .InsightDisplayConfig {
+ border-bottom-width: 1px;
+ padding: 0.5rem;
+ }
+}
+
+.RetentionContainer {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
+ .RetentionContainer__graph {
+ flex: 1;
+ margin: 0.5rem;
+ }
+
+ .RetentionContainer__table {
+ flex-shrink: 0;
+ }
+
+ .LineGraph {
+ position: relative;
+ width: 100%;
+ min-height: 30vh;
+ }
+
+ .NotebookNode & {
+ .LineGraph {
+ position: relative;
+ min-height: 100px;
+ }
+ }
+}
+
+.TrendsInsight {
+ position: relative;
+ flex: 1;
+ margin: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ min-height: var(--insight-viz-min-height);
+
+ .NotebookNode & {
+ min-height: auto;
+ }
+
+ &--ActionsTable,
+ &--WorldMap,
+ &--BoldNumber {
+ margin: 0;
+ min-height: auto;
+ }
+
+ &--BoldNumber {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+.FunnelInsight {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ width: 100%;
+
+ &--type-steps-vertical,
+ &--type-time_to_convert,
+ &--type-trends {
+ min-height: var(--insight-viz-min-height);
+
+ .NotebookNode & {
+ min-height: auto;
+ }
+ }
+}
+
+.funnel-significance-highlight {
+ display: inline-flex;
+ background: var(--primary);
+ color: var(--bg-light);
+
+ .LemonIcon {
+ color: var(--bg-light);
+ }
+}
diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx
index 80c3c66ca3ab6..067002682f68f 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx
@@ -9,15 +9,16 @@ import { dataNodeLogic, DataNodeLogicProps } from '../DataNode/dataNodeLogic'
import { InsightVizNode } from '~/queries/schema'
import { QueryContext } from '~/queries/types'
-import { InsightContainer } from './InsightContainer'
+import { InsightVizDisplay } from './InsightVizDisplay'
import { EditorFilters } from './EditorFilters'
import { InsightLogicProps, ItemMode } from '~/types'
import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
import { getCachedResults } from './utils'
import { useState } from 'react'
-import './Insight.scss'
+import './InsightViz.scss'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
/** The key for the dataNodeLogic mounted by an InsightViz for insight of insightProps */
export const insightVizDataNodeKey = (insightProps: InsightLogicProps): string => {
@@ -56,6 +57,7 @@ export function InsightViz({ uniqueKey, query, setQuery, context, readOnly }: In
const { insightMode } = useValues(insightSceneLogic)
const isFunnels = isFunnelsQuery(query.source)
+ const isHorizontalAlways = useFeatureFlag('INSIGHT_HORIZONTAL_CONTROLS')
const showIfFull = !!query.full
const disableHeader = !(query.showHeader ?? showIfFull)
@@ -72,16 +74,16 @@ export function InsightViz({ uniqueKey, query, setQuery, context, readOnly }: In
{!readOnly && (
-
+ {
if (insightDataLoading) {
return (
- <>
-
-
+
+
)
}
@@ -135,9 +130,14 @@ export function InsightContainer({
case InsightType.LIFECYCLE:
return
-
- When using sessions and session properties, events without session IDs will be excluded from the
- set of results.{' '}
- Learn more about sessions.
-
-
- ) : null}
{/* These are filters that are reused between insight features. They each have generic logic that updates the url */}
-
+ {disableHeader ? null :
- {isFunnels && (
-
- {/* negative margin-top so that the border is only visible when the rows wrap */}
- ([
- props({} as InsightLogicProps),
- key(keyForInsightLogicProps('new')),
- path((key) => ['queries', 'nodes', 'InsightViz', 'insightDisplayConfigLogic', key]),
-
- connect((props: InsightLogicProps) => ({
- values: [
- featureFlagLogic,
- ['featureFlags'],
- insightVizDataLogic(props),
- [
- 'isTrends',
- 'isFunnels',
- 'isRetention',
- 'isPaths',
- 'isStickiness',
- 'isLifecycle',
- 'supportsDisplay',
- 'supportsPercentStackView as showPercentStackView',
- 'display',
- 'compare',
- 'breakdown',
- 'trendsFilter',
- 'hasLegend',
- 'showLegend',
- ],
- funnelDataLogic(props),
- ['isEmptyFunnel', 'isStepsFunnel', 'isTimeToConvertFunnel', 'isTrendsFunnel'],
- ],
- })),
-
- selectors({
- showDateRange: [(s) => [s.isRetention], (isRetention) => !isRetention],
- disableDateRange: [
- (s) => [s.isFunnels, s.isEmptyFunnel],
- (isFunnels, isEmptyFunnel) => isFunnels && !!isEmptyFunnel,
- ],
- showCompare: [
- (s) => [s.isTrends, s.isStickiness, s.display],
- (isTrends, isStickiness, display) =>
- (isTrends && display !== ChartDisplayType.ActionsAreaGraph) || isStickiness,
- ],
- showValueOnSeries: [
- (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.display],
- (isTrends, isStickiness, isLifecycle, display) => {
- if (isTrends || isStickiness) {
- return !NON_VALUES_ON_SERIES_DISPLAY_TYPES.includes(display || ChartDisplayType.ActionsLineGraph)
- } else if (isLifecycle) {
- return true
- } else {
- return false
- }
- },
- ],
- showUnit: [(s) => [s.supportsDisplay, s.isTrends], (supportsDisplay, isTrends) => supportsDisplay && isTrends],
- showChart: [(s) => [s.supportsDisplay], (supportsDisplay) => supportsDisplay],
- showInterval: [
- (s) => [s.isTrends, s.isStickiness, s.isLifecycle, s.isTrendsFunnel, s.display],
- (isTrends, isStickiness, isLifecycle, isTrendsFunnel, display) =>
- isTrendsFunnel ||
- isLifecycle ||
- ((isTrends || isStickiness) && !(display && NON_TIME_SERIES_DISPLAY_TYPES.includes(display))),
- ],
- showSmoothing: [
- (s) => [s.isTrends, s.breakdown, s.display, s.trendsFilter, s.featureFlags],
- (isTrends, breakdown, display, trendsFilter, featureFlags) =>
- isTrends &&
- !breakdown?.breakdown_type &&
- !trendsFilter?.compare &&
- (!display || display === ChartDisplayType.ActionsLineGraph) &&
- featureFlags[FEATURE_FLAGS.SMOOTHING_INTERVAL],
- ],
- showRetention: [(s) => [s.isRetention], (isRetention) => !!isRetention],
- showPaths: [(s) => [s.isPaths], (isPaths) => !!isPaths],
- showFunnelDisplayLayout: [(s) => [s.isStepsFunnel], (isStepsFunnel) => !!isStepsFunnel],
- showFunnelBins: [(s) => [s.isTimeToConvertFunnel], (isTimeToConvertFunnel) => !!isTimeToConvertFunnel],
- }),
-])
diff --git a/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx b/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx
index 7b697ffd9d9fe..bcd5f3e4acc3d 100644
--- a/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx
+++ b/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from 'antd'
import clsx from 'clsx'
import { BindLogic, useValues } from 'kea'
import { getSeriesColor } from 'lib/colors'
@@ -10,6 +9,7 @@ import { RefCallback, useEffect, useState } from 'react'
import useResizeObserver from 'use-resize-observer'
import { isInteractionNode, isQueryNode, isSessionNode, TimeToSeeNode, TimeToSeeSessionNode } from '../types'
import { sessionNodeFacts, SpanData, traceLogic } from './traceLogic'
+import { Tooltip } from '@posthog/lemon-ui'
export interface TraceProps {
timeToSeeSession: TimeToSeeSessionNode
diff --git a/frontend/src/queries/nodes/WebOverview/WebOverview.tsx b/frontend/src/queries/nodes/WebOverview/WebOverview.tsx
index 41097779c7f3d..9de6ccdbac0b3 100644
--- a/frontend/src/queries/nodes/WebOverview/WebOverview.tsx
+++ b/frontend/src/queries/nodes/WebOverview/WebOverview.tsx
@@ -30,7 +30,7 @@ export function WebOverview(props: { query: WebOverviewQuery; cachedResults?: An
const results = (response as WebOverviewQueryResponse | undefined)?.results
return (
-
+
{results?.map((item) =>
)
diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json
index d1eed070437ff..019230809f749 100644
--- a/frontend/src/queries/schema.json
+++ b/frontend/src/queries/schema.json
@@ -1526,6 +1526,10 @@
"enum": ["leftjoin", "subquery"],
"type": "string"
},
+ "materializationMode": {
+ "enum": ["auto", "legacy_null_as_string", "legacy_null_as_null", "disabled"],
+ "type": "string"
+ },
"personsArgMaxVersion": {
"enum": ["auto", "v1", "v2"],
"type": "string"
@@ -1732,6 +1736,9 @@
},
"suppressSessionAnalysisWarning": {
"type": "boolean"
+ },
+ "vizSpecificOptions": {
+ "$ref": "#/definitions/VizSpecificOptions"
}
},
"required": ["kind", "source"],
@@ -1801,10 +1808,6 @@
"LifecycleQuery": {
"additionalProperties": false,
"properties": {
- "aggregation_group_type_index": {
- "description": "Groups aggregation",
- "type": "number"
- },
"dateRange": {
"$ref": "#/definitions/DateRange",
"description": "Date range for the query"
@@ -2644,6 +2647,9 @@
},
"suppressSessionAnalysisWarning": {
"type": "boolean"
+ },
+ "vizSpecificOptions": {
+ "$ref": "#/definitions/VizSpecificOptions"
}
},
"required": ["kind", "shortId"],
@@ -2757,10 +2763,6 @@
"StickinessQuery": {
"additionalProperties": false,
"properties": {
- "aggregation_group_type_index": {
- "description": "Groups aggregation",
- "type": "number"
- },
"dateRange": {
"$ref": "#/definitions/DateRange",
"description": "Date range for the query"
@@ -3089,6 +3091,28 @@
"required": ["results"],
"type": "object"
},
+ "VizSpecificOptions": {
+ "additionalProperties": false,
+ "description": "Chart specific rendering options. Use ChartRenderingMetadata for non-serializable values, e.g. onClick handlers",
+ "properties": {
+ "RETENTION": {
+ "additionalProperties": false,
+ "properties": {
+ "hideLineGraph": {
+ "type": "boolean"
+ },
+ "hideSizeColumn": {
+ "type": "boolean"
+ },
+ "useSmallLayout": {
+ "type": "boolean"
+ }
+ },
+ "type": "object"
+ }
+ },
+ "type": "object"
+ },
"WebAnalyticsPropertyFilter": {
"anyOf": [
{
diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts
index fdba8908a3a71..b0ad656cea099 100644
--- a/frontend/src/queries/schema.ts
+++ b/frontend/src/queries/schema.ts
@@ -12,6 +12,7 @@ import {
GroupMathType,
HogQLMathType,
InsightShortId,
+ InsightType,
IntervalType,
LifecycleFilterType,
LifecycleToggle,
@@ -136,6 +137,7 @@ export interface HogQLQueryModifiers {
personsOnEventsMode?: 'disabled' | 'v1_enabled' | 'v1_mixed' | 'v2_enabled'
personsArgMaxVersion?: 'auto' | 'v1' | 'v2'
inCohortVia?: 'leftjoin' | 'subquery'
+ materializationMode?: 'auto' | 'legacy_null_as_string' | 'legacy_null_as_null' | 'disabled'
}
export interface HogQLQueryResponse {
@@ -391,6 +393,18 @@ export interface SavedInsightNode extends Node, InsightVizNodeViewProps, DataTab
// Insight viz node
+/** Chart specific rendering options.
+ * Use ChartRenderingMetadata for non-serializable values, e.g. onClick handlers
+ * @see ChartRenderingMetadata
+ * **/
+export interface VizSpecificOptions {
+ [InsightType.RETENTION]?: {
+ hideLineGraph?: boolean
+ hideSizeColumn?: boolean
+ useSmallLayout?: boolean
+ }
+}
+
export interface InsightVizNode extends Node, InsightVizNodeViewProps {
kind: NodeKind.InsightVizNode
source: InsightQueryNode
@@ -410,6 +424,8 @@ interface InsightVizNodeViewProps {
embedded?: boolean
suppressSessionAnalysisWarning?: boolean
hidePersonsModal?: boolean
+
+ vizSpecificOptions?: VizSpecificOptions
}
/** Base class for insight query nodes. Should not be used directly. */
@@ -501,7 +517,7 @@ export type StickinessFilter = Omit<
StickinessFilterType & { hidden_legend_indexes?: number[] },
keyof FilterType | 'hidden_legend_keys' | 'stickiness_days' | 'shown_as'
>
-export interface StickinessQuery extends InsightsQueryBase {
+export interface StickinessQuery extends Omit {
kind: NodeKind.StickinessQuery
/** Granularity of the response. Can be one of `hour`, `day`, `week` or `month` */
interval?: IntervalType
@@ -530,7 +546,7 @@ export interface LifecycleQueryResponse extends QueryResponse {
results: Record[]
}
-export interface LifecycleQuery extends InsightsQueryBase {
+export interface LifecycleQuery extends Omit {
kind: NodeKind.LifecycleQuery
/** Granularity of the response. Can be one of `hour`, `day`, `week` or `month` */
interval?: IntervalType
diff --git a/frontend/src/scenes/PreflightCheck/PreflightCheck.scss b/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
index 21859e46108bb..2b83263873c2e 100644
--- a/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
+++ b/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
@@ -1,6 +1,7 @@
.Preflight {
max-width: 400px;
padding: 1rem;
+
.Preflight__header {
p {
margin-bottom: 0.5rem;
diff --git a/frontend/src/scenes/apps/ErrorDetailsModal.tsx b/frontend/src/scenes/apps/ErrorDetailsModal.tsx
index f5cafdedde71d..926177cd552fb 100644
--- a/frontend/src/scenes/apps/ErrorDetailsModal.tsx
+++ b/frontend/src/scenes/apps/ErrorDetailsModal.tsx
@@ -26,7 +26,7 @@ export function ErrorDetailsModal(): JSX.Element {
footer={
diff --git a/frontend/src/scenes/batch_exports/BatchExports.scss b/frontend/src/scenes/batch_exports/BatchExports.scss
index da0646417ab23..835ed19de7ec9 100644
--- a/frontend/src/scenes/batch_exports/BatchExports.scss
+++ b/frontend/src/scenes/batch_exports/BatchExports.scss
@@ -1,18 +1,20 @@
.BatchExportRunIcon--pulse {
outline: 2px solid transparent;
outline-offset: 0;
- animation: pulse 2s infinite ease-out;
+ animation: BatchExportRunIcon__pulse 2s infinite ease-out;
}
-@keyframes pulse {
+@keyframes BatchExportRunIcon__pulse {
0% {
outline-offset: 0;
outline-color: var(--primary-light);
}
+
80% {
outline-offset: 20px;
outline-color: transparent;
}
+
100% {
outline-offset: 20px;
outline-color: transparent;
diff --git a/frontend/src/scenes/billing/Billing.scss b/frontend/src/scenes/billing/Billing.scss
index 6960ebc6e4a07..8088a048cf769 100644
--- a/frontend/src/scenes/billing/Billing.scss
+++ b/frontend/src/scenes/billing/Billing.scss
@@ -1,6 +1,7 @@
.BillingPlan {
max-width: 500px;
flex-grow: 1;
+
.BillingPlan__description {
ol,
ul {
@@ -8,10 +9,12 @@
padding-left: 0;
list-style: none;
text-align: center;
+
li {
line-height: 1.2rem;
margin-bottom: 1rem;
}
+
.disclaimer {
font-size: 10px;
font-weight: bold;
diff --git a/frontend/src/scenes/billing/BillingGauge.scss b/frontend/src/scenes/billing/BillingGauge.scss
index 37ebdc11bbd20..b9c73a13291f6 100644
--- a/frontend/src/scenes/billing/BillingGauge.scss
+++ b/frontend/src/scenes/billing/BillingGauge.scss
@@ -1,5 +1,5 @@
.BillingGaugeItem {
- animation: billing-gauge-item-expand 800ms cubic-bezier(0.15, 0.15, 0.2, 1) forwards;
+ animation: BillingGaugeItem__expand 800ms cubic-bezier(0.15, 0.15, 0.2, 1) forwards;
.BillingGaugeItem__info {
position: absolute;
@@ -9,15 +9,14 @@
margin-left: -1px;
font-size: 0.8rem;
background: var(--bg-light);
-
bottom: 100%;
- padding: 0 0.25rem 0.5rem 0.25rem;
+ padding: 0 0.25rem 0.5rem;
line-height: 1rem;
&--bottom {
top: 100%;
bottom: auto;
- padding: 0.5rem 0.25rem 0 0.25rem;
+ padding: 0.5rem 0.25rem 0;
}
&:hover {
@@ -26,10 +25,11 @@
}
}
-@keyframes billing-gauge-item-expand {
+@keyframes BillingGaugeItem__expand {
0% {
width: 0%;
}
+
100% {
width: var(--billing-gauge-item-width);
}
diff --git a/frontend/src/scenes/billing/BillingHero.scss b/frontend/src/scenes/billing/BillingHero.scss
index 0928d8d935c0c..3c30a1ff02d79 100644
--- a/frontend/src/scenes/billing/BillingHero.scss
+++ b/frontend/src/scenes/billing/BillingHero.scss
@@ -18,5 +18,5 @@
.BillingHero__hog__img {
height: 200px;
width: 200px;
- margin: -20px -30px;
+ margin: -20px 0;
}
diff --git a/frontend/src/scenes/billing/BillingHero.tsx b/frontend/src/scenes/billing/BillingHero.tsx
index 0f74dc168071a..3dbe62ca6dc62 100644
--- a/frontend/src/scenes/billing/BillingHero.tsx
+++ b/frontend/src/scenes/billing/BillingHero.tsx
@@ -1,9 +1,12 @@
import { BlushingHog } from 'lib/components/hedgehogs'
import './BillingHero.scss'
+import useResizeObserver from 'use-resize-observer'
export const BillingHero = (): JSX.Element => {
+ const { width, ref: billingHeroRef } = useResizeObserver()
+
return (
-
- {(!disableLastComputation || !!samplingFactor) && (
-
{renderTable()}
{!disableCorrelationTable && activeView === InsightType.FUNNELS &&
-
+ <>
+ {(isFunnels || isPaths || showComputationMetadata) && (
+
+
- )}
- {!isFunnels && (!disableLastComputation || !!samplingFactor) && (
-
+ {showComputationMetadata && (
+
-
-
-
+
-
)}
- {BlockingEmptyState ? (
- BlockingEmptyState
- ) : supportsDisplay && showLegend ? (
-
+ {isPaths &&
-
- {isPaths ?
-
- ) : (
- renderActiveView()
- )}
- {renderActiveView()}
-
-
-
+ {BlockingEmptyState ? (
+ BlockingEmptyState
+ ) : supportsDisplay && showLegend ? (
+ <>
+
+
)}
-
+ {renderActiveView()}
+
+
+
+ ) : (
+ renderActiveView()
+ )}
+
{errorDetailsLoading ? (
- (null)
const isPasswordHidden = precheckResponse.status === 'pending' || precheckResponse.sso_enforcement
useEffect(() => {
- try {
- // Turn on E2E test when this flag is removed
- if (featureFlags[FEATURE_FLAGS.AUTO_REDIRECT]) {
+ if (preflight?.cloud) {
+ try {
redirectIfLoggedInOtherInstance()
+ } catch (e) {
+ captureException(e)
}
- } catch (e) {
- captureException(e)
}
}, [])
diff --git a/frontend/src/scenes/batch_exports/BatchExportScene.tsx b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
index 148297c77d355..f8f1b778ee6bf 100644
--- a/frontend/src/scenes/batch_exports/BatchExportScene.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
@@ -518,7 +518,7 @@ export function BatchExportScene(): JSX.Element {
) : (
-
+
-
)
}
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index 5e7dbb1efcf0c..4f041630529c8 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -24,6 +24,7 @@ import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { ProductPricingModal } from './ProductPricingModal'
import { PlanComparisonModal } from './PlanComparison'
+import { getProductIcon } from 'scenes/products/Products'
import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'
const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462'
@@ -60,9 +61,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
How pricing works
Get the whole hog.
@@ -13,9 +16,11 @@ export const BillingHero = (): JSX.Element => { limits as low as $0 to control spend.
-
+ {width && width > 500 && (
+
+
+ )}
- {addon.image_url ? (
- 
- ) : null}
+
{getProductIcon(addon.icon_key, 'text-2xl')}
{addon.name}
@@ -294,13 +293,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
- {product.image_url ? (
- 
- ) : null}
+ {getProductIcon(product.icon_key, 'text-2xl')}
{product.name}
{product.description}
diff --git a/frontend/src/scenes/billing/PlanComparison.scss b/frontend/src/scenes/billing/PlanComparison.scss
index fbda341b032a6..98d091b0b80d7 100644
--- a/frontend/src/scenes/billing/PlanComparison.scss
+++ b/frontend/src/scenes/billing/PlanComparison.scss
@@ -1,8 +1,10 @@
.PlanComparisonModal {
max-width: 900px;
}
+
table.PlanComparison {
table-layout: fixed;
+
td {
vertical-align: top;
padding: 0.75rem 1.25rem;
@@ -12,20 +14,25 @@ table.PlanComparison {
padding-bottom: 1rem;
}
}
+
th {
vertical-align: top;
- padding: 0.75rem 1.25rem 0.75rem;
+ padding: 0.75rem 1.25rem;
font-weight: 600;
text-align: left;
&.PlanTable__th__section {
- padding: 0.25rem 1.25rem 0.25rem;
+ padding: 0.25rem 1.25rem;
font-weight: 500;
}
&.PlanTable__th__feature {
padding: 0.75rem 1.25rem 0.75rem 3.25rem;
font-weight: 600;
+
+ &.PlanTable__th__feature--reduced_padding {
+ padding: 0.75rem 1.25rem;
+ }
}
&.PlanTable__th__last-feature {
@@ -37,6 +44,7 @@ table.PlanComparison {
}
}
}
+
.PlanTable__tr__border {
- border-bottom: 3px rgba(0, 0, 0, 0.07) dotted;
+ border-bottom: 3px rgb(0 0 0 / 7%) dotted;
}
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
index 646c553ce8dc8..a2e75da9e5115 100644
--- a/frontend/src/scenes/billing/PlanComparison.tsx
+++ b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -8,6 +8,8 @@ import { useActions, useValues } from 'kea'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
import { billingLogic } from './billingLogic'
+import { getProductIcon } from 'scenes/products/Products'
+import useResizeObserver from 'use-resize-observer'
export function PlanIcon({
feature,
@@ -26,7 +28,7 @@ export function PlanIcon({
) : feature.limit ? (
<>
-
{convertLargeNumberToWords(tier.up_to, tiers[i - 1]?.up_to, true, product.unit)}
@@ -71,7 +75,11 @@ const getProductTiers = (
))
) : product?.free_allocation ? (
-
+
Up to {convertLargeNumberToWords(product?.free_allocation, null)} {product?.unit}s/mo
@@ -96,6 +104,7 @@ export const PlanComparison = ({
const fullyFeaturedPlan = plans[plans.length - 1]
const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
const { redirectPath, billing } = useValues(billingLogic)
+ const { width, ref: planComparisonRef } = useResizeObserver()
const upgradeButtons = plans?.map((plan) => {
return (
@@ -131,7 +140,7 @@ export const PlanComparison = ({
})
return (
-
+
| @@ -211,13 +220,7 @@ export const PlanComparison = ({ | ||
|
- {product.image_url && (
-
|
@@ -275,13 +278,7 @@ export const PlanComparison = ({
className="PlanTable__th__section bg-side justify-left rounded text-left mb-2"
>
- {includedProduct.image_url && (
- 0
+ const textAreaNotEmpty = surveyResponse['$survey_response']?.length > 0
return (
|
-
{dataLoading ? (
<>
diff --git a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
index fe8815c04dfc2..959d57825aae5 100644
--- a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
+++ b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
@@ -64,7 +64,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
}
return (
- |
|---|