@@ -65,14 +86,43 @@ export function Breadcrumbs(): JSX.Element | null {
}
interface BreadcrumbProps {
- breadcrumb: IBreadcrumb
+ breadcrumb: FinalizedBreadcrumb
index: number
here?: boolean
}
function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
+ const { renameState } = useValues(breadcrumbsLogic)
+ const { tentativelyRename, finishRenaming } = useActions(breadcrumbsLogic)
const [popoverShown, setPopoverShown] = useState(false)
+ let nameElement: JSX.Element
+ if (breadcrumb.name != null && breadcrumb.onRename) {
+ nameElement = (
+ tentativelyRename(breadcrumb.globalKey, newName)}
+ onSave={(newName) => {
+ void breadcrumb.onRename?.(newName)
+ }}
+ mode={renameState && renameState[0] === breadcrumb.globalKey ? 'edit' : 'view'}
+ onModeToggle={(newMode) => {
+ if (newMode === 'edit') {
+ tentativelyRename(breadcrumb.globalKey, breadcrumb.name as string)
+ } else {
+ finishRenaming()
+ }
+ setPopoverShown(false)
+ }}
+ compactButtons="xsmall"
+ editingIndication="underlined"
+ />
+ )
+ } else {
+ nameElement = {breadcrumb.name}
+ }
+
const Component = breadcrumb.path ? Link : 'div'
const breadcrumbContent = (
- {breadcrumb.name}
+ {nameElement}
{breadcrumb.popover &&
)
@@ -118,13 +168,39 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
}
interface HereProps {
- breadcrumb: IBreadcrumb
+ breadcrumb: FinalizedBreadcrumb
}
function Here({ breadcrumb }: HereProps): JSX.Element {
+ const { renameState } = useValues(breadcrumbsLogic)
+ const { tentativelyRename, finishRenaming } = useActions(breadcrumbsLogic)
+
return (
- {breadcrumb.name ||
)
}
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index 72e07508a9ebf..77d8ad33317b6 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -45,7 +45,7 @@ export const NavbarButton: FunctionComponent = 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/components/Sidebar.tsx b/frontend/src/layout/navigation-3000/components/Sidebar.tsx
index e2b0ef1adbc7f..e48b2a8a45e08 100644
--- a/frontend/src/layout/navigation-3000/components/Sidebar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Sidebar.tsx
@@ -6,7 +6,7 @@ import React, { useRef, useState } from 'react'
import { navigation3000Logic } from '../navigationLogic'
import { KeyboardShortcut } from './KeyboardShortcut'
import { SidebarAccordion, pluralizeCategory } from './SidebarAccordion'
-import { SidebarCategory, SidebarLogic, SidebarNavbarItem } from '../types'
+import { SidebarLogic, SidebarNavbarItem } from '../types'
import { Spinner } from 'lib/lemon-ui/Spinner'
import { useDebouncedCallback } from 'use-debounce'
import { SidebarList } from './SidebarList'
@@ -177,7 +177,7 @@ function SidebarContent({
return contents.length !== 1 ? (
<>
- {(contents as SidebarCategory[]).map((accordion) => (
+ {contents.map((accordion) => (
([
items: [
{
label: 'Edit',
- to: urls.featureFlag(featureFlag.id as number),
+ to: urls.featureFlag(featureFlag.id),
onClick: () => {
featureFlagLogic({ id: featureFlag.id as number }).mount()
featureFlagLogic({
@@ -106,8 +106,8 @@ export const featureFlagsSidebarLogic = kea([
},
{
label: 'Copy flag key',
- onClick: async () => {
- await copyToClipboard(featureFlag.key, 'feature flag key')
+ onClick: () => {
+ void copyToClipboard(featureFlag.key, 'feature flag key')
},
},
{
@@ -128,7 +128,7 @@ export const featureFlagsSidebarLogic = kea([
{
label: 'Delete feature flag',
onClick: () => {
- deleteWithUndo({
+ void deleteWithUndo({
endpoint: `projects/${currentTeamId}/feature_flags`,
object: { name: featureFlag.key, id: featureFlag.id },
callback: actions.loadFeatureFlags,
diff --git a/frontend/src/layout/navigation-3000/sidebars/insights.ts b/frontend/src/layout/navigation-3000/sidebars/insights.ts
index d89d7e310a0a1..efc9766d0a7c6 100644
--- a/frontend/src/layout/navigation-3000/sidebars/insights.ts
+++ b/frontend/src/layout/navigation-3000/sidebars/insights.ts
@@ -86,7 +86,7 @@ export const insightsSidebarLogic = kea([
},
{
onClick: () => {
- deleteWithUndo({
+ void deleteWithUndo({
object: insight,
endpoint: `projects/${currentTeamId}/insights`,
callback: actions.loadInsights,
@@ -116,7 +116,7 @@ export const insightsSidebarLogic = kea([
for (let i = startIndex; i < startIndex + INSIGHTS_PER_PAGE; i++) {
cache.requestedInsights[i] = true
}
- await savedInsightsLogic.actions.setSavedInsightsFilters(
+ await savedInsightsLogic.asyncActions.setSavedInsightsFilters(
{ page: Math.floor(startIndex / INSIGHTS_PER_PAGE) + 1 },
true,
false
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/Breadcrumbs/Breadcrumbs.scss b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
index 625535c49575e..6141582fea852 100644
--- a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
+++ b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
@@ -22,7 +22,7 @@
&--actionable {
cursor: pointer;
- color: var(--primary);
+ color: var(--primary-3000);
}
}
diff --git a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.test.ts b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.test.ts
index dd49842bc5fa7..ce74771427690 100644
--- a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.test.ts
+++ b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.test.ts
@@ -25,8 +25,8 @@ describe('breadcrumbsLogic', () => {
// test with .delay because subscriptions happen async
router.actions.push(urls.savedInsights())
- await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Insights • PostHog' })
- expect(global.document.title).toEqual('Insights • PostHog')
+ await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Product analytics • PostHog' })
+ expect(global.document.title).toEqual('Product analytics • PostHog')
router.actions.push(urls.dashboards())
await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Dashboards • PostHog' })
diff --git a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
index 1d1739651cb09..d15aefbb51a12 100644
--- a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
+++ b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
@@ -1,4 +1,4 @@
-import { actions, connect, kea, path, props, reducers, selectors } from 'kea'
+import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
import { organizationLogic } from 'scenes/organizationLogic'
import { teamLogic } from 'scenes/teamLogic'
import './Breadcrumbs.scss'
@@ -11,7 +11,7 @@ import { Lettermark } from 'lib/lemon-ui/Lettermark'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
import { OrganizationSwitcherOverlay } from '~/layout/navigation/OrganizationSwitcher'
-import { Breadcrumb } from '~/types'
+import { Breadcrumb, FinalizedBreadcrumb } from '~/types'
import { subscriptions } from 'kea-subscriptions'
export const breadcrumbsLogic = kea([
@@ -37,6 +37,11 @@ export const breadcrumbsLogic = kea([
})),
actions({
setActionsContainer: (element: HTMLElement | null) => ({ element }),
+ tentativelyRename: (breadcrumbGlobalKey: string, tentativeName: string) => ({
+ breadcrumbGlobalKey,
+ tentativeName,
+ }),
+ finishRenaming: true,
}),
reducers({
actionsContainer: [
@@ -45,7 +50,17 @@ export const breadcrumbsLogic = kea([
setActionsContainer: (_, { element }) => element,
},
],
+ renameState: [
+ null as [breadcrumbGlobalKey: string, tentativeName: string] | null,
+ {
+ tentativelyRename: (_, { breadcrumbGlobalKey, tentativeName }) => [breadcrumbGlobalKey, tentativeName],
+ finishRenaming: () => null,
+ },
+ ],
}),
+ listeners(({ actions }) => ({
+ [sceneLogic.actionTypes.loadScene]: () => actions.finishRenaming(), // Cancel renaming on navigation away
+ })),
selectors(() => ({
sceneBreadcrumbs: [
(s) => [
@@ -94,6 +109,7 @@ export const breadcrumbsLogic = kea([
return breadcrumbs
}
breadcrumbs.push({
+ key: 'me',
name: user.first_name,
symbol: ([
return breadcrumbs
}
breadcrumbs.push({
+ key: 'instance',
name: stripHTTP(preflight.site_url),
symbol: ([
return breadcrumbs
}
breadcrumbs.push({
+ key: 'organization',
name: currentOrganization.name,
symbol: ([
return breadcrumbs
}
breadcrumbs.push({
+ key: 'project',
name: currentTeam.name,
popover: {
overlay: ([
],
breadcrumbs: [
(s) => [s.appBreadcrumbs, s.sceneBreadcrumbs],
- (appBreadcrumbs, sceneBreadcrumbs) => {
- return [...appBreadcrumbs, ...sceneBreadcrumbs]
+ (appBreadcrumbs, sceneBreadcrumbs): FinalizedBreadcrumb[] => {
+ const breadcrumbs = Array(appBreadcrumbs.length + sceneBreadcrumbs.length)
+ const globalPathSoFar: string[] = []
+ for (let i = 0; i < appBreadcrumbs.length; i++) {
+ globalPathSoFar.push(String(appBreadcrumbs[i].key))
+ breadcrumbs[i] = {
+ ...appBreadcrumbs[i],
+ globalKey: globalPathSoFar.join('.'),
+ }
+ }
+ for (let i = 0; i < sceneBreadcrumbs.length; i++) {
+ globalPathSoFar.push(String(sceneBreadcrumbs[i].key))
+ breadcrumbs[i + appBreadcrumbs.length] = {
+ ...sceneBreadcrumbs[i],
+ globalKey: globalPathSoFar.join('.'),
+ }
+ }
+ return breadcrumbs
},
],
firstBreadcrumb: [(s) => [s.breadcrumbs], (breadcrumbs) => breadcrumbs[0]],
diff --git a/frontend/src/layout/navigation/Navigation.tsx b/frontend/src/layout/navigation/Navigation.tsx
index 57b29956bdde1..18ff8d9fed01f 100644
--- a/frontend/src/layout/navigation/Navigation.tsx
+++ b/frontend/src/layout/navigation/Navigation.tsx
@@ -1,6 +1,6 @@
import clsx from 'clsx'
import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
-import { Scene, SceneConfig } from 'scenes/sceneTypes'
+import { SceneConfig } from 'scenes/sceneTypes'
import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs'
import { ProjectNotice } from './ProjectNotice'
import { SideBar } from './SideBar/SideBar'
@@ -9,16 +9,14 @@ import { ReactNode } from 'react'
export function Navigation({
children,
- scene,
sceneConfig,
}: {
children: ReactNode
- scene: Scene | null
sceneConfig: SceneConfig | null
}): JSX.Element {
return (
- {breadcrumb.name || tentativelyRename(breadcrumb.globalKey, newName)}
+ onSave={(newName) => {
+ void breadcrumb.onRename?.(newName)
+ }}
+ mode={renameState && renameState[0] === breadcrumb.globalKey ? 'edit' : 'view'}
+ onModeToggle={(newMode) => {
+ if (newMode === 'edit') {
+ tentativelyRename(breadcrumb.globalKey, breadcrumb.name as string)
+ } else {
+ finishRenaming()
+ }
+ }}
+ compactButtons="xsmall"
+ editingIndication="underlined"
+ />
+ ) : (
+ {breadcrumb.name}
+ )}
)
}
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index 72e07508a9ebf..77d8ad33317b6 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -45,7 +45,7 @@ export const NavbarButton: FunctionComponent
- {scene !== Scene.Ingestion &&
{
- updateCurrentTeam(altTeamForIngestion?.id, urls.ingestion())
+ updateCurrentTeam(altTeamForIngestion?.id, urls.products())
}}
data-attr="demo-project-alt-team-ingestion_link"
>
- ingestion wizard
+ onboarding wizard
{' '}
to get started with your own data.
@@ -60,8 +61,11 @@ export function ProjectNotice(): JSX.Element | null {
message: (
<>
This project has no events yet. Go to the{' '}
-
- ingestion wizard
+
+ onboarding wizard
{' '}
or grab your project API key/HTML snippet from{' '}
@@ -71,7 +75,7 @@ export function ProjectNotice(): JSX.Element | null {
),
action: {
- to: '/ingestion',
+ to: urls.onboarding(ProductKey.PRODUCT_ANALYTICS),
'data-attr': 'demo-warning-cta',
icon: ([
(closable &&
(closed ||
(relevantAnnouncementType && persistedClosedAnnouncements[relevantAnnouncementType]))) || // hide if already closed
- pathname == urls.ingestion() // hide during the ingestion phase
+ pathname.includes('/onboarding') ||
+ pathname.includes('/products') // hide during the onboarding phase
) {
return null
}
diff --git a/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx b/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx
index cc11a0c436539..4b25f0afdc43f 100644
--- a/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx
+++ b/frontend/src/layout/navigation/TopBar/notificationsLogic.tsx
@@ -55,9 +55,9 @@ export const notificationsLogic = kea([
clearTimeout(values.pollTimeout)
try {
- const response = (await api.get(
+ const response = await api.get(
`api/projects/${teamLogic.values.currentTeamId}/activity_log/important_changes`
- )) as ChangesResponse
+ )
// we can't rely on automatic success action here because we swallow errors so always succeed
actions.clearErrorCount()
return response
@@ -115,14 +115,17 @@ export const notificationsLogic = kea([
a.created_at.isAfter(b.created_at) ? a : b
).created_at
actions.setMarkReadTimeout(
- window.setTimeout(async () => {
- await api.create(
- `api/projects/${teamLogic.values.currentTeamId}/activity_log/bookmark_activity_notification`,
- {
- bookmark: bookmarkDate.toISOString(),
- }
- )
- actions.markAllAsRead(bookmarkDate.toISOString())
+ window.setTimeout(() => {
+ void api
+ .create(
+ `api/projects/${teamLogic.values.currentTeamId}/activity_log/bookmark_activity_notification`,
+ {
+ bookmark: bookmarkDate.toISOString(),
+ }
+ )
+ .then(() => {
+ actions.markAllAsRead(bookmarkDate.toISOString())
+ })
}, MARK_READ_TIMEOUT)
)
}
diff --git a/frontend/src/lib/animations/animations.ts b/frontend/src/lib/animations/animations.ts
index 7d30b6932498c..40551f4979cb1 100644
--- a/frontend/src/lib/animations/animations.ts
+++ b/frontend/src/lib/animations/animations.ts
@@ -33,7 +33,7 @@ async function fetchJson(url: string): Promise> {
export async function getAnimationSource(animation: AnimationType): Promise> {
if (!animationCache[animation]) {
- if (!fetchCache[animation]) {
+ if (!(animation in fetchCache)) {
fetchCache[animation] = fetchJson(animations[animation].url)
}
animationCache[animation] = await fetchCache[animation]
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index d1de3a313acb2..44eedef5bbb95 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -65,7 +65,7 @@ import { EVENT_PROPERTY_DEFINITIONS_PER_PAGE } from 'scenes/data-management/prop
import { ActivityLogItem, ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
import { ActivityLogProps } from 'lib/components/ActivityLog/ActivityLog'
import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
-import { QuerySchema } from '~/queries/schema'
+import { QuerySchema, QueryStatus } from '~/queries/schema'
import { decompressSync, strFromU8 } from 'fflate'
import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
import { encodeParams } from 'kea-router'
@@ -542,6 +542,10 @@ class ApiRequest {
return this.projectsDetail(teamId).addPathComponent('query')
}
+ public queryStatus(queryId: string, teamId?: TeamType['id']): ApiRequest {
+ return this.query(teamId).addPathComponent(queryId)
+ }
+
// Notebooks
public notebooks(teamId?: TeamType['id']): ApiRequest {
return this.projectsDetail(teamId).addPathComponent('notebooks')
@@ -1447,7 +1451,7 @@ const api = {
},
async update(
notebookId: NotebookType['short_id'],
- data: Pick
+ data: Partial>
): Promise {
return await new ApiRequest().notebook(notebookId).update({ data })
},
@@ -1722,6 +1726,12 @@ const api = {
},
},
+ queryStatus: {
+ async get(queryId: string): Promise {
+ return await new ApiRequest().queryStatus(queryId).get()
+ },
+ },
+
queryURL: (): string => {
return new ApiRequest().query().assembleFullUrl(true)
},
@@ -1730,7 +1740,8 @@ const api = {
query: T,
options?: ApiMethodOptions,
queryId?: string,
- refresh?: boolean
+ refresh?: boolean,
+ async?: boolean
): Promise<
T extends { [response: string]: any }
? T['response'] extends infer P | undefined
@@ -1740,7 +1751,7 @@ const api = {
> {
return await new ApiRequest()
.query()
- .create({ ...options, data: { query, client_query_id: queryId, refresh: refresh } })
+ .create({ ...options, data: { query, client_query_id: queryId, refresh: refresh, async } })
},
/** Fetch data from specified URL. The result already is JSON-parsed. */
diff --git a/frontend/src/lib/components/ActivationSidebar/activationLogic.ts b/frontend/src/lib/components/ActivationSidebar/activationLogic.ts
index b2579b889df9e..16cf859f6aefc 100644
--- a/frontend/src/lib/components/ActivationSidebar/activationLogic.ts
+++ b/frontend/src/lib/components/ActivationSidebar/activationLogic.ts
@@ -8,7 +8,7 @@ import { membersLogic } from 'scenes/organization/membersLogic'
import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
import { teamLogic } from 'scenes/teamLogic'
import { navigationLogic } from '~/layout/navigation/navigationLogic'
-import { EventDefinitionType, TeamBasicType } from '~/types'
+import { EventDefinitionType, ProductKey, TeamBasicType } from '~/types'
import type { activationLogicType } from './activationLogicType'
import { urls } from 'scenes/urls'
import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
@@ -327,7 +327,7 @@ export const activationLogic = kea([
runTask: async ({ id }) => {
switch (id) {
case ActivationTasks.IngestFirstEvent:
- router.actions.push(urls.ingestion())
+ router.actions.push(urls.onboarding(ProductKey.PRODUCT_ANALYTICS))
break
case ActivationTasks.InviteTeamMember:
actions.showInviteModal()
diff --git a/frontend/src/lib/components/ActivityLog/activityLogLogic.tsx b/frontend/src/lib/components/ActivityLog/activityLogLogic.tsx
index 2287859a196f4..fcc633bb7dfe0 100644
--- a/frontend/src/lib/components/ActivityLog/activityLogLogic.tsx
+++ b/frontend/src/lib/components/ActivityLog/activityLogLogic.tsx
@@ -104,7 +104,7 @@ export const activityLogLogic = kea([
})),
listeners(({ actions }) => ({
setPage: async (_, breakpoint) => {
- await breakpoint()
+ breakpoint()
actions.fetchActivity()
},
})),
diff --git a/frontend/src/lib/components/Animation/Animation.tsx b/frontend/src/lib/components/Animation/Animation.tsx
index ddda67a0060e7..6852c4f57ce29 100644
--- a/frontend/src/lib/components/Animation/Animation.tsx
+++ b/frontend/src/lib/components/Animation/Animation.tsx
@@ -39,7 +39,7 @@ export function Animation({
// Actually fetch the animation. Uses a cache to avoid multiple requests for the same file.
// Show a fallback spinner if failed to fetch.
useEffect(() => {
- let unmounted = false
+ let unmounted = false // Poor person's abort controller
async function loadAnimation(): Promise {
try {
const source = await getAnimationSource(type)
@@ -48,7 +48,7 @@ export function Animation({
!unmounted && setShowFallbackSpinner(true)
}
}
- loadAnimation()
+ void loadAnimation()
return () => {
unmounted = true
}
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
index 2dbb9042ea037..b0f5f5a471e2c 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
@@ -12,8 +12,8 @@
flex-direction: column;
&--highlighted {
- border-color: var(--primary);
- outline: 1px solid var(--primary);
+ border-color: var(--primary-3000);
+ outline: 1px solid var(--primary-3000);
}
.ant-alert {
@@ -160,7 +160,7 @@
width: 1rem;
border-radius: 0.25rem;
margin-right: 0.25rem;
- background: var(--primary);
+ background: var(--primary-3000);
color: var(--bg-light);
line-height: 1rem;
font-size: 0.625rem;
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
index 93a1c595298b1..a66f87cad040a 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -144,7 +144,7 @@ export interface InsightCardProps extends Resizeable, React.HTMLAttributes void
removeFromDashboard?: () => void
- deleteWithUndo?: () => void
+ deleteWithUndo?: () => Promise
refresh?: () => void
rename?: () => void
duplicate?: () => void
@@ -194,7 +194,6 @@ export function FilterBasedCardContent({
Data
@@ -210,7 +210,7 @@ function Pages(): JSX.Element {
icon={Apps
{canViewPlugins(currentOrganization) && (
{
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx
index 129a365f6d84c..2b85413419f02 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx
@@ -107,7 +107,7 @@ export function InsightMeta({
samplingNotice={
insight.filters.sampling_factor && insight.filters.sampling_factor < 1 ? (
-
) : null
}
diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.tsx b/frontend/src/lib/components/Cards/TextCard/TextCard.tsx
index 746316e302c65..9e6dc2e07c71c 100644
--- a/frontend/src/lib/components/Cards/TextCard/TextCard.tsx
+++ b/frontend/src/lib/components/Cards/TextCard/TextCard.tsx
@@ -32,7 +32,6 @@ interface TextCardBodyProps extends Pick, '
export function TextContent({ text, closeDetails, className }: TextCardBodyProps): JSX.Element {
return (
- // eslint-disable-next-line react/forbid-dom-props
([
}),
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()
diff --git a/frontend/src/lib/components/CommandPalette/CommandPalette.scss b/frontend/src/lib/components/CommandPalette/CommandPalette.scss
index 0972ea918e81e..e2622169149a0 100644
--- a/frontend/src/lib/components/CommandPalette/CommandPalette.scss
+++ b/frontend/src/lib/components/CommandPalette/CommandPalette.scss
@@ -109,7 +109,7 @@
cursor: pointer;
&::after {
- background: var(--primary);
+ background: var(--primary-3000);
}
}
diff --git a/frontend/src/lib/components/CommandPalette/CommandPalette.tsx b/frontend/src/lib/components/CommandPalette/CommandPalette.tsx
index ce07fb425829c..e32c98f3175de 100644
--- a/frontend/src/lib/components/CommandPalette/CommandPalette.tsx
+++ b/frontend/src/lib/components/CommandPalette/CommandPalette.tsx
@@ -36,7 +36,7 @@ function _CommandPalette(): JSX.Element | null {
useEventListener('keydown', (event) => {
if (isSqueak && event.key === 'Enter') {
- squeakAudio?.play()
+ void squeakAudio?.play()
} else if (event.key === 'Escape') {
event.preventDefault()
// Return to previous flow
diff --git a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
index bef1adb4210d1..b6590a40ed8eb 100644
--- a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
+++ b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
@@ -10,7 +10,7 @@ import { loaders } from 'kea-loaders'
import type { debugCHQueriesLogicType } from './DebugCHQueriesType'
import { IconRefresh } from 'lib/lemon-ui/icons'
-export async function debugCHQueries(): Promise {
+export function openCHQueriesDebugModal(): void {
LemonDialog.open({
title: 'ClickHouse queries recently executed for this user',
content: ([
? {
icon: IconTools,
display: 'Debug ClickHouse Queries',
- executor: () => {
- debugCHQueries()
- },
+ executor: () => openCHQueriesDebugModal(),
}
: [],
}
diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
index e1525cee04b23..4ffd1456cef3f 100644
--- a/frontend/src/lib/components/CopyToClipboard.tsx
+++ b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -4,9 +4,7 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { IconCopy } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-interface InlineProps extends HTMLProps {
- children?: JSX.Element | string
- explicitValue?: string
+interface InlinePropsBase extends HTMLProps {
description?: string
/** Makes text selectable instead of copying on click anywhere */
selectable?: boolean
@@ -16,6 +14,15 @@ interface InlineProps extends HTMLProps {
iconPosition?: 'end' | 'start'
style?: React.CSSProperties
}
+interface InlinePropsWithStringInside extends InlinePropsBase {
+ children: string
+ explicitValue?: string
+}
+interface InlinePropsWithJSXInside extends InlinePropsBase {
+ children?: JSX.Element
+ explicitValue: string
+}
+type InlineProps = InlinePropsWithStringInside | InlinePropsWithJSXInside
export function CopyToClipboardInline({
children,
@@ -29,8 +36,7 @@ export function CopyToClipboardInline({
style,
...props
}: InlineProps): JSX.Element {
- const copy = async (): Promise =>
- await copyToClipboard(explicitValue ?? (children ? children.toString() : ''), description)
+ const copy = async (): Promise => await copyToClipboard((explicitValue ?? children) as string, description)
const content = (
- {children}
+ {children && {children}}
([
},
],
rangeDateFrom: [
- (props.dateFrom && (dayjs.isDayjs(props.dateFrom) || isDate.test(props.dateFrom as string))
+ (props.dateFrom && (dayjs.isDayjs(props.dateFrom) || isDate.test(props.dateFrom))
? dayjs(props.dateFrom)
: null) as Dayjs | null,
{
@@ -52,7 +52,7 @@ export const dateFilterLogic = kea([
},
],
rangeDateTo: [
- (props.dateTo && (dayjs.isDayjs(props.dateTo) || isDate.test(props.dateTo as string))
+ (props.dateTo && (dayjs.isDayjs(props.dateTo) || isDate.test(props.dateTo))
? dayjs(props.dateTo)
: dayjs()) as Dayjs | null,
{
diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
index 11d70ba34054d..4ceb631d56d77 100644
--- a/frontend/src/lib/components/DebugNotice.tsx
+++ b/frontend/src/lib/components/DebugNotice.tsx
@@ -29,7 +29,7 @@ export function DebugNotice(): JSX.Element | null {
return (
closeDetails?.()}>
{text}
diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx b/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx
index 180ac9e794838..9c9ca574f8194 100644
--- a/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx
+++ b/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx
@@ -132,8 +132,10 @@ export function CodeSnippet({
setNoticeHidden(true)}>
-
+
DEBUG mode
{
it('make local state dirty', async () => {
await expectLogic(logic, async () => {
- await logic.actions.setDefinition(mockEventDefinitions[0])
- await logic.actions.setPopoverState(DefinitionPopoverState.Edit)
+ logic.actions.setDefinition(mockEventDefinitions[0])
+ logic.actions.setPopoverState(DefinitionPopoverState.Edit)
})
.toDispatchActions(['setDefinition', 'setPopoverState'])
.toMatchValues({
@@ -87,9 +87,9 @@ describe('definitionPopoverLogic', () => {
it('cancel', async () => {
await expectLogic(logic, async () => {
- await logic.actions.setDefinition(mockEventDefinitions[0])
- await logic.actions.setPopoverState(DefinitionPopoverState.Edit)
- await logic.actions.setLocalDefinition({ description: 'new description' })
+ logic.actions.setDefinition(mockEventDefinitions[0])
+ logic.actions.setPopoverState(DefinitionPopoverState.Edit)
+ logic.actions.setLocalDefinition({ description: 'new description' })
})
.toDispatchActions(['setLocalDefinition'])
.toMatchValues({
@@ -159,7 +159,7 @@ describe('definitionPopoverLogic', () => {
},
{
type: TaxonomicFilterGroupType.Cohorts,
- definition: mockCohort as CohortType,
+ definition: mockCohort,
url: `api/projects/@current/cohorts/${mockCohort.id}`,
dispatchActions: [cohortsModel, ['updateCohort']],
},
@@ -178,10 +178,10 @@ describe('definitionPopoverLogic', () => {
logic.mount()
const expectChain = expectLogic(logic, async () => {
- await logic.actions.setDefinition(group.definition)
- await logic.actions.setPopoverState(DefinitionPopoverState.Edit)
- await logic.actions.setLocalDefinition({ description: 'new and improved description' })
- await logic.actions.handleSave({})
+ logic.actions.setDefinition(group.definition)
+ logic.actions.setPopoverState(DefinitionPopoverState.Edit)
+ logic.actions.setLocalDefinition({ description: 'new and improved description' })
+ logic.actions.handleSave({})
}).toDispatchActions(['setDefinitionSuccess', 'setPopoverState', 'handleSave'])
if (group.dispatchActions.length > 0) {
@@ -202,9 +202,9 @@ describe('definitionPopoverLogic', () => {
it('add tags', async () => {
await expectLogic(logic, async () => {
- await logic.actions.setDefinition(mockEventDefinitions[0])
- await logic.actions.setPopoverState(DefinitionPopoverState.Edit)
- await logic.actions.setLocalDefinition({ tags: ['ohhello', 'ohwow'] })
+ logic.actions.setDefinition(mockEventDefinitions[0])
+ logic.actions.setPopoverState(DefinitionPopoverState.Edit)
+ logic.actions.setLocalDefinition({ tags: ['ohhello', 'ohwow'] })
})
.toDispatchActions(['setDefinitionSuccess', 'setLocalDefinition'])
.toMatchValues({
@@ -221,8 +221,8 @@ describe('definitionPopoverLogic', () => {
logic.mount()
await expectLogic(logic, async () => {
- await logic.actions.setDefinition(mockEventDefinitions[0])
- await logic.actions.setDefinition(mockEventDefinitions[1])
+ logic.actions.setDefinition(mockEventDefinitions[0])
+ logic.actions.setDefinition(mockEventDefinitions[1])
})
.toDispatchActions(['setDefinitionSuccess'])
.toMatchValues({
diff --git a/frontend/src/lib/components/EditableField/EditableField.scss b/frontend/src/lib/components/EditableField/EditableField.scss
index c58f63e9d2114..3bd0610a9ff90 100644
--- a/frontend/src/lib/components/EditableField/EditableField.scss
+++ b/frontend/src/lib/components/EditableField/EditableField.scss
@@ -4,7 +4,7 @@
max-width: 100%;
&:not(.EditableField--multiline) {
- line-height: 2rem;
+ line-height: 1.15em;
}
i {
@@ -23,14 +23,13 @@
align-items: center;
width: fit-content;
max-width: calc(100% + 0.5rem);
- min-height: 2rem;
padding: 0.25rem; // Some padding to give the focus outline more breathing space
margin: -0.25rem;
white-space: pre-wrap;
overflow: auto;
}
- &--editing .EditableField__highlight {
+ &.EditableField--editing .EditableField__highlight {
flex-grow: 1;
align-items: flex-end;
width: auto;
@@ -39,6 +38,23 @@
border-radius: var(--radius);
}
+ &.EditableField--underlined {
+ .EditableField__highlight {
+ padding: 0;
+ margin: 0;
+ }
+
+ &.EditableField--editing .EditableField__highlight {
+ outline: none;
+
+ input {
+ text-decoration: underline;
+ text-decoration-color: var(--muted);
+ text-underline-offset: 0.5em;
+ }
+ }
+ }
+
.EditableField__autosize {
align-self: center;
min-width: 0;
diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx
index 40e61b3e57d08..2070ea7f1cbe3 100644
--- a/frontend/src/lib/components/EditableField/EditableField.tsx
+++ b/frontend/src/lib/components/EditableField/EditableField.tsx
@@ -22,11 +22,14 @@ export interface EditableFieldProps {
multiline?: boolean
/** Whether to render the content as Markdown in view mode. */
markdown?: boolean
- compactButtons?: boolean
+ compactButtons?: boolean | 'xsmall' // The 'xsmall' is somewhat hacky, but necessary for 3000 breadcrumbs
/** Whether this field should be gated behind a "paywall". */
paywall?: boolean
/** Controlled mode. */
mode?: 'view' | 'edit'
+ onModeToggle?: (newMode: 'view' | 'edit') => void
+ /** @default 'outlined' */
+ editingIndication?: 'outlined' | 'underlined'
className?: string
style?: React.CSSProperties
'data-attr'?: string
@@ -53,6 +56,8 @@ export function EditableField({
compactButtons = false,
paywall = false,
mode,
+ onModeToggle,
+ editingIndication = 'outlined',
className,
style,
'data-attr': dataAttr,
@@ -60,13 +65,16 @@ export function EditableField({
notice,
}: EditableFieldProps): JSX.Element {
const [localIsEditing, setLocalIsEditing] = useState(false)
- const [tentativeValue, setTentativeValue] = useState(value)
+ const [localTentativeValue, setLocalTentativeValue] = useState(value)
useEffect(() => {
- setTentativeValue(value)
+ setLocalTentativeValue(value)
}, [value])
+ useEffect(() => {
+ setLocalIsEditing(mode === 'edit')
+ }, [mode])
- const isSaveable = !minLength || tentativeValue.length >= minLength
+ const isSaveable = !minLength || localTentativeValue.length >= minLength
const mouseDownOnCancelButton = (e: React.MouseEvent): void => {
// if saveOnBlur is set the onBlur handler of the input fires before the onClick event of the button
@@ -76,12 +84,14 @@ export function EditableField({
const cancel = (): void => {
setLocalIsEditing(false)
- setTentativeValue(value)
+ setLocalTentativeValue(value)
+ onModeToggle?.('view')
}
const save = (): void => {
- onSave?.(tentativeValue)
+ onSave?.(localTentativeValue)
setLocalIsEditing(false)
+ onModeToggle?.('view')
}
const isEditing = !paywall && (mode === 'edit' || localIsEditing)
@@ -107,6 +117,7 @@ export function EditableField({
'EditableField',
multiline && 'EditableField--multiline',
isEditing && 'EditableField--editing',
+ editingIndication === 'underlined' && 'EditableField--underlined',
className
)}
data-attr={dataAttr}
@@ -127,12 +138,12 @@ export function EditableField({
{multiline ? (
{
onChange?.(e.target.value)
- setTentativeValue(e.target.value)
+ setLocalTentativeValue(e.target.value)
}}
- onBlur={saveOnBlur ? (tentativeValue !== value ? save : cancel) : undefined}
+ onBlur={saveOnBlur ? (localTentativeValue !== value ? save : cancel) : undefined}
onKeyDown={handleKeyDown}
placeholder={placeholder}
minLength={minLength}
@@ -142,12 +153,12 @@ export function EditableField({
) : (
{
onChange?.(e.target.value)
- setTentativeValue(e.target.value)
+ setLocalTentativeValue(e.target.value)
}}
- onBlur={saveOnBlur ? (tentativeValue !== value ? save : cancel) : undefined}
+ onBlur={saveOnBlur ? (localTentativeValue !== value ? save : cancel) : undefined}
onKeyDown={handleKeyDown}
placeholder={placeholder}
minLength={minLength}
@@ -155,7 +166,7 @@ export function EditableField({
autoFocus={autoFocus}
/>
)}
- {!mode && (
+ {(!mode || !!onModeToggle) && (
{markdown && (
@@ -164,7 +175,7 @@ export function EditableField({
)}
{tentativeValue}
+ {localTentativeValue && markdown ? (
+ {localTentativeValue}
) : (
- tentativeValue || {placeholder}
+ localTentativeValue || {placeholder}
)}
- {!mode && (
+ {(!mode || !!onModeToggle) && (
{
lemonToast.error('Export failed!')
}
} else {
- // eslint-disable-next-line no-async-promise-executor
- const poller = new Promise(async (resolve, reject) => {
+ // eslint-disable-next-line no-async-promise-executor,@typescript-eslint/no-misused-promises
+ const poller = new Promise(async (resolve, reject) => {
const trackingProperties = {
export_format: asset.export_format,
dashboard: asset.dashboard,
diff --git a/frontend/src/lib/components/FullScreen.tsx b/frontend/src/lib/components/FullScreen.tsx
index 2ca3ec95706e0..95859d4efe88e 100644
--- a/frontend/src/lib/components/FullScreen.tsx
+++ b/frontend/src/lib/components/FullScreen.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
export function FullScreen({ onExit }: { onExit?: () => any }): null {
const selector = 'aside.ant-layout-sider, .layout-top-content'
useEffect(() => {
- const myClasses = window.document.querySelectorAll(selector) as NodeListOf
+ const myClasses = window.document.querySelectorAll(selector)
for (let i = 0; i < myClasses.length; i++) {
myClasses[i].style.display = 'none'
@@ -16,7 +16,7 @@ export function FullScreen({ onExit }: { onExit?: () => any }): null {
}
try {
- window.document.body.requestFullscreen().then(() => {
+ void document.body.requestFullscreen().then(() => {
window.addEventListener('fullscreenchange', handler, false)
})
} catch {
@@ -31,15 +31,15 @@ export function FullScreen({ onExit }: { onExit?: () => any }): null {
}
return () => {
- const elements = window.document.querySelectorAll(selector) as NodeListOf
+ const elements = window.document.querySelectorAll(selector)
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = 'block'
}
try {
window.removeEventListener('fullscreenchange', handler, false)
- if (window.document.fullscreenElement !== null) {
- window.document.exitFullscreen()
+ if (document.fullscreenElement !== null) {
+ void document.exitFullscreen()
}
} catch {
// will break on IE11
diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
index 17b0dded01c1d..c0264a96288f6 100644
--- a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
+++ b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
@@ -4,14 +4,14 @@
border-radius: 4px;
&.SelectableElement--selected {
- background: var(--primary);
+ background: var(--primary-3000);
}
&:hover {
- background: var(--primary-light);
+ background: var(--primary-3000-hover);
}
&:active {
- background: var(--primary-dark);
+ background: var(--primary-3000-active);
}
}
diff --git a/frontend/src/lib/components/Map/Maplibre.scss b/frontend/src/lib/components/Map/Maplibre.scss
index f4c4cdeb2fda7..2a7688a3f23af 100644
--- a/frontend/src/lib/components/Map/Maplibre.scss
+++ b/frontend/src/lib/components/Map/Maplibre.scss
@@ -1,6 +1,6 @@
.maplibregl-ctrl-attrib-button:focus,
.maplibregl-ctrl-group button:focus {
- box-shadow: 0 0 2px 2px var(--primary);
+ box-shadow: 0 0 2px 2px var(--primary-3000);
}
@media screen {
diff --git a/frontend/src/lib/components/ObjectTags/objectTagsLogic.test.ts b/frontend/src/lib/components/ObjectTags/objectTagsLogic.test.ts
index 41ebccae03559..de0716d7bfbfa 100644
--- a/frontend/src/lib/components/ObjectTags/objectTagsLogic.test.ts
+++ b/frontend/src/lib/components/ObjectTags/objectTagsLogic.test.ts
@@ -28,7 +28,7 @@ describe('objectTagsLogic', () => {
})
it('handle adding a new tag', async () => {
await expectLogic(logic, async () => {
- await logic.actions.setNewTag('Nigh')
+ logic.actions.setNewTag('Nigh')
logic.actions.handleAdd('Nightly')
})
.toDispatchActions(['setNewTag'])
@@ -43,7 +43,7 @@ describe('objectTagsLogic', () => {
newTag: '',
})
// @ts-expect-error
- const mockedOnChange = props.onChange?.mock as any
+ const mockedOnChange = props.onChange?.mock
expect(mockedOnChange.calls.length).toBe(1)
expect(mockedOnChange.calls[0][0]).toBe('nightly')
expect(mockedOnChange.calls[0][1]).toEqual(['a', 'b', 'c', 'nightly'])
@@ -69,7 +69,7 @@ describe('objectTagsLogic', () => {
tags: ['b', 'c'],
})
// @ts-expect-error
- const mockedOnChange = props.onChange?.mock as any
+ const mockedOnChange = props.onChange?.mock
expect(mockedOnChange.calls.length).toBe(1)
expect(mockedOnChange.calls[0][0]).toBe('a')
expect(mockedOnChange.calls[0][1]).toEqual(['b', 'c'])
diff --git a/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx b/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx
index 125c31d54eb0d..0a0917a29280e 100644
--- a/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx
+++ b/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx
@@ -85,7 +85,7 @@ export const ProductIntroduction = ({
{action ? (
= {
+ title: 'Components/Properties Table',
+ component: PropertiesTableComponent,
+}
+export default meta
+
+export const PropertiesTable: StoryFn = () => {
+ const properties = {
+ name: 'John Doe',
+ age: 30,
+ url: 'https://www.google.com',
+ is_good: true,
+ evil_level: null,
+ tags: ['best', 'cool', 'awesome'],
+ location: {
+ city: 'Prague',
+ country: 'Czechia',
+ },
+ }
+ return {
diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
index b30e128738345..fa5bdc421a424 100644
--- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
+++ b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -63,7 +63,7 @@
font-size: 12px;
&.selected {
- background-color: var(--primary);
+ background-color: var(--primary-3000);
color: #fff;
}
}
diff --git a/frontend/src/lib/components/Sharing/SharingModal.stories.tsx b/frontend/src/lib/components/Sharing/SharingModal.stories.tsx
index e2fc7e134b254..39d2e4b48ad06 100644
--- a/frontend/src/lib/components/Sharing/SharingModal.stories.tsx
+++ b/frontend/src/lib/components/Sharing/SharingModal.stories.tsx
@@ -62,7 +62,7 @@ const Template = (args: Partial & { licensed?: boolean }): JS
created_at: '2022-06-28T12:30:51.459746Z',
enabled: true,
access_token: '1AEQjQ2xNLGoiyI0UnNlLzOiBZWWMQ',
- ...(req.body as any),
+ ...req.body,
},
]
},
diff --git a/frontend/src/lib/components/Sharing/SharingModal.tsx b/frontend/src/lib/components/Sharing/SharingModal.tsx
index 446ac5065df42..57ce2eb06d509 100644
--- a/frontend/src/lib/components/Sharing/SharingModal.tsx
+++ b/frontend/src/lib/components/Sharing/SharingModal.tsx
@@ -111,7 +111,7 @@ export function SharingModalContent({
await copyToClipboard(shareLink, 'link')}
+ onClick={() => void copyToClipboard(shareLink, 'link')}
icon={([
}),
listeners(({ actions }) => ({
- deleteSubscription: ({ id }) => {
- deleteWithUndo({
+ deleteSubscription: async ({ id }) => {
+ await deleteWithUndo({
endpoint: api.subscriptions.determineDeleteEndpoint(),
object: { name: 'Subscription', id },
callback: () => actions.loadSubscriptions(),
diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
index 227fbe2346059..97c2e739162ac 100644
--- a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
+++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
@@ -48,7 +48,7 @@
}
&.taxonomy-icon-built-in {
- color: var(--primary);
+ color: var(--primary-3000);
}
}
}
@@ -68,6 +68,10 @@
&.hover {
background-color: var(--primary-bg-hover);
border-radius: var(--radius);
+
+ .posthog-3000 & {
+ background-color: var(--bg-3000);
+ }
}
&.selected {
@@ -82,7 +86,7 @@
}
&.expand-row {
- color: var(--primary);
+ color: var(--primary-3000);
}
}
}
diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
index 98f01dd22f7c5..108cbcb552950 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;
}
@@ -50,6 +46,19 @@
background: var(--side);
border-color: var(--side);
+ .posthog-3000 & {
+ color: var(--default);
+ font-weight: 500;
+
+ &:not(.taxonomic-pill-active) {
+ opacity: 0.7;
+ }
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
&.taxonomic-count-zero {
color: var(--muted);
cursor: not-allowed;
diff --git a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
index d0ac9a6fe4220..80a1630463217 100644
--- a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
+++ b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
@@ -23,14 +23,14 @@
width: fit-content;
padding: 0 0.25rem;
border-radius: var(--radius);
- background: var(--primary);
+ background: var(--primary-3000);
color: var(--bg-light);
line-height: 1.25rem;
font-size: 0.75rem;
font-weight: 500;
&::selection {
- background: var(--primary-light); // Default selection background is invisible on primary
+ background: var(--primary-3000-hover); // Default selection background is invisible on primary
}
.Spinner {
@@ -77,7 +77,7 @@
left: 0;
height: var(--timeline-seekbar-thickness);
width: calc(100% - var(--timeline-seekbar-arrow-width));
- background: var(--primary);
+ background: var(--primary-3000);
}
.TimelineSeekbar__line-start,
@@ -91,7 +91,7 @@
display: block;
margin: calc(var(--timeline-seekbar-thickness) + 0.125rem) 0;
height: var(--timeline-seekbar-arrow-height);
- background: var(--primary);
+ background: var(--primary-3000);
}
}
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
index 63ef80121bccc..f8b3e96456bbc 100644
--- a/frontend/src/lib/constants.tsx
+++ b/frontend/src/lib/constants.tsx
@@ -136,6 +136,7 @@ export const FEATURE_FLAGS = {
ROLE_BASED_ACCESS: 'role-based-access', // owner: #team-experiments, @liyiy
QUERY_RUNNING_TIME: 'query_running_time', // owner: @mariusandra
QUERY_TIMINGS: 'query-timings', // owner: @mariusandra
+ QUERY_ASYNC: 'query-async', // owner: @webjunkie
POSTHOG_3000: 'posthog-3000', // owner: @Twixes
POSTHOG_3000_NAV: 'posthog-3000-nav', // owner: @Twixes
ENABLE_PROMPTS: 'enable-prompts', // owner: @lharries
diff --git a/frontend/src/lib/dayjs.ts b/frontend/src/lib/dayjs.ts
index e4f4881dfd390..51bf082205b51 100644
--- a/frontend/src/lib/dayjs.ts
+++ b/frontend/src/lib/dayjs.ts
@@ -61,7 +61,6 @@ export function dayjsLocalToTimezone(
// We could only use types like "dayjs.OpUnitType", causing errors such as:
// error TS2312: An interface can only extend an object type or intersection of object types with statically known members.
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Dayjs extends DayjsOriginal {}
export type UnitTypeShort = 'd' | 'D' | 'M' | 'y' | 'h' | 'm' | 's' | 'ms'
diff --git a/frontend/src/lib/hooks/useAsyncHandler.ts b/frontend/src/lib/hooks/useAsyncHandler.ts
index 3f0f4717ea7d0..af962ad35a322 100644
--- a/frontend/src/lib/hooks/useAsyncHandler.ts
+++ b/frontend/src/lib/hooks/useAsyncHandler.ts
@@ -9,7 +9,7 @@ import { useState } from 'react'
* return Click me
*/
export function useAsyncHandler(
- onEvent: ((e: E) => any | Promise) | undefined
+ onEvent: ((e: E) => any) | undefined
): { loading: boolean; onEvent: ((e: E) => void) | undefined } {
const [loading, setLoading] = useState(false)
@@ -19,7 +19,7 @@ export function useAsyncHandler(
const result = onEvent(e)
if (result instanceof Promise) {
setLoading(true)
- result.finally(() => setLoading(false))
+ void result.finally(() => setLoading(false))
}
}
}
diff --git a/frontend/src/lib/internalMetrics.ts b/frontend/src/lib/internalMetrics.ts
index 417fa56e82a2e..e137db77e41b8 100644
--- a/frontend/src/lib/internalMetrics.ts
+++ b/frontend/src/lib/internalMetrics.ts
@@ -58,7 +58,7 @@ export async function apiGetWithTimeToSeeDataTracking(
error = e
}
const requestDurationMs = performance.now() - requestStartMs
- captureTimeToSeeData(teamId, {
+ void captureTimeToSeeData(teamId, {
...timeToSeeDataPayload,
api_url: url,
status: error ? 'failure' : 'success',
diff --git a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
index 7a5d1c1db4b74..b01a0c24d3f18 100644
--- a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
+++ b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
@@ -22,7 +22,7 @@
}
.LemonActionableTooltip__icon {
- color: var(--primary);
+ color: var(--primary-3000);
display: flex;
align-items: center;
width: 1.5rem;
diff --git a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
index 186df996abe84..adc91cce935f8 100644
--- a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
+++ b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
@@ -1,5 +1,5 @@
.LemonBadge {
- --lemon-badge-color: var(--primary);
+ --lemon-badge-color: var(--primary-3000);
--lemon-badge-size: 1.5rem;
--lemon-badge-font-size: 0.75rem;
--lemon-badge-position-offset: 0.5rem;
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
index d683e23796f6f..5ce621e0bb385 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -1,6 +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;
@@ -9,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;
@@ -23,6 +20,12 @@
user-select: none;
appearance: none !important; // Important as this gets overridden by Ant styles...
+ > span {
+ display: flex;
+ flex: 1;
+ gap: 0.5rem;
+ }
+
.LemonButton__content {
flex: 1;
line-height: initial;
@@ -32,6 +35,11 @@
&[aria-disabled='true']:not(.LemonButton--loading) {
cursor: not-allowed;
+
+ > span {
+ cursor: not-allowed;
+ }
+
opacity: var(--opacity-disabled);
}
@@ -43,7 +51,6 @@
width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
- overflow: hidden;
.LemonButton__content {
overflow: hidden;
@@ -51,11 +58,13 @@
}
&.LemonButton--centered {
- justify-content: center;
+ > span {
+ justify-content: center !important;
+ }
.LemonButton__content {
- flex: initial;
- text-align: center;
+ flex: initial !important;
+ text-align: center !important;
}
}
@@ -63,78 +72,46 @@
padding-left: 0.5rem;
}
- &.LemonButton--has-side-icon {
- padding-right: 0.5rem;
- }
-
&.LemonButton--no-content {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
&.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,
.Breadcrumbs3000 & {
- --lemon-button-height: 2rem;
-
- padding: 0.125rem 0.5rem;
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;
+ > span {
+ gap: 0.75rem;
}
- &.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__icon {
+ font-size: 1.75rem;
}
}
@@ -143,8 +120,6 @@
height: auto;
width: auto;
padding: 0;
- padding-left: 0;
- padding-right: 0;
&.LemonButton--full-width {
width: 100%;
@@ -156,115 +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));
}
}
}
@@ -284,67 +173,6 @@
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));
- }
- }
}
.LemonButtonWithSideAction {
@@ -352,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..e0067bc5406af
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
@@ -0,0 +1,266 @@
+.posthog-3000 {
+ --transition: 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/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
index 8ffed36ab0d40..135c3c2a43e24 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -15,6 +15,10 @@
--tick-length: 12.73; // Approximation of tick length, which is (3 + 6) * sqrt(2)
--box-color: var(--primary);
+ .posthog-3000 & {
+ --box-color: var(--primary-3000);
+ }
+
display: flex;
align-items: center;
cursor: pointer;
@@ -59,7 +63,7 @@
&.LemonCheckbox:not(.LemonCheckbox--disabled):hover,
&.LemonCheckbox:not(.LemonCheckbox--disabled):active {
label {
- --box-color: var(--primary-light);
+ --box-color: var(--primary-3000-hover);
.LemonCheckbox__box {
border-color: var(--box-color);
@@ -68,7 +72,7 @@
}
&.LemonCheckbox:not(.LemonCheckbox--disabled):active label {
- --box-color: var(--primary-dark);
+ --box-color: var(--primary-3000-active);
}
&.LemonCheckbox--checked {
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
index 7d86dc8538262..6dd509e146f97 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
@@ -19,8 +19,8 @@
}
.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
@@ -30,11 +30,15 @@
}
.LemonCollapsePanel__body {
- transition: height 200ms ease;
- height: 0;
- overflow: hidden;
border-top-width: 1px;
box-sizing: content-box;
+ height: 0;
+ overflow: hidden;
+ transition: height 200ms ease;
+
+ .posthog-3000 & {
+ background: var(--bg-light);
+ }
}
.LemonCollapsePanel__content {
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
index 1a266d6ba5b08..731f84ed06b90 100644
--- a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
@@ -11,6 +11,6 @@
left: calc(-1 * var(--file-drop-target-padding));
height: calc(100% + var(--file-drop-target-padding) * 2);
width: calc(100% + var(--file-drop-target-padding) * 2);
- border: 3px dashed var(--primary);
+ border: 3px dashed var(--primary-3000);
border-radius: var(--radius);
}
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
index 03943ad9f9bf1..c00645bafc1e1 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
@@ -1,27 +1,26 @@
.LemonInput {
- transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
- display: flex;
- min-height: 2.5rem;
- padding: 0.25rem 0.5rem;
+ align-items: center;
background: none;
border-radius: var(--radius);
+ border: 1px solid var(--border);
+ color: var(--default);
+ cursor: text;
+ display: flex;
font-size: 0.875rem;
- text-align: left;
+ gap: 0.25rem;
+ justify-content: center;
line-height: 1.25rem;
- cursor: text;
- color: var(--default);
- border: 1px solid var(--border);
+ min-height: 2.5rem;
+ padding: 0.25rem 0.5rem;
+ text-align: left;
background-color: var(--bg-light);
- align-items: center;
- justify-content: center;
- gap: 0.25rem;
&:hover:not([aria-disabled='true']) {
- border-color: var(--primary-light);
+ border-color: var(--primary-3000-hover);
}
&.LemonInput--focused:not([aria-disabled='true']) {
- border-color: var(--primary);
+ border-color: var(--primary-3000);
}
&.LemonInput--transparent-background {
@@ -67,7 +66,7 @@
&.LemonInput--has-content {
> .LemonIcon {
- color: var(--primary);
+ color: var(--primary-3000);
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
index 3f99c8ea0f9c5..50506eac65e68 100644
--- a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
+++ b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
@@ -32,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;
diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
index f847cc3127765..cdec3b871b333 100644
--- a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
+++ b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
@@ -20,7 +20,7 @@
font-weight: 600;
.LemonRow__icon {
- color: var(--primary);
+ color: var(--primary-3000);
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
index 291b5ffa77646..fd66747c15565 100644
--- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
@@ -2,9 +2,7 @@
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
@@ -16,83 +14,154 @@
&.LemonSegmentedButton--full-width {
width: 100%;
}
-}
-.LemonSegmentedButton__slider {
- // This is a real element and not ::after to avoid initial transition from 0 width
- 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__option {
+ display: flex;
+ flex: 1;
+
+ .LemonButton__content {
+ text-wrap: nowrap;
+ }
}
+}
- &.LemonSegmentedButton__slider--last {
- border-top-right-radius: var(--radius);
- border-bottom-right-radius: var(--radius);
+body:not(.posthog-3000) {
+ .LemonSegmentedButton {
+ background: var(--bg-light);
+ border: 1px solid var(--border);
}
- .LemonSegmentedButton--transitioning & {
+ .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__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);
- }
+ &.LemonSegmentedButton__slider--first {
+ border-top-left-radius: var(--radius);
+ border-bottom-left-radius: var(--radius);
+ }
- &:first-child,
- &:first-child .LemonButton {
- 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);
+ }
}
- &:last-child,
- &:last-child .LemonButton {
- border-top-right-radius: var(--radius);
- border-bottom-right-radius: var(--radius);
- }
+ .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);
- &:not(:last-child) {
- border-right: 1px solid var(--border);
- }
+ &: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);
+ }
+
+ &:not(:last-child) {
+ border-right: 1px solid var(--border);
+ }
+
+ &:not(.LemonSegmentedButton__option--disabled, .LemonSegmentedButton__option--selected) {
+ &:hover .LemonButton {
+ outline-color: var(--primary);
+ }
- &:not(.LemonSegmentedButton__option--disabled, .LemonSegmentedButton__option--selected) {
- &:hover .LemonButton {
- outline-color: var(--primary);
+ &:active .LemonButton {
+ outline-color: var(--primary-dark);
+ }
}
- &: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 a925394115938..69f4bea414371 100644
--- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
@@ -1,8 +1,11 @@
import clsx from 'clsx'
import React from 'react'
-import { LemonButton } from '../LemonButton'
+import { LemonButton, LemonButtonProps } 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
@@ -18,7 +21,7 @@ export interface LemonSegmentedButtonProps {
value?: T
onChange?: (newValue: T) => void
options: LemonSegmentedButtonOption[]
- size?: 'small' | 'medium'
+ size?: LemonButtonProps['size']
className?: string
fullWidth?: boolean
}
@@ -41,6 +44,15 @@ export function LemonSegmentedButton({
HTMLDivElement,
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 (
({
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 a382503f15b58..59b8e3bd4d44a 100644
--- a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
+++ b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
@@ -23,7 +23,7 @@
&:not(.ant-select-disabled):active {
.ant-select-selector {
background: var(--bg-light);
- border-color: var(--primary);
+ border-color: var(--primary-3000);
box-shadow: none;
}
}
@@ -65,10 +65,14 @@
.LemonSelectMultipleDropdown {
background: var(--bg-light);
- padding: 0.5rem;
border-radius: var(--radius);
border: 1px solid var(--primary);
margin: -4px 0; // Counteract antd wrapper
+ padding: 0.5rem;
+
+ .posthog-3000 & {
+ border: 1px solid var(--primary-3000);
+ }
.ant-select-item {
padding: 0;
diff --git a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx
index 49bee6c0f3589..dc324b2af77d6 100644
--- a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx
@@ -88,7 +88,7 @@ export function LemonSelectMultiple({
const typedOnChange = onChange as (newValue: string | null) => void
typedOnChange(typedValues)
} else {
- const typedValues = v.map((token) => token.toString().trim()) as string[]
+ const typedValues = v.map((token) => token.toString().trim())
const typedOnChange = onChange as (newValue: string[]) => void
typedOnChange(typedValues)
}
diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
index 6ce695c71a252..50b5e18e475d6 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -96,9 +96,9 @@
justify-content: center;
.LemonSwitch--checked & {
- transform: translateX(1rem);
background-color: var(--primary);
border-color: var(--primary);
+ transform: translateX(1rem);
}
.LemonSwitch--active & {
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
index 2a911f8ef6bb0..6e37c6cd5eecc 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -1,13 +1,20 @@
.LemonTable {
position: relative;
width: 100%;
- background: var(--bg-light);
+ background: var(--bg-table);
border-radius: var(--radius);
border: 1px solid var(--border);
overflow: hidden;
flex: 1;
--row-base-height: 3rem;
+
+ .posthog-3000 & {
+ --row-base-height: auto;
+
+ font-size: 13px;
+ }
+
--row-horizontal-padding: 1rem;
&.LemonTable--with-ribbon {
@@ -90,6 +97,16 @@
max-width: 30rem;
font-size: 0.75rem;
}
+
+ a.Link {
+ .posthog-3000 & {
+ color: var(--default);
+
+ &:not(:disabled):hover {
+ color: var(--primary-3000-hover);
+ }
+ }
+ }
}
.LemonTable__content > table {
@@ -105,10 +122,25 @@
letter-spacing: 0.03125rem;
text-transform: uppercase;
+ .posthog-3000 & {
+ background: none;
+ }
+
> tr {
> th {
font-weight: 700;
text-align: left;
+
+ .posthog-3000 & {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ }
+
+ .LemonButton {
+ .posthog-3000 & {
+ margin: -0.5rem 0;
+ }
+ }
}
&.LemonTable__row--grouping {
@@ -136,8 +168,21 @@
}
> td {
+ color: var(--text-secondary);
padding-top: 0.5rem;
padding-bottom: 0.5rem;
+
+ .posthog-3000 & {
+ padding-top: 0.3rem;
+ padding-bottom: 0.3rem;
+ }
+
+ .LemonButton {
+ .posthog-3000 & {
+ margin-top: -0.2rem;
+ margin-bottom: -0.2rem;
+ }
+ }
}
}
}
@@ -212,8 +257,22 @@
.LemonTable__header {
cursor: default;
+ .posthog-3000 & {
+ opacity: 0.4;
+ }
+
&.LemonTable__header--actionable {
cursor: pointer;
+
+ .posthog-3000 & {
+ &:hover {
+ opacity: 0.7;
+ }
+
+ &:active {
+ opacity: 0.9;
+ }
+ }
}
}
@@ -222,6 +281,12 @@
align-items: center;
justify-content: space-between;
line-height: 1.5;
+
+ div {
+ .posthog-3000 & {
+ white-space: nowrap;
+ }
+ }
}
.LemonTable__footer {
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
index 314f0e2806528..4e30b5ddec332 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
@@ -1,15 +1,15 @@
.LemonTableLoader {
- transition: height 200ms ease, top 200ms ease;
- z-index: 10;
- position: absolute;
- left: 0;
- padding: 0;
- bottom: -1px;
- width: 100%;
- height: 0;
background: var(--primary-bg-active);
border: none !important;
+ bottom: -1px;
+ height: 0;
+ left: 0;
overflow: hidden;
+ padding: 0.05rem !important;
+ position: absolute;
+ transition: height 200ms ease, top 200ms ease;
+ width: 100%;
+ z-index: 10;
&::after {
content: '';
@@ -20,11 +20,16 @@
height: 100%;
animation: LemonTableLoader__swooping 1.5s linear infinite;
background: var(--primary);
+
+ .posthog-3000 & {
+ animation: loading-bar 1.5s linear infinite;
+ background: var(--primary-3000);
+ }
}
&.LemonTableLoader--enter-active,
&.LemonTableLoader--enter-done {
- height: 0.25rem;
+ height: 0.125rem;
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
index 4ff742148785c..967a0add69417 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
@@ -62,7 +62,7 @@
}
&:active {
- color: var(--primary-dark);
+ color: var(--primary-3000-active);
}
&.LemonTabs__tab--active {
@@ -79,8 +79,9 @@
}
.LemonTabs__tab-content {
- display: flex;
align-items: center;
- padding: 0.75rem 0;
cursor: pointer;
+ display: flex;
+ padding: 0.75rem 0;
+ white-space: nowrap;
}
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
index 6b8dce12a4432..348d596a1cec3 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
@@ -1,48 +1,99 @@
.LemonTag {
- font-size: 0.75rem;
- font-weight: var(--font-medium);
+ align-items: center;
background: var(--border);
- padding: 0.125rem 0.25rem;
border-radius: var(--radius);
- display: inline-flex;
- align-items: center;
color: var(--default);
+ display: inline-flex;
+ font-size: 0.75rem;
+ font-weight: var(--font-medium);
line-height: 1rem;
+ padding: 0.125rem 0.25rem;
white-space: nowrap;
+ .posthog-3000 & {
+ background: none;
+ border-radius: calc(var(--radius) * 0.75);
+ border-style: solid;
+ border-width: 1px;
+ font-size: 0.688rem;
+ padding: 0.075rem 0.25rem;
+ }
+
&.primary {
- background-color: var(--primary);
+ background-color: var(--primary-3000);
color: #fff;
+
+ .posthog-3000 & {
+ background: none;
+ border-color: var(--primary-3000);
+ color: var(--primary-3000);
+ }
}
&.highlight {
background-color: var(--mark);
color: var(--bg-charcoal);
+
+ .posthog-3000 & {
+ background: none;
+ border-color: var(--mark);
+ color: var(--mark);
+ }
}
&.warning {
background-color: var(--warning);
color: var(--bg-charcoal);
+
+ .posthog-3000 & {
+ background: none;
+ border-color: var(--warning);
+ color: var(--warning);
+ }
}
&.danger {
background-color: var(--danger);
color: #fff;
+
+ .posthog-3000 & {
+ background: none;
+ border-color: var(--danger);
+ color: var(--danger);
+ }
}
&.success {
background-color: var(--success);
color: #fff;
+
+ .posthog-3000 & {
+ background: none;
+ border-color: var(--success);
+ color: var(--success);
+ }
}
&.completion {
background-color: var(--purple-light);
color: var(--bg-charcoal);
+
+ .posthog-3000 & {
+ background: none;
+ border-color: var(--purple-light);
+ color: var(--purple-light);
+ }
}
&.caution {
background-color: var(--danger-lighter);
color: var(--bg-charcoal);
+
+ .posthog-3000 & {
+ background: none;
+ border-color: var(--danger-lighter);
+ color: var(--danger-lighter);
+ }
}
&.none {
@@ -62,7 +113,7 @@
.LemonTag__right-button {
margin-left: 0.25rem;
- min-height: 1.5rem;
+ min-height: 1.5rem !important;
padding: 0.125rem !important;
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
index 389975e57915a..ccc45dc5f36a2 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
@@ -15,7 +15,7 @@
display: block;
&:not(:disabled):hover {
- border: 1px solid var(--primary-light);
+ border: 1px solid var(--primary-3000-hover);
}
width: 100%;
@@ -27,7 +27,7 @@
}
&:focus:not(:disabled) {
- border: 1px solid var(--primary);
+ border: 1px solid var(--primary-3000);
}
.Field--error & {
diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss
index 7b4702499c601..2500c9b62debe 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.scss
+++ b/frontend/src/lib/lemon-ui/Link/Link.scss
@@ -1,20 +1,20 @@
.Link {
- transition: color 200ms ease, opacity 200ms ease;
background: none;
- color: var(--link);
border: none;
+ color: var(--link);
+ cursor: pointer;
+ line-height: inherit;
outline: none;
padding: 0;
- line-height: inherit;
- cursor: pointer;
+ transition: none;
&:not(:disabled) {
&:hover {
- color: var(--primary-light);
+ color: var(--primary-3000-hover);
}
&:active {
- color: var(--primary-dark);
+ color: var(--primary-3000-active);
}
}
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index f989f61f3f5bb..5dbb894d99043 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -38,7 +38,7 @@
opacity: 0;
.Popover--actionable & {
- border-color: var(--primary);
+ border-color: var(--primary-3000);
}
// We set the offset below instead of using floating-ui's offset(), because we need there to be no gap between
@@ -95,7 +95,7 @@
}
.posthog-3000 & {
- background: var(--bg-3000);
+ background: var(--bg-light);
padding: 0.25rem;
}
@@ -136,7 +136,7 @@
}
.Popover--actionable & {
- border-color: var(--primary);
+ border-color: var(--primary-3000);
}
}
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
index 9e5a327867146..d3f5896baebca 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
@@ -93,7 +93,7 @@
height: 1.5rem;
width: 1.5rem;
border-radius: 50%;
- background: var(--primary);
+ background: var(--primary-3000);
color: #fff;
font-size: 0.625rem;
font-weight: 600;
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
index 4e855d4ba00b7..80f308b960191 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
@@ -47,7 +47,7 @@ export function ProfilePicture({
const emailHash = md5(emailOrNameWithEmail.trim().toLowerCase())
const tentativeUrl = `https://www.gravatar.com/avatar/${emailHash}?s=96&d=404`
// The image will be cached, so it's best to do GET request check before trying to render it
- fetch(tentativeUrl).then((response) => {
+ void fetch(tentativeUrl).then((response) => {
if (response.status === 200) {
setGravatarUrl(tentativeUrl)
}
diff --git a/frontend/src/lib/lemon-ui/lemonToast.tsx b/frontend/src/lib/lemon-ui/lemonToast.tsx
index b829ea33d0746..5332a95b0599a 100644
--- a/frontend/src/lib/lemon-ui/lemonToast.tsx
+++ b/frontend/src/lib/lemon-ui/lemonToast.tsx
@@ -18,7 +18,7 @@ export function ToastCloseButton({ closeToast }: { closeToast?: () => void }): J
interface ToastButton {
label: string
- action: () => void
+ action: (() => void) | (() => Promise)
dataAttr?: string
}
@@ -47,7 +47,7 @@ export function ToastContent({ type, message, button, id }: ToastContentProps):
{button && (
{
- button.action()
+ void button.action()
toast.dismiss(id)
}}
type="secondary"
@@ -84,7 +84,7 @@ export const lemonToast = {
},
warning(message: string | JSX.Element, { button, ...toastOptions }: ToastOptionsWithButton = {}): void {
posthog.capture('toast warning', {
- message: message.toString(),
+ message: String(message),
button: button?.label,
toastId: toastOptions.toastId,
})
@@ -96,7 +96,7 @@ export const lemonToast = {
},
error(message: string | JSX.Element, { button, ...toastOptions }: ToastOptionsWithButton = {}): void {
posthog.capture('toast error', {
- message: message.toString(),
+ message: String(message),
button: button?.label,
toastId: toastOptions.toastId,
})
diff --git a/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts b/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts
index b270ad2621b1e..16d849e169079 100644
--- a/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts
+++ b/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts
@@ -1,6 +1,6 @@
import { expectLogic } from 'kea-test-utils'
import { initKeaTests } from '~/test/init'
-import { inAppPromptLogic, PromptConfig, PromptSequence, PromptUserState } from './inAppPromptLogic'
+import { inAppPromptLogic, PromptConfig, PromptUserState } from './inAppPromptLogic'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { router } from 'kea-router'
import { urls } from 'scenes/urls'
@@ -289,7 +289,7 @@ describe('inAppPromptLogic', () => {
})
.toDispatchActions([
'closePrompts',
- logic.actionCreators.runSequence(configProductTours.sequences[1] as PromptSequence, 0),
+ logic.actionCreators.runSequence(configProductTours.sequences[1], 0),
inAppPromptEventCaptureLogic.actionCreators.reportPromptShown(
'tooltip',
configProductTours.sequences[1].key,
@@ -333,7 +333,7 @@ describe('inAppPromptLogic', () => {
logic.actions.nextPrompt()
})
.toDispatchActions([
- logic.actionCreators.runSequence(configProductTours.sequences[1] as PromptSequence, 1),
+ logic.actionCreators.runSequence(configProductTours.sequences[1], 1),
inAppPromptEventCaptureLogic.actionCreators.reportPromptForward(
configProductTours.sequences[1].key,
1,
@@ -359,7 +359,7 @@ describe('inAppPromptLogic', () => {
logic.actions.previousPrompt()
})
.toDispatchActions([
- logic.actionCreators.runSequence(configProductTours.sequences[1] as PromptSequence, 0),
+ logic.actionCreators.runSequence(configProductTours.sequences[1], 0),
inAppPromptEventCaptureLogic.actionCreators.reportPromptBackward(
configProductTours.sequences[1].key,
0,
diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx
index e841ec72c7323..b66cbb3358bcb 100644
--- a/frontend/src/lib/taxonomy.tsx
+++ b/frontend/src/lib/taxonomy.tsx
@@ -835,7 +835,7 @@ export function getKeyMapping(
data = { ...KEY_MAPPING[type][value.replace(/^\$initial_/, '$')] }
if (data.description) {
data.label = `Initial ${data.label}`
- data.description = `${data.description} Data from the first time this user was seen.`
+ data.description = `${String(data.description)} Data from the first time this user was seen.`
}
return data
} else if (value.startsWith('$survey_responded/')) {
diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
index be48d5618e0e5..4daea66d2c7dc 100644
--- a/frontend/src/lib/utils.tsx
+++ b/frontend/src/lib/utils.tsx
@@ -1385,7 +1385,7 @@ export function humanTzOffset(timezone?: string): string {
/** Join array of string into a list ("a, b, and c"). Uses the Oxford comma, but only if there are at least 3 items. */
export function humanList(arr: readonly string[]): string {
- return arr.length > 2 ? arr.slice(0, -1).join(', ') + ', and ' + arr.slice(-1) : arr.join(' and ')
+ return arr.length > 2 ? arr.slice(0, -1).join(', ') + ', and ' + arr.at(-1) : arr.join(' and ')
}
export function resolveWebhookService(webhookUrl: string): string {
@@ -1447,7 +1447,7 @@ export function lightenDarkenColor(hex: string, pct: number): string {
return `rgb(${[r, g, b].join(',')})`
}
-export function toString(input?: any | null): string {
+export function toString(input?: any): string {
return input?.toString() || ''
}
diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
index 2ec59bf991d2d..5ce1faefa6d13 100644
--- a/frontend/src/lib/utils/eventUsageLogic.ts
+++ b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -33,7 +33,6 @@ import type { Dayjs } from 'lib/dayjs'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { convertPropertyGroupToProperties } from 'lib/utils'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { PlatformType, Framework } from 'scenes/ingestion/types'
import { now } from 'lib/dayjs'
import {
isFilterWithDisplay,
@@ -332,7 +331,6 @@ export const eventUsageLogic = kea([
) => ({ attribute, originalLength, newLength }),
reportDashboardShareToggled: (isShared: boolean) => ({ isShared }),
reportUpgradeModalShown: (featureName: string) => ({ featureName }),
- reportIngestionLandingSeen: true,
reportTimezoneComponentViewed: (
component: 'label' | 'indicator',
project_timezone?: string,
@@ -439,27 +437,11 @@ export const eventUsageLogic = kea([
reportInsightOpenedFromRecentInsightList: true,
reportRecordingOpenedFromRecentRecordingList: true,
reportPersonOpenedFromNewlySeenPersonsList: true,
- reportIngestionSelectPlatformType: (platform: PlatformType) => ({ platform }),
- reportIngestionSelectFrameworkType: (framework: Framework) => ({ framework }),
- reportIngestionRecordingsTurnedOff: (
- session_recording_opt_in: boolean,
- capture_console_log_opt_in: boolean,
- capture_performance_opt_in: boolean
- ) => ({ session_recording_opt_in, capture_console_log_opt_in, capture_performance_opt_in }),
- reportIngestionAutocaptureToggled: (autocapture_opt_out: boolean) => ({ autocapture_opt_out }),
- reportIngestionAutocaptureExceptionsToggled: (autocapture_opt_in: boolean) => ({ autocapture_opt_in }),
- reportIngestionHelpClicked: (type: string) => ({ type }),
- reportIngestionTryWithBookmarkletClicked: true,
- reportIngestionTryWithDemoDataClicked: true,
reportIngestionContinueWithoutVerifying: true,
- reportIngestionContinueWithoutBilling: true,
- reportIngestionBillingCancelled: true,
- reportIngestionThirdPartyAboutClicked: (name: string) => ({ name }),
- reportIngestionThirdPartyConfigureClicked: (name: string) => ({ name }),
- reportIngestionThirdPartyPluginInstalled: (name: string) => ({ name }),
+ reportAutocaptureToggled: (autocapture_opt_out: boolean) => ({ autocapture_opt_out }),
+ reportAutocaptureExceptionsToggled: (autocapture_opt_in: boolean) => ({ autocapture_opt_in }),
reportFailedToCreateFeatureFlagWithCohort: (code: string, detail: string) => ({ code, detail }),
reportInviteMembersButtonClicked: true,
- reportIngestionSidebarButtonClicked: (name: string) => ({ name }),
reportDashboardLoadingTime: (loadingMilliseconds: number, dashboardId: number) => ({
loadingMilliseconds,
dashboardId,
@@ -794,9 +776,6 @@ export const eventUsageLogic = kea([
}
posthog.capture('test account filters updated', payload)
},
- reportIngestionLandingSeen: async () => {
- posthog.capture('ingestion landing seen')
- },
reportInsightFilterRemoved: async ({ index }) => {
posthog.capture('local filter removed', { index })
@@ -1049,70 +1028,17 @@ export const eventUsageLogic = kea([
reportPersonOpenedFromNewlySeenPersonsList: () => {
posthog.capture('person opened from newly seen persons list')
},
- reportIngestionSelectPlatformType: ({ platform }) => {
- posthog.capture('ingestion select platform type', {
- platform: platform,
- })
- },
- reportIngestionSelectFrameworkType: ({ framework }) => {
- posthog.capture('ingestion select framework type', {
- framework: framework,
- })
- },
- reportIngestionRecordingsTurnedOff: ({
- session_recording_opt_in,
- capture_console_log_opt_in,
- capture_performance_opt_in,
- }) => {
- posthog.capture('ingestion recordings turned off', {
- session_recording_opt_in,
- capture_console_log_opt_in,
- capture_performance_opt_in,
- })
- },
- reportIngestionAutocaptureToggled: ({ autocapture_opt_out }) => {
- posthog.capture('ingestion autocapture toggled', {
- autocapture_opt_out,
- })
- },
- reportIngestionAutocaptureExceptionsToggled: ({ autocapture_opt_in }) => {
- posthog.capture('ingestion autocapture exceptions toggled', {
- autocapture_opt_in,
- })
- },
- reportIngestionHelpClicked: ({ type }) => {
- posthog.capture('ingestion help clicked', {
- type: type,
- })
- },
- reportIngestionTryWithBookmarkletClicked: () => {
- posthog.capture('ingestion try posthog with bookmarklet clicked')
- },
- reportIngestionTryWithDemoDataClicked: () => {
- posthog.capture('ingestion try posthog with demo data clicked')
- },
reportIngestionContinueWithoutVerifying: () => {
posthog.capture('ingestion continue without verifying')
},
- reportIngestionContinueWithoutBilling: () => {
- posthog.capture('ingestion continue without adding billing details')
- },
- reportIngestionBillingCancelled: () => {
- posthog.capture('ingestion billing cancelled')
- },
- reportIngestionThirdPartyAboutClicked: ({ name }) => {
- posthog.capture('ingestion third party about clicked', {
- name: name,
- })
- },
- reportIngestionThirdPartyConfigureClicked: ({ name }) => {
- posthog.capture('ingestion third party configure clicked', {
- name: name,
+ reportAutocaptureToggled: ({ autocapture_opt_out }) => {
+ posthog.capture('autocapture toggled', {
+ autocapture_opt_out,
})
},
- reportIngestionThirdPartyPluginInstalled: ({ name }) => {
- posthog.capture('report ingestion third party plugin installed', {
- name: name,
+ reportAutocaptureExceptionsToggled: ({ autocapture_opt_in }) => {
+ posthog.capture('autocapture exceptions toggled', {
+ autocapture_opt_in,
})
},
reportFailedToCreateFeatureFlagWithCohort: ({ detail, code }) => {
@@ -1121,11 +1047,6 @@ export const eventUsageLogic = kea([
reportInviteMembersButtonClicked: () => {
posthog.capture('invite members button clicked')
},
- reportIngestionSidebarButtonClicked: ({ name }) => {
- posthog.capture('ingestion sidebar button clicked', {
- name: name,
- })
- },
reportTeamSettingChange: ({ name, value }) => {
posthog.capture(`${name} team setting updated`, {
setting: name,
diff --git a/frontend/src/models/cohortsModel.ts b/frontend/src/models/cohortsModel.ts
index 6e1d00525a766..970458bb44be9 100644
--- a/frontend/src/models/cohortsModel.ts
+++ b/frontend/src/models/cohortsModel.ts
@@ -103,8 +103,8 @@ export const cohortsModel = kea([
}
await triggerExport(exportCommand)
},
- deleteCohort: ({ cohort }) => {
- deleteWithUndo({
+ deleteCohort: async ({ cohort }) => {
+ await deleteWithUndo({
endpoint: api.cohorts.determineDeleteEndpoint(),
object: cohort,
callback: actions.loadCohorts,
diff --git a/frontend/src/models/notebooksModel.ts b/frontend/src/models/notebooksModel.ts
index 057d896c0ce41..f59f697b991d2 100644
--- a/frontend/src/models/notebooksModel.ts
+++ b/frontend/src/models/notebooksModel.ts
@@ -1,7 +1,7 @@
import { actions, BuiltLogic, connect, kea, listeners, path, reducers } from 'kea'
import { loaders } from 'kea-loaders'
-import { DashboardType, NotebookListItemType, NotebookNodeType, NotebookTarget, NotebookType } from '~/types'
+import { DashboardType, NotebookListItemType, NotebookNodeType, NotebookTarget } from '~/types'
import api from 'lib/api'
import posthog from 'posthog-js'
@@ -81,7 +81,7 @@ export const notebooksModel = kea([
reducers({
scratchpadNotebook: [
- SCRATCHPAD_NOTEBOOK as NotebookListItemType,
+ SCRATCHPAD_NOTEBOOK,
{
setScratchpadNotebook: (_, { notebook }) => notebook,
},
@@ -106,7 +106,7 @@ export const notebooksModel = kea([
content: defaultNotebookContent(title, content),
})
- openNotebook(notebook.short_id, location, 'end', (logic) => {
+ await openNotebook(notebook.short_id, location, 'end', (logic) => {
onCreate?.(logic)
})
@@ -118,7 +118,7 @@ export const notebooksModel = kea([
},
deleteNotebook: async ({ shortId, title }) => {
- deleteWithUndo({
+ await deleteWithUndo({
endpoint: `projects/${values.currentTeamId}/notebooks`,
object: { name: title || shortId, id: shortId },
callback: actions.loadNotebooks,
@@ -138,14 +138,14 @@ export const notebooksModel = kea([
},
],
notebookTemplates: [
- LOCAL_NOTEBOOK_TEMPLATES as NotebookType[],
+ LOCAL_NOTEBOOK_TEMPLATES,
{
// In the future we can load these from remote
},
],
})),
- listeners(({ actions }) => ({
+ listeners(({ asyncActions }) => ({
createNotebookFromDashboard: async ({ dashboard }) => {
const queries = dashboard.tiles.reduce((acc, tile) => {
if (!tile.insight) {
@@ -186,7 +186,7 @@ export const notebooksModel = kea([
},
}))
- await actions.createNotebook(NotebookTarget.Scene, dashboard.name + ' (copied)', resources)
+ await asyncActions.createNotebook(NotebookTarget.Scene, dashboard.name + ' (copied)', resources)
},
})),
])
diff --git a/frontend/src/queries/nodes/DataNode/DateRange.tsx b/frontend/src/queries/nodes/DataNode/DateRange.tsx
index ce48a8ec9d892..f28699cb34146 100644
--- a/frontend/src/queries/nodes/DataNode/DateRange.tsx
+++ b/frontend/src/queries/nodes/DataNode/DateRange.tsx
@@ -10,7 +10,6 @@ export function DateRange({ query, setQuery }: DateRangeProps): JSX.Element | nu
if (isEventsQuery(query)) {
return (
{
diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
index a83d0398a49d4..94c2651343b31 100644
--- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
+++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
@@ -477,7 +477,7 @@ export const dataNodeLogic = kea([
abortQuery: async ({ queryId }) => {
try {
const { currentTeamId } = values
- await api.create(`api/projects/${currentTeamId}/insights/cancel`, { client_query_id: queryId })
+ await api.delete(`api/projects/${currentTeamId}/query/${queryId}/`)
} catch (e) {
console.warn('Failed cancelling query', e)
}
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
index 8154d03fd04aa..a3942c2c5c459 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -470,7 +470,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
'::'
) /* Bust the LemonTable cache when columns change */
}
- dataSource={(dataTableRows ?? []) as DataTableRow[]}
+ dataSource={dataTableRows ?? []}
rowKey={({ result }: DataTableRow, rowIndex) => {
if (result) {
if (
diff --git a/frontend/src/queries/nodes/DataTable/DataTableExport.tsx b/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
index 4970f0fd8e429..9c9cead143b70 100644
--- a/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
@@ -17,10 +17,11 @@ import { useValues } from 'kea'
import { LemonDivider, lemonToast } from '@posthog/lemon-ui'
import { asDisplay } from 'scenes/persons/person-utils'
import { urls } from 'scenes/urls'
+import { copyToClipboard } from 'lib/utils'
const EXPORT_MAX_LIMIT = 10000
-function startDownload(query: DataTableNode, onlySelectedColumns: boolean): void {
+async function startDownload(query: DataTableNode, onlySelectedColumns: boolean): Promise {
const exportContext = isPersonsNode(query.source)
? { path: getPersonsEndpoint(query.source) }
: { source: query.source }
@@ -45,7 +46,7 @@ function startDownload(query: DataTableNode, onlySelectedColumns: boolean): void
)
}
}
- triggerExport({
+ await triggerExport({
export_format: ExporterFormat.CSV,
export_context: exportContext,
})
@@ -156,9 +157,7 @@ function copyTableToCsv(dataTableRows: DataTableRow[], columns: string[], query:
const csv = Papa.unparse(tableData)
- navigator.clipboard.writeText(csv).then(() => {
- lemonToast.success('Table copied to clipboard!')
- })
+ void copyToClipboard(csv, 'table')
} catch {
lemonToast.error('Copy failed!')
}
@@ -170,9 +169,7 @@ function copyTableToJson(dataTableRows: DataTableRow[], columns: string[], query
const json = JSON.stringify(tableData, null, 4)
- navigator.clipboard.writeText(json).then(() => {
- lemonToast.success('Table copied to clipboard!')
- })
+ void copyToClipboard(json, 'table')
} catch {
lemonToast.error('Copy failed!')
}
@@ -204,7 +201,7 @@ export function DataTableExport({ query }: DataTableExportProps): JSX.Element |
key={1}
placement={'topRight'}
onConfirm={() => {
- startDownload(query, true)
+ void startDownload(query, true)
}}
actor={isPersonsNode(query.source) ? 'persons' : 'events'}
limit={EXPORT_MAX_LIMIT}
@@ -220,7 +217,7 @@ export function DataTableExport({ query }: DataTableExportProps): JSX.Element |
startDownload(query, false)}
+ onConfirm={() => void startDownload(query, false)}
actor={isPersonsNode(query.source) ? 'persons' : 'events'}
limit={EXPORT_MAX_LIMIT}
>
diff --git a/frontend/src/queries/nodes/DataTable/EventRowActions.tsx b/frontend/src/queries/nodes/DataTable/EventRowActions.tsx
index 0ebb345ac4c6a..4b74e14e09d6a 100644
--- a/frontend/src/queries/nodes/DataTable/EventRowActions.tsx
+++ b/frontend/src/queries/nodes/DataTable/EventRowActions.tsx
@@ -27,7 +27,7 @@ export function EventRowActions({ event }: EventActionProps): JSX.Element {
- createActionFromEvent(
+ void createActionFromEvent(
getCurrentTeamId(),
event,
0,
@@ -46,8 +46,8 @@ export function EventRowActions({ event }: EventActionProps): JSX.Element {
fullWidth
sideIcon={([
// Add a label between results if the day changed
if (orderKey === 'timestamp' && orderKeyIndex !== -1) {
- let lastResult: any | null = null
+ let lastResult: any = null
const newResults: DataTableRow[] = []
for (const result of results) {
if (
diff --git a/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts b/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts
index c77502435e944..31d49a241a5e5 100644
--- a/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts
+++ b/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts
@@ -83,7 +83,7 @@ export const hogQLQueryEditorLogic = kea([
],
aiAvailable: [() => [preflightLogic.selectors.preflight], (preflight) => preflight?.openai_available],
}),
- listeners(({ actions, props, values }) => ({
+ listeners(({ actions, asyncActions, props, values }) => ({
saveQuery: () => {
const query = values.queryInput
// TODO: Is below line necessary if the only way for queryInput to change is already through setQueryInput?
@@ -179,7 +179,7 @@ export const hogQLQueryEditorLogic = kea([
kind: NodeKind.HogQLQuery,
query: values.queryInput,
}
- await actions.createDataWarehouseSavedQuery({ name, query })
+ await asyncActions.createDataWarehouseSavedQuery({ name, query })
},
})),
])
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/InsightVizDisplay.tsx b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
index 5e365c4fcc1eb..5c726071e38a5 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
@@ -74,6 +74,7 @@ export function InsightVizDisplay({
insightDataLoading,
erroredQueryId,
timedOutQueryId,
+ vizSpecificOptions,
} = useValues(insightVizDataLogic(insightProps))
const { exportContext } = useValues(insightDataLogic(insightProps))
@@ -131,7 +132,12 @@ export function InsightVizDisplay({
case InsightType.FUNNELS:
return (
query: N,
@@ -91,6 +94,43 @@ export function queryExportContext(
throw new Error(`Unsupported query: ${query.kind}`)
}
+async function executeQuery(
+ queryNode: N,
+ methodOptions?: ApiMethodOptions,
+ refresh?: boolean,
+ queryId?: string
+): Promise> {
+ const queryAsyncEnabled = Boolean(featureFlagLogic.findMounted()?.values.featureFlags?.[FEATURE_FLAGS.QUERY_ASYNC])
+ const excludedKinds = ['HogQLMetadata']
+ const queryAsync = queryAsyncEnabled && !excludedKinds.includes(queryNode.kind)
+ const response = await api.query(queryNode, methodOptions, queryId, refresh, queryAsync)
+
+ if (!queryAsync || !response.query_async) {
+ return response
+ }
+
+ const pollStart = performance.now()
+ let currentDelay = 300 // start low, because all queries will take at minimum this
+
+ while (performance.now() - pollStart < QUERY_ASYNC_TOTAL_POLL_SECONDS * 1000) {
+ await delay(currentDelay)
+ currentDelay = Math.min(currentDelay * 2, QUERY_ASYNC_MAX_INTERVAL_SECONDS * 1000)
+
+ if (methodOptions?.signal?.aborted) {
+ const customAbortError = new Error('Query aborted')
+ customAbortError.name = 'AbortError'
+ throw customAbortError
+ }
+
+ const statusResponse = await api.queryStatus.get(response.id)
+
+ if (statusResponse.complete || statusResponse.error) {
+ return statusResponse.results
+ }
+ }
+ throw new Error('Query timed out')
+}
+
// Return data for a given query
export async function query(
queryNode: N,
@@ -216,7 +256,7 @@ export async function query(
response = await fetchLegacyInsights()
}
} else {
- response = await api.query(queryNode, methodOptions, queryId, refresh)
+ response = await executeQuery(queryNode, methodOptions, refresh, queryId)
if (isHogQLQuery(queryNode) && response && typeof response === 'object') {
logParams.clickhouse_sql = (response as HogQLQueryResponse)?.clickhouse
}
diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json
index d1eed070437ff..d7b3b2ca0da1d 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"
@@ -2410,6 +2413,51 @@
}
]
},
+ "QueryStatus": {
+ "additionalProperties": false,
+ "properties": {
+ "complete": {
+ "default": false,
+ "type": "boolean"
+ },
+ "end_time": {
+ "format": "date-time",
+ "type": "string"
+ },
+ "error": {
+ "default": false,
+ "type": "boolean"
+ },
+ "error_message": {
+ "default": "",
+ "type": "string"
+ },
+ "expiration_time": {
+ "format": "date-time",
+ "type": "string"
+ },
+ "id": {
+ "type": "string"
+ },
+ "query_async": {
+ "default": true,
+ "type": "boolean"
+ },
+ "results": {},
+ "start_time": {
+ "format": "date-time",
+ "type": "string"
+ },
+ "task_id": {
+ "type": "string"
+ },
+ "team_id": {
+ "type": "integer"
+ }
+ },
+ "required": ["id", "query_async", "team_id", "error", "complete", "error_message"],
+ "type": "object"
+ },
"QueryTiming": {
"additionalProperties": false,
"properties": {
@@ -2644,6 +2692,9 @@
},
"suppressSessionAnalysisWarning": {
"type": "boolean"
+ },
+ "vizSpecificOptions": {
+ "$ref": "#/definitions/VizSpecificOptions"
}
},
"required": ["kind", "shortId"],
@@ -2757,10 +2808,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 +3136,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..5e0f19452d438 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
@@ -526,11 +542,33 @@ export interface QueryResponse {
next_allowed_client_refresh?: string
}
+export type QueryStatus = {
+ id: string
+ /** @default true */
+ query_async: boolean
+ /** @asType integer */
+ team_id: number
+ /** @default false */
+ error: boolean
+ /** @default false */
+ complete: boolean
+ /** @default "" */
+ error_message: string
+ results?: any
+ /** @format date-time */
+ start_time?: string
+ /** @format date-time */
+ end_time?: string
+ /** @format date-time */
+ expiration_time?: string
+ task_id?: string
+}
+
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/App.tsx b/frontend/src/scenes/App.tsx
index bfeb6836c9ef0..225efc7dffeaa 100644
--- a/frontend/src/scenes/App.tsx
+++ b/frontend/src/scenes/App.tsx
@@ -165,9 +165,7 @@ function AppScene(): JSX.Element | null {
return (
<>
-
- {wrappedSceneElement}
-
+ {wrappedSceneElement}
{toastContainer}
([
null as PreflightStatus | null,
{
loadPreflight: async () => {
- const response = (await api.get('_preflight/')) as PreflightStatus
+ const response = await api.get('_preflight/')
return response
},
},
diff --git a/frontend/src/scenes/actions/ActionStep.tsx b/frontend/src/scenes/actions/ActionStep.tsx
index 9f41316c52ab1..c51064e66b171 100644
--- a/frontend/src/scenes/actions/ActionStep.tsx
+++ b/frontend/src/scenes/actions/ActionStep.tsx
@@ -1,9 +1,8 @@
import { LemonEventName } from './EventName'
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
import { URL_MATCHING_HINTS } from 'scenes/actions/hints'
-import { Radio, RadioChangeEvent } from 'antd'
import { ActionStepType, StringMatching } from '~/types'
-import { LemonButton, LemonInput, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonInput, LemonSegmentedButton, Link } from '@posthog/lemon-ui'
import { IconClose, IconOpenInApp } from 'lib/lemon-ui/icons'
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
@@ -166,9 +165,10 @@ function Option({
return (
([
(s) => [s.earlyAccessFeature],
(earlyAccessFeature: EarlyAccessFeatureType): Breadcrumb[] => [
{
+ key: Scene.EarlyAccessFeatures,
name: 'Early Access Management',
path: urls.earlyAccessFeatures(),
},
- ...(earlyAccessFeature?.name ? [{ name: earlyAccessFeature.name }] : []),
+ {
+ key: earlyAccessFeature.id || 'new',
+ name: earlyAccessFeature.name,
+ },
],
],
}),
@@ -170,9 +175,9 @@ export const earlyAccessFeatureLogic = kea([
}
},
})),
- afterMount(async ({ props, actions }) => {
+ afterMount(({ props, actions }) => {
if (props.id !== 'new') {
- await actions.loadEarlyAccessFeature()
+ actions.loadEarlyAccessFeature()
}
}),
])
diff --git a/frontend/src/scenes/early-access-features/earlyAccessFeaturesLogic.ts b/frontend/src/scenes/early-access-features/earlyAccessFeaturesLogic.ts
index 707a5df337acc..b7032217494b4 100644
--- a/frontend/src/scenes/early-access-features/earlyAccessFeaturesLogic.ts
+++ b/frontend/src/scenes/early-access-features/earlyAccessFeaturesLogic.ts
@@ -5,6 +5,7 @@ import { Breadcrumb, EarlyAccessFeatureType } from '~/types'
import type { earlyAccessFeaturesLogicType } from './earlyAccessFeaturesLogicType'
import { urls } from 'scenes/urls'
+import { Scene } from 'scenes/sceneTypes'
export const earlyAccessFeaturesLogic = kea([
path(['scenes', 'features', 'featuresLogic']),
@@ -22,13 +23,14 @@ export const earlyAccessFeaturesLogic = kea([
() => [],
(): Breadcrumb[] => [
{
- name: 'Early Access Management',
+ key: Scene.EarlyAccessFeatures,
+ name: 'Early access features',
path: urls.earlyAccessFeatures(),
},
],
],
}),
- afterMount(async ({ actions }) => {
- await actions.loadEarlyAccessFeatures()
+ afterMount(({ actions }) => {
+ actions.loadEarlyAccessFeatures()
}),
])
diff --git a/frontend/src/scenes/events/Events.tsx b/frontend/src/scenes/events/Events.tsx
index 164363a7b35cc..aa30ee553c381 100644
--- a/frontend/src/scenes/events/Events.tsx
+++ b/frontend/src/scenes/events/Events.tsx
@@ -14,7 +14,7 @@ export const scene: SceneExport = {
export function Events(): JSX.Element {
return (
<>
- ([
(s) => [s.experiment, s.experimentId],
(experiment, experimentId): Breadcrumb[] => [
{
+ key: Scene.Experiments,
name: 'Experiments',
path: urls.experiments(),
},
{
+ key: experimentId,
name: experiment?.name || 'New',
path: urls.experiment(experimentId || 'new'),
},
diff --git a/frontend/src/scenes/experiments/secondaryMetricsLogic.ts b/frontend/src/scenes/experiments/secondaryMetricsLogic.ts
index 9687b9e3b7627..a746107873357 100644
--- a/frontend/src/scenes/experiments/secondaryMetricsLogic.ts
+++ b/frontend/src/scenes/experiments/secondaryMetricsLogic.ts
@@ -121,7 +121,7 @@ export const secondaryMetricsLogic = kea([
})),
forms(({ props }) => ({
secondaryMetricModal: {
- defaults: defaultFormValuesGenerator(props.defaultAggregationType) as SecondaryMetricForm,
+ defaults: defaultFormValuesGenerator(props.defaultAggregationType),
errors: () => ({}),
submit: async () => {
// We don't use the form submit anymore
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.scss b/frontend/src/scenes/feature-flags/FeatureFlag.scss
index 730181e4ad083..0b72506c172cb 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.scss
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.scss
@@ -1,4 +1,4 @@
-.variant-form-list {
+.VariantFormList {
font-size: 13px;
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -19,6 +19,10 @@
align-items: center;
}
}
+
+ .VariantFormList__row {
+ grid-template-columns: repeat(24, minmax(0, 1fr));
+ }
}
.feature-flag-property-display {
@@ -61,6 +65,6 @@
.FeatureConditionCard {
.FeatureConditionCard--border--highlight {
- border-color: var(--primary);
+ border-color: var(--primary-3000);
}
}
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index 1118c87a2b31d..9944499e472fa 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import { Form, Group } from 'kea-forms'
-import { Row, Col, Radio, Popconfirm, Skeleton, Card } from 'antd'
+import { Radio, Popconfirm, Skeleton, Card } from 'antd'
import { useActions, useValues } from 'kea'
import { alphabet, capitalizeFirstLetter } from 'lib/utils'
import { featureFlagLogic } from './featureFlagLogic'
@@ -78,7 +78,7 @@ export const scene: SceneExport = {
function focusVariantKeyField(index: number): void {
setTimeout(
- () => document.querySelector(`.variant-form-list input[data-key-index="${index}"]`)?.focus(),
+ () => document.querySelector(`.VariantFormList input[data-key-index="${index}"]`)?.focus(),
50
)
}
@@ -332,7 +332,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
tagsAvailable={tags.filter(
(tag) => !featureFlag.tags?.includes(tag)
)}
- className="insight-metadata-tags"
+ className="mt-2"
/>
)
}}
@@ -510,14 +510,14 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
tagsAvailable={tags.filter(
(tag) => !featureFlag.tags?.includes(tag)
)}
- className="insight-metadata-tags"
+ className="mt-2"
/>
) : featureFlag.tags.length ? (
-
- {label} {extra_options}
-
+ void
}): JSX.Element {
- const handleChange = (e: RadioChangeEvent): void => {
- const type = e.target.value
+ const handleChange = (type: string): void => {
if (type === '$autocapture') {
sendStep({ ...step, event: '$autocapture' })
} else if (type === 'event') {
@@ -301,19 +300,30 @@ function TypeSwitcher({
return (
- matches exactly
- matches regex
- contains
-
+ ([
})),
listeners(({ values, actions }) => ({
- deleteAction: () => {
- deleteWithUndo({
+ deleteAction: async () => {
+ await deleteWithUndo({
endpoint: api.actions.determineDeleteEndpoint(),
object: values.action,
callback: () => {
diff --git a/frontend/src/scenes/actions/actionLogic.ts b/frontend/src/scenes/actions/actionLogic.ts
index e3781d37902f0..6b47df87c05a7 100644
--- a/frontend/src/scenes/actions/actionLogic.ts
+++ b/frontend/src/scenes/actions/actionLogic.ts
@@ -4,6 +4,8 @@ import api from 'lib/api'
import type { actionLogicType } from './actionLogicType'
import { ActionType, Breadcrumb } from '~/types'
import { urls } from 'scenes/urls'
+import { Scene } from 'scenes/sceneTypes'
+import { DataManagementTab } from 'scenes/data-management/DataManagementScene'
export interface ActionLogicProps {
id?: ActionType['id']
@@ -50,14 +52,17 @@ export const actionLogic = kea([
(s) => [s.action],
(action): Breadcrumb[] => [
{
+ key: Scene.DataManagement,
name: `Data Management`,
path: urls.eventDefinitions(),
},
{
+ key: DataManagementTab.Actions,
name: 'Actions',
path: urls.actions(),
},
{
+ key: action?.id || 'new',
name: action?.name || 'Unnamed',
path: action ? urls.action(action.id) : undefined,
},
diff --git a/frontend/src/scenes/actions/actionsLogic.ts b/frontend/src/scenes/actions/actionsLogic.ts
index bd4d667ae8450..f150c85111a64 100644
--- a/frontend/src/scenes/actions/actionsLogic.ts
+++ b/frontend/src/scenes/actions/actionsLogic.ts
@@ -9,6 +9,10 @@ import { userLogic } from 'scenes/userLogic'
import { subscriptions } from 'kea-subscriptions'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
+import { Scene } from 'scenes/sceneTypes'
+import { DataManagementTab } from 'scenes/data-management/DataManagementScene'
+
+export type ActionsFilterType = 'all' | 'me'
export const actionsFuse = new Fuse([], {
keys: [{ name: 'name', weight: 2 }, 'description', 'tags'],
@@ -30,15 +34,15 @@ export const actionsLogic = kea([
],
})),
actions({
- setFilterByMe: (filterByMe: boolean) => ({ filterByMe }),
+ setFilterType: (filterType: ActionsFilterType) => ({ filterType }),
setSearchTerm: (searchTerm: string) => ({ searchTerm }),
}),
reducers({
- filterByMe: [
- false,
+ filterType: [
+ 'all' as ActionsFilterType,
{ persist: true },
{
- setFilterByMe: (_, { filterByMe }) => filterByMe,
+ setFilterType: (_, { filterType }) => filterType,
},
],
searchTerm: [
@@ -50,13 +54,13 @@ export const actionsLogic = kea([
}),
selectors({
actionsFiltered: [
- (s) => [s.actions, s.filterByMe, s.searchTerm, s.user],
- (actions, filterByMe, searchTerm, user) => {
+ (s) => [s.actions, s.filterType, s.searchTerm, s.user],
+ (actions, filterType, searchTerm, user) => {
let data = actions
if (searchTerm) {
data = actionsFuse.search(searchTerm).map((result) => result.item)
}
- if (filterByMe) {
+ if (filterType === 'me') {
data = data.filter((item) => item.created_by?.uuid === user?.uuid)
}
return data
@@ -66,10 +70,12 @@ export const actionsLogic = kea([
() => [],
(): Breadcrumb[] => [
{
- name: `Data Management`,
+ key: Scene.DataManagement,
+ name: `Data management`,
path: urls.eventDefinitions(),
},
{
+ key: DataManagementTab.Actions,
name: 'Actions',
path: urls.actions(),
},
diff --git a/frontend/src/scenes/appContextLogic.ts b/frontend/src/scenes/appContextLogic.ts
index 30a005f3c3808..4386021d2e927 100644
--- a/frontend/src/scenes/appContextLogic.ts
+++ b/frontend/src/scenes/appContextLogic.ts
@@ -27,7 +27,7 @@ export const appContextLogic = kea([
const preloadedUser = appContext?.current_user
if (appContext && preloadedUser) {
- api.get('api/users/@me/').then((remoteUser: UserType) => {
+ void api.get('api/users/@me/').then((remoteUser: UserType) => {
if (remoteUser.uuid !== preloadedUser.uuid) {
console.error(`Preloaded user ${preloadedUser.uuid} does not match remote user ${remoteUser.uuid}`)
Sentry.captureException(
diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts
index 38bf3e1dedd7e..ad997bb2635a3 100644
--- a/frontend/src/scenes/appScenes.ts
+++ b/frontend/src/scenes/appScenes.ts
@@ -23,6 +23,7 @@ export const appScenes: Record any> = {
[Scene.PersonsManagement]: () => import('./persons-management/PersonsManagementScene'),
[Scene.Person]: () => import('./persons/PersonScene'),
[Scene.Pipeline]: () => import('./pipeline/Pipeline'),
+ [Scene.PipelineApp]: () => import('./pipeline/PipelineApp'),
[Scene.Group]: () => import('./groups/Group'),
[Scene.Action]: () => import('./actions/Action'),
[Scene.Experiments]: () => import('./experiments/Experiments'),
@@ -52,7 +53,6 @@ export const appScenes: Record any> = {
[Scene.PreflightCheck]: () => import('./PreflightCheck/PreflightCheck'),
[Scene.Signup]: () => import('./authentication/signup/SignupContainer'),
[Scene.InviteSignup]: () => import('./authentication/InviteSignup'),
- [Scene.Ingestion]: () => import('./ingestion/IngestionWizard'),
[Scene.Billing]: () => import('./billing/Billing'),
[Scene.Apps]: () => import('./plugins/AppsScene'),
[Scene.FrontendAppScene]: () => import('./apps/FrontendAppScene'),
diff --git a/frontend/src/scenes/apps/AppMetricsScene.tsx b/frontend/src/scenes/apps/AppMetricsScene.tsx
index d79c0d160d51e..74b847872f39e 100644
--- a/frontend/src/scenes/apps/AppMetricsScene.tsx
+++ b/frontend/src/scenes/apps/AppMetricsScene.tsx
@@ -80,6 +80,11 @@ export function AppMetrics(): JSX.Element {
label: <>onEvent metrics,
content: setDateFrom(newValue as string)}
+ onChange={(newValue) => setDateFrom(newValue)}
options={[
{ label: 'Last 30 days', value: '-30d' },
{ label: 'Last 7 days', value: '-7d' },
diff --git a/frontend/src/scenes/apps/appMetricsSceneLogic.ts b/frontend/src/scenes/apps/appMetricsSceneLogic.ts
index 9122d93b48db0..1f68e22236849 100644
--- a/frontend/src/scenes/apps/appMetricsSceneLogic.ts
+++ b/frontend/src/scenes/apps/appMetricsSceneLogic.ts
@@ -12,6 +12,7 @@ import { HISTORICAL_EXPORT_JOB_NAME_V2 } from 'scenes/plugins/edit/interface-job
import { interfaceJobsLogic, InterfaceJobsProps } from '../plugins/edit/interface-jobs/interfaceJobsLogic'
import { dayjs } from 'lib/dayjs'
import { router } from 'kea-router'
+import { Scene } from 'scenes/sceneTypes'
export interface AppMetricsLogicProps {
/** Used as the logic's key */
@@ -28,6 +29,7 @@ export enum AppMetricsTab {
Logs = 'logs',
ProcessEvent = 'processEvent',
OnEvent = 'onEvent',
+ ComposeWebhook = 'composeWebhook',
ExportEvents = 'exportEvents',
ScheduledTask = 'scheduledTask',
HistoricalExports = 'historical_exports',
@@ -36,6 +38,7 @@ export enum AppMetricsTab {
export const TabsWithMetrics = [
AppMetricsTab.ProcessEvent,
AppMetricsTab.OnEvent,
+ AppMetricsTab.ComposeWebhook,
AppMetricsTab.ExportEvents,
AppMetricsTab.ScheduledTask,
AppMetricsTab.HistoricalExports,
@@ -95,6 +98,7 @@ const DEFAULT_DATE_FROM = '-30d'
const INITIAL_TABS: Array = [
AppMetricsTab.ProcessEvent,
AppMetricsTab.OnEvent,
+ AppMetricsTab.ComposeWebhook,
AppMetricsTab.ExportEvents,
AppMetricsTab.ScheduledTask,
]
@@ -194,10 +198,12 @@ export const appMetricsSceneLogic = kea([
(s, p) => [s.pluginConfig, p.pluginConfigId],
(pluginConfig, pluginConfigId: number): Breadcrumb[] => [
{
+ key: Scene.Apps,
name: 'Apps',
path: urls.projectApps(),
},
{
+ key: pluginConfigId,
name: pluginConfig?.plugin_info?.name,
path: urls.appMetrics(pluginConfigId),
},
diff --git a/frontend/src/scenes/apps/constants.tsx b/frontend/src/scenes/apps/constants.tsx
index 4d89a8202eae1..9870936b5cfc5 100644
--- a/frontend/src/scenes/apps/constants.tsx
+++ b/frontend/src/scenes/apps/constants.tsx
@@ -47,6 +47,26 @@ export const DescriptionColumns: Record = {
),
},
+ [AppMetricsTab.ComposeWebhook]: {
+ successes: 'Events processed',
+ successes_tooltip: (
+ <>
+ These events were successfully processed by the composeWebhook app method on the first try.
+
+ ),
+ successes_on_retry: 'Events processed on retry',
+ successes_on_retry_tooltip: (
+ <>
+ These events were successfully processed by the composeWebhook app method after being retried.
+
+ ),
+ failures: 'Failed events',
+ failures_tooltip: (
+ <>
+ These events had errors when being processed by the composeWebhook app method.
+
+ ),
+ },
[AppMetricsTab.ExportEvents]: {
successes: 'Events delivered',
successes_tooltip: (
diff --git a/frontend/src/scenes/authentication/inviteSignupLogic.ts b/frontend/src/scenes/authentication/inviteSignupLogic.ts
index 7632e74ba1373..23f70644c1ef6 100644
--- a/frontend/src/scenes/authentication/inviteSignupLogic.ts
+++ b/frontend/src/scenes/authentication/inviteSignupLogic.ts
@@ -88,7 +88,7 @@ export const inviteSignupLogic = kea([
first_name: !first_name ? 'Please enter your name' : undefined,
}),
submit: async (payload, breakpoint) => {
- await breakpoint()
+ breakpoint()
if (!values.invite) {
return
diff --git a/frontend/src/scenes/authentication/login2FALogic.ts b/frontend/src/scenes/authentication/login2FALogic.ts
index ed76c57f79e76..796dfc764f764 100644
--- a/frontend/src/scenes/authentication/login2FALogic.ts
+++ b/frontend/src/scenes/authentication/login2FALogic.ts
@@ -66,7 +66,7 @@ export const login2FALogic = kea([
: null,
}),
submit: async ({ token }, breakpoint) => {
- await breakpoint()
+ breakpoint()
try {
return await api.create('api/login/token', { token })
} catch (e) {
diff --git a/frontend/src/scenes/authentication/loginLogic.ts b/frontend/src/scenes/authentication/loginLogic.ts
index 1b574472e2afb..ca159812bc771 100644
--- a/frontend/src/scenes/authentication/loginLogic.ts
+++ b/frontend/src/scenes/authentication/loginLogic.ts
@@ -82,7 +82,7 @@ export const loginLogic = kea([
return { status: 'pending' }
}
- await breakpoint()
+ breakpoint()
const response = await api.create('api/login/precheck', { email })
return { status: 'completed', ...response }
},
@@ -101,7 +101,7 @@ export const loginLogic = kea([
: undefined,
}),
submit: async ({ email, password }, breakpoint) => {
- await breakpoint()
+ breakpoint()
try {
return await api.create('api/login', { email, password })
} catch (e) {
diff --git a/frontend/src/scenes/authentication/passwordResetLogic.ts b/frontend/src/scenes/authentication/passwordResetLogic.ts
index b9df684b9cfa9..b4835fcce495e 100644
--- a/frontend/src/scenes/authentication/passwordResetLogic.ts
+++ b/frontend/src/scenes/authentication/passwordResetLogic.ts
@@ -63,7 +63,7 @@ export const passwordResetLogic = kea([
email: !email ? 'Please enter your email to continue' : undefined,
}),
submit: async ({ email }, breakpoint) => {
- await breakpoint()
+ breakpoint()
try {
await api.create('api/reset/', { email })
diff --git a/frontend/src/scenes/authentication/setup2FALogic.ts b/frontend/src/scenes/authentication/setup2FALogic.ts
index 22d6acb5b0ec5..b76de829f2cdb 100644
--- a/frontend/src/scenes/authentication/setup2FALogic.ts
+++ b/frontend/src/scenes/authentication/setup2FALogic.ts
@@ -42,7 +42,7 @@ export const setup2FALogic = kea([
{},
{
setup: async (_, breakpoint) => {
- await breakpoint()
+ breakpoint()
await api.get('api/users/@me/start_2fa_setup/')
return { status: 'completed' }
},
@@ -56,7 +56,7 @@ export const setup2FALogic = kea([
token: !token ? 'Please enter a token to continue' : undefined,
}),
submit: async ({ token }, breakpoint) => {
- await breakpoint()
+ breakpoint()
try {
return await api.create('api/users/@me/validate_2fa/', { token })
} catch (e) {
diff --git a/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts b/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
index a7a6b798d82d7..3806235fe9939 100644
--- a/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
+++ b/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
@@ -87,7 +87,7 @@ export const signupLogic = kea([
organization_name: !organization_name ? 'Please enter your organization name' : undefined,
}),
submit: async (payload, breakpoint) => {
- await breakpoint()
+ breakpoint()
try {
const res = await api.create('api/signup/', { ...values.signupPanel1, ...payload })
location.href = res.redirect_url || '/'
diff --git a/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx b/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx
index 7f5a66fd4798d..3f6dfcf661597 100644
--- a/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx
@@ -19,7 +19,7 @@ export function BatchExportsEditScene(): JSX.Element {
return (
<>
- ([
(s) => [s.batchExportConfig, s.isNew],
(config, isNew): Breadcrumb[] => [
{
+ key: Scene.BatchExports,
name: 'Batch Exports',
path: urls.batchExports(),
},
...(isNew
? [
{
+ key: 'new',
name: 'New',
},
]
: [
{
- name: config?.name ?? 'Loading',
+ key: config?.id ?? 'loading',
+ name: config?.name,
path: config?.id ? urls.batchExport(config.id) : undefined,
},
-
{
+ key: 'edit',
name: 'Edit',
},
]),
diff --git a/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts b/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts
index b944ad32f546a..9d9825dea2865 100644
--- a/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts
+++ b/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts
@@ -8,6 +8,7 @@ import { batchExportLogic } from './batchExportLogic'
import { BatchExportsEditLogicProps } from './batchExportEditLogic'
import type { batchExportsEditSceneLogicType } from './batchExportEditSceneLogicType'
+import { Scene } from 'scenes/sceneTypes'
export const batchExportsEditSceneLogic = kea([
props({} as BatchExportsEditLogicProps),
@@ -23,22 +24,25 @@ export const batchExportsEditSceneLogic = kea([
(s) => [s.batchExportConfig, s.id],
(config, id): Breadcrumb[] => [
{
+ key: Scene.BatchExports,
name: 'Batch Exports',
path: urls.batchExports(),
},
...(id === 'new'
? [
{
+ key: 'new',
name: 'New',
},
]
: [
{
- name: config?.name ?? 'Loading',
+ key: config?.id || 'loading',
+ name: config?.name,
path: config?.id ? urls.batchExport(config.id) : undefined,
},
-
{
+ key: 'edit',
name: 'Edit',
},
]),
diff --git a/frontend/src/scenes/batch_exports/batchExportLogic.ts b/frontend/src/scenes/batch_exports/batchExportLogic.ts
index 66cf9de3e2bfa..6c0c5ca8fcec1 100644
--- a/frontend/src/scenes/batch_exports/batchExportLogic.ts
+++ b/frontend/src/scenes/batch_exports/batchExportLogic.ts
@@ -11,6 +11,7 @@ import { dayjs, Dayjs } from 'lib/dayjs'
import { urls } from 'scenes/urls'
import type { batchExportLogicType } from './batchExportLogicType'
import { router } from 'kea-router'
+import { Scene } from 'scenes/sceneTypes'
export type BatchExportLogicProps = {
id: string
@@ -228,11 +229,13 @@ export const batchExportLogic = kea([
(s) => [s.batchExportConfig],
(config): Breadcrumb[] => [
{
+ key: Scene.BatchExports,
name: 'Batch Exports',
path: urls.batchExports(),
},
{
- name: config?.name ?? 'Loading',
+ key: config?.id || 'loading',
+ name: config?.name,
},
],
],
diff --git a/frontend/src/scenes/batch_exports/utils.ts b/frontend/src/scenes/batch_exports/utils.ts
index 16ebf9d3176ef..56c07e26a7ccf 100644
--- a/frontend/src/scenes/batch_exports/utils.ts
+++ b/frontend/src/scenes/batch_exports/utils.ts
@@ -25,6 +25,10 @@ export function humanizeDestination(destination: BatchExportDestination): string
return `postgresql://${destination.config.user}:***@${destination.config.host}:${destination.config.port}/${destination.config.database}`
}
+ if (destination.type === 'Redshift') {
+ return `redshift://${destination.config.user}:***@${destination.config.host}:${destination.config.port}/${destination.config.database}`
+ }
+
if (destination.type === 'BigQuery') {
return `bigquery:${destination.config.project_id}:${destination.config.dataset_id}:${destination.config.table_id}`
}
diff --git a/frontend/src/scenes/billing/PlanTable.tsx b/frontend/src/scenes/billing/PlanTable.tsx
index d83611f0609f6..d406171b954e9 100644
--- a/frontend/src/scenes/billing/PlanTable.tsx
+++ b/frontend/src/scenes/billing/PlanTable.tsx
@@ -201,7 +201,9 @@ export function PlanTable({ redirectPath }: { redirectPath: string }): JSX.Eleme
{plans?.map((plan) => (
- {getProductTiers(plan, product.type)}
+
+ {getProductTiers(plan, product.type)}
+
))}
))
diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts
index 4e694d0d115b2..60aa5bf9dc27b 100644
--- a/frontend/src/scenes/billing/billingLogic.ts
+++ b/frontend/src/scenes/billing/billingLogic.ts
@@ -12,7 +12,6 @@ import { userLogic } from 'scenes/userLogic'
import { pluralize } from 'lib/utils'
import type { billingLogicType } from './billingLogicType'
import { forms } from 'kea-forms'
-import { urls } from 'scenes/urls'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
export const ALLOCATION_THRESHOLD_ALERT = 0.85 // Threshold to show warning of event usage near limit
@@ -77,9 +76,7 @@ export const billingLogic = kea([
'' as string,
{
setRedirectPath: () => {
- return window.location.pathname.includes('/ingestion')
- ? urls.ingestion() + '/billing'
- : window.location.pathname.includes('/onboarding')
+ return window.location.pathname.includes('/onboarding')
? window.location.pathname + window.location.search
: ''
},
@@ -88,7 +85,7 @@ export const billingLogic = kea([
isOnboarding: [
false,
{
- setIsOnboarding: () => window.location.pathname.includes('/ingestion'),
+ setIsOnboarding: () => window.location.pathname.includes('/onboarding'),
},
],
}),
diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
index 8dd6ee18eeee8..ba03ee05269f4 100644
--- a/frontend/src/scenes/cohorts/Cohorts.scss
+++ b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -22,7 +22,7 @@
border-radius: 4px !important;
&:hover {
- border-color: var(--primary-light) !important;
+ border-color: var(--primary-3000-hover) !important;
}
.ant-upload-drag-container {
diff --git a/frontend/src/scenes/cohorts/cohortEditLogic.test.ts b/frontend/src/scenes/cohorts/cohortEditLogic.test.ts
index 37061f8217024..abab2aacfdae5 100644
--- a/frontend/src/scenes/cohorts/cohortEditLogic.test.ts
+++ b/frontend/src/scenes/cohorts/cohortEditLogic.test.ts
@@ -77,8 +77,8 @@ describe('cohortEditLogic', () => {
it('delete cohort', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort(mockCohort)
- await logic.actions.deleteCohort()
+ logic.actions.setCohort(mockCohort)
+ logic.actions.deleteCohort()
})
.toFinishAllListeners()
.toDispatchActions(['setCohort', 'deleteCohort', router.actionCreators.push(urls.cohorts())])
@@ -92,7 +92,7 @@ describe('cohortEditLogic', () => {
it('save with valid cohort', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
filters: {
properties: {
@@ -116,7 +116,7 @@ describe('cohortEditLogic', () => {
},
},
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
}).toDispatchActions(['setCohort', 'submitCohort', 'submitCohortSuccess'])
expect(api.update).toBeCalledTimes(1)
})
@@ -124,11 +124,11 @@ describe('cohortEditLogic', () => {
it('do not save with invalid name', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
name: '',
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
}).toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
expect(api.update).toBeCalledTimes(0)
})
@@ -137,7 +137,7 @@ describe('cohortEditLogic', () => {
it('do not save on OR operator', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
filters: {
properties: {
@@ -171,7 +171,7 @@ describe('cohortEditLogic', () => {
},
},
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
})
.toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
.toMatchValues({
@@ -199,7 +199,7 @@ describe('cohortEditLogic', () => {
it('do not save on less than one positive matching criteria', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
filters: {
properties: {
@@ -225,7 +225,7 @@ describe('cohortEditLogic', () => {
},
},
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
})
.toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
.toMatchValues({
@@ -252,7 +252,7 @@ describe('cohortEditLogic', () => {
it('do not save on criteria cancelling each other out', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
filters: {
properties: {
@@ -286,7 +286,7 @@ describe('cohortEditLogic', () => {
},
},
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
})
.toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
.toMatchValues({
@@ -317,7 +317,7 @@ describe('cohortEditLogic', () => {
it('do not save on invalid lower and upper bound period values - perform event regularly', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
filters: {
properties: {
@@ -346,7 +346,7 @@ describe('cohortEditLogic', () => {
},
},
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
})
.toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
.toMatchValues({
@@ -376,7 +376,7 @@ describe('cohortEditLogic', () => {
it('do not save on invalid lower and upper bound period values - perform events in sequence', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
filters: {
properties: {
@@ -403,7 +403,7 @@ describe('cohortEditLogic', () => {
},
},
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
})
.toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
.toMatchValues({
@@ -435,7 +435,7 @@ describe('cohortEditLogic', () => {
it(`${key} row missing all required fields`, async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
filters: {
properties: {
@@ -461,7 +461,7 @@ describe('cohortEditLogic', () => {
},
},
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
})
.toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
.toMatchValues({
@@ -496,13 +496,13 @@ describe('cohortEditLogic', () => {
it('can save existing static cohort with empty csv', async () => {
await initCohortLogic({ id: 1 })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
is_static: true,
groups: [],
csv: undefined,
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
}).toDispatchActions(['setCohort', 'submitCohort', 'submitCohortSuccess'])
expect(api.update).toBeCalledTimes(1)
})
@@ -510,14 +510,14 @@ describe('cohortEditLogic', () => {
it('do not save static cohort with empty csv', async () => {
await initCohortLogic({ id: 'new' })
await expectLogic(logic, async () => {
- await logic.actions.setCohort({
+ logic.actions.setCohort({
...mockCohort,
is_static: true,
groups: [],
csv: undefined,
id: 'new',
})
- await logic.actions.submitCohort()
+ logic.actions.submitCohort()
}).toDispatchActions(['setCohort', 'submitCohort', 'submitCohortFailure'])
expect(api.update).toBeCalledTimes(0)
})
diff --git a/frontend/src/scenes/cohorts/cohortEditLogic.ts b/frontend/src/scenes/cohorts/cohortEditLogic.ts
index 0b53d5ce25e6a..6c836e0a32887 100644
--- a/frontend/src/scenes/cohorts/cohortEditLogic.ts
+++ b/frontend/src/scenes/cohorts/cohortEditLogic.ts
@@ -74,7 +74,7 @@ export const cohortEditLogic = kea([
reducers(({ props, selectors }) => ({
cohort: [
- NEW_COHORT as CohortType,
+ NEW_COHORT,
{
setOuterGroupsType: (state, { type }) => ({
...state,
@@ -212,7 +212,7 @@ export const cohortEditLogic = kea([
loaders(({ actions, values, key }) => ({
cohort: [
- NEW_COHORT as CohortType,
+ NEW_COHORT,
{
setCohort: ({ cohort }) => processCohort(cohort),
fetchCohort: async ({ id }, breakpoint) => {
@@ -316,9 +316,15 @@ export const cohortEditLogic = kea([
cohortsModel.findMounted()?.actions.deleteCohort({ id: values.cohort.id, name: values.cohort.name })
router.actions.push(urls.cohorts())
},
+ submitCohort: () => {
+ if (values.cohortHasErrors) {
+ lemonToast.error('There was an error submiting this cohort. Make sure the cohort filters are correct.')
+ }
+ },
checkIfFinishedCalculating: async ({ cohort }, breakpoint) => {
if (cohort.is_calculating) {
actions.setPollTimeout(
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
window.setTimeout(async () => {
const newCohort = await api.cohorts.get(cohort.id)
breakpoint()
diff --git a/frontend/src/scenes/cohorts/cohortSceneLogic.ts b/frontend/src/scenes/cohorts/cohortSceneLogic.ts
index 52ea69b500b72..1af9d5cf7adfc 100644
--- a/frontend/src/scenes/cohorts/cohortSceneLogic.ts
+++ b/frontend/src/scenes/cohorts/cohortSceneLogic.ts
@@ -5,6 +5,7 @@ import { cohortsModel } from '~/models/cohortsModel'
import { CohortLogicProps } from './cohortEditLogic'
import type { cohortSceneLogicType } from './cohortSceneLogicType'
+import { Scene } from 'scenes/sceneTypes'
export const cohortSceneLogic = kea([
props({} as CohortLogicProps),
@@ -13,15 +14,22 @@ export const cohortSceneLogic = kea([
selectors({
breadcrumbs: [
- () => [cohortsModel.selectors.cohortsById, (_, props) => props.id],
+ () => [cohortsModel.selectors.cohortsById, (_, props) => props.id as CohortLogicProps['id']],
(cohortsById, cohortId): Breadcrumb[] => {
return [
{
+ key: Scene.PersonsManagement,
+ name: 'People',
+ path: urls.persons(),
+ },
+ {
+ key: 'cohorts',
name: 'Cohorts',
path: urls.cohorts(),
},
{
- name: cohortId !== 'new' ? cohortsById[cohortId]?.name || 'Untitled' : 'Untitled',
+ key: cohortId || 'loading',
+ name: cohortId && cohortId !== 'new' ? cohortsById[cohortId]?.name || 'Untitled' : 'Untitled',
},
]
},
diff --git a/frontend/src/scenes/dashboard/DashboardHeader.tsx b/frontend/src/scenes/dashboard/DashboardHeader.tsx
index 806b6a3ada25d..113479b97d1ee 100644
--- a/frontend/src/scenes/dashboard/DashboardHeader.tsx
+++ b/frontend/src/scenes/dashboard/DashboardHeader.tsx
@@ -364,14 +364,14 @@ export function DashboardHeader(): JSX.Element | null {
onChange={(_, tags) => triggerDashboardUpdate({ tags })}
saving={dashboardLoading}
tagsAvailable={tags.filter((tag) => !dashboard.tags?.includes(tag))}
- className="insight-metadata-tags"
+ className="mt-2"
/>
) : dashboard.tags.length ? (
= {}
): InsightModel {
const tiles = dashboardJson.tiles.filter((tile) => !!tile.insight && tile.insight?.id === insightId)
- let tile = dashboardJson.tiles[0] as DashboardTile
+ let tile = dashboardJson.tiles[0]
if (tiles.length) {
- tile = tiles[0] as DashboardTile
+ tile = tiles[0]
}
if (!tile.insight) {
throw new Error('tile has no insight')
@@ -218,7 +217,7 @@ describe('dashboardLogic', () => {
const fromIndex = from.tiles.findIndex(
(tile) => !!tile.insight && tile.insight.id === tileToUpdate.insight.id
)
- const removedTile = from.tiles.splice(fromIndex, 1)[0] as DashboardTile
+ const removedTile = from.tiles.splice(fromIndex, 1)[0]
// update the insight
const insightId = tileToUpdate.insight.id
@@ -354,7 +353,7 @@ describe('dashboardLogic', () => {
const startingDashboard = dashboards['9']
const tiles = startingDashboard.tiles
- const sourceTile = tiles[0] as DashboardTile
+ const sourceTile = tiles[0]
await expectLogic(logic)
.toFinishAllListeners()
@@ -530,11 +529,11 @@ describe('dashboardLogic', () => {
])
.toMatchValues({
refreshStatus: {
- [(dashboards['5'].tiles[0] as DashboardTile).insight!.short_id]: {
+ [dashboards['5'].tiles[0].insight!.short_id]: {
loading: true,
timer: expect.anything(),
},
- [(dashboards['5'].tiles[1] as DashboardTile).insight!.short_id]: {
+ [dashboards['5'].tiles[1].insight!.short_id]: {
loading: true,
timer: expect.anything(),
},
@@ -548,29 +547,21 @@ describe('dashboardLogic', () => {
// and updates the action in the model
(a) =>
a.type === dashboardsModel.actionTypes.updateDashboardInsight &&
- a.payload.insight.short_id ===
- (dashboards['5'].tiles[1] as DashboardTile).insight!.short_id,
+ a.payload.insight.short_id === dashboards['5'].tiles[1].insight!.short_id,
(a) =>
a.type === dashboardsModel.actionTypes.updateDashboardInsight &&
- a.payload.insight.short_id ===
- (dashboards['5'].tiles[0] as DashboardTile).insight!.short_id,
+ a.payload.insight.short_id === dashboards['5'].tiles[0].insight!.short_id,
// no longer reloading
- logic.actionCreators.setRefreshStatus(
- (dashboards['5'].tiles[0] as DashboardTile).insight!.short_id,
- false
- ),
- logic.actionCreators.setRefreshStatus(
- (dashboards['5'].tiles[1] as DashboardTile).insight!.short_id,
- false
- ),
+ logic.actionCreators.setRefreshStatus(dashboards['5'].tiles[0].insight!.short_id, false),
+ logic.actionCreators.setRefreshStatus(dashboards['5'].tiles[1].insight!.short_id, false),
])
.toMatchValues({
refreshStatus: {
- [(dashboards['5'].tiles[0] as DashboardTile).insight!.short_id]: {
+ [dashboards['5'].tiles[0].insight!.short_id]: {
refreshed: true,
timer: expect.anything(),
},
- [(dashboards['5'].tiles[1] as DashboardTile).insight!.short_id]: {
+ [dashboards['5'].tiles[1].insight!.short_id]: {
refreshed: true,
timer: expect.anything(),
},
@@ -585,21 +576,18 @@ describe('dashboardLogic', () => {
it('reloads selected items', async () => {
await expectLogic(logic, () => {
logic.actions.refreshAllDashboardItems({
- tiles: [dashboards['5'].tiles[0] as DashboardTile],
+ tiles: [dashboards['5'].tiles[0]],
action: 'refresh_manual',
})
})
.toFinishAllListeners()
.toDispatchActions([
'refreshAllDashboardItems',
- logic.actionCreators.setRefreshStatuses(
- [(dashboards['5'].tiles[0] as DashboardTile).insight!.short_id],
- true
- ),
+ logic.actionCreators.setRefreshStatuses([dashboards['5'].tiles[0].insight!.short_id], true),
])
.toMatchValues({
refreshStatus: {
- [(dashboards['5'].tiles[0] as DashboardTile).insight!.short_id]: {
+ [dashboards['5'].tiles[0].insight!.short_id]: {
loading: true,
timer: expect.anything(),
},
@@ -612,16 +600,12 @@ describe('dashboardLogic', () => {
.toDispatchActionsInAnyOrder([
(a) =>
a.type === dashboardsModel.actionTypes.updateDashboardInsight &&
- a.payload.insight.short_id ===
- (dashboards['5'].tiles[0] as DashboardTile).insight!.short_id,
- logic.actionCreators.setRefreshStatus(
- (dashboards['5'].tiles[0] as DashboardTile).insight!.short_id,
- false
- ),
+ a.payload.insight.short_id === dashboards['5'].tiles[0].insight!.short_id,
+ logic.actionCreators.setRefreshStatus(dashboards['5'].tiles[0].insight!.short_id, false),
])
.toMatchValues({
refreshStatus: {
- [(dashboards['5'].tiles[0] as DashboardTile).insight!.short_id]: {
+ [dashboards['5'].tiles[0].insight!.short_id]: {
refreshed: true,
timer: expect.anything(),
},
@@ -859,4 +843,3 @@ describe('dashboardLogic', () => {
).toEqual([])
})
})
-/* eslint-enable @typescript-eslint/no-non-null-assertion */
diff --git a/frontend/src/scenes/dashboard/dashboardLogic.tsx b/frontend/src/scenes/dashboard/dashboardLogic.tsx
index 5b05ba3edf664..0ceb6c33ee07a 100644
--- a/frontend/src/scenes/dashboard/dashboardLogic.tsx
+++ b/frontend/src/scenes/dashboard/dashboardLogic.tsx
@@ -53,6 +53,7 @@ import { getResponseBytes, sortDates } from '../insights/utils'
import { loaders } from 'kea-loaders'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { calculateLayouts } from 'scenes/dashboard/tileLayouts'
+import { Scene } from 'scenes/sceneTypes'
export const BREAKPOINTS: Record = {
sm: 1024,
@@ -231,7 +232,7 @@ export const dashboardLogic = kea([
filters: values.filters,
})
} catch (e) {
- lemonToast.error('Could not update dashboardFilters: ' + e)
+ lemonToast.error('Could not update dashboardFilters: ' + String(e))
return values.dashboard
}
},
@@ -265,7 +266,7 @@ export const dashboardLogic = kea([
tiles: values.tiles.filter((t) => t.id !== tile.id),
} as DashboardType
} catch (e) {
- lemonToast.error('Could not remove tile from dashboard: ' + e)
+ lemonToast.error('Could not remove tile from dashboard: ' + String(e))
return values.dashboard
}
},
@@ -280,7 +281,7 @@ export const dashboardLogic = kea([
tiles: [newTile],
} as Partial)
} catch (e) {
- lemonToast.error('Could not duplicate tile: ' + e)
+ lemonToast.error('Could not duplicate tile: ' + String(e))
return values.dashboard
}
},
@@ -464,7 +465,7 @@ export const dashboardLogic = kea([
tiles[tileIndex] = {
...tiles[tileIndex],
insight: {
- ...((tiles[tileIndex] as DashboardTile).insight as InsightModel),
+ ...(tiles[tileIndex].insight as InsightModel),
name: item.name,
last_modified_at: item.last_modified_at,
},
@@ -734,11 +735,22 @@ export const dashboardLogic = kea([
(s) => [s.dashboard],
(dashboard): Breadcrumb[] => [
{
+ key: Scene.Dashboards,
name: 'Dashboards',
path: urls.dashboards(),
},
{
+ key: dashboard?.id || 'new',
name: dashboard?.id ? dashboard.name || 'Unnamed' : null,
+ onRename: async (name) => {
+ if (dashboard) {
+ await dashboardsModel.asyncActions.updateDashboard({
+ id: dashboard.id,
+ name,
+ allowUndo: true,
+ })
+ }
+ },
},
],
],
@@ -961,7 +973,7 @@ export const dashboardLogic = kea([
)
actions.setRefreshStatus(insight.short_id)
- captureTimeToSeeData(values.currentTeamId, {
+ void captureTimeToSeeData(values.currentTeamId, {
type: 'insight_load',
context: 'dashboard',
primary_interaction_id: dashboardQueryId,
@@ -1000,13 +1012,13 @@ export const dashboardLogic = kea([
insights_fetched: insights.length,
insights_fetched_cached: 0,
}
- captureTimeToSeeData(values.currentTeamId, {
+ void captureTimeToSeeData(values.currentTeamId, {
...payload,
is_primary_interaction: !initialLoad,
})
if (initialLoad) {
const { startTime, responseBytes } = values.dashboardLoadTimerData
- captureTimeToSeeData(values.currentTeamId, {
+ void captureTimeToSeeData(values.currentTeamId, {
...payload,
action: 'initial_load_full',
time_to_see_data_ms: Math.floor(performance.now() - startTime),
@@ -1017,9 +1029,13 @@ export const dashboardLogic = kea([
}
})
- function loadNextPromise(): void {
+ async function loadNextPromise(): Promise {
if (!cancelled && fetchItemFunctions.length > 0) {
- fetchItemFunctions.shift()?.().then(loadNextPromise)
+ const nextPromise = fetchItemFunctions.shift()
+ if (nextPromise) {
+ await nextPromise()
+ await loadNextPromise()
+ }
}
}
@@ -1066,7 +1082,7 @@ export const dashboardLogic = kea([
}
},
loadDashboardItemsSuccess: function (...args) {
- sharedListeners.reportLoadTiming(...args)
+ void sharedListeners.reportLoadTiming(...args)
const dashboard = values.dashboard as DashboardType
const { action, dashboardQueryId, startTime, responseBytes } = values.dashboardLoadTimerData
@@ -1123,9 +1139,9 @@ export const dashboardLogic = kea([
is_primary_interaction: !initialLoad,
}
- captureTimeToSeeData(values.currentTeamId, payload)
+ void captureTimeToSeeData(values.currentTeamId, payload)
if (initialLoad && allLoaded) {
- captureTimeToSeeData(values.currentTeamId, {
+ void captureTimeToSeeData(values.currentTeamId, {
...payload,
action: 'initial_load_full',
is_primary_interaction: true,
diff --git a/frontend/src/scenes/dashboard/dashboards/dashboardsLogic.ts b/frontend/src/scenes/dashboard/dashboards/dashboardsLogic.ts
index 015a792e1b3af..321d7f9a5cd4d 100644
--- a/frontend/src/scenes/dashboard/dashboards/dashboardsLogic.ts
+++ b/frontend/src/scenes/dashboard/dashboards/dashboardsLogic.ts
@@ -47,7 +47,7 @@ export const dashboardsLogic = kea([
],
filters: [
- DEFAULT_FILTERS as DashboardsFilters,
+ DEFAULT_FILTERS,
{
setFilters: (state, { filters }) =>
objectClean({
diff --git a/frontend/src/scenes/data-management/DataManagementScene.tsx b/frontend/src/scenes/data-management/DataManagementScene.tsx
index 0513de6e11e5e..5a3bf879ea225 100644
--- a/frontend/src/scenes/data-management/DataManagementScene.tsx
+++ b/frontend/src/scenes/data-management/DataManagementScene.tsx
@@ -9,7 +9,7 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
import { LemonTab, LemonTabs } from 'lib/lemon-ui/LemonTabs'
import React from 'react'
-import { SceneExport } from 'scenes/sceneTypes'
+import { Scene, SceneExport } from 'scenes/sceneTypes'
import { PageHeader } from 'lib/components/PageHeader'
import { NewActionButton } from 'scenes/actions/NewActionButton'
import { Annotations } from 'scenes/annotations'
@@ -96,7 +96,7 @@ const tabs: Record<
},
[DataManagementTab.IngestionWarnings]: {
url: urls.ingestionWarnings(),
- label: 'Ingestion Warnings',
+ label: 'Ingestion warnings',
content: ([
(tab): Breadcrumb[] => {
return [
{
+ key: Scene.DataManagement,
name: `Data Management`,
path: tabs.events.url,
},
{
+ key: tab,
name: capitalizeFirstLetter(tab),
path: tabs[tab].url,
},
diff --git a/frontend/src/scenes/data-management/actions/ActionsTable.tsx b/frontend/src/scenes/data-management/actions/ActionsTable.tsx
index aa9bf6aad9876..d7255f347ba9f 100644
--- a/frontend/src/scenes/data-management/actions/ActionsTable.tsx
+++ b/frontend/src/scenes/data-management/actions/ActionsTable.tsx
@@ -1,5 +1,4 @@
import { Link } from 'lib/lemon-ui/Link'
-import { Radio } from 'antd'
import { deleteWithUndo, stripHTTP } from 'lib/utils'
import { useActions, useValues } from 'kea'
import { actionsModel } from '~/models/actionsModel'
@@ -17,7 +16,7 @@ import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import { More } from 'lib/lemon-ui/LemonButton/More'
import { combineUrl } from 'kea-router'
import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
-import { LemonInput } from '@posthog/lemon-ui'
+import { LemonInput, LemonSegmentedButton } from '@posthog/lemon-ui'
import { actionsLogic } from 'scenes/actions/actionsLogic'
import { IconCheckmark, IconPlayCircle } from 'lib/lemon-ui/icons'
import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
@@ -28,9 +27,9 @@ export function ActionsTable(): JSX.Element {
const { actionsLoading } = useValues(actionsModel({ params: 'include_count=1' }))
const { loadActions } = useActions(actionsModel)
- const { filterByMe, searchTerm, actionsFiltered, shouldShowProductIntroduction, shouldShowEmptyState } =
+ const { filterType, searchTerm, actionsFiltered, shouldShowProductIntroduction, shouldShowEmptyState } =
useValues(actionsLogic)
- const { setFilterByMe, setSearchTerm } = useActions(actionsLogic)
+ const { setFilterType, setSearchTerm } = useActions(actionsLogic)
const { hasAvailableFeature } = useValues(userLogic)
const { updateHasSeenProductIntroFor } = useActions(userLogic)
@@ -202,7 +201,7 @@ export function ActionsTable(): JSX.Element {
- deleteWithUndo({
+ void deleteWithUndo({
endpoint: api.actions.determineDeleteEndpoint(),
object: action,
callback: loadActions,
@@ -237,7 +236,7 @@ export function ActionsTable(): JSX.Element {
}
/>
)}
- {(shouldShowEmptyState && filterByMe) || !shouldShowEmptyState ? (
+ {(shouldShowEmptyState && filterType === 'me') || !shouldShowEmptyState ? (
setFilterByMe(e.target.value)}>
- All actions
- My actions
-
+ ([
(definition, isEvent): Breadcrumb[] => {
return [
{
+ key: Scene.DataManagement,
name: `Data Management`,
path: isEvent ? urls.eventDefinitions() : urls.propertyDefinitions(),
},
{
+ key: isEvent ? DataManagementTab.EventDefinitions : DataManagementTab.PropertyDefinitions,
name: isEvent ? 'Events' : 'Properties',
path: isEvent ? urls.eventDefinitions() : urls.propertyDefinitions(),
},
{
+ key: definition?.id || 'new',
name: definition?.id !== 'new' ? getPropertyLabel(definition?.name) || 'Untitled' : 'Untitled',
},
]
diff --git a/frontend/src/scenes/data-management/events/DefinitionHeader.tsx b/frontend/src/scenes/data-management/events/DefinitionHeader.tsx
index cc34e2f364f9e..8edb6f208faab 100644
--- a/frontend/src/scenes/data-management/events/DefinitionHeader.tsx
+++ b/frontend/src/scenes/data-management/events/DefinitionHeader.tsx
@@ -1,19 +1,10 @@
import { EventDefinition, PropertyDefinition } from '~/types'
-import {
- IconAutocapture,
- IconPageleave,
- IconPreview,
- PropertyIcon,
- IconUnverifiedEvent,
- IconVerifiedEvent,
- VerifiedPropertyIcon,
- IconSelectAll,
-} from 'lib/lemon-ui/icons'
+import { IconSelectAll } from 'lib/lemon-ui/icons'
+import { IconBadge, IconBolt, IconCursor, IconEye, IconLeave, IconList, IconLogomark } from '@posthog/icons'
import { getKeyMapping, KEY_MAPPING } from 'lib/taxonomy'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { TaxonomicFilterGroup, TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import clsx from 'clsx'
import { Link } from 'lib/lemon-ui/Link'
import { urls } from 'scenes/urls'
import {
@@ -25,20 +16,20 @@ export function getPropertyDefinitionIcon(definition: PropertyDefinition): JSX.E
if (KEY_MAPPING.event[definition.name]) {
return (
-
)
}
if (definition.verified) {
return (
-
)
}
return (
-
)
}
@@ -47,29 +38,32 @@ export function getEventDefinitionIcon(definition: EventDefinition & { value: st
// Rest are events
if (definition.name === '$pageview' || definition.name === '$screen') {
return (
-
-
+
)
}
if (definition.name === '$pageleave') {
return (
-
)
}
if (definition.name === '$autocapture') {
+ return
-
+
)
}
- if (definition.name && (definition.verified || !!KEY_MAPPING.event[definition.name])) {
+ if (definition.name && !!KEY_MAPPING.event[definition.name]) {
return (
-
-
+
)
}
@@ -81,8 +75,8 @@ export function getEventDefinitionIcon(definition: EventDefinition & { value: st
)
}
return (
-
-
+
)
}
@@ -108,7 +102,7 @@ function RawDefinitionHeader({
const isLink = asLink && fullDetailUrl
const innerContent = (
-
+
([
}),
reducers({
filters: [
- cleanFilters({}) as Filters,
+ cleanFilters({}),
{
setFilters: (state, { filters }) => ({
...state,
diff --git a/frontend/src/scenes/data-management/ingestion-warnings/ingestionWarningsLogic.ts b/frontend/src/scenes/data-management/ingestion-warnings/ingestionWarningsLogic.ts
index c3509561e1a42..c5ff0132e7a13 100644
--- a/frontend/src/scenes/data-management/ingestion-warnings/ingestionWarningsLogic.ts
+++ b/frontend/src/scenes/data-management/ingestion-warnings/ingestionWarningsLogic.ts
@@ -8,6 +8,8 @@ import type { ingestionWarningsLogicType } from './ingestionWarningsLogicType'
import { teamLogic } from '../../teamLogic'
import { range } from 'lib/utils'
import { dayjs, dayjsUtcToTimezone } from 'lib/dayjs'
+import { Scene } from 'scenes/sceneTypes'
+import { DataManagementTab } from '../DataManagementScene'
export interface IngestionWarningSummary {
type: string
@@ -47,11 +49,13 @@ export const ingestionWarningsLogic = kea([
(): Breadcrumb[] => {
return [
{
- name: `Data Management`,
+ key: Scene.DataManagement,
+ name: `Data management`,
path: urls.eventDefinitions(),
},
{
- name: 'Ingestion Warnings',
+ key: DataManagementTab.IngestionWarnings,
+ name: 'Ingestion warnings',
path: urls.ingestionWarnings(),
},
]
diff --git a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss
index 50b3d7bfb9394..68dfef351b3c0 100644
--- a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss
+++ b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss
@@ -1,6 +1,7 @@
.event-properties-definition-table {
.LemonTable__content > table > tbody {
td.definition-column-icon {
+ padding-right: 0.5rem;
width: 36px;
.definition-column-name-icon {
@@ -8,6 +9,7 @@
align-items: center;
justify-content: center;
width: 30px;
+ font-size: 1.2rem;
svg.taxonomy-icon {
flex-shrink: 0;
@@ -32,16 +34,14 @@
justify-content: center;
.definition-column-name-content-title {
- font-weight: 600;
+ align-items: center;
cursor: pointer;
+ display: flex;
+ font-weight: 600;
+ gap: 0.25rem;
- &::before {
- content: '';
- position: absolute;
- top: -5px;
- left: -10px;
- right: -50px;
- height: 22px;
+ svg {
+ color: var(--success);
}
}
}
diff --git a/frontend/src/scenes/data-management/properties/propertyDefinitionsTableLogic.ts b/frontend/src/scenes/data-management/properties/propertyDefinitionsTableLogic.ts
index f83419217e84b..3aa493789acb8 100644
--- a/frontend/src/scenes/data-management/properties/propertyDefinitionsTableLogic.ts
+++ b/frontend/src/scenes/data-management/properties/propertyDefinitionsTableLogic.ts
@@ -193,7 +193,7 @@ export const propertyDefinitionsTableLogic = kea {
const [type, index] = propertyType.split('::')
actions.setFilters({
- type: type as string,
+ type: type,
group_type_index: index ? +index : null,
})
},
diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
index 7f0a7044b150c..168b307e29935 100644
--- a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
+++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
@@ -45,7 +45,7 @@ export function DataWarehouseTablesContainer(): JSX.Element {
{
- deleteWithUndo({
+ void deleteWithUndo({
endpoint: `projects/${currentTeamId}/warehouse_tables`,
object: { name: warehouseTable.name, id: warehouseTable.id },
callback: loadDataWarehouse,
diff --git a/frontend/src/scenes/data-warehouse/new_table/dataWarehouseTableLogic.tsx b/frontend/src/scenes/data-warehouse/new_table/dataWarehouseTableLogic.tsx
index 910336cef0de6..7ca0685b35192 100644
--- a/frontend/src/scenes/data-warehouse/new_table/dataWarehouseTableLogic.tsx
+++ b/frontend/src/scenes/data-warehouse/new_table/dataWarehouseTableLogic.tsx
@@ -10,9 +10,11 @@ import { DataTableNode } from '~/queries/schema'
import { databaseTableListLogic } from 'scenes/data-management/database/databaseTableListLogic'
import type { dataWarehouseTableLogicType } from './dataWarehouseTableLogicType'
import { dataWarehouseSceneLogic } from '../external/dataWarehouseSceneLogic'
+import { Scene } from 'scenes/sceneTypes'
export interface TableLogicProps {
- id: string | 'new'
+ /** A UUID or 'new'. */
+ id: string
}
const NEW_WAREHOUSE_TABLE: DataWarehouseTable = {
@@ -99,10 +101,12 @@ export const dataWarehouseTableLogic = kea([
() => [],
(): Breadcrumb[] => [
{
- name: `Data Warehouse`,
+ key: Scene.DataWarehouse,
+ name: `Data warehouse`,
path: urls.dataWarehouseExternal(),
},
{
+ key: 'new',
name: 'New',
},
],
diff --git a/frontend/src/scenes/data-warehouse/saved_queries/DataWarehouseSavedQueriesContainer.tsx b/frontend/src/scenes/data-warehouse/saved_queries/DataWarehouseSavedQueriesContainer.tsx
index 236486c58dd6d..c45ec66c3431b 100644
--- a/frontend/src/scenes/data-warehouse/saved_queries/DataWarehouseSavedQueriesContainer.tsx
+++ b/frontend/src/scenes/data-warehouse/saved_queries/DataWarehouseSavedQueriesContainer.tsx
@@ -67,7 +67,7 @@ export function DataWarehouseSavedQueriesContainer(): JSX.Element {
{
- deleteWithUndo({
+ void deleteWithUndo({
endpoint: `projects/${currentTeamId}/warehouse_saved_queries`,
object: { name: warehouseView.name, id: warehouseView.id },
callback: loadDataWarehouseSavedQueries,
diff --git a/frontend/src/scenes/data-warehouse/settings/dataWarehouseSettingsLogic.ts b/frontend/src/scenes/data-warehouse/settings/dataWarehouseSettingsLogic.ts
index a7c40b36401b3..2941effa9d151 100644
--- a/frontend/src/scenes/data-warehouse/settings/dataWarehouseSettingsLogic.ts
+++ b/frontend/src/scenes/data-warehouse/settings/dataWarehouseSettingsLogic.ts
@@ -5,6 +5,7 @@ import { loaders } from 'kea-loaders'
import api, { PaginatedResponse } from 'lib/api'
import { ExternalDataStripeSource, Breadcrumb } from '~/types'
import { urls } from 'scenes/urls'
+import { Scene } from 'scenes/sceneTypes'
export interface DataWarehouseSource {}
@@ -49,10 +50,12 @@ export const dataWarehouseSettingsLogic = kea([
() => [],
(): Breadcrumb[] => [
{
+ key: Scene.DataWarehouse,
name: `Data Warehouse`,
path: urls.dataWarehouseExternal(),
},
{
+ key: Scene.DataWarehouseSettings,
name: 'Data Warehouse Settings',
path: urls.dataWarehouseSettings(),
},
diff --git a/frontend/src/scenes/debug/HogQLDebug.tsx b/frontend/src/scenes/debug/HogQLDebug.tsx
index 21cc7b0b13104..4ef2a6656bede 100644
--- a/frontend/src/scenes/debug/HogQLDebug.tsx
+++ b/frontend/src/scenes/debug/HogQLDebug.tsx
@@ -80,7 +80,25 @@ export function HogQLDebug({ query, setQuery, queryKey }: HogQLDebugProps): JSX.
}
value={query.modifiers?.inCohortVia ?? response?.modifiers?.inCohortVia}
/>
- {' '}
+
+
+ Materialization Mode:
+
+ setQuery({
+ ...query,
+ modifiers: { ...query.modifiers, materializationMode: value },
+ } as HogQLQuery)
+ }
+ value={query.modifiers?.materializationMode ?? response?.modifiers?.materializationMode}
+ />
+
{dataLoading ? (
<>
diff --git a/frontend/src/scenes/early-access-features/earlyAccessFeatureLogic.ts b/frontend/src/scenes/early-access-features/earlyAccessFeatureLogic.ts
index df5aabcc583b9..0ea2885e60c3f 100644
--- a/frontend/src/scenes/early-access-features/earlyAccessFeatureLogic.ts
+++ b/frontend/src/scenes/early-access-features/earlyAccessFeatureLogic.ts
@@ -15,6 +15,7 @@ import type { earlyAccessFeatureLogicType } from './earlyAccessFeatureLogicType'
import { earlyAccessFeaturesLogic } from './earlyAccessFeaturesLogic'
import { teamLogic } from 'scenes/teamLogic'
import { lemonToast } from '@posthog/lemon-ui'
+import { Scene } from 'scenes/sceneTypes'
export const NEW_EARLY_ACCESS_FEATURE: NewEarlyAccessFeatureType = {
name: '',
@@ -121,10 +122,14 @@ export const earlyAccessFeatureLogic = kea
+ {label}
+ {extra_options}
+
{caption && {caption}
}
-
- Autocapture
- Custom event
- Page view
-
+ options={[
+ {
+ value: '$autocapture',
+ label: 'Autocapture',
+ },
+ {
+ value: 'event',
+ label: 'Custom event',
+ },
+ {
+ value: '$pageview',
+ label: 'Page view',
+ },
+ ]}
+ fullWidth
+ size="small"
+ />
)
}
@@ -328,15 +338,32 @@ function StringMatchingSelection({
sendStep: (stepToSend: ActionStepType) => void
}): JSX.Element {
const key = `${field}_matching`
- const handleURLMatchChange = (e: RadioChangeEvent): void => {
- sendStep({ ...step, [key]: e.target.value })
+ const handleURLMatchChange = (value: string): void => {
+ sendStep({ ...step, [key]: value })
}
const defaultValue = field === 'url' ? StringMatching.Contains : StringMatching.Exact
return (
-
+
)
}
diff --git a/frontend/src/scenes/actions/EventName.tsx b/frontend/src/scenes/actions/EventName.tsx
index aadaf08a4cee1..b467e2d044028 100644
--- a/frontend/src/scenes/actions/EventName.tsx
+++ b/frontend/src/scenes/actions/EventName.tsx
@@ -38,6 +38,7 @@ export function LemonEventName({
renderValue={(v) => (v !== null ? {icon}
}
{!hideText && (
-
)}
diff --git a/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss b/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss
index 6f510e589a9c7..9cc22ad4acc2a 100644
--- a/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss
+++ b/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss
@@ -1,6 +1,7 @@
.events-definition-table {
.LemonTable__content > table > tbody {
td.definition-column-icon {
+ padding-right: 0.5rem;
width: 36px;
.definition-column-name-icon {
@@ -8,7 +9,7 @@
align-items: center;
justify-content: center;
width: 30px;
- font-size: 1.5rem;
+ font-size: 1.2rem;
svg.taxonomy-icon {
flex-shrink: 0;
@@ -37,16 +38,15 @@
justify-content: center;
.definition-column-name-content-title {
+ align-items: center;
+ display: flex;
font-weight: 600;
- cursor: pointer;
- position: relative;
+ gap: 0.25rem;
overflow: visible;
+ position: relative;
- &::before {
- content: '';
- position: absolute;
- inset: -5px -50px -5px -10px;
- height: 22px;
+ svg {
+ color: var(--success);
}
}
}
diff --git a/frontend/src/scenes/data-management/events/eventDefinitionsTableLogic.ts b/frontend/src/scenes/data-management/events/eventDefinitionsTableLogic.ts
index 58ce1a766852c..af7c766e1889f 100644
--- a/frontend/src/scenes/data-management/events/eventDefinitionsTableLogic.ts
+++ b/frontend/src/scenes/data-management/events/eventDefinitionsTableLogic.ts
@@ -103,7 +103,7 @@ export const eventDefinitionsTableLogic = kea{linkedInnerContent}
+
+ {linkedInnerContent}
+ {definition.verified && (
+ <>
+
+
+
+ )}
+ {!!KEY_MAPPING.event[definition.name] && (
+
+
+ )}
+
{description ? {description}
: null}
-
- {experiment.feature_flag?.key}
-
+ {experiment.feature_flag && (
+
+ {experiment.feature_flag.key}
+
+ )}
Experiments }
+ title={
@@ -154,14 +154,13 @@ export function Experiments(): JSX.Element {
}
caption={
<>
- Check out our
{' '}
- Experimentation user guide
+ Visit the guide
{' '}
to learn more.
@@ -182,7 +181,7 @@ export function Experiments(): JSX.Element {
{(shouldShowEmptyState || shouldShowProductIntroduction) &&
(tab === ExperimentsTabs.Archived ? (
-
) : (
<>
A/B testing
}
buttons={
hasAvailableFeature(AvailableFeature.EXPERIMENTATION) ? (
+
+
{metrics.map((metric, idx) => (
-
-
+
+
))}
{metrics && !(metrics.length > 2) && (
-
+
-
+
{metric.filters.insight === InsightType.FUNNELS && (
{metric.name}
@@ -185,7 +184,7 @@ export function SecondaryMetrics({
onClick={() => deleteMetric(idx)}
/>
-
- Add metric
-
-
-
+
+
+ Add metric
+
+
)}
-
-
+ Secondary metrics
diff --git a/frontend/src/scenes/experiments/experimentLogic.tsx b/frontend/src/scenes/experiments/experimentLogic.tsx
index 6f28ea14006b9..7b314e42f979a 100644
--- a/frontend/src/scenes/experiments/experimentLogic.tsx
+++ b/frontend/src/scenes/experiments/experimentLogic.tsx
@@ -41,6 +41,7 @@ import { insightDataLogic } from 'scenes/insights/insightDataLogic'
import { queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
import { InsightVizNode } from '~/queries/schema'
import { groupsModel } from '~/models/groupsModel'
+import { Scene } from 'scenes/sceneTypes'
export const DEFAULT_DURATION = 14 // days
@@ -634,10 +635,12 @@ export const experimentLogic = keaVariant keys
-
-
+
-
-
-
-
-
-
+
)}
@@ -899,33 +897,33 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
+
Key
+ Description
+ Payload
+ Rollout
+
-
-
))}
@@ -874,24 +874,22 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
No payload associated with this flag
)
) : (
-
+
{variant.key}
-
-
{index !== variants.length - 1 &&
{variant.name || 'There is no description for this variant key'}
-
-
+
{featureFlag.filters.payloads?.[index] ? (
)}
-
-
+ {variant.rollout_percentage}%
+
- Specify a payload to be returned when the served value is{' '}
-
-
- true
-
-
+
+
+
+
+
)}
+ Specify a payload to be returned when the served value is{' '}
+
+
+ true
+
+ Variant keys
The rollout percentage of feature flag variants must add up to 100% -
-
-
+
+
-
-
))}
{variants.length > 0 && !areVariantRolloutsValid && (
diff --git a/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx b/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx
index 93d251e7e4aa4..256e75c53dd60 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlagAutoRollout.tsx
@@ -168,8 +168,8 @@ export function FeatureFlagAutoRollback({ readOnly }: FeatureFlagAutoRollbackPro
+ {
- await copyToClipboard(featureFlag.key, 'feature flag key')
+ onClick={() => {
+ void copyToClipboard(featureFlag.key, 'feature flag key')
}}
fullWidth
>
@@ -210,7 +210,7 @@ export function OverViewTab({
{
- deleteWithUndo({
+ void deleteWithUndo({
endpoint: `projects/${currentTeamId}/feature_flags`,
object: { name: featureFlag.key, id: featureFlag.id },
callback: loadFeatureFlags,
diff --git a/frontend/src/scenes/feature-flags/featureFlagLogic.ts b/frontend/src/scenes/feature-flags/featureFlagLogic.ts
index aa331b35cbc12..3a232a5a25947 100644
--- a/frontend/src/scenes/feature-flags/featureFlagLogic.ts
+++ b/frontend/src/scenes/feature-flags/featureFlagLogic.ts
@@ -45,6 +45,7 @@ import { dashboardsLogic } from 'scenes/dashboard/dashboards/dashboardsLogic'
import { organizationLogic } from '../organizationLogic'
import { NEW_EARLY_ACCESS_FEATURE } from 'scenes/early-access-features/earlyAccessFeatureLogic'
import { NEW_SURVEY, NewSurvey } from 'scenes/surveys/constants'
+import { Scene } from 'scenes/sceneTypes'
const getDefaultRollbackCondition = (): FeatureFlagRollbackConditions => ({
operator: 'gt',
@@ -638,7 +639,7 @@ export const featureFlagLogic = kea([
actions.editFeatureFlag(false)
},
deleteFeatureFlag: async ({ featureFlag }) => {
- deleteWithUndo({
+ await deleteWithUndo({
endpoint: `projects/${values.currentTeamId}/feature_flags`,
object: { name: featureFlag.key, id: featureFlag.id },
callback: () => {
@@ -779,7 +780,9 @@ export const featureFlagLogic = kea([
: 'copied'
lemonToast.success(`Feature flag ${operation} successfully!`)
} else {
- lemonToast.error(`Error while saving feature flag: ${featureFlagCopy?.failed || featureFlagCopy}`)
+ lemonToast.error(
+ `Error while saving feature flag: ${JSON.stringify(featureFlagCopy?.failed) || featureFlagCopy}`
+ )
}
actions.loadProjectsWithCurrentFlag()
@@ -834,10 +837,11 @@ export const featureFlagLogic = kea([
(s) => [s.featureFlag],
(featureFlag): Breadcrumb[] => [
{
+ key: Scene.FeatureFlags,
name: 'Feature Flags',
path: urls.featureFlags(),
},
- ...(featureFlag ? [{ name: featureFlag.key || 'Unnamed' }] : []),
+ { key: featureFlag.id || 'unknown', name: featureFlag.key || 'Unnamed' },
],
],
propertySelectErrors: [
diff --git a/frontend/src/scenes/feature-flags/featureFlagsLogic.ts b/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
index e88e418635a2c..da81fca11890e 100644
--- a/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
+++ b/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
@@ -8,6 +8,7 @@ import { teamLogic } from '../teamLogic'
import { urls } from 'scenes/urls'
import { router, actionToUrl, urlToAction } from 'kea-router'
import { LemonSelectOption } from 'lib/lemon-ui/LemonSelect'
+import { Scene } from 'scenes/sceneTypes'
export enum FeatureFlagsTab {
OVERVIEW = 'overview',
@@ -154,7 +155,8 @@ export const featureFlagsLogic = kea([
() => [],
(): Breadcrumb[] => [
{
- name: 'Feature Flags',
+ key: Scene.FeatureFlags,
+ name: 'Feature flags',
path: urls.featureFlags(),
},
],
diff --git a/frontend/src/scenes/feedback/inAppFeedbackLogic.ts b/frontend/src/scenes/feedback/inAppFeedbackLogic.ts
index 8af2d525e9433..d6183c4b98d27 100644
--- a/frontend/src/scenes/feedback/inAppFeedbackLogic.ts
+++ b/frontend/src/scenes/feedback/inAppFeedbackLogic.ts
@@ -61,7 +61,7 @@ export const inAppFeedbackLogic = kea([
},
],
dataTableQuery: [
- DEFAULT_DATATABLE_QUERY as DataTableNode,
+ DEFAULT_DATATABLE_QUERY,
{
setDataTableQuery: (_, { query }) => {
if (query.kind === NodeKind.DataTableNode) {
@@ -74,7 +74,7 @@ export const inAppFeedbackLogic = kea([
},
],
trendQuery: [
- DEFAULT_TREND_INSIGHT_VIZ_NODE as InsightVizNode,
+ DEFAULT_TREND_INSIGHT_VIZ_NODE,
{
setDataTableQuery: (_, { query }) => {
if (query.kind === NodeKind.DataTableNode) {
@@ -114,7 +114,7 @@ export const inAppFeedbackLogic = kea([
event: eventName,
orderBy: ['-timestamp'],
})
- return response.results as EventType[]
+ return response.results
},
},
],
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
index 7f2e0024ca851..ad4a376864a61 100644
--- a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
+++ b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
@@ -120,7 +120,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
.funnel-bar {
position: relative;
height: 100%;
- background: var(--funnel-default);
+ background: var(--primary-3000);
transition: width 0.2s ease, height 0.2s ease;
&.first {
@@ -148,7 +148,7 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
&.outside {
left: calc(100% + #{$label_position_offset});
- color: var(--funnel-default);
+ color: var(--primary-3000);
}
}
}
diff --git a/frontend/src/scenes/funnels/FunnelStepMore.tsx b/frontend/src/scenes/funnels/FunnelStepMore.tsx
index 722f1d54aeb14..0381afb70ad7c 100644
--- a/frontend/src/scenes/funnels/FunnelStepMore.tsx
+++ b/frontend/src/scenes/funnels/FunnelStepMore.tsx
@@ -15,7 +15,7 @@ type FunnelStepMoreProps = {
export function FunnelStepMore({ stepIndex }: FunnelStepMoreProps): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { querySource } = useValues(funnelDataLogic(insightProps))
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
const filterProps = cleanFilters(queryNodeToFilter(querySource!))
const aggregationGroupTypeIndex = querySource?.aggregation_group_type_index
diff --git a/frontend/src/scenes/funnels/funnelDataLogic.ts b/frontend/src/scenes/funnels/funnelDataLogic.ts
index 024c41ac1e0d1..16b0c8e35924d 100644
--- a/frontend/src/scenes/funnels/funnelDataLogic.ts
+++ b/frontend/src/scenes/funnels/funnelDataLogic.ts
@@ -2,7 +2,6 @@ import { kea, path, props, key, connect, selectors, actions, reducers } from 'ke
import {
FunnelResultType,
FunnelVizType,
- FunnelStep,
FunnelStepReference,
FunnelStepWithNestedBreakdown,
InsightLogicProps,
@@ -164,7 +163,7 @@ export const funnelDataLogic = kea([
: breakdown?.breakdown ?? undefined
return aggregateBreakdownResult(results, breakdownProperty).sort((a, b) => a.order - b.order)
}
- return (results as FunnelStep[]).sort((a, b) => a.order - b.order)
+ return results.sort((a, b) => a.order - b.order)
} else {
return []
}
diff --git a/frontend/src/scenes/funnels/funnelUtils.ts b/frontend/src/scenes/funnels/funnelUtils.ts
index 8dfc6a0539e73..dcfd68f91470f 100644
--- a/frontend/src/scenes/funnels/funnelUtils.ts
+++ b/frontend/src/scenes/funnels/funnelUtils.ts
@@ -600,7 +600,7 @@ export const parseDisplayNameForCorrelation = (
first_value = autoCaptureEventToDescription({
...record.event,
event: '$autocapture',
- }) as string
+ })
return { first_value, second_value }
} else {
// FunnelCorrelationResultsType.EventWithProperties
diff --git a/frontend/src/scenes/groups/groupLogic.ts b/frontend/src/scenes/groups/groupLogic.ts
index dce2cfdc6e04b..bbdc071690c73 100644
--- a/frontend/src/scenes/groups/groupLogic.ts
+++ b/frontend/src/scenes/groups/groupLogic.ts
@@ -15,6 +15,7 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { loaders } from 'kea-loaders'
import { urlToAction } from 'kea-router'
+import { Scene } from 'scenes/sceneTypes'
function getGroupEventsQuery(groupTypeIndex: number, groupKey: string): DataTableNode {
return {
@@ -104,10 +105,17 @@ export const groupLogic = kea([
(s, p) => [s.groupTypeName, p.groupTypeIndex, p.groupKey, s.groupData],
(groupTypeName, groupTypeIndex, groupKey, groupData): Breadcrumb[] => [
{
+ key: Scene.DataManagement,
+ name: 'People',
+ path: urls.persons(),
+ },
+ {
+ key: groupTypeIndex,
name: capitalizeFirstLetter(groupTypeName),
path: urls.groups(String(groupTypeIndex)),
},
{
+ key: `${groupTypeIndex}-${groupKey}`,
name: groupDisplayId(groupKey, groupData?.group_properties || {}),
path: urls.group(String(groupTypeIndex), groupKey),
},
diff --git a/frontend/src/scenes/ingestion/CardContainer.tsx b/frontend/src/scenes/ingestion/CardContainer.tsx
deleted file mode 100644
index ed26c428d8101..0000000000000
--- a/frontend/src/scenes/ingestion/CardContainer.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PanelFooter } from './panels/PanelComponents'
-import './panels/Panels.scss'
-import { IngestionState } from 'scenes/ingestion/ingestionLogic'
-
-export function CardContainer({
- children,
- nextProps,
- onContinue,
- finalStep = false,
- showInviteTeamMembers = true,
-}: {
- children: React.ReactNode
- nextProps?: Partial
- onContinue?: () => void
- finalStep?: boolean
- showInviteTeamMembers?: boolean
-}): JSX.Element {
- return (
- // We want a forced width for this view only
- // eslint-disable-next-line react/forbid-dom-props
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/IngestionWizard.scss b/frontend/src/scenes/ingestion/IngestionWizard.scss
deleted file mode 100644
index e1d2b422bdf7c..0000000000000
--- a/frontend/src/scenes/ingestion/IngestionWizard.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.IngestionContainer {
- display: flex;
- height: 100%;
- align-items: center;
- justify-content: center;
- padding: 2rem;
- flex-direction: column;
- width: 100%;
-}
-
-.IngestionContent {
- .BridgePage__content {
- max-width: 700px;
- }
-}
-
-.IngestionTopbar {
- border-bottom: 1px solid var(--border);
- padding: 0.25rem 1rem;
- display: flex;
- justify-content: space-between;
- position: sticky;
- top: 0;
- background-color: white;
- width: 100%;
- z-index: 10;
-
- .help-button {
- margin-right: 1rem;
- }
-}
-
-.platform-item {
- margin-right: 10px;
- padding: 10px;
- padding-left: 20px;
- padding-right: 20px;
- border: 1px solid gray;
- border-radius: 2px;
- cursor: pointer;
-}
-
-.platform-item:hover {
- background-color: gainsboro;
-}
-
-.selectable-item:hover {
- background-color: gainsboro;
- cursor: pointer;
-}
-
-.IngestionSidebar__bottom {
- margin-top: auto;
-
- .popover {
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- }
-}
-
-.IngestionSidebar__help {
- display: flex;
- flex-direction: column;
- font-weight: 500;
- color: var(--primary);
- margin-top: 1rem;
-}
-
-.IngestionSidebar__steps {
- color: var(--muted-alt);
- font-size: 14px;
-
- .LemonButton {
- font-weight: 600;
- margin-bottom: 0.5rem;
- }
-}
diff --git a/frontend/src/scenes/ingestion/IngestionWizard.tsx b/frontend/src/scenes/ingestion/IngestionWizard.tsx
deleted file mode 100644
index 80c8d8c8690a2..0000000000000
--- a/frontend/src/scenes/ingestion/IngestionWizard.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useEffect } from 'react'
-import './IngestionWizard.scss'
-
-import { VerificationPanel } from 'scenes/ingestion/panels/VerificationPanel'
-import { InstructionsPanel } from 'scenes/ingestion/panels/InstructionsPanel'
-import { useValues, useActions } from 'kea'
-import { ingestionLogic, INGESTION_VIEWS } from 'scenes/ingestion/ingestionLogic'
-import { FrameworkPanel } from 'scenes/ingestion/panels/FrameworkPanel'
-import { PlatformPanel } from 'scenes/ingestion/panels/PlatformPanel'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { GeneratingDemoDataPanel } from './panels/GeneratingDemoDataPanel'
-import { ThirdPartyPanel } from './panels/ThirdPartyPanel'
-import { BillingPanel } from './panels/BillingPanel'
-import { Sidebar } from './Sidebar'
-import { InviteModal } from 'scenes/settings/organization/InviteModal'
-import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
-import { Logo } from '~/toolbar/assets/Logo'
-import { SitePopover } from '~/layout/navigation/TopBar/SitePopover'
-import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { BridgePage } from 'lib/components/BridgePage/BridgePage'
-import { PanelHeader } from './panels/PanelComponents'
-import { InviteTeamPanel } from './panels/InviteTeamPanel'
-import { TeamInvitedPanel } from './panels/TeamInvitedPanel'
-import { NoDemoIngestionPanel } from './panels/NoDemoIngestionPanel'
-import { SuperpowersPanel } from 'scenes/ingestion/panels/SuperpowersPanel'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { router } from 'kea-router'
-import { urls } from 'scenes/urls'
-
-export function IngestionWizard(): JSX.Element {
- const { currentView, platform } = useValues(ingestionLogic)
- const { reportIngestionLandingSeen } = useActions(eventUsageLogic)
- const { featureFlags } = useValues(featureFlagLogic)
-
- useEffect(() => {
- if (!platform) {
- reportIngestionLandingSeen()
- }
- }, [platform])
-
- if (featureFlags[FEATURE_FLAGS.PRODUCT_SPECIFIC_ONBOARDING] === 'test') {
- router.actions.replace(urls.products())
- }
-
- return (
-
- {currentView === INGESTION_VIEWS.BILLING &&
- )
-}
-
-function IngestionContainer({ children }: { children: React.ReactNode }): JSX.Element {
- const { isInviteModalShown } = useValues(inviteLogic)
- const { hideInviteModal } = useActions(inviteLogic)
- const { isSmallScreen } = useValues(ingestionLogic)
-
- return (
- 
- ),
- docsLink: 'https://posthog.com/docs/integrate/third-party/rudderstack',
- aboutLink: 'https://rudderstack.com',
- },
- {
- name: 'RSS items',
- description: 'Send events from releases, blog posts, status pages, or any other RSS feed into PostHog',
- icon:
- {'POST ' +
- url +
- '/capture/\nContent-Type: application/json\n\n{\n\t"api_key": "' +
- currentTeam?.api_token +
- '",\n\t"event": "[event name]",\n\t"properties": {\n\t\t"distinct_id": "[your users\' distinct id]",\n\t\t"key1": "value1",\n\t\t"key2": "value2"\n\t},\n\t"timestamp": "[optional timestamp in ISO 8601 format]"\n}'}
-
- )
-}
-
-export function APIInstructions(): JSX.Element {
- return (
- <>
-
- {`dependencies {
- implementation 'com.posthog.android:posthog:1.+'
-}`}
-
- )
-}
-
-function AndroidSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`public class SampleApp extends Application {
- private static final String POSTHOG_API_KEY = "${currentTeam?.api_token}";
- private static final String POSTHOG_HOST = "${window.location.origin}";
-
- @Override
- public void onCreate() {
- // Create a PostHog client with the given context, API key and host
- PostHog posthog = new PostHog.Builder(this, POSTHOG_API_KEY, POSTHOG_HOST)
- .captureApplicationLifecycleEvents() // Record certain application events automatically!
- .recordScreenViews() // Record screen views automatically!
- .build();
-
- // Set the initialized instance as a globally accessible instance
- PostHog.setSingletonInstance(posthog);
-
- // Now any time you call PostHog.with, the custom instance will be returned
- PostHog posthog = PostHog.with(this);
- }`}
-
- )
-}
-
-function AndroidCaptureSnippet(): JSX.Element {
- return PostHog.with(this).capture("test-event");
-}
-
-export function AndroidInstructions(): JSX.Element {
- return (
- <>
-
- {'def deps do\n [\n {:posthog, "~> 0.1"}\n ]\nend'}
-
- )
-}
-
-function ElixirSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
- const url = window.location.origin
-
- return (
-
- {'config :posthog,\n api_url: "' + url + '",\n api_key: "' + currentTeam?.api_token + '"'}
-
- )
-}
-
-export function ElixirInstructions(): JSX.Element {
- return (
- <>
- {'posthog_flutter: # insert version number'}
-}
-
-function FlutterCaptureSnippet(): JSX.Element {
- return (
-
- {
- "import 'package:posthog_flutter/posthog_flutter.dart';\n\nPosthog().screen(\n\tscreenName: 'Example Screen',\n);"
- }
-
- )
-}
-
-function FlutterAndroidSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
- const url = window.location.origin
-
- return (
-
- {'\n\t\n\t\t[...]\n\t \n\t '}
-
- )
-}
-
-function FlutterIOSSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
- const url = window.location.origin
-
- return (
-
- {'\n\t[...]\n\tcom.posthog.posthog.API_KEY \n\t' +
- currentTeam?.api_token +
- ' \n\tcom.posthog.posthog.POSTHOG_HOST \n\t' +
- url +
- ' \n\tcom.posthog.posthog.TRACK_APPLICATION_LIFECYCLE_EVENTS \n\t '}
-
- )
-}
-
-export function FlutterInstructions(): JSX.Element {
- return (
- <>
- {'go get "github.com/posthog/posthog-go"'}
-}
-
-function GoSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`package main
-import (
- "github.com/posthog/posthog-go"
-)
-func main() {
- client, _ := posthog.NewWithConfig("${currentTeam?.api_token}", posthog.Config{Endpoint: "${window.location.origin}"})
- defer client.Close()
-}`}
-
- )
-}
-
-function GoCaptureSnippet(): JSX.Element {
- return (
-
- {'client.Enqueue(posthog.Capture{\n DistinctId: "test-user",\n Event: "test-snippet",\n})'}
-
- )
-}
-
-export function GoInstructions(): JSX.Element {
- return (
- <>
-
- {`npm install posthog-node
-# OR
-yarn add posthog-node
-# OR
-pnpm add posthog-node`}
-
- )
-}
-
-function NodeSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`import { PostHog } from 'posthog-node'
-
-const client = new PostHog(
- '${currentTeam?.api_token}',
- { host: '${window.location.origin}' }
-)`}
-
- )
-}
-
-function NodeCaptureSnippet(): JSX.Element {
- return (
-
- {`client.capture({
- distinctId: 'test-id',
- event: 'test-event'
-})
-
-// Send queued events immediately. Use for example in a serverless environment
-// where the program may terminate before everything is sent
-client.flush()`}
-
- )
-}
-
-export function NodeInstructions(): JSX.Element {
- return (
- <>
-
- {`{
- "require": {
- "posthog/posthog-php": "1.0.*"
- }
-}`}
-
- )
-}
-
-function PHPInstallSnippet(): JSX.Element {
- return {'php composer.phar install'}
-}
-
-function PHPSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`PostHog::init('${currentTeam?.api_token}',
- array('host' => '${window.location.origin}')
-);`}
-
- )
-}
-
-function PHPCaptureSnippet(): JSX.Element {
- return (
-
- {"PostHog::capture(array(\n 'distinctId' => 'test-user',\n 'event' => 'test-event'\n));"}
-
- )
-}
-
-export function PHPInstructions(): JSX.Element {
- return (
- <>
- {'pip install posthog'}
-}
-
-function PythonSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`from posthog import Posthog
-
-posthog = Posthog(project_api_key='${currentTeam?.api_token}', host='${window.location.origin}')
-
- `}
-
- )
-}
-
-function PythonCaptureSnippet(): JSX.Element {
- return {"posthog.capture('test-id', 'test-event')"}
-}
-
-export function PythonInstructions(): JSX.Element {
- return (
- <>
-
- {`# Expo apps
-expo install posthog-react-native expo-file-system expo-application expo-device expo-localization
-
-# Standard React Native apps
-yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info
-# or
-npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info
-
-# for iOS
-cd ios
-pod install`}
-
-
- {`// App.(js|ts)
-import { PostHogProvider } from 'posthog-react-native'
-...
-
-export function MyApp() {
- return (
-
-
- )
-}`}
-
- {`// With hooks
-import { usePostHog } from 'posthog-react-native'
-
-const MyComponent = () => {
- const posthog = usePostHog()
-
- useEffect(() => {
- posthog.capture("MyComponent loaded", { foo: "bar" })
- }, [])
-}
- `}
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/frameworks/RubyInstructions.tsx b/frontend/src/scenes/ingestion/frameworks/RubyInstructions.tsx
deleted file mode 100644
index b3a944a8ff11f..0000000000000
--- a/frontend/src/scenes/ingestion/frameworks/RubyInstructions.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
-
-function RubyInstallSnippet(): JSX.Element {
- return {'gem "posthog-ruby"'}
-}
-
-function RubySetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`posthog = PostHog::Client.new({
- api_key: "${currentTeam?.api_token}",
- host: "${window.location.origin}",
- on_error: Proc.new { |status, msg| print msg }
-})`}
-
- )
-}
-
-function RubyCaptureSnippet(): JSX.Element {
- return (
-
- {"posthog.capture({\n distinct_id: 'test-id',\n event: 'test-event'})"}
-
- )
-}
-
-export function RubyInstructions(): JSX.Element {
- return (
- <>
-
- {['npm install posthog-js', '# OR', 'yarn add posthog-js', '# OR', 'pnpm add posthog-js'].join('\n')}
-
- )
-}
-
-function JSSetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {[
- "import posthog from 'posthog-js'",
- '',
- `posthog.init('${currentTeam?.api_token}', { api_host: '${window.location.origin}' })`,
- ].join('\n')}
-
- )
-}
-
-function JSEventSnippet(): JSX.Element {
- return (
- {`posthog.capture('my event', { property: 'value' })`}
- )
-}
-
-export function WebInstructions(): JSX.Element {
- return (
- <>
-
- {'pod "PostHog", "~> 1.0" # Cocoapods \n# OR \ngithub "posthog/posthog-ios" # Carthage'}
-
- )
-}
-
-function IOS_OBJ_C_SetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`#import \n#import \n\nPHGPostHogConfiguration *configuration = [PHGPostHogConfiguration configurationWithApiKey:@"${currentTeam?.api_token}" host:@"${window.location.origin}"];\n\nconfiguration.captureApplicationLifecycleEvents = YES; // Record certain application events automatically!\nconfiguration.recordScreenViews = YES; // Record screen views automatically!\n\n[PHGPostHog setupWithConfiguration:configuration];`}
-
- )
-}
-
-function IOS_SWIFT_SetupSnippet(): JSX.Element {
- const { currentTeam } = useValues(teamLogic)
-
- return (
-
- {`import PostHog\n\nlet configuration = PHGPostHogConfiguration(apiKey: "${currentTeam?.api_token}", host: "${window.location.origin}")\n\nconfiguration.captureApplicationLifecycleEvents = true; // Record certain application events automatically!\nconfiguration.recordScreenViews = true; // Record screen views automatically!\n\nPHGPostHog.setup(with: configuration)\nlet posthog = PHGPostHog.shared()`}
-
- )
-}
-
-function IOS_OBJ_C_CaptureSnippet(): JSX.Element {
- return (
-
- {'[[PHGPostHog sharedPostHog] capture:@"Test Event"];'}
-
- )
-}
-
-function IOS_SWIFT_CaptureSnippet(): JSX.Element {
- return {'posthog.capture("Test Event")'}
-}
-
-export function IOSInstructions(): JSX.Element {
- return (
- <>
- ([
- path(['scenes', 'ingestion', 'ingestionLogic']),
- connect({
- values: [
- featureFlagLogic,
- ['featureFlags'],
- teamLogic,
- ['currentTeam'],
- preflightLogic,
- ['preflight'],
- inviteLogic,
- ['isInviteModalShown'],
- ],
- actions: [
- teamLogic,
- ['updateCurrentTeamSuccess', 'createTeamSuccess'],
- inviteLogic,
- ['inviteTeamMembersSuccess'],
- ],
- }),
- actions({
- setState: ({
- isTechnicalUser,
- hasInvitedMembers,
- platform,
- framework,
- readyToVerify,
- showSuperpowers,
- showBilling,
- isDemoProject,
- generatingDemoData,
- }: IngestionState) => ({
- isTechnicalUser,
- hasInvitedMembers,
- platform,
- framework,
- readyToVerify,
- showSuperpowers,
- showBilling,
- isDemoProject,
- generatingDemoData,
- }),
- setInstructionsModal: (isOpen: boolean) => ({ isOpen }),
- setThirdPartySource: (sourceIndex: number) => ({ sourceIndex }),
- completeOnboarding: true,
- setCurrentStep: (currentStep: string) => ({ currentStep }),
- sidebarStepClick: (step: string) => ({ step }),
- next: (props: Partial) => props,
- onBack: true,
- goToView: (view: INGESTION_VIEWS) => ({ view }),
- setSidebarSteps: (steps: string[]) => ({ steps }),
- setPollTimeout: (pollTimeout: number) => ({ pollTimeout }),
- toggleProjectSwitcher: true,
- hideProjectSwitcher: true,
- }),
- windowValues({
- isSmallScreen: (window: Window) => window.innerWidth < getBreakpoint('md'),
- }),
- reducers({
- isTechnicalUser: [
- null as null | boolean,
- {
- setState: (_, { isTechnicalUser }) => isTechnicalUser,
- },
- ],
- hasInvitedMembers: [
- null as null | boolean,
- {
- setState: (_, { hasInvitedMembers }) => hasInvitedMembers,
- },
- ],
- platform: [
- null as null | PlatformType,
- {
- setState: (_, { platform }) => platform,
- },
- ],
- framework: [
- null as null | Framework,
- {
- setState: (_, { framework }) => (framework ? (framework.toUpperCase() as Framework) : null),
- },
- ],
- readyToVerify: [
- false,
- {
- setState: (_, { readyToVerify }) => readyToVerify,
- },
- ],
- showSuperpowers: [
- false,
- {
- setState: (_, { showSuperpowers }) => showSuperpowers,
- },
- ],
- showBilling: [
- false,
- {
- setState: (_, { showBilling }) => showBilling,
- },
- ],
- instructionsModalOpen: [
- false as boolean,
- {
- setInstructionsModal: (_, { isOpen }) => isOpen,
- },
- ],
- thirdPartyIntegrationSource: [
- null as ThirdPartySource | null,
- {
- setThirdPartySource: (_, { sourceIndex }) => thirdPartySources[sourceIndex],
- },
- ],
- sidebarSteps: [
- Object.values(INGESTION_STEPS_WITHOUT_BILLING) as string[],
- {
- setSidebarSteps: (_, { steps }) => steps,
- },
- ],
- isDemoProject: [
- false as null | boolean,
- {
- setState: (_, { isDemoProject }) => isDemoProject,
- },
- ],
- generatingDemoData: [
- false as boolean | null,
- {
- setState: (_, { generatingDemoData }) => generatingDemoData,
- },
- ],
- pollTimeout: [
- 0,
- {
- setPollTimeout: (_, payload) => payload.pollTimeout,
- },
- ],
- isProjectSwitcherShown: [
- false,
- {
- toggleProjectSwitcher: (state) => !state,
- hideProjectSwitcher: () => false,
- },
- ],
- }),
- loaders(({ actions, values }) => ({
- isDemoDataReady: [
- false as boolean,
- {
- checkIfDemoDataIsReady: async (_, breakpoint) => {
- await breakpoint(1)
-
- clearTimeout(values.pollTimeout)
-
- try {
- const res = await api.get('api/projects/@current/is_generating_demo_data')
- if (!res.is_generating_demo_data) {
- return true
- }
- const pollTimeoutMilliseconds = 1000
- const timeout = window.setTimeout(actions.checkIfDemoDataIsReady, pollTimeoutMilliseconds)
- actions.setPollTimeout(timeout)
- return false
- } catch (e) {
- return false
- }
- },
- },
- ],
- })),
- selectors(() => ({
- currentState: [
- (s) => [
- s.platform,
- s.framework,
- s.readyToVerify,
- s.showSuperpowers,
- s.showBilling,
- s.isTechnicalUser,
- s.hasInvitedMembers,
- s.isDemoProject,
- s.generatingDemoData,
- ],
- (
- platform,
- framework,
- readyToVerify,
- showSuperpowers,
- showBilling,
- isTechnicalUser,
- hasInvitedMembers,
- isDemoProject,
- generatingDemoData
- ) => ({
- platform,
- framework,
- readyToVerify,
- showSuperpowers,
- showBilling,
- isTechnicalUser,
- hasInvitedMembers,
- isDemoProject,
- generatingDemoData,
- }),
- ],
- currentView: [
- (s) => [s.currentState],
- ({
- isTechnicalUser,
- platform,
- framework,
- readyToVerify,
- showSuperpowers,
- showBilling,
- hasInvitedMembers,
- isDemoProject,
- generatingDemoData,
- }) => {
- if (isDemoProject) {
- return INGESTION_VIEWS.NO_DEMO_INGESTION
- }
- if (showBilling) {
- return INGESTION_VIEWS.BILLING
- }
- if (showSuperpowers) {
- return INGESTION_VIEWS.SUPERPOWERS
- }
- if (readyToVerify) {
- return INGESTION_VIEWS.VERIFICATION
- }
- if (isTechnicalUser) {
- if (!platform) {
- return INGESTION_VIEWS.CHOOSE_PLATFORM
- }
- if (framework || platform === WEB) {
- return INGESTION_VIEWS.WEB_INSTRUCTIONS
- }
- if (platform === MOBILE || platform === BACKEND) {
- return INGESTION_VIEWS.CHOOSE_FRAMEWORK
- }
- if (platform === THIRD_PARTY) {
- return INGESTION_VIEWS.CHOOSE_THIRD_PARTY
- }
- // could be null, so we check that it's set to false
- } else if (isTechnicalUser === false) {
- if (generatingDemoData) {
- return INGESTION_VIEWS.GENERATING_DEMO_DATA
- }
- if (hasInvitedMembers) {
- return INGESTION_VIEWS.TEAM_INVITED
- }
- if (!platform && !readyToVerify) {
- return INGESTION_VIEWS.INVITE_TEAM
- }
- }
- return INGESTION_VIEWS.INVITE_TEAM
- },
- ],
- currentStep: [
- (s) => [s.currentView],
- (currentView) => {
- return INGESTION_VIEW_TO_STEP[currentView]
- },
- ],
- previousStep: [
- (s) => [s.currentStep],
- (currentStep) => {
- const currentStepIndex = Object.values(INGESTION_STEPS).indexOf(currentStep)
- return Object.values(INGESTION_STEPS)[currentStepIndex - 1]
- },
- ],
- frameworkString: [
- (s) => [s.framework],
- (framework): string => {
- if (framework) {
- const frameworkStrings = {
- NODEJS: 'Node.js',
- GO: 'Go',
- RUBY: 'Ruby',
- PYTHON: 'Python',
- PHP: 'PHP',
- ELIXIR: 'Elixir',
- ANDROID: 'Android',
- IOS: 'iOS',
- REACT_NATIVE: 'React Native',
- FLUTTER: 'Flutter',
- API: 'HTTP API',
- }
- return frameworkStrings[framework] || framework
- }
- return ''
- },
- ],
- showBillingStep: [
- (s) => [s.preflight],
- (preflight): boolean => {
- return !!preflight?.cloud && !preflight?.demo
- },
- ],
- })),
-
- actionToUrl(({ values }) => ({
- setState: () => getUrl(values),
- updateCurrentTeamSuccess: (val) => {
- if (
- (router.values.location.pathname.includes(
- values.showBillingStep ? '/ingestion/billing' : '/ingestion/superpowers'
- ) ||
- router.values.location.pathname.includes('/ingestion/invites-sent')) &&
- val.payload?.completed_snippet_onboarding
- ) {
- return combineUrl(urls.events(), { onboarding_completed: true }).url
- }
- },
- })),
-
- urlToAction(({ actions, values }) => ({
- '/ingestion': () => actions.goToView(INGESTION_VIEWS.INVITE_TEAM),
- '/ingestion/invites-sent': () => actions.goToView(INGESTION_VIEWS.TEAM_INVITED),
- '/ingestion/superpowers': () => actions.goToView(INGESTION_VIEWS.SUPERPOWERS),
- '/ingestion/billing': () => actions.goToView(INGESTION_VIEWS.BILLING),
- '/ingestion/verify': () => actions.goToView(INGESTION_VIEWS.VERIFICATION),
- '/ingestion/platform': () => actions.goToView(INGESTION_VIEWS.CHOOSE_FRAMEWORK),
- '/ingestion(/:platform)(/:framework)': (pathParams, searchParams) => {
- const platform = pathParams.platform || searchParams.platform || null
- const framework = pathParams.framework || searchParams.framework || null
- actions.setState({
- isTechnicalUser: true,
- hasInvitedMembers: null,
- platform: platform,
- framework: framework,
- readyToVerify: false,
- showBilling: false,
- showSuperpowers: false,
- isDemoProject: values.isDemoProject,
- generatingDemoData: false,
- })
- },
- })),
- listeners(({ actions, values }) => ({
- next: (props) => {
- actions.setState({ ...values.currentState, ...props } as IngestionState)
- },
- goToView: ({ view }) => {
- actions.setState(viewToState(view, values.currentState as IngestionState))
- },
- completeOnboarding: () => {
- teamLogic.actions.updateCurrentTeam({
- completed_snippet_onboarding: true,
- })
- if (
- !values.currentTeam?.session_recording_opt_in ||
- !values.currentTeam?.capture_console_log_opt_in ||
- !values.currentTeam?.capture_performance_opt_in
- ) {
- eventUsageLogic.actions.reportIngestionRecordingsTurnedOff(
- !!values.currentTeam?.session_recording_opt_in,
- !!values.currentTeam?.capture_console_log_opt_in,
- !!values.currentTeam?.capture_performance_opt_in
- )
- }
- if (values.currentTeam?.autocapture_opt_out) {
- eventUsageLogic.actions.reportIngestionAutocaptureToggled(!!values.currentTeam?.autocapture_opt_out)
- }
- },
- setPlatform: ({ platform }) => {
- eventUsageLogic.actions.reportIngestionSelectPlatformType(platform)
- },
- setFramework: ({ framework }) => {
- eventUsageLogic.actions.reportIngestionSelectFrameworkType(framework)
- },
- sidebarStepClick: ({ step }) => {
- switch (step) {
- case INGESTION_STEPS.START:
- actions.goToView(INGESTION_VIEWS.INVITE_TEAM)
- return
- case INGESTION_STEPS.PLATFORM:
- actions.goToView(INGESTION_VIEWS.CHOOSE_PLATFORM)
- return
- case INGESTION_STEPS.CONNECT_PRODUCT:
- actions.goToView(INGESTION_VIEWS.CHOOSE_FRAMEWORK)
- return
- case INGESTION_STEPS.VERIFY:
- actions.goToView(INGESTION_VIEWS.VERIFICATION)
- return
- case INGESTION_STEPS.BILLING:
- actions.goToView(INGESTION_VIEWS.BILLING)
- return
- case INGESTION_STEPS.SUPERPOWERS:
- actions.goToView(INGESTION_VIEWS.SUPERPOWERS)
- return
- default:
- return
- }
- },
- onBack: () => {
- switch (values.currentView) {
- case INGESTION_VIEWS.BILLING:
- return actions.goToView(INGESTION_VIEWS.VERIFICATION)
- case INGESTION_VIEWS.SUPERPOWERS:
- return actions.goToView(INGESTION_VIEWS.CHOOSE_FRAMEWORK)
- case INGESTION_VIEWS.TEAM_INVITED:
- return actions.goToView(INGESTION_VIEWS.INVITE_TEAM)
- case INGESTION_VIEWS.CHOOSE_PLATFORM:
- return actions.goToView(INGESTION_VIEWS.INVITE_TEAM)
- case INGESTION_VIEWS.VERIFICATION:
- return actions.goToView(INGESTION_VIEWS.SUPERPOWERS)
- case INGESTION_VIEWS.WEB_INSTRUCTIONS:
- return actions.goToView(INGESTION_VIEWS.CHOOSE_PLATFORM)
- case INGESTION_VIEWS.CHOOSE_FRAMEWORK:
- return actions.goToView(INGESTION_VIEWS.CHOOSE_PLATFORM)
- // If they're on the InviteTeam step, but on the Team Invited panel,
- // we still want them to be able to go back to the previous step.
- // So this resets the state for that panel so they can go back.
- case INGESTION_VIEWS.INVITE_TEAM:
- return actions.goToView(INGESTION_VIEWS.INVITE_TEAM)
- case INGESTION_VIEWS.CHOOSE_THIRD_PARTY:
- return actions.goToView(INGESTION_VIEWS.CHOOSE_PLATFORM)
- default:
- return actions.goToView(INGESTION_VIEWS.INVITE_TEAM)
- }
- },
- inviteTeamMembersSuccess: () => {
- if (router.values.location.pathname.includes(urls.ingestion())) {
- actions.setState(viewToState(INGESTION_VIEWS.TEAM_INVITED, values.currentState as IngestionState))
- }
- },
- createTeamSuccess: ({ currentTeam }) => {
- if (window.location.href.includes(urls.ingestion()) && currentTeam.is_demo) {
- actions.checkIfDemoDataIsReady(null)
- } else {
- window.location.href = urls.ingestion()
- }
- },
- checkIfDemoDataIsReadySuccess: ({ isDemoDataReady }) => {
- if (isDemoDataReady) {
- window.location.href = urls.default()
- }
- },
- })),
- subscriptions(({ actions, values }) => ({
- showBillingStep: (value) => {
- const steps = value ? INGESTION_STEPS : INGESTION_STEPS_WITHOUT_BILLING
- actions.setSidebarSteps(Object.values(steps))
- },
- currentTeam: (currentTeam: TeamType) => {
- if (currentTeam?.ingested_event && values.readyToVerify && !values.showBillingStep) {
- actions.setCurrentStep(INGESTION_STEPS.DONE)
- }
- },
- })),
-])
-
-function getUrl(values: ingestionLogicType['values']): string | [string, Record] {
- const {
- isTechnicalUser,
- platform,
- framework,
- readyToVerify,
- showBilling,
- showSuperpowers,
- hasInvitedMembers,
- generatingDemoData,
- } = values
-
- let url = '/ingestion'
-
- if (showBilling) {
- return url + '/billing'
- }
-
- if (showSuperpowers) {
- url += '/superpowers'
- return [
- url,
- {
- platform: platform || undefined,
- framework: framework?.toLowerCase() || undefined,
- },
- ]
- }
-
- if (readyToVerify) {
- url += '/verify'
- return [
- url,
- {
- platform: platform || undefined,
- framework: framework?.toLowerCase() || undefined,
- },
- ]
- }
-
- if (isTechnicalUser) {
- if (framework === API) {
- url += '/api'
- return [
- url,
- {
- platform: platform || undefined,
- },
- ]
- }
-
- if (platform === MOBILE) {
- url += '/mobile'
- }
-
- if (platform === WEB) {
- url += '/web'
- }
-
- if (platform === BACKEND) {
- url += '/backend'
- }
-
- if (generatingDemoData) {
- url += '/just-exploring'
- }
-
- if (platform === THIRD_PARTY) {
- url += '/third-party'
- }
-
- if (!platform) {
- url += '/platform'
- }
-
- if (framework) {
- url += `/${framework.toLowerCase()}`
- }
- } else {
- if (!platform && hasInvitedMembers) {
- url += '/invites-sent'
- }
- }
-
- return url
-}
diff --git a/frontend/src/scenes/ingestion/panels/BillingPanel.tsx b/frontend/src/scenes/ingestion/panels/BillingPanel.tsx
deleted file mode 100644
index b42fef3eb9de0..0000000000000
--- a/frontend/src/scenes/ingestion/panels/BillingPanel.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useActions, useValues } from 'kea'
-import { CardContainer } from 'scenes/ingestion/CardContainer'
-import { ingestionLogic } from 'scenes/ingestion/ingestionLogic'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './Panels.scss'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { LemonDivider } from '@posthog/lemon-ui'
-import { billingLogic } from 'scenes/billing/billingLogic'
-import { Billing } from 'scenes/billing/Billing'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-
-export function BillingPanel(): JSX.Element {
- const { completeOnboarding } = useActions(ingestionLogic)
- const { reportIngestionContinueWithoutBilling } = useActions(eventUsageLogic)
- const { billing } = useValues(billingLogic)
-
- if (!billing) {
- return (
-
-
- )
- }
-
- const hasSubscribedToAllProducts = billing.products
- .filter((product) => !product.contact_support)
- .every((product) => product.subscribed)
- const hasSubscribedToAnyProduct = billing.products.some((product) => product.subscribed)
-
- return (
-
- {hasSubscribedToAllProducts ? (
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/FrameworkPanel.tsx b/frontend/src/scenes/ingestion/panels/FrameworkPanel.tsx
deleted file mode 100644
index 598012915577d..0000000000000
--- a/frontend/src/scenes/ingestion/panels/FrameworkPanel.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useActions, useValues } from 'kea'
-import { CardContainer } from 'scenes/ingestion/CardContainer'
-import { ingestionLogic } from '../ingestionLogic'
-import { API, mobileFrameworks, BACKEND, webFrameworks } from 'scenes/ingestion/constants'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './Panels.scss'
-import { IngestionInviteMembersButton } from '../IngestionInviteMembersButton'
-
-export function FrameworkPanel(): JSX.Element {
- const { next } = useActions(ingestionLogic)
- const { platform } = useValues(ingestionLogic)
- const frameworks = platform === BACKEND ? webFrameworks : mobileFrameworks
-
- return (
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/GeneratingDemoDataPanel.tsx b/frontend/src/scenes/ingestion/panels/GeneratingDemoDataPanel.tsx
deleted file mode 100644
index a568dd9a82340..0000000000000
--- a/frontend/src/scenes/ingestion/panels/GeneratingDemoDataPanel.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useValues } from 'kea'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { organizationLogic } from 'scenes/organizationLogic'
-import { CardContainer } from '../CardContainer'
-import './Panels.scss'
-
-export function GeneratingDemoDataPanel(): JSX.Element {
- const { currentOrganization } = useValues(organizationLogic)
- return (
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/InstructionsPanel.scss b/frontend/src/scenes/ingestion/panels/InstructionsPanel.scss
deleted file mode 100644
index 5d7b1c7ce4408..0000000000000
--- a/frontend/src/scenes/ingestion/panels/InstructionsPanel.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.InstructionsPanel {
- max-width: 50rem;
-
- h1 {
- font-size: 28px;
- font-weight: 800;
- line-height: 40px;
- letter-spacing: -0.02em;
- }
-
- h2 {
- font-size: 20px;
- font-weight: 800;
- line-height: 24px;
- letter-spacing: -0.02em;
- margin-top: 0.5rem;
- }
-
- h3 {
- font-size: 16px;
- font-weight: 700;
- line-height: 24px;
- letter-spacing: 0;
- margin-top: 0.5rem;
- }
-
- ol {
- padding-left: 1rem;
- }
-}
diff --git a/frontend/src/scenes/ingestion/panels/InstructionsPanel.tsx b/frontend/src/scenes/ingestion/panels/InstructionsPanel.tsx
deleted file mode 100644
index 390620eaf2493..0000000000000
--- a/frontend/src/scenes/ingestion/panels/InstructionsPanel.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import './InstructionsPanel.scss'
-import { CardContainer } from 'scenes/ingestion/CardContainer'
-import {
- AndroidInstructions,
- APIInstructions,
- ElixirInstructions,
- FlutterInstructions,
- GoInstructions,
- IOSInstructions,
- NodeInstructions,
- PHPInstructions,
- PythonInstructions,
- RNInstructions,
- RubyInstructions,
-} from 'scenes/ingestion/frameworks'
-import { API, MOBILE, BACKEND, WEB } from '../constants'
-import { useValues } from 'kea'
-import { ingestionLogic } from '../ingestionLogic'
-import { WebInstructions } from '../frameworks/WebInstructions'
-import { Link } from '@posthog/lemon-ui'
-
-const frameworksSnippet: Record = {
- NODEJS: NodeInstructions,
- GO: GoInstructions,
- RUBY: RubyInstructions,
- PYTHON: PythonInstructions,
- PHP: PHPInstructions,
- ELIXIR: ElixirInstructions,
- ANDROID: AndroidInstructions,
- IOS: IOSInstructions,
- REACT_NATIVE: RNInstructions,
- FLUTTER: FlutterInstructions,
- API: APIInstructions,
-}
-
-export function InstructionsPanel(): JSX.Element {
- const { platform, framework, frameworkString } = useValues(ingestionLogic)
-
- if (platform !== WEB && !framework) {
- return <>
- }
-
- const FrameworkSnippet: React.ComponentType = frameworksSnippet[framework as string] as React.ComponentType
-
- return (
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/PanelComponents.tsx b/frontend/src/scenes/ingestion/panels/PanelComponents.tsx
deleted file mode 100644
index 4d817149a280b..0000000000000
--- a/frontend/src/scenes/ingestion/panels/PanelComponents.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { useActions, useValues } from 'kea'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { ingestionLogic, INGESTION_STEPS, IngestionState } from '../ingestionLogic'
-import './Panels.scss'
-import { IconArrowLeft, IconChevronRight } from 'lib/lemon-ui/icons'
-import { IngestionInviteMembersButton } from '../IngestionInviteMembersButton'
-import { teamLogic } from 'scenes/teamLogic'
-import { organizationLogic } from 'scenes/organizationLogic'
-import { userLogic } from 'scenes/userLogic'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-
-const DEMO_TEAM_NAME: string = 'Hedgebox'
-
-export function PanelFooter({
- nextProps,
- onContinue,
- finalStep = false,
- showInviteTeamMembers = true,
-}: {
- nextProps: Partial
- onContinue?: () => void
- finalStep?: boolean
- showInviteTeamMembers?: boolean
-}): JSX.Element {
- const { next } = useActions(ingestionLogic)
-
- return (
- {
- // If the current org has a demo team, just navigate there
- if (currentOrganization?.teams && currentOrganization.teams.filter((team) => team.is_demo).length > 0) {
- updateCurrentTeam(currentOrganization.teams.filter((team) => team.is_demo)[0].id)
- } else {
- // Create a new demo team
- createTeam({ name: DEMO_TEAM_NAME, is_demo: true })
- next({ isTechnicalUser: false, generatingDemoData: true })
- reportProjectCreationSubmitted(
- currentOrganization?.teams ? currentOrganization.teams.length : 0,
- DEMO_TEAM_NAME.length
- )
- }
- reportIngestionTryWithDemoDataClicked()
- }}
- fullWidth
- size="large"
- className="ingestion-view-demo-data mb-4"
- type="secondary"
- sideIcon={
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/Panels.scss b/frontend/src/scenes/ingestion/panels/Panels.scss
deleted file mode 100644
index ca98aa806c405..0000000000000
--- a/frontend/src/scenes/ingestion/panels/Panels.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.FrameworkPanel {
- max-width: 400px;
-}
-
-.panel-footer {
- background-color: white;
- margin-bottom: 1rem;
- bottom: 0;
-}
-
-.ingestion-title {
- font-size: 28px;
- font-weight: 700;
- line-height: 40px;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- margin: 0;
-}
-
-.IngestionSubtitle {
- font-size: 20px;
- font-weight: 800;
- margin: 1rem 0;
-}
-
-.prompt-text {
- margin-top: 1rem;
-}
-
-.ingestion-listening-for-events {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- margin-bottom: 1rem;
-}
diff --git a/frontend/src/scenes/ingestion/panels/PlatformPanel.tsx b/frontend/src/scenes/ingestion/panels/PlatformPanel.tsx
deleted file mode 100644
index 5ee33d73597c5..0000000000000
--- a/frontend/src/scenes/ingestion/panels/PlatformPanel.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useActions } from 'kea'
-import { ingestionLogic } from '../ingestionLogic'
-import { THIRD_PARTY, platforms } from '../constants'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './Panels.scss'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { IngestionInviteMembersButton } from '../IngestionInviteMembersButton'
-
-export function PlatformPanel(): JSX.Element {
- const { next } = useActions(ingestionLogic)
-
- return (
- {
- updateCurrentTeam({
- session_recording_opt_in: sessionRecordingsChecked,
- capture_console_log_opt_in: sessionRecordingsChecked,
- capture_performance_opt_in: sessionRecordingsChecked,
- autocapture_opt_out: !autocaptureChecked,
- })
- if (!showBillingStep) {
- completeOnboarding()
- }
- }}
- finalStep={!showBillingStep}
- >
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/TeamInvitedPanel.tsx b/frontend/src/scenes/ingestion/panels/TeamInvitedPanel.tsx
deleted file mode 100644
index 5d6365d22c335..0000000000000
--- a/frontend/src/scenes/ingestion/panels/TeamInvitedPanel.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useActions } from 'kea'
-import { ingestionLogic } from 'scenes/ingestion/ingestionLogic'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './Panels.scss'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { IconChevronRight } from 'lib/lemon-ui/icons'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { DemoProjectButton } from './PanelComponents'
-
-export function TeamInvitedPanel(): JSX.Element {
- const { completeOnboarding } = useActions(ingestionLogic)
- const { reportIngestionContinueWithoutVerifying } = useActions(eventUsageLogic)
-
- return (
- ): JSX.Element => {
- return (
-
- )
-}
-
-export const RSS = (props: React.SVGProps): JSX.Element => {
- return (
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/ThirdPartyPanel.tsx b/frontend/src/scenes/ingestion/panels/ThirdPartyPanel.tsx
deleted file mode 100644
index 8fd51654aafb9..0000000000000
--- a/frontend/src/scenes/ingestion/panels/ThirdPartyPanel.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { useValues, useActions } from 'kea'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { CardContainer } from '../CardContainer'
-import { ingestionLogic } from '../ingestionLogic'
-import './Panels.scss'
-import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { thirdPartySources } from '../constants'
-import { IconOpenInNew } from 'lib/lemon-ui/icons'
-import { CodeSnippet } from 'lib/components/CodeSnippet'
-import { teamLogic } from 'scenes/teamLogic'
-import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { Link } from '@posthog/lemon-ui'
-
-export function ThirdPartyPanel(): JSX.Element {
- const { setInstructionsModal, setThirdPartySource } = useActions(ingestionLogic)
- const { reportIngestionThirdPartyAboutClicked, reportIngestionThirdPartyConfigureClicked } =
- useActions(eventUsageLogic)
-
- return (
-
-
- )
-}
-
-export function IntegrationInstructionsModal(): JSX.Element {
- const { instructionsModalOpen, thirdPartyIntegrationSource } = useValues(ingestionLogic)
- const { setInstructionsModal } = useActions(ingestionLogic)
- const { currentTeam } = useValues(teamLogic)
-
- return (
- <>
- {thirdPartyIntegrationSource?.name && (
- setInstructionsModal(false)}
- title="Configure integration"
- footer={
- setInstructionsModal(false)}>
- Done
-
- }
- >
-
- )}
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/VerificationPanel.tsx b/frontend/src/scenes/ingestion/panels/VerificationPanel.tsx
deleted file mode 100644
index a6138f22fa438..0000000000000
--- a/frontend/src/scenes/ingestion/panels/VerificationPanel.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useActions, useValues } from 'kea'
-import { useInterval } from 'lib/hooks/useInterval'
-import { CardContainer } from '../CardContainer'
-import { ingestionLogic } from '../ingestionLogic'
-import { teamLogic } from 'scenes/teamLogic'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './Panels.scss'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { IngestionInviteMembersButton } from '../IngestionInviteMembersButton'
-
-export function VerificationPanel(): JSX.Element {
- const { loadCurrentTeam } = useActions(teamLogic)
- const { currentTeam } = useValues(teamLogic)
- const { next } = useActions(ingestionLogic)
- const { reportIngestionContinueWithoutVerifying } = useActions(eventUsageLogic)
-
- useInterval(() => {
- if (!currentTeam?.ingested_event) {
- loadCurrentTeam()
- }
- }, 2000)
-
- return !currentTeam?.ingested_event ? (
-
-
- ) : (
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/types.ts b/frontend/src/scenes/ingestion/types.ts
deleted file mode 100644
index 7d64652d8cdb5..0000000000000
--- a/frontend/src/scenes/ingestion/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { API, MOBILE, mobileFrameworks, BACKEND, WEB, webFrameworks, THIRD_PARTY } from 'scenes/ingestion/constants'
-
-export type Framework = keyof typeof webFrameworks | keyof typeof mobileFrameworks | typeof API | null
-
-export type PlatformType = typeof WEB | typeof MOBILE | typeof BACKEND | typeof THIRD_PARTY | null
diff --git a/frontend/src/scenes/insights/Insight.scss b/frontend/src/scenes/insights/Insight.scss
index 72c588db18842..e0c6b1dd0f13b 100644
--- a/frontend/src/scenes/insights/Insight.scss
+++ b/frontend/src/scenes/insights/Insight.scss
@@ -10,11 +10,3 @@
}
}
}
-
-.insight-metadata-tags {
- margin-top: 0.5rem;
-
- .ant-tag {
- margin-top: 0;
- }
-}
diff --git a/frontend/src/scenes/insights/InsightPageHeader.tsx b/frontend/src/scenes/insights/InsightPageHeader.tsx
index e6ba4ea5b9f2f..c123af4ac782e 100644
--- a/frontend/src/scenes/insights/InsightPageHeader.tsx
+++ b/frontend/src/scenes/insights/InsightPageHeader.tsx
@@ -256,7 +256,7 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
- deleteWithUndo({
+ void deleteWithUndo({
object: insight,
endpoint: `projects/${currentTeamId}/insights`,
callback: () => {
@@ -345,14 +345,14 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
saving={insightSaving}
onChange={(_, tags) => setInsightMetadata({ tags: tags ?? [] })}
tagsAvailable={tags}
- className="insight-metadata-tags"
+ className="mt-2"
data-attr="insight-tags"
/>
) : insight.tags?.length ? (
, testcase.candidate)).toEqual(
testcase.expected
)
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/entityFilterLogic.ts b/frontend/src/scenes/insights/filters/ActionFilter/entityFilterLogic.ts
index 9c59d413c9a21..6e6cfc856b639 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/entityFilterLogic.ts
+++ b/frontend/src/scenes/insights/filters/ActionFilter/entityFilterLogic.ts
@@ -113,7 +113,7 @@ export const entityFilterLogic = kea([
},
],
localFilters: [
- toLocalFilters(props.filters ?? {}) as LocalFilter[],
+ toLocalFilters(props.filters ?? {}),
{
setLocalFilters: (_, { filters }) => toLocalFilters(filters),
},
@@ -176,9 +176,7 @@ export const entityFilterLogic = kea([
},
updateFilterProperty: async ({ properties, index }) => {
actions.setFilters(
- values.localFilters.map(
- (filter, i) => (i === index ? { ...filter, properties } : filter) as LocalFilter
- )
+ values.localFilters.map((filter, i) => (i === index ? { ...filter, properties } : filter))
)
},
updateFilterMath: async ({ index, ...mathProperties }) => {
diff --git a/frontend/src/scenes/insights/filters/AggregationSelect.tsx b/frontend/src/scenes/insights/filters/AggregationSelect.tsx
index 766860da847a8..97104d7f22315 100644
--- a/frontend/src/scenes/insights/filters/AggregationSelect.tsx
+++ b/frontend/src/scenes/insights/filters/AggregationSelect.tsx
@@ -4,7 +4,7 @@ import { LemonSelect, LemonSelectSection } from '@posthog/lemon-ui'
import { groupsAccessLogic } from 'lib/introductions/groupsAccessLogic'
import { GroupIntroductionFooter } from 'scenes/groups/GroupsIntroduction'
import { InsightLogicProps } from '~/types'
-import { isFunnelsQuery, isInsightQueryNode } from '~/queries/utils'
+import { isFunnelsQuery, isInsightQueryNode, isLifecycleQuery, isStickinessQuery } from '~/queries/utils'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { FunnelsQuery } from '~/queries/schema'
import { HogQLEditor } from 'lib/components/HogQLEditor/HogQLEditor'
@@ -51,7 +51,9 @@ export function AggregationSelect({
}
const value = getHogQLValue(
- querySource.aggregation_group_type_index,
+ isLifecycleQuery(querySource) || isStickinessQuery(querySource)
+ ? undefined
+ : querySource.aggregation_group_type_index,
isFunnelsQuery(querySource) ? querySource.funnelsFilter?.funnel_aggregate_by_hogql : undefined
)
const onChange = (value: string): void => {
diff --git a/frontend/src/scenes/insights/insightDataTimingLogic.ts b/frontend/src/scenes/insights/insightDataTimingLogic.ts
index d84ce7b8e240f..688c0bf4a7fba 100644
--- a/frontend/src/scenes/insights/insightDataTimingLogic.ts
+++ b/frontend/src/scenes/insights/insightDataTimingLogic.ts
@@ -51,8 +51,7 @@ export const insightDataTimingLogic = kea([
}
const duration = performance.now() - values.queryStartTimes[payload.queryId]
-
- captureTimeToSeeData(values.currentTeamId, {
+ void captureTimeToSeeData(values.currentTeamId, {
type: 'insight_load',
context: 'insight',
primary_interaction_id: payload.queryId,
@@ -66,6 +65,7 @@ export const insightDataTimingLogic = kea([
insight: values.query.kind,
is_primary_interaction: true,
})
+
actions.removeQuery(payload.queryId)
},
loadDataFailure: ({ errorObject }) => {
@@ -75,8 +75,7 @@ export const insightDataTimingLogic = kea([
}
const duration = performance.now() - values.queryStartTimes[errorObject.queryId]
-
- captureTimeToSeeData(values.currentTeamId, {
+ void captureTimeToSeeData(values.currentTeamId, {
type: 'insight_load',
context: 'insight',
primary_interaction_id: errorObject.queryId,
@@ -90,12 +89,12 @@ export const insightDataTimingLogic = kea([
insight: values.query.kind,
is_primary_interaction: true,
})
+
actions.removeQuery(errorObject.queryId)
},
loadDataCancellation: (payload) => {
const duration = performance.now() - values.queryStartTimes[payload.queryId]
-
- captureTimeToSeeData(values.currentTeamId, {
+ void captureTimeToSeeData(values.currentTeamId, {
type: 'insight_load',
context: 'insight',
primary_interaction_id: payload.queryId,
@@ -107,6 +106,7 @@ export const insightDataTimingLogic = kea([
api_response_bytes: 0,
insight: values.query.kind,
})
+
actions.removeQuery(payload.queryId)
},
})),
diff --git a/frontend/src/scenes/insights/insightSceneLogic.test.ts b/frontend/src/scenes/insights/insightSceneLogic.test.ts
index 15749a0d4caf4..1d8b623a087c2 100644
--- a/frontend/src/scenes/insights/insightSceneLogic.test.ts
+++ b/frontend/src/scenes/insights/insightSceneLogic.test.ts
@@ -49,7 +49,7 @@ describe('insightSceneLogic', () => {
location: partial({ pathname: urls.insightNew(), search: '', hash: '' }),
})
- await expect(logic.values.insightLogicRef?.logic.values.filters.insight).toEqual(InsightType.FUNNELS)
+ expect(logic.values.insightLogicRef?.logic.values.filters.insight).toEqual(InsightType.FUNNELS)
})
it('persists edit mode in the url', async () => {
diff --git a/frontend/src/scenes/insights/insightSceneLogic.tsx b/frontend/src/scenes/insights/insightSceneLogic.tsx
index 3ff71b3e53720..e626919fe5c95 100644
--- a/frontend/src/scenes/insights/insightSceneLogic.tsx
+++ b/frontend/src/scenes/insights/insightSceneLogic.tsx
@@ -85,14 +85,19 @@ export const insightSceneLogic = kea([
insightSelector: [(s) => [s.insightLogicRef], (insightLogicRef) => insightLogicRef?.logic.selectors.insight],
insight: [(s) => [(state, props) => s.insightSelector?.(state, props)?.(state, props)], (insight) => insight],
breadcrumbs: [
- (s) => [s.insight],
- (insight): Breadcrumb[] => [
+ (s) => [s.insight, s.insightLogicRef],
+ (insight, insightLogicRef): Breadcrumb[] => [
{
- name: 'Insights',
+ key: Scene.SavedInsights,
+ name: 'Product analytics',
path: urls.savedInsights(),
},
{
+ key: insight?.short_id || 'new',
name: insight?.name || insight?.derived_name || 'Unnamed',
+ onRename: async (name: string) => {
+ await insightLogicRef?.logic.asyncActions.setInsightMetadata({ name })
+ },
},
],
],
diff --git a/frontend/src/scenes/insights/insightVizDataLogic.ts b/frontend/src/scenes/insights/insightVizDataLogic.ts
index 62fd9dddc8c5a..4b9c09fb8bc00 100644
--- a/frontend/src/scenes/insights/insightVizDataLogic.ts
+++ b/frontend/src/scenes/insights/insightVizDataLogic.ts
@@ -16,7 +16,6 @@ import {
FunnelsQuery,
InsightFilter,
InsightQueryNode,
- InsightVizNode,
Node,
NodeKind,
TrendsFilter,
@@ -169,6 +168,7 @@ export const insightVizDataLogic = kea([
showLegend: [(s) => [s.querySource], (q) => (q ? getShowLegend(q) : null)],
showValueOnSeries: [(s) => [s.querySource], (q) => (q ? getShowValueOnSeries(q) : null)],
showPercentStackView: [(s) => [s.querySource], (q) => (q ? getShowPercentStackView(q) : null)],
+ vizSpecificOptions: [(s) => [s.query], (q: Node) => (isInsightVizNode(q) ? q.vizSpecificOptions : null)],
insightFilter: [(s) => [s.querySource], (q) => (q ? filterForQuery(q) : null)],
trendsFilter: [(s) => [s.querySource], (q) => (isTrendsQuery(q) ? q.trendsFilter : null)],
@@ -343,7 +343,7 @@ export const insightVizDataLogic = kea([
setQuery: ({ query }) => {
if (isInsightVizNode(query)) {
if (props.setQuery) {
- props.setQuery(query as InsightVizNode)
+ props.setQuery(query)
}
const querySource = query.source
diff --git a/frontend/src/scenes/insights/sharedUtils.ts b/frontend/src/scenes/insights/sharedUtils.ts
index 109a77e398aed..fa0c33b799745 100644
--- a/frontend/src/scenes/insights/sharedUtils.ts
+++ b/frontend/src/scenes/insights/sharedUtils.ts
@@ -45,7 +45,7 @@ export function filterTrendsClientSideParams(
return newFilters
}
-export function isTrendsInsight(insight?: InsightType | InsightType): boolean {
+export function isTrendsInsight(insight?: InsightType): boolean {
return insight === InsightType.TRENDS || insight === InsightType.LIFECYCLE || insight === InsightType.STICKINESS
}
diff --git a/frontend/src/scenes/insights/summarizeInsight.ts b/frontend/src/scenes/insights/summarizeInsight.ts
index 2ab9196c52862..2efd49cf79677 100644
--- a/frontend/src/scenes/insights/summarizeInsight.ts
+++ b/frontend/src/scenes/insights/summarizeInsight.ts
@@ -1,5 +1,5 @@
import { AnyPartialFilterType, EntityFilter, FilterType, FunnelVizType, StepOrderValue } from '~/types'
-import { BreakdownFilter, InsightQueryNode, Node, StickinessQuery } from '~/queries/schema'
+import { BreakdownFilter, InsightQueryNode, Node } from '~/queries/schema'
import { KEY_MAPPING } from 'lib/taxonomy'
import { toLocalFilters } from 'scenes/insights/filters/ActionFilter/entityFilterLogic'
import {
@@ -272,7 +272,7 @@ function summarizeInsightQuery(query: InsightQueryNode, context: SummaryContext)
return summary
} else if (isStickinessQuery(query)) {
return capitalizeFirstLetter(
- (query as StickinessQuery).series
+ query.series
.map((s) => {
const actor = context.aggregationLabel(s.math_group_type_index, true).singular
return `${actor} stickiness based on ${getDisplayNameFromEntityNode(s)}`
diff --git a/frontend/src/scenes/insights/views/Histogram/Histogram.scss b/frontend/src/scenes/insights/views/Histogram/Histogram.scss
index e6d3138958889..2742347145d09 100644
--- a/frontend/src/scenes/insights/views/Histogram/Histogram.scss
+++ b/frontend/src/scenes/insights/views/Histogram/Histogram.scss
@@ -61,7 +61,7 @@
* Bars
*/
g#bars {
- fill: var(--funnel-default);
+ fill: var(--primary-3000);
}
g#labels {
diff --git a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss
index 1ce975beb6fd1..4158e729c4915 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss
+++ b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss
@@ -3,7 +3,7 @@
align-items: center;
.edit-icon {
- color: var(--primary);
+ color: var(--primary-3000);
cursor: pointer;
font-size: 1rem;
}
@@ -13,7 +13,7 @@
cursor: pointer;
.EntityFilterInfo {
- color: var(--primary);
+ color: var(--primary-3000);
font-weight: 500;
}
}
diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
index dd8cb8a418aa7..568ecadebd755 100644
--- a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
+++ b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -37,6 +37,7 @@ import { SeriesLetter } from 'lib/components/SeriesGlyph'
import { TrendsFilter } from '~/queries/schema'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import ChartjsPluginStacked100, { ExtendedChartData } from 'chartjs-plugin-stacked100'
+import clsx from 'clsx'
let tooltipRoot: Root
@@ -189,7 +190,7 @@ function createPinstripePattern(color: string): CanvasPattern {
const canvas = document.createElement('canvas')
canvas.width = 1
canvas.height = stripeWidth * 2
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
const ctx = canvas.getContext('2d')!
// fill the canvas with given color
@@ -201,7 +202,7 @@ function createPinstripePattern(color: string): CanvasPattern {
ctx.fillRect(0, stripeWidth, 1, 2 * stripeWidth)
// create a canvas pattern and rotate it
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
const pattern = ctx.createPattern(canvas, 'repeat')!
const xAx = Math.cos(stripeAngle)
const xAy = Math.sin(stripeAngle)
@@ -697,11 +698,19 @@ export function LineGraph_({
precision,
autoSkip: true,
callback: function _renderYLabel(_, i) {
- const labelDescriptors = [
- datasets?.[0]?.actions?.[i]?.custom_name ?? datasets?.[0]?.actions?.[i]?.name, // action name
- datasets?.[0]?.breakdownValues?.[i], // breakdown value
- datasets?.[0]?.compareLabels?.[i], // compare value
- ].filter((l) => !!l)
+ const labelDescriptors = (
+ datasets?.[0]?.labels?.[i]
+ ? [
+ // prefer to use the label over the action name if it exists
+ datasets?.[0]?.labels?.[i],
+ datasets?.[0]?.compareLabels?.[i],
+ ]
+ : [
+ datasets?.[0]?.actions?.[i]?.custom_name ?? datasets?.[0]?.actions?.[i]?.name, // action name
+ datasets?.[0]?.breakdownValues?.[i], // breakdown value
+ datasets?.[0]?.compareLabels?.[i], // compare value
+ ]
+ ).filter((l) => !!l)
return labelDescriptors.join(' - ')
},
},
@@ -725,7 +734,10 @@ export function LineGraph_({
}, [datasets, hiddenLegendKeys, isDarkModeOn, trendsFilter, formula, showValueOnSeries, showPercentStackView])
return (
-
+
+
{variants.map((variant, index) => (
Variant key
+ Description
+
+
+
Payload
-
+
Specify return payload when the variant key matches
-
-
+ Rollout
(Redistribute)
-
-
+
+
+
-
-
-
-
{({ value, onChange }) => {
return (
@@ -966,8 +964,8 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
)
}}
-
-
{({ value, onChange }) => (
-
-
- {variants.length > 1 && (
-
-
-
+
+
@@ -1012,28 +1010,25 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
)}
+ {variants.length > 1 && (
+
+
{sentryErrorCount ? (
- {humanFriendlyNumber(sentryErrorCount as number)} sentry
- errors in the past 24 hours.{' '}
+ {humanFriendlyNumber(sentryErrorCount)} Sentry errors in the
+ past 24 hours.{' '}
) : (
-
{index > 0 &&
)
}
@@ -327,7 +327,7 @@ export function FeatureFlagReleaseConditions({
const hasMatchingEarlyAccessFeature = featureFlag.features?.find((f: any) => f.flagKey === featureFlag.key)
return (
-
)}
OR
}
@@ -244,7 +244,7 @@ export function FeatureFlagReleaseConditions({
{
- updateConditionSet(index, value as number)
+ updateConditionSet(index, value)
}}
value={group.rollout_percentage != null ? group.rollout_percentage : 100}
min={0}
@@ -314,7 +314,7 @@ export function FeatureFlagReleaseConditions({
)}
-
+
{index > 0 &&
-
+
)
}
@@ -456,11 +456,11 @@ export function FeatureFlagReleaseConditions({
OR
}
@@ -386,7 +386,7 @@ export function FeatureFlagReleaseConditions({
{filterGroups.map((group, index) =>
isSuper ? renderSuperReleaseConditionGroup(group, index) : renderReleaseConditionGroup(group, index)
)}
-
+
{!readOnly && (
- {children}
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/IngestionInviteMembersButton.tsx b/frontend/src/scenes/ingestion/IngestionInviteMembersButton.tsx
deleted file mode 100644
index 439390bd83164..0000000000000
--- a/frontend/src/scenes/ingestion/IngestionInviteMembersButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { LemonButton } from '@posthog/lemon-ui'
-import { useActions } from 'kea'
-import { IconArrowRight } from 'lib/lemon-ui/icons'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
-
-export function IngestionInviteMembersButton(): JSX.Element {
- const { showInviteModal } = useActions(inviteLogic)
- const { reportInviteMembersButtonClicked } = useActions(eventUsageLogic)
-
- return (
-
- {nextProps && (
-
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/Sidebar.tsx b/frontend/src/scenes/ingestion/Sidebar.tsx
deleted file mode 100644
index b3f656cee12e7..0000000000000
--- a/frontend/src/scenes/ingestion/Sidebar.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { ingestionLogic } from './ingestionLogic'
-import { useActions, useValues } from 'kea'
-import './IngestionWizard.scss'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
-import { IconArticle, IconQuestionAnswer } from 'lib/lemon-ui/icons'
-import { HelpType } from '~/types'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
-import { Lettermark } from 'lib/lemon-ui/Lettermark'
-import { organizationLogic } from 'scenes/organizationLogic'
-import { Link } from '@posthog/lemon-ui'
-
-const HELP_UTM_TAGS = '?utm_medium=in-product-onboarding&utm_campaign=help-button-sidebar'
-
-export function Sidebar(): JSX.Element {
- const { currentStep, sidebarSteps, isProjectSwitcherShown } = useValues(ingestionLogic)
- const { sidebarStepClick, toggleProjectSwitcher, hideProjectSwitcher } = useActions(ingestionLogic)
- const { reportIngestionHelpClicked, reportIngestionSidebarButtonClicked } = useActions(eventUsageLogic)
- const { currentOrganization } = useValues(organizationLogic)
-
- const currentIndex = sidebarSteps.findIndex((x) => x === currentStep)
-
- return (
-
-
-
-
-
- {!isSmallScreen &&
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/constants.tsx b/frontend/src/scenes/ingestion/constants.tsx
deleted file mode 100644
index 50fefffadbf4a..0000000000000
--- a/frontend/src/scenes/ingestion/constants.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { PlatformType } from 'scenes/ingestion/types'
-import { Segment, RSS } from './panels/ThirdPartyIcons'
-
-export const TECHNICAL = 'TECHNICAL'
-export const PLATFORM_TYPE = 'PLATFORM_TYPE'
-export const FRAMEWORK = 'FRAMEWORK'
-export const INSTRUCTIONS = 'INSTRUCTIONS'
-export const VERIFICATION = 'VERIFICATION'
-
-export const WEB = 'web'
-export const MOBILE = 'mobile'
-export const BACKEND = 'backend'
-export const THIRD_PARTY = 'third-party'
-export const platforms: PlatformType[] = [WEB, MOBILE, BACKEND]
-
-export const NODEJS = 'NODEJS'
-export const GO = 'GO'
-export const RUBY = 'RUBY'
-export const PYTHON = 'PYTHON'
-export const PHP = 'PHP'
-export const ELIXIR = 'ELIXIR'
-export const API = 'API'
-
-export const ANDROID = 'ANDROID'
-export const IOS = 'IOS'
-export const REACT_NATIVE = 'REACT_NATIVE'
-export const FLUTTER = 'FLUTTER'
-
-export const httpFrameworks = {
- [API]: 'HTTP API',
-}
-export const webFrameworks = {
- [NODEJS]: 'Node.js',
- [GO]: 'Go',
- [RUBY]: 'Ruby',
- [PYTHON]: 'Python',
- [PHP]: 'PHP',
- [ELIXIR]: 'Elixir',
-}
-
-export const mobileFrameworks = {
- [ANDROID]: 'Android',
- [IOS]: 'iOS',
- [REACT_NATIVE]: 'React Native',
- [FLUTTER]: 'Flutter',
-}
-
-export const allFrameworks = {
- ...webFrameworks,
- ...mobileFrameworks,
- ...httpFrameworks,
-}
-export interface ThirdPartySource {
- name: string
- icon: JSX.Element
- docsLink: string
- aboutLink: string
- labels?: string[]
- description?: string
-}
-
-export const thirdPartySources: ThirdPartySource[] = [
- {
- name: 'Segment',
- icon:
-
-
- {sidebarSteps.map((step: string, index: number) => (
- currentIndex}
- onClick={() => {
- sidebarStepClick(step)
- reportIngestionSidebarButtonClicked(step)
- }}
- >
- {step}
-
- ))}
-
-
- {currentOrganization?.teams && currentOrganization.teams.length > 1 && (
- <>
-
-
-
-
-
- ),
- docsLink: 'https://posthog.com/docs/integrate/third-party/rudderstack',
- aboutLink: 'https://rudderstack.com',
- },
- {
- name: 'RSS items',
- description: 'Send events from releases, blog posts, status pages, or any other RSS feed into PostHog',
- icon: Usage
-Install
-Configure
-Send an Event
-Install
-Configure
-Install
-Android Setup
-{'Add these values in AndroidManifest.xml'}
-iOS Setup
-{'Add these values in Info.plist'}
-Send an Event
-Install
-Configure
-Send an Event
-Install
-Configure
-Send an Event
-Dependency Setup
-Install
-Configure
-Send an Event
-Install
-Configure
-Send an Event
-Install
-Configure
-
- PostHog is most easily used via the PostHogProvider component but if you need to
- instantiate it directly,{' '}
-
- check out the docs
- {' '}
- which explain how to do this correctly.
-
Send an Event
-Install
-Configure
-Send an Event
-Connect your web app or product
-
-
- Option 1. Code snippet
-
- Recommended
-
- - Just add this snippet to your website and we'll automatically capture page views, sessions and all - relevant interactions within your website.{' '} - - Learn more - - . -
-Install the snippet
-
- Insert this snippet in your website within the <head> tag.
Send events
-Visit your site and click around to generate some initial events.
-
-
- Option 2. Javascript Library
-- Use this option if you want more granular control of how PostHog runs in your website and the events you - capture. Recommended for teams with more stable products and more defined analytics requirements.{' '} - - Learn more - - . -
-Install the package
-- Configure & initialize (see more{' '} - - configuration options - - ) -
-Send your first event
-Install
-Configure Swift
-Or configure Objective-C
-Send an event with swift
-Send an event with Objective-C
-
-
-
- {
- completeOnboarding()
- }}
- >
- Complete
-
-
- ) : (
- You're good to go!
- -- Your organisation is setup for billing with premium features and the increased free tiers - enabled. -
-
- {
- completeOnboarding()
- !hasSubscribedToAnyProduct && reportIngestionContinueWithoutBilling()
- }}
- >
- {hasSubscribedToAnyProduct ? 'Continue' : 'Skip for now'}
-
-
- )}
- Subscribe for access to all features
-
-
- - {platform === BACKEND ? 'Choose the framework your app is built in' : 'Pick a mobile platform'} -
-- We'll provide you with snippets that you can easily add to your codebase to get started! -
-
- {(Object.keys(frameworks) as (keyof typeof frameworks)[]).map((item) => (
- next({ framework: item })}
- >
- {frameworks[item]}
-
- ))}
- next({ framework: API })}
- >
- Other
-
-
-
-
-
-
- We're using a demo project. Your other {currentOrganization?.name} projects won't be
- affected.
-
-
-
-
- Generating demo data...
-- Your demo data is on the way! This can take up to one minute - we'll redirect you when your demo - data is ready. -
-
- {platform === WEB ? (
-
-
- ) : framework === API ? (
-
-
- ) : (
-
-
- )}
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/InviteTeamPanel.tsx b/frontend/src/scenes/ingestion/panels/InviteTeamPanel.tsx
deleted file mode 100644
index c6a30c5cf484f..0000000000000
--- a/frontend/src/scenes/ingestion/panels/InviteTeamPanel.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useActions } from 'kea'
-import { ingestionLogic } from 'scenes/ingestion/ingestionLogic'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './Panels.scss'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { IconChevronRight } from 'lib/lemon-ui/icons'
-import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { DemoProjectButton } from './PanelComponents'
-
-export function InviteTeamPanel(): JSX.Element {
- const { next } = useActions(ingestionLogic)
- const { showInviteModal } = useActions(inviteLogic)
- const { reportInviteMembersButtonClicked } = useActions(eventUsageLogic)
-
- return (
- {frameworkString}
-- Need a different framework? Our HTTP API is a flexible way to use PostHog anywhere. Try the - endpoint below to send your first event, and view our API docs{' '} - here. -
-{`Setup ${frameworkString}`}
- - {platform === BACKEND ? ( - <> -- Follow the instructions below to send custom events from your {frameworkString} backend. -
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/NoDemoIngestionPanel.tsx b/frontend/src/scenes/ingestion/panels/NoDemoIngestionPanel.tsx
deleted file mode 100644
index 722ba20e9e603..0000000000000
--- a/frontend/src/scenes/ingestion/panels/NoDemoIngestionPanel.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { LemonButton } from '@posthog/lemon-ui'
-import { useActions, useValues } from 'kea'
-import { IconArrowRight } from 'lib/lemon-ui/icons'
-import { organizationLogic } from 'scenes/organizationLogic'
-import { userLogic } from 'scenes/userLogic'
-import { CardContainer } from '../CardContainer'
-import './Panels.scss'
-
-export function NoDemoIngestionPanel(): JSX.Element {
- const { currentOrganization } = useValues(organizationLogic)
- const { updateCurrentTeam } = useActions(userLogic)
-
- return (
- Welcome to PostHog
-- PostHog enables you to understand your customers, answer product questions, and test new features{' '} - - all in our comprehensive product suite. To get started, we'll need to add a code snippet to your - product. -
-
- next({ isTechnicalUser: true })}
- fullWidth
- size="large"
- className="mb-4"
- type="primary"
- sideIcon={
- {
- showInviteModal()
- reportInviteMembersButtonClicked()
- }}
- fullWidth
- size="large"
- className="mb-4"
- type="secondary"
- sideIcon={
-
-
-
- I can add a code snippet to my product.
-- Available for JavaScript, Android, iOS, React Native, Node.js, Ruby, Go, and more. -
-
-
- I'll need a team member to add the code snippet to our product.
-- We'll send an invite and instructions for getting the code snippet added. -
-
-
- Whoops!
-- New events can't be ingested into a demo project. But, you can switch to another project if you'd - like: -
-
- {currentOrganization?.teams
- ?.filter((team) => !team.is_demo)
- .map((team) => (
-
-
-
-
- )
-}
-
-export function PanelHeader(): JSX.Element | null {
- const { isSmallScreen, previousStep, currentStep, hasInvitedMembers } = useValues(ingestionLogic)
- const { onBack } = useActions(ingestionLogic)
-
- // no back buttons on the Getting Started step
- // but only if it's not the MembersInvited panel
- // (since they'd want to be able to go back from there)
- if (currentStep === INGESTION_STEPS.START && !hasInvitedMembers) {
- return null
- }
-
- return (
-
- {
- onContinue && onContinue()
- next(nextProps)
- }}
- >
- {finalStep ? 'Complete' : 'Continue'}
-
- {showInviteTeamMembers &&
-
-
- )
-}
-
-export function DemoProjectButton({ text, subtext }: { text: string; subtext?: string }): JSX.Element {
- const { next } = useActions(ingestionLogic)
- const { createTeam } = useActions(teamLogic)
- const { currentOrganization } = useValues(organizationLogic)
- const { updateCurrentTeam } = useActions(userLogic)
- const { reportIngestionTryWithDemoDataClicked, reportProjectCreationSubmitted } = useActions(eventUsageLogic)
- const { featureFlags } = useValues(featureFlagLogic)
-
- if (featureFlags[FEATURE_FLAGS.ONBOARDING_V2_DEMO] !== 'test') {
- return <>
- }
- return (
-
-
- - {currentOrganization?.teams && currentOrganization.teams.filter((team) => team.is_demo).length > 0 - ? 'Explore the demo project' - : text} -
- {subtext ?{subtext}
: null} -
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/SuperpowersPanel.tsx b/frontend/src/scenes/ingestion/panels/SuperpowersPanel.tsx
deleted file mode 100644
index 5ec5cad19e87e..0000000000000
--- a/frontend/src/scenes/ingestion/panels/SuperpowersPanel.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { LemonSwitch, Link } from '@posthog/lemon-ui'
-import { CardContainer } from 'scenes/ingestion/CardContainer'
-import { useActions, useValues } from 'kea'
-import { SupportHeroHog } from 'lib/components/hedgehogs'
-import { useState } from 'react'
-import { teamLogic } from 'scenes/teamLogic'
-import { ingestionLogic } from '../ingestionLogic'
-
-export function SuperpowersPanel(): JSX.Element {
- const { updateCurrentTeam } = useActions(teamLogic)
- const { showBillingStep } = useValues(ingestionLogic)
- const { completeOnboarding } = useActions(ingestionLogic)
- const [sessionRecordingsChecked, setSessionRecordingsChecked] = useState(true)
- const [autocaptureChecked, setAutocaptureChecked] = useState(true)
-
- return (
- Where do you want to send events from?
-- With PostHog, you can collect events from nearly anywhere. Select one to start, and you can always add - more sources later. -
-
- {platforms.map((platform) => (
- next({ platform })}
- >
- {platform}
-
- ))}
- next({ platform: THIRD_PARTY })}
- fullWidth
- center
- size="large"
- className="mb-2"
- type="primary"
- >
- Import events from a third party
-
-
-
-
-
-
- Enable your product superpowers
-- Collecting events from your app is just the first step toward building great products. PostHog - gives you other superpowers, too, like recording user sessions and automagically capturing - frontend interactions. -
-
-
-
- {
- setSessionRecordingsChecked(checked)
- }}
- label="Record user sessions"
- fullWidth={true}
- labelClassName={'text-base font-semibold'}
- checked={sessionRecordingsChecked}
- />
-
- - See recordings of how your users are really using your product with powerful features like error - tracking, filtering, and analytics.{' '} - - Learn more - {' '} - about Session recordings. -
-
- {
- setAutocaptureChecked(checked)
- }}
- label="Autocapture frontend interactions"
- fullWidth={true}
- labelClassName={'text-base font-semibold'}
- checked={autocaptureChecked}
- />
-
- - If you use our JavaScript or React Native libraries, we'll automagically capture frontend - interactions like pageviews, clicks, and more.{' '} - - Fine-tune what you capture - {' '} - directly in your code snippet. -
-
-
- )
-}
diff --git a/frontend/src/scenes/ingestion/panels/ThirdPartyIcons.tsx b/frontend/src/scenes/ingestion/panels/ThirdPartyIcons.tsx
deleted file mode 100644
index 1ebb0e6545346..0000000000000
--- a/frontend/src/scenes/ingestion/panels/ThirdPartyIcons.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-export const Segment = (props: React.SVGPropsHelp is on the way!
-You can still explore PostHog while you wait for your team members to join.
-
- {
- completeOnboarding()
- reportIngestionContinueWithoutVerifying()
- }}
- fullWidth
- size="large"
- className="mb-4"
- type="secondary"
- sideIcon={
-
-
-
- Continue without any events.
-- It might look a little empty in there, but we'll do our best. -
-
-
- Set up third-party integrations
- {thirdPartySources.map((source, idx) => { - return ( -
-
- )
- })}
-
-
-
-
- {source.icon}
-
-
- {source.name} Import
- {source.labels?.map((label, labelIdx) => (
-
-
-
- {source.name} Import
- {source.labels?.map((label, labelIdx) => (
-
- {label}
-
- ))}
-
- - {source.description - ? source.description - : `Send events from ${source.name} into PostHog`} -
-
- {
- reportIngestionThirdPartyAboutClicked(source.name)
- }}
- >
- About
-
- {
- setThirdPartySource(idx)
- setInstructionsModal(true)
- reportIngestionThirdPartyConfigureClicked(source.name)
- }}
- >
- Configure
-
-
-
- window.open(thirdPartyIntegrationSource.aboutLink)}
- sideIcon={
-
- - {thirdPartyIntegrationSource.icon} - Integrate with {thirdPartyIntegrationSource.name} -
-
-
-
- {currentTeam?.api_token || ''}
-
- - The{' '} - - {thirdPartyIntegrationSource.name} docs page for the PostHog integration - {' '} - provides a detailed overview of how to set up this integration. -
- PostHog Project API Key -
-
- Steps:
--
-
- Complete the steps for the {thirdPartyIntegrationSource.name} integration. -
- - Close this step and click continue to begin listening for events. - -
-
-
- {
- next({ showSuperpowers: true })
- reportIngestionContinueWithoutVerifying()
- }}
- >
- or continue without verifying
-
-
- Listening for events...
-- Once you have integrated the snippet and sent an event, we will verify it was properly received - and continue. -
-
-
-
-
- Successfully sent events!
-- You will now be able to explore PostHog and take advantage of all its features to understand - your users. -
-
+
{showAnnotations && myLineChart && chartWidth && chartHeight ? (
([
],
}),
events(({ actions, values }) => ({
- afterMount: async () => {
+ afterMount: () => {
if (values.featureFlags[FEATURE_FLAGS.FUNNELS_CUE_OPT_OUT]) {
actions.setPermanentOptOut()
}
diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss b/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
index d8f9bffe605e7..e4ae155aede2f 100644
--- a/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
+++ b/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
@@ -10,7 +10,7 @@
fill-rule: evenodd;
&:hover {
- color: var(--primary-dark) !important;
+ color: var(--primary-3000-hover) !important;
}
}
}
diff --git a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss
index 2ee530fe2d87a..8f90c06671cf0 100644
--- a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss
+++ b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss
@@ -5,7 +5,7 @@
// Weird hack - this fixes chrome from not correctly identifying the bounds of the component for the drag preview
// https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628
transform: translate3d(0, 0, 0);
- outline: 1px solid var(--primary);
+ outline: 1px solid var(--primary-3000);
background-color: var(--bg-light);
}
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
index 9dad747b777d3..2490bbea971c9 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx
@@ -43,7 +43,7 @@ const Component = (props: NodeViewProps): JSX.Element => {
>
openNotebook(shortId, NotebookTarget.Popover)}
+ onClick={() => void openNotebook(shortId, NotebookTarget.Popover)}
target={undefined}
className="space-x-1"
>
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeCohort.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeCohort.tsx
index 60fa028e0814a..fd5aad3420b5e 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeCohort.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeCohort.tsx
@@ -9,7 +9,7 @@ import { useEffect, useMemo } from 'react'
import clsx from 'clsx'
import { NotFound } from 'lib/components/NotFound'
import { cohortEditLogic } from 'scenes/cohorts/cohortEditLogic'
-import { IconCohort, IconPerson, InsightsTrendsIcon } from 'lib/lemon-ui/icons'
+import { IconPeople, IconPerson, IconTrends } from '@posthog/icons'
import { Query } from '~/queries/Query/Query'
import { LemonDivider, LemonTag } from '@posthog/lemon-ui'
import { DataTableNode, NodeKind } from '~/queries/schema'
@@ -71,7 +71,7 @@ const Component = ({ attributes }: NotebookNodeProps
- {cohort.is_static ? 'Static' : 'Dynamic'}
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeEarlyAccessFeature.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeEarlyAccessFeature.tsx
index 94304f7f7e2f4..1d220f64c2214 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeEarlyAccessFeature.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeEarlyAccessFeature.tsx
@@ -131,7 +131,7 @@ export const NotebookNodeEarlyAccessFeature = createPostHogWidgetNode {
- return { id: match[1] as EarlyAccessFeatureLogicProps['id'] }
+ return { id: match[1] }
},
},
})
diff --git a/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts b/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
index e7b397f5e9d50..9fa2e7013196e 100644
--- a/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
+++ b/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
@@ -265,7 +265,7 @@ export const notebookNodeLogic = kea([
},
})),
- afterMount(async (logic) => {
+ afterMount((logic) => {
const { props, actions, values } = logic
props.notebookLogic.actions.registerNodeLogic(values.nodeId, logic as any)
diff --git a/frontend/src/scenes/notebooks/Nodes/utils.tsx b/frontend/src/scenes/notebooks/Nodes/utils.tsx
index bae565e55ce49..ede8239000f4d 100644
--- a/frontend/src/scenes/notebooks/Nodes/utils.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/utils.tsx
@@ -28,14 +28,13 @@ export function posthogNodePasteRule(options: {
handler: ({ match, chain, range }) => {
if (match.input) {
chain().deleteRange(range).run()
- Promise.resolve(options.getAttributes(match)).then((attributes) => {
- if (attributes) {
- options.editor.commands.insertContent({
- type: options.type.name,
- attrs: attributes,
- })
- }
- })
+ const attributes = options.getAttributes(match)
+ if (attributes) {
+ options.editor.commands.insertContent({
+ type: options.type.name,
+ attrs: attributes,
+ })
+ }
}
},
})
diff --git a/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx b/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx
index c6b90ee6a781b..f18450d3b3525 100644
--- a/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx
@@ -122,7 +122,7 @@ export const Mentions = forwardRef(function SlashCom
status="primary-alt"
icon={(fu
status="primary-alt"
size="small"
active={selectedIndex === -1 && selectedHorizontalIndex === index}
- onClick={async () => await execute(item)}
+ onClick={() => void execute(item)}
icon={item.icon}
/>
))}
@@ -479,7 +477,7 @@ export const SlashCommands = forwardRef(fu
status="primary-alt"
icon={item.icon}
active={index === selectedIndex}
- onClick={async () => await execute(item)}
+ onClick={() => void execute(item)}
>
{item.title}
diff --git a/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts b/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts
index e87521c26ad87..0ffea49bab2d3 100644
--- a/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts
+++ b/frontend/src/scenes/notebooks/Notebook/notebookLogic.ts
@@ -80,6 +80,7 @@ export const notebookLogic = kea([
clearPreviewContent: true,
loadNotebook: true,
saveNotebook: (notebook: Pick) => ({ notebook }),
+ renameNotebook: (title: string) => ({ title }),
setEditingNodeId: (editingNodeId: string | null) => ({ editingNodeId }),
exportJSON: true,
showConflictWarning: true,
@@ -265,6 +266,13 @@ export const notebookLogic = kea([
}
}
},
+ renameNotebook: async ({ title }) => {
+ if (!values.notebook) {
+ return values.notebook
+ }
+ const response = await api.notebooks.update(values.notebook.short_id, { title })
+ return response
+ },
},
],
diff --git a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss
index d4a2460692e24..5cd1a52a8ca02 100644
--- a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss
+++ b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss
@@ -40,7 +40,7 @@
}
&--active {
- border-color: var(--primary);
+ border-color: var(--primary-3000);
height: 8rem;
.NotebookPanelDropzone__message {
diff --git a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss
index ba0ab7a664877..4534f030b9bf5 100644
--- a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss
+++ b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss
@@ -121,7 +121,7 @@
}
&--active {
- border-color: var(--primary);
+ border-color: var(--primary-3000);
height: 8rem;
.NotebookPanelDropzone__message {
@@ -131,7 +131,7 @@
&--dropped {
padding: 1rem;
- border-color: var(--primary);
+ border-color: var(--primary-3000);
background-color: var(--bg-light);
height: 100%;
justify-content: flex-start;
diff --git a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
index d240cf1179a53..a22692be85990 100644
--- a/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
+++ b/frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.tsx
@@ -85,9 +85,9 @@ export function NotebookSelectList(props: NotebookSelectProps): JSX.Element {
const { setShowPopover, setSearchQuery, loadNotebooksContainingResource, loadAllNotebooks } = useActions(logic)
const { createNotebook } = useActions(notebooksModel)
- const openAndAddToNotebook = async (notebookShortId: string, exists: boolean): Promise => {
+ const openAndAddToNotebook = (notebookShortId: string, exists: boolean): void => {
const position = props.resource ? 'end' : 'start'
- await openNotebook(notebookShortId, NotebookTarget.Popover, position, (theNotebookLogic) => {
+ void openNotebook(notebookShortId, NotebookTarget.Popover, position, (theNotebookLogic) => {
if (!exists && props.resource) {
theNotebookLogic.actions.insertAfterLastNode([props.resource])
}
@@ -168,9 +168,9 @@ export function NotebookSelectList(props: NotebookSelectProps): JSX.Element {
emptyState={
searchQuery.length ? 'No matching notebooks' : 'Not already in any notebooks'
}
- onClick={async (notebookShortId) => {
+ onClick={(notebookShortId) => {
setShowPopover(false)
- await openAndAddToNotebook(notebookShortId, true)
+ openAndAddToNotebook(notebookShortId, true)
}}
/>
{
+ onClick={(notebookShortId) => {
setShowPopover(false)
- await openAndAddToNotebook(notebookShortId, false)
+ openAndAddToNotebook(notebookShortId, false)
}}
/>
diff --git a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx
index 169fb46aeced8..1a2a5ddba8919 100644
--- a/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx
+++ b/frontend/src/scenes/notebooks/NotebooksTable/NotebooksTable.tsx
@@ -115,7 +115,7 @@ export function NotebooksTable(): JSX.Element {
Created by:
({
value: x.user.uuid,
label: x.user.first_name,
diff --git a/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts b/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts
index d65d055617987..8bc07b7f2bee8 100644
--- a/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts
+++ b/frontend/src/scenes/notebooks/NotebooksTable/notebooksTableLogic.ts
@@ -32,7 +32,7 @@ export const notebooksTableLogic = kea([
}),
reducers({
filters: [
- DEFAULT_FILTERS as NotebooksListFilters,
+ DEFAULT_FILTERS,
{
setFilters: (state, { filters }) =>
objectClean({
diff --git a/frontend/src/scenes/notebooks/notebookSceneLogic.ts b/frontend/src/scenes/notebooks/notebookSceneLogic.ts
index 2d8656ddd5447..073dabbabe899 100644
--- a/frontend/src/scenes/notebooks/notebookSceneLogic.ts
+++ b/frontend/src/scenes/notebooks/notebookSceneLogic.ts
@@ -5,6 +5,7 @@ import type { notebookSceneLogicType } from './notebookSceneLogicType'
import { notebookLogic } from './Notebook/notebookLogic'
import { urls } from 'scenes/urls'
import { notebooksModel } from '~/models/notebooksModel'
+import { Scene } from 'scenes/sceneTypes'
export type NotebookSceneLogicProps = {
shortId: string
@@ -17,7 +18,7 @@ export const notebookSceneLogic = kea([
values: [notebookLogic(props), ['notebook', 'notebookLoading'], notebooksModel, ['notebooksLoading']],
actions: [notebookLogic(props), ['loadNotebook'], notebooksModel, ['createNotebook']],
})),
- selectors(() => ({
+ selectors(({ props }) => ({
notebookId: [() => [(_, props) => props], (props): string => props.shortId],
loading: [
@@ -29,11 +30,18 @@ export const notebookSceneLogic = kea([
(s) => [s.notebook, s.loading],
(notebook, loading): Breadcrumb[] => [
{
+ key: Scene.Notebooks,
name: 'Notebooks',
path: urls.notebooks(),
},
{
- name: notebook ? notebook?.title || 'Unnamed' : loading ? 'Loading...' : 'Notebook not found',
+ key: notebook?.short_id || 'new',
+ name: notebook ? notebook?.title || 'Unnamed' : loading ? null : 'Notebook not found',
+ onRename: !notebook?.is_template
+ ? async (title: string) => {
+ await notebookLogic(props).asyncActions.renameNotebook(title)
+ }
+ : undefined,
},
],
],
diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx
index 50a1ff9f25956..96badaa09ce95 100644
--- a/frontend/src/scenes/onboarding/Onboarding.tsx
+++ b/frontend/src/scenes/onboarding/Onboarding.tsx
@@ -1,9 +1,6 @@
import { SceneExport } from 'scenes/sceneTypes'
import { useActions, useValues } from 'kea'
import { useEffect, useState } from 'react'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { urls } from 'scenes/urls'
import { OnboardingStepKey, onboardingLogic } from './onboardingLogic'
import { SDKs } from './sdks/SDKs'
import { ProductKey } from '~/types'
@@ -120,15 +117,8 @@ const SurveysOnboarding = (): JSX.Element => {
}
export function Onboarding(): JSX.Element | null {
- const { featureFlags } = useValues(featureFlagLogic)
const { product } = useValues(onboardingLogic)
- useEffect(() => {
- if (featureFlags[FEATURE_FLAGS.PRODUCT_SPECIFIC_ONBOARDING] !== 'test') {
- location.href = urls.ingestion()
- }
- }, [])
-
if (!product) {
return <>
}
diff --git a/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
index 552a490688887..70e7852a70e44 100644
--- a/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
+++ b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
@@ -6,7 +6,7 @@ import { OnboardingStepKey, onboardingLogic } from './onboardingLogic'
import { BillingProductV2Type } from '~/types'
import { Spinner } from 'lib/lemon-ui/Spinner'
import { BillingHero } from 'scenes/billing/BillingHero'
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonBanner, LemonButton } from '@posthog/lemon-ui'
import { getUpgradeProductLink } from 'scenes/billing/billing-utils'
import { billingProductLogic } from 'scenes/billing/billingProductLogic'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
@@ -25,6 +25,7 @@ export const OnboardingBillingStep = ({
const { currentAndUpgradePlans } = useValues(billingProductLogic({ product }))
const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
const plan = currentAndUpgradePlans?.upgradePlan
+ const currentPlan = currentAndUpgradePlans?.currentPlan
return (
{product.subscribed ? (
-
+
([
allOnboardingSteps: [
[] as AllOnboardingSteps,
{
- setAllOnboardingSteps: (_, { allOnboardingSteps }) => allOnboardingSteps as AllOnboardingSteps,
+ setAllOnboardingSteps: (_, { allOnboardingSteps }) => allOnboardingSteps,
},
],
stepKey: [
@@ -84,7 +84,7 @@ export const onboardingLogic = kea([
},
],
onCompleteOnboardingRedirectUrl: [
- urls.default() as string,
+ urls.default(),
{
setProductKey: (_, { productKey }) => {
return productKey ? getProductUri(productKey as ProductKey) : urls.default()
@@ -153,7 +153,9 @@ export const onboardingLogic = kea([
}),
listeners(({ actions, values }) => ({
loadBillingSuccess: () => {
- actions.setProduct(values.billing?.products.find((p) => p.type === values.productKey) || null)
+ if (window.location.pathname.startsWith('/onboarding')) {
+ actions.setProduct(values.billing?.products.find((p) => p.type === values.productKey) || null)
+ }
},
setProduct: ({ product }) => {
if (!product) {
@@ -205,7 +207,7 @@ export const onboardingLogic = kea([
}
},
resetStepKey: () => {
- actions.setStepKey(values.allOnboardingSteps[0].props.stepKey)
+ values.allOnboardingSteps[0] && actions.setStepKey(values.allOnboardingSteps[0]?.props.stepKey)
},
})),
actionToUrl(({ values }) => ({
diff --git a/frontend/src/scenes/paths/PathNodeCardButton.tsx b/frontend/src/scenes/paths/PathNodeCardButton.tsx
index 9923b6f2eac19..0bb86e403890e 100644
--- a/frontend/src/scenes/paths/PathNodeCardButton.tsx
+++ b/frontend/src/scenes/paths/PathNodeCardButton.tsx
@@ -9,6 +9,7 @@ import { copyToClipboard } from 'lib/utils'
import { pageUrl, PathNodeData } from './pathUtils'
import { pathsDataLogicType } from './pathsDataLogicType'
+import { captureException } from '@sentry/react'
type PathNodeCardButton = {
name: string
@@ -40,8 +41,8 @@ export function PathNodeCardButton({
const viewFunnel = (): void => {
viewPathToFunnel(node)
}
- const copyName = async (): Promise => {
- await copyToClipboard(pageUrl(node))
+ const copyName = (): void => {
+ void copyToClipboard(pageUrl(node)).then(captureException)
}
const openModal = (): void => openPersonsModal({ path_end_key: name })
diff --git a/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx b/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx
index 0e1202affc14c..c2e1fac031681 100644
--- a/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx
+++ b/frontend/src/scenes/persons-management/personsManagementSceneLogic.tsx
@@ -13,6 +13,7 @@ import { LemonButton } from '@posthog/lemon-ui'
import type { personsManagementSceneLogicType } from './personsManagementSceneLogicType'
import { Groups } from 'scenes/groups/Groups'
+import { Scene } from 'scenes/sceneTypes'
export type PersonsManagementTab = {
key: string
@@ -51,7 +52,7 @@ export const personsManagementSceneLogic = kea(
{
key: 'persons',
url: urls.persons(),
- label: 'Persons',
+ label: 'People',
content: (
(tabs, activeTab): Breadcrumb[] => {
return [
{
+ key: Scene.PersonsManagement,
name: `People`,
path: tabs[0].url,
},
activeTab
? {
+ key: activeTab.key,
name: activeTab.label,
path: activeTab.url,
}
: {
+ key: 'loading',
name: 'Loading...',
},
]
diff --git a/frontend/src/scenes/persons/PersonScene.scss b/frontend/src/scenes/persons/PersonScene.scss
index b22eea07f7361..e555d6434aecb 100644
--- a/frontend/src/scenes/persons/PersonScene.scss
+++ b/frontend/src/scenes/persons/PersonScene.scss
@@ -5,7 +5,7 @@
line-height: 1.125rem;
margin: 0 0 0 0.25rem;
padding: 0 0.25rem 0 0.375rem;
- color: var(--primary);
+ color: var(--primary-3000);
cursor: pointer;
svg {
diff --git a/frontend/src/scenes/persons/personsLogic.tsx b/frontend/src/scenes/persons/personsLogic.tsx
index 136d69f317baf..f5b6d0e6b333f 100644
--- a/frontend/src/scenes/persons/personsLogic.tsx
+++ b/frontend/src/scenes/persons/personsLogic.tsx
@@ -24,6 +24,7 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
import { asDisplay } from './person-utils'
import { hogqlQuery } from '~/queries/query'
+import { Scene } from 'scenes/sceneTypes'
export interface PersonsLogicProps {
cohort?: number | 'new'
@@ -246,12 +247,14 @@ export const personsLogic = kea([
const showPerson = person && location.pathname.match(/\/person\/.+/)
const breadcrumbs: Breadcrumb[] = [
{
- name: 'Persons',
+ key: Scene.PersonsManagement,
+ name: 'People',
path: urls.persons(),
},
]
if (showPerson) {
breadcrumbs.push({
+ key: person.id || 'unknown',
name: asDisplay(person),
})
}
diff --git a/frontend/src/scenes/pipeline/Pipeline.stories.tsx b/frontend/src/scenes/pipeline/Pipeline.stories.tsx
index 639cf3d1d8cea..97b8f668fa4f7 100644
--- a/frontend/src/scenes/pipeline/Pipeline.stories.tsx
+++ b/frontend/src/scenes/pipeline/Pipeline.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react'
import { App } from 'scenes/App'
import { router } from 'kea-router'
import { urls } from 'scenes/urls'
-import { PipelineTabs } from '~/types'
+import { PipelineAppTabs, PipelineTabs } from '~/types'
import { pipelineLogic } from './pipelineLogic'
import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
@@ -58,3 +58,29 @@ export function PipelineTransformationsPage(): JSX.Element {
}, [])
return = {
+ [PipelineAppTabs.Configuration]:
-
+
{pluginConfig.name}
@@ -153,7 +158,9 @@ export function Transformations(): JSX.Element {
}
>
-
+
Error
@@ -207,7 +214,10 @@ export function Transformations(): JSX.Element {
)}
@@ -215,7 +225,7 @@ export function Transformations(): JSX.Element {
@@ -223,7 +233,7 @@ export function Transformations(): JSX.Element {
@@ -244,7 +254,7 @@ export function Transformations(): JSX.Element {
{
- deleteWithUndo({
+ void deleteWithUndo({
endpoint: `plugin_config`,
object: {
id: pluginConfig.id,
diff --git a/frontend/src/scenes/pipeline/__mocks__/pluginLogs.json b/frontend/src/scenes/pipeline/__mocks__/pluginLogs.json
new file mode 100644
index 0000000000000..09fa96824bf74
--- /dev/null
+++ b/frontend/src/scenes/pipeline/__mocks__/pluginLogs.json
@@ -0,0 +1,29 @@
+{
+ "count": 2,
+ "next": null,
+ "previous": null,
+ "results": [
+ {
+ "id": "018bb51f-0f9f-0000-34ae-d3aa1d9a5770",
+ "team_id": 1,
+ "plugin_id": 1,
+ "plugin_config_id": 11,
+ "timestamp": "2023-11-09T17:26:33.626000Z",
+ "source": "PLUGIN",
+ "type": "ERROR",
+ "message": "Error: Received an unexpected error from the endpoint API. Response 400: {\"meta\":{\"errors\":[\"value for attribute '$current_url' cannot be longer than 1000 bytes\"]}}\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)",
+ "instance_id": "12345678-1234-1234-1234-123456789012"
+ },
+ {
+ "id": "018bb51e-262a-0000-eb34-39afd4691d56",
+ "team_id": 1,
+ "plugin_id": 1,
+ "plugin_config_id": 11,
+ "timestamp": "2023-11-09T17:25:33.790000Z",
+ "source": "PLUGIN",
+ "type": "INFO",
+ "message": "Successfully sent event to endpoint",
+ "instance_id": "12345678-1234-1234-1234-123456789012"
+ }
+ ]
+}
diff --git a/frontend/src/scenes/pipeline/pipelineAppLogic.tsx b/frontend/src/scenes/pipeline/pipelineAppLogic.tsx
new file mode 100644
index 0000000000000..260d214df3785
--- /dev/null
+++ b/frontend/src/scenes/pipeline/pipelineAppLogic.tsx
@@ -0,0 +1,56 @@
+import { kea, reducers, path, props, key, actions, selectors } from 'kea'
+
+import type { pipelineAppLogicType } from './pipelineAppLogicType'
+import { Breadcrumb, PipelineAppTabs } from '~/types'
+import { urls } from 'scenes/urls'
+import { actionToUrl, urlToAction } from 'kea-router'
+import { Scene } from 'scenes/sceneTypes'
+
+export interface PipelineAppLogicProps {
+ id: number
+}
+
+export const pipelineAppLogic = kea([
+ props({} as PipelineAppLogicProps),
+ key(({ id }) => id),
+ path((id) => ['scenes', 'pipeline', 'pipelineAppLogic', id]),
+ actions({
+ setCurrentTab: (tab: PipelineAppTabs = PipelineAppTabs.Configuration) => ({ tab }),
+ }),
+ reducers({
+ currentTab: [
+ PipelineAppTabs.Configuration as PipelineAppTabs,
+ {
+ setCurrentTab: (_, { tab }) => tab,
+ },
+ ],
+ }),
+ selectors({
+ breadcrumbs: [
+ () => [],
+ (): Breadcrumb[] => [
+ {
+ key: Scene.Pipeline,
+ name: 'Pipeline',
+ path: urls.pipeline(),
+ },
+ {
+ key: 'todo',
+ name: 'App name',
+ },
+ ],
+ ],
+ }),
+ actionToUrl(({ values, props }) => {
+ return {
+ setCurrentTab: () => [urls.pipelineApp(props.id, values.currentTab)],
+ }
+ }),
+ urlToAction(({ actions, values }) => ({
+ '/pipeline/:id/:tab': ({ tab }) => {
+ if (tab !== values.currentTab) {
+ actions.setCurrentTab(tab as PipelineAppTabs)
+ }
+ },
+ })),
+])
diff --git a/frontend/src/scenes/pipeline/pipelineLogic.tsx b/frontend/src/scenes/pipeline/pipelineLogic.tsx
index 017e1966745b7..cf99abf943bfc 100644
--- a/frontend/src/scenes/pipeline/pipelineLogic.tsx
+++ b/frontend/src/scenes/pipeline/pipelineLogic.tsx
@@ -3,6 +3,7 @@ import type { pipelineLogicType } from './pipelineLogicType'
import { actionToUrl, urlToAction } from 'kea-router'
import { urls } from 'scenes/urls'
import { Breadcrumb, PipelineTabs } from '~/types'
+import { Scene } from 'scenes/sceneTypes'
export const singularName = (tab: PipelineTabs): string => {
switch (tab) {
@@ -43,12 +44,13 @@ export const pipelineLogic = kea([
breadcrumbs: [
(s) => [s.currentTab],
(tab): Breadcrumb[] => {
- const breadcrumbs: Breadcrumb[] = [{ name: 'Pipeline' }]
- breadcrumbs.push({
- name: humanFriendlyTabName(tab),
- })
-
- return breadcrumbs
+ return [
+ { key: Scene.Pipeline, name: 'Data pipeline' },
+ {
+ key: tab,
+ name: humanFriendlyTabName(tab),
+ },
+ ]
},
],
})),
diff --git a/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx b/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx
index 497b9b667eaa9..2f4a3a222fc9a 100644
--- a/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx
+++ b/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx
@@ -1,5 +1,4 @@
import { useMemo } from 'react'
-import { Radio, InputNumber } from 'antd'
import { ChildFunctionProps, Form } from 'kea-forms'
import { Field } from 'lib/forms/Field'
import { useValues, useActions } from 'kea'
@@ -16,7 +15,7 @@ import { DatePicker } from 'lib/components/DatePicker'
import { CodeEditor } from 'lib/components/CodeEditors'
import { IconClose, IconPlayCircle, IconSettings } from 'lib/lemon-ui/icons'
import { IconCheck } from '@posthog/icons'
-import { Tooltip } from '@posthog/lemon-ui'
+import { LemonSegmentedButton, Tooltip } from '@posthog/lemon-ui'
// keep in sync with plugin-server's export-historical-events.ts
export const HISTORICAL_EXPORT_JOB_NAME = 'Export historical events'
@@ -106,7 +105,7 @@ function FieldInput({
case 'string':
return onChange(e.target.value)}
- >
-
-
-
-
-
+ options={[
+ {
+ value: true,
+ label: 'True',
+ icon: > = [
title: 'Message',
key: 'message',
dataIndex: 'message',
+ render: (message: string) => ([
(s) => [s.repository, s.plugins],
(repository, plugins) => {
const allPossiblePlugins: PluginSelectionType[] = []
- for (const plugin of Object.values(plugins) as PluginType[]) {
+ for (const plugin of Object.values(plugins)) {
allPossiblePlugins.push({ name: plugin.name, url: plugin.url })
}
const installedUrls = new Set(Object.values(plugins).map((plugin) => plugin.url))
- for (const plugin of Object.values(repository) as PluginRepositoryEntry[]) {
+ for (const plugin of Object.values(repository)) {
if (!installedUrls.has(plugin.url)) {
allPossiblePlugins.push({ name: plugin.name, url: plugin.url })
}
diff --git a/frontend/src/scenes/plugins/source/PluginSource.tsx b/frontend/src/scenes/plugins/source/PluginSource.tsx
index 0d016a06a7ba1..ca59aea7988aa 100644
--- a/frontend/src/scenes/plugins/source/PluginSource.tsx
+++ b/frontend/src/scenes/plugins/source/PluginSource.tsx
@@ -57,7 +57,7 @@ export function PluginSource({
if (!monaco) {
return
}
- import('./types/packages.json').then((files) => {
+ void import('./types/packages.json').then((files) => {
for (const [fileName, fileContents] of Object.entries(files).filter(
([fileName]) => fileName !== 'default'
)) {
diff --git a/frontend/src/scenes/plugins/tabs/apps/components.tsx b/frontend/src/scenes/plugins/tabs/apps/components.tsx
index 4a0ecb9426d35..4033a7f86a166 100644
--- a/frontend/src/scenes/plugins/tabs/apps/components.tsx
+++ b/frontend/src/scenes/plugins/tabs/apps/components.tsx
@@ -23,7 +23,7 @@ export function RepositoryTag({ plugin }: { plugin: PluginType | PluginRepositor
if (plugin.plugin_type === 'local' && plugin.url) {
return (
- await copyToClipboard(plugin.url?.substring(5) || '')}>
+ void copyToClipboard(plugin.url?.substring(5) || '')}>
Installed Locally
)
diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
index 66994f4ab0f72..cba24e76c8a36 100644
--- a/frontend/src/scenes/products/Products.tsx
+++ b/frontend/src/scenes/products/Products.tsx
@@ -3,9 +3,6 @@ import { SceneExport } from 'scenes/sceneTypes'
import { BillingProductV2Type, ProductKey } from '~/types'
import { useActions, useValues } from 'kea'
import { teamLogic } from 'scenes/teamLogic'
-import { useEffect } from 'react'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
import { urls } from 'scenes/urls'
import { billingLogic } from 'scenes/billing/billingLogic'
import { Spinner } from 'lib/lemon-ui/Spinner'
@@ -131,18 +128,11 @@ export function ProductCard({
}
export function Products(): JSX.Element {
- const { featureFlags } = useValues(featureFlagLogic)
const { billing } = useValues(billingLogic)
const { currentTeam } = useValues(teamLogic)
const isFirstProduct = Object.keys(currentTeam?.has_completed_onboarding_for || {}).length === 0
const products = billing?.products || []
- useEffect(() => {
- if (featureFlags[FEATURE_FLAGS.PRODUCT_SPECIFIC_ONBOARDING] !== 'test') {
- location.href = urls.ingestion()
- }
- }, [])
-
return (
@@ -64,6 +65,15 @@ export const OnboardingBillingStep = ({
+
+ To protect your costs and ours, this product has an initial billing limit of $
+ {currentPlan.initial_billing_limit}. You can change or remove this limit on the
+ Billing page.
+
+
+ )}
Configuration editing
,
+ [PipelineAppTabs.Metrics]: Metrics page
,
+ [PipelineAppTabs.Logs]:
+ router.actions.push(urls.pipelineApp(confId, tab as PipelineAppTabs))}
+ tabs={Object.values(PipelineAppTabs).map((tab) => ({
+ label: capitalizeFirstLetter(tab),
+ key: tab,
+ content: tab_to_content[tab],
+ }))}
+ />
+
+ )
+}
diff --git a/frontend/src/scenes/pipeline/Transformations.tsx b/frontend/src/scenes/pipeline/Transformations.tsx
index 39768644c6462..1a627f0439bc4 100644
--- a/frontend/src/scenes/pipeline/Transformations.tsx
+++ b/frontend/src/scenes/pipeline/Transformations.tsx
@@ -12,7 +12,7 @@ import {
import { useActions, useValues } from 'kea'
import { pipelineTransformationsLogic } from './transformationsLogic'
import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
-import { PipelineTabs, PluginConfigTypeNew, PluginType, ProductKey } from '~/types'
+import { PipelineAppTabs, PipelineTabs, PluginConfigTypeNew, PluginType, ProductKey } from '~/types'
import { urls } from 'scenes/urls'
import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { DndContext, DragEndEvent } from '@dnd-kit/core'
@@ -100,7 +100,12 @@ export function Transformations(): JSX.Element {
return (
<>
{message},
},
]
diff --git a/frontend/src/scenes/plugins/pluginsLogic.ts b/frontend/src/scenes/plugins/pluginsLogic.ts
index dd03bed0a3f6b..3e6954c3cf081 100644
--- a/frontend/src/scenes/plugins/pluginsLogic.ts
+++ b/frontend/src/scenes/plugins/pluginsLogic.ts
@@ -623,13 +623,13 @@ export const pluginsLogic = kea
diff --git a/frontend/src/scenes/products/productsLogic.tsx b/frontend/src/scenes/products/productsLogic.tsx
index 48a17171bdc8a..29c2678b63fe7 100644
--- a/frontend/src/scenes/products/productsLogic.tsx
+++ b/frontend/src/scenes/products/productsLogic.tsx
@@ -1,16 +1,20 @@
-import { kea, path, actions, listeners } from 'kea'
+import { kea, path, actions, listeners, connect } from 'kea'
import { teamLogic } from 'scenes/teamLogic'
import { ProductKey } from '~/types'
import type { productsLogicType } from './productsLogicType'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { onboardingLogic } from 'scenes/onboarding/onboardingLogic'
export const productsLogic = kea([
path(() => ['scenes', 'products', 'productsLogic']),
+ connect({
+ actions: [teamLogic, ['updateCurrentTeam'], onboardingLogic, ['setProduct']],
+ }),
actions(() => ({
onSelectProduct: (product: ProductKey) => ({ product }),
})),
- listeners(() => ({
+ listeners(({ actions }) => ({
onSelectProduct: ({ product }) => {
eventUsageLogic.actions.reportOnboardingProductSelected(product)
@@ -18,7 +22,7 @@ export const productsLogic = kea([
case ProductKey.PRODUCT_ANALYTICS:
return
case ProductKey.SESSION_REPLAY:
- teamLogic.actions.updateCurrentTeam({
+ actions.updateCurrentTeam({
session_recording_opt_in: true,
capture_console_log_opt_in: true,
capture_performance_opt_in: true,
diff --git a/frontend/src/scenes/project-homepage/NewlySeenPersons.tsx b/frontend/src/scenes/project-homepage/NewlySeenPersons.tsx
index 0aea88331c5e3..64a4181460b29 100644
--- a/frontend/src/scenes/project-homepage/NewlySeenPersons.tsx
+++ b/frontend/src/scenes/project-homepage/NewlySeenPersons.tsx
@@ -33,14 +33,14 @@ export function NewlySeenPersons(): JSX.Element {
return (
{currentTeam?.primary_dashboard ? (
<>
-
-
+
+
{!dashboard &&
- triggerExport({
+ void triggerExport({
export_format: ExporterFormat.CSV,
export_context: {
path: row?.people_url,
diff --git a/frontend/src/scenes/retention/RetentionTable.scss b/frontend/src/scenes/retention/RetentionTable.scss
index 7e10b09fb8173..cb796874edeed 100644
--- a/frontend/src/scenes/retention/RetentionTable.scss
+++ b/frontend/src/scenes/retention/RetentionTable.scss
@@ -1,5 +1,5 @@
.RetentionTable {
- --retention-table-color: var(--primary);
+ --retention-table-color: var(--primary-3000);
font-weight: 500;
width: 100%;
@@ -70,4 +70,24 @@
}
}
}
+
+ &.RetentionTable--small-layout {
+ font-size: 0.75rem;
+ line-height: 1rem;
+
+ th {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ }
+
+ .RetentionTable__TextTab {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ }
+
+ .RetentionTable__Tab {
+ margin: 0;
+ padding: 0.5rem 0.25rem;
+ }
+ }
}
diff --git a/frontend/src/scenes/retention/RetentionTable.tsx b/frontend/src/scenes/retention/RetentionTable.tsx
index 97d124baae554..967997abe6245 100644
--- a/frontend/src/scenes/retention/RetentionTable.tsx
+++ b/frontend/src/scenes/retention/RetentionTable.tsx
@@ -1,4 +1,4 @@
-import { useValues, useActions } from 'kea'
+import { useActions, useValues } from 'kea'
import clsx from 'clsx'
import { insightLogic } from 'scenes/insights/insightLogic'
@@ -11,11 +11,16 @@ import { BRAND_BLUE_HSL, gradateColor } from 'lib/colors'
export function RetentionTable({ inCardView = false }: { inCardView?: boolean }): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
- const { tableHeaders, tableRows, isLatestPeriod } = useValues(retentionTableLogic(insightProps))
+ const { tableHeaders, tableRows, isLatestPeriod, hideSizeColumn, retentionVizOptions } = useValues(
+ retentionTableLogic(insightProps)
+ )
const { openModal } = useActions(retentionModalLogic(insightProps))
return (
-
+
|
- {columnIndex <= 1 ? (
+ {columnIndex <= (hideSizeColumn ? 0 : 1) ? (
{column}
diff --git a/frontend/src/scenes/retention/retentionLineGraphLogic.ts b/frontend/src/scenes/retention/retentionLineGraphLogic.ts
index 127ff04440385..656307fb41d38 100644
--- a/frontend/src/scenes/retention/retentionLineGraphLogic.ts
+++ b/frontend/src/scenes/retention/retentionLineGraphLogic.ts
@@ -9,6 +9,7 @@ import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { retentionLogic } from './retentionLogic'
import type { retentionLineGraphLogicType } from './retentionLineGraphLogicType'
+import { isLifecycleQuery, isStickinessQuery } from '~/queries/utils'
const DEFAULT_RETENTION_LOGIC_KEY = 'default_retention_key'
@@ -117,7 +118,11 @@ export const retentionLineGraphLogic = kea
-
-
+
{!sessionPerson || !startTime ? (
-
+
No matching recordings@@ -10,6 +18,19 @@ export const SessionRecordingsPlaylistTroubleshooting = (): JSX.Element => {
You can enter a regular expression that matches values of{' '}
Only up to 300 characters of config are allowed here. diff --git a/frontend/src/scenes/settings/project/groupAnalyticsConfigLogic.ts b/frontend/src/scenes/settings/project/groupAnalyticsConfigLogic.ts index 89a3029b4d47e..dd1ec134bbd88 100644 --- a/frontend/src/scenes/settings/project/groupAnalyticsConfigLogic.ts +++ b/frontend/src/scenes/settings/project/groupAnalyticsConfigLogic.ts @@ -40,7 +40,7 @@ export const groupAnalyticsConfigLogic = kea
{(value || []).map(
(
@@ -527,7 +533,10 @@ export default function SurveyEdit(): JSX.Element {
-
+
{defaultSurveyTemplates.map((template, idx) => {
return (
([
actions.loadSurveys()
actions.reportSurveyResumed(survey)
},
- archiveSurvey: async () => {
+ archiveSurvey: () => {
actions.updateSurvey({ archived: true })
},
loadSurveySuccess: () => {
@@ -571,10 +573,11 @@ export const surveyLogic = kea
- {event.properties[surveyResponseField]}
+ {JSON.stringify(event.properties[surveyResponseField])}
{title && {title}}
{ {activeTab?.title}} -
+ |