}
- {delimited && }
+ {delimited && }
)
}
diff --git a/frontend/src/lib/components/PasswordStrength.tsx b/frontend/src/lib/components/PasswordStrength.tsx
index 30e373dbaba51..f3f5be49ef656 100644
--- a/frontend/src/lib/components/PasswordStrength.tsx
+++ b/frontend/src/lib/components/PasswordStrength.tsx
@@ -1,6 +1,6 @@
import { Progress } from 'antd'
-import zxcvbn from 'zxcvbn'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import zxcvbn from 'zxcvbn'
export default function PasswordStrength({
password = '',
diff --git a/frontend/src/lib/components/PathCleanFilters/PathCleanFilterAddItemButton.tsx b/frontend/src/lib/components/PathCleanFilters/PathCleanFilterAddItemButton.tsx
index cd01609e82f53..91317e1d559ea 100644
--- a/frontend/src/lib/components/PathCleanFilters/PathCleanFilterAddItemButton.tsx
+++ b/frontend/src/lib/components/PathCleanFilters/PathCleanFilterAddItemButton.tsx
@@ -1,9 +1,9 @@
+import { IconPlus } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { useState } from 'react'
import { PathCleaningFilter } from '~/types'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { IconPlus } from 'lib/lemon-ui/icons'
import { PathRegexPopover } from './PathRegexPopover'
diff --git a/frontend/src/lib/components/PathCleanFilters/PathCleanFilterItem.tsx b/frontend/src/lib/components/PathCleanFilters/PathCleanFilterItem.tsx
index e4d73e9fd6f6b..588890a85b426 100644
--- a/frontend/src/lib/components/PathCleanFilters/PathCleanFilterItem.tsx
+++ b/frontend/src/lib/components/PathCleanFilters/PathCleanFilterItem.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react'
-
-import { PathCleaningFilter } from '~/types'
import { LemonSnack } from '@posthog/lemon-ui'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { midEllipsis } from 'lib/utils'
+import { useState } from 'react'
+
+import { PathCleaningFilter } from '~/types'
import { PathRegexPopover } from './PathRegexPopover'
diff --git a/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.stories.tsx b/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.stories.tsx
index 02ab50eb82b24..de1b7320c6290 100644
--- a/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.stories.tsx
+++ b/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.stories.tsx
@@ -1,5 +1,6 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { useState } from 'react'
+
import { PathCleaningFilter } from '~/types'
import { PathCleanFilters, PathCleanFiltersProps } from './PathCleanFilters'
diff --git a/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.tsx b/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.tsx
index fb2bd5ef60895..01b26636feef9 100644
--- a/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.tsx
+++ b/frontend/src/lib/components/PathCleanFilters/PathCleanFilters.tsx
@@ -1,6 +1,7 @@
import { PathCleaningFilter } from '~/types'
-import { PathCleanFilterItem } from './PathCleanFilterItem'
+
import { PathCleanFilterAddItemButton } from './PathCleanFilterAddItemButton'
+import { PathCleanFilterItem } from './PathCleanFilterItem'
export interface PathCleanFiltersProps {
filters?: PathCleaningFilter[]
diff --git a/frontend/src/lib/components/PathCleanFilters/PathRegexPopover.tsx b/frontend/src/lib/components/PathCleanFilters/PathRegexPopover.tsx
index e1a97e01f391b..70720f11a30cb 100644
--- a/frontend/src/lib/components/PathCleanFilters/PathRegexPopover.tsx
+++ b/frontend/src/lib/components/PathCleanFilters/PathRegexPopover.tsx
@@ -1,6 +1,6 @@
+import { LemonButton, LemonDivider, LemonInput } from '@posthog/lemon-ui'
import { useState } from 'react'
-import { LemonInput, LemonButton, LemonDivider } from '@posthog/lemon-ui'
import { PathCleaningFilter } from '~/types'
interface PathRegexPopoverProps {
diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
index 46e5f491da484..f801f600cf045 100644
--- a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
+++ b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
@@ -1,13 +1,15 @@
+import './PayGateMini.scss'
+
+import { Link } from '@posthog/lemon-ui'
+import clsx from 'clsx'
import { useValues } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { AvailableFeature } from '~/types'
-import { userLogic } from 'scenes/userLogic'
+import { FEATURE_MINIMUM_PLAN, POSTHOG_CLOUD_STANDARD_PLAN } from 'lib/constants'
import { IconEmojiPeople, IconLightBulb, IconLock, IconPremium } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './PayGateMini.scss'
-import { FEATURE_MINIMUM_PLAN, POSTHOG_CLOUD_STANDARD_PLAN } from 'lib/constants'
-import clsx from 'clsx'
-import { Link } from '@posthog/lemon-ui'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { userLogic } from 'scenes/userLogic'
+
+import { AvailableFeature } from '~/types'
type PayGateSupportedFeatures =
| AvailableFeature.DASHBOARD_PERMISSIONING
diff --git a/frontend/src/lib/components/PayGatePage/PayGatePage.tsx b/frontend/src/lib/components/PayGatePage/PayGatePage.tsx
index bc33e212df053..c579d564cbe1a 100644
--- a/frontend/src/lib/components/PayGatePage/PayGatePage.tsx
+++ b/frontend/src/lib/components/PayGatePage/PayGatePage.tsx
@@ -1,11 +1,13 @@
+import './PayGatePage.scss'
+
import { useValues } from 'kea'
-import { identifierToHuman } from 'lib/utils'
import { IconOpenInNew } from 'lib/lemon-ui/icons'
-import './PayGatePage.scss'
-import { AvailableFeature } from '~/types'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { identifierToHuman } from 'lib/utils'
import { billingLogic } from 'scenes/billing/billingLogic'
+import { AvailableFeature } from '~/types'
+
interface PayGatePageInterface {
header: string | JSX.Element
caption: string | JSX.Element
diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx
index c65b8df3f901c..868c62de41edd 100644
--- a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx
+++ b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.stories.tsx
@@ -1,6 +1,8 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { useState } from 'react'
+
import { mswDecorator } from '~/mocks/browser'
+
import { PersonPropertySelect, PersonPropertySelectProps } from './PersonPropertySelect'
type Story = StoryObj
diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
index d14d233f90f3b..55afbbc8fc898 100644
--- a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
+++ b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
@@ -1,17 +1,16 @@
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
+import { closestCenter, DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { restrictToHorizontalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
+import { horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
import { LemonButton } from '@posthog/lemon-ui'
+import clsx from 'clsx'
+import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { IconPlus } from 'lib/lemon-ui/icons'
import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
-import clsx from 'clsx'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { useState } from 'react'
-import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core'
-import { useSortable, SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { restrictToHorizontalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
-
export interface PersonPropertySelectProps {
addText: string
onChange: (names: string[]) => void
diff --git a/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.stories.tsx b/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.stories.tsx
index 5c8e18d6c063f..659e1a1bc4d9e 100644
--- a/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.stories.tsx
+++ b/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.stories.tsx
@@ -1,7 +1,9 @@
import { Meta } from '@storybook/react'
-import { ProductIntroduction } from './ProductIntroduction'
+
import { ProductKey } from '~/types'
+import { ProductIntroduction } from './ProductIntroduction'
+
const meta: Meta = {
title: 'Components/Product Empty State',
component: ProductIntroduction,
diff --git a/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx b/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx
index 0a0917a29280e..02e59aeca94db 100644
--- a/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx
+++ b/frontend/src/lib/components/ProductIntroduction/ProductIntroduction.tsx
@@ -1,10 +1,12 @@
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useActions } from 'kea'
import { IconClose, IconOpenInNew, IconPlus } from 'lib/lemon-ui/icons'
-import { BuilderHog3, DetectiveHog } from '../hedgehogs'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { userLogic } from 'scenes/userLogic'
-import { useActions } from 'kea'
+
import { ProductKey } from '~/types'
+import { BuilderHog3, DetectiveHog } from '../hedgehogs'
+
export const ProductIntroduction = ({
productName,
productKey,
diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx
index 4a577e8c10741..732ff6542b17b 100644
--- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx
+++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.stories.tsx
@@ -1,7 +1,9 @@
import { Meta, StoryFn } from '@storybook/react'
-import { PropertiesTable as PropertiesTableComponent } from '.'
+
import { PropertyDefinitionType } from '~/types'
+import { PropertiesTable as PropertiesTableComponent } from '.'
+
const meta: Meta = {
title: 'Components/Properties Table',
component: PropertiesTableComponent,
diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
index f96fb045c022f..eb327e49bf990 100644
--- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
+++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -1,21 +1,23 @@
-import { useMemo, useState } from 'react'
+import './PropertiesTable.scss'
-import { KEY_MAPPING, keyMappingKeys } from 'lib/taxonomy'
-import { PropertyKeyInfo } from '../PropertyKeyInfo'
+import { IconPencil } from '@posthog/icons'
+import { LemonCheckbox, LemonInput, Link } from '@posthog/lemon-ui'
import { Dropdown, Input, Menu, Popconfirm } from 'antd'
-import { isURL } from 'lib/utils'
-import { IconDeleteForever } from 'lib/lemon-ui/icons'
-import './PropertiesTable.scss'
-import { LemonTable, LemonTableColumns, LemonTableProps } from 'lib/lemon-ui/LemonTable'
-import { CopyToClipboardInline } from '../CopyToClipboard'
+import clsx from 'clsx'
import { useValues } from 'kea'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { IconDeleteForever } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonTable, LemonTableColumns, LemonTableProps } from 'lib/lemon-ui/LemonTable'
+import { KEY_MAPPING, keyMappingKeys } from 'lib/taxonomy'
+import { isURL } from 'lib/utils'
+import { useMemo, useState } from 'react'
import { NewProperty } from 'scenes/persons/NewProperty'
-import { LemonCheckbox, LemonInput, Link } from '@posthog/lemon-ui'
-import clsx from 'clsx'
+
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
import { PropertyDefinitionType } from '~/types'
-import { IconPencil } from '@posthog/icons'
+
+import { CopyToClipboardInline } from '../CopyToClipboard'
+import { PropertyKeyInfo } from '../PropertyKeyInfo'
type HandledType = 'string' | 'number' | 'bigint' | 'boolean' | 'undefined' | 'null'
type Type = HandledType | 'symbol' | 'object' | 'function'
diff --git a/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.stories.tsx b/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.stories.tsx
index 330e7b5597229..3d38ab578827d 100644
--- a/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.stories.tsx
+++ b/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.stories.tsx
@@ -1,7 +1,9 @@
import { Meta } from '@storybook/react'
import { MOCK_TEAM_ID } from 'lib/api.mock'
+
import { useStorybookMocks } from '~/mocks/browser'
import { ChartDisplayType, PersonActorType } from '~/types'
+
import { PropertiesTimeline } from '.'
import { RawPropertiesTimelineResult } from './propertiesTimelineLogic'
diff --git a/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx b/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx
index ae7e811ce0608..08549fb345aef 100644
--- a/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx
+++ b/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx
@@ -1,15 +1,17 @@
+import { LemonDivider } from '@posthog/lemon-ui'
import { Properties } from '@posthog/plugin-scaffold'
-import { PropertiesTable } from 'lib/components/PropertiesTable'
import { useActions, useValues } from 'kea'
-import { LemonDivider } from '@posthog/lemon-ui'
-import { propertiesTimelineLogic, PropertiesTimelineProps } from './propertiesTimelineLogic'
-import { TimelineSeekbar } from '../TimelineSeekbar'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { PropertiesTable } from 'lib/components/PropertiesTable'
import { IconInfo } from 'lib/lemon-ui/icons'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { humanList } from 'lib/utils'
import { teamLogic } from 'scenes/teamLogic'
+
import { PropertyDefinitionType } from '~/types'
+import { TimelineSeekbar } from '../TimelineSeekbar'
+import { propertiesTimelineLogic, PropertiesTimelineProps } from './propertiesTimelineLogic'
+
export function PropertiesTimeline({ actor, filter }: PropertiesTimelineProps): JSX.Element {
const logic = propertiesTimelineLogic({ actor, filter })
const { points, crucialPropertyKeys, dateRange, resultLoading, selectedPointIndex } = useValues(logic)
diff --git a/frontend/src/lib/components/PropertiesTimeline/propertiesTimelineLogic.ts b/frontend/src/lib/components/PropertiesTimeline/propertiesTimelineLogic.ts
index 7828340d23ae7..adff5170c3cdf 100644
--- a/frontend/src/lib/components/PropertiesTimeline/propertiesTimelineLogic.ts
+++ b/frontend/src/lib/components/PropertiesTimeline/propertiesTimelineLogic.ts
@@ -1,14 +1,15 @@
import { Properties } from '@posthog/plugin-scaffold'
+import { captureException } from '@sentry/react'
+import { actions, afterMount, connect, kea, key, path, props, reducers, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
import { Dayjs, dayjsUtcToTimezone } from 'lib/dayjs'
+import { apiGetWithTimeToSeeDataTracking } from 'lib/internalMetrics'
import { toParams, uuid } from 'lib/utils'
+import { teamLogic } from 'scenes/teamLogic'
+
import { ActorType, PropertiesTimelineFilterType } from '~/types'
-import { kea, key, props, path, connect, afterMount, selectors, reducers, actions } from 'kea'
-import { loaders } from 'kea-loaders'
import type { propertiesTimelineLogicType } from './propertiesTimelineLogicType'
-import { teamLogic } from 'scenes/teamLogic'
-import { apiGetWithTimeToSeeDataTracking } from 'lib/internalMetrics'
-import { captureException } from '@sentry/react'
export interface PropertiesTimelinePoint {
timestamp: Dayjs
diff --git a/frontend/src/lib/components/PropertyFilters/PathItemFilters.tsx b/frontend/src/lib/components/PropertyFilters/PathItemFilters.tsx
index a79aa8c953e3d..207bb71599d5c 100644
--- a/frontend/src/lib/components/PropertyFilters/PathItemFilters.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PathItemFilters.tsx
@@ -1,13 +1,15 @@
-import { CSSProperties, useEffect } from 'react'
+import { LemonButton } from '@posthog/lemon-ui'
import { BindLogic, useActions, useValues } from 'kea'
-import { propertyFilterLogic } from './propertyFilterLogic'
+import { IconPlusMini } from 'lib/lemon-ui/icons'
+import { objectsEqual } from 'lib/utils'
+import { CSSProperties, useEffect } from 'react'
+
import { AnyPropertyFilter, EmptyPropertyFilter, PropertyFilterType, PropertyOperator } from '~/types'
+
+import { SimpleOption, TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
import { PathItemSelector } from './components/PathItemSelector'
import { PropertyFilterButton } from './components/PropertyFilterButton'
-import { SimpleOption, TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
-import { objectsEqual } from 'lib/utils'
-import { LemonButton } from '@posthog/lemon-ui'
-import { IconPlusMini } from 'lib/lemon-ui/icons'
+import { propertyFilterLogic } from './propertyFilterLogic'
interface PropertyFiltersProps {
endpoint?: string | null
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx
index 484b294b29b47..134b04d32b1f0 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx
@@ -1,7 +1,9 @@
import { Meta } from '@storybook/react'
+import PropertyFiltersDisplay from 'lib/components/PropertyFilters/components/PropertyFiltersDisplay'
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
+
+import { useStorybookMocks } from '~/mocks/browser'
import { AnyPropertyFilter, PropertyOperator } from '~/types'
-import PropertyFiltersDisplay from 'lib/components/PropertyFilters/components/PropertyFiltersDisplay'
const meta: Meta = {
title: 'Filters/PropertyFilters',
@@ -31,6 +33,11 @@ const propertyFilters = [
] as AnyPropertyFilter[]
export function ComparingPropertyFilters(): JSX.Element {
+ useStorybookMocks({
+ get: {
+ '/api/event/values/': [],
+ },
+ })
return (
<>
Pop-over enabled
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
index dc9506368a0cd..24cf0b470087c 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
@@ -1,13 +1,16 @@
-import React, { useEffect } from 'react'
-import { useValues, BindLogic, useActions } from 'kea'
-import { propertyFilterLogic } from './propertyFilterLogic'
-import { FilterRow } from './components/FilterRow'
-import { AnyPropertyFilter, FilterLogicalOperator } from '~/types'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { TaxonomicPropertyFilter } from 'lib/components/PropertyFilters/components/TaxonomicPropertyFilter'
import './PropertyFilters.scss'
+
+import { BindLogic, useActions, useValues } from 'kea'
+import { TaxonomicPropertyFilter } from 'lib/components/PropertyFilters/components/TaxonomicPropertyFilter'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import React, { useEffect } from 'react'
import { LogicalRowDivider } from 'scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder'
+import { AnyPropertyFilter, FilterLogicalOperator } from '~/types'
+
+import { FilterRow } from './components/FilterRow'
+import { propertyFilterLogic } from './propertyFilterLogic'
+
interface PropertyFiltersProps {
endpoint?: string | null
propertyFilters?: AnyPropertyFilter[] | null
diff --git a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
index 4b8f10651e8d4..882af64fe0b7c 100644
--- a/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/FilterRow.tsx
@@ -1,13 +1,16 @@
-import React, { useState } from 'react'
-import { AnyPropertyFilter, PathCleaningFilter } from '~/types'
-import { PropertyFilterButton } from './PropertyFilterButton'
-import { isValidPropertyFilter } from 'lib/components/PropertyFilters/utils'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
import './FilterRow.scss'
+
import clsx from 'clsx'
+import { isValidPropertyFilter } from 'lib/components/PropertyFilters/utils'
import { IconClose, IconDelete, IconPlus } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
+import React, { useState } from 'react'
+
+import { AnyPropertyFilter, PathCleaningFilter } from '~/types'
+
import { OperandTag } from './OperandTag'
+import { PropertyFilterButton } from './PropertyFilterButton'
interface FilterRowProps {
item: Record
diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.stories.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.stories.tsx
index f3b0ef68557e7..545264a067bfe 100644
--- a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.stories.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.stories.tsx
@@ -3,6 +3,7 @@ import {
OperatorValueSelect,
OperatorValueSelectProps,
} from 'lib/components/PropertyFilters/components/OperatorValueSelect'
+
import { PropertyDefinition, PropertyType } from '~/types'
const meta: Meta = {
diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
index 817677a1f7f8a..5afaea8c4faeb 100644
--- a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
-import { PropertyDefinition, PropertyFilterType, PropertyFilterValue, PropertyOperator, PropertyType } from '~/types'
+import { LemonSelect, LemonSelectProps } from '@posthog/lemon-ui'
+import { dayjs } from 'lib/dayjs'
import {
allOperatorsMapping,
chooseOperatorMap,
@@ -9,9 +9,11 @@ import {
isOperatorRange,
isOperatorRegex,
} from 'lib/utils'
+import { useEffect, useState } from 'react'
+
+import { PropertyDefinition, PropertyFilterType, PropertyFilterValue, PropertyOperator, PropertyType } from '~/types'
+
import { PropertyValue } from './PropertyValue'
-import { dayjs } from 'lib/dayjs'
-import { LemonSelect, LemonSelectProps } from '@posthog/lemon-ui'
export interface OperatorValueSelectProps {
type?: PropertyFilterType
diff --git a/frontend/src/lib/components/PropertyFilters/components/PathItemSelector.tsx b/frontend/src/lib/components/PropertyFilters/components/PathItemSelector.tsx
index 0efc10d4e9c90..8e23d445872e5 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PathItemSelector.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PathItemSelector.tsx
@@ -1,7 +1,7 @@
-import { useState } from 'react'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
import { SimpleOption, TaxonomicFilterGroupType, TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
+import { useState } from 'react'
interface PathItemSelectorProps {
pathItem: TaxonomicFilterValue | undefined
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
index f9fd9a37f7432..eea640e7c1b60 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx
@@ -1,14 +1,17 @@
import './PropertyFilterButton.scss'
+
import { Button } from 'antd'
-import { AnyPropertyFilter } from '~/types'
-import { CloseButton } from 'lib/components/CloseButton'
-import { cohortsModel } from '~/models/cohortsModel'
import { useValues } from 'kea'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { midEllipsis } from 'lib/utils'
+import { CloseButton } from 'lib/components/CloseButton'
+import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
import { KEY_MAPPING } from 'lib/taxonomy'
+import { midEllipsis } from 'lib/utils'
import React from 'react'
-import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
+
+import { cohortsModel } from '~/models/cohortsModel'
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { AnyPropertyFilter } from '~/types'
+
import { formatPropertyLabel } from '../utils'
export interface PropertyFilterButtonProps {
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx
index 2a2dd82c72c68..889e511a613e4 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterDatePicker.tsx
@@ -1,10 +1,11 @@
+import { DatePicker } from 'lib/components/DatePicker'
+import { PropertyValueProps } from 'lib/components/PropertyFilters/components/PropertyValue'
import { dayjs } from 'lib/dayjs'
-import { useEffect, useState } from 'react'
-import { isOperatorDate } from 'lib/utils'
import { LemonSwitch } from 'lib/lemon-ui/LemonSwitch/LemonSwitch'
+import { isOperatorDate } from 'lib/utils'
+import { useEffect, useState } from 'react'
+
import { PropertyOperator } from '~/types'
-import { PropertyValueProps } from 'lib/components/PropertyFilters/components/PropertyValue'
-import { DatePicker } from 'lib/components/DatePicker'
const dayJSMightParse = (
candidateDateTimeValue: string | number | (string | number)[] | null | undefined
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx
index 4b8cbeea830f0..fab60bffd85e2 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx
@@ -1,6 +1,7 @@
-import { PropertyFilterType } from '~/types'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { IconCohort, IconPerson, IconUnverifiedEvent } from 'lib/lemon-ui/icons'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+
+import { PropertyFilterType } from '~/types'
export function PropertyFilterIcon({ type }: { type?: PropertyFilterType }): JSX.Element {
let iconElement = <>
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx
index 1db0201362ea1..aef0dcb659a0a 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx
@@ -1,4 +1,5 @@
import { AnyPropertyFilter } from '~/types'
+
import { PropertyFilterButton } from './PropertyFilterButton'
const PropertyFiltersDisplay = ({ filters }: { filters: AnyPropertyFilter[] }): JSX.Element => {
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertySelect.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertySelect.tsx
index 3cc2e1b93a9e0..0ad81b779db76 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertySelect.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertySelect.tsx
@@ -1,11 +1,12 @@
-import { useState } from 'react'
-import Fuse from 'fuse.js'
import { Select } from 'antd'
+import Fuse from 'fuse.js'
+import { useActions } from 'kea'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
import { SelectGradientOverflow } from 'lib/components/SelectGradientOverflow'
-import { SelectOption } from '~/types'
-import { useActions } from 'kea'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { useState } from 'react'
+
+import { SelectOption } from '~/types'
interface Props {
optionGroups: Array
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx
index 3d07a4bed1261..033e0b2680b1e 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.tsx
@@ -1,15 +1,17 @@
-import { useEffect, useRef, useState } from 'react'
+import './PropertyValue.scss'
+
import { AutoComplete } from 'antd'
-import { isOperatorDate, isOperatorFlag, isOperatorMulti, toString } from 'lib/utils'
-import { PropertyFilterType, PropertyOperator, PropertyType } from '~/types'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { PropertyFilterDatePicker } from 'lib/components/PropertyFilters/components/PropertyFilterDatePicker'
import { DurationPicker } from 'lib/components/DurationPicker/DurationPicker'
-import './PropertyValue.scss'
-import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
-import clsx from 'clsx'
+import { PropertyFilterDatePicker } from 'lib/components/PropertyFilters/components/PropertyFilterDatePicker'
import { propertyFilterTypeToPropertyDefinitionType } from 'lib/components/PropertyFilters/utils'
+import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
+import { isOperatorDate, isOperatorFlag, isOperatorMulti, toString } from 'lib/utils'
+import { useEffect, useRef, useState } from 'react'
+
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { PropertyFilterType, PropertyOperator, PropertyType } from '~/types'
export interface PropertyValueProps {
propertyKey: string
diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
index 0c03aa12551b7..a3ff2475480fd 100644
--- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
+++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx
@@ -1,30 +1,33 @@
import './TaxonomicPropertyFilter.scss'
-import { useMemo } from 'react'
+
+import { LemonButtonWithDropdown } from '@posthog/lemon-ui'
+import clsx from 'clsx'
import { useActions, useMountedLogic, useValues } from 'kea'
+import { OperatorValueSelect } from 'lib/components/PropertyFilters/components/OperatorValueSelect'
import { propertyFilterLogic } from 'lib/components/PropertyFilters/propertyFilterLogic'
-import { taxonomicPropertyFilterLogic } from './taxonomicPropertyFilterLogic'
+import { PropertyFilterInternalProps } from 'lib/components/PropertyFilters/types'
+import {
+ isGroupPropertyFilter,
+ isPropertyFilterWithOperator,
+ propertyFilterTypeToTaxonomicFilterType,
+} from 'lib/components/PropertyFilters/utils'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { OperatorValueSelect } from 'lib/components/PropertyFilters/components/OperatorValueSelect'
-import { isOperatorMulti, isOperatorRegex } from 'lib/utils'
import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
import {
TaxonomicFilterGroup,
TaxonomicFilterGroupType,
TaxonomicFilterValue,
} from 'lib/components/TaxonomicFilter/types'
-import {
- isGroupPropertyFilter,
- isPropertyFilterWithOperator,
- propertyFilterTypeToTaxonomicFilterType,
-} from 'lib/components/PropertyFilters/utils'
-import { PropertyFilterInternalProps } from 'lib/components/PropertyFilters/types'
-import clsx from 'clsx'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { AnyPropertyFilter, FilterLogicalOperator, PropertyDefinitionType, PropertyFilterType } from '~/types'
import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
-import { LemonButtonWithDropdown } from '@posthog/lemon-ui'
import { IconPlusMini } from 'lib/lemon-ui/icons'
+import { isOperatorMulti, isOperatorRegex } from 'lib/utils'
+import { useMemo } from 'react'
+
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { AnyPropertyFilter, FilterLogicalOperator, PropertyDefinitionType, PropertyFilterType } from '~/types'
+
import { OperandTag } from './OperandTag'
+import { taxonomicPropertyFilterLogic } from './taxonomicPropertyFilterLogic'
let uniqueMemoizedIndex = 0
diff --git a/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.test.ts b/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.test.ts
index d6ab1b8e0b53e..08bfe4962ba44 100644
--- a/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.test.ts
+++ b/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.test.ts
@@ -1,8 +1,9 @@
-import { initKeaTests } from '~/test/init'
-import { taxonomicPropertyFilterLogic } from 'lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic'
import { expectLogic } from 'kea-test-utils'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { taxonomicPropertyFilterLogic } from 'lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic'
import { propertyFilterLogic } from 'lib/components/PropertyFilters/propertyFilterLogic'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+
+import { initKeaTests } from '~/test/init'
describe('the taxonomic property filter', () => {
let logic: ReturnType
diff --git a/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.ts b/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.ts
index 6361dfb89489c..9ab0b1d638e77 100644
--- a/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.ts
+++ b/frontend/src/lib/components/PropertyFilters/components/taxonomicPropertyFilterLogic.ts
@@ -1,21 +1,5 @@
-import { kea, props, key, path, connect, actions, reducers, selectors, listeners } from 'kea'
+import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { TaxonomicPropertyFilterLogicProps } from 'lib/components/PropertyFilters/types'
-import {
- AnyPropertyFilter,
- CohortPropertyFilter,
- HogQLPropertyFilter,
- PropertyDefinitionType,
- PropertyFilterType,
- PropertyOperator,
- PropertyType,
-} from '~/types'
-import type { taxonomicPropertyFilterLogicType } from './taxonomicPropertyFilterLogicType'
-import { cohortsModel } from '~/models/cohortsModel'
-import {
- TaxonomicFilterGroup,
- TaxonomicFilterLogicProps,
- TaxonomicFilterValue,
-} from 'lib/components/TaxonomicFilter/types'
import {
isGroupPropertyFilter,
isPropertyFilterWithOperator,
@@ -25,7 +9,25 @@ import {
taxonomicFilterTypeToPropertyFilterType,
} from 'lib/components/PropertyFilters/utils'
import { taxonomicFilterLogic } from 'lib/components/TaxonomicFilter/taxonomicFilterLogic'
+import {
+ TaxonomicFilterGroup,
+ TaxonomicFilterLogicProps,
+ TaxonomicFilterValue,
+} from 'lib/components/TaxonomicFilter/types'
+
+import { cohortsModel } from '~/models/cohortsModel'
import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import {
+ AnyPropertyFilter,
+ CohortPropertyFilter,
+ HogQLPropertyFilter,
+ PropertyDefinitionType,
+ PropertyFilterType,
+ PropertyOperator,
+ PropertyType,
+} from '~/types'
+
+import type { taxonomicPropertyFilterLogicType } from './taxonomicPropertyFilterLogicType'
export const taxonomicPropertyFilterLogic = kea([
props({} as TaxonomicPropertyFilterLogicProps),
diff --git a/frontend/src/lib/components/PropertyFilters/propertyFilterLogic.ts b/frontend/src/lib/components/PropertyFilters/propertyFilterLogic.ts
index ad46588a1338e..39e8083a7b071 100644
--- a/frontend/src/lib/components/PropertyFilters/propertyFilterLogic.ts
+++ b/frontend/src/lib/components/PropertyFilters/propertyFilterLogic.ts
@@ -1,9 +1,10 @@
import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import { PropertyFilterLogicProps } from 'lib/components/PropertyFilters/types'
+import { isValidPropertyFilter, parseProperties } from 'lib/components/PropertyFilters/utils'
-import type { propertyFilterLogicType } from './propertyFilterLogicType'
import { AnyPropertyFilter, EmptyPropertyFilter } from '~/types'
-import { isValidPropertyFilter, parseProperties } from 'lib/components/PropertyFilters/utils'
-import { PropertyFilterLogicProps } from 'lib/components/PropertyFilters/types'
+
+import type { propertyFilterLogicType } from './propertyFilterLogicType'
export const propertyFilterLogic = kea([
path((key) => ['lib', 'components', 'PropertyFilters', 'propertyFilterLogic', key]),
diff --git a/frontend/src/lib/components/PropertyFilters/types.ts b/frontend/src/lib/components/PropertyFilters/types.ts
index 48af43e5573c7..0b7b671461f3e 100644
--- a/frontend/src/lib/components/PropertyFilters/types.ts
+++ b/frontend/src/lib/components/PropertyFilters/types.ts
@@ -1,11 +1,12 @@
-import { PropertyGroupFilter, AnyPropertyFilter, FilterLogicalOperator } from '~/types'
+import { propertyFilterLogic } from 'lib/components/PropertyFilters/propertyFilterLogic'
+import { SelectGradientOverflowProps } from 'lib/components/SelectGradientOverflow'
import {
TaxonomicFilterGroup,
TaxonomicFilterGroupType,
TaxonomicFilterValue,
} from 'lib/components/TaxonomicFilter/types'
-import { SelectGradientOverflowProps } from 'lib/components/SelectGradientOverflow'
-import { propertyFilterLogic } from 'lib/components/PropertyFilters/propertyFilterLogic'
+
+import { AnyPropertyFilter, FilterLogicalOperator, PropertyGroupFilter } from '~/types'
export interface PropertyFilterBaseProps {
pageKey: string
diff --git a/frontend/src/lib/components/PropertyFilters/utils.test.ts b/frontend/src/lib/components/PropertyFilters/utils.test.ts
index 56ff189f94e0e..33ad74f8e35d6 100644
--- a/frontend/src/lib/components/PropertyFilters/utils.test.ts
+++ b/frontend/src/lib/components/PropertyFilters/utils.test.ts
@@ -1,3 +1,13 @@
+import {
+ breakdownFilterToTaxonomicFilterType,
+ convertPropertiesToPropertyGroup,
+ convertPropertyGroupToProperties,
+ isValidPropertyFilter,
+ propertyFilterTypeToTaxonomicFilterType,
+} from 'lib/components/PropertyFilters/utils'
+
+import { BreakdownFilter } from '~/queries/schema'
+
import {
AnyPropertyFilter,
CohortPropertyFilter,
@@ -9,15 +19,7 @@ import {
PropertyOperator,
SessionPropertyFilter,
} from '../../../types'
-import {
- isValidPropertyFilter,
- propertyFilterTypeToTaxonomicFilterType,
- breakdownFilterToTaxonomicFilterType,
- convertPropertiesToPropertyGroup,
- convertPropertyGroupToProperties,
-} from 'lib/components/PropertyFilters/utils'
import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
-import { BreakdownFilter } from '~/queries/schema'
describe('isValidPropertyFilter()', () => {
it('returns values correctly', () => {
diff --git a/frontend/src/lib/components/PropertyFilters/utils.ts b/frontend/src/lib/components/PropertyFilters/utils.ts
index 6ce5fe2dd174f..e4bb8cbba1c7f 100644
--- a/frontend/src/lib/components/PropertyFilters/utils.ts
+++ b/frontend/src/lib/components/PropertyFilters/utils.ts
@@ -1,3 +1,8 @@
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { allOperatorsMapping, isOperatorFlag } from 'lib/utils'
+
+import { extractExpressionComment } from '~/queries/nodes/DataTable/utils'
+import { BreakdownFilter } from '~/queries/schema'
import {
AnyFilterLike,
AnyPropertyFilter,
@@ -22,10 +27,6 @@ import {
RecordingDurationFilter,
SessionPropertyFilter,
} from '~/types'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { allOperatorsMapping, isOperatorFlag } from 'lib/utils'
-import { BreakdownFilter } from '~/queries/schema'
-import { extractExpressionComment } from '~/queries/nodes/DataTable/utils'
export function isPropertyGroup(
properties:
diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx
index b7013d3b5dfb7..2a3896de8c889 100644
--- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx
+++ b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx
@@ -1,10 +1,13 @@
-import { useState } from 'react'
import { Meta } from '@storybook/react'
-import { FilterLogicalOperator, FilterType, AnyPropertyFilter, PropertyGroupFilter, PropertyOperator } from '~/types'
import { useMountedLogic } from 'kea'
-import { PropertyGroupFilters } from './PropertyGroupFilters'
-import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
+import { useState } from 'react'
+
+import { useStorybookMocks } from '~/mocks/browser'
import { cohortsModel } from '~/models/cohortsModel'
+import { AnyPropertyFilter, FilterLogicalOperator, FilterType, PropertyGroupFilter, PropertyOperator } from '~/types'
+
+import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types'
+import { PropertyGroupFilters } from './PropertyGroupFilters'
const meta: Meta = {
title: 'Filters/PropertyGroupFilters',
@@ -36,6 +39,11 @@ const taxonomicGroupTypes = [
]
export function GroupPropertyFilters(): JSX.Element {
+ useStorybookMocks({
+ get: {
+ '/api/event/values/': [],
+ },
+ })
useMountedLogic(cohortsModel)
const [propertyGroupFilter, setPropertyGroupFilter] = useState({
diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx
index 30d7c835ccf9f..6d532b1a948f0 100644
--- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx
+++ b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx
@@ -1,17 +1,20 @@
-import { useValues, BindLogic, useActions } from 'kea'
-import { PropertyGroupFilter, PropertyGroupFilterValue, FilterType, AnyPropertyFilter } from '~/types'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import './PropertyGroupFilters.scss'
-import { propertyGroupFilterLogic } from './propertyGroupFilterLogic'
-import { PropertyFilters } from '../PropertyFilters/PropertyFilters'
-import { GlobalFiltersTitle } from 'scenes/insights/common'
+
+import { BindLogic, useActions, useValues } from 'kea'
+import { isPropertyGroupFilterLike } from 'lib/components/PropertyFilters/utils'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { IconCopy, IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { TestAccountFilter } from 'scenes/insights/filters/TestAccountFilter'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import React from 'react'
-import { isPropertyGroupFilterLike } from 'lib/components/PropertyFilters/utils'
+import { GlobalFiltersTitle } from 'scenes/insights/common'
+import { TestAccountFilter } from 'scenes/insights/filters/TestAccountFilter'
+
import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect'
+import { AnyPropertyFilter, FilterType, PropertyGroupFilter, PropertyGroupFilterValue } from '~/types'
+
+import { PropertyFilters } from '../PropertyFilters/PropertyFilters'
+import { propertyGroupFilterLogic } from './propertyGroupFilterLogic'
interface PropertyGroupFilters {
value: PropertyGroupFilter
diff --git a/frontend/src/lib/components/PropertyGroupFilters/propertyGroupFilterLogic.ts b/frontend/src/lib/components/PropertyGroupFilters/propertyGroupFilterLogic.ts
index a592cf444e94e..cabfc14278390 100644
--- a/frontend/src/lib/components/PropertyGroupFilters/propertyGroupFilterLogic.ts
+++ b/frontend/src/lib/components/PropertyGroupFilters/propertyGroupFilterLogic.ts
@@ -1,12 +1,12 @@
import { actions, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
-
-import { PropertyGroupFilter, FilterLogicalOperator, EmptyPropertyFilter } from '~/types'
import { PropertyGroupFilterLogicProps } from 'lib/components/PropertyFilters/types'
-
-import type { propertyGroupFilterLogicType } from './propertyGroupFilterLogicType'
import { objectsEqual } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+
+import { EmptyPropertyFilter, FilterLogicalOperator, PropertyGroupFilter } from '~/types'
+
import { convertPropertiesToPropertyGroup } from '../PropertyFilters/utils'
+import type { propertyGroupFilterLogicType } from './propertyGroupFilterLogicType'
export const propertyGroupFilterLogic = kea([
path(['lib', 'components', 'PropertyGroupFilters', 'propertyGroupFilterLogic']),
diff --git a/frontend/src/lib/components/PropertyIcon.stories.tsx b/frontend/src/lib/components/PropertyIcon.stories.tsx
index 91b2149cb837d..229616979d58f 100644
--- a/frontend/src/lib/components/PropertyIcon.stories.tsx
+++ b/frontend/src/lib/components/PropertyIcon.stories.tsx
@@ -7,10 +7,7 @@ type Story = StoryObj
const meta: Meta = {
title: 'Lemon UI/Icons/Property Icon',
component: PropertyIcon,
- parameters: {
- testOptions: { skip: true }, // There are too many icons, the snapshots are huge in table form
- },
- tags: ['autodocs'],
+ tags: ['autodocs', 'test-skip'], // There are too many icons, the snapshots are huge in table form
}
export default meta
diff --git a/frontend/src/lib/components/PropertyIcon.tsx b/frontend/src/lib/components/PropertyIcon.tsx
index 91f351b7f1093..d1a5bf8a6848d 100644
--- a/frontend/src/lib/components/PropertyIcon.tsx
+++ b/frontend/src/lib/components/PropertyIcon.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
import {
IconAndroidOS,
IconAppleIOS,
@@ -17,10 +18,9 @@ import {
IconWeb,
IconWindows,
} from 'lib/lemon-ui/icons'
-import clsx from 'clsx'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { countryCodeToFlag } from 'scenes/insights/views/WorldMap'
import { HTMLAttributes, ReactNode } from 'react'
+import { countryCodeToFlag } from 'scenes/insights/views/WorldMap'
export const PROPERTIES_ICON_MAP = {
$browser: {
diff --git a/frontend/src/lib/components/PropertyKeyInfo.stories.tsx b/frontend/src/lib/components/PropertyKeyInfo.stories.tsx
index 715091e635075..632480f7f0f62 100644
--- a/frontend/src/lib/components/PropertyKeyInfo.stories.tsx
+++ b/frontend/src/lib/components/PropertyKeyInfo.stories.tsx
@@ -1,4 +1,4 @@
-import { StoryFn, Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { PropertyKeyInfo } from './PropertyKeyInfo'
diff --git a/frontend/src/lib/components/PropertyKeyInfo.tsx b/frontend/src/lib/components/PropertyKeyInfo.tsx
index 45aa9117086b7..07d2313b872a8 100644
--- a/frontend/src/lib/components/PropertyKeyInfo.tsx
+++ b/frontend/src/lib/components/PropertyKeyInfo.tsx
@@ -1,9 +1,10 @@
import './PropertyKeyInfo.scss'
+
+import { LemonDivider, TooltipProps } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { Popover } from 'lib/lemon-ui/Popover'
import { getKeyMapping, PropertyKey, PropertyType } from 'lib/taxonomy'
import React, { useState } from 'react'
-import { LemonDivider, TooltipProps } from '@posthog/lemon-ui'
interface PropertyKeyInfoProps {
value: PropertyKey
diff --git a/frontend/src/lib/components/Resizer/Resizer.tsx b/frontend/src/lib/components/Resizer/Resizer.tsx
index 7337be5e2a493..781592aae34bf 100644
--- a/frontend/src/lib/components/Resizer/Resizer.tsx
+++ b/frontend/src/lib/components/Resizer/Resizer.tsx
@@ -1,9 +1,11 @@
-import { useActions, useValues } from 'kea'
import './Resizer.scss'
-import { ResizerLogicProps, resizerLogic } from './resizerLogic'
+
import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
import { useEffect, useState } from 'react'
+import { resizerLogic, ResizerLogicProps } from './resizerLogic'
+
export type ResizerProps = ResizerLogicProps & {
offset?: number | string
}
diff --git a/frontend/src/lib/components/Resizer/resizerLogic.ts b/frontend/src/lib/components/Resizer/resizerLogic.ts
index 4cf16cdf9fb5f..5d4992ac05586 100644
--- a/frontend/src/lib/components/Resizer/resizerLogic.ts
+++ b/frontend/src/lib/components/Resizer/resizerLogic.ts
@@ -1,7 +1,7 @@
import { actions, beforeUnmount, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import posthog from 'posthog-js'
import type { resizerLogicType } from './resizerLogicType'
-import posthog from 'posthog-js'
export type ResizerEvent = {
originX: number
diff --git a/frontend/src/lib/components/RestrictedArea.tsx b/frontend/src/lib/components/RestrictedArea.tsx
index a1ec4a419a06a..636ab88b06d08 100644
--- a/frontend/src/lib/components/RestrictedArea.tsx
+++ b/frontend/src/lib/components/RestrictedArea.tsx
@@ -1,10 +1,11 @@
import { useValues } from 'kea'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { useMemo } from 'react'
+
import { organizationLogic } from '../../scenes/organizationLogic'
+import { isAuthenticatedTeam, teamLogic } from '../../scenes/teamLogic'
import { EitherMembershipLevel, OrganizationMembershipLevel } from '../constants'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { membershipLevelToName } from '../utils/permissioning'
-import { isAuthenticatedTeam, teamLogic } from '../../scenes/teamLogic'
export interface RestrictedComponentProps {
isRestricted: boolean
diff --git a/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx b/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx
index d74b7dd7abbca..e6e7aa1e9919f 100644
--- a/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx
+++ b/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceModal.tsx
@@ -1,16 +1,18 @@
+import { LemonDivider, LemonInput } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { dashboardsModel } from '~/models/dashboardsModel'
+import { SceneIcon } from 'lib/components/SceneDashboardChoice/SceneIcon'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonModal } from 'lib/lemon-ui/LemonModal'
+import { LemonRow } from 'lib/lemon-ui/LemonRow'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+
+import { dashboardsModel } from '~/models/dashboardsModel'
+
import {
sceneDashboardChoiceModalLogic,
SceneDashboardChoiceModalProps,
sceneDescription,
} from './sceneDashboardChoiceModalLogic'
-import { LemonRow } from 'lib/lemon-ui/LemonRow'
-import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { LemonDivider, LemonInput } from '@posthog/lemon-ui'
-import { SceneIcon } from 'lib/components/SceneDashboardChoice/SceneIcon'
export function SceneDashboardChoiceModal({ scene }: SceneDashboardChoiceModalProps): JSX.Element {
const modalLogic = sceneDashboardChoiceModalLogic({ scene })
diff --git a/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceRequired.tsx b/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceRequired.tsx
index efcc813b93cb8..2789d3b4f68b1 100644
--- a/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceRequired.tsx
+++ b/frontend/src/lib/components/SceneDashboardChoice/SceneDashboardChoiceRequired.tsx
@@ -1,10 +1,10 @@
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import {
DashboardCompatibleScenes,
sceneDescription,
} from 'lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic'
-import { Scene } from 'scenes/sceneTypes'
import { SceneIcon } from 'lib/components/SceneDashboardChoice/SceneIcon'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { Scene } from 'scenes/sceneTypes'
export function SceneDashboardChoiceRequired(props: {
open: () => void
diff --git a/frontend/src/lib/components/SceneDashboardChoice/SceneIcon.tsx b/frontend/src/lib/components/SceneDashboardChoice/SceneIcon.tsx
index 50283fe1d4239..7cedf11ddd26c 100644
--- a/frontend/src/lib/components/SceneDashboardChoice/SceneIcon.tsx
+++ b/frontend/src/lib/components/SceneDashboardChoice/SceneIcon.tsx
@@ -1,7 +1,7 @@
+import clsx from 'clsx'
import { DashboardCompatibleScenes } from 'lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic'
-import { Scene } from 'scenes/sceneTypes'
import { IconCottage, IconPerson } from 'lib/lemon-ui/icons'
-import clsx from 'clsx'
+import { Scene } from 'scenes/sceneTypes'
export function SceneIcon(props: { scene: DashboardCompatibleScenes; size: 'small' | 'large' }): JSX.Element | null {
const className = clsx('text-warning', props.size === 'small' ? 'text-lg' : 'text-3xl')
diff --git a/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.test.ts b/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.test.ts
index 88182d3131a78..6e7df822c8b0a 100644
--- a/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.test.ts
+++ b/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.test.ts
@@ -1,11 +1,13 @@
import { expectLogic } from 'kea-test-utils'
-import { initKeaTests } from '~/test/init'
-import { sceneDashboardChoiceModalLogic } from './sceneDashboardChoiceModalLogic'
import { MOCK_DEFAULT_TEAM, MOCK_DEFAULT_USER } from 'lib/api.mock'
+import { Scene } from 'scenes/sceneTypes'
import { teamLogic } from 'scenes/teamLogic'
import { userLogic } from 'scenes/userLogic'
+
import { useMocks } from '~/mocks/jest'
-import { Scene } from 'scenes/sceneTypes'
+import { initKeaTests } from '~/test/init'
+
+import { sceneDashboardChoiceModalLogic } from './sceneDashboardChoiceModalLogic'
describe('sceneDashboardChoiceModalLogic', () => {
let logic: ReturnType
diff --git a/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.ts b/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.ts
index 14925af1eae5d..171a80749d209 100644
--- a/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.ts
+++ b/frontend/src/lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic.ts
@@ -1,13 +1,14 @@
import Fuse from 'fuse.js'
-import { actions, connect, kea, key, listeners, reducers, selectors, path, props } from 'kea'
+import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { teamLogic } from 'scenes/teamLogic'
-import { dashboardsModel } from '~/models/dashboardsModel'
import { posthog } from 'posthog-js'
import { Scene } from 'scenes/sceneTypes'
+import { teamLogic } from 'scenes/teamLogic'
+import { userLogic } from 'scenes/userLogic'
+
+import { dashboardsModel } from '~/models/dashboardsModel'
import type { sceneDashboardChoiceModalLogicType } from './sceneDashboardChoiceModalLogicType'
-import { userLogic } from 'scenes/userLogic'
export type DashboardCompatibleScenes = Scene.ProjectHomepage | Scene.Person | Scene.Group
diff --git a/frontend/src/lib/components/SelectGradientOverflow.tsx b/frontend/src/lib/components/SelectGradientOverflow.tsx
index 1623c08976ae3..6a562bb85b59f 100644
--- a/frontend/src/lib/components/SelectGradientOverflow.tsx
+++ b/frontend/src/lib/components/SelectGradientOverflow.tsx
@@ -1,15 +1,18 @@
+import './SelectGradientOverflow.scss'
+
// eslint-disable-next-line no-restricted-imports
import { LoadingOutlined } from '@ant-design/icons'
-import { ReactElement, RefObject, useEffect, useRef, useState } from 'react'
import { ConfigProvider, Empty, Select, Tag } from 'antd'
import { RefSelectProps, SelectProps } from 'antd/lib/select'
-import { CloseButton } from './CloseButton'
-import { ANTD_TOOLTIP_PLACEMENTS, toString } from 'lib/utils'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import './SelectGradientOverflow.scss'
import { useValues } from 'kea'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { ANTD_TOOLTIP_PLACEMENTS, toString } from 'lib/utils'
+import { ReactElement, RefObject, useEffect, useRef, useState } from 'react'
+
import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { CloseButton } from './CloseButton'
+
interface DropdownGradientRendererProps {
updateScrollGradient: () => void
innerRef: RefObject
diff --git a/frontend/src/lib/components/SeriesGlyph.tsx b/frontend/src/lib/components/SeriesGlyph.tsx
index 024e3bde41b70..9e0cd0c2f5b6f 100644
--- a/frontend/src/lib/components/SeriesGlyph.tsx
+++ b/frontend/src/lib/components/SeriesGlyph.tsx
@@ -1,6 +1,7 @@
import { useValues } from 'kea'
import { getSeriesColor } from 'lib/colors'
import { alphabet, hexToRGBA, lightenDarkenColor, RGBToRGBA } from 'lib/utils'
+
import { themeLogic } from '~/layout/navigation-3000/themeLogic'
interface SeriesGlyphProps {
diff --git a/frontend/src/lib/components/Sharing/SharingModal.stories.tsx b/frontend/src/lib/components/Sharing/SharingModal.stories.tsx
index 39d2e4b48ad06..2f5bd324ebc25 100644
--- a/frontend/src/lib/components/Sharing/SharingModal.stories.tsx
+++ b/frontend/src/lib/components/Sharing/SharingModal.stories.tsx
@@ -1,10 +1,12 @@
-import { useState } from 'react'
import { Meta } from '@storybook/react'
-import { SharingModal, SharingModalProps } from './SharingModal'
-import { AvailableFeature, InsightModel, InsightShortId, InsightType } from '~/types'
-import { useStorybookMocks } from '~/mocks/browser'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useState } from 'react'
+
+import { useStorybookMocks } from '~/mocks/browser'
import { useAvailableFeatures } from '~/mocks/features'
+import { AvailableFeature, InsightModel, InsightShortId, InsightType } from '~/types'
+
+import { SharingModal, SharingModalProps } from './SharingModal'
const fakeInsight: Partial = {
id: 123,
diff --git a/frontend/src/lib/components/Sharing/SharingModal.tsx b/frontend/src/lib/components/Sharing/SharingModal.tsx
index 0c61a40165bf0..587492080c504 100644
--- a/frontend/src/lib/components/Sharing/SharingModal.tsx
+++ b/frontend/src/lib/components/Sharing/SharingModal.tsx
@@ -1,21 +1,24 @@
-import { useEffect, useState } from 'react'
-import { InsightModel, InsightShortId, InsightType } from '~/types'
-import { useActions, useValues } from 'kea'
-import { sharingLogic } from './sharingLogic'
-import { LemonButton, LemonSwitch } from '@posthog/lemon-ui'
-import { copyToClipboard } from 'lib/utils/copyToClipboard'
-import { IconGlobeLock, IconInfo, IconLink, IconLock, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { DashboardCollaboration } from 'scenes/dashboard/DashboardCollaborators'
-import { Field } from 'lib/forms/Field'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import './SharingModal.scss'
+
+import { LemonButton, LemonSwitch } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
import { TitleWithIcon } from 'lib/components/TitleWithIcon'
+import { Field } from 'lib/forms/Field'
+import { IconGlobeLock, IconInfo, IconLink, IconLock, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
+import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
+import { useEffect, useState } from 'react'
+import { DashboardCollaboration } from 'scenes/dashboard/DashboardCollaborators'
+
+import { InsightModel, InsightShortId, InsightType } from '~/types'
+
+import { sharingLogic } from './sharingLogic'
export const SHARING_MODAL_WIDTH = 600
diff --git a/frontend/src/lib/components/Sharing/sharingLogic.ts b/frontend/src/lib/components/Sharing/sharingLogic.ts
index d480fabeb8c7a..82898e841f40f 100644
--- a/frontend/src/lib/components/Sharing/sharingLogic.ts
+++ b/frontend/src/lib/components/Sharing/sharingLogic.ts
@@ -1,18 +1,18 @@
import { actions, afterMount, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
-import { AvailableFeature, InsightShortId, SharingConfigurationType } from '~/types'
-
-import api from 'lib/api'
+import { forms } from 'kea-forms'
import { loaders } from 'kea-loaders'
+import api from 'lib/api'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { getInsightId } from 'scenes/insights/utils'
-
-import type { sharingLogicType } from './sharingLogicType'
-import { ExportOptions } from '~/exporter/types'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { forms } from 'kea-forms'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+
+import { ExportOptions } from '~/exporter/types'
import { dashboardsModel } from '~/models/dashboardsModel'
+import { AvailableFeature, InsightShortId, SharingConfigurationType } from '~/types'
+
+import type { sharingLogicType } from './sharingLogicType'
export interface SharingLogicProps {
dashboardId?: number
diff --git a/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx b/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx
index d21d6a9bb6808..ad286251e8f20 100644
--- a/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx
+++ b/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx
@@ -1,11 +1,12 @@
// eslint-disable-next-line no-restricted-imports
import { FundOutlined } from '@ant-design/icons'
-import { smoothingOptions } from './smoothings'
+import { LemonSelect } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { insightLogic } from 'scenes/insights/insightLogic'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
-import { LemonSelect } from '@posthog/lemon-ui'
+
+import { smoothingOptions } from './smoothings'
export function SmoothingFilter(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx b/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
index 864953975305c..2f90e0ea44f63 100644
--- a/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
+++ b/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
@@ -1,13 +1,15 @@
-import { useValues } from 'kea'
import clsx from 'clsx'
-import { SocialLoginIcon } from './SocialLoginIcon'
-import { SSOProvider } from '~/types'
+import { useValues } from 'kea'
+import { combineUrl, router } from 'kea-router'
import { SSO_PROVIDER_NAMES } from 'lib/constants'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { router, combineUrl } from 'kea-router'
import { useButtonStyle } from 'scenes/authentication/useButtonStyles'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import { SSOProvider } from '~/types'
+
+import { SocialLoginIcon } from './SocialLoginIcon'
interface SocialLoginLinkProps {
provider: SSOProvider
diff --git a/frontend/src/lib/components/SocialLoginButton/SocialLoginIcon.tsx b/frontend/src/lib/components/SocialLoginButton/SocialLoginIcon.tsx
index 6c1a905c40e35..dd64a8a1d9dce 100644
--- a/frontend/src/lib/components/SocialLoginButton/SocialLoginIcon.tsx
+++ b/frontend/src/lib/components/SocialLoginButton/SocialLoginIcon.tsx
@@ -1,4 +1,5 @@
import { GithubIcon, GitlabIcon, GoogleIcon, IconKey } from 'lib/lemon-ui/icons'
+
import { SSOProvider } from '~/types'
export const SocialLoginIcon = (provider: SSOProvider): JSX.Element | undefined => {
diff --git a/frontend/src/lib/components/StickyView/StickyView.tsx b/frontend/src/lib/components/StickyView/StickyView.tsx
index a411236d10852..4aaf4bf2c7fed 100644
--- a/frontend/src/lib/components/StickyView/StickyView.tsx
+++ b/frontend/src/lib/components/StickyView/StickyView.tsx
@@ -1,6 +1,7 @@
+import './StickyView.scss'
+
import { useResizeObserver } from 'lib/hooks/useResizeObserver'
import React, { useEffect, useRef, useState } from 'react'
-import './StickyView.scss'
export interface StickyViewProps {
children: React.ReactNode
diff --git a/frontend/src/lib/components/Subscriptions/SubscriptionsModal.stories.tsx b/frontend/src/lib/components/Subscriptions/SubscriptionsModal.stories.tsx
index c83ce034536d1..007b340af7d97 100644
--- a/frontend/src/lib/components/Subscriptions/SubscriptionsModal.stories.tsx
+++ b/frontend/src/lib/components/Subscriptions/SubscriptionsModal.stories.tsx
@@ -1,13 +1,15 @@
-import { useRef, useState } from 'react'
import { Meta } from '@storybook/react'
-import { SubscriptionsModal, SubscriptionsModalProps } from './SubscriptionsModal'
-import { AvailableFeature, InsightShortId, Realm } from '~/types'
-import preflightJson from '~/mocks/fixtures/_preflight.json'
-import { useAvailableFeatures } from '~/mocks/features'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { uuid } from 'lib/utils'
+import { useRef, useState } from 'react'
+
import { useStorybookMocks } from '~/mocks/browser'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useAvailableFeatures } from '~/mocks/features'
+import preflightJson from '~/mocks/fixtures/_preflight.json'
import { createMockSubscription, mockIntegration, mockSlackChannels } from '~/test/mocks'
+import { AvailableFeature, InsightShortId, Realm } from '~/types'
+
+import { SubscriptionsModal, SubscriptionsModalProps } from './SubscriptionsModal'
const meta: Meta = {
title: 'Components/Subscriptions',
diff --git a/frontend/src/lib/components/Subscriptions/SubscriptionsModal.tsx b/frontend/src/lib/components/Subscriptions/SubscriptionsModal.tsx
index 0b9c2af78effa..25ba79553f949 100644
--- a/frontend/src/lib/components/Subscriptions/SubscriptionsModal.tsx
+++ b/frontend/src/lib/components/Subscriptions/SubscriptionsModal.tsx
@@ -1,14 +1,16 @@
-import { ManageSubscriptions } from './views/ManageSubscriptions'
-import { EditSubscription } from './views/EditSubscription'
+import { LemonButton, LemonButtonWithDropdown } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { router } from 'kea-router'
-import { LemonButton, LemonButtonWithDropdown } from '@posthog/lemon-ui'
-import { SubscriptionBaseProps, urlForSubscription, urlForSubscriptions } from './utils'
-import { PayGatePage } from '../PayGatePage/PayGatePage'
-import { AvailableFeature } from '~/types'
-import { userLogic } from 'scenes/userLogic'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { userLogic } from 'scenes/userLogic'
+
+import { AvailableFeature } from '~/types'
+
+import { PayGatePage } from '../PayGatePage/PayGatePage'
+import { SubscriptionBaseProps, urlForSubscription, urlForSubscriptions } from './utils'
+import { EditSubscription } from './views/EditSubscription'
+import { ManageSubscriptions } from './views/ManageSubscriptions'
export interface SubscriptionsModalProps extends SubscriptionBaseProps {
isOpen: boolean
diff --git a/frontend/src/lib/components/Subscriptions/subscriptionLogic.test.ts b/frontend/src/lib/components/Subscriptions/subscriptionLogic.test.ts
index a362f3dd7c5ad..820e8eb7d9786 100644
--- a/frontend/src/lib/components/Subscriptions/subscriptionLogic.test.ts
+++ b/frontend/src/lib/components/Subscriptions/subscriptionLogic.test.ts
@@ -1,9 +1,11 @@
+import { router } from 'kea-router'
import { expectLogic } from 'kea-test-utils'
-import { initKeaTests } from '~/test/init'
+
import { useMocks } from '~/mocks/jest'
+import { initKeaTests } from '~/test/init'
import { InsightShortId, SubscriptionType } from '~/types'
+
import { subscriptionLogic } from './subscriptionLogic'
-import { router } from 'kea-router'
const Insight1 = '1' as InsightShortId
diff --git a/frontend/src/lib/components/Subscriptions/subscriptionLogic.ts b/frontend/src/lib/components/Subscriptions/subscriptionLogic.ts
index 87c84e204c037..d6b65209c1e9b 100644
--- a/frontend/src/lib/components/Subscriptions/subscriptionLogic.ts
+++ b/frontend/src/lib/components/Subscriptions/subscriptionLogic.ts
@@ -1,20 +1,19 @@
import { connect, kea, key, listeners, path, props } from 'kea'
-import { SubscriptionType } from '~/types'
-
-import api from 'lib/api'
-import { loaders } from 'kea-loaders'
import { forms } from 'kea-forms'
-
-import { isEmail, isURL } from 'lib/utils'
+import { loaders } from 'kea-loaders'
+import { beforeUnload, router, urlToAction } from 'kea-router'
+import api from 'lib/api'
import { dayjs } from 'lib/dayjs'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import { beforeUnload, router, urlToAction } from 'kea-router'
-import { subscriptionsLogic } from './subscriptionsLogic'
+import { isEmail, isURL } from 'lib/utils'
+import { getInsightId } from 'scenes/insights/utils'
+import { integrationsLogic } from 'scenes/settings/project/integrationsLogic'
+
+import { SubscriptionType } from '~/types'
import type { subscriptionLogicType } from './subscriptionLogicType'
-import { getInsightId } from 'scenes/insights/utils'
+import { subscriptionsLogic } from './subscriptionsLogic'
import { SubscriptionBaseProps, urlForSubscription } from './utils'
-import { integrationsLogic } from 'scenes/settings/project/integrationsLogic'
const NEW_SUBSCRIPTION: Partial = {
frequency: 'weekly',
diff --git a/frontend/src/lib/components/Subscriptions/subscriptionsLogic.test.ts b/frontend/src/lib/components/Subscriptions/subscriptionsLogic.test.ts
index cfbc33b75fe4f..2cfbe7207bf52 100644
--- a/frontend/src/lib/components/Subscriptions/subscriptionsLogic.test.ts
+++ b/frontend/src/lib/components/Subscriptions/subscriptionsLogic.test.ts
@@ -1,7 +1,7 @@
import { expectLogic } from 'kea-test-utils'
-import { initKeaTests } from '~/test/init'
+
import { useMocks } from '~/mocks/jest'
-import { subscriptionsLogic } from './subscriptionsLogic'
+import { initKeaTests } from '~/test/init'
import {
FilterType,
InsightModel,
@@ -12,6 +12,8 @@ import {
SubscriptionType,
} from '~/types'
+import { subscriptionsLogic } from './subscriptionsLogic'
+
const Insight1 = '1' as InsightShortId
const Insight2 = '2' as InsightShortId
diff --git a/frontend/src/lib/components/Subscriptions/subscriptionsLogic.ts b/frontend/src/lib/components/Subscriptions/subscriptionsLogic.ts
index fbfde31c7e69f..6c7ebab34f5d6 100644
--- a/frontend/src/lib/components/Subscriptions/subscriptionsLogic.ts
+++ b/frontend/src/lib/components/Subscriptions/subscriptionsLogic.ts
@@ -1,13 +1,12 @@
import { actions, afterMount, BreakPointFunction, kea, key, listeners, path, props, reducers } from 'kea'
-import { SubscriptionType } from '~/types'
-
-import api from 'lib/api'
import { loaders } from 'kea-loaders'
-
+import api from 'lib/api'
import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
+import { getInsightId } from 'scenes/insights/utils'
+
+import { SubscriptionType } from '~/types'
import type { subscriptionsLogicType } from './subscriptionsLogicType'
-import { getInsightId } from 'scenes/insights/utils'
import { SubscriptionBaseProps } from './utils'
export const subscriptionsLogic = kea([
diff --git a/frontend/src/lib/components/Subscriptions/utils.tsx b/frontend/src/lib/components/Subscriptions/utils.tsx
index 9ba2054c86d03..c058d119ff90b 100644
--- a/frontend/src/lib/components/Subscriptions/utils.tsx
+++ b/frontend/src/lib/components/Subscriptions/utils.tsx
@@ -1,9 +1,10 @@
import { LemonSelectOptions } from '@posthog/lemon-ui'
+import { IconMail, IconSlack, IconSlackExternal } from 'lib/lemon-ui/icons'
+import { LemonSelectMultipleOptionItem } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
import { range } from 'lib/utils'
import { urls } from 'scenes/urls'
+
import { InsightShortId, SlackChannelType } from '~/types'
-import { IconMail, IconSlack, IconSlackExternal } from 'lib/lemon-ui/icons'
-import { LemonSelectMultipleOptionItem } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
export interface SubscriptionBaseProps {
dashboardId?: number
diff --git a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
index 66f19b0bc54cb..53beeb522951d 100644
--- a/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
+++ b/frontend/src/lib/components/Subscriptions/views/EditSubscription.tsx
@@ -1,20 +1,33 @@
-import { useEffect, useMemo } from 'react'
+import { LemonDivider, LemonInput, LemonTextArea, Link } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
+import { Form } from 'kea-forms'
+import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
+import { usersLemonSelectOptions } from 'lib/components/UserSelectItem'
+import { dayjs } from 'lib/dayjs'
+import { Field } from 'lib/forms/Field'
+import { IconChevronLeft } from 'lib/lemon-ui/icons'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
+import { LemonModal } from 'lib/lemon-ui/LemonModal'
+import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
+import {
+ LemonSelectMultiple,
+ LemonSelectMultipleOptionItem,
+} from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+import { useEffect, useMemo } from 'react'
import { membersLogic } from 'scenes/organization/membersLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { Field } from 'lib/forms/Field'
-import { dayjs } from 'lib/dayjs'
-import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
+import { integrationsLogic } from 'scenes/settings/project/integrationsLogic'
+import { urls } from 'scenes/urls'
+
import { subscriptionLogic } from '../subscriptionLogic'
-import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
-import { IconChevronLeft } from 'lib/lemon-ui/icons'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { subscriptionsLogic } from '../subscriptionsLogic'
import {
bysetposOptions,
- frequencyOptionsSingular,
frequencyOptionsPlural,
+ frequencyOptionsSingular,
getSlackChannelOptions,
intervalOptions,
monthlyWeekdayOptions,
@@ -23,18 +36,6 @@ import {
timeOptions,
weekdayOptions,
} from '../utils'
-import { LemonDivider, LemonInput, LemonTextArea, Link } from '@posthog/lemon-ui'
-import {
- LemonSelectMultiple,
- LemonSelectMultipleOptionItem,
-} from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
-import { usersLemonSelectOptions } from 'lib/components/UserSelectItem'
-import { urls } from 'scenes/urls'
-import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { Form } from 'kea-forms'
-import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { integrationsLogic } from 'scenes/settings/project/integrationsLogic'
interface EditSubscriptionProps extends SubscriptionBaseProps {
id: number | 'new'
diff --git a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
index 50c782fc12682..b38b9f33977c2 100644
--- a/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
+++ b/frontend/src/lib/components/Subscriptions/views/ManageSubscriptions.tsx
@@ -1,13 +1,15 @@
import { useActions, useValues } from 'kea'
-import { LemonButton, LemonButtonWithSideAction } from 'lib/lemon-ui/LemonButton'
-import { SubscriptionType } from '~/types'
-import { capitalizeFirstLetter, pluralize } from 'lib/utils'
import { IconEllipsis, IconSlack } from 'lib/lemon-ui/icons'
+import { LemonButton, LemonButtonWithSideAction } from 'lib/lemon-ui/LemonButton'
+import { LemonModal } from 'lib/lemon-ui/LemonModal'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { ProfileBubbles } from 'lib/lemon-ui/ProfilePicture'
+import { capitalizeFirstLetter, pluralize } from 'lib/utils'
+
+import { SubscriptionType } from '~/types'
+
import { subscriptionsLogic } from '../subscriptionsLogic'
import { SubscriptionBaseProps } from '../utils'
-import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
interface SubscriptionListItemProps {
subscription: SubscriptionType
diff --git a/frontend/src/lib/components/Support/SupportForm.tsx b/frontend/src/lib/components/Support/SupportForm.tsx
index fa09fd9f1eaa7..c1ef770c9131f 100644
--- a/frontend/src/lib/components/Support/SupportForm.tsx
+++ b/frontend/src/lib/components/Support/SupportForm.tsx
@@ -1,13 +1,3 @@
-import { useActions, useValues } from 'kea'
-import { SupportTicketKind, TARGET_AREA_TO_NAME, supportLogic } from './supportLogic'
-import { Form } from 'kea-forms'
-import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
-import { LemonSelect } from 'lib/lemon-ui/LemonSelect/LemonSelect'
-import { Field } from 'lib/forms/Field'
-import { IconBugReport, IconFeedback, IconHelpOutline } from 'lib/lemon-ui/icons'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput'
-import { useRef } from 'react'
import {
LemonButton,
LemonInput,
@@ -15,9 +5,20 @@ import {
LemonSegmentedButtonOption,
lemonToast,
} from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { Form } from 'kea-forms'
+import { Field } from 'lib/forms/Field'
import { useUploadFiles } from 'lib/hooks/useUploadFiles'
+import { IconBugReport, IconFeedback, IconHelpOutline } from 'lib/lemon-ui/icons'
+import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput'
+import { LemonSelect } from 'lib/lemon-ui/LemonSelect/LemonSelect'
+import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
+import { useRef } from 'react'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { userLogic } from 'scenes/userLogic'
+import { supportLogic, SupportTicketKind, TARGET_AREA_TO_NAME } from './supportLogic'
+
const SUPPORT_TICKET_OPTIONS: LemonSegmentedButtonOption[] = [
{
value: 'support',
diff --git a/frontend/src/lib/components/Support/SupportModal.tsx b/frontend/src/lib/components/Support/SupportModal.tsx
index 6a963ae6b04e9..a605c82213cb8 100644
--- a/frontend/src/lib/components/Support/SupportModal.tsx
+++ b/frontend/src/lib/components/Support/SupportModal.tsx
@@ -1,9 +1,10 @@
import { useActions, useValues } from 'kea'
-import { supportLogic } from './supportLogic'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { LemonModal } from 'lib/lemon-ui/LemonModal/LemonModal'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
import { SupportForm, SupportFormButtons } from './SupportForm'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
+import { supportLogic } from './supportLogic'
export function SupportModal({ loggedIn = true }: { loggedIn?: boolean }): JSX.Element | null {
const { sendSupportRequest, isSupportFormOpen, sendSupportLoggedOutRequest, title } = useValues(supportLogic)
diff --git a/frontend/src/lib/components/Support/supportLogic.ts b/frontend/src/lib/components/Support/supportLogic.ts
index af00389dcf7bf..076e44e0ffbd9 100644
--- a/frontend/src/lib/components/Support/supportLogic.ts
+++ b/frontend/src/lib/components/Support/supportLogic.ts
@@ -1,18 +1,19 @@
+import { captureException } from '@sentry/react'
+import * as Sentry from '@sentry/react'
import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
-import { userLogic } from 'scenes/userLogic'
-
-import type { supportLogicType } from './supportLogicType'
import { forms } from 'kea-forms'
-import { Region, SidePanelTab, TeamType, UserType } from '~/types'
+import { actionToUrl, router, urlToAction } from 'kea-router'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { uuid } from 'lib/utils'
import posthog from 'posthog-js'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import { actionToUrl, router, urlToAction } from 'kea-router'
-import { captureException } from '@sentry/react'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { teamLogic } from 'scenes/teamLogic'
-import * as Sentry from '@sentry/react'
+import { userLogic } from 'scenes/userLogic'
+
import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
+import { Region, SidePanelTab, TeamType, UserType } from '~/types'
+
+import type { supportLogicType } from './supportLogicType'
function getSessionReplayLink(): string {
const link = posthog
diff --git a/frontend/src/lib/components/TZLabel/index.tsx b/frontend/src/lib/components/TZLabel/index.tsx
index ed6c3b4ac5bbb..2e4c1dcb3c3c9 100644
--- a/frontend/src/lib/components/TZLabel/index.tsx
+++ b/frontend/src/lib/components/TZLabel/index.tsx
@@ -1,17 +1,19 @@
import './index.scss'
-import { useActions, useValues } from 'kea'
+
// eslint-disable-next-line no-restricted-imports
-import { ProjectOutlined, LaptopOutlined } from '@ant-design/icons'
+import { LaptopOutlined, ProjectOutlined } from '@ant-design/icons'
+import { LemonButton, LemonDivider, LemonDropdown, LemonDropdownProps } from '@posthog/lemon-ui'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
+import { dayjs } from 'lib/dayjs'
+import { IconSettings, IconWeb } from 'lib/lemon-ui/icons'
import { humanFriendlyDetailedTime, shortTimeZone } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { teamLogic } from '../../../scenes/teamLogic'
-import { dayjs } from 'lib/dayjs'
-import clsx from 'clsx'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { LemonButton, LemonDivider, LemonDropdown, LemonDropdownProps } from '@posthog/lemon-ui'
-import { IconSettings, IconWeb } from 'lib/lemon-ui/icons'
import { urls } from 'scenes/urls'
+import { teamLogic } from '../../../scenes/teamLogic'
+
const BASE_OUTPUT_FORMAT = 'ddd, MMM D, YYYY h:mm A'
const BASE_OUTPUT_FORMAT_WITH_SECONDS = 'ddd, MMM D, YYYY h:mm:ss A'
diff --git a/frontend/src/lib/components/Table/Table.tsx b/frontend/src/lib/components/Table/Table.tsx
index bc8a41e524eec..7cf69790d2763 100644
--- a/frontend/src/lib/components/Table/Table.tsx
+++ b/frontend/src/lib/components/Table/Table.tsx
@@ -1,10 +1,11 @@
-import { uniqueBy } from 'lib/utils'
+import { ColumnType } from 'antd/lib/table'
import { useValues } from 'kea'
-import { userLogic } from 'scenes/userLogic'
-import { TZLabel } from '../TZLabel'
import { normalizeColumnTitle } from 'lib/components/Table/utils'
-import { ColumnType } from 'antd/lib/table'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
+import { uniqueBy } from 'lib/utils'
+import { userLogic } from 'scenes/userLogic'
+
+import { TZLabel } from '../TZLabel'
export function createdAtColumn = Record>(): ColumnType {
return {
diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx
index 408f7fc7e926b..643009749e856 100644
--- a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx
@@ -1,28 +1,31 @@
import './InfiniteList.scss'
import '../../lemon-ui/Popover/Popover.scss'
+
+import { LemonTag } from '@posthog/lemon-ui'
import { Empty } from 'antd'
-import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
-import { List, ListRowProps, ListRowRenderer } from 'react-virtualized/dist/es/List'
-import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import clsx from 'clsx'
import { BindLogic, useActions, useValues } from 'kea'
-import { infiniteListLogic, NO_ITEM_SELECTED } from './infiniteListLogic'
+import { ControlledDefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopoverContents'
+import { definitionPopoverLogic } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
import { taxonomicFilterLogic } from 'lib/components/TaxonomicFilter/taxonomicFilterLogic'
import {
TaxonomicDefinitionTypes,
TaxonomicFilterGroup,
TaxonomicFilterGroupType,
} from 'lib/components/TaxonomicFilter/types'
-import { EventDefinition, PropertyDefinition } from '~/types'
-import { dayjs } from 'lib/dayjs'
import { STALE_EVENT_SECONDS } from 'lib/constants'
+import { dayjs } from 'lib/dayjs'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import clsx from 'clsx'
-import { definitionPopoverLogic } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
-import { ControlledDefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopoverContents'
import { pluralize } from 'lib/utils'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { useState } from 'react'
-import { LemonTag } from '@posthog/lemon-ui'
+import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
+import { List, ListRowProps, ListRowRenderer } from 'react-virtualized/dist/es/List'
+
+import { EventDefinition, PropertyDefinition } from '~/types'
+
+import { infiniteListLogic, NO_ITEM_SELECTED } from './infiniteListLogic'
export interface InfiniteListProps {
popupAnchorElement: HTMLDivElement | null
diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
index 777e11cf0c6ff..9aa893e8be895 100644
--- a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
@@ -1,10 +1,11 @@
import { Tag } from 'antd'
+import clsx from 'clsx'
import { BindLogic, useActions, useValues } from 'kea'
-import { taxonomicFilterLogic } from './taxonomicFilterLogic'
-import { infiniteListLogic } from 'lib/components/TaxonomicFilter/infiniteListLogic'
import { InfiniteList } from 'lib/components/TaxonomicFilter/InfiniteList'
+import { infiniteListLogic } from 'lib/components/TaxonomicFilter/infiniteListLogic'
import { TaxonomicFilterGroupType, TaxonomicFilterLogicProps } from 'lib/components/TaxonomicFilter/types'
-import clsx from 'clsx'
+
+import { taxonomicFilterLogic } from './taxonomicFilterLogic'
export interface InfiniteSelectResultsProps {
focusInput: () => void
diff --git a/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx b/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx
index e7d35c4c18d77..21953476b8a53 100644
--- a/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx
@@ -1,5 +1,5 @@
-import { TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
import { HogQLEditor } from 'lib/components/HogQLEditor/HogQLEditor'
+import { TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
export interface InlineHogQLEditorProps {
value?: TaxonomicFilterValue
diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.stories.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.stories.tsx
index a26af339ab0bc..b6075ccfa8f91 100644
--- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.stories.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.stories.tsx
@@ -1,14 +1,16 @@
-import { TaxonomicFilter } from './TaxonomicFilter'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { taxonomicFilterMocksDecorator } from 'lib/components/TaxonomicFilter/__mocks__/taxonomicFilterMocksDecorator'
+import { Meta, StoryFn } from '@storybook/react'
import { useActions, useMountedLogic } from 'kea'
-import { actionsModel } from '~/models/actionsModel'
+import { taxonomicFilterMocksDecorator } from 'lib/components/TaxonomicFilter/__mocks__/taxonomicFilterMocksDecorator'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { useEffect } from 'react'
-import { infiniteListLogic } from './infiniteListLogic'
-import { Meta, StoryFn } from '@storybook/react'
+
import { useAvailableFeatures } from '~/mocks/features'
+import { actionsModel } from '~/models/actionsModel'
import { AvailableFeature } from '~/types'
+import { infiniteListLogic } from './infiniteListLogic'
+import { TaxonomicFilter } from './TaxonomicFilter'
+
const meta: Meta = {
title: 'Filters/Taxonomic Filter',
component: TaxonomicFilter,
diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx
index 9d74f6d1ffb24..0c3b7173e9782 100644
--- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx
@@ -1,17 +1,19 @@
import './TaxonomicFilter.scss'
-import { useEffect, useMemo, useRef } from 'react'
+
+import clsx from 'clsx'
import { BindLogic, useActions, useValues } from 'kea'
-import { InfiniteSelectResults } from './InfiniteSelectResults'
-import { taxonomicFilterLogic } from './taxonomicFilterLogic'
import {
TaxonomicFilterGroupType,
TaxonomicFilterLogicProps,
TaxonomicFilterProps,
} from 'lib/components/TaxonomicFilter/types'
-import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { IconKeyboard } from 'lib/lemon-ui/icons'
+import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import clsx from 'clsx'
+import { useEffect, useMemo, useRef } from 'react'
+
+import { InfiniteSelectResults } from './InfiniteSelectResults'
+import { taxonomicFilterLogic } from './taxonomicFilterLogic'
let uniqueMemoizedIndex = 0
diff --git a/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.test.ts b/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.test.ts
index 5ce37452c1e2a..8a524a014d281 100644
--- a/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.test.ts
+++ b/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.test.ts
@@ -1,11 +1,13 @@
-import { infiniteListLogic } from './infiniteListLogic'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { MOCK_TEAM_ID } from 'lib/api.mock'
import { expectLogic, partial } from 'kea-test-utils'
+import { MOCK_TEAM_ID } from 'lib/api.mock'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+
+import { useMocks } from '~/mocks/jest'
import { initKeaTests } from '~/test/init'
import { mockEventDefinitions, mockEventPropertyDefinitions } from '~/test/mocks'
import { AppContext, PropertyDefinition } from '~/types'
-import { useMocks } from '~/mocks/jest'
+
+import { infiniteListLogic } from './infiniteListLogic'
window.POSTHOG_APP_CONTEXT = { current_team: { id: MOCK_TEAM_ID } } as unknown as AppContext
diff --git a/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.ts b/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.ts
index 033a3cc08db21..4d0857b0878fc 100644
--- a/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.ts
+++ b/frontend/src/lib/components/TaxonomicFilter/infiniteListLogic.ts
@@ -1,11 +1,9 @@
+import Fuse from 'fuse.js'
+import { actions, connect, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, props, key, path, connect, actions, reducers, selectors, listeners, events } from 'kea'
import { combineUrl } from 'kea-router'
import api from 'lib/api'
-import { RenderedRows } from 'react-virtualized/dist/es/List'
-import type { infiniteListLogicType } from './infiniteListLogicType'
-import { CohortType, EventDefinition } from '~/types'
-import Fuse from 'fuse.js'
+import { taxonomicFilterLogic } from 'lib/components/TaxonomicFilter/taxonomicFilterLogic'
import {
InfiniteListLogicProps,
ListFuse,
@@ -15,11 +13,15 @@ import {
TaxonomicFilterGroup,
TaxonomicFilterGroupType,
} from 'lib/components/TaxonomicFilter/types'
-import { taxonomicFilterLogic } from 'lib/components/TaxonomicFilter/taxonomicFilterLogic'
-import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
import { getKeyMapping } from 'lib/taxonomy'
+import { RenderedRows } from 'react-virtualized/dist/es/List'
+import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
+
+import { CohortType, EventDefinition } from '~/types'
+
import { teamLogic } from '../../../scenes/teamLogic'
import { captureTimeToSeeData } from '../../internalMetrics'
+import type { infiniteListLogicType } from './infiniteListLogicType'
/*
by default the pop-up starts open for the first item in the list
diff --git a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.test.ts b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.test.ts
index 4237bea8c6453..2c6f0ff84c2db 100644
--- a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.test.ts
+++ b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.test.ts
@@ -1,14 +1,16 @@
-import { infiniteListLogic } from './infiniteListLogic'
-import { TaxonomicFilterGroupType, TaxonomicFilterLogicProps } from 'lib/components/TaxonomicFilter/types'
-import { MOCK_TEAM_ID } from 'lib/api.mock'
import { expectLogic } from 'kea-test-utils'
+import { MOCK_TEAM_ID } from 'lib/api.mock'
+import { taxonomicFilterLogic } from 'lib/components/TaxonomicFilter/taxonomicFilterLogic'
+import { TaxonomicFilterGroupType, TaxonomicFilterLogicProps } from 'lib/components/TaxonomicFilter/types'
+
+import { useMocks } from '~/mocks/jest'
+import { actionsModel } from '~/models/actionsModel'
+import { groupsModel } from '~/models/groupsModel'
import { initKeaTests } from '~/test/init'
import { mockEventDefinitions } from '~/test/mocks'
import { AppContext } from '~/types'
-import { taxonomicFilterLogic } from 'lib/components/TaxonomicFilter/taxonomicFilterLogic'
-import { groupsModel } from '~/models/groupsModel'
-import { actionsModel } from '~/models/actionsModel'
-import { useMocks } from '~/mocks/jest'
+
+import { infiniteListLogic } from './infiniteListLogic'
window.POSTHOG_APP_CONTEXT = { current_team: { id: MOCK_TEAM_ID } } as unknown as AppContext
diff --git a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx
index 7bcd6833e25ab..1cfba27aa602b 100644
--- a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx
+++ b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx
@@ -1,5 +1,7 @@
-import { BuiltLogic, kea, props, key, path, connect, actions, reducers, selectors, listeners } from 'kea'
-import type { taxonomicFilterLogicType } from './taxonomicFilterLogicType'
+import { actions, BuiltLogic, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import { combineUrl } from 'kea-router'
+import { infiniteListLogic } from 'lib/components/TaxonomicFilter/infiniteListLogic'
+import { infiniteListLogicType } from 'lib/components/TaxonomicFilter/infiniteListLogicType'
import {
ListStorage,
SimpleOption,
@@ -8,41 +10,41 @@ import {
TaxonomicFilterLogicProps,
TaxonomicFilterValue,
} from 'lib/components/TaxonomicFilter/types'
-import { infiniteListLogic } from 'lib/components/TaxonomicFilter/infiniteListLogic'
+import { IconCohort } from 'lib/lemon-ui/icons'
+import { KEY_MAPPING } from 'lib/taxonomy'
+import { capitalizeFirstLetter, pluralize, toParams } from 'lib/utils'
+import { getEventDefinitionIcon, getPropertyDefinitionIcon } from 'scenes/data-management/events/DefinitionHeader'
+import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
+import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
+import { groupDisplayId } from 'scenes/persons/GroupActorDisplay'
+import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { actionsModel } from '~/models/actionsModel'
+import { cohortsModel } from '~/models/cohortsModel'
+import { dashboardsModel } from '~/models/dashboardsModel'
+import { groupPropertiesModel } from '~/models/groupPropertiesModel'
+import { groupsModel } from '~/models/groupsModel'
+import { updatePropertyDefinitions } from '~/models/propertyDefinitionsModel'
import {
ActionType,
CohortType,
- EventDefinitionType,
DashboardType,
EventDefinition,
+ EventDefinitionType,
Experiment,
FeatureFlagType,
Group,
InsightModel,
+ NotebookType,
PersonProperty,
PersonType,
PluginType,
PropertyDefinition,
- NotebookType,
} from '~/types'
-import { cohortsModel } from '~/models/cohortsModel'
-import { actionsModel } from '~/models/actionsModel'
-import { teamLogic } from 'scenes/teamLogic'
-import { groupsModel } from '~/models/groupsModel'
-import { groupPropertiesModel } from '~/models/groupPropertiesModel'
-import { capitalizeFirstLetter, pluralize, toParams } from 'lib/utils'
-import { combineUrl } from 'kea-router'
-import { IconCohort } from 'lib/lemon-ui/icons'
-import { KEY_MAPPING } from 'lib/taxonomy'
-import { getEventDefinitionIcon, getPropertyDefinitionIcon } from 'scenes/data-management/events/DefinitionHeader'
-import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
-import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
-import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
-import { dashboardsModel } from '~/models/dashboardsModel'
-import { groupDisplayId } from 'scenes/persons/GroupActorDisplay'
-import { infiniteListLogicType } from 'lib/components/TaxonomicFilter/infiniteListLogicType'
-import { updatePropertyDefinitions } from '~/models/propertyDefinitionsModel'
+
import { InlineHogQLEditor } from './InlineHogQLEditor'
+import type { taxonomicFilterLogicType } from './taxonomicFilterLogicType'
export const eventTaxonomicGroupProps: Pick = {
getPopoverHeader: (eventDefinition: EventDefinition): string => {
diff --git a/frontend/src/lib/components/TaxonomicFilter/types.ts b/frontend/src/lib/components/TaxonomicFilter/types.ts
index 3de701a308c3e..3dbb5c0eabc38 100644
--- a/frontend/src/lib/components/TaxonomicFilter/types.ts
+++ b/frontend/src/lib/components/TaxonomicFilter/types.ts
@@ -1,6 +1,7 @@
+import Fuse from 'fuse.js'
import { LogicWrapper } from 'kea'
+
import { ActionType, CohortType, EventDefinition, PersonProperty, PropertyDefinition } from '~/types'
-import Fuse from 'fuse.js'
export interface SimpleOption {
name: string
diff --git a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.stories.tsx b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.stories.tsx
index fb8835de130df..881c45b52bd50 100644
--- a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.stories.tsx
+++ b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.stories.tsx
@@ -1,11 +1,13 @@
-import { useState } from 'react'
-import { TaxonomicPopover, TaxonomicStringPopover } from './TaxonomicPopover'
-import { cohortsModel } from '~/models/cohortsModel'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { Meta } from '@storybook/react'
import { useMountedLogic } from 'kea'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
import { taxonomicFilterMocksDecorator } from 'lib/components/TaxonomicFilter/__mocks__/taxonomicFilterMocksDecorator'
-import { Meta } from '@storybook/react'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { useState } from 'react'
+
+import { cohortsModel } from '~/models/cohortsModel'
+
+import { TaxonomicPopover, TaxonomicStringPopover } from './TaxonomicPopover'
const meta: Meta = {
title: 'Filters/TaxonomicPopover',
diff --git a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx
index abf4589005691..2d0e835d7ef85 100644
--- a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx
+++ b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx
@@ -1,9 +1,9 @@
import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
import { TaxonomicFilterGroupType, TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
-import { useEffect, useState } from 'react'
-import { LemonButton, LemonButtonProps, LemonButtonWithSideAction } from 'lib/lemon-ui/LemonButton'
import { IconClose } from 'lib/lemon-ui/icons'
+import { LemonButton, LemonButtonProps, LemonButtonWithSideAction } from 'lib/lemon-ui/LemonButton'
import { LemonDropdown } from 'lib/lemon-ui/LemonDropdown'
+import { useEffect, useState } from 'react'
export interface TaxonomicPopoverProps
extends Omit {
diff --git a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx
index f343686d66a2e..26fc8507bbea4 100644
--- a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx
+++ b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx
@@ -1,11 +1,12 @@
+import './TimelineSeekbar.scss'
+
import { LemonBadge } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { Dayjs } from 'lib/dayjs'
-import { humanFriendlyDetailedTime, pluralize } from 'lib/utils'
-import { AlignType } from 'rc-trigger/lib/interface'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import './TimelineSeekbar.scss'
+import { humanFriendlyDetailedTime, pluralize } from 'lib/utils'
+import { AlignType } from 'rc-trigger/lib/interface'
export interface TimelinePoint {
timestamp: Dayjs
diff --git a/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx b/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx
index 35f30b91f3241..8491aafb0c61d 100644
--- a/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx
+++ b/frontend/src/lib/components/UnitPicker/CustomUnitModal.tsx
@@ -1,10 +1,11 @@
-import { RefCallback, useEffect, useState } from 'react'
-import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { HandleUnitChange } from 'lib/components/UnitPicker/UnitPicker'
import { PureField } from 'lib/forms/Field'
-import { capitalizeFirstLetter } from 'lib/utils'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
-import { HandleUnitChange } from 'lib/components/UnitPicker/UnitPicker'
+import { LemonModal } from 'lib/lemon-ui/LemonModal'
+import { capitalizeFirstLetter } from 'lib/utils'
+import { RefCallback, useEffect, useState } from 'react'
+
import { TrendsFilter } from '~/queries/schema'
function chooseFormativeElementValue(
diff --git a/frontend/src/lib/components/UnitPicker/UnitPicker.tsx b/frontend/src/lib/components/UnitPicker/UnitPicker.tsx
index f9c20b279fed5..79a877f9d316f 100644
--- a/frontend/src/lib/components/UnitPicker/UnitPicker.tsx
+++ b/frontend/src/lib/components/UnitPicker/UnitPicker.tsx
@@ -1,11 +1,11 @@
-import { AggregationAxisFormat, INSIGHT_UNIT_OPTIONS } from 'scenes/insights/aggregationAxisFormat'
-import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { useMemo, useRef, useState } from 'react'
import { useActions, useValues } from 'kea'
+import { CustomUnitModal } from 'lib/components/UnitPicker/CustomUnitModal'
import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
+import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { CustomUnitModal } from 'lib/components/UnitPicker/CustomUnitModal'
+import { useMemo, useRef, useState } from 'react'
+import { AggregationAxisFormat, INSIGHT_UNIT_OPTIONS } from 'scenes/insights/aggregationAxisFormat'
import { insightLogic } from 'scenes/insights/insightLogic'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
diff --git a/frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx b/frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx
index cbacb2ef845b3..d7f58130d3c7e 100644
--- a/frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx
+++ b/frontend/src/lib/components/UniversalSearch/UniversalSearchPopover.tsx
@@ -1,10 +1,18 @@
import './UniversalSearch.scss'
-import { useState } from 'react'
+
+import clsx from 'clsx'
+import { useMountedLogic, useValues } from 'kea'
+import { combineUrl, router } from 'kea-router'
+import { useEventListener } from 'lib/hooks/useEventListener'
import { LemonButtonWithDropdownProps } from 'lib/lemon-ui/LemonButton'
-import { TaxonomicFilterGroupType, TaxonomicFilterLogicProps, TaxonomicFilterValue } from '../TaxonomicFilter/types'
+import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { Popover } from 'lib/lemon-ui/Popover'
-import { combineUrl, router } from 'kea-router'
+import { useState } from 'react'
+import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
+import { PluginSelectionType, pluginsLogic } from 'scenes/plugins/pluginsLogic'
import { urls } from 'scenes/urls'
+
+import { navigationLogic } from '~/layout/navigation/navigationLogic'
import {
ActionType,
ChartDisplayType,
@@ -17,15 +25,10 @@ import {
InsightType,
PersonType,
} from '~/types'
-import { PluginSelectionType, pluginsLogic } from 'scenes/plugins/pluginsLogic'
-import clsx from 'clsx'
-import { navigationLogic } from '~/layout/navigation/navigationLogic'
-import { useMountedLogic, useValues } from 'kea'
-import { useEventListener } from 'lib/hooks/useEventListener'
-import { taxonomicFilterLogic } from '../TaxonomicFilter/taxonomicFilterLogic'
+
import { TaxonomicFilter } from '../TaxonomicFilter/TaxonomicFilter'
-import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
-import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
+import { taxonomicFilterLogic } from '../TaxonomicFilter/taxonomicFilterLogic'
+import { TaxonomicFilterGroupType, TaxonomicFilterLogicProps, TaxonomicFilterValue } from '../TaxonomicFilter/types'
export interface UniversalSearchPopoverProps
extends Omit {
diff --git a/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.tsx b/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.tsx
index 6030276e756e9..a01ae79e4c7be 100644
--- a/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.tsx
+++ b/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.tsx
@@ -1,8 +1,11 @@
+import './UserActivityIndicator.scss'
+
import clsx from 'clsx'
-import { UserBasicType } from '~/types'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
+
+import { UserBasicType } from '~/types'
+
import { TZLabel } from '../TZLabel'
-import './UserActivityIndicator.scss'
export interface UserActivityIndicatorProps {
prefix?: string
diff --git a/frontend/src/lib/components/UserSelectItem.tsx b/frontend/src/lib/components/UserSelectItem.tsx
index 9167d87fe3bc5..0732418c35479 100644
--- a/frontend/src/lib/components/UserSelectItem.tsx
+++ b/frontend/src/lib/components/UserSelectItem.tsx
@@ -1,7 +1,8 @@
-import { UserBasicType, UserType } from '~/types'
import { LemonSelectMultipleOptionItem } from 'lib/lemon-ui/LemonSelectMultiple'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
+import { UserBasicType, UserType } from '~/types'
+
export interface UserSelectItemProps {
user: UserBasicType | UserType
}
diff --git a/frontend/src/lib/components/VersionChecker/VersionCheckerBanner.tsx b/frontend/src/lib/components/VersionChecker/VersionCheckerBanner.tsx
index b10938af5e89b..38094c08dd21f 100644
--- a/frontend/src/lib/components/VersionChecker/VersionCheckerBanner.tsx
+++ b/frontend/src/lib/components/VersionChecker/VersionCheckerBanner.tsx
@@ -1,5 +1,6 @@
import { useValues } from 'kea'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+
import { versionCheckerLogic } from './versionCheckerLogic'
export function VersionCheckerBanner({ minVersionAccepted }: { minVersionAccepted?: string }): JSX.Element {
diff --git a/frontend/src/lib/components/VersionChecker/versionCheckerLogic.test.ts b/frontend/src/lib/components/VersionChecker/versionCheckerLogic.test.ts
index 22431153935d2..9d3ab79d0d3ce 100644
--- a/frontend/src/lib/components/VersionChecker/versionCheckerLogic.test.ts
+++ b/frontend/src/lib/components/VersionChecker/versionCheckerLogic.test.ts
@@ -1,7 +1,9 @@
+import { expectLogic } from 'kea-test-utils'
+
import { useMocks } from '~/mocks/jest'
-import { SDKVersion, versionCheckerLogic } from './versionCheckerLogic'
import { initKeaTests } from '~/test/init'
-import { expectLogic } from 'kea-test-utils'
+
+import { SDKVersion, versionCheckerLogic } from './versionCheckerLogic'
const useMockedVersions = (githubVersions: SDKVersion[], usedVersions: SDKVersion[]): void => {
useMocks({
diff --git a/frontend/src/lib/components/VersionChecker/versionCheckerLogic.ts b/frontend/src/lib/components/VersionChecker/versionCheckerLogic.ts
index acc1897bc78f2..875c27ae97a8a 100644
--- a/frontend/src/lib/components/VersionChecker/versionCheckerLogic.ts
+++ b/frontend/src/lib/components/VersionChecker/versionCheckerLogic.ts
@@ -1,6 +1,7 @@
import { actions, afterMount, kea, listeners, path, reducers, sharedListeners } from 'kea'
import { loaders } from 'kea-loaders'
import api from 'lib/api'
+
import { HogQLQuery, NodeKind } from '~/queries/schema'
import type { versionCheckerLogicType } from './versionCheckerLogicType'
diff --git a/frontend/src/lib/components/VisibilitySensor/VisibilitySensor.tsx b/frontend/src/lib/components/VisibilitySensor/VisibilitySensor.tsx
index 8ff2d988e37ef..97a3fa0fd5820 100644
--- a/frontend/src/lib/components/VisibilitySensor/VisibilitySensor.tsx
+++ b/frontend/src/lib/components/VisibilitySensor/VisibilitySensor.tsx
@@ -1,5 +1,6 @@
import { useActions } from 'kea'
import { useEffect, useRef } from 'react'
+
import { visibilitySensorLogic } from './visibilitySensorLogic'
interface VisibilityProps {
diff --git a/frontend/src/lib/components/VisibilitySensor/visibilitySensorLogic.tsx b/frontend/src/lib/components/VisibilitySensor/visibilitySensorLogic.tsx
index ce0bdf419953d..835d9a98df30e 100644
--- a/frontend/src/lib/components/VisibilitySensor/visibilitySensorLogic.tsx
+++ b/frontend/src/lib/components/VisibilitySensor/visibilitySensorLogic.tsx
@@ -1,5 +1,5 @@
+import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { windowValues } from 'kea-window-values'
-import { kea, props, key, path, actions, reducers, selectors, listeners } from 'kea'
import type { visibilitySensorLogicType } from './visibilitySensorLogicType'
export const visibilitySensorLogic = kea([
diff --git a/frontend/src/lib/components/hedgehogs.stories.tsx b/frontend/src/lib/components/hedgehogs.stories.tsx
index 3abe96b5fdb9e..0ae1a23b4e39b 100644
--- a/frontend/src/lib/components/hedgehogs.stories.tsx
+++ b/frontend/src/lib/components/hedgehogs.stories.tsx
@@ -1,5 +1,6 @@
-import { Meta } from '@storybook/react'
import { LemonTable } from '@posthog/lemon-ui'
+import { Meta } from '@storybook/react'
+
import * as hedgehogs from './hedgehogs'
interface HedgehogDefinition {
@@ -14,8 +15,8 @@ const allHedgehogs: HedgehogDefinition[] = Object.entries(hedgehogs).map(([key,
const meta: Meta = {
title: 'Lemon UI/Hog illustrations',
+ tags: ['test-skip', 'autodocs'], // Not valuable to take snapshots of these hedgehogs
parameters: {
- testOptions: { skip: true }, // Not valuable to take snapshots of these hedgehogs
docs: {
description: {
component: `
@@ -37,7 +38,6 @@ she will get to it dependant on work load.
},
},
},
- tags: ['autodocs'],
}
export default meta
export function Library(): JSX.Element {
diff --git a/frontend/src/lib/components/hedgehogs.tsx b/frontend/src/lib/components/hedgehogs.tsx
index f5b8d0fe64097..ddc41d7bf8c4c 100644
--- a/frontend/src/lib/components/hedgehogs.tsx
+++ b/frontend/src/lib/components/hedgehogs.tsx
@@ -1,36 +1,36 @@
// Loads custom icons (some icons may come from a third-party library)
-import { ImgHTMLAttributes } from 'react'
-import surprisedHog from 'public/hedgehog/surprised-hog.png'
-import xRayHog from 'public/hedgehog/x-ray-hog.png'
-import hospitalHog from 'public/hedgehog/hospital-hog.png'
import blushingHog from 'public/hedgehog/blushing-hog.png'
-import laptopHog1 from 'public/hedgehog/laptop-hog-01.png'
-import laptopHog2 from 'public/hedgehog/laptop-hog-02.png'
-import explorerHog from 'public/hedgehog/explorer-hog.png'
-import runningHog from 'public/hedgehog/running-hog.png'
-import spaceHog from 'public/hedgehog/space-hog.png'
-import tronHog from 'public/hedgehog/tron-hog.png'
-import heartHog from 'public/hedgehog/heart-hog.png'
-import starHog from 'public/hedgehog/star-hog.png'
-import policeHog from 'public/hedgehog/police-hog.png'
-import sleepingHog from 'public/hedgehog/sleeping-hog.png'
import builderHog1 from 'public/hedgehog/builder-hog-01.png'
import builderHog2 from 'public/hedgehog/builder-hog-02.png'
import builderHog3 from 'public/hedgehog/builder-hog-03.png'
-import professorHog from 'public/hedgehog/professor-hog.png'
-import supportHeroHog from 'public/hedgehog/support-hero-hog.png'
-import xRayHog2 from 'public/hedgehog/x-ray-hogs-02.png'
+import detectiveHog from 'public/hedgehog/detective-hog.png'
+import experimentsHog from 'public/hedgehog/experiments-hog.png'
+import explorerHog from 'public/hedgehog/explorer-hog.png'
+import featureFlagHog from 'public/hedgehog/feature-flag-hog.png'
+import heartHog from 'public/hedgehog/heart-hog.png'
+import hospitalHog from 'public/hedgehog/hospital-hog.png'
+import laptopHog1 from 'public/hedgehog/laptop-hog-01.png'
+import laptopHog2 from 'public/hedgehog/laptop-hog-02.png'
import laptopHog3 from 'public/hedgehog/laptop-hog-03.png'
import laptopHog4 from 'public/hedgehog/laptop-hog-04.png'
import laptopHogEU from 'public/hedgehog/laptop-hog-eu.png'
-import detectiveHog from 'public/hedgehog/detective-hog.png'
-import mailHog from 'public/hedgehog/mail-hog.png'
-import featureFlagHog from 'public/hedgehog/feature-flag-hog.png'
-import experimentsHog from 'public/hedgehog/experiments-hog.png'
import listHog from 'public/hedgehog/list-hog.png'
-import warningHog from 'public/hedgehog/warning-hog.png'
-import readingHog from 'public/hedgehog/reading-hog.png'
+import mailHog from 'public/hedgehog/mail-hog.png'
import microphoneHog from 'public/hedgehog/microphone-hog.png'
+import policeHog from 'public/hedgehog/police-hog.png'
+import professorHog from 'public/hedgehog/professor-hog.png'
+import readingHog from 'public/hedgehog/reading-hog.png'
+import runningHog from 'public/hedgehog/running-hog.png'
+import sleepingHog from 'public/hedgehog/sleeping-hog.png'
+import spaceHog from 'public/hedgehog/space-hog.png'
+import starHog from 'public/hedgehog/star-hog.png'
+import supportHeroHog from 'public/hedgehog/support-hero-hog.png'
+import surprisedHog from 'public/hedgehog/surprised-hog.png'
+import tronHog from 'public/hedgehog/tron-hog.png'
+import warningHog from 'public/hedgehog/warning-hog.png'
+import xRayHog from 'public/hedgehog/x-ray-hog.png'
+import xRayHog2 from 'public/hedgehog/x-ray-hogs-02.png'
+import { ImgHTMLAttributes } from 'react'
type HedgehogProps = Omit, 'src'>
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
index 712c7c77fa957..69c5a65aaa2f8 100644
--- a/frontend/src/lib/constants.tsx
+++ b/frontend/src/lib/constants.tsx
@@ -176,6 +176,7 @@ export const FEATURE_FLAGS = {
PERSON_FEED_CANVAS: 'person-feed-canvas', // owner: #project-canvas
MULTI_PROJECT_FEATURE_FLAGS: 'multi-project-feature-flags', // owner: @jurajmajerik #team-feature-success
NETWORK_PAYLOAD_CAPTURE: 'network-payload-capture', // owner: #team-monitoring
+ FEATURE_FLAG_COHORT_CREATION: 'feature-flag-cohort-creation', // owner: @neilkakkar #team-feature-success
INSIGHT_HORIZONTAL_CONTROLS: 'insight-horizontal-controls', // owner: @benjackwhite
} as const
export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
diff --git a/frontend/src/lib/dayjs.ts b/frontend/src/lib/dayjs.ts
index 51bf082205b51..6dac103d72ff2 100644
--- a/frontend/src/lib/dayjs.ts
+++ b/frontend/src/lib/dayjs.ts
@@ -1,13 +1,13 @@
// eslint-disable-next-line no-restricted-imports
import dayjs, { Dayjs as DayjsOriginal, isDayjs } from 'dayjs'
-import LocalizedFormat from 'dayjs/plugin/localizedFormat'
-import relativeTime from 'dayjs/plugin/relativeTime'
+import duration from 'dayjs/plugin/duration'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import LocalizedFormat from 'dayjs/plugin/localizedFormat'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+import relativeTime from 'dayjs/plugin/relativeTime'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'
-import duration from 'dayjs/plugin/duration'
-import quarterOfYear from 'dayjs/plugin/quarterOfYear'
// necessary for any localized date formatting to work
dayjs.extend(LocalizedFormat)
@@ -21,7 +21,7 @@ dayjs.extend(quarterOfYear)
const now = (): Dayjs => dayjs()
-export { dayjs, now, isDayjs }
+export { dayjs, isDayjs, now }
/** Parse UTC datetime string using Day.js, taking into account time zone conversion edge cases. */
export function dayjsUtcToTimezone(
diff --git a/frontend/src/lib/forms/Field.stories.tsx b/frontend/src/lib/forms/Field.stories.tsx
index d5d071ba89d9d..34c229681c114 100644
--- a/frontend/src/lib/forms/Field.stories.tsx
+++ b/frontend/src/lib/forms/Field.stories.tsx
@@ -1,9 +1,9 @@
-import { Meta } from '@storybook/react'
-import { Field, PureField } from './Field'
import { LemonButton, LemonCheckbox, LemonInput, LemonSelect, LemonTextArea } from '@posthog/lemon-ui'
+import { Meta } from '@storybook/react'
import { kea, path, useAllValues } from 'kea'
import { Form, forms } from 'kea-forms'
+import { Field, PureField } from './Field'
import type { formLogicType } from './Field.storiesType'
const meta: Meta = {
diff --git a/frontend/src/lib/forms/Field.tsx b/frontend/src/lib/forms/Field.tsx
index 6fdc536be363f..b0924ae43ae5b 100644
--- a/frontend/src/lib/forms/Field.tsx
+++ b/frontend/src/lib/forms/Field.tsx
@@ -1,7 +1,7 @@
+import clsx from 'clsx'
+import { Field as KeaField, FieldProps as KeaFieldProps } from 'kea-forms/lib/components'
import { IconErrorOutline } from 'lib/lemon-ui/icons'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { Field as KeaField, FieldProps as KeaFieldProps } from 'kea-forms/lib/components'
-import clsx from 'clsx'
export type PureFieldProps = {
/** The label name to be displayed */
diff --git a/frontend/src/lib/hooks/useBreakpoint.ts b/frontend/src/lib/hooks/useBreakpoint.ts
index 1592c09b6781e..cf01e7d80e925 100644
--- a/frontend/src/lib/hooks/useBreakpoint.ts
+++ b/frontend/src/lib/hooks/useBreakpoint.ts
@@ -1,6 +1,7 @@
+import { getActiveBreakpointValue } from 'lib/utils/responsiveUtils'
import { useEffect, useState } from 'react'
+
import { useWindowSize } from './useWindowSize'
-import { getActiveBreakpointValue } from 'lib/utils/responsiveUtils'
export const useBreakpoint = (): number => {
const { width } = useWindowSize()
diff --git a/frontend/src/lib/hooks/useD3.ts b/frontend/src/lib/hooks/useD3.ts
index 19de5fab0171c..8f1dcae4dbc02 100644
--- a/frontend/src/lib/hooks/useD3.ts
+++ b/frontend/src/lib/hooks/useD3.ts
@@ -1,5 +1,5 @@
-import { MutableRefObject, useEffect, useRef } from 'react'
import * as d3 from 'd3'
+import { MutableRefObject, useEffect, useRef } from 'react'
export type D3Selector = d3.Selection
export type D3Transition = d3.Transition
diff --git a/frontend/src/lib/hooks/useKeyboardHotkeys.tsx b/frontend/src/lib/hooks/useKeyboardHotkeys.tsx
index eb6bf3694132e..d08afd46441b2 100644
--- a/frontend/src/lib/hooks/useKeyboardHotkeys.tsx
+++ b/frontend/src/lib/hooks/useKeyboardHotkeys.tsx
@@ -1,5 +1,6 @@
import { useEventListener } from 'lib/hooks/useEventListener'
import { DependencyList } from 'react'
+
import { HotKey } from '~/types'
export interface HotkeyInterface {
diff --git a/frontend/src/lib/hooks/useScrollable.ts b/frontend/src/lib/hooks/useScrollable.ts
index 08fe12247725d..2d69b0df6905e 100644
--- a/frontend/src/lib/hooks/useScrollable.ts
+++ b/frontend/src/lib/hooks/useScrollable.ts
@@ -1,4 +1,5 @@
import { useLayoutEffect, useRef, useState } from 'react'
+
import { useResizeObserver } from './useResizeObserver'
/** Determine whether an element is horizontally scrollable, on the left and on the right respectively. */
diff --git a/frontend/src/lib/hooks/useUploadFiles.ts b/frontend/src/lib/hooks/useUploadFiles.ts
index 1b21c2613e3a5..ab4df041ba180 100644
--- a/frontend/src/lib/hooks/useUploadFiles.ts
+++ b/frontend/src/lib/hooks/useUploadFiles.ts
@@ -1,7 +1,8 @@
-import { MediaUploadResponse } from '~/types'
import api from 'lib/api'
import { useEffect, useState } from 'react'
+import { MediaUploadResponse } from '~/types'
+
export const lazyImageBlobReducer = async (blob: Blob): Promise => {
const blobReducer = (await import('image-blob-reduce')).default()
return blobReducer.toBlob(blob, { max: 2000 })
diff --git a/frontend/src/lib/hooks/useWhyDidIRender.ts b/frontend/src/lib/hooks/useWhyDidIRender.ts
index 2650dd3d7882d..eb8af54e66c63 100644
--- a/frontend/src/lib/hooks/useWhyDidIRender.ts
+++ b/frontend/src/lib/hooks/useWhyDidIRender.ts
@@ -1,4 +1,5 @@
import { useMemo, useRef } from 'react'
+
import { useFeatureFlag } from './useFeatureFlag'
export function useWhyDidIRender(name: string, props: Record): void {
diff --git a/frontend/src/lib/hooks/useWindowSize.js b/frontend/src/lib/hooks/useWindowSize.js
index dc0615e5d9196..d9e137bc1b684 100644
--- a/frontend/src/lib/hooks/useWindowSize.js
+++ b/frontend/src/lib/hooks/useWindowSize.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
export function useWindowSize() {
const isClient = typeof window === 'object'
diff --git a/frontend/src/lib/internalMetrics.ts b/frontend/src/lib/internalMetrics.ts
index e137db77e41b8..9ae89f02c235d 100644
--- a/frontend/src/lib/internalMetrics.ts
+++ b/frontend/src/lib/internalMetrics.ts
@@ -1,5 +1,5 @@
-import posthog from 'posthog-js'
import api, { getJSONOrThrow } from 'lib/api'
+import posthog from 'posthog-js'
import { getResponseBytes } from 'scenes/insights/utils'
export interface TimeToSeeDataPayload {
diff --git a/frontend/src/lib/introductions/GroupsIntroductionOption.tsx b/frontend/src/lib/introductions/GroupsIntroductionOption.tsx
index c2b863cef3154..6050f89941867 100644
--- a/frontend/src/lib/introductions/GroupsIntroductionOption.tsx
+++ b/frontend/src/lib/introductions/GroupsIntroductionOption.tsx
@@ -1,8 +1,8 @@
import { useValues } from 'kea'
-import Select from 'rc-select'
-import { Link } from 'lib/lemon-ui/Link'
import { groupsAccessLogic, GroupsAccessStatus } from 'lib/introductions/groupsAccessLogic'
import { IconLock } from 'lib/lemon-ui/icons'
+import { Link } from 'lib/lemon-ui/Link'
+import Select from 'rc-select'
// TODO: Remove, but de-ant FeatureFlagReleaseConditions first
export function GroupsIntroductionOption({ value }: { value: any }): JSX.Element | null {
diff --git a/frontend/src/lib/introductions/NewFeatureBanner.tsx b/frontend/src/lib/introductions/NewFeatureBanner.tsx
index 6b8232e1d0000..da8b63c94028d 100644
--- a/frontend/src/lib/introductions/NewFeatureBanner.tsx
+++ b/frontend/src/lib/introductions/NewFeatureBanner.tsx
@@ -1,6 +1,6 @@
+import { LemonButton } from '@posthog/lemon-ui'
import { useValues } from 'kea'
import { Link } from 'lib/lemon-ui/Link'
-import { LemonButton } from '@posthog/lemon-ui'
import { billingLogic } from 'scenes/billing/billingLogic'
export function NewFeatureBanner(): JSX.Element | null {
diff --git a/frontend/src/lib/introductions/groupsAccessLogic.ts b/frontend/src/lib/introductions/groupsAccessLogic.ts
index 7e6b45edf201f..37bcb2e97972c 100644
--- a/frontend/src/lib/introductions/groupsAccessLogic.ts
+++ b/frontend/src/lib/introductions/groupsAccessLogic.ts
@@ -1,9 +1,10 @@
-import { kea, path, connect, selectors } from 'kea'
-import { AvailableFeature } from '~/types'
-import { teamLogic } from 'scenes/teamLogic'
+import { connect, kea, path, selectors } from 'kea'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { teamLogic } from 'scenes/teamLogic'
import { userLogic } from 'scenes/userLogic'
+import { AvailableFeature } from '~/types'
+
import type { groupsAccessLogicType } from './groupsAccessLogicType'
export enum GroupsAccessStatus {
AlreadyUsing,
diff --git a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.tsx b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.tsx
index c9b5f8db5d554..394e9424ddd4a 100644
--- a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.tsx
+++ b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.tsx
@@ -1,9 +1,10 @@
+import './LemonActionableTooltip.scss'
+
import { Placement } from '@floating-ui/react'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { IconOpenInNew } from 'lib/lemon-ui/icons'
-import { IconClose, IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons'
import { LemonButton } from '@posthog/lemon-ui'
-import './LemonActionableTooltip.scss'
+import { IconOpenInNew } from 'lib/lemon-ui/icons'
+import { IconChevronLeft, IconChevronRight, IconClose } from 'lib/lemon-ui/icons'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
export type LemonActionableTooltipProps = {
title?: string
diff --git a/frontend/src/lib/lemon-ui/LemonActionableTooltip/index.ts b/frontend/src/lib/lemon-ui/LemonActionableTooltip/index.ts
index 516fcb923abd2..4c3069d89979f 100644
--- a/frontend/src/lib/lemon-ui/LemonActionableTooltip/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonActionableTooltip/index.ts
@@ -1,2 +1,2 @@
-export { LemonActionableTooltip } from './LemonActionableTooltip'
export type { LemonActionableTooltipProps } from './LemonActionableTooltip'
+export { LemonActionableTooltip } from './LemonActionableTooltip'
diff --git a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.stories.tsx b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.stories.tsx
index 20e40eae0b97c..04eb497c9e940 100644
--- a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.stories.tsx
@@ -1,7 +1,8 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonBadge } from './LemonBadge'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconPlusMini } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+
+import { LemonBadge } from './LemonBadge'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.tsx b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.tsx
index 75f785f3429b8..cb5af2947a797 100644
--- a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.tsx
@@ -1,7 +1,8 @@
+import './LemonBadge.scss'
+
import clsx from 'clsx'
import { compactNumber, humanFriendlyNumber } from 'lib/utils'
import { CSSTransition } from 'react-transition-group'
-import './LemonBadge.scss'
interface LemonBadgePropsBase {
size?: 'small' | 'medium' | 'large'
diff --git a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadgeNumber.stories.tsx b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadgeNumber.stories.tsx
index 09b2003aedbf2..92d2884d11a70 100644
--- a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadgeNumber.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadgeNumber.stories.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonBadge, LemonBadgeNumberProps } from './LemonBadge'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useState } from 'react'
+
+import { LemonBadge, LemonBadgeNumberProps } from './LemonBadge'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonBadge/index.ts b/frontend/src/lib/lemon-ui/LemonBadge/index.ts
index 1c064e83a1404..26d5ac39abf75 100644
--- a/frontend/src/lib/lemon-ui/LemonBadge/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonBadge/index.ts
@@ -1,2 +1,2 @@
-export { LemonBadge } from './LemonBadge'
export type { LemonBadgeProps } from './LemonBadge'
+export { LemonBadge } from './LemonBadge'
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
index c4ad6115a0433..4276607b0dc72 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx
@@ -1,4 +1,5 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
import { LemonBanner, LemonBannerProps } from './LemonBanner'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
index 2f7f95cb06409..69e0da9f467af 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
@@ -1,9 +1,11 @@
import './LemonBanner.scss'
-import { IconClose, IconInfo, IconWarning } from 'lib/lemon-ui/icons'
+
import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
+import { IconClose, IconInfo, IconWarning } from 'lib/lemon-ui/icons'
import { LemonButton, SideAction } from 'lib/lemon-ui/LemonButton'
import { LemonButtonPropsBase } from 'lib/lemon-ui/LemonButton/LemonButton'
-import { useActions, useValues } from 'kea'
+
import { lemonBannerLogic } from './lemonBannerLogic'
export type LemonBannerAction = SideAction & Pick
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/index.ts b/frontend/src/lib/lemon-ui/LemonBanner/index.ts
index a8b9f586f8000..f06472f32fe40 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonBanner/index.ts
@@ -1,2 +1,2 @@
-export { LemonBanner } from './LemonBanner'
export type { LemonBannerProps } from './LemonBanner'
+export { LemonBanner } from './LemonBanner'
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
index 5ed9970665fda..2a23964cfc0f9 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -1,4 +1,6 @@
-.LemonButton {
+.LemonButton,
+.Link.LemonButton {
+ // Make sure we override .Link's styles where needed, e.g. padding
align-items: center;
appearance: none !important; // Important as this gets overridden by Ant styles...
background: none;
@@ -100,8 +102,7 @@
}
}
- &.LemonButton--small,
- .Breadcrumbs3000 & {
+ &.LemonButton--small {
gap: 0.25rem;
> span {
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
index c9c9c9c6251cc..03e34921b04b5 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx
@@ -1,4 +1,13 @@
+import { Link } from '@posthog/lemon-ui'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import clsx from 'clsx'
+import { useAsyncHandler } from 'lib/hooks/useAsyncHandler'
+import { IconCalculate, IconInfo, IconPlus } from 'lib/lemon-ui/icons'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { capitalizeFirstLetter, delay, range } from 'lib/utils'
+import { urls } from 'scenes/urls'
+
import {
LemonButton,
LemonButtonProps,
@@ -6,15 +15,7 @@ import {
LemonButtonWithDropdownProps,
LemonButtonWithSideAction,
} from './LemonButton'
-import { IconCalculate, IconInfo, IconPlus } from 'lib/lemon-ui/icons'
import { More } from './More'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { capitalizeFirstLetter, delay, range } from 'lib/utils'
-import { urls } from 'scenes/urls'
-import { Link } from '@posthog/lemon-ui'
-import { useAsyncHandler } from 'lib/hooks/useAsyncHandler'
-import clsx from 'clsx'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
const statuses: LemonButtonProps['status'][] = ['primary', 'danger', 'primary-alt', 'muted', 'stealth']
const types: LemonButtonProps['type'][] = ['primary', 'secondary', 'tertiary']
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
index d52f2e601200e..087f10ea8558f 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
@@ -1,14 +1,16 @@
-import clsx from 'clsx'
-import React, { useContext } from 'react'
-import { IconArrowDropDown, IconChevronRight } from 'lib/lemon-ui/icons'
-import { Link } from '../Link'
-import { Spinner } from '../Spinner/Spinner'
-import { Tooltip, TooltipProps } from '../Tooltip'
import './LemonButton.scss'
import './LemonButtonLegacy.scss'
import './LemonButton3000.scss'
+
+import clsx from 'clsx'
+import { IconArrowDropDown, IconChevronRight } from 'lib/lemon-ui/icons'
+import React, { useContext } from 'react'
+
import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
+import { Link } from '../Link'
import { PopoverReferenceContext } from '../Popover'
+import { Spinner } from '../Spinner/Spinner'
+import { Tooltip, TooltipProps } from '../Tooltip'
export type LemonButtonDropdown = Omit
@@ -109,6 +111,7 @@ export const LemonButton: React.FunctionComponent {
const [popoverVisibility, popoverPlacement] = useContext(PopoverReferenceContext) || [false, null]
+ const within3000PageHeader = useContext(Within3000PageHeaderContext)
if (!active && popoverVisibility) {
active = true
@@ -127,6 +130,9 @@ export const LemonButton: React.FunctionComponent
disabled = true // Cannot interact with a loading button
}
+ if (within3000PageHeader) {
+ size = 'small'
+ }
let tooltipContent: TooltipProps['title']
if (disabledReason) {
@@ -184,7 +190,7 @@ export const LemonButton: React.FunctionComponent
-
+
{icon ? {icon} : null}
{children ? {children} : null}
{sideIcon ? {sideIcon} : null}
@@ -210,6 +216,8 @@ export const LemonButton: React.FunctionComponent(false)
+
export type SideAction = Pick<
LemonButtonProps,
'onClick' | 'to' | 'disabled' | 'icon' | 'type' | 'tooltip' | 'data-attr' | 'aria-label' | 'status' | 'targetBlank'
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
index 9e7f178d442bf..70fa6ad667194 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
@@ -1,11 +1,12 @@
-.posthog-3000 {
+.posthog-3000.posthog-3000.posthog-3000 {
+ // The repetition is a specificity hack, so that we override .LemonButton
--transition: opacity 200ms ease, transform 200ms ease;
.LemonButton {
border-width: 0;
border-style: solid;
border-color: transparent;
- min-height: 2em;
+ min-height: 2.125rem;
padding: 0;
position: relative;
outline: none;
@@ -13,7 +14,7 @@
border-radius: 6px;
cursor: pointer;
- > span {
+ .LemonButton__chrome {
border-radius: 6px;
font-size: 0.875rem;
display: flex;
@@ -22,13 +23,12 @@
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;
+ min-height: 2.125rem;
position: relative;
text-align: left;
transition: var(--transition);
@@ -40,48 +40,53 @@
}
}
+ &.LemonButton--full-width {
+ .LemonButton__chrome {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+ }
+
&.LemonButton--xsmall {
min-height: 1.5rem;
padding-left: 0;
+ font-size: 0.8125rem;
- > span {
+ .LemonButton__chrome {
min-height: 1.5rem;
padding: 0.125rem 0.375rem;
}
- &.LemonButton--has-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- > span {
+ &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
+ .LemonButton__chrome {
padding-left: 0.25rem;
}
}
- &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- > span {
+ &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
+ .LemonButton__chrome {
padding-right: 0.25rem;
}
}
}
&.LemonButton--small {
- min-height: 1.8rem;
+ min-height: 1.75rem;
+ font-size: 0.8125rem;
- > span {
- min-height: 1.8rem;
+ .LemonButton__chrome {
+ min-height: 1.75rem;
padding: 0.25rem 0.5rem;
}
- &.LemonButton--has-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- > span {
+ &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
+ .LemonButton__chrome {
padding-left: 0.375rem;
}
}
- &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
- > span {
+ &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
+ .LemonButton__chrome {
padding-right: 0.375rem;
}
}
@@ -90,26 +95,24 @@
&.LemonButton--large {
min-height: 2.5rem;
- > span {
+ .LemonButton__chrome {
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) {
+ &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
padding-left: 0;
- > span {
+ .LemonButton__chrome {
padding-left: 0.75rem;
}
}
- &.LemonButton--has-side-icon:not(.LemonButton--no-padding),
- &.LemonButton--no-content:not(.LemonButton--no-padding) {
+ &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
padding-right: 0;
- > span {
+ .LemonButton__chrome {
padding-right: 0.75rem;
}
}
@@ -119,7 +122,7 @@
padding: 0;
min-height: 0;
- > span {
+ .LemonButton__chrome {
padding: 0;
min-height: 0;
}
@@ -129,20 +132,21 @@
border-width: 1px;
padding-bottom: 1px;
- > span {
+ .LemonButton__chrome {
+ border-width: 1px;
margin: 0 -1px;
top: -1px;
}
&:not([aria-disabled='true']):hover,
&.LemonButton--active {
- > span {
+ .LemonButton__chrome {
top: -1.5px;
}
}
&:not([aria-disabled='true']):active {
- > span {
+ .LemonButton__chrome {
top: -0.5px;
}
}
@@ -152,7 +156,7 @@
background: var(--primary-3000-frame-bg);
border-color: var(--primary-3000-frame-border);
- > span {
+ .LemonButton__chrome {
background: var(--primary-3000-button-bg);
border-color: var(--primary-3000-button-border);
color: #111;
@@ -169,18 +173,18 @@
background: var(--secondary-3000-frame-bg);
border-color: var(--secondary-3000-frame-border);
- &:not([aria-disabled='true']):hover > span {
+ &:not([aria-disabled='true']):hover .LemonButton__chrome {
border-color: var(--secondary-3000-button-border-hover);
}
- > span {
+ .LemonButton__chrome {
color: var(--default);
background: var(--accent-3000);
border-color: var(--secondary-3000-button-border);
}
&.LemonButton--active {
- > span {
+ .LemonButton__chrome {
color: var(--default);
background: var(--bg-light);
border-color: var(--secondary-3000-button-border-hover);
@@ -190,7 +194,7 @@
&.LemonButton--is-stealth:not(.LemonButton--active) {
&:hover {
- > span {
+ .LemonButton__chrome {
border-color: var(--secondary-3000-button-border);
}
}
@@ -199,7 +203,7 @@
background-color: transparent;
border-color: transparent;
- > span {
+ .LemonButton__chrome {
background-color: transparent;
border-color: transparent;
color: var(--muted);
@@ -242,19 +246,19 @@
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
- & .LemonButton {
+ .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;
- }
+ .LemonButton__chrome {
+ margin: auto !important;
+ top: 0 !important;
+ background: none !important;
+ border: none !important;
}
&:not([aria-disabled='true']):hover {
diff --git a/frontend/src/lib/lemon-ui/LemonButton/More.tsx b/frontend/src/lib/lemon-ui/LemonButton/More.tsx
index 00f03c2879ec3..71f6943ef93ee 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/More.tsx
+++ b/frontend/src/lib/lemon-ui/LemonButton/More.tsx
@@ -1,6 +1,7 @@
-import { LemonButtonWithDropdown } from '.'
import { IconEllipsis } from 'lib/lemon-ui/icons'
+
import { PopoverProps } from '../Popover/Popover'
+import { LemonButtonWithDropdown } from '.'
import { LemonButtonProps, LemonButtonWithDropdownProps } from './LemonButton'
export type MoreProps = Partial> &
diff --git a/frontend/src/lib/lemon-ui/LemonButton/index.ts b/frontend/src/lib/lemon-ui/LemonButton/index.ts
index 944bbdc1a3c75..1f679448b3949 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonButton/index.ts
@@ -1,8 +1,8 @@
-export { LemonButton, LemonButtonWithSideAction, LemonButtonWithDropdown } from './LemonButton'
export type {
- LemonButtonPropsBase,
LemonButtonProps,
- LemonButtonWithSideActionProps,
+ LemonButtonPropsBase,
LemonButtonWithDropdownProps,
+ LemonButtonWithSideActionProps,
SideAction,
} from './LemonButton'
+export { LemonButton, LemonButtonWithDropdown, LemonButtonWithSideAction } from './LemonButton'
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx
index 4d11003196266..7de56eab1a06b 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx
@@ -1,7 +1,8 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonCalendar, LemonCalendarProps } from './LemonCalendar'
import { dayjs } from 'lib/dayjs'
+import { LemonCalendar, LemonCalendarProps } from './LemonCalendar'
+
type Story = StoryObj
const meta: Meta = {
title: 'Lemon UI/Lemon Calendar/Lemon Calendar',
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.test.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.test.tsx
index fb3ca56a7852f..ea52b8c681552 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.test.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.test.tsx
@@ -1,9 +1,11 @@
-import { LemonCalendar } from './LemonCalendar'
import { render, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import { getAllByDataAttr, getByDataAttr } from '~/test/byDataAttr'
import { dayjs } from 'lib/dayjs'
+import { getAllByDataAttr, getByDataAttr } from '~/test/byDataAttr'
+
+import { LemonCalendar } from './LemonCalendar'
+
describe('LemonCalendar', () => {
test('click and move between months with one month showing', async () => {
const onLeftmostMonthChanged = jest.fn()
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx
index 25fcc5c4cfecc..b9ca6dd658ab5 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx
@@ -1,11 +1,12 @@
import './LemonCalendar.scss'
-import { useEffect, useState } from 'react'
-import { dayjs } from 'lib/dayjs'
-import { range } from 'lib/utils'
-import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
-import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons'
+
import clsx from 'clsx'
import { useValues } from 'kea'
+import { dayjs } from 'lib/dayjs'
+import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons'
+import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
+import { range } from 'lib/utils'
+import { useEffect, useState } from 'react'
import { teamLogic } from 'scenes/teamLogic'
export interface LemonCalendarProps {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx
index a27e3f21ff22d..1c6bff250dd2b 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { dayjs } from 'lib/dayjs'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonCalendarSelect, LemonCalendarSelectProps } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { dayjs } from 'lib/dayjs'
import { formatDate } from 'lib/utils'
+import { useState } from 'react'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.test.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.test.tsx
index 6d2850a258ced..dd44efa6634cc 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.test.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.test.tsx
@@ -1,9 +1,10 @@
-import { useState } from 'react'
import { render, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import { getByDataAttr } from '~/test/byDataAttr'
-import { LemonCalendarSelect } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect'
import { dayjs } from 'lib/dayjs'
+import { LemonCalendarSelect } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect'
+import { useState } from 'react'
+
+import { getByDataAttr } from '~/test/byDataAttr'
describe('LemonCalendarSelect', () => {
test('select various dates', async () => {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.tsx b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.tsx
index d06f263ab8dc0..754b42c8ffc4c 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.tsx
@@ -1,8 +1,9 @@
-import { LemonCalendar } from 'lib/lemon-ui/LemonCalendar/LemonCalendar'
-import { useState } from 'react'
import { dayjs } from 'lib/dayjs'
-import { LemonButton, LemonButtonProps, LemonButtonWithSideAction, SideAction } from 'lib/lemon-ui/LemonButton'
import { IconClose } from 'lib/lemon-ui/icons'
+import { LemonButton, LemonButtonProps, LemonButtonWithSideAction, SideAction } from 'lib/lemon-ui/LemonButton'
+import { LemonCalendar } from 'lib/lemon-ui/LemonCalendar/LemonCalendar'
+import { useState } from 'react'
+
import { Popover } from '../Popover'
export interface LemonCalendarSelectProps {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.stories.tsx
index ec59718296c29..d11471a3db00c 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.stories.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { dayjs } from 'lib/dayjs'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonCalendarRange, LemonCalendarRangeProps } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { dayjs } from 'lib/dayjs'
import { formatDateRange } from 'lib/utils'
+import { useState } from 'react'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.test.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.test.tsx
index 9dff31017de88..82546dfb305f5 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.test.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.test.tsx
@@ -1,9 +1,10 @@
-import { useState } from 'react'
import { render, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import { getByDataAttr } from '~/test/byDataAttr'
-import { LemonCalendarRange } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
import { dayjs } from 'lib/dayjs'
+import { LemonCalendarRange } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
+import { useState } from 'react'
+
+import { getByDataAttr } from '~/test/byDataAttr'
describe('LemonCalendarRange', () => {
test('select various ranges', async () => {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.tsx
index 10f968ea2ba28..92492cc2bfe50 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRange.tsx
@@ -1,8 +1,9 @@
-import { useState } from 'react'
import { dayjs } from 'lib/dayjs'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconClose } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { formatDate, formatDateRange } from 'lib/utils'
+import { useState } from 'react'
+
import { LemonCalendarRangeInline } from './LemonCalendarRangeInline'
export interface LemonCalendarRangeProps {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.stories.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.stories.tsx
index 1cc8d6dec12a0..fbdbc8a174470 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.stories.tsx
@@ -1,8 +1,9 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonCalendarRangeProps } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
import { dayjs } from 'lib/dayjs'
+import { LemonCalendarRangeProps } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
import { formatDateRange } from 'lib/utils'
+import { useState } from 'react'
+
import { LemonCalendarRangeInline } from './LemonCalendarRangeInline'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx
index 898f77728dd26..3fb703a5b4081 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx
@@ -1,7 +1,8 @@
+import clsx from 'clsx'
+import { dayjs } from 'lib/dayjs'
import { LemonCalendar } from 'lib/lemon-ui/LemonCalendar/LemonCalendar'
import { useEffect, useState } from 'react'
-import { dayjs } from 'lib/dayjs'
-import clsx from 'clsx'
+
import { LemonCalendarRangeProps } from './LemonCalendarRange'
/** Used to calculate how many calendars fit on the screen */
diff --git a/frontend/src/lib/lemon-ui/LemonCard/index.ts b/frontend/src/lib/lemon-ui/LemonCard/index.ts
index b3d760635a508..1bad4093b23d8 100644
--- a/frontend/src/lib/lemon-ui/LemonCard/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonCard/index.ts
@@ -1,2 +1,2 @@
-export { LemonCard } from './LemonCard'
export type { LemonCardProps } from './LemonCard'
+export { LemonCard } from './LemonCard'
diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.stories.tsx b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.stories.tsx
index 370c0e17ed1d1..c26bc8a52f2a2 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.stories.tsx
@@ -1,4 +1,5 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
import { LemonCheckbox, LemonCheckboxProps } from './LemonCheckbox'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx
index 810d5969826f6..29fc08835695d 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx
@@ -1,6 +1,8 @@
+import './LemonCheckbox.scss'
+
import clsx from 'clsx'
import { useEffect, useMemo, useState } from 'react'
-import './LemonCheckbox.scss'
+
import { Tooltip } from '../Tooltip'
export interface LemonCheckboxProps {
diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/index.ts b/frontend/src/lib/lemon-ui/LemonCheckbox/index.ts
index 0859c338959ff..d9e9746415f55 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/index.ts
@@ -1,2 +1,2 @@
-export { LemonCheckbox } from './LemonCheckbox'
export type { LemonCheckboxProps } from './LemonCheckbox'
+export { LemonCheckbox } from './LemonCheckbox'
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx
index 253d295bf135c..4eaefe6b2a8cc 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.stories.tsx
@@ -1,4 +1,5 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
import { LemonCollapse as LemonCollapseComponent } from './LemonCollapse'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
index 07a04ab3b0751..378ad687033c9 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
@@ -1,11 +1,13 @@
+import './LemonCollapse.scss'
+
import clsx from 'clsx'
import React, { ReactNode, useState } from 'react'
import { Transition } from 'react-transition-group'
import { ENTERED, ENTERING } from 'react-transition-group/Transition'
import useResizeObserver from 'use-resize-observer'
+
import { IconUnfoldLess, IconUnfoldMore } from '../icons'
import { LemonButton } from '../LemonButton'
-import './LemonCollapse.scss'
export interface LemonCollapsePanel {
key: K
diff --git a/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.stories.tsx b/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.stories.tsx
index 3d1ac6ae829de..83b75dbacee26 100644
--- a/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.stories.tsx
@@ -1,7 +1,8 @@
+import { Link } from '@posthog/lemon-ui'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonDialog, LemonDialogProps } from './LemonDialog'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { Link } from '@posthog/lemon-ui'
+
+import { LemonDialog, LemonDialogProps } from './LemonDialog'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.tsx b/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.tsx
index 8ef22e6628dd6..f7ddd96fbc40a 100644
--- a/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.tsx
+++ b/frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.tsx
@@ -1,9 +1,9 @@
-import { ReactNode, useEffect, useRef, useState } from 'react'
+import { useValues } from 'kea'
+import { router } from 'kea-router'
import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
import { LemonModal, LemonModalProps } from 'lib/lemon-ui/LemonModal'
+import { ReactNode, useEffect, useRef, useState } from 'react'
import { createRoot } from 'react-dom/client'
-import { useValues } from 'kea'
-import { router } from 'kea-router'
export type LemonDialogProps = Pick & {
primaryButton?: LemonButtonProps | null
diff --git a/frontend/src/lib/lemon-ui/LemonDialog/index.ts b/frontend/src/lib/lemon-ui/LemonDialog/index.ts
index e091a9cc0f90f..92240b21e97f8 100644
--- a/frontend/src/lib/lemon-ui/LemonDialog/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonDialog/index.ts
@@ -1,2 +1,2 @@
-export { LemonDialog } from './LemonDialog'
export type { LemonDialogProps } from './LemonDialog'
+export { LemonDialog } from './LemonDialog'
diff --git a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.stories.tsx b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.stories.tsx
index 5680846242126..54bb7be44dbf8 100644
--- a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.stories.tsx
@@ -1,9 +1,10 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonDivider, LemonDividerProps } from './LemonDivider'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonRow } from 'lib/lemon-ui/LemonRow'
+
import { Lettermark, LettermarkColor } from '../Lettermark/Lettermark'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { ProfileBubbles } from '../ProfilePicture'
+import { LemonDivider, LemonDividerProps } from './LemonDivider'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx
index 557d4ed70156e..c6051406f9016 100644
--- a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx
+++ b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.tsx
@@ -1,6 +1,7 @@
-import clsx from 'clsx'
import './LemonDivider.scss'
+import clsx from 'clsx'
+
export interface LemonDividerProps {
/** 3x the thickness of the line. */
thick?: boolean
diff --git a/frontend/src/lib/lemon-ui/LemonDivider/index.ts b/frontend/src/lib/lemon-ui/LemonDivider/index.ts
index dc8fe94a055f7..9370254049c75 100644
--- a/frontend/src/lib/lemon-ui/LemonDivider/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonDivider/index.ts
@@ -1,2 +1,2 @@
-export { LemonDivider } from './LemonDivider'
export type { LemonDividerProps } from './LemonDivider'
+export { LemonDivider } from './LemonDivider'
diff --git a/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx b/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx
index 35588606fcdd9..c1fe28245c5c6 100644
--- a/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx
+++ b/frontend/src/lib/lemon-ui/LemonDropdown/LemonDropdown.tsx
@@ -1,4 +1,5 @@
import React, { MouseEventHandler, useContext, useEffect, useRef, useState } from 'react'
+
import { Popover, PopoverOverlayContext, PopoverProps } from '../Popover'
export interface LemonDropdownProps extends Omit {
diff --git a/frontend/src/lib/lemon-ui/LemonDropdown/index.ts b/frontend/src/lib/lemon-ui/LemonDropdown/index.ts
index c60bc106452cc..9a0e2a2dca3b5 100644
--- a/frontend/src/lib/lemon-ui/LemonDropdown/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonDropdown/index.ts
@@ -1,2 +1,2 @@
-export { LemonDropdown } from './LemonDropdown'
export type { LemonDropdownProps } from './LemonDropdown'
+export { LemonDropdown } from './LemonDropdown'
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
index 25cf4daf6e04d..f12cc67d0eb1f 100644
--- a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
+++ b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
@@ -1,9 +1,10 @@
-import { ChangeEvent, createRef, RefObject, useEffect, useState } from 'react'
+import './LemonFileInput.scss'
+
+import clsx from 'clsx'
import { IconUploadFile } from 'lib/lemon-ui/icons'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import clsx from 'clsx'
-import './LemonFileInput.scss'
+import { ChangeEvent, createRef, RefObject, useEffect, useState } from 'react'
export interface LemonFileInputProps extends Pick {
value?: File[]
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/index.ts b/frontend/src/lib/lemon-ui/LemonFileInput/index.ts
index a6b3cbff76d30..606370c2b67d4 100644
--- a/frontend/src/lib/lemon-ui/LemonFileInput/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonFileInput/index.ts
@@ -1,2 +1,2 @@
-export { LemonFileInput } from './LemonFileInput'
export type { LemonFileInputProps } from './LemonFileInput'
+export { LemonFileInput } from './LemonFileInput'
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.stories.tsx b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.stories.tsx
index 53e20b45848de..e254c18262fcb 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.stories.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-
-import { LemonInput } from './LemonInput'
import { IconArrowDropDown, IconCalendar } from 'lib/lemon-ui/icons'
import { LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
+import { useState } from 'react'
+
+import { LemonInput } from './LemonInput'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
index 650d621528ea2..5149610d9cc28 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
@@ -1,8 +1,9 @@
import './LemonInput.scss'
-import React, { useRef, useState } from 'react'
+
import clsx from 'clsx'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconClose, IconEyeHidden, IconEyeVisible, IconMagnifier } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import React, { useRef, useState } from 'react'
interface LemonInputPropsBase
extends Pick<
diff --git a/frontend/src/lib/lemon-ui/LemonInput/index.ts b/frontend/src/lib/lemon-ui/LemonInput/index.ts
index 06f396399f111..43895c91420c9 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonInput/index.ts
@@ -1,2 +1,2 @@
-export { LemonInput } from './LemonInput'
export type { LemonInputProps, LemonInputPropsNumber, LemonInputPropsText } from './LemonInput'
+export { LemonInput } from './LemonInput'
diff --git a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.stories.tsx b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.stories.tsx
index cb81dd236aeed..0a3a1ecf512da 100644
--- a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.stories.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react'
+import { LemonModal } from '@posthog/lemon-ui'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
import { LemonLabel, LemonLabelProps } from './LemonLabel'
-import { LemonModal } from '@posthog/lemon-ui'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.tsx b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.tsx
index 7568d9b838eed..8aeb58c93d545 100644
--- a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.tsx
+++ b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.tsx
@@ -1,8 +1,10 @@
import './LemonLabel.scss'
-import { Tooltip } from '../Tooltip'
-import { IconInfo } from 'lib/lemon-ui/icons'
+
import clsx from 'clsx'
+import { IconInfo } from 'lib/lemon-ui/icons'
+
import { Link, LinkProps } from '../Link'
+import { Tooltip } from '../Tooltip'
export interface LemonLabelProps
extends Pick, 'id' | 'htmlFor' | 'form' | 'children' | 'className'> {
diff --git a/frontend/src/lib/lemon-ui/LemonLabel/index.ts b/frontend/src/lib/lemon-ui/LemonLabel/index.ts
index 508b15abac24d..eb65b794dc459 100644
--- a/frontend/src/lib/lemon-ui/LemonLabel/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonLabel/index.ts
@@ -1,2 +1,2 @@
-export { LemonLabel } from './LemonLabel'
export type { LemonLabelProps } from './LemonLabel'
+export { LemonLabel } from './LemonLabel'
diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx
index 89c4b786360e6..30065bcc45fc6 100644
--- a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx
@@ -1,4 +1,5 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
import { LemonMarkdown as LemonMarkdownComponent, LemonMarkdownProps } from './LemonMarkdown'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx
index 90d8258c1cf30..118f182c52b5c 100644
--- a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.tsx
@@ -1,8 +1,10 @@
-import ReactMarkdown from 'react-markdown'
import './LemonMarkdown.scss'
-import { Link } from '../Link'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+
import clsx from 'clsx'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import ReactMarkdown from 'react-markdown'
+
+import { Link } from '../Link'
export interface LemonMarkdownProps {
children: string
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
index 05ed74c6eea29..90ed1a63e0d5a 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
@@ -1,11 +1,12 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { Splotch, SplotchColor } from '../Splotch'
import {
+ LemonMenuItems,
LemonMenuOverlay as LemonMenuOverlayComponent,
LemonMenuOverlayProps,
- LemonMenuItems,
LemonMenuSection,
} from './LemonMenu'
-import { Splotch, SplotchColor } from '../Splotch'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
index b061b90d56c35..227a2c3d6a342 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
@@ -1,13 +1,15 @@
+import { useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import React, { FunctionComponent, ReactNode, useCallback, useMemo } from 'react'
+
+import { KeyboardShortcut, KeyboardShortcutProps } from '~/layout/navigation-3000/components/KeyboardShortcut'
+
import { LemonButton, LemonButtonProps } from '../LemonButton'
-import { TooltipProps } from '../Tooltip'
import { LemonDivider } from '../LemonDivider'
import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
+import { TooltipProps } from '../Tooltip'
import { useKeyboardNavigation } from './useKeyboardNavigation'
-import { useValues } from 'kea'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { KeyboardShortcut, KeyboardShortcutProps } from '~/layout/navigation-3000/components/KeyboardShortcut'
type KeyboardShortcut = Array
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/index.ts b/frontend/src/lib/lemon-ui/LemonMenu/index.ts
index 38661b24bc2fb..c12d3404d74e6 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonMenu/index.ts
@@ -1,2 +1,2 @@
+export type { LemonMenuItem, LemonMenuItems, LemonMenuSection } from './LemonMenu'
export { LemonMenu } from './LemonMenu'
-export type { LemonMenuItem, LemonMenuSection, LemonMenuItems } from './LemonMenu'
diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.stories.tsx b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.stories.tsx
index 55ca9533948b9..50de36a8d50bd 100644
--- a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.stories.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react'
import { Meta, StoryFn } from '@storybook/react'
-import { LemonModal, LemonModalProps } from './LemonModal'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useState } from 'react'
+
+import { LemonModal, LemonModalProps } from './LemonModal'
const meta: Meta = {
title: 'Lemon UI/Lemon Modal',
diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.tsx b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.tsx
index 76dde577a77f9..b791f1b4b9826 100644
--- a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.tsx
+++ b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.tsx
@@ -1,14 +1,15 @@
-import { useEffect, useRef, useState } from 'react'
-import clsx from 'clsx'
-import Modal from 'react-modal'
+import './LemonModal.scss'
+import clsx from 'clsx'
import { IconClose } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useEffect, useRef, useState } from 'react'
+import Modal from 'react-modal'
-import './LemonModal.scss'
-import { Tooltip } from '../Tooltip'
import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+import { Tooltip } from '../Tooltip'
+
interface LemonModalInnerProps {
children?: React.ReactNode
className?: string
diff --git a/frontend/src/lib/lemon-ui/LemonModal/index.ts b/frontend/src/lib/lemon-ui/LemonModal/index.ts
index 02ed8923ad50a..3f8910e2634e7 100644
--- a/frontend/src/lib/lemon-ui/LemonModal/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonModal/index.ts
@@ -1,2 +1,2 @@
-export { LemonModal } from './LemonModal'
export type { LemonModalProps } from './LemonModal'
+export { LemonModal } from './LemonModal'
diff --git a/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.stories.tsx b/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.stories.tsx
index 7fc77ead26486..7215a14b0ea11 100644
--- a/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.stories.tsx
@@ -1,9 +1,10 @@
+import { IconGear } from '@posthog/icons'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonProgressCircle, LemonProgressCircleProps } from './LemonProgressCircle'
import { useEffect, useState } from 'react'
+
import { LemonButton } from '../LemonButton'
-import { IconGear } from '@posthog/icons'
import { LemonCheckbox } from '../LemonCheckbox'
+import { LemonProgressCircle, LemonProgressCircleProps } from './LemonProgressCircle'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.tsx b/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.tsx
index 6d8e48419aa19..87eb0959a1450 100644
--- a/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.tsx
+++ b/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.tsx
@@ -1,6 +1,7 @@
-import clsx from 'clsx'
import './LemonProgressCircle.scss'
+import clsx from 'clsx'
+
export type LemonProgressCircleProps = {
strokePercentage?: number
backgroundStrokeOpacity?: number
diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.stories.tsx b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.stories.tsx
index c67cb1759c0a8..bb58867af0373 100644
--- a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.stories.tsx
@@ -1,5 +1,6 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { IconInfo, IconPremium } from 'lib/lemon-ui/icons'
+
import { LemonRow, LemonRowProps } from './LemonRow'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.tsx b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.tsx
index b41c2397c3550..c109e2d818a63 100644
--- a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.tsx
+++ b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.tsx
@@ -1,9 +1,11 @@
-import clsx from 'clsx'
import './LemonRow.scss'
-import { Tooltip } from '../Tooltip'
-import { Spinner } from '../Spinner/Spinner'
+
+import clsx from 'clsx'
import React from 'react'
+import { Spinner } from '../Spinner/Spinner'
+import { Tooltip } from '../Tooltip'
+
// Fix for function type inference in forwardRef, so that function components wrapped with forwardRef can be generic.
// For some reason the @types/react definitons as React 16 and TS 4.9 don't work, because `P` (the props) is wrapped in
// `Pick` (inside `React.PropsWithoutRef`), which breaks TypeScript's ability to reason about it as a generic type.
diff --git a/frontend/src/lib/lemon-ui/LemonRow/index.ts b/frontend/src/lib/lemon-ui/LemonRow/index.ts
index 9e5c1b25d9e48..b2b3718d558b4 100644
--- a/frontend/src/lib/lemon-ui/LemonRow/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonRow/index.ts
@@ -1,2 +1,2 @@
-export { LemonRow } from './LemonRow'
export type { LemonRowProps, LemonRowPropsBase } from './LemonRow'
+export { LemonRow } from './LemonRow'
diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.stories.tsx b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.stories.tsx
index 34d31b37b84c7..0b0090ecbfde9 100644
--- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.stories.tsx
@@ -1,5 +1,6 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { useState } from 'react'
+
import { IconCalculate, IconCalendar, IconLightBulb, IconSettings } from '../icons'
import { LemonSegmentedButton, LemonSegmentedButtonOption, LemonSegmentedButtonProps } from './LemonSegmentedButton'
diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
index 69f4bea414371..2e8e6ef391975 100644
--- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
@@ -1,11 +1,13 @@
-import clsx from 'clsx'
-import React from 'react'
-import { LemonButton, LemonButtonProps } from '../LemonButton'
-import { useSliderPositioning } from '../hooks'
import './LemonSegmentedButton.scss'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+
+import clsx from 'clsx'
import { useValues } from 'kea'
import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import React from 'react'
+
+import { useSliderPositioning } from '../hooks'
+import { LemonButton, LemonButtonProps } from '../LemonButton'
export interface LemonSegmentedButtonOption {
value: T
diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
index f86c3b9fed7b0..6b78f42d26663 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
@@ -1,7 +1,8 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonSelect, LemonSelectOptions, LemonSelectProps } from './LemonSelect'
import { capitalizeFirstLetter } from 'lib/utils'
+import { LemonSelect, LemonSelectOptions, LemonSelectProps } from './LemonSelect'
+
type Story = StoryObj
const meta: Meta = {
title: 'Lemon UI/Lemon Select',
diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
index 51093dcb54c11..d57dc883eb34f 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
@@ -1,11 +1,12 @@
+import './LemonSelect.scss'
+
+import clsx from 'clsx'
import React, { useMemo } from 'react'
+
import { IconClose } from '../icons'
import { LemonButton, LemonButtonProps } from '../LemonButton'
-import { PopoverProps } from '../Popover'
-import './LemonSelect.scss'
-import clsx from 'clsx'
-import { TooltipProps } from '../Tooltip'
import {
+ isLemonMenuSection,
LemonMenu,
LemonMenuItem,
LemonMenuItemBase,
@@ -13,8 +14,9 @@ import {
LemonMenuItemNode,
LemonMenuProps,
LemonMenuSection,
- isLemonMenuSection,
} from '../LemonMenu/LemonMenu'
+import { PopoverProps } from '../Popover'
+import { TooltipProps } from '../Tooltip'
// Select options are basically menu items that handle onClick and active state internally
interface LemonSelectOptionBase extends Omit {
diff --git a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.stories.tsx b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.stories.tsx
index 049a85f9bfe0e..c360b9f86e796 100644
--- a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.stories.tsx
@@ -1,8 +1,9 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonSelectMultiple, LemonSelectMultipleProps } from './LemonSelectMultiple'
-import { ProfilePicture } from '../ProfilePicture'
import { capitalizeFirstLetter } from 'lib/utils'
+import { useState } from 'react'
+
+import { ProfilePicture } from '../ProfilePicture'
+import { LemonSelectMultiple, LemonSelectMultipleProps } from './LemonSelectMultiple'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx
index dc324b2af77d6..9c085799bb855 100644
--- a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.tsx
@@ -1,8 +1,9 @@
+import './LemonSelectMultiple.scss'
+
import { Select } from 'antd'
-import { range } from 'lib/utils'
-import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import './LemonSelectMultiple.scss'
+import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
+import { range } from 'lib/utils'
import { ReactNode } from 'react'
export interface LemonSelectMultipleOption {
diff --git a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx
index 67850000a6417..26cd5a09660c8 100644
--- a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.stories.tsx
@@ -1,9 +1,9 @@
import { Meta } from '@storybook/react'
-
-import { LemonSkeleton } from './LemonSkeleton'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
+import { LemonSkeleton } from './LemonSkeleton'
+
const meta: Meta = {
title: 'Lemon UI/Lemon Skeleton',
component: LemonSkeleton,
diff --git a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx
index 6524b6d573e7b..321e9c4071769 100644
--- a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.tsx
@@ -1,7 +1,8 @@
+import './LemonSkeleton.scss'
+
import clsx from 'clsx'
-import { range } from 'lib/utils'
import { LemonButtonProps } from 'lib/lemon-ui/LemonButton'
-import './LemonSkeleton.scss'
+import { range } from 'lib/utils'
export interface LemonSkeletonProps {
className?: string
diff --git a/frontend/src/lib/lemon-ui/LemonSkeleton/index.ts b/frontend/src/lib/lemon-ui/LemonSkeleton/index.ts
index c29e265fe801a..206f9202dc085 100644
--- a/frontend/src/lib/lemon-ui/LemonSkeleton/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonSkeleton/index.ts
@@ -1,2 +1,2 @@
-export { LemonSkeleton } from './LemonSkeleton'
export type { LemonSkeletonProps } from './LemonSkeleton'
+export { LemonSkeleton } from './LemonSkeleton'
diff --git a/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.stories.tsx b/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.stories.tsx
index 67bd0ed1a1787..e7e2c9528687d 100644
--- a/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.stories.tsx
@@ -1,6 +1,7 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonSnack, LemonSnackProps } from './LemonSnack'
+
import { ProfilePicture } from '../ProfilePicture'
+import { LemonSnack, LemonSnackProps } from './LemonSnack'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonSnack/index.ts b/frontend/src/lib/lemon-ui/LemonSnack/index.ts
index 7e0c7cf81f3c3..b228c4eb995d1 100644
--- a/frontend/src/lib/lemon-ui/LemonSnack/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonSnack/index.ts
@@ -1,2 +1,2 @@
-export { LemonSnack } from './LemonSnack'
export type { LemonSnackProps } from './LemonSnack'
+export { LemonSnack } from './LemonSnack'
diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.stories.tsx b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.stories.tsx
index 8775d1f549972..29c7a81df6181 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.stories.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { IconGlobeLock } from 'lib/lemon-ui/icons'
+import { useState } from 'react'
import { LemonSwitch as RawLemonSwitch, LemonSwitchProps } from './LemonSwitch'
-import { IconGlobeLock } from 'lib/lemon-ui/icons'
const LemonSwitch = ({ checked, ...props }: Partial): JSX.Element => {
const [isChecked, setIsChecked] = useState(checked || false)
diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx
index 8a83e046da54a..b47ce51773ae1 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx
@@ -1,7 +1,8 @@
-import clsx from 'clsx'
-import { useMemo, useState } from 'react'
import './LemonSwitch.scss'
+
+import clsx from 'clsx'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { useMemo, useState } from 'react'
export interface LemonSwitchProps {
className?: string
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
index 6e37c6cd5eecc..4bffbac72b20e 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -173,14 +173,14 @@
padding-bottom: 0.5rem;
.posthog-3000 & {
- padding-top: 0.3rem;
- padding-bottom: 0.3rem;
+ padding-top: 0.3125rem;
+ padding-bottom: 0.3125rem;
}
.LemonButton {
.posthog-3000 & {
- margin-top: -0.2rem;
- margin-bottom: -0.2rem;
+ margin-top: -0.25rem;
+ margin-bottom: -0.25rem;
}
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx
index 95a7903db1374..751114946a32f 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.stories.tsx
@@ -1,8 +1,9 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonTable, LemonTableProps } from './LemonTable'
-import { LemonButton } from '../LemonButton'
import { useEffect } from 'react'
+import { LemonButton } from '../LemonButton'
+import { LemonTable, LemonTableProps } from './LemonTable'
+
type Story = StoryObj
const meta: Meta = {
title: 'Lemon UI/Lemon Table',
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
index b3c5deae98491..d39b9ba9e3896 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
@@ -1,18 +1,20 @@
+import './LemonTable.scss'
+
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { router } from 'kea-router'
+import { useScrollable } from 'lib/hooks/useScrollable'
+import { IconInfo } from 'lib/lemon-ui/icons'
+import { More } from 'lib/lemon-ui/LemonButton/More'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import React, { HTMLProps, useCallback, useEffect, useMemo, useState } from 'react'
+
+import { PaginationAuto, PaginationControl, PaginationManual, usePagination } from '../PaginationControl'
import { Tooltip } from '../Tooltip'
+import { LemonTableLoader } from './LemonTableLoader'
+import { getNextSorting, Sorting, SortingIndicator } from './sorting'
import { TableRow } from './TableRow'
-import './LemonTable.scss'
-import { Sorting, SortingIndicator, getNextSorting } from './sorting'
import { ExpandableConfig, LemonTableColumn, LemonTableColumnGroup, LemonTableColumns } from './types'
-import { PaginationAuto, PaginationControl, PaginationManual, usePagination } from '../PaginationControl'
-import { useScrollable } from 'lib/hooks/useScrollable'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { LemonTableLoader } from './LemonTableLoader'
-import { More } from 'lib/lemon-ui/LemonButton/More'
-import { IconInfo } from 'lib/lemon-ui/icons'
/**
* Determine the column's key, using `dataIndex` as fallback.
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
index 4e30b5ddec332..2f0d22e9fd1e8 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
@@ -22,7 +22,6 @@
background: var(--primary);
.posthog-3000 & {
- animation: loading-bar 1.5s linear infinite;
background: var(--primary-3000);
}
}
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.tsx
index 2b50878fb1e07..3b79a8651a47a 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.tsx
@@ -1,6 +1,7 @@
-import { CSSTransition } from 'react-transition-group'
import './LemonTableLoader.scss'
+
import React from 'react'
+import { CSSTransition } from 'react-transition-group'
export function LemonTableLoader({
loading = false,
diff --git a/frontend/src/lib/lemon-ui/LemonTable/TableCellSparkline.tsx b/frontend/src/lib/lemon-ui/LemonTable/TableCellSparkline.tsx
index 226809d3c8b43..8a77bc49345f5 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/TableCellSparkline.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/TableCellSparkline.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
-import { Chart, ChartItem, TooltipModel } from 'lib/Chart'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { offset } from '@floating-ui/react'
-
import './TableCellSparkline.scss'
+
+import { offset } from '@floating-ui/react'
+import { Chart, ChartItem, TooltipModel } from 'lib/Chart'
import { getColorVar } from 'lib/colors'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
+import { useEffect, useRef, useState } from 'react'
export function TableCellSparkline({ labels, data }: { labels?: string[]; data: number[] }): JSX.Element {
const canvasRef = useRef(null)
diff --git a/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx b/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
index 615c7c6afbb44..281a73ff3519a 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
@@ -1,8 +1,9 @@
-import React, { HTMLProps, useState } from 'react'
+import clsx from 'clsx'
import { IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import React, { HTMLProps, useState } from 'react'
+
import { ExpandableConfig, LemonTableColumnGroup, TableCellRepresentation } from './types'
-import clsx from 'clsx'
export interface TableRowProps> {
record: T
diff --git a/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx b/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
index 608c0b0b70657..d91e1ff31b3d7 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
@@ -1,8 +1,10 @@
import { TZLabel } from 'lib/components/TZLabel'
+import { Dayjs, dayjs } from 'lib/dayjs'
+
+import { UserBasicType } from '~/types'
+
import { ProfilePicture } from '../ProfilePicture'
import { LemonTableColumn } from './types'
-import { UserBasicType } from '~/types'
-import { Dayjs, dayjs } from 'lib/dayjs'
export function createdAtColumn(): LemonTableColumn {
return {
diff --git a/frontend/src/lib/lemon-ui/LemonTable/index.ts b/frontend/src/lib/lemon-ui/LemonTable/index.ts
index ce12c3ad40fd3..f375acd2dffa5 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonTable/index.ts
@@ -1,4 +1,4 @@
-export { LemonTable } from './LemonTable'
export type { LemonTableProps } from './LemonTable'
+export { LemonTable } from './LemonTable'
export type { Sorting } from './sorting'
export type { ExpandableConfig, LemonTableColumn, LemonTableColumnGroup, LemonTableColumns } from './types'
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx
index 9d1e6532cecfc..9618ab6215934 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx
@@ -1,5 +1,6 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
import { useState } from 'react'
+
import { LemonTab, LemonTabs as LemonTabsComponent } from './LemonTabs'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
index 873c47327ddbb..d94f9732623cd 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx
@@ -1,10 +1,12 @@
+import './LemonTabs.scss'
+
import clsx from 'clsx'
import { AlignType } from 'rc-trigger/lib/interface'
+
import { useSliderPositioning } from '../hooks'
import { IconInfo } from '../icons'
-import { Tooltip } from '../Tooltip'
-import './LemonTabs.scss'
import { Link } from '../Link'
+import { Tooltip } from '../Tooltip'
/** A tab that represents one of the options, but doesn't have any content. Render tab-dependent UI yourself. */
export interface AbstractLemonTab {
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx
index 1c5403b05f0c8..bf68c9db7d5a0 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx
@@ -1,4 +1,5 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
import { LemonTag as LemonTagComponent, LemonTagType } from './LemonTag'
type Story = StoryObj
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx
index 3d7c36494ab4a..564509e905c65 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx
@@ -1,8 +1,9 @@
+import './LemonTag.scss'
+
import clsx from 'clsx'
import { IconClose, IconEllipsis } from 'lib/lemon-ui/icons'
import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
import { LemonButtonDropdown } from 'lib/lemon-ui/LemonButton/LemonButton'
-import './LemonTag.scss'
export type LemonTagType =
| 'primary'
diff --git a/frontend/src/lib/lemon-ui/LemonTag/index.ts b/frontend/src/lib/lemon-ui/LemonTag/index.ts
index 217aec8ebd633..540d69cfadf7b 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonTag/index.ts
@@ -1,2 +1,2 @@
-export { LemonTag } from './LemonTag'
export type { LemonTagProps, LemonTagType } from './LemonTag'
+export { LemonTag } from './LemonTag'
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx
index ea0f7ee62571a..c0e55962e477c 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.stories.tsx
@@ -1,7 +1,7 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { useState } from 'react'
-import { LemonTextArea, LemonTextAreaProps, LemonTextAreaMarkdown as _LemonTextMarkdown } from './LemonTextArea'
+import { LemonTextArea, LemonTextAreaMarkdown as _LemonTextMarkdown, LemonTextAreaProps } from './LemonTextArea'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
index 77c94c64aad0f..dbc2181d76b05 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
@@ -1,18 +1,20 @@
import './LemonTextArea.scss'
-import React, { createRef, useRef, useState } from 'react'
+
import clsx from 'clsx'
-import TextareaAutosize from 'react-textarea-autosize'
-import { IconMarkdown, IconTools } from 'lib/lemon-ui/icons'
+import { useValues } from 'kea'
import { TextContent } from 'lib/components/Cards/TextCard/TextCard'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import posthog from 'posthog-js'
+import { useUploadFiles } from 'lib/hooks/useUploadFiles'
+import { IconMarkdown, IconTools } from 'lib/lemon-ui/icons'
import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput'
-import { useValues } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { Link } from 'lib/lemon-ui/Link'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import posthog from 'posthog-js'
+import React, { createRef, useRef, useState } from 'react'
+import TextareaAutosize from 'react-textarea-autosize'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
import { LemonTabs } from '../LemonTabs'
-import { useUploadFiles } from 'lib/hooks/useUploadFiles'
export interface LemonTextAreaProps
extends Pick<
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/index.ts b/frontend/src/lib/lemon-ui/LemonTextArea/index.ts
index 9276620a4db25..138d5df39dcf0 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/index.ts
@@ -1,2 +1,2 @@
-export { LemonTextArea, LemonTextAreaMarkdown } from './LemonTextArea'
export type { LemonTextAreaProps } from './LemonTextArea'
+export { LemonTextArea, LemonTextAreaMarkdown } from './LemonTextArea'
diff --git a/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.tsx b/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.tsx
index 232a68b23fd12..9747b5c249a11 100644
--- a/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.tsx
+++ b/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.tsx
@@ -1,8 +1,10 @@
-import { LemonButton } from '../LemonButton'
-import { IconClose } from '../icons'
import './LemonWidget.scss'
+
import clsx from 'clsx'
+import { IconClose } from '../icons'
+import { LemonButton } from '../LemonButton'
+
export interface LemonWidgetProps {
title: string
onClose?: () => void
diff --git a/frontend/src/lib/lemon-ui/LemonWidget/index.ts b/frontend/src/lib/lemon-ui/LemonWidget/index.ts
index 3577ddd8cb037..eee1745c27a29 100644
--- a/frontend/src/lib/lemon-ui/LemonWidget/index.ts
+++ b/frontend/src/lib/lemon-ui/LemonWidget/index.ts
@@ -1,2 +1,2 @@
-export { LemonWidget } from './LemonWidget'
export type { LemonWidgetProps } from './LemonWidget'
+export { LemonWidget } from './LemonWidget'
diff --git a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.stories.tsx b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.stories.tsx
index 2a1eb5aa8a757..292fc93b2c71b 100644
--- a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.stories.tsx
+++ b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.stories.tsx
@@ -1,7 +1,8 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { Lettermark, LettermarkColor, LettermarkProps } from './Lettermark'
import { range } from 'lib/utils'
+import { Lettermark, LettermarkColor, LettermarkProps } from './Lettermark'
+
type Story = StoryObj
const meta: Meta = {
title: 'Lemon UI/Lettermark',
diff --git a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.tsx b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.tsx
index a60be3adaa15f..e0d88847ec6f6 100644
--- a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.tsx
+++ b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.tsx
@@ -1,6 +1,7 @@
-import clsx from 'clsx'
import './Lettermark.scss'
+import clsx from 'clsx'
+
// This is the number of known --lettermark-* variables in `globals.scss`
const NUM_LETTERMARK_STYLES = 8
diff --git a/frontend/src/lib/lemon-ui/Lettermark/index.ts b/frontend/src/lib/lemon-ui/Lettermark/index.ts
index 3f8c05eaa269e..ef89108074f7e 100644
--- a/frontend/src/lib/lemon-ui/Lettermark/index.ts
+++ b/frontend/src/lib/lemon-ui/Lettermark/index.ts
@@ -1,2 +1,2 @@
-export { Lettermark, LettermarkColor } from './Lettermark'
export type { LettermarkProps } from './Lettermark'
+export { Lettermark, LettermarkColor } from './Lettermark'
diff --git a/frontend/src/lib/lemon-ui/Link/Link.stories.tsx b/frontend/src/lib/lemon-ui/Link/Link.stories.tsx
index 38142d11ac702..638030e19d0e7 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.stories.tsx
+++ b/frontend/src/lib/lemon-ui/Link/Link.stories.tsx
@@ -1,7 +1,8 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { Link, LinkProps } from './Link'
import { urls } from 'scenes/urls'
+import { Link, LinkProps } from './Link'
+
type Story = StoryObj
const meta: Meta = {
title: 'Lemon UI/Link',
diff --git a/frontend/src/lib/lemon-ui/Link/Link.tsx b/frontend/src/lib/lemon-ui/Link/Link.tsx
index 5365eb5213073..4677818b2b529 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.tsx
+++ b/frontend/src/lib/lemon-ui/Link/Link.tsx
@@ -1,16 +1,18 @@
-import React from 'react'
-import { router } from 'kea-router'
-import { isExternalLink } from 'lib/utils'
-import clsx from 'clsx'
import './Link.scss'
-import { IconOpenInNew } from '../icons'
-import { Tooltip } from '../Tooltip'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
-import { useActions } from 'kea'
+import clsx from 'clsx'
+import { useActions } from 'kea'
+import { router } from 'kea-router'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
+import { isExternalLink } from 'lib/utils'
+import React from 'react'
import { useNotebookDrag } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
+
import { sidePanelDocsLogic } from '~/layout/navigation-3000/sidepanel/panels/sidePanelDocsLogic'
+import { IconOpenInNew } from '../icons'
+import { Tooltip } from '../Tooltip'
+
type RoutePart = string | Record
export type LinkProps = Pick, 'target' | 'className' | 'children' | 'title'> & {
diff --git a/frontend/src/lib/lemon-ui/Link/index.ts b/frontend/src/lib/lemon-ui/Link/index.ts
index ca0be19dee84a..0442a73e1dbca 100644
--- a/frontend/src/lib/lemon-ui/Link/index.ts
+++ b/frontend/src/lib/lemon-ui/Link/index.ts
@@ -1,2 +1,2 @@
-export { Link } from './Link'
export type { LinkProps } from './Link'
+export { Link } from './Link'
diff --git a/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.stories.tsx b/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.stories.tsx
index b2522a0b08c7a..8953d363d7daf 100644
--- a/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.stories.tsx
+++ b/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.stories.tsx
@@ -1,4 +1,5 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
import { PaginationControl, PaginationControlProps } from './PaginationControl'
import { usePagination } from './usePagination'
diff --git a/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.tsx b/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.tsx
index b26cfdb485f5c..578c0c5f648b7 100644
--- a/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.tsx
+++ b/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.tsx
@@ -1,8 +1,10 @@
+import './PaginationControl.scss'
+
+import clsx from 'clsx'
import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './PaginationControl.scss'
+
import { PaginationState } from './types'
-import clsx from 'clsx'
export interface PaginationControlProps extends PaginationState {
nouns?: [string, string]
diff --git a/frontend/src/lib/lemon-ui/PaginationControl/index.ts b/frontend/src/lib/lemon-ui/PaginationControl/index.ts
index 4328e3614fc19..7ec775564dc7e 100644
--- a/frontend/src/lib/lemon-ui/PaginationControl/index.ts
+++ b/frontend/src/lib/lemon-ui/PaginationControl/index.ts
@@ -1,4 +1,4 @@
-export { PaginationControl } from './PaginationControl'
-export { usePagination } from './usePagination'
export type { PaginationControlProps } from './PaginationControl'
+export { PaginationControl } from './PaginationControl'
export type { PaginationAuto, PaginationManual, PaginationState } from './types'
+export { usePagination } from './usePagination'
diff --git a/frontend/src/lib/lemon-ui/PaginationControl/usePagination.ts b/frontend/src/lib/lemon-ui/PaginationControl/usePagination.ts
index 24beda803877b..8b8e74350ecd4 100644
--- a/frontend/src/lib/lemon-ui/PaginationControl/usePagination.ts
+++ b/frontend/src/lib/lemon-ui/PaginationControl/usePagination.ts
@@ -1,6 +1,7 @@
import { useActions, useValues } from 'kea'
import { router } from 'kea-router'
import { useCallback, useMemo } from 'react'
+
import { PaginationAuto, PaginationManual, PaginationState } from './types'
export function usePagination(
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.stories.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.stories.tsx
index 477f44fd52d9f..dba48ee486eb8 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.stories.tsx
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.stories.tsx
@@ -1,18 +1,13 @@
-import { StoryFn, Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { IconArrowDropDown } from 'lib/lemon-ui/icons'
import { Popover } from './Popover'
-import { IconArrowDropDown } from 'lib/lemon-ui/icons'
type Story = StoryObj
const meta: Meta = {
title: 'Lemon UI/Popover',
component: Popover,
- parameters: {
- testOptions: {
- skip: true, // FIXME: This story needs a play test for the popup to show up in snapshots
- },
- },
- tags: ['autodocs'],
+ tags: ['autodocs', 'test-skip'], // FIXME: This story needs a play test for the popup to show up in snapshots
}
export default meta
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
index 2081fac8edb85..f77c7c6e49a42 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.tsx
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.tsx
@@ -1,22 +1,23 @@
import './Popover.scss'
-import React, { MouseEventHandler, ReactElement, useContext, useEffect, useLayoutEffect, useRef } from 'react'
-import { CLICK_OUTSIDE_BLOCK_CLASS, useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
-import clsx from 'clsx'
+
import {
- useFloating,
+ arrow,
autoUpdate,
+ flip,
+ FloatingPortal,
Middleware,
Placement,
shift,
- flip,
size,
- arrow,
- FloatingPortal,
+ useFloating,
UseFloatingReturn,
useMergeRefs,
} from '@floating-ui/react'
-import { CSSTransition } from 'react-transition-group'
+import clsx from 'clsx'
import { useEventListener } from 'lib/hooks/useEventListener'
+import { CLICK_OUTSIDE_BLOCK_CLASS, useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
+import React, { MouseEventHandler, ReactElement, useContext, useEffect, useLayoutEffect, useRef } from 'react'
+import { CSSTransition } from 'react-transition-group'
export interface PopoverProps {
ref?: React.MutableRefObject | React.Ref | null
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.stories.tsx b/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.stories.tsx
index 821b2abfc42e5..96c6d6fa7f1f4 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.stories.tsx
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.stories.tsx
@@ -1,7 +1,8 @@
-import { ProfileBubbles as ProfileBubblesComponent, ProfileBubblesProps } from './ProfileBubbles'
import { Meta } from '@storybook/react'
import { alphabet, range } from 'lib/utils'
+import { ProfileBubbles as ProfileBubblesComponent, ProfileBubblesProps } from './ProfileBubbles'
+
const DUMMIES: ProfileBubblesProps['people'] = [
{ email: 'michael@posthog.com', name: 'Michael' },
{ email: 'lottie@posthog.com', name: 'Lottie' },
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx b/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx
index f9cbd5ff25255..23cd6b167efeb 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx
@@ -1,6 +1,7 @@
import clsx from 'clsx'
-import { ProfilePicture } from '.'
+
import { Tooltip } from '../Tooltip'
+import { ProfilePicture } from '.'
export interface ProfileBubblesProps extends React.HTMLProps {
people: { email: string; name?: string; title?: string }[]
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
index 80f308b960191..07fb82adffecd 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
@@ -1,12 +1,14 @@
+import './ProfilePicture.scss'
+
import clsx from 'clsx'
import { useValues } from 'kea'
+import { inStorybookTestRunner } from 'lib/utils'
import md5 from 'md5'
import { useEffect, useState } from 'react'
import { userLogic } from 'scenes/userLogic'
+
import { IconRobot } from '../icons'
import { Lettermark, LettermarkColor } from '../Lettermark/Lettermark'
-import './ProfilePicture.scss'
-import { inStorybookTestRunner } from 'lib/utils'
export interface ProfilePictureProps {
name?: string
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/index.ts b/frontend/src/lib/lemon-ui/ProfilePicture/index.ts
index 00937f134c370..2cd1f985d3e99 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/index.ts
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/index.ts
@@ -1,4 +1,4 @@
-export { ProfilePicture } from './ProfilePicture'
-export type { ProfilePictureProps } from './ProfilePicture'
-export { ProfileBubbles } from './ProfileBubbles'
export type { ProfileBubblesProps } from './ProfileBubbles'
+export { ProfileBubbles } from './ProfileBubbles'
+export type { ProfilePictureProps } from './ProfilePicture'
+export { ProfilePicture } from './ProfilePicture'
diff --git a/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx b/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx
index 1ebec0c0a5213..e1625461109a8 100644
--- a/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx
+++ b/frontend/src/lib/lemon-ui/Spinner/Spinner.stories.tsx
@@ -1,7 +1,7 @@
+import { LemonButton } from '@posthog/lemon-ui'
import { Meta } from '@storybook/react'
import { Spinner as Spinner, SpinnerOverlay } from './Spinner'
-import { LemonButton } from '@posthog/lemon-ui'
const meta: Meta = {
title: 'Lemon UI/Spinner',
diff --git a/frontend/src/lib/lemon-ui/Spinner/Spinner.tsx b/frontend/src/lib/lemon-ui/Spinner/Spinner.tsx
index 3c613721602bb..5939bc14ec114 100644
--- a/frontend/src/lib/lemon-ui/Spinner/Spinner.tsx
+++ b/frontend/src/lib/lemon-ui/Spinner/Spinner.tsx
@@ -1,6 +1,7 @@
-import clsx from 'clsx'
import './Spinner.scss'
+import clsx from 'clsx'
+
export interface SpinnerProps {
textColored?: boolean
className?: string
diff --git a/frontend/src/lib/lemon-ui/Splotch/Splotch.stories.tsx b/frontend/src/lib/lemon-ui/Splotch/Splotch.stories.tsx
index 821f6d29141a0..a61e437ed1ae3 100644
--- a/frontend/src/lib/lemon-ui/Splotch/Splotch.stories.tsx
+++ b/frontend/src/lib/lemon-ui/Splotch/Splotch.stories.tsx
@@ -1,4 +1,5 @@
import { Meta, StoryFn } from '@storybook/react'
+
import { Splotch, SplotchColor, SplotchProps } from './Splotch'
const meta: Meta = {
diff --git a/frontend/src/lib/lemon-ui/Splotch/Splotch.tsx b/frontend/src/lib/lemon-ui/Splotch/Splotch.tsx
index e8a91a09f7b21..e3f9a2bbac587 100644
--- a/frontend/src/lib/lemon-ui/Splotch/Splotch.tsx
+++ b/frontend/src/lib/lemon-ui/Splotch/Splotch.tsx
@@ -1,6 +1,7 @@
-import clsx from 'clsx'
import './Splotch.scss'
+import clsx from 'clsx'
+
export enum SplotchColor {
Purple = 'purple',
Blue = 'blue',
diff --git a/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx b/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
index 04ebbd7e00412..87b6182f61d81 100644
--- a/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
+++ b/frontend/src/lib/lemon-ui/Tooltip/Tooltip.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
-// eslint-disable-next-line no-restricted-imports
import { Tooltip as AntdTooltip } from 'antd'
import { TooltipProps as AntdTooltipProps } from 'antd/lib/tooltip'
+import React, { useState } from 'react'
import { useDebounce } from 'use-debounce'
const DEFAULT_DELAY_MS = 500
diff --git a/frontend/src/lib/lemon-ui/Tooltip/index.ts b/frontend/src/lib/lemon-ui/Tooltip/index.ts
index eaca424fb1663..31867601a614d 100644
--- a/frontend/src/lib/lemon-ui/Tooltip/index.ts
+++ b/frontend/src/lib/lemon-ui/Tooltip/index.ts
@@ -1,2 +1,2 @@
-export { Tooltip } from './Tooltip'
export type { TooltipProps } from './Tooltip'
+export { Tooltip } from './Tooltip'
diff --git a/frontend/src/lib/lemon-ui/colors.stories.tsx b/frontend/src/lib/lemon-ui/colors.stories.tsx
index d8d9573ac68b0..304661610cb2e 100644
--- a/frontend/src/lib/lemon-ui/colors.stories.tsx
+++ b/frontend/src/lib/lemon-ui/colors.stories.tsx
@@ -1,7 +1,8 @@
import { Meta } from '@storybook/react'
-import { Popover } from './Popover/Popover'
import { useState } from 'react'
+
import { LemonTable } from './LemonTable'
+import { Popover } from './Popover/Popover'
const meta: Meta = {
title: 'Lemon UI/Colors',
diff --git a/frontend/src/lib/lemon-ui/icons/icons.stories.tsx b/frontend/src/lib/lemon-ui/icons/icons.stories.tsx
index cb09face4657f..2c7c61429d41f 100644
--- a/frontend/src/lib/lemon-ui/icons/icons.stories.tsx
+++ b/frontend/src/lib/lemon-ui/icons/icons.stories.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
-import * as icons from './icons'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { LemonTable } from 'lib/lemon-ui/LemonTable'
-import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
+import { LemonTable } from 'lib/lemon-ui/LemonTable'
+import * as React from 'react'
+
+import * as icons from './icons'
const { IconGauge, IconWithCount } = icons
@@ -104,7 +105,7 @@ const LibraryTemplate: StoryFn<{ letter?: string | null }> = ({ letter }) => {
// This is for actual Storybook users
export const Library: LibraryType = LibraryTemplate.bind({})
-Library.parameters = { testOptions: { skip: true } }
+Library.tags = ['autodocs', 'test-skip']
// These are just for snapshots. As opposed to the full library, the stories below are segmented by the first letter
// of the icon name, which greatly optimizes both the UX and storage aspects of diffing snapshots.
diff --git a/frontend/src/lib/lemon-ui/icons/icons.tsx b/frontend/src/lib/lemon-ui/icons/icons.tsx
index 429bd17c3c6eb..aa04067a78ba7 100644
--- a/frontend/src/lib/lemon-ui/icons/icons.tsx
+++ b/frontend/src/lib/lemon-ui/icons/icons.tsx
@@ -1,8 +1,9 @@
// Loads custom icons (some icons may come from a third-party library)
-import clsx from 'clsx'
-import { CSSProperties, PropsWithChildren, SVGAttributes } from 'react'
import './icons.scss'
+
+import clsx from 'clsx'
import { LemonBadge, LemonBadgeProps } from 'lib/lemon-ui/LemonBadge'
+import { CSSProperties, PropsWithChildren, SVGAttributes } from 'react'
interface IconWithCountProps {
count: number
diff --git a/frontend/src/lib/lemon-ui/lemonToast.tsx b/frontend/src/lib/lemon-ui/lemonToast.tsx
index 5332a95b0599a..5af288acc6c96 100644
--- a/frontend/src/lib/lemon-ui/lemonToast.tsx
+++ b/frontend/src/lib/lemon-ui/lemonToast.tsx
@@ -1,8 +1,9 @@
-import { toast, ToastContentProps as ToastifyRenderProps, ToastOptions } from 'react-toastify'
import { IconCheckmark, IconClose, IconErrorOutline, IconInfo, IconWarning } from 'lib/lemon-ui/icons'
-import { LemonButton } from './LemonButton'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import posthog from 'posthog-js'
+import { toast, ToastContentProps as ToastifyRenderProps, ToastOptions } from 'react-toastify'
+
+import { LemonButton } from './LemonButton'
export function ToastCloseButton({ closeToast }: { closeToast?: () => void }): JSX.Element {
return (
diff --git a/frontend/src/lib/logic/featureFlagLogic.ts b/frontend/src/lib/logic/featureFlagLogic.ts
index 061bca49a70ea..592ea0f6646d7 100644
--- a/frontend/src/lib/logic/featureFlagLogic.ts
+++ b/frontend/src/lib/logic/featureFlagLogic.ts
@@ -1,9 +1,11 @@
-import { kea, path, actions, reducers, afterMount } from 'kea'
-import type { featureFlagLogicType } from './featureFlagLogicType'
-import posthog from 'posthog-js'
+import { actions, afterMount, kea, path, reducers } from 'kea'
import { getAppContext } from 'lib/utils/getAppContext'
+import posthog from 'posthog-js'
+
import { AppContext } from '~/types'
+import type { featureFlagLogicType } from './featureFlagLogicType'
+
export type FeatureFlagsSet = {
[flag: string]: boolean | string
}
diff --git a/frontend/src/lib/logic/inAppPrompt/inAppPromptEventCaptureLogic.ts b/frontend/src/lib/logic/inAppPrompt/inAppPromptEventCaptureLogic.ts
index 4eaf9dbabb158..b8ede572b2214 100644
--- a/frontend/src/lib/logic/inAppPrompt/inAppPromptEventCaptureLogic.ts
+++ b/frontend/src/lib/logic/inAppPrompt/inAppPromptEventCaptureLogic.ts
@@ -1,6 +1,7 @@
-import { kea, path, actions, listeners } from 'kea'
-import type { inAppPromptEventCaptureLogicType } from './inAppPromptEventCaptureLogicType'
+import { actions, kea, listeners, path } from 'kea'
import posthog from 'posthog-js'
+
+import type { inAppPromptEventCaptureLogicType } from './inAppPromptEventCaptureLogicType'
import { PromptType } from './inAppPromptLogic'
const inAppPromptEventCaptureLogic = kea([
diff --git a/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts b/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts
index 16d849e169079..e1a029a9d2db0 100644
--- a/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts
+++ b/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.test.ts
@@ -1,12 +1,14 @@
+import { router } from 'kea-router'
import { expectLogic } from 'kea-test-utils'
-import { initKeaTests } from '~/test/init'
-import { inAppPromptLogic, PromptConfig, PromptUserState } from './inAppPromptLogic'
+import api from 'lib/api'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { router } from 'kea-router'
import { urls } from 'scenes/urls'
+
import { useMocks } from '~/mocks/jest'
-import api from 'lib/api'
+import { initKeaTests } from '~/test/init'
+
import { inAppPromptEventCaptureLogic } from './inAppPromptEventCaptureLogic'
+import { inAppPromptLogic, PromptConfig, PromptUserState } from './inAppPromptLogic'
const configProductTours: PromptConfig & { state: PromptUserState } = {
sequences: [
diff --git a/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.tsx b/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.tsx
index 3f725a72d4025..4c5cd22f04084 100644
--- a/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.tsx
+++ b/frontend/src/lib/logic/inAppPrompt/inAppPromptLogic.tsx
@@ -1,20 +1,12 @@
-import { createRoot } from 'react-dom/client'
import { Placement } from '@floating-ui/react'
-import { kea, path, actions, reducers, listeners, selectors, connect, afterMount, beforeUnmount } from 'kea'
-import type { inAppPromptLogicType } from './inAppPromptLogicType'
+import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { router, urlToAction } from 'kea-router'
-import {
- LemonActionableTooltip,
- LemonActionableTooltipProps,
-} from 'lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip'
-import { inAppPromptEventCaptureLogic } from './inAppPromptEventCaptureLogic'
import api from 'lib/api'
import { now } from 'lib/dayjs'
-import wcmatch from 'wildcard-match'
import {
- IconUnverifiedEvent,
IconApps,
IconBarChart,
+ IconCoffee,
IconCohort,
IconComment,
IconExperiment,
@@ -25,10 +17,19 @@ import {
IconPerson,
IconRecording,
IconTools,
- IconCoffee,
IconTrendUp,
+ IconUnverifiedEvent,
} from 'lib/lemon-ui/icons'
+import {
+ LemonActionableTooltip,
+ LemonActionableTooltipProps,
+} from 'lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip'
import { Lettermark } from 'lib/lemon-ui/Lettermark'
+import { createRoot } from 'react-dom/client'
+import wcmatch from 'wildcard-match'
+
+import { inAppPromptEventCaptureLogic } from './inAppPromptEventCaptureLogic'
+import type { inAppPromptLogicType } from './inAppPromptLogicType'
/** To be extended with other types of notifications e.g. modals, bars */
export type PromptType = 'tooltip'
diff --git a/frontend/src/lib/logic/newPrompt/Prompt.tsx b/frontend/src/lib/logic/newPrompt/Prompt.tsx
index 37c2a473a6777..8392dfc95aa35 100644
--- a/frontend/src/lib/logic/newPrompt/Prompt.tsx
+++ b/frontend/src/lib/logic/newPrompt/Prompt.tsx
@@ -1,11 +1,14 @@
-import { useActions, useValues } from 'kea'
import './prompt.scss'
-import { promptLogic } from './promptLogic'
-import clsx from 'clsx'
+
import { LemonButton, LemonModal } from '@posthog/lemon-ui'
-import { PromptButtonType, PromptFlag, PromptPayload } from '~/types'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
import { FallbackCoverImage } from 'lib/components/FallbackCoverImage/FallbackCoverImage'
+import { PromptButtonType, PromptFlag, PromptPayload } from '~/types'
+
+import { promptLogic } from './promptLogic'
+
export function ModalPrompt({
payload,
closePrompt,
diff --git a/frontend/src/lib/logic/newPrompt/prompt.stories.tsx b/frontend/src/lib/logic/newPrompt/prompt.stories.tsx
index 59f9416017cf9..58eb6c9647db9 100644
--- a/frontend/src/lib/logic/newPrompt/prompt.stories.tsx
+++ b/frontend/src/lib/logic/newPrompt/prompt.stories.tsx
@@ -1,9 +1,11 @@
import { Meta } from '@storybook/react'
import { useActions } from 'kea'
+import BlankDashboardHog from 'public/blank-dashboard-hog.png'
+
import { PromptFlag, PromptPayload } from '~/types'
+
import { ModalPrompt, PopupPrompt, Prompt } from './Prompt'
import { promptLogic } from './promptLogic'
-import BlankDashboardHog from 'public/blank-dashboard-hog.png'
const meta: Meta = {
title: 'Components/Prompts',
diff --git a/frontend/src/lib/logic/newPrompt/promptLogic.tsx b/frontend/src/lib/logic/newPrompt/promptLogic.tsx
index ec397f791f321..064fcff1c78cd 100644
--- a/frontend/src/lib/logic/newPrompt/promptLogic.tsx
+++ b/frontend/src/lib/logic/newPrompt/promptLogic.tsx
@@ -1,10 +1,10 @@
import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
-
-import posthog from 'posthog-js'
-import { featureFlagLogic } from '../featureFlagLogic'
import { router } from 'kea-router'
+import posthog from 'posthog-js'
+
import { PromptButtonType, PromptFlag, PromptPayload } from '~/types'
+import { featureFlagLogic } from '../featureFlagLogic'
import type { promptLogicType } from './promptLogicType'
const PROMPT_PREFIX = 'prompt'
diff --git a/frontend/src/lib/logic/promptLogic.tsx b/frontend/src/lib/logic/promptLogic.tsx
index 85a86f234c856..473bab99a655f 100644
--- a/frontend/src/lib/logic/promptLogic.tsx
+++ b/frontend/src/lib/logic/promptLogic.tsx
@@ -1,6 +1,6 @@
+import { Form, FormItemProps, Input, InputProps, Modal, ModalProps } from 'antd'
+import { actions, events, kea, key, listeners, path, props } from 'kea'
import { createRoot } from 'react-dom/client'
-import { kea, props, path, key, actions, events, listeners } from 'kea'
-import { Modal, ModalProps, Input, InputProps, Form, FormItemProps } from 'antd'
import type { promptLogicType } from './promptLogicType'
diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx
index a8f5774ab5b24..10be42e8fd679 100644
--- a/frontend/src/lib/taxonomy.tsx
+++ b/frontend/src/lib/taxonomy.tsx
@@ -1,4 +1,5 @@
import { KeyMapping, KeyMappingInterface, PropertyFilterValue } from '~/types'
+
import { Link } from './lemon-ui/Link'
// If adding event properties with labels, check whether they should be added to
diff --git a/frontend/src/lib/utils.test.ts b/frontend/src/lib/utils.test.ts
index b9a49d899dc69..dca123df90749 100644
--- a/frontend/src/lib/utils.test.ts
+++ b/frontend/src/lib/utils.test.ts
@@ -1,4 +1,8 @@
+import { dayjs } from 'lib/dayjs'
import tk from 'timekeeper'
+
+import { ElementType, EventType, PropertyType, TimeUnitType } from '~/types'
+
import {
areObjectValuesEmpty,
average,
@@ -22,27 +26,25 @@ import {
getFormattedLastWeekDate,
hexToRGBA,
humanFriendlyDuration,
+ humanFriendlyLargeNumber,
identifierToHuman,
isExternalLink,
isURL,
median,
midEllipsis,
numericOperatorMap,
- objectDiffShallow,
objectClean,
objectCleanWithEmpty,
+ objectDiffShallow,
pluralize,
range,
reverseColonDelimitedDuration,
roundToDecimal,
selectorOperatorMap,
+ shortTimeZone,
stringOperatorMap,
toParams,
- shortTimeZone,
- humanFriendlyLargeNumber,
} from './utils'
-import { ElementType, EventType, PropertyType, TimeUnitType } from '~/types'
-import { dayjs } from 'lib/dayjs'
describe('toParams', () => {
it('handles unusual input', () => {
diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
index dd91147876a95..b37a126d607e8 100644
--- a/frontend/src/lib/utils.tsx
+++ b/frontend/src/lib/utils.tsx
@@ -1,4 +1,11 @@
+import * as Sentry from '@sentry/react'
+import equal from 'fast-deep-equal'
+import { tagColors } from 'lib/colors'
+import { WEBHOOK_SERVICES } from 'lib/constants'
+import { dayjs } from 'lib/dayjs'
+import { AlignType } from 'rc-trigger/lib/interface'
import { CSSProperties } from 'react'
+
import {
ActionType,
ActorType,
@@ -9,14 +16,9 @@ import {
PropertyType,
TimeUnitType,
} from '~/types'
-import * as Sentry from '@sentry/react'
-import equal from 'fast-deep-equal'
-import { tagColors } from 'lib/colors'
-import { WEBHOOK_SERVICES } from 'lib/constants'
-import { AlignType } from 'rc-trigger/lib/interface'
-import { dayjs } from 'lib/dayjs'
-import { getAppContext } from './utils/getAppContext'
+
import { CUSTOM_OPTION_KEY } from './components/DateFilter/types'
+import { getAppContext } from './utils/getAppContext'
/**
* WARNING: Be very careful importing things here. This file is heavily used and can trigger a lot of cyclic imports
diff --git a/frontend/src/lib/utils/d3Utils.ts b/frontend/src/lib/utils/d3Utils.ts
index 8accdaaebf132..4c2814e6120bc 100644
--- a/frontend/src/lib/utils/d3Utils.ts
+++ b/frontend/src/lib/utils/d3Utils.ts
@@ -1,6 +1,6 @@
import * as d3 from 'd3'
-import { INITIAL_CONFIG } from 'scenes/insights/views/Histogram/histogramUtils'
import { D3Selector, D3Transition } from 'lib/hooks/useD3'
+import { INITIAL_CONFIG } from 'scenes/insights/views/Histogram/histogramUtils'
export const getOrCreateEl = (
container: D3Selector,
diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
index 2410a62146d2c..e0a34b568417d 100644
--- a/frontend/src/lib/utils/eventUsageLogic.ts
+++ b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -1,49 +1,51 @@
-import { kea, path, connect, actions, listeners } from 'kea'
+import { actions, connect, kea, listeners, path } from 'kea'
+import { convertPropertyGroupToProperties, isGroupPropertyFilter } from 'lib/components/PropertyFilters/utils'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import type { Dayjs } from 'lib/dayjs'
+import { now } from 'lib/dayjs'
import { isPostHogProp, keyMappingKeys } from 'lib/taxonomy'
import posthog from 'posthog-js'
+import {
+ isFilterWithDisplay,
+ isFunnelsFilter,
+ isPathsFilter,
+ isRetentionFilter,
+ isStickinessFilter,
+ isTrendsFilter,
+} from 'scenes/insights/sharedUtils'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { EventIndex } from 'scenes/session-recordings/player/eventIndex'
+import { SurveyTemplateType } from 'scenes/surveys/constants'
import { userLogic } from 'scenes/userLogic'
-import type { eventUsageLogicType } from './eventUsageLogicType'
+
import {
- FilterType,
- DashboardType,
- PersonType,
+ AccessLevel,
+ AnyPartialFilterType,
+ AnyPropertyFilter,
DashboardMode,
+ DashboardType,
EntityType,
+ Experiment,
+ FilterLogicalOperator,
+ FilterType,
+ FunnelCorrelation,
+ HelpType,
InsightModel,
+ InsightShortId,
InsightType,
- HelpType,
- SessionRecordingUsageType,
- FunnelCorrelation,
ItemMode,
- AnyPropertyFilter,
- Experiment,
- PropertyGroupFilter,
- FilterLogicalOperator,
+ PersonType,
PropertyFilterValue,
- InsightShortId,
- SessionPlayerData,
- AnyPartialFilterType,
- Resource,
- AccessLevel,
+ PropertyGroupFilter,
RecordingReportLoadTimes,
+ Resource,
+ SessionPlayerData,
SessionRecordingPlayerTab,
+ SessionRecordingUsageType,
Survey,
} from '~/types'
-import type { Dayjs } from 'lib/dayjs'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { now } from 'lib/dayjs'
-import {
- isFilterWithDisplay,
- isFunnelsFilter,
- isPathsFilter,
- isRetentionFilter,
- isStickinessFilter,
- isTrendsFilter,
-} from 'scenes/insights/sharedUtils'
-import { convertPropertyGroupToProperties, isGroupPropertyFilter } from 'lib/components/PropertyFilters/utils'
-import { EventIndex } from 'scenes/session-recordings/player/eventIndex'
-import { SurveyTemplateType } from 'scenes/surveys/constants'
+
+import type { eventUsageLogicType } from './eventUsageLogicType'
export enum DashboardEventSource {
LongPress = 'long_press',
@@ -171,9 +173,10 @@ function sanitizeFilterParams(filters: AnyPartialFilterType): Record): Partial => {
if ((window as any).SENTRY_DSN) {
diff --git a/frontend/src/mocks/browser.tsx b/frontend/src/mocks/browser.tsx
index 6baf8552fa047..846e69bbf6e14 100644
--- a/frontend/src/mocks/browser.tsx
+++ b/frontend/src/mocks/browser.tsx
@@ -1,7 +1,8 @@
+import { DecoratorFunction } from '@storybook/types'
import { rest, setupWorker } from 'msw'
+
import { handlers } from '~/mocks/handlers'
import { Mocks, mocksToHandlers } from '~/mocks/utils'
-import { DecoratorFunction } from '@storybook/types'
// Default handlers ensure no request is unhandled by msw
export const worker = setupWorker(...handlers)
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 7b17d549ffc8a..7da9a39b575fb 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -1,20 +1,22 @@
-import { Mocks, MockSignature, mocksToHandlers } from './utils'
import {
+ MOCK_DEFAULT_COHORT,
MOCK_DEFAULT_ORGANIZATION,
MOCK_DEFAULT_ORGANIZATION_INVITE,
MOCK_DEFAULT_ORGANIZATION_MEMBER,
+ MOCK_DEFAULT_PLUGIN,
+ MOCK_DEFAULT_PLUGIN_CONFIG,
MOCK_DEFAULT_TEAM,
MOCK_DEFAULT_USER,
- MOCK_DEFAULT_COHORT,
MOCK_PERSON_PROPERTIES,
- MOCK_DEFAULT_PLUGIN,
- MOCK_DEFAULT_PLUGIN_CONFIG,
- MOCK_TEAM_ID,
MOCK_SECOND_ORGANIZATION_MEMBER,
+ MOCK_TEAM_ID,
} from 'lib/api.mock'
+
import { getAvailableFeatures } from '~/mocks/features'
import { SharingConfigurationType } from '~/types'
+import { Mocks, MockSignature, mocksToHandlers } from './utils'
+
export const EMPTY_PAGINATED_RESPONSE = { count: 0, results: [] as any[], next: null, previous: null }
export const toPaginatedResponse = (results: any[]): typeof EMPTY_PAGINATED_RESPONSE => ({
count: results.length,
diff --git a/frontend/src/mocks/jest.ts b/frontend/src/mocks/jest.ts
index 2a376fa4d6857..9023bc426af2f 100644
--- a/frontend/src/mocks/jest.ts
+++ b/frontend/src/mocks/jest.ts
@@ -1,7 +1,8 @@
import { setupServer } from 'msw/node'
+
+import { useAvailableFeatures } from '~/mocks/features'
import { handlers } from '~/mocks/handlers'
import { Mocks, mocksToHandlers } from '~/mocks/utils'
-import { useAvailableFeatures } from '~/mocks/features'
export const mswServer = setupServer(...handlers)
export const useMocks = (mocks: Mocks): void => mswServer.use(...mocksToHandlers(mocks))
diff --git a/frontend/src/models/actionsModel.ts b/frontend/src/models/actionsModel.ts
index 72735d29555b8..b6e508a3d7ed1 100644
--- a/frontend/src/models/actionsModel.ts
+++ b/frontend/src/models/actionsModel.ts
@@ -1,10 +1,12 @@
+import { connect, events, kea, path, props, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, props, path, connect, selectors, events } from 'kea'
import api from 'lib/api'
+import { permanentlyMount } from 'lib/utils/kea-logic-builders'
+import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
+
import { ActionType } from '~/types'
+
import type { actionsModelType } from './actionsModelType'
-import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
-import { permanentlyMount } from 'lib/utils/kea-logic-builders'
export interface ActionsModelProps {
params?: string
diff --git a/frontend/src/models/annotationsModel.ts b/frontend/src/models/annotationsModel.ts
index c22abb4754971..99fd787ac50c4 100644
--- a/frontend/src/models/annotationsModel.ts
+++ b/frontend/src/models/annotationsModel.ts
@@ -1,12 +1,14 @@
import { actions, afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
-import api from 'lib/api'
-import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
-import type { annotationsModelType } from './annotationsModelType'
-import { RawAnnotationType, AnnotationType } from '~/types'
import { loaders } from 'kea-loaders'
-import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
+import api from 'lib/api'
import { dayjsUtcToTimezone } from 'lib/dayjs'
+import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import { permanentlyMount } from 'lib/utils/kea-logic-builders'
+import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
+
+import { AnnotationType, RawAnnotationType } from '~/types'
+
+import type { annotationsModelType } from './annotationsModelType'
export type AnnotationData = Pick
export type AnnotationDataWithoutInsight = Omit
diff --git a/frontend/src/models/cohortsModel.ts b/frontend/src/models/cohortsModel.ts
index 13f994ab31b95..b095a9b946472 100644
--- a/frontend/src/models/cohortsModel.ts
+++ b/frontend/src/models/cohortsModel.ts
@@ -1,7 +1,14 @@
+import Fuse from 'fuse.js'
+import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, path, connect, actions, reducers, selectors, listeners, beforeUnmount, afterMount } from 'kea'
import api from 'lib/api'
-import type { cohortsModelType } from './cohortsModelType'
+import { triggerExport } from 'lib/components/ExportButton/exporter'
+import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
+import { permanentlyMount } from 'lib/utils/kea-logic-builders'
+import { BehavioralFilterKey } from 'scenes/cohorts/CohortFilters/types'
+import { personsLogic } from 'scenes/persons/personsLogic'
+import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
+
import {
AnyCohortCriteriaType,
BehavioralCohortType,
@@ -10,13 +17,8 @@ import {
CohortType,
ExporterFormat,
} from '~/types'
-import { personsLogic } from 'scenes/persons/personsLogic'
-import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
-import { triggerExport } from 'lib/components/ExportButton/exporter'
-import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
-import Fuse from 'fuse.js'
-import { permanentlyMount } from 'lib/utils/kea-logic-builders'
-import { BehavioralFilterKey } from 'scenes/cohorts/CohortFilters/types'
+
+import type { cohortsModelType } from './cohortsModelType'
const POLL_TIMEOUT = 5000
diff --git a/frontend/src/models/dashboardsModel.test.ts b/frontend/src/models/dashboardsModel.test.ts
index dcbba56fe24b2..8c021609e5ded 100644
--- a/frontend/src/models/dashboardsModel.test.ts
+++ b/frontend/src/models/dashboardsModel.test.ts
@@ -1,9 +1,11 @@
-import { initKeaTests } from '~/test/init'
import { expectLogic } from 'kea-test-utils'
-import { DashboardBasicType } from '~/types'
+import { DashboardPrivilegeLevel, DashboardRestrictionLevel } from 'lib/constants'
+
import { useMocks } from '~/mocks/jest'
+import { initKeaTests } from '~/test/init'
+import { DashboardBasicType } from '~/types'
+
import { dashboardsModel, nameCompareFunction } from './dashboardsModel'
-import { DashboardPrivilegeLevel, DashboardRestrictionLevel } from 'lib/constants'
const dashboards: Partial[] = [
{
diff --git a/frontend/src/models/dashboardsModel.tsx b/frontend/src/models/dashboardsModel.tsx
index 55bf7adc27e7d..54d52b20ad986 100644
--- a/frontend/src/models/dashboardsModel.tsx
+++ b/frontend/src/models/dashboardsModel.tsx
@@ -1,17 +1,19 @@
+import { actions, afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, path, connect, actions, reducers, selectors, listeners, afterMount } from 'kea'
import { router, urlToAction } from 'kea-router'
import api, { PaginatedResponse } from 'lib/api'
+import { GENERATED_DASHBOARD_PREFIX } from 'lib/constants'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { idToKey, isUserLoggedIn } from 'lib/utils'
import { DashboardEventSource, eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import type { dashboardsModelType } from './dashboardsModelType'
-import { DashboardBasicType, DashboardTile, DashboardType, InsightModel, InsightShortId } from '~/types'
-import { urls } from 'scenes/urls'
+import { permanentlyMount } from 'lib/utils/kea-logic-builders'
import { teamLogic } from 'scenes/teamLogic'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { urls } from 'scenes/urls'
+
import { tagsModel } from '~/models/tagsModel'
-import { GENERATED_DASHBOARD_PREFIX } from 'lib/constants'
-import { permanentlyMount } from 'lib/utils/kea-logic-builders'
+import { DashboardBasicType, DashboardTile, DashboardType, InsightModel, InsightShortId } from '~/types'
+
+import type { dashboardsModelType } from './dashboardsModelType'
export const dashboardsModel = kea([
path(['models', 'dashboardsModel']),
diff --git a/frontend/src/models/funnelsModel.ts b/frontend/src/models/funnelsModel.ts
index 63aa6ec71f4d6..d07a155dbe873 100644
--- a/frontend/src/models/funnelsModel.ts
+++ b/frontend/src/models/funnelsModel.ts
@@ -1,10 +1,12 @@
+import { actions, events, kea, listeners, path, reducers } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, path, actions, reducers, listeners, events } from 'kea'
import api from 'lib/api'
import { toParams } from 'lib/utils'
-import { SavedFunnel, InsightType } from '~/types'
-import type { funnelsModelType } from './funnelsModelType'
+
+import { InsightType, SavedFunnel } from '~/types'
+
import { teamLogic } from '../scenes/teamLogic'
+import type { funnelsModelType } from './funnelsModelType'
const parseSavedFunnel = (result: Record): SavedFunnel => {
return {
diff --git a/frontend/src/models/groupPropertiesModel.ts b/frontend/src/models/groupPropertiesModel.ts
index 067ff5ff8beba..3a5839146e186 100644
--- a/frontend/src/models/groupPropertiesModel.ts
+++ b/frontend/src/models/groupPropertiesModel.ts
@@ -1,10 +1,12 @@
+import { connect, events, kea, path, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, path, connect, selectors, events } from 'kea'
-import type { groupPropertiesModelType } from './groupPropertiesModelType'
import api from 'lib/api'
-import { GroupTypeProperties, PersonProperty } from '~/types'
-import { teamLogic } from 'scenes/teamLogic'
import { groupsAccessLogic } from 'lib/introductions/groupsAccessLogic'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { GroupTypeProperties, PersonProperty } from '~/types'
+
+import type { groupPropertiesModelType } from './groupPropertiesModelType'
export const groupPropertiesModel = kea([
path(['models', 'groupPropertiesModel']),
diff --git a/frontend/src/models/groupsModel.ts b/frontend/src/models/groupsModel.ts
index 1c5506f5c6c87..eb8babc316dc2 100644
--- a/frontend/src/models/groupsModel.ts
+++ b/frontend/src/models/groupsModel.ts
@@ -1,12 +1,14 @@
-import { kea, path, connect, selectors, afterMount } from 'kea'
+import { afterMount, connect, kea, path, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
+import { subscriptions } from 'kea-subscriptions'
import api from 'lib/api'
-import { GroupType, GroupTypeIndex } from '~/types'
-import { teamLogic } from 'scenes/teamLogic'
-import type { groupsModelType } from './groupsModelType'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { groupsAccessLogic, GroupsAccessStatus } from 'lib/introductions/groupsAccessLogic'
-import { subscriptions } from 'kea-subscriptions'
-import { loaders } from 'kea-loaders'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { GroupType, GroupTypeIndex } from '~/types'
+
+import type { groupsModelType } from './groupsModelType'
export interface Noun {
singular: string
diff --git a/frontend/src/models/insightsModel.tsx b/frontend/src/models/insightsModel.tsx
index 3be3e93faa231..02e0e5f21d588 100644
--- a/frontend/src/models/insightsModel.tsx
+++ b/frontend/src/models/insightsModel.tsx
@@ -1,10 +1,12 @@
-import { kea, path, connect, actions, listeners } from 'kea'
+import { actions, connect, kea, listeners, path } from 'kea'
import api from 'lib/api'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { promptLogic } from 'lib/logic/promptLogic'
-import { InsightModel } from '~/types'
import { teamLogic } from 'scenes/teamLogic'
+
+import { InsightModel } from '~/types'
+
import type { insightsModelType } from './insightsModelType'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
export const insightsModel = kea([
path(['models', 'insightsModel']),
diff --git a/frontend/src/models/notebooksModel.ts b/frontend/src/models/notebooksModel.ts
index 70936e1c6c8bd..59dd745b092d0 100644
--- a/frontend/src/models/notebooksModel.ts
+++ b/frontend/src/models/notebooksModel.ts
@@ -1,23 +1,22 @@
import { actions, BuiltLogic, connect, kea, listeners, path, reducers } from 'kea'
-
import { loaders } from 'kea-loaders'
-import { DashboardType, NotebookListItemType, NotebookNodeType, NotebookTarget } from '~/types'
-
+import { router } from 'kea-router'
import api from 'lib/api'
+import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import posthog from 'posthog-js'
+import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
+import { notebookLogicType } from 'scenes/notebooks/Notebook/notebookLogicType'
+import { defaultNotebookContent, EditorFocusPosition, JSONContent } from 'scenes/notebooks/Notebook/utils'
+import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanelLogic'
import { LOCAL_NOTEBOOK_TEMPLATES } from 'scenes/notebooks/NotebookTemplates/notebookTemplates'
-import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
import { teamLogic } from 'scenes/teamLogic'
-import { defaultNotebookContent, EditorFocusPosition, JSONContent } from 'scenes/notebooks/Notebook/utils'
-
-import type { notebooksModelType } from './notebooksModelType'
-import { notebookLogicType } from 'scenes/notebooks/Notebook/notebookLogicType'
import { urls } from 'scenes/urls'
-import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
-import { router } from 'kea-router'
+
import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
import { InsightVizNode, Node, NodeKind } from '~/queries/schema'
-import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanelLogic'
+import { DashboardType, NotebookListItemType, NotebookNodeType, NotebookTarget } from '~/types'
+
+import type { notebooksModelType } from './notebooksModelType'
export const SCRATCHPAD_NOTEBOOK: NotebookListItemType = {
short_id: 'scratchpad',
diff --git a/frontend/src/models/propertyDefinitionsModel.test.ts b/frontend/src/models/propertyDefinitionsModel.test.ts
index bf08b2bff4112..68e6177f98ba0 100644
--- a/frontend/src/models/propertyDefinitionsModel.test.ts
+++ b/frontend/src/models/propertyDefinitionsModel.test.ts
@@ -1,9 +1,10 @@
-import { initKeaTests } from '~/test/init'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
import { expectLogic, partial } from 'kea-test-utils'
-import { PropertyDefinition, PropertyDefinitionState, PropertyDefinitionType, PropertyType } from '~/types'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+
import { useMocks } from '~/mocks/jest'
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { initKeaTests } from '~/test/init'
+import { PropertyDefinition, PropertyDefinitionState, PropertyDefinitionType, PropertyType } from '~/types'
const propertyDefinitions: PropertyDefinition[] = [
{
diff --git a/frontend/src/models/propertyDefinitionsModel.ts b/frontend/src/models/propertyDefinitionsModel.ts
index b2dcb6cc2952d..7c4d55c4460e1 100644
--- a/frontend/src/models/propertyDefinitionsModel.ts
+++ b/frontend/src/models/propertyDefinitionsModel.ts
@@ -1,5 +1,12 @@
import { actions, kea, listeners, path, reducers, selectors } from 'kea'
import api, { ApiMethodOptions } from 'lib/api'
+import { TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
+import { dayjs } from 'lib/dayjs'
+import { captureTimeToSeeData } from 'lib/internalMetrics'
+import { colonDelimitedDuration } from 'lib/utils'
+import { permanentlyMount } from 'lib/utils/kea-logic-builders'
+import { teamLogic } from 'scenes/teamLogic'
+
import {
BreakdownKeyType,
PropertyDefinition,
@@ -8,13 +15,8 @@ import {
PropertyFilterValue,
PropertyType,
} from '~/types'
+
import type { propertyDefinitionsModelType } from './propertyDefinitionsModelType'
-import { dayjs } from 'lib/dayjs'
-import { TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
-import { colonDelimitedDuration } from 'lib/utils'
-import { captureTimeToSeeData } from 'lib/internalMetrics'
-import { teamLogic } from 'scenes/teamLogic'
-import { permanentlyMount } from 'lib/utils/kea-logic-builders'
export type PropertyDefinitionStorage = Record
diff --git a/frontend/src/models/tagsModel.ts b/frontend/src/models/tagsModel.ts
index 1157e6029b4b1..e5a32d8e3c4c4 100644
--- a/frontend/src/models/tagsModel.ts
+++ b/frontend/src/models/tagsModel.ts
@@ -1,9 +1,9 @@
import { afterMount, connect, kea, path } from 'kea'
+import { loaders } from 'kea-loaders'
import api from 'lib/api'
+import { organizationLogic } from 'scenes/organizationLogic'
import type { tagsModelType } from './tagsModelType'
-import { loaders } from 'kea-loaders'
-import { organizationLogic } from 'scenes/organizationLogic'
export const tagsModel = kea([
path(['models', 'tagsModel']),
diff --git a/frontend/src/queries/Query/Query.tsx b/frontend/src/queries/Query/Query.tsx
index 369eb6792fe59..f3e00c66cee67 100644
--- a/frontend/src/queries/Query/Query.tsx
+++ b/frontend/src/queries/Query/Query.tsx
@@ -1,3 +1,17 @@
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { useEffect, useState } from 'react'
+
+import { ErrorBoundary } from '~/layout/ErrorBoundary'
+import { DataNode } from '~/queries/nodes/DataNode/DataNode'
+import { DataTable } from '~/queries/nodes/DataTable/DataTable'
+import { InsightViz } from '~/queries/nodes/InsightViz/InsightViz'
+import { WebOverview } from '~/queries/nodes/WebOverview/WebOverview'
+import { QueryEditor } from '~/queries/QueryEditor/QueryEditor'
+import { AnyResponseType, Node, QuerySchema } from '~/queries/schema'
+import { QueryContext } from '~/queries/types'
+
+import { SavedInsight } from '../nodes/SavedInsight/SavedInsight'
+import { TimeToSeeData } from '../nodes/TimeToSeeData/TimeToSeeData'
import {
isDataNode,
isDataTableNode,
@@ -6,19 +20,6 @@ import {
isTimeToSeeDataSessionsNode,
isWebOverviewQuery,
} from '../utils'
-import { DataTable } from '~/queries/nodes/DataTable/DataTable'
-import { DataNode } from '~/queries/nodes/DataNode/DataNode'
-import { InsightViz } from '~/queries/nodes/InsightViz/InsightViz'
-import { AnyResponseType, Node, QuerySchema } from '~/queries/schema'
-import { QueryContext } from '~/queries/types'
-
-import { ErrorBoundary } from '~/layout/ErrorBoundary'
-import { useEffect, useState } from 'react'
-import { TimeToSeeData } from '../nodes/TimeToSeeData/TimeToSeeData'
-import { QueryEditor } from '~/queries/QueryEditor/QueryEditor'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { SavedInsight } from '../nodes/SavedInsight/SavedInsight'
-import { WebOverview } from '~/queries/nodes/WebOverview/WebOverview'
export interface QueryProps {
/** An optional key to identify the query */
diff --git a/frontend/src/queries/QueryEditor/QueryEditor.tsx b/frontend/src/queries/QueryEditor/QueryEditor.tsx
index 9d0990b64ce26..a32bd9162b540 100644
--- a/frontend/src/queries/QueryEditor/QueryEditor.tsx
+++ b/frontend/src/queries/QueryEditor/QueryEditor.tsx
@@ -1,13 +1,14 @@
-import { useActions, useValues } from 'kea'
import { useMonaco } from '@monaco-editor/react'
-import { useEffect, useState } from 'react'
-import schema from '~/queries/schema.json'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
+import { CodeEditor } from 'lib/components/CodeEditors'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { queryEditorLogic } from '~/queries/QueryEditor/queryEditorLogic'
+import { useEffect, useState } from 'react'
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
-import clsx from 'clsx'
+
+import { queryEditorLogic } from '~/queries/QueryEditor/queryEditorLogic'
+import schema from '~/queries/schema.json'
import { QueryContext } from '~/queries/types'
-import { CodeEditor } from 'lib/components/CodeEditors'
export interface QueryEditorProps {
query: string
diff --git a/frontend/src/queries/QueryEditor/queryEditorLogic.ts b/frontend/src/queries/QueryEditor/queryEditorLogic.ts
index f73a338dc72f7..585f1b84db761 100644
--- a/frontend/src/queries/QueryEditor/queryEditorLogic.ts
+++ b/frontend/src/queries/QueryEditor/queryEditorLogic.ts
@@ -1,9 +1,10 @@
import { actions, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
+
+import { QueryEditorProps } from '~/queries/QueryEditor/QueryEditor'
import { Node } from '~/queries/schema'
import type { queryEditorLogicType } from './queryEditorLogicType'
-import { QueryEditorProps } from '~/queries/QueryEditor/QueryEditor'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
function prettyJSON(source: string): string {
try {
diff --git a/frontend/src/queries/examples.ts b/frontend/src/queries/examples.ts
index 13df18e2a5999..2485308f00a2a 100644
--- a/frontend/src/queries/examples.ts
+++ b/frontend/src/queries/examples.ts
@@ -1,4 +1,5 @@
// This file contains example queries, used in storybook and in the /query interface.
+import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
import {
ActionsNode,
DataTableNode,
@@ -26,7 +27,6 @@ import {
PropertyOperator,
StepOrderValue,
} from '~/types'
-import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
const Events: EventsQuery = {
kind: NodeKind.EventsQuery,
diff --git a/frontend/src/queries/hooks/useDebouncedQuery.ts b/frontend/src/queries/hooks/useDebouncedQuery.ts
index 2464a96e19711..dfc35f3214254 100644
--- a/frontend/src/queries/hooks/useDebouncedQuery.ts
+++ b/frontend/src/queries/hooks/useDebouncedQuery.ts
@@ -1,6 +1,7 @@
-import { Node } from '~/queries/schema'
import { useEffect, useRef, useState } from 'react'
+import { Node } from '~/queries/schema'
+
export function useDebouncedQuery(
query: T,
setQuery: ((query: T) => void) | undefined,
diff --git a/frontend/src/queries/nodes/DataNode/AutoLoad.tsx b/frontend/src/queries/nodes/DataNode/AutoLoad.tsx
index fb1be33db264b..962ead9bda621 100644
--- a/frontend/src/queries/nodes/DataNode/AutoLoad.tsx
+++ b/frontend/src/queries/nodes/DataNode/AutoLoad.tsx
@@ -1,8 +1,9 @@
import { useActions, useValues } from 'kea'
-import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
import { LemonSwitch } from 'lib/lemon-ui/LemonSwitch/LemonSwitch'
import { useEffect } from 'react'
+import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
+
export function AutoLoad(): JSX.Element {
const { autoLoadToggled } = useValues(dataNodeLogic)
const { startAutoLoad, stopAutoLoad, toggleAutoLoad } = useActions(dataNodeLogic)
diff --git a/frontend/src/queries/nodes/DataNode/DataNode.stories.tsx b/frontend/src/queries/nodes/DataNode/DataNode.stories.tsx
index e91daaf1ca310..7b20caa2b8037 100644
--- a/frontend/src/queries/nodes/DataNode/DataNode.stories.tsx
+++ b/frontend/src/queries/nodes/DataNode/DataNode.stories.tsx
@@ -1,18 +1,20 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { examples } from '~/queries/examples'
+
import { mswDecorator } from '~/mocks/browser'
+import { examples } from '~/queries/examples'
+import { Query } from '~/queries/Query/Query'
+
import events from './__mocks__/EventsNode.json'
import persons from './__mocks__/PersonsNode.json'
-import { Query } from '~/queries/Query/Query'
type Story = StoryObj
const meta: Meta = {
title: 'Queries/DataNode',
component: Query,
+ tags: ['test-skip'],
parameters: {
layout: 'fullscreen',
viewMode: 'story',
- testOptions: { skip: true },
},
decorators: [
mswDecorator({
diff --git a/frontend/src/queries/nodes/DataNode/DataNode.tsx b/frontend/src/queries/nodes/DataNode/DataNode.tsx
index aab8597c8f4e0..97e1155a2436f 100644
--- a/frontend/src/queries/nodes/DataNode/DataNode.tsx
+++ b/frontend/src/queries/nodes/DataNode/DataNode.tsx
@@ -1,11 +1,12 @@
+import { useValues } from 'kea'
+import { CodeEditor } from 'lib/components/CodeEditors'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { useState } from 'react'
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
-import { AnyResponseType, DataNode as DataNodeType, DataTableNode } from '~/queries/schema'
-import { useValues } from 'kea'
+
import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { OpenEditorButton } from '~/queries/nodes/Node/OpenEditorButton'
-import { CodeEditor } from 'lib/components/CodeEditors'
+import { AnyResponseType, DataNode as DataNodeType, DataTableNode } from '~/queries/schema'
interface DataNodeProps {
query: DataNodeType
diff --git a/frontend/src/queries/nodes/DataNode/DateRange.tsx b/frontend/src/queries/nodes/DataNode/DateRange.tsx
index f28699cb34146..cd2232e95bf9c 100644
--- a/frontend/src/queries/nodes/DataNode/DateRange.tsx
+++ b/frontend/src/queries/nodes/DataNode/DateRange.tsx
@@ -1,4 +1,5 @@
import { DateFilter } from 'lib/components/DateFilter/DateFilter'
+
import { DataNode, EventsQuery, HogQLQuery } from '~/queries/schema'
import { isEventsQuery, isHogQLQuery } from '~/queries/utils'
diff --git a/frontend/src/queries/nodes/DataNode/ElapsedTime.tsx b/frontend/src/queries/nodes/DataNode/ElapsedTime.tsx
index f09ab068e5f14..29dabc5c645b6 100644
--- a/frontend/src/queries/nodes/DataNode/ElapsedTime.tsx
+++ b/frontend/src/queries/nodes/DataNode/ElapsedTime.tsx
@@ -1,8 +1,9 @@
+import clsx from 'clsx'
import { useValues } from 'kea'
-import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { useState } from 'react'
import { Popover } from 'lib/lemon-ui/Popover'
-import clsx from 'clsx'
+import { useState } from 'react'
+
+import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
import { QueryTiming } from '~/queries/schema'
export interface TimingsProps {
diff --git a/frontend/src/queries/nodes/DataNode/LoadNext.tsx b/frontend/src/queries/nodes/DataNode/LoadNext.tsx
index d81fea67ff685..3c3f7ab1fc9fe 100644
--- a/frontend/src/queries/nodes/DataNode/LoadNext.tsx
+++ b/frontend/src/queries/nodes/DataNode/LoadNext.tsx
@@ -1,6 +1,7 @@
import { useActions, useValues } from 'kea'
-import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+
+import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
import { DataNode } from '~/queries/schema'
import { isPersonsNode, isPersonsQuery } from '~/queries/utils'
diff --git a/frontend/src/queries/nodes/DataNode/Reload.tsx b/frontend/src/queries/nodes/DataNode/Reload.tsx
index f9996e2de6c0c..0b4fffe862633 100644
--- a/frontend/src/queries/nodes/DataNode/Reload.tsx
+++ b/frontend/src/queries/nodes/DataNode/Reload.tsx
@@ -1,9 +1,10 @@
import { useActions, useValues } from 'kea'
-import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconRefresh } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { Spinner } from 'lib/lemon-ui/Spinner'
+import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
+
export function Reload(): JSX.Element {
const { responseLoading } = useValues(dataNodeLogic)
const { loadData, cancelQuery } = useActions(dataNodeLogic)
diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.queryCancellation.test.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.queryCancellation.test.ts
index 9cf95eb03127d..55a417bdff91e 100644
--- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.queryCancellation.test.ts
+++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.queryCancellation.test.ts
@@ -1,10 +1,11 @@
-import { initKeaTests } from '~/test/init'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { expectLogic } from 'kea-test-utils'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import * as libUtils from 'lib/utils'
+
+import { useMocks } from '~/mocks/jest'
import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
import { NodeKind } from '~/queries/schema'
-import { useMocks } from '~/mocks/jest'
-import * as libUtils from 'lib/utils'
+import { initKeaTests } from '~/test/init'
const testUniqueKey = 'testUniqueKey'
diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts
index ce40db3bace81..fbe91ff1a4653 100644
--- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts
+++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.test.ts
@@ -1,8 +1,9 @@
-import { initKeaTests } from '~/test/init'
import { expectLogic, partial } from 'kea-test-utils'
+
import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { NodeKind } from '~/queries/schema'
import { query } from '~/queries/query'
+import { NodeKind } from '~/queries/schema'
+import { initKeaTests } from '~/test/init'
jest.mock('~/queries/query', () => {
return {
diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
index 94c2651343b31..3b8ad8e62c2de 100644
--- a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
+++ b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
@@ -1,20 +1,33 @@
-import { dayjs } from 'lib/dayjs'
+import clsx from 'clsx'
+import equal from 'fast-deep-equal'
import {
+ actions,
+ afterMount,
+ beforeUnmount,
+ connect,
kea,
+ key,
+ listeners,
path,
props,
- key,
- afterMount,
- selectors,
propsChanged,
reducers,
- actions,
- beforeUnmount,
- listeners,
- connect,
+ selectors,
} from 'kea'
import { loaders } from 'kea-loaders'
-import type { dataNodeLogicType } from './dataNodeLogicType'
+import { subscriptions } from 'kea-subscriptions'
+import api, { ApiMethodOptions, getJSONOrThrow } from 'lib/api'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { dayjs } from 'lib/dayjs'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { objectsEqual, shouldCancelQuery, uuid } from 'lib/utils'
+import { UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES } from 'scenes/insights/insightLogic'
+import { compareInsightQuery } from 'scenes/insights/utils/compareInsightQuery'
+import { teamLogic } from 'scenes/teamLogic'
+import { userLogic } from 'scenes/userLogic'
+
+import { removeExpressionComment } from '~/queries/nodes/DataTable/utils'
+import { query } from '~/queries/query'
import {
AnyResponseType,
DataNode,
@@ -26,27 +39,16 @@ import {
QueryResponse,
QueryTiming,
} from '~/queries/schema'
-import { query } from '~/queries/query'
import {
- isInsightQueryNode,
isEventsQuery,
+ isInsightQueryNode,
isPersonsNode,
- isQueryWithHogQLSupport,
isPersonsQuery,
+ isQueryWithHogQLSupport,
} from '~/queries/utils'
-import { subscriptions } from 'kea-subscriptions'
-import { objectsEqual, shouldCancelQuery, uuid } from 'lib/utils'
-import clsx from 'clsx'
-import api, { ApiMethodOptions, getJSONOrThrow } from 'lib/api'
-import { removeExpressionComment } from '~/queries/nodes/DataTable/utils'
-import { userLogic } from 'scenes/userLogic'
-import { UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES } from 'scenes/insights/insightLogic'
-import { teamLogic } from 'scenes/teamLogic'
-import equal from 'fast-deep-equal'
+
import { filtersToQueryNode } from '../InsightQuery/utils/filtersToQueryNode'
-import { compareInsightQuery } from 'scenes/insights/utils/compareInsightQuery'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
+import type { dataNodeLogicType } from './dataNodeLogicType'
export interface DataNodeLogicProps {
key: string
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
index 0670b5c664c28..80b9835e4109f 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
@@ -1,28 +1,31 @@
import './ColumnConfigurator.scss'
+
+import { DndContext } from '@dnd-kit/core'
+import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers'
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
import { BindLogic, useActions, useValues } from 'kea'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { dataTableLogic } from '~/queries/nodes/DataTable/dataTableLogic'
+import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { RestrictedArea, RestrictedComponentProps, RestrictionScope } from 'lib/components/RestrictedArea'
+import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { TeamMembershipLevel } from 'lib/constants'
import { IconClose, IconEdit, IconTuning, SortableDragIcon } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
+import { LemonModal } from 'lib/lemon-ui/LemonModal'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { useState } from 'react'
-import { columnConfiguratorLogic, ColumnConfiguratorLogicProps } from './columnConfiguratorLogic'
-import { defaultDataTableColumns, extractExpressionComment, removeExpressionComment } from '../utils'
+import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
+
+import { dataTableLogic } from '~/queries/nodes/DataTable/dataTableLogic'
import { DataTableNode, NodeKind } from '~/queries/schema'
-import { LemonModal } from 'lib/lemon-ui/LemonModal'
import { isEventsQuery, taxonomicEventFilterToHogQL, trimQuotes } from '~/queries/utils'
-import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
-import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
import { PropertyFilterType } from '~/types'
-import { TeamMembershipLevel } from 'lib/constants'
-import { RestrictedArea, RestrictedComponentProps, RestrictionScope } from 'lib/components/RestrictedArea'
-import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers'
-import { DndContext } from '@dnd-kit/core'
-import { CSS } from '@dnd-kit/utilities'
+
+import { defaultDataTableColumns, extractExpressionComment, removeExpressionComment } from '../utils'
+import { columnConfiguratorLogic, ColumnConfiguratorLogicProps } from './columnConfiguratorLogic'
let uniqueNode = 0
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.test.ts b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.test.ts
index 66535ef3b3194..234e0b9d7a8ab 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.test.ts
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.test.ts
@@ -1,7 +1,9 @@
-import { columnConfiguratorLogic } from './columnConfiguratorLogic'
import { expectLogic } from 'kea-test-utils'
+
import { initKeaTests } from '~/test/init'
+import { columnConfiguratorLogic } from './columnConfiguratorLogic'
+
describe('columnConfiguratorLogic', () => {
let logic: ReturnType
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.tsx b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.tsx
index ee60a269a7968..8eac6b894c9e0 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.tsx
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/columnConfiguratorLogic.tsx
@@ -1,8 +1,10 @@
import { actions, kea, key, listeners, path, props, propsChanged, reducers } from 'kea'
-import type { columnConfiguratorLogicType } from './columnConfiguratorLogicType'
import { teamLogic } from 'scenes/teamLogic'
+
import { HOGQL_COLUMNS_KEY } from '~/queries/nodes/DataTable/defaultEventsQuery'
+import type { columnConfiguratorLogicType } from './columnConfiguratorLogicType'
+
export interface ColumnConfiguratorLogicProps {
key: string
columns: string[]
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.examples.ts b/frontend/src/queries/nodes/DataTable/DataTable.examples.ts
index 1c99e52230f42..6de2be61de591 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.examples.ts
+++ b/frontend/src/queries/nodes/DataTable/DataTable.examples.ts
@@ -1,6 +1,6 @@
+import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
import { DataTableNode, NodeKind, PersonsNode } from '~/queries/schema'
import { PropertyFilterType, PropertyOperator } from '~/types'
-import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
const AllDefaults: DataTableNode = {
kind: NodeKind.DataTableNode,
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.stories.tsx b/frontend/src/queries/nodes/DataTable/DataTable.stories.tsx
index 60072dd702ddb..64a978e45f95d 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.stories.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.stories.tsx
@@ -1,18 +1,20 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { Query } from '~/queries/Query/Query'
-import { examples } from './DataTable.examples'
+
import { mswDecorator } from '~/mocks/browser'
+import { Query } from '~/queries/Query/Query'
+
import events from '../DataNode/__mocks__/EventsNode.json'
import persons from '../DataNode/__mocks__/PersonsNode.json'
+import { examples } from './DataTable.examples'
type Story = StoryObj
const meta: Meta = {
title: 'Queries/DataTable',
component: Query,
+ tags: ['test-skip'],
parameters: {
layout: 'fullscreen',
viewMode: 'story',
- testOptions: { skip: true },
},
decorators: [
mswDecorator({
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
index a3942c2c5c459..b814b6112fb13 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -1,4 +1,44 @@
import './DataTable.scss'
+
+import clsx from 'clsx'
+import { BindLogic, useValues } from 'kea'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
+import { useCallback, useState } from 'react'
+import { EventDetails } from 'scenes/events/EventDetails'
+import { InsightEmptyState, InsightErrorState } from 'scenes/insights/EmptyStates'
+import { PersonDeleteModal } from 'scenes/persons/PersonDeleteModal'
+import { SessionPlayerModal } from 'scenes/session-recordings/player/modal/SessionPlayerModal'
+
+import { AutoLoad } from '~/queries/nodes/DataNode/AutoLoad'
+import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
+import { DateRange } from '~/queries/nodes/DataNode/DateRange'
+import { ElapsedTime } from '~/queries/nodes/DataNode/ElapsedTime'
+import { LoadNext } from '~/queries/nodes/DataNode/LoadNext'
+import { Reload } from '~/queries/nodes/DataNode/Reload'
+import { ColumnConfigurator } from '~/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator'
+import { DataTableExport } from '~/queries/nodes/DataTable/DataTableExport'
+import { dataTableLogic, DataTableLogicProps, DataTableRow } from '~/queries/nodes/DataTable/dataTableLogic'
+import { EventRowActions } from '~/queries/nodes/DataTable/EventRowActions'
+import { QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
+import { renderColumn } from '~/queries/nodes/DataTable/renderColumn'
+import { renderColumnMeta } from '~/queries/nodes/DataTable/renderColumnMeta'
+import { SavedQueries } from '~/queries/nodes/DataTable/SavedQueries'
+import {
+ extractExpressionComment,
+ getDataNodeDefaultColumns,
+ removeExpressionComment,
+} from '~/queries/nodes/DataTable/utils'
+import { EventName } from '~/queries/nodes/EventsNode/EventName'
+import { EventPropertyFilters } from '~/queries/nodes/EventsNode/EventPropertyFilters'
+import { HogQLQueryEditor } from '~/queries/nodes/HogQLQuery/HogQLQueryEditor'
+import { EditHogQLButton } from '~/queries/nodes/Node/EditHogQLButton'
+import { OpenEditorButton } from '~/queries/nodes/Node/OpenEditorButton'
+import { PersonPropertyFilters } from '~/queries/nodes/PersonsNode/PersonPropertyFilters'
+import { PersonsSearch } from '~/queries/nodes/PersonsNode/PersonsSearch'
import {
AnyResponseType,
DataTableNode,
@@ -9,27 +49,6 @@ import {
PersonsQuery,
} from '~/queries/schema'
import { QueryContext } from '~/queries/types'
-
-import { useCallback, useState } from 'react'
-import { BindLogic, useValues } from 'kea'
-import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
-import { EventName } from '~/queries/nodes/EventsNode/EventName'
-import { EventPropertyFilters } from '~/queries/nodes/EventsNode/EventPropertyFilters'
-import { EventDetails } from 'scenes/events/EventDetails'
-import { EventRowActions } from '~/queries/nodes/DataTable/EventRowActions'
-import { DataTableExport } from '~/queries/nodes/DataTable/DataTableExport'
-import { Reload } from '~/queries/nodes/DataNode/Reload'
-import { LoadNext } from '~/queries/nodes/DataNode/LoadNext'
-import { renderColumnMeta } from '~/queries/nodes/DataTable/renderColumnMeta'
-import { renderColumn } from '~/queries/nodes/DataTable/renderColumn'
-import { AutoLoad } from '~/queries/nodes/DataNode/AutoLoad'
-import { dataTableLogic, DataTableLogicProps, DataTableRow } from '~/queries/nodes/DataTable/dataTableLogic'
-import { ColumnConfigurator } from '~/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import clsx from 'clsx'
-import { SessionPlayerModal } from 'scenes/session-recordings/player/modal/SessionPlayerModal'
-import { OpenEditorButton } from '~/queries/nodes/Node/OpenEditorButton'
import {
isEventsQuery,
isHogQlAggregation,
@@ -38,25 +57,7 @@ import {
taxonomicEventFilterToHogQL,
taxonomicPersonFilterToHogQL,
} from '~/queries/utils'
-import { PersonPropertyFilters } from '~/queries/nodes/PersonsNode/PersonPropertyFilters'
-import { PersonsSearch } from '~/queries/nodes/PersonsNode/PersonsSearch'
-import { PersonDeleteModal } from 'scenes/persons/PersonDeleteModal'
-import { ElapsedTime } from '~/queries/nodes/DataNode/ElapsedTime'
-import { DateRange } from '~/queries/nodes/DataNode/DateRange'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import {
- extractExpressionComment,
- getDataNodeDefaultColumns,
- removeExpressionComment,
-} from '~/queries/nodes/DataTable/utils'
-import { InsightEmptyState, InsightErrorState } from 'scenes/insights/EmptyStates'
import { EventType } from '~/types'
-import { SavedQueries } from '~/queries/nodes/DataTable/SavedQueries'
-import { HogQLQueryEditor } from '~/queries/nodes/HogQLQuery/HogQLQueryEditor'
-import { QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
-import { EditHogQLButton } from '~/queries/nodes/Node/EditHogQLButton'
interface DataTableProps {
uniqueKey?: string | number
diff --git a/frontend/src/queries/nodes/DataTable/DataTableExport.tsx b/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
index 6965548e4afac..a1b04d60e6579 100644
--- a/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTableExport.tsx
@@ -1,23 +1,25 @@
-import Papa from 'papaparse'
-import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
-import { IconExport } from 'lib/lemon-ui/icons'
+import { LemonDivider, lemonToast } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
import { triggerExport } from 'lib/components/ExportButton/exporter'
-import { ExporterFormat } from '~/types'
-import { DataNode, DataTableNode, NodeKind } from '~/queries/schema'
+import { IconExport } from 'lib/lemon-ui/icons'
+import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
+import Papa from 'papaparse'
+import { asDisplay } from 'scenes/persons/person-utils'
+import { urls } from 'scenes/urls'
+
+import { ExportWithConfirmation } from '~/queries/nodes/DataTable/ExportWithConfirmation'
import {
defaultDataTableColumns,
extractExpressionComment,
removeExpressionComment,
} from '~/queries/nodes/DataTable/utils'
-import { isEventsQuery, isHogQLQuery, isPersonsNode } from '~/queries/utils'
import { getPersonsEndpoint } from '~/queries/query'
-import { ExportWithConfirmation } from '~/queries/nodes/DataTable/ExportWithConfirmation'
-import { DataTableRow, dataTableLogic } from './dataTableLogic'
-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/copyToClipboard'
+import { DataNode, DataTableNode, NodeKind } from '~/queries/schema'
+import { isEventsQuery, isHogQLQuery, isPersonsNode } from '~/queries/utils'
+import { ExporterFormat } from '~/types'
+
+import { dataTableLogic, DataTableRow } from './dataTableLogic'
const EXPORT_MAX_LIMIT = 10000
diff --git a/frontend/src/queries/nodes/DataTable/EventRowActions.tsx b/frontend/src/queries/nodes/DataTable/EventRowActions.tsx
index bcf63f7cb7eff..405691e4bcead 100644
--- a/frontend/src/queries/nodes/DataTable/EventRowActions.tsx
+++ b/frontend/src/queries/nodes/DataTable/EventRowActions.tsx
@@ -1,16 +1,17 @@
-import { EventType } from '~/types'
-import { More } from 'lib/lemon-ui/LemonButton/More'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { createActionFromEvent } from 'scenes/events/createActionFromEvent'
-import { urls } from 'scenes/urls'
-import { getCurrentTeamId } from 'lib/utils/logics'
-import { teamLogic } from 'scenes/teamLogic'
-import { IconLink, IconPlayCircle } from 'lib/lemon-ui/icons'
import { useActions } from 'kea'
-import { sessionPlayerModalLogic } from 'scenes/session-recordings/player/modal/sessionPlayerModalLogic'
-import { copyToClipboard } from 'lib/utils/copyToClipboard'
import { dayjs } from 'lib/dayjs'
+import { IconLink, IconPlayCircle } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { More } from 'lib/lemon-ui/LemonButton/More'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
+import { getCurrentTeamId } from 'lib/utils/logics'
+import { createActionFromEvent } from 'scenes/events/createActionFromEvent'
import { insightUrlForEvent } from 'scenes/insights/utils'
+import { sessionPlayerModalLogic } from 'scenes/session-recordings/player/modal/sessionPlayerModalLogic'
+import { teamLogic } from 'scenes/teamLogic'
+import { urls } from 'scenes/urls'
+
+import { EventType } from '~/types'
interface EventActionProps {
event: EventType
diff --git a/frontend/src/queries/nodes/DataTable/SavedQueries.tsx b/frontend/src/queries/nodes/DataTable/SavedQueries.tsx
index 15dc608ebf9ad..84e32452258f3 100644
--- a/frontend/src/queries/nodes/DataTable/SavedQueries.tsx
+++ b/frontend/src/queries/nodes/DataTable/SavedQueries.tsx
@@ -1,9 +1,10 @@
-import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
-import { DataTableNode } from '~/queries/schema'
import equal from 'fast-deep-equal'
import { useValues } from 'kea'
+import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
import { teamLogic } from 'scenes/teamLogic'
+
import { getEventsQueriesForTeam } from '~/queries/nodes/DataTable/defaultEventsQuery'
+import { DataTableNode } from '~/queries/schema'
interface SavedQueriesProps {
query: DataTableNode
diff --git a/frontend/src/queries/nodes/DataTable/dataTableLogic.test.ts b/frontend/src/queries/nodes/DataTable/dataTableLogic.test.ts
index bc87b07c458b4..d37c26c2df1c9 100644
--- a/frontend/src/queries/nodes/DataTable/dataTableLogic.test.ts
+++ b/frontend/src/queries/nodes/DataTable/dataTableLogic.test.ts
@@ -1,10 +1,11 @@
-import { initKeaTests } from '~/test/init'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { expectLogic, partial } from 'kea-test-utils'
-import { dataTableLogic } from '~/queries/nodes/DataTable/dataTableLogic'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+
import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { DataTableNode, NodeKind } from '~/queries/schema'
+import { dataTableLogic } from '~/queries/nodes/DataTable/dataTableLogic'
import { query } from '~/queries/query'
+import { DataTableNode, NodeKind } from '~/queries/schema'
+import { initKeaTests } from '~/test/init'
jest.mock('~/queries/query')
diff --git a/frontend/src/queries/nodes/DataTable/dataTableLogic.ts b/frontend/src/queries/nodes/DataTable/dataTableLogic.ts
index cb4463a1ee400..264f7145e50e8 100644
--- a/frontend/src/queries/nodes/DataTable/dataTableLogic.ts
+++ b/frontend/src/queries/nodes/DataTable/dataTableLogic.ts
@@ -1,5 +1,12 @@
+import equal from 'fast-deep-equal'
import { actions, connect, kea, key, path, props, propsChanged, reducers, selectors } from 'kea'
-import type { dataTableLogicType } from './dataTableLogicType'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { dayjs } from 'lib/dayjs'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { objectsEqual, sortedKeys } from 'lib/utils'
+
+import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
+import { getQueryFeatures, QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
import {
AnyDataNode,
DataTableNode,
@@ -9,15 +16,10 @@ import {
TimeToSeeDataSessionsQuery,
} from '~/queries/schema'
import { QueryContext } from '~/queries/types'
-import { getColumnsForQuery, removeExpressionComment } from './utils'
-import { objectsEqual, sortedKeys } from 'lib/utils'
import { isDataTableNode, isEventsQuery } from '~/queries/utils'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
-import { dayjs } from 'lib/dayjs'
-import equal from 'fast-deep-equal'
-import { getQueryFeatures, QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
+
+import type { dataTableLogicType } from './dataTableLogicType'
+import { getColumnsForQuery, removeExpressionComment } from './utils'
export interface DataTableLogicProps {
vizKey: string
diff --git a/frontend/src/queries/nodes/DataTable/defaultEventsQuery.ts b/frontend/src/queries/nodes/DataTable/defaultEventsQuery.ts
index 4820fe7d578c4..8b027b285b4fc 100644
--- a/frontend/src/queries/nodes/DataTable/defaultEventsQuery.ts
+++ b/frontend/src/queries/nodes/DataTable/defaultEventsQuery.ts
@@ -1,7 +1,8 @@
-import { TeamType } from '~/types'
-import { EventsQuery, NodeKind } from '~/queries/schema'
import { getDefaultEventsSceneQuery } from 'scenes/events/defaults'
+
+import { EventsQuery, NodeKind } from '~/queries/schema'
import { escapePropertyAsHogQlIdentifier } from '~/queries/utils'
+import { TeamType } from '~/types'
/** Indicates HogQL usage if team.live_events_columns = [HOGQL_COLUMNS_KEY, ...] */
export const HOGQL_COLUMNS_KEY = '--v2:hogql'
diff --git a/frontend/src/queries/nodes/DataTable/queryFeatures.ts b/frontend/src/queries/nodes/DataTable/queryFeatures.ts
index 8fe11b2b7aae6..4c2b4202ea539 100644
--- a/frontend/src/queries/nodes/DataTable/queryFeatures.ts
+++ b/frontend/src/queries/nodes/DataTable/queryFeatures.ts
@@ -1,3 +1,4 @@
+import { Node } from '~/queries/schema'
import {
isEventsQuery,
isHogQLQuery,
@@ -7,7 +8,6 @@ import {
isWebStatsTableQuery,
isWebTopClicksQuery,
} from '~/queries/utils'
-import { Node } from '~/queries/schema'
export enum QueryFeature {
columnsInResponse,
diff --git a/frontend/src/queries/nodes/DataTable/renderColumn.tsx b/frontend/src/queries/nodes/DataTable/renderColumn.tsx
index 7333f6f42fcca..846283c4cbfbb 100644
--- a/frontend/src/queries/nodes/DataTable/renderColumn.tsx
+++ b/frontend/src/queries/nodes/DataTable/renderColumn.tsx
@@ -1,14 +1,22 @@
-import { AnyPropertyFilter, EventType, PersonType, PropertyFilterType, PropertyOperator } from '~/types'
-import { autoCaptureEventToDescription } from 'lib/utils'
+import ReactJson from '@microlink/react-json-view'
+import { combineUrl, router } from 'kea-router'
+import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
+import { Property } from 'lib/components/Property'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { Link } from 'lib/lemon-ui/Link'
import { TZLabel } from 'lib/components/TZLabel'
-import { Property } from 'lib/components/Property'
-import { urls } from 'scenes/urls'
+import { TableCellSparkline } from 'lib/lemon-ui/LemonTable/TableCellSparkline'
+import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
+import { Link } from 'lib/lemon-ui/Link'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { autoCaptureEventToDescription } from 'lib/utils'
import { PersonDisplay, PersonDisplayProps } from 'scenes/persons/PersonDisplay'
+import { urls } from 'scenes/urls'
+
+import { errorColumn, loadingColumn } from '~/queries/nodes/DataTable/dataTableLogic'
+import { DeletePersonButton } from '~/queries/nodes/PersonsNode/DeletePersonButton'
import { DataTableNode, EventsQueryPersonColumn, HasPropertiesNode } from '~/queries/schema'
import { QueryContext } from '~/queries/types'
-
import {
isEventsQuery,
isHogQLQuery,
@@ -17,15 +25,7 @@ import {
isTimeToSeeDataSessionsQuery,
trimQuotes,
} from '~/queries/utils'
-import { combineUrl, router } from 'kea-router'
-import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
-import { DeletePersonButton } from '~/queries/nodes/PersonsNode/DeletePersonButton'
-import ReactJson from '@microlink/react-json-view'
-import { errorColumn, loadingColumn } from '~/queries/nodes/DataTable/dataTableLogic'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { TableCellSparkline } from 'lib/lemon-ui/LemonTable/TableCellSparkline'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { AnyPropertyFilter, EventType, PersonType, PropertyFilterType, PropertyOperator } from '~/types'
export function renderColumn(
key: string,
diff --git a/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx b/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx
index f73466611bad4..06d31f17df12f 100644
--- a/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx
+++ b/frontend/src/queries/nodes/DataTable/renderColumnMeta.tsx
@@ -1,12 +1,12 @@
-import { PropertyFilterType } from '~/types'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { SortingIndicator } from 'lib/lemon-ui/LemonTable/sorting'
+
+import { getQueryFeatures, QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
+import { extractExpressionComment } from '~/queries/nodes/DataTable/utils'
import { DataTableNode, EventsQuery } from '~/queries/schema'
import { QueryContext } from '~/queries/types'
-
import { isHogQLQuery, trimQuotes } from '~/queries/utils'
-import { extractExpressionComment } from '~/queries/nodes/DataTable/utils'
-import { SortingIndicator } from 'lib/lemon-ui/LemonTable/sorting'
-import { getQueryFeatures, QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
+import { PropertyFilterType } from '~/types'
export interface ColumnMeta {
title?: JSX.Element | string
diff --git a/frontend/src/queries/nodes/DataTable/utils.ts b/frontend/src/queries/nodes/DataTable/utils.ts
index 94c196c2afe07..64ab750ec8b00 100644
--- a/frontend/src/queries/nodes/DataTable/utils.ts
+++ b/frontend/src/queries/nodes/DataTable/utils.ts
@@ -1,5 +1,5 @@
-import { DataNode, DataTableNode, EventsQuery, HogQLExpression, NodeKind } from '~/queries/schema'
import { getQueryFeatures, QueryFeature } from '~/queries/nodes/DataTable/queryFeatures'
+import { DataNode, DataTableNode, EventsQuery, HogQLExpression, NodeKind } from '~/queries/schema'
export const defaultDataTableEventColumns: HogQLExpression[] = [
'*',
diff --git a/frontend/src/queries/nodes/EventsNode/EventName.tsx b/frontend/src/queries/nodes/EventsNode/EventName.tsx
index 50351d57eaf3c..a6cb81111d20c 100644
--- a/frontend/src/queries/nodes/EventsNode/EventName.tsx
+++ b/frontend/src/queries/nodes/EventsNode/EventName.tsx
@@ -1,6 +1,7 @@
-import { EventsNode, EventsQuery } from '~/queries/schema'
import { LemonEventName } from 'scenes/actions/EventName'
+import { EventsNode, EventsQuery } from '~/queries/schema'
+
interface EventNameProps {
query: EventsNode | EventsQuery
setQuery?: (query: EventsNode | EventsQuery) => void
diff --git a/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx b/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx
index d7dc068310111..6337cd2e474a7 100644
--- a/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx
+++ b/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx
@@ -1,9 +1,10 @@
-import { EventsNode, EventsQuery, HogQLQuery } from '~/queries/schema'
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
-import { AnyPropertyFilter } from '~/types'
-import { useState } from 'react'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { useState } from 'react'
+
+import { EventsNode, EventsQuery, HogQLQuery } from '~/queries/schema'
import { isHogQLQuery } from '~/queries/utils'
+import { AnyPropertyFilter } from '~/types'
interface EventPropertyFiltersProps {
query: EventsNode | EventsQuery | HogQLQuery
diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
index e8e8c16035ea4..bc7bb2e4f8bfd 100644
--- a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
+++ b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -1,19 +1,21 @@
-import { useActions, useValues } from 'kea'
-import { HogQLQuery } from '~/queries/schema'
-import { useEffect, useRef, useState } from 'react'
-import { hogQLQueryEditorLogic } from './hogQLQueryEditorLogic'
import { Monaco } from '@monaco-editor/react'
-import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
-import { IconAutoAwesome, IconInfo } from 'lib/lemon-ui/icons'
import { LemonInput, Link } from '@posthog/lemon-ui'
-import { urls } from 'scenes/urls'
-import type { IDisposable, editor as importedEditor, languages } from 'monaco-editor'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
+import { CodeEditor } from 'lib/components/CodeEditors'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { FEATURE_FLAGS } from 'lib/constants'
+import { IconAutoAwesome, IconInfo } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { CodeEditor } from 'lib/components/CodeEditors'
-import clsx from 'clsx'
+import type { editor as importedEditor, IDisposable, languages } from 'monaco-editor'
+import { useEffect, useRef, useState } from 'react'
+import { urls } from 'scenes/urls'
+
+import { HogQLQuery } from '~/queries/schema'
+
+import { hogQLQueryEditorLogic } from './hogQLQueryEditorLogic'
export interface HogQLQueryEditorProps {
query: HogQLQuery
diff --git a/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts b/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts
index 31d49a241a5e5..f64615df762e2 100644
--- a/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts
+++ b/frontend/src/queries/nodes/HogQLQuery/hogQLQueryEditorLogic.ts
@@ -1,6 +1,8 @@
+import type { Monaco } from '@monaco-editor/react'
import { actions, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
-import { HogQLMetadata, HogQLNotice, HogQLQuery, NodeKind } from '~/queries/schema'
-import type { hogQLQueryEditorLogicType } from './hogQLQueryEditorLogicType'
+import { combineUrl } from 'kea-router'
+import api from 'lib/api'
+import { promptLogic } from 'lib/logic/promptLogic'
// Note: we can oly import types and not values from monaco-editor, because otherwise some Monaco code breaks
// auto reload in development. Specifically, on this line:
// `export const suggestWidgetStatusbarMenu = new MenuId('suggestWidgetStatusBar')`
@@ -9,13 +11,13 @@ import type { hogQLQueryEditorLogicType } from './hogQLQueryEditorLogicType'
// esbuild doesn't support manual chunks as of 2023, so we can't just put Monaco in its own chunk, which would prevent
// re-importing. As for @monaco-editor/react, it does some lazy loading and doesn't have this problem.
import type { editor, MarkerSeverity } from 'monaco-editor'
-import { query } from '~/queries/query'
-import type { Monaco } from '@monaco-editor/react'
-import api from 'lib/api'
-import { combineUrl } from 'kea-router'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { dataWarehouseSavedQueriesLogic } from 'scenes/data-warehouse/saved_queries/dataWarehouseSavedQueriesLogic'
-import { promptLogic } from 'lib/logic/promptLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import { query } from '~/queries/query'
+import { HogQLMetadata, HogQLNotice, HogQLQuery, NodeKind } from '~/queries/schema'
+
+import type { hogQLQueryEditorLogicType } from './hogQLQueryEditorLogicType'
export interface ModelMarker extends editor.IMarkerData {
hogQLFix?: string
diff --git a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts
index 30af701ae91a1..ac9ebba3bc553 100644
--- a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts
+++ b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts
@@ -1,40 +1,42 @@
import { FunnelLayout, ShownAsValue } from 'lib/constants'
+
import {
- InsightQueryNode,
- TrendsQuery,
FunnelsQuery,
- RetentionQuery,
- StickinessQuery,
+ InsightQueryNode,
LifecycleQuery,
NodeKind,
PathsQuery,
+ RetentionQuery,
+ StickinessQuery,
+ TrendsQuery,
} from '~/queries/schema'
import {
- TrendsFilterType,
- RetentionFilterType,
- FunnelsFilterType,
- PathsFilterType,
- StickinessFilterType,
- LifecycleFilterType,
ActionFilter,
BaseMathType,
+ BreakdownAttributionType,
ChartDisplayType,
FilterLogicalOperator,
FilterType,
+ FunnelConversionWindowTimeUnit,
+ FunnelPathType,
+ FunnelsFilterType,
+ FunnelStepReference,
+ FunnelVizType,
+ GroupMathType,
InsightType,
+ LifecycleFilterType,
+ PathsFilterType,
+ PathType,
PropertyFilterType,
PropertyMathType,
PropertyOperator,
- FunnelVizType,
- FunnelStepReference,
- BreakdownAttributionType,
- FunnelConversionWindowTimeUnit,
- StepOrderValue,
- PathType,
- FunnelPathType,
+ RetentionFilterType,
RetentionPeriod,
- GroupMathType,
+ StepOrderValue,
+ StickinessFilterType,
+ TrendsFilterType,
} from '~/types'
+
import {
actionsAndEventsToSeries,
cleanHiddenLegendIndexes,
diff --git a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts
index 93f5339cc929b..3b0f0fad4aadb 100644
--- a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts
+++ b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts
@@ -1,33 +1,34 @@
+import * as Sentry from '@sentry/react'
+import { objectCleanWithEmpty } from 'lib/utils'
+import { transformLegacyHiddenLegendKeys } from 'scenes/funnels/funnelUtils'
+import {
+ isFunnelsFilter,
+ isLifecycleFilter,
+ isPathsFilter,
+ isRetentionFilter,
+ isStickinessFilter,
+ isTrendsFilter,
+} from 'scenes/insights/sharedUtils'
+
import {
- InsightQueryNode,
- EventsNode,
ActionsNode,
- NodeKind,
+ EventsNode,
InsightNodeKind,
+ InsightQueryNode,
InsightsQueryBase,
+ NodeKind,
} from '~/queries/schema'
-import { FilterType, InsightType, ActionFilter } from '~/types'
import {
- isTrendsQuery,
isFunnelsQuery,
- isRetentionQuery,
- isPathsQuery,
- isStickinessQuery,
- isLifecycleQuery,
isInsightQueryWithBreakdown,
isInsightQueryWithSeries,
+ isLifecycleQuery,
+ isPathsQuery,
+ isRetentionQuery,
+ isStickinessQuery,
+ isTrendsQuery,
} from '~/queries/utils'
-import {
- isTrendsFilter,
- isFunnelsFilter,
- isRetentionFilter,
- isPathsFilter,
- isStickinessFilter,
- isLifecycleFilter,
-} from 'scenes/insights/sharedUtils'
-import { objectCleanWithEmpty } from 'lib/utils'
-import { transformLegacyHiddenLegendKeys } from 'scenes/funnels/funnelUtils'
-import * as Sentry from '@sentry/react'
+import { ActionFilter, FilterType, InsightType } from '~/types'
const reverseInsightMap: Record, InsightNodeKind> = {
[InsightType.TRENDS]: NodeKind.TrendsQuery,
diff --git a/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.test.ts b/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.test.ts
index e6d9bb0eccdb5..eca66074d0f9f 100644
--- a/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.test.ts
+++ b/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.test.ts
@@ -1,6 +1,6 @@
import { hiddenLegendItemsToKeys, queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
-import { InsightType, LifecycleFilterType } from '~/types'
import { LifecycleQuery, NodeKind } from '~/queries/schema'
+import { InsightType, LifecycleFilterType } from '~/types'
describe('queryNodeToFilter', () => {
test('converts a query node to a filter', () => {
diff --git a/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts b/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts
index 03d904476be9a..cd6a6a2848b9a 100644
--- a/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts
+++ b/frontend/src/queries/nodes/InsightQuery/utils/queryNodeToFilter.ts
@@ -1,5 +1,7 @@
+import { objectClean } from 'lib/utils'
+import { isFunnelsFilter, isLifecycleFilter, isStickinessFilter, isTrendsFilter } from 'scenes/insights/sharedUtils'
+
import { ActionsNode, BreakdownFilter, EventsNode, InsightNodeKind, InsightQueryNode, NodeKind } from '~/queries/schema'
-import { ActionFilter, EntityTypes, FilterType, InsightType } from '~/types'
import {
isActionsNode,
isEventsNode,
@@ -10,8 +12,7 @@ import {
isStickinessQuery,
isTrendsQuery,
} from '~/queries/utils'
-import { objectClean } from 'lib/utils'
-import { isFunnelsFilter, isLifecycleFilter, isStickinessFilter, isTrendsFilter } from 'scenes/insights/sharedUtils'
+import { ActionFilter, EntityTypes, FilterType, InsightType } from '~/types'
type FilterTypeActionsAndEvents = { events?: ActionFilter[]; actions?: ActionFilter[]; new_entity?: ActionFilter[] }
diff --git a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx
index 9366b7b2ff2a6..c1aa833f34910 100644
--- a/frontend/src/queries/nodes/InsightViz/Breakdown.tsx
+++ b/frontend/src/queries/nodes/InsightViz/Breakdown.tsx
@@ -1,8 +1,9 @@
import { useActions, useValues } from 'kea'
-import { EditorFilterProps } from '~/types'
import { TaxonomicBreakdownFilter } from 'scenes/insights/filters/BreakdownFilter/TaxonomicBreakdownFilter'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { EditorFilterProps } from '~/types'
+
export function Breakdown({ insightProps }: EditorFilterProps): JSX.Element {
const { breakdown, display, isTrends } = useValues(insightVizDataLogic(insightProps))
const { updateBreakdown, updateDisplay } = useActions(insightVizDataLogic(insightProps))
diff --git a/frontend/src/queries/nodes/InsightViz/ComputationTimeWithRefresh.tsx b/frontend/src/queries/nodes/InsightViz/ComputationTimeWithRefresh.tsx
index 65c8dca84247e..be5b3044e2297 100644
--- a/frontend/src/queries/nodes/InsightViz/ComputationTimeWithRefresh.tsx
+++ b/frontend/src/queries/nodes/InsightViz/ComputationTimeWithRefresh.tsx
@@ -1,12 +1,11 @@
+import { Link } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-
import { dayjs } from 'lib/dayjs'
import { usePeriodicRerender } from 'lib/hooks/usePeriodicRerender'
-
-import { insightLogic } from 'scenes/insights/insightLogic'
import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
import { dataNodeLogic } from '../DataNode/dataNodeLogic'
-import { Link } from '@posthog/lemon-ui'
export function ComputationTimeWithRefresh({ disableRefresh }: { disableRefresh?: boolean }): JSX.Element | null {
const { lastRefresh, response } = useValues(dataNodeLogic)
diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx
index 2dd91a9794077..039325e488621 100644
--- a/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx
+++ b/frontend/src/queries/nodes/InsightViz/EditorFilterGroup.tsx
@@ -1,13 +1,14 @@
-import { Fragment, useState } from 'react'
-import type { InsightLogicProps, InsightModel, InsightEditorFilterGroup } from '~/types'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import './EditorFilterGroup.scss'
+
+import { PureField } from 'lib/forms/Field'
import { IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
-import { slugify } from 'lib/utils'
import { LemonBadge } from 'lib/lemon-ui/LemonBadge/LemonBadge'
-import { PureField } from 'lib/forms/Field'
-import { InsightQueryNode } from '~/queries/schema'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { slugify } from 'lib/utils'
+import { Fragment, useState } from 'react'
-import './EditorFilterGroup.scss'
+import { InsightQueryNode } from '~/queries/schema'
+import type { InsightEditorFilterGroup, InsightLogicProps, InsightModel } from '~/types'
export interface EditorFilterGroupProps {
editorFilterGroup: InsightEditorFilterGroup
diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
index fce497328f8ef..6c82cf18612f6 100644
--- a/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/EditorFilters.tsx
@@ -1,44 +1,43 @@
-import { CSSTransition } from 'react-transition-group'
+import './EditorFilters.scss'
+
+import { LemonBanner, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useValues } from 'kea'
+import { NON_BREAKDOWN_DISPLAY_TYPES } from 'lib/constants'
+import { CSSTransition } from 'react-transition-group'
+import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { Attribution } from 'scenes/insights/EditorFilters/AttributionFilter'
+import { FunnelsAdvanced } from 'scenes/insights/EditorFilters/FunnelsAdvanced'
+import { FunnelsQuerySteps } from 'scenes/insights/EditorFilters/FunnelsQuerySteps'
+import { PathsAdvanced } from 'scenes/insights/EditorFilters/PathsAdvanced'
+import { PathsEventsTypes } from 'scenes/insights/EditorFilters/PathsEventTypes'
+import { PathsExclusions } from 'scenes/insights/EditorFilters/PathsExclusions'
+import { PathsHogQL } from 'scenes/insights/EditorFilters/PathsHogQL'
+import { PathsTargetEnd, PathsTargetStart } from 'scenes/insights/EditorFilters/PathsTarget'
+import { PathsWildcardGroups } from 'scenes/insights/EditorFilters/PathsWildcardGroups'
+import { RetentionSummary } from 'scenes/insights/EditorFilters/RetentionSummary'
+import { SamplingFilter } from 'scenes/insights/EditorFilters/SamplingFilter'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { userLogic } from 'scenes/userLogic'
+import { InsightQueryNode } from '~/queries/schema'
import {
- InsightEditorFilterGroup,
- InsightEditorFilter,
- EditorFilterProps,
- ChartDisplayType,
AvailableFeature,
+ ChartDisplayType,
+ EditorFilterProps,
+ InsightEditorFilter,
+ InsightEditorFilterGroup,
PathType,
} from '~/types'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { userLogic } from 'scenes/userLogic'
-import { NON_BREAKDOWN_DISPLAY_TYPES } from 'lib/constants'
-import { InsightQueryNode } from '~/queries/schema'
+import { Breakdown } from './Breakdown'
import { EditorFilterGroup } from './EditorFilterGroup'
-import { LifecycleToggles } from './LifecycleToggles'
import { GlobalAndOrFilters } from './GlobalAndOrFilters'
+import { LifecycleToggles } from './LifecycleToggles'
+import { TrendsFormula } from './TrendsFormula'
import { TrendsSeries } from './TrendsSeries'
import { TrendsSeriesLabel } from './TrendsSeriesLabel'
-import { TrendsFormula } from './TrendsFormula'
-import { Breakdown } from './Breakdown'
-import { PathsEventsTypes } from 'scenes/insights/EditorFilters/PathsEventTypes'
-import { PathsTargetEnd, PathsTargetStart } from 'scenes/insights/EditorFilters/PathsTarget'
-import { PathsExclusions } from 'scenes/insights/EditorFilters/PathsExclusions'
-import { PathsWildcardGroups } from 'scenes/insights/EditorFilters/PathsWildcardGroups'
-import { PathsAdvanced } from 'scenes/insights/EditorFilters/PathsAdvanced'
-import { FunnelsQuerySteps } from 'scenes/insights/EditorFilters/FunnelsQuerySteps'
-import { Attribution } from 'scenes/insights/EditorFilters/AttributionFilter'
-import { FunnelsAdvanced } from 'scenes/insights/EditorFilters/FunnelsAdvanced'
-import { RetentionSummary } from 'scenes/insights/EditorFilters/RetentionSummary'
-import { SamplingFilter } from 'scenes/insights/EditorFilters/SamplingFilter'
-
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-
-import './EditorFilters.scss'
-import { PathsHogQL } from 'scenes/insights/EditorFilters/PathsHogQL'
-import { LemonBanner, Link } from '@posthog/lemon-ui'
export interface EditorFiltersProps {
query: InsightQueryNode
diff --git a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
index 4ac27f78933e1..97de109870bc6 100644
--- a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
@@ -1,14 +1,16 @@
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { PropertyGroupFilters } from './PropertyGroupFilters/PropertyGroupFilters'
import { useActions, useValues } from 'kea'
-import { groupsModel } from '~/models/groupsModel'
-import { actionsModel } from '~/models/actionsModel'
-import { getAllEventNames } from './utils'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import { EditorFilterProps } from '~/types'
-import { StickinessQuery, TrendsQuery } from '~/queries/schema'
import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { actionsModel } from '~/models/actionsModel'
+import { groupsModel } from '~/models/groupsModel'
+import { StickinessQuery, TrendsQuery } from '~/queries/schema'
+import { EditorFilterProps } from '~/types'
+
+import { PropertyGroupFilters } from './PropertyGroupFilters/PropertyGroupFilters'
+import { getAllEventNames } from './utils'
+
export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Element {
const { actions: allActions } = useValues(actionsModel)
const { groupsTaxonomicTypes } = useValues(groupsModel)
diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
index 37772a3c233e5..34490c40427a9 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
@@ -1,31 +1,30 @@
-import { ReactNode } from 'react'
+import { LemonButton } from '@posthog/lemon-ui'
import { useValues } from 'kea'
-
-import { insightLogic } from 'scenes/insights/insightLogic'
-
-import { InsightDateFilter } from 'scenes/insights/filters/InsightDateFilter'
+import { ChartFilter } from 'lib/components/ChartFilter'
+import { CompareFilter } from 'lib/components/CompareFilter/CompareFilter'
import { IntervalFilter } from 'lib/components/IntervalFilter'
import { SmoothingFilter } from 'lib/components/SmoothingFilter/SmoothingFilter'
-import { RetentionDatePicker } from 'scenes/insights/RetentionDatePicker'
-import { RetentionReferencePicker } from 'scenes/insights/filters/RetentionReferencePicker'
-import { PathStepPicker } from 'scenes/insights/views/Paths/PathStepPicker'
-import { CompareFilter } from 'lib/components/CompareFilter/CompareFilter'
import { UnitPicker } from 'lib/components/UnitPicker/UnitPicker'
-import { ChartFilter } from 'lib/components/ChartFilter'
-import { FunnelDisplayLayoutPicker } from 'scenes/insights/views/Funnels/FunnelDisplayLayoutPicker'
-import { FunnelBinsPicker } from 'scenes/insights/views/Funnels/FunnelBinsPicker'
-import { ValueOnSeriesFilter } from 'scenes/insights/EditorFilters/ValueOnSeriesFilter'
-import { PercentStackViewFilter } from 'scenes/insights/EditorFilters/PercentStackViewFilter'
-import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
+import { FEATURE_FLAGS, NON_TIME_SERIES_DISPLAY_TYPES } from 'lib/constants'
import { LemonMenu, LemonMenuItems } from 'lib/lemon-ui/LemonMenu'
-import { LemonButton } from '@posthog/lemon-ui'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { ReactNode } from 'react'
+import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
import { axisLabel } from 'scenes/insights/aggregationAxisFormat'
-import { ChartDisplayType } from '~/types'
+import { PercentStackViewFilter } from 'scenes/insights/EditorFilters/PercentStackViewFilter'
import { ShowLegendFilter } from 'scenes/insights/EditorFilters/ShowLegendFilter'
-import { FEATURE_FLAGS, NON_TIME_SERIES_DISPLAY_TYPES } from 'lib/constants'
+import { ValueOnSeriesFilter } from 'scenes/insights/EditorFilters/ValueOnSeriesFilter'
+import { InsightDateFilter } from 'scenes/insights/filters/InsightDateFilter'
+import { RetentionReferencePicker } from 'scenes/insights/filters/RetentionReferencePicker'
+import { insightLogic } from 'scenes/insights/insightLogic'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { RetentionDatePicker } from 'scenes/insights/RetentionDatePicker'
+import { FunnelBinsPicker } from 'scenes/insights/views/Funnels/FunnelBinsPicker'
+import { FunnelDisplayLayoutPicker } from 'scenes/insights/views/Funnels/FunnelDisplayLayoutPicker'
+import { PathStepPicker } from 'scenes/insights/views/Paths/PathStepPicker'
+import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
+
+import { ChartDisplayType } from '~/types'
export function InsightDisplayConfig(): JSX.Element {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/queries/nodes/InsightViz/InsightResultMetadata.tsx b/frontend/src/queries/nodes/InsightViz/InsightResultMetadata.tsx
index 66c84ac6f1a46..93c353f21704e 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightResultMetadata.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightResultMetadata.tsx
@@ -1,5 +1,4 @@
import { useValues } from 'kea'
-
import { insightLogic } from 'scenes/insights/insightLogic'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx
index 067002682f68f..10d8e1c745f08 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightViz.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightViz.tsx
@@ -1,24 +1,23 @@
-import { BindLogic, useValues } from 'kea'
-import clsx from 'clsx'
+import './InsightViz.scss'
+import clsx from 'clsx'
+import { BindLogic, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
+import { useState } from 'react'
import { insightLogic } from 'scenes/insights/insightLogic'
import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
-import { isFunnelsQuery } from '~/queries/utils'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
-import { dataNodeLogic, DataNodeLogicProps } from '../DataNode/dataNodeLogic'
import { InsightVizNode } from '~/queries/schema'
import { QueryContext } from '~/queries/types'
+import { isFunnelsQuery } from '~/queries/utils'
+import { InsightLogicProps, ItemMode } from '~/types'
-import { InsightVizDisplay } from './InsightVizDisplay'
+import { dataNodeLogic, DataNodeLogicProps } from '../DataNode/dataNodeLogic'
import { EditorFilters } from './EditorFilters'
-import { InsightLogicProps, ItemMode } from '~/types'
-import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { InsightVizDisplay } from './InsightVizDisplay'
import { getCachedResults } from './utils'
-import { useState } from 'react'
-
-import './InsightViz.scss'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
/** The key for the dataNodeLogic mounted by an InsightViz for insight of insightProps */
export const insightVizDataNodeKey = (insightProps: InsightLogicProps): string => {
diff --git a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
index 5c726071e38a5..e948254cfc16d 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
+++ b/frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx
@@ -1,23 +1,13 @@
+import clsx from 'clsx'
import { useValues } from 'kea'
-
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { insightDataLogic } from 'scenes/insights/insightDataLogic'
-import { insightNavLogic } from 'scenes/insights/InsightNav/insightNavLogic'
-
-import { QueryContext } from '~/queries/types'
-import { ChartDisplayType, ExporterFormat, FunnelVizType, InsightType, ItemMode } from '~/types'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { Animation } from 'lib/components/Animation/Animation'
import { AnimationType } from 'lib/animations/animations'
+import { Animation } from 'lib/components/Animation/Animation'
import { ExportButton } from 'lib/components/ExportButton/ExportButton'
-
-import { InsightDisplayConfig } from './InsightDisplayConfig'
+import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { Funnel } from 'scenes/funnels/Funnel'
import { FunnelCanvasLabel } from 'scenes/funnels/FunnelCanvasLabel'
-import { TrendInsight } from 'scenes/trends/Trends'
-import { RetentionContainer } from 'scenes/retention/RetentionContainer'
-import { Paths } from 'scenes/paths/Paths'
-import { InsightsTable } from 'scenes/insights/views/InsightsTable/InsightsTable'
+import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
import {
FunnelInvalidExclusionState,
FunnelSingleStepState,
@@ -25,14 +15,23 @@ import {
InsightErrorState,
InsightTimeoutState,
} from 'scenes/insights/EmptyStates'
-import { PathCanvasLabel } from 'scenes/paths/PathsLabel'
-import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
-import { FunnelStepsTable } from 'scenes/insights/views/Funnels/FunnelStepsTable'
+import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { insightNavLogic } from 'scenes/insights/InsightNav/insightNavLogic'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { FunnelCorrelation } from 'scenes/insights/views/Funnels/FunnelCorrelation'
+import { FunnelStepsTable } from 'scenes/insights/views/Funnels/FunnelStepsTable'
+import { InsightsTable } from 'scenes/insights/views/InsightsTable/InsightsTable'
+import { Paths } from 'scenes/paths/Paths'
+import { PathCanvasLabel } from 'scenes/paths/PathsLabel'
+import { RetentionContainer } from 'scenes/retention/RetentionContainer'
+import { TrendInsight } from 'scenes/trends/Trends'
+
+import { QueryContext } from '~/queries/types'
+import { ChartDisplayType, ExporterFormat, FunnelVizType, InsightType, ItemMode } from '~/types'
+
+import { InsightDisplayConfig } from './InsightDisplayConfig'
import { InsightResultMetadata } from './InsightResultMetadata'
-import clsx from 'clsx'
-import { Funnel } from 'scenes/funnels/Funnel'
export function InsightVizDisplay({
disableHeader,
diff --git a/frontend/src/queries/nodes/InsightViz/LifecycleToggles.tsx b/frontend/src/queries/nodes/InsightViz/LifecycleToggles.tsx
index 311f9563cd33b..04ff9cd56e709 100644
--- a/frontend/src/queries/nodes/InsightViz/LifecycleToggles.tsx
+++ b/frontend/src/queries/nodes/InsightViz/LifecycleToggles.tsx
@@ -1,9 +1,10 @@
-import { LifecycleFilter } from '~/queries/schema'
-import { EditorFilterProps, LifecycleToggle } from '~/types'
import { LemonCheckbox, LemonLabel } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { LifecycleFilter } from '~/queries/schema'
+import { EditorFilterProps, LifecycleToggle } from '~/types'
+
const lifecycles: { name: LifecycleToggle; tooltip: string; color: string }[] = [
{
name: 'new',
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.stories.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.stories.tsx
index 69799198d8bdc..a1ddc6d8a9942 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.stories.tsx
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.stories.tsx
@@ -1,5 +1,6 @@
-import { useState } from 'react'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
import { FilterLogicalOperator } from '~/types'
import { AndOrFilterSelect } from './AndOrFilterSelect'
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
index 2e9407f39ac25..b6583793f1523 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
@@ -1,4 +1,5 @@
import { LemonSelect } from '@posthog/lemon-ui'
+
import { FilterLogicalOperator } from '~/types'
interface AndOrFilterSelectProps {
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
index 85ddfae03059c..f1be02c46d0b0 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
@@ -1,18 +1,21 @@
-import { useValues, BindLogic, useActions } from 'kea'
-import { PropertyGroupFilterValue, AnyPropertyFilter, InsightLogicProps } from '~/types'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import './PropertyGroupFilters.scss'
-import { propertyGroupFilterLogic } from './propertyGroupFilterLogic'
+
+import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
+import { BindLogic, useActions, useValues } from 'kea'
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
import { isPropertyGroupFilterLike } from 'lib/components/PropertyFilters/utils'
-import { GlobalFiltersTitle } from 'scenes/insights/common'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { IconCopy, IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
-import { TestAccountFilter } from '../filters/TestAccountFilter'
-import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
import React from 'react'
+import { GlobalFiltersTitle } from 'scenes/insights/common'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+
import { InsightQueryNode, StickinessQuery, TrendsQuery } from '~/queries/schema'
+import { AnyPropertyFilter, InsightLogicProps, PropertyGroupFilterValue } from '~/types'
+
+import { TestAccountFilter } from '../filters/TestAccountFilter'
import { AndOrFilterSelect } from './AndOrFilterSelect'
-import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { propertyGroupFilterLogic } from './propertyGroupFilterLogic'
type PropertyGroupFiltersProps = {
insightProps: InsightLogicProps
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/propertyGroupFilterLogic.ts b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/propertyGroupFilterLogic.ts
index aa99e6a2b2a22..3b20beb8139a7 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/propertyGroupFilterLogic.ts
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/propertyGroupFilterLogic.ts
@@ -1,12 +1,12 @@
import { actions, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
-
-import { PropertyGroupFilter, FilterLogicalOperator, EmptyPropertyFilter } from '~/types'
-
-import type { propertyGroupFilterLogicType } from './propertyGroupFilterLogicType'
+import { convertPropertiesToPropertyGroup } from 'lib/components/PropertyFilters/utils'
import { objectsEqual } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+
import { StickinessQuery, TrendsQuery } from '~/queries/schema'
-import { convertPropertiesToPropertyGroup } from 'lib/components/PropertyFilters/utils'
+import { EmptyPropertyFilter, FilterLogicalOperator, PropertyGroupFilter } from '~/types'
+
+import type { propertyGroupFilterLogicType } from './propertyGroupFilterLogicType'
export type PropertyGroupFilterLogicProps = {
pageKey: string
diff --git a/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx b/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx
index 8e8f565e62e00..a3003a10a7e19 100644
--- a/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx
+++ b/frontend/src/queries/nodes/InsightViz/TrendsFormula.tsx
@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react'
-import { EditorFilterProps } from '~/types'
-import { useActions, useValues } from 'kea'
import { LemonInput } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { useEffect, useState } from 'react'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { EditorFilterProps } from '~/types'
+
// When updating this regex, remember to update the regex with the same name in mixins/common.py
const ALLOWED_FORMULA_CHARACTERS = /^[a-zA-Z \-*^0-9+/().]+$/
diff --git a/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx b/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx
index b726171a6e43d..fa0f8c49d2aef 100644
--- a/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx
+++ b/frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx
@@ -1,20 +1,21 @@
-import { useValues, useActions } from 'kea'
-import { groupsModel } from '~/models/groupsModel'
-import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter'
-import { FilterType } from '~/types'
-import { alphabet } from 'lib/utils'
-import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
+import { useActions, useValues } from 'kea'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
-import { TrendsQuery, FunnelsQuery, LifecycleQuery, StickinessQuery } from '~/queries/schema'
-import { isInsightQueryNode } from '~/queries/utils'
-import { queryNodeToFilter } from '../InsightQuery/utils/queryNodeToFilter'
-import { actionsAndEventsToSeries } from '../InsightQuery/utils/filtersToQueryNode'
-
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { alphabet } from 'lib/utils'
+import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter'
+import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
import { insightLogic } from 'scenes/insights/insightLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { groupsModel } from '~/models/groupsModel'
+import { FunnelsQuery, LifecycleQuery, StickinessQuery, TrendsQuery } from '~/queries/schema'
+import { isInsightQueryNode } from '~/queries/utils'
+import { FilterType } from '~/types'
+
+import { actionsAndEventsToSeries } from '../InsightQuery/utils/filtersToQueryNode'
+import { queryNodeToFilter } from '../InsightQuery/utils/queryNodeToFilter'
+
export function TrendsSeries(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { querySource, isTrends, isLifecycle, isStickiness, display, hasFormula } = useValues(
diff --git a/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx b/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx
index 9e1e8e183ba68..b524f539f0b93 100644
--- a/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx
+++ b/frontend/src/queries/nodes/InsightViz/TrendsSeriesLabel.tsx
@@ -1,11 +1,12 @@
+import { LemonButton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { EditorFilterProps } from '~/types'
import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
-import { LemonButton } from '@posthog/lemon-ui'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { IconCalculate } from 'lib/lemon-ui/icons'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { EditorFilterProps } from '~/types'
+
export function TrendsSeriesLabel({ insightProps }: EditorFilterProps): JSX.Element {
const { hasFormula, isTrends, display, series } = useValues(insightVizDataLogic(insightProps))
const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
diff --git a/frontend/src/queries/nodes/InsightViz/filters/TestAccountFilter.tsx b/frontend/src/queries/nodes/InsightViz/filters/TestAccountFilter.tsx
index 1aae07d9f5860..186b4e7eeba3f 100644
--- a/frontend/src/queries/nodes/InsightViz/filters/TestAccountFilter.tsx
+++ b/frontend/src/queries/nodes/InsightViz/filters/TestAccountFilter.tsx
@@ -1,12 +1,12 @@
-import { useActions, useValues } from 'kea'
-
-import { teamLogic } from 'scenes/teamLogic'
import { LemonButton, LemonSwitch } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
import { IconSettings } from 'lib/lemon-ui/icons'
-import { InsightQueryNode } from '~/queries/schema'
import { filterTestAccountsDefaultsLogic } from 'scenes/settings/project/filterTestAccountDefaultsLogic'
+import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
+import { InsightQueryNode } from '~/queries/schema'
+
type TestAccountFilterProps = {
query: InsightQueryNode
setQuery: (query: InsightQueryNode) => void
diff --git a/frontend/src/queries/nodes/InsightViz/utils.ts b/frontend/src/queries/nodes/InsightViz/utils.ts
index 1b2c403fdb12b..b06ed5b228248 100644
--- a/frontend/src/queries/nodes/InsightViz/utils.ts
+++ b/frontend/src/queries/nodes/InsightViz/utils.ts
@@ -1,7 +1,7 @@
-import { ActionsNode, BreakdownFilter, EventsNode, InsightQueryNode, TrendsQuery } from '~/queries/schema'
-import { ActionType, ChartDisplayType, InsightModel, IntervalType } from '~/types'
-import { seriesToActionsAndEvents } from '../InsightQuery/utils/queryNodeToFilter'
+import equal from 'fast-deep-equal'
import { getEventNamesForAction, isEmptyObject } from 'lib/utils'
+
+import { ActionsNode, BreakdownFilter, EventsNode, InsightQueryNode, TrendsQuery } from '~/queries/schema'
import {
isInsightQueryWithBreakdown,
isInsightQueryWithSeries,
@@ -9,8 +9,10 @@ import {
isStickinessQuery,
isTrendsQuery,
} from '~/queries/utils'
+import { ActionType, ChartDisplayType, InsightModel, IntervalType } from '~/types'
+
import { filtersToQueryNode } from '../InsightQuery/utils/filtersToQueryNode'
-import equal from 'fast-deep-equal'
+import { seriesToActionsAndEvents } from '../InsightQuery/utils/queryNodeToFilter'
export const getAllEventNames = (query: InsightQueryNode, allActions: ActionType[]): string[] => {
const { actions, events } = seriesToActionsAndEvents((query as TrendsQuery).series || [])
diff --git a/frontend/src/queries/nodes/Node/EditHogQLButton.tsx b/frontend/src/queries/nodes/Node/EditHogQLButton.tsx
index f3a901c00aba1..74e1e6c41fef6 100644
--- a/frontend/src/queries/nodes/Node/EditHogQLButton.tsx
+++ b/frontend/src/queries/nodes/Node/EditHogQLButton.tsx
@@ -1,7 +1,8 @@
+import { IconQueryEditor } from 'lib/lemon-ui/icons'
import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
-import { NodeKind } from '~/queries/schema'
import { urls } from 'scenes/urls'
-import { IconQueryEditor } from 'lib/lemon-ui/icons'
+
+import { NodeKind } from '~/queries/schema'
export interface EditHogQLButtonProps extends LemonButtonProps {
hogql: string
diff --git a/frontend/src/queries/nodes/Node/OpenEditorButton.tsx b/frontend/src/queries/nodes/Node/OpenEditorButton.tsx
index dd409bbfa6d54..23d2b55543178 100644
--- a/frontend/src/queries/nodes/Node/OpenEditorButton.tsx
+++ b/frontend/src/queries/nodes/Node/OpenEditorButton.tsx
@@ -1,7 +1,8 @@
+import { IconPreview } from 'lib/lemon-ui/icons'
import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
-import { Node } from '~/queries/schema'
import { urls } from 'scenes/urls'
-import { IconPreview } from 'lib/lemon-ui/icons'
+
+import { Node } from '~/queries/schema'
export interface OpenEditorButtonProps extends LemonButtonProps {
query: Node | null
diff --git a/frontend/src/queries/nodes/PersonsNode/DeletePersonButton.tsx b/frontend/src/queries/nodes/PersonsNode/DeletePersonButton.tsx
index b7523213593ec..4565a6cd5b22a 100644
--- a/frontend/src/queries/nodes/PersonsNode/DeletePersonButton.tsx
+++ b/frontend/src/queries/nodes/PersonsNode/DeletePersonButton.tsx
@@ -1,9 +1,10 @@
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { IconDelete } from 'lib/lemon-ui/icons'
import { useActions } from 'kea'
-import { PersonType } from '~/types'
+import { IconDelete } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { personDeleteModalLogic } from 'scenes/persons/personDeleteModalLogic'
+
import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
+import { PersonType } from '~/types'
interface DeletePersonButtonProps {
person: PersonType
diff --git a/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx b/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx
index f8ddaa48b44b1..43f633da0d80a 100644
--- a/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx
+++ b/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx
@@ -1,9 +1,10 @@
-import { PersonsNode, PersonsQuery } from '~/queries/schema'
import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
-import { PersonPropertyFilter } from '~/types'
-import { useState } from 'react'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { useState } from 'react'
+
+import { PersonsNode, PersonsQuery } from '~/queries/schema'
import { isPersonsQuery } from '~/queries/utils'
+import { PersonPropertyFilter } from '~/types'
interface PersonPropertyFiltersProps {
query: PersonsNode | PersonsQuery
diff --git a/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx b/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx
index a190d1b4434b6..b660556ea23a8 100644
--- a/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx
+++ b/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx
@@ -1,8 +1,9 @@
-import { PersonsNode, PersonsQuery } from '~/queries/schema'
-import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { IconInfo } from 'lib/lemon-ui/icons'
+import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
+
import { useDebouncedQuery } from '~/queries/hooks/useDebouncedQuery'
+import { PersonsNode, PersonsQuery } from '~/queries/schema'
interface PersonSearchProps {
query: PersonsNode | PersonsQuery
diff --git a/frontend/src/queries/nodes/SavedInsight/SavedInsight.tsx b/frontend/src/queries/nodes/SavedInsight/SavedInsight.tsx
index 11b4e87e03b1e..5ab40c629a87e 100644
--- a/frontend/src/queries/nodes/SavedInsight/SavedInsight.tsx
+++ b/frontend/src/queries/nodes/SavedInsight/SavedInsight.tsx
@@ -1,14 +1,13 @@
import { useValues } from 'kea'
-
+import { AnimationType } from 'lib/animations/animations'
+import { Animation } from 'lib/components/Animation/Animation'
+import { insightDataLogic } from 'scenes/insights/insightDataLogic'
import { insightLogic } from 'scenes/insights/insightLogic'
+
import { Query } from '~/queries/Query/Query'
import { SavedInsightNode } from '~/queries/schema'
import { QueryContext } from '~/queries/types'
-
import { InsightLogicProps } from '~/types'
-import { Animation } from 'lib/components/Animation/Animation'
-import { AnimationType } from 'lib/animations/animations'
-import { insightDataLogic } from 'scenes/insights/insightDataLogic'
interface InsightProps {
query: SavedInsightNode
diff --git a/frontend/src/queries/nodes/TimeToSeeData/TimeToSeeData.tsx b/frontend/src/queries/nodes/TimeToSeeData/TimeToSeeData.tsx
index 510078a1c1e80..f4ab309ec11cf 100644
--- a/frontend/src/queries/nodes/TimeToSeeData/TimeToSeeData.tsx
+++ b/frontend/src/queries/nodes/TimeToSeeData/TimeToSeeData.tsx
@@ -1,12 +1,14 @@
+import { useValues } from 'kea'
+import { CodeEditor } from 'lib/components/CodeEditors'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { useState } from 'react'
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer'
+
import { AnyResponseType, NodeKind, TimeToSeeDataNode } from '~/queries/schema'
-import { useValues } from 'kea'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+
import { dataNodeLogic } from '../DataNode/dataNodeLogic'
import { Trace } from './Trace/Trace'
import { TimeToSeeSessionNode } from './types'
-import { CodeEditor } from 'lib/components/CodeEditors'
let uniqueNode = 0
diff --git a/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx b/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx
index bcd5f3e4acc3d..64293e6b71621 100644
--- a/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx
+++ b/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx
@@ -1,15 +1,16 @@
+import { Tooltip } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { BindLogic, useValues } from 'kea'
import { getSeriesColor } from 'lib/colors'
import { TZLabel } from 'lib/components/TZLabel'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { IconSad } from 'lib/lemon-ui/icons'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { humanFriendlyDuration, humanFriendlyMilliseconds } from 'lib/utils'
import { RefCallback, useEffect, useState } from 'react'
import useResizeObserver from 'use-resize-observer'
+
import { isInteractionNode, isQueryNode, isSessionNode, TimeToSeeNode, TimeToSeeSessionNode } from '../types'
import { sessionNodeFacts, SpanData, traceLogic } from './traceLogic'
-import { Tooltip } from '@posthog/lemon-ui'
export interface TraceProps {
timeToSeeSession: TimeToSeeSessionNode
diff --git a/frontend/src/queries/nodes/TimeToSeeData/Trace/traceLogic.tsx b/frontend/src/queries/nodes/TimeToSeeData/Trace/traceLogic.tsx
index 37f2654050acf..c36416b2fe033 100644
--- a/frontend/src/queries/nodes/TimeToSeeData/Trace/traceLogic.tsx
+++ b/frontend/src/queries/nodes/TimeToSeeData/Trace/traceLogic.tsx
@@ -2,6 +2,7 @@ import { kea, key, path, props, selectors } from 'kea'
import { dayjs } from 'lib/dayjs'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { humanFriendlyMilliseconds } from 'lib/utils'
+
import {
isSessionNode,
TimeToSeeInteractionNode,
@@ -9,7 +10,6 @@ import {
TimeToSeeQueryNode,
TimeToSeeSessionNode,
} from '../types'
-
import type { traceLogicType } from './traceLogicType'
export interface TraceLogicProps {
diff --git a/frontend/src/queries/nodes/WebOverview/EvenlyDistributedRows.tsx b/frontend/src/queries/nodes/WebOverview/EvenlyDistributedRows.tsx
index d40781079d9e4..eb9d32084d6c0 100644
--- a/frontend/src/queries/nodes/WebOverview/EvenlyDistributedRows.tsx
+++ b/frontend/src/queries/nodes/WebOverview/EvenlyDistributedRows.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
import clsx from 'clsx'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
export const EvenlyDistributedRows = ({
children,
diff --git a/frontend/src/queries/nodes/WebOverview/WebOverview.tsx b/frontend/src/queries/nodes/WebOverview/WebOverview.tsx
index 9de6ccdbac0b3..5612f1060eda8 100644
--- a/frontend/src/queries/nodes/WebOverview/WebOverview.tsx
+++ b/frontend/src/queries/nodes/WebOverview/WebOverview.tsx
@@ -1,13 +1,15 @@
-import { useState } from 'react'
-import { AnyResponseType, WebOverviewItem, WebOverviewQuery, WebOverviewQueryResponse } from '~/queries/schema'
import { useValues } from 'kea'
+import { getColorVar } from 'lib/colors'
+import { IconTrendingDown, IconTrendingFlat, IconTrendingUp } from 'lib/lemon-ui/icons'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { dataNodeLogic } from '../DataNode/dataNodeLogic'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { humanFriendlyDuration, humanFriendlyLargeNumber, isNotNil } from 'lib/utils'
-import { IconTrendingDown, IconTrendingFlat, IconTrendingUp } from 'lib/lemon-ui/icons'
-import { getColorVar } from 'lib/colors'
+import { useState } from 'react'
+
import { EvenlyDistributedRows } from '~/queries/nodes/WebOverview/EvenlyDistributedRows'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { AnyResponseType, WebOverviewItem, WebOverviewQuery, WebOverviewQueryResponse } from '~/queries/schema'
+
+import { dataNodeLogic } from '../DataNode/dataNodeLogic'
let uniqueNode = 0
export function WebOverview(props: { query: WebOverviewQuery; cachedResults?: AnyResponseType }): JSX.Element | null {
diff --git a/frontend/src/queries/query.test.ts b/frontend/src/queries/query.test.ts
index 5ae28a1a657e0..7393f59d2868c 100644
--- a/frontend/src/queries/query.test.ts
+++ b/frontend/src/queries/query.test.ts
@@ -1,9 +1,10 @@
+import posthog from 'posthog-js'
+
+import { useMocks } from '~/mocks/jest'
import { query, queryExportContext } from '~/queries/query'
import { EventsQuery, HogQLQuery, NodeKind } from '~/queries/schema'
-import { PropertyFilterType, PropertyOperator } from '~/types'
import { initKeaTests } from '~/test/init'
-import posthog from 'posthog-js'
-import { useMocks } from '~/mocks/jest'
+import { PropertyFilterType, PropertyOperator } from '~/types'
describe('query', () => {
beforeEach(() => {
diff --git a/frontend/src/queries/query.ts b/frontend/src/queries/query.ts
index 01c218a290e6c..29d08863a62c0 100644
--- a/frontend/src/queries/query.ts
+++ b/frontend/src/queries/query.ts
@@ -1,22 +1,11 @@
-import posthog from 'posthog-js'
-import { DataNode, HogQLQuery, HogQLQueryResponse, NodeKind, PersonsNode } from './schema'
-import {
- isInsightQueryNode,
- isEventsQuery,
- isPersonsNode,
- isTimeToSeeDataSessionsQuery,
- isTimeToSeeDataQuery,
- isDataTableNode,
- isTimeToSeeDataSessionsNode,
- isHogQLQuery,
- isInsightVizNode,
- isQueryWithHogQLSupport,
- isPersonsQuery,
- isLifecycleQuery,
-} from './utils'
import api, { ApiMethodOptions } from 'lib/api'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { now } from 'lib/dayjs'
+import { currentSessionId } from 'lib/internalMetrics'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { delay, flattenObject, toParams } from 'lib/utils'
import { getCurrentTeamId } from 'lib/utils/logics'
-import { AnyPartialFilterType, OnlineExportContext, QueryExportContext } from '~/types'
+import posthog from 'posthog-js'
import {
filterTrendsClientSideParams,
isFunnelsFilter,
@@ -26,12 +15,25 @@ import {
isStickinessFilter,
isTrendsFilter,
} from 'scenes/insights/sharedUtils'
-import { flattenObject, delay, toParams } from 'lib/utils'
+
+import { AnyPartialFilterType, OnlineExportContext, QueryExportContext } from '~/types'
+
import { queryNodeToFilter } from './nodes/InsightQuery/utils/queryNodeToFilter'
-import { now } from 'lib/dayjs'
-import { currentSessionId } from 'lib/internalMetrics'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
+import { DataNode, HogQLQuery, HogQLQueryResponse, NodeKind, PersonsNode } from './schema'
+import {
+ isDataTableNode,
+ isEventsQuery,
+ isHogQLQuery,
+ isInsightQueryNode,
+ isInsightVizNode,
+ isLifecycleQuery,
+ isPersonsNode,
+ isPersonsQuery,
+ isQueryWithHogQLSupport,
+ isTimeToSeeDataQuery,
+ isTimeToSeeDataSessionsNode,
+ isTimeToSeeDataSessionsQuery,
+} from './utils'
const QUERY_ASYNC_MAX_INTERVAL_SECONDS = 10
const QUERY_ASYNC_TOTAL_POLL_SECONDS = 300
diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts
index 804a1a64719ae..2ae3a75e65009 100644
--- a/frontend/src/queries/types.ts
+++ b/frontend/src/queries/types.ts
@@ -1,6 +1,7 @@
-import { ChartDisplayType, GraphPointPayload, InsightLogicProps, TrendResult } from '~/types'
import { ComponentType, HTMLProps } from 'react'
+
import { DataTableNode } from '~/queries/schema'
+import { ChartDisplayType, GraphPointPayload, InsightLogicProps, TrendResult } from '~/types'
/** Pass custom metadata to queries. Used for e.g. custom columns in the DataTable. */
export interface QueryContext {
diff --git a/frontend/src/queries/utils.test.ts b/frontend/src/queries/utils.test.ts
index d20ea8c377af2..60a561eb68b2c 100644
--- a/frontend/src/queries/utils.test.ts
+++ b/frontend/src/queries/utils.test.ts
@@ -1,10 +1,12 @@
+import { MOCK_TEAM_ID } from 'lib/api.mock'
import { dayjs } from 'lib/dayjs'
-import { hogql } from './utils'
import { teamLogic } from 'scenes/teamLogic'
+
import { initKeaTests } from '~/test/init'
-import { MOCK_TEAM_ID } from 'lib/api.mock'
import { AppContext, TeamType } from '~/types'
+import { hogql } from './utils'
+
window.POSTHOG_APP_CONTEXT = { current_team: { id: MOCK_TEAM_ID } } as unknown as AppContext
describe('hogql tag', () => {
diff --git a/frontend/src/queries/utils.ts b/frontend/src/queries/utils.ts
index de393a7fbd659..79151b209a89e 100644
--- a/frontend/src/queries/utils.ts
+++ b/frontend/src/queries/utils.ts
@@ -1,3 +1,7 @@
+import { TaxonomicFilterGroupType, TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
+import { dayjs } from 'lib/dayjs'
+import { teamLogic } from 'scenes/teamLogic'
+
import {
ActionsNode,
DatabaseSchemaQuery,
@@ -32,9 +36,6 @@ import {
WebStatsTableQuery,
WebTopClicksQuery,
} from '~/queries/schema'
-import { TaxonomicFilterGroupType, TaxonomicFilterValue } from 'lib/components/TaxonomicFilter/types'
-import { dayjs } from 'lib/dayjs'
-import { teamLogic } from 'scenes/teamLogic'
export function isDataNode(node?: Node | null): node is EventsQuery | PersonsNode | TimeToSeeDataSessionsQuery {
return (
diff --git a/frontend/src/scenes/App.tsx b/frontend/src/scenes/App.tsx
index 225efc7dffeaa..1bc924fbc7bfc 100644
--- a/frontend/src/scenes/App.tsx
+++ b/frontend/src/scenes/App.tsx
@@ -1,29 +1,31 @@
-import { kea, useMountedLogic, useValues, BindLogic, path, connect, actions, reducers, selectors, events } from 'kea'
-import { ToastContainer, Slide } from 'react-toastify'
-import { preflightLogic } from './PreflightCheck/preflightLogic'
-import { userLogic } from 'scenes/userLogic'
-import { sceneLogic } from 'scenes/sceneLogic'
+import { actions, BindLogic, connect, events, kea, path, reducers, selectors, useMountedLogic, useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { ToastCloseButton } from 'lib/lemon-ui/lemonToast'
+import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import type { appLogicType } from './AppType'
-import { teamLogic } from './teamLogic'
-import { LoadedScene } from 'scenes/sceneTypes'
+import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
+import { useEffect } from 'react'
+import { Slide, ToastContainer } from 'react-toastify'
+import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
import { appScenes } from 'scenes/appScenes'
-import { Navigation as NavigationClassic } from '~/layout/navigation/Navigation'
+import { organizationLogic } from 'scenes/organizationLogic'
+import { sceneLogic } from 'scenes/sceneLogic'
+import { LoadedScene } from 'scenes/sceneTypes'
+import { userLogic } from 'scenes/userLogic'
+
import { ErrorBoundary } from '~/layout/ErrorBoundary'
+import { GlobalModals } from '~/layout/GlobalModals'
import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
-import { organizationLogic } from 'scenes/organizationLogic'
-import { ToastCloseButton } from 'lib/lemon-ui/lemonToast'
-import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
-import { inAppPromptLogic } from 'lib/logic/inAppPrompt/inAppPromptLogic'
-import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
-import { FEATURE_FLAGS } from 'lib/constants'
+import { Navigation as NavigationClassic } from '~/layout/navigation/Navigation'
import { Navigation as Navigation3000 } from '~/layout/navigation-3000/Navigation'
-import { useEffect } from 'react'
import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-import { GlobalModals } from '~/layout/GlobalModals'
import { actionsModel } from '~/models/actionsModel'
import { cohortsModel } from '~/models/cohortsModel'
+import type { appLogicType } from './AppType'
+import { preflightLogic } from './PreflightCheck/preflightLogic'
+import { teamLogic } from './teamLogic'
+
export const appLogic = kea([
path(['scenes', 'App']),
connect([teamLogic, organizationLogic, frontendAppsLogic, inAppPromptLogic, actionsModel, cohortsModel]),
diff --git a/frontend/src/scenes/IntegrationsRedirect/IntegrationsRedirect.tsx b/frontend/src/scenes/IntegrationsRedirect/IntegrationsRedirect.tsx
index df3757fcfcdf5..3a1cb65525eb6 100644
--- a/frontend/src/scenes/IntegrationsRedirect/IntegrationsRedirect.tsx
+++ b/frontend/src/scenes/IntegrationsRedirect/IntegrationsRedirect.tsx
@@ -1,5 +1,5 @@
-import { SceneExport } from 'scenes/sceneTypes'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { SceneExport } from 'scenes/sceneTypes'
import { integrationsLogic } from 'scenes/settings/project/integrationsLogic'
export const scene: SceneExport = {
diff --git a/frontend/src/scenes/PreflightCheck/PreflightCheck.tsx b/frontend/src/scenes/PreflightCheck/PreflightCheck.tsx
index dfbadfeb38a13..fab3d72dbe6c0 100644
--- a/frontend/src/scenes/PreflightCheck/PreflightCheck.tsx
+++ b/frontend/src/scenes/PreflightCheck/PreflightCheck.tsx
@@ -1,23 +1,25 @@
-import { useValues, useActions } from 'kea'
-import { PreflightCheckStatus, PreflightItem, preflightLogic } from './preflightLogic'
import './PreflightCheck.scss'
-import { capitalizeFirstLetter } from 'lib/utils'
-import { SceneExport } from 'scenes/sceneTypes'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
+
+import { Link, Spinner } from '@posthog/lemon-ui'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
+import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible'
+import { BridgePage } from 'lib/components/BridgePage/BridgePage'
import {
IconCheckCircleOutline,
IconErrorOutline,
+ IconRefresh,
IconUnfoldLess,
IconUnfoldMore,
- IconRefresh,
IconWarning,
} from 'lib/lemon-ui/icons'
-import clsx from 'clsx'
-import { LemonRow } from 'lib/lemon-ui/LemonRow'
-import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { BridgePage } from 'lib/components/BridgePage/BridgePage'
-import { Link, Spinner } from '@posthog/lemon-ui'
+import { LemonRow } from 'lib/lemon-ui/LemonRow'
+import { capitalizeFirstLetter } from 'lib/utils'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { PreflightCheckStatus, PreflightItem, preflightLogic } from './preflightLogic'
export const scene: SceneExport = {
component: PreflightCheck,
diff --git a/frontend/src/scenes/PreflightCheck/preflightLogic.test.ts b/frontend/src/scenes/PreflightCheck/preflightLogic.test.ts
index 5ae4c1839df05..9ef3b88c8c0a8 100644
--- a/frontend/src/scenes/PreflightCheck/preflightLogic.test.ts
+++ b/frontend/src/scenes/PreflightCheck/preflightLogic.test.ts
@@ -1,7 +1,9 @@
import { router } from 'kea-router'
import { expectLogic } from 'kea-test-utils'
import { urls } from 'scenes/urls'
+
import { initKeaTests } from '~/test/init'
+
import { preflightLogic } from './preflightLogic'
describe('preflightLogic', () => {
diff --git a/frontend/src/scenes/PreflightCheck/preflightLogic.tsx b/frontend/src/scenes/PreflightCheck/preflightLogic.tsx
index 2c71e29c70192..c57b8a20178b8 100644
--- a/frontend/src/scenes/PreflightCheck/preflightLogic.tsx
+++ b/frontend/src/scenes/PreflightCheck/preflightLogic.tsx
@@ -1,12 +1,14 @@
import { actions, events, kea, listeners, path, reducers, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
+import { actionToUrl, router, urlToAction } from 'kea-router'
import api from 'lib/api'
-import { PreflightStatus, Realm } from '~/types'
-import posthog from 'posthog-js'
import { getAppContext } from 'lib/utils/getAppContext'
-import type { preflightLogicType } from './preflightLogicType'
+import posthog from 'posthog-js'
import { urls } from 'scenes/urls'
-import { actionToUrl, router, urlToAction } from 'kea-router'
-import { loaders } from 'kea-loaders'
+
+import { PreflightStatus, Realm } from '~/types'
+
+import type { preflightLogicType } from './preflightLogicType'
export type PreflightMode = 'experimentation' | 'live'
diff --git a/frontend/src/scenes/ResourcePermissionModal.tsx b/frontend/src/scenes/ResourcePermissionModal.tsx
index 00dd60a034956..4e81f46ccc99b 100644
--- a/frontend/src/scenes/ResourcePermissionModal.tsx
+++ b/frontend/src/scenes/ResourcePermissionModal.tsx
@@ -1,13 +1,15 @@
import { LemonButton, LemonModal, LemonTable } from '@posthog/lemon-ui'
import { useValues } from 'kea'
+import { TitleWithIcon } from 'lib/components/TitleWithIcon'
import { IconDelete, IconSettings } from 'lib/lemon-ui/icons'
import {
LemonSelectMultiple,
LemonSelectMultipleOptionItem,
} from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
import { LemonTableColumns } from 'lib/lemon-ui/LemonTable'
-import { TitleWithIcon } from 'lib/components/TitleWithIcon'
+
import { AccessLevel, Resource, RoleType } from '~/types'
+
import {
FormattedResourceLevel,
permissionsLogic,
diff --git a/frontend/src/scenes/Unsubscribe/Unsubscribe.tsx b/frontend/src/scenes/Unsubscribe/Unsubscribe.tsx
index 2b2d2426633f8..b7658b413e04f 100644
--- a/frontend/src/scenes/Unsubscribe/Unsubscribe.tsx
+++ b/frontend/src/scenes/Unsubscribe/Unsubscribe.tsx
@@ -1,8 +1,9 @@
-import { SceneExport } from 'scenes/sceneTypes'
-import { unsubscribeLogic } from './unsubscribeLogic'
import { useValues } from 'kea'
import { BridgePage } from 'lib/components/BridgePage/BridgePage'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { unsubscribeLogic } from './unsubscribeLogic'
export const scene: SceneExport = {
component: Unsubscribe,
diff --git a/frontend/src/scenes/UpgradeModal.tsx b/frontend/src/scenes/UpgradeModal.tsx
index bd10d36595fc1..ea065da4c6a3b 100644
--- a/frontend/src/scenes/UpgradeModal.tsx
+++ b/frontend/src/scenes/UpgradeModal.tsx
@@ -2,6 +2,7 @@ import { LemonButton, LemonModal } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { capitalizeFirstLetter } from 'lib/utils'
import { posthog } from 'posthog-js'
+
import { sceneLogic } from './sceneLogic'
import { urls } from './urls'
diff --git a/frontend/src/scenes/actions/Action.tsx b/frontend/src/scenes/actions/Action.tsx
index e4e7b934b4f3d..61b1ccb3d2f0c 100644
--- a/frontend/src/scenes/actions/Action.tsx
+++ b/frontend/src/scenes/actions/Action.tsx
@@ -1,14 +1,16 @@
-import { ActionEdit } from './ActionEdit'
import { useActions, useValues } from 'kea'
import { router } from 'kea-router'
-import { urls } from 'scenes/urls'
-import { ActionType } from '~/types'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { SceneExport } from 'scenes/sceneTypes'
import { actionLogic, ActionLogicProps } from 'scenes/actions/actionLogic'
+import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
import { Query } from '~/queries/Query/Query'
import { NodeKind } from '~/queries/schema'
-import { defaultDataTableColumns } from '~/queries/nodes/DataTable/utils'
+import { ActionType } from '~/types'
+
+import { ActionEdit } from './ActionEdit'
export const scene: SceneExport = {
logic: actionLogic,
diff --git a/frontend/src/scenes/actions/ActionEdit.tsx b/frontend/src/scenes/actions/ActionEdit.tsx
index e7a3182f8ee7d..14f524ee0e958 100644
--- a/frontend/src/scenes/actions/ActionEdit.tsx
+++ b/frontend/src/scenes/actions/ActionEdit.tsx
@@ -1,25 +1,27 @@
-import { compactNumber, uuid } from 'lib/utils'
-import { Link } from 'lib/lemon-ui/Link'
+import { LemonTextArea } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { actionEditLogic, ActionEditLogicProps } from './actionEditLogic'
-import { ActionStep } from './ActionStep'
+import { Form } from 'kea-forms'
import { combineUrl, router } from 'kea-router'
-import { PageHeader } from 'lib/components/PageHeader'
-import { teamLogic } from 'scenes/teamLogic'
-import { urls } from 'scenes/urls'
import { EditableField } from 'lib/components/EditableField/EditableField'
-import { ActionStepType, AvailableFeature } from '~/types'
-import { userLogic } from 'scenes/userLogic'
import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
+import { PageHeader } from 'lib/components/PageHeader'
import { Field } from 'lib/forms/Field'
+import { IconInfo, IconPlayCircle, IconPlus, IconWarning } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
-import { Form } from 'kea-forms'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { IconInfo, IconPlayCircle, IconPlus, IconWarning } from 'lib/lemon-ui/icons'
-import { tagsModel } from '~/models/tagsModel'
+import { Link } from 'lib/lemon-ui/Link'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { LemonTextArea } from '@posthog/lemon-ui'
+import { compactNumber, uuid } from 'lib/utils'
+import { teamLogic } from 'scenes/teamLogic'
+import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
+
+import { tagsModel } from '~/models/tagsModel'
+import { ActionStepType, AvailableFeature } from '~/types'
+
+import { actionEditLogic, ActionEditLogicProps } from './actionEditLogic'
+import { ActionStep } from './ActionStep'
export function ActionEdit({ action: loadedAction, id, onSave, temporaryToken }: ActionEditLogicProps): JSX.Element {
const logicProps: ActionEditLogicProps = {
diff --git a/frontend/src/scenes/actions/ActionStep.tsx b/frontend/src/scenes/actions/ActionStep.tsx
index c51064e66b171..3bab146512df3 100644
--- a/frontend/src/scenes/actions/ActionStep.tsx
+++ b/frontend/src/scenes/actions/ActionStep.tsx
@@ -1,18 +1,20 @@
-import { LemonEventName } from './EventName'
-import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
-import { URL_MATCHING_HINTS } from 'scenes/actions/hints'
-import { ActionStepType, StringMatching } from '~/types'
+import './ActionStep.scss'
+
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'
import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
+import { OperandTag } from 'lib/components/PropertyFilters/components/OperandTag'
+import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
+import { IconClose, IconOpenInApp } from 'lib/lemon-ui/icons'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { useState } from 'react'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { URL_MATCHING_HINTS } from 'scenes/actions/hints'
-import './ActionStep.scss'
-import { OperandTag } from 'lib/components/PropertyFilters/components/OperandTag'
+import { ActionStepType, StringMatching } from '~/types'
+
+import { LemonEventName } from './EventName'
const learnMoreLink = 'https://posthog.com/docs/user-guides/actions?utm_medium=in-product&utm_campaign=action-page'
diff --git a/frontend/src/scenes/actions/EventName.tsx b/frontend/src/scenes/actions/EventName.tsx
index b467e2d044028..e5ddd0f0e1c6c 100644
--- a/frontend/src/scenes/actions/EventName.tsx
+++ b/frontend/src/scenes/actions/EventName.tsx
@@ -1,6 +1,6 @@
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { TaxonomicPopover } from 'lib/components/TaxonomicPopover/TaxonomicPopover'
interface LemonEventNamePropsWithoutAllEvents {
value: string
diff --git a/frontend/src/scenes/actions/NewActionButton.tsx b/frontend/src/scenes/actions/NewActionButton.tsx
index 4d98c98b77253..4ad666f60f5b8 100644
--- a/frontend/src/scenes/actions/NewActionButton.tsx
+++ b/frontend/src/scenes/actions/NewActionButton.tsx
@@ -1,11 +1,11 @@
-import { useState } from 'react'
+import { LemonModal } from '@posthog/lemon-ui'
import { router } from 'kea-router'
-import { urls } from 'scenes/urls'
import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
import { IconEdit, IconMagnifier } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { LemonModal } from '@posthog/lemon-ui'
+import { useState } from 'react'
+import { urls } from 'scenes/urls'
export function NewActionButton({ onSelectOption }: { onSelectOption?: () => void }): JSX.Element {
const [visible, setVisible] = useState(false)
diff --git a/frontend/src/scenes/actions/actionEditLogic.tsx b/frontend/src/scenes/actions/actionEditLogic.tsx
index 980461d56e80c..a32cd4a3a44c4 100644
--- a/frontend/src/scenes/actions/actionEditLogic.tsx
+++ b/frontend/src/scenes/actions/actionEditLogic.tsx
@@ -1,20 +1,22 @@
import { actions, afterMount, connect, kea, key, listeners, path, props, reducers } from 'kea'
+import { forms } from 'kea-forms'
+import { loaders } from 'kea-loaders'
+import { beforeUnload, router, urlToAction } from 'kea-router'
import api from 'lib/api'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { Link } from 'lib/lemon-ui/Link'
import { uuid } from 'lib/utils'
import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
-import { actionsModel } from '~/models/actionsModel'
-import type { actionEditLogicType } from './actionEditLogicType'
-import { ActionStepType, ActionType } from '~/types'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import { loaders } from 'kea-loaders'
-import { forms } from 'kea-forms'
-import { beforeUnload, router, urlToAction } from 'kea-router'
-import { urls } from 'scenes/urls'
import { eventDefinitionsTableLogic } from 'scenes/data-management/events/eventDefinitionsTableLogic'
-import { Link } from 'lib/lemon-ui/Link'
-import { tagsModel } from '~/models/tagsModel'
import { sceneLogic } from 'scenes/sceneLogic'
import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { actionsModel } from '~/models/actionsModel'
+import { tagsModel } from '~/models/tagsModel'
+import { ActionStepType, ActionType } from '~/types'
+
+import type { actionEditLogicType } from './actionEditLogicType'
export type NewActionType = Partial &
Pick
diff --git a/frontend/src/scenes/actions/actionLogic.ts b/frontend/src/scenes/actions/actionLogic.ts
index 6b47df87c05a7..7aa1934af84ce 100644
--- a/frontend/src/scenes/actions/actionLogic.ts
+++ b/frontend/src/scenes/actions/actionLogic.ts
@@ -1,11 +1,13 @@
+import { actions, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, props, key, path, actions, reducers, selectors, listeners, events } from 'kea'
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'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { ActionType, Breadcrumb } from '~/types'
+
+import type { actionLogicType } from './actionLogicType'
export interface ActionLogicProps {
id?: ActionType['id']
diff --git a/frontend/src/scenes/actions/actionsLogic.ts b/frontend/src/scenes/actions/actionsLogic.ts
index f150c85111a64..063ba899d5d38 100644
--- a/frontend/src/scenes/actions/actionsLogic.ts
+++ b/frontend/src/scenes/actions/actionsLogic.ts
@@ -1,16 +1,17 @@
-import { kea, selectors, path, actions, reducers, connect } from 'kea'
-import { ActionType, Breadcrumb, ProductKey } from '~/types'
-import { urls } from 'scenes/urls'
-
-import type { actionsLogicType } from './actionsLogicType'
-import { actionsModel } from '~/models/actionsModel'
import Fuse from 'fuse.js'
-import { userLogic } from 'scenes/userLogic'
+import { actions, connect, kea, path, reducers, selectors } from 'kea'
import { subscriptions } from 'kea-subscriptions'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { FEATURE_FLAGS } from 'lib/constants'
-import { Scene } from 'scenes/sceneTypes'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { DataManagementTab } from 'scenes/data-management/DataManagementScene'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
+
+import { actionsModel } from '~/models/actionsModel'
+import { ActionType, Breadcrumb, ProductKey } from '~/types'
+
+import type { actionsLogicType } from './actionsLogicType'
export type ActionsFilterType = 'all' | 'me'
diff --git a/frontend/src/scenes/annotations/AnnotationModal.tsx b/frontend/src/scenes/annotations/AnnotationModal.tsx
index a697a84456ce0..ad4edf2b00b23 100644
--- a/frontend/src/scenes/annotations/AnnotationModal.tsx
+++ b/frontend/src/scenes/annotations/AnnotationModal.tsx
@@ -1,14 +1,16 @@
import { LemonButton, LemonModal, LemonModalProps, LemonSelect, LemonTextArea, Link } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
-import { Field } from 'lib/forms/Field'
import { DatePicker } from 'lib/components/DatePicker'
-import { annotationScopeToName, annotationModalLogic, ANNOTATION_DAYJS_FORMAT } from './annotationModalLogic'
-import { AnnotationScope } from '~/types'
+import { Field } from 'lib/forms/Field'
import { IconWarning } from 'lib/lemon-ui/icons'
import { shortTimeZone } from 'lib/utils'
import { urls } from 'scenes/urls'
+import { AnnotationScope } from '~/types'
+
+import { ANNOTATION_DAYJS_FORMAT, annotationModalLogic, annotationScopeToName } from './annotationModalLogic'
+
export function NewAnnotationButton(): JSX.Element {
const { openModalToCreateAnnotation } = useActions(annotationModalLogic)
return (
diff --git a/frontend/src/scenes/annotations/Annotations.stories.tsx b/frontend/src/scenes/annotations/Annotations.stories.tsx
index 8a99d5c64f7a5..79550faaba47b 100644
--- a/frontend/src/scenes/annotations/Annotations.stories.tsx
+++ b/frontend/src/scenes/annotations/Annotations.stories.tsx
@@ -1,9 +1,11 @@
-import { useEffect } from 'react'
import { Meta } from '@storybook/react'
-import { App } from 'scenes/App'
import { router } from 'kea-router'
+import { useEffect } from 'react'
+import { App } from 'scenes/App'
import { urls } from 'scenes/urls'
+
import { mswDecorator } from '~/mocks/browser'
+
import annotations from './__mocks__/annotations.json'
const meta: Meta = {
diff --git a/frontend/src/scenes/annotations/Annotations.tsx b/frontend/src/scenes/annotations/Annotations.tsx
index b71b8969d0899..974de8f172104 100644
--- a/frontend/src/scenes/annotations/Annotations.tsx
+++ b/frontend/src/scenes/annotations/Annotations.tsx
@@ -1,26 +1,28 @@
-import { useValues, useActions } from 'kea'
-import {
- annotationScopeToLevel,
- annotationScopeToName,
- annotationModalLogic,
- ANNOTATION_DAYJS_FORMAT,
-} from './annotationModalLogic'
-import { AnnotationScope, InsightShortId, AnnotationType, ProductKey } from '~/types'
-import { LemonTable, LemonTableColumns, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
-import { createdAtColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
+import { Link } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { MicrophoneHog } from 'lib/components/hedgehogs'
+import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
+import { IconEdit } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonTable, LemonTableColumn, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
+import { createdAtColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { IconEdit } from 'lib/lemon-ui/icons'
-import { Link } from '@posthog/lemon-ui'
-import { urls } from 'scenes/urls'
+import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { teamLogic } from 'scenes/teamLogic'
+import { shortTimeZone } from 'lib/utils'
import { organizationLogic } from 'scenes/organizationLogic'
+import { teamLogic } from 'scenes/teamLogic'
+import { urls } from 'scenes/urls'
+
+import { AnnotationScope, AnnotationType, InsightShortId, ProductKey } from '~/types'
+
import { AnnotationModal } from './AnnotationModal'
-import { shortTimeZone } from 'lib/utils'
-import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
-import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
-import { MicrophoneHog } from 'lib/components/hedgehogs'
+import {
+ ANNOTATION_DAYJS_FORMAT,
+ annotationModalLogic,
+ annotationScopeToLevel,
+ annotationScopeToName,
+} from './annotationModalLogic'
export function Annotations(): JSX.Element {
const { currentTeam } = useValues(teamLogic)
diff --git a/frontend/src/scenes/annotations/annotationModalLogic.ts b/frontend/src/scenes/annotations/annotationModalLogic.ts
index d1dd40c68061e..74b32ef8d58a1 100644
--- a/frontend/src/scenes/annotations/annotationModalLogic.ts
+++ b/frontend/src/scenes/annotations/annotationModalLogic.ts
@@ -1,16 +1,18 @@
import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
-import api from 'lib/api'
-import { AnnotationScope, AnnotationType, InsightModel, ProductKey } from '~/types'
import { forms } from 'kea-forms'
-import { dayjs, Dayjs } from 'lib/dayjs'
-import { annotationsModel, deserializeAnnotation } from '~/models/annotationsModel'
-import type { annotationModalLogicType } from './annotationModalLogicType'
-import { teamLogic } from 'scenes/teamLogic'
+import { urlToAction } from 'kea-router'
+import api from 'lib/api'
import { FEATURE_FLAGS } from 'lib/constants'
-import { userLogic } from 'scenes/userLogic'
+import { Dayjs, dayjs } from 'lib/dayjs'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { urlToAction } from 'kea-router'
+import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
+
+import { annotationsModel, deserializeAnnotation } from '~/models/annotationsModel'
+import { AnnotationScope, AnnotationType, InsightModel, ProductKey } from '~/types'
+
+import type { annotationModalLogicType } from './annotationModalLogicType'
export const ANNOTATION_DAYJS_FORMAT = 'MMMM DD, YYYY h:mm A'
diff --git a/frontend/src/scenes/appContextLogic.ts b/frontend/src/scenes/appContextLogic.ts
index 4386021d2e927..ce3a6a11a317c 100644
--- a/frontend/src/scenes/appContextLogic.ts
+++ b/frontend/src/scenes/appContextLogic.ts
@@ -1,14 +1,14 @@
+import * as Sentry from '@sentry/react'
import { afterMount, connect, kea, path } from 'kea'
import api from 'lib/api'
import { getAppContext } from 'lib/utils/getAppContext'
-import * as Sentry from '@sentry/react'
-import { userLogic } from './userLogic'
+import { UserType } from '~/types'
import type { appContextLogicType } from './appContextLogicType'
import { organizationLogic } from './organizationLogic'
import { teamLogic } from './teamLogic'
-import { UserType } from '~/types'
+import { userLogic } from './userLogic'
export const appContextLogic = kea([
path(['scenes', 'appContextLogic']),
diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts
index ad997bb2635a3..8c7a8c5ab8c09 100644
--- a/frontend/src/scenes/appScenes.ts
+++ b/frontend/src/scenes/appScenes.ts
@@ -1,5 +1,5 @@
-import { Scene } from 'scenes/sceneTypes'
import { preloadedScenes } from 'scenes/scenes'
+import { Scene } from 'scenes/sceneTypes'
export const appScenes: Record any> = {
[Scene.Error404]: () => ({ default: preloadedScenes[Scene.Error404].component }),
diff --git a/frontend/src/scenes/apps/AppLogsTab.tsx b/frontend/src/scenes/apps/AppLogsTab.tsx
index 1bd8a87d36d71..440cf8dc8dcce 100644
--- a/frontend/src/scenes/apps/AppLogsTab.tsx
+++ b/frontend/src/scenes/apps/AppLogsTab.tsx
@@ -1,8 +1,9 @@
-import { appMetricsSceneLogic } from './appMetricsSceneLogic'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { useValues } from 'kea'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { PluginLogs } from 'scenes/plugins/plugin/PluginLogs'
+import { appMetricsSceneLogic } from './appMetricsSceneLogic'
+
export function AppLogsTab(): JSX.Element {
const { activeTab, pluginConfig, pluginConfigLoading } = useValues(appMetricsSceneLogic)
diff --git a/frontend/src/scenes/apps/AppMetricsGraph.tsx b/frontend/src/scenes/apps/AppMetricsGraph.tsx
index 957e95499f3bb..d72280f043770 100644
--- a/frontend/src/scenes/apps/AppMetricsGraph.tsx
+++ b/frontend/src/scenes/apps/AppMetricsGraph.tsx
@@ -1,14 +1,16 @@
-import { useEffect, useRef } from 'react'
-import { getColorVar } from 'lib/colors'
+import './AppMetricsGraph.scss'
+
import { Chart, ChartDataset, ChartItem } from 'lib/Chart'
-import { DescriptionColumns } from './constants'
+import { getColorVar } from 'lib/colors'
import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-
-import './AppMetricsGraph.scss'
import { inStorybookTestRunner, lightenDarkenColor } from 'lib/utils'
-import { AppMetrics } from './appMetricsSceneLogic'
+import { useEffect, useRef } from 'react'
+
import { AppMetricsTab } from '~/types'
+import { AppMetrics } from './appMetricsSceneLogic'
+import { DescriptionColumns } from './constants'
+
export interface AppMetricsGraphProps {
tab: AppMetricsTab
metrics?: AppMetrics | null
diff --git a/frontend/src/scenes/apps/AppMetricsScene.stories.tsx b/frontend/src/scenes/apps/AppMetricsScene.stories.tsx
index 638bb317fc462..645f275c49214 100644
--- a/frontend/src/scenes/apps/AppMetricsScene.stories.tsx
+++ b/frontend/src/scenes/apps/AppMetricsScene.stories.tsx
@@ -1,12 +1,14 @@
import { Meta, Story } from '@storybook/react'
-import { App } from 'scenes/App'
-import { useEffect } from 'react'
import { router } from 'kea-router'
-import { mswDecorator } from '~/mocks/browser'
-import { AppMetricsResponse } from './appMetricsSceneLogic'
+import { useEffect } from 'react'
+import { App } from 'scenes/App'
import { urls } from 'scenes/urls'
-import { AvailableFeature } from '~/types'
+
+import { mswDecorator } from '~/mocks/browser'
import { useAvailableFeatures } from '~/mocks/features'
+import { AvailableFeature } from '~/types'
+
+import { AppMetricsResponse } from './appMetricsSceneLogic'
const meta: Meta = {
title: 'Scenes-App/Apps/App Metrics',
diff --git a/frontend/src/scenes/apps/AppMetricsScene.tsx b/frontend/src/scenes/apps/AppMetricsScene.tsx
index 7b4c62f3d1b83..e129ff60be3b0 100644
--- a/frontend/src/scenes/apps/AppMetricsScene.tsx
+++ b/frontend/src/scenes/apps/AppMetricsScene.tsx
@@ -1,22 +1,24 @@
-import { SceneExport } from 'scenes/sceneTypes'
-import { appMetricsSceneLogic } from 'scenes/apps/appMetricsSceneLogic'
-import { PageHeader } from 'lib/components/PageHeader'
-import { useValues, useActions } from 'kea'
-import { MetricsTab } from './MetricsTab'
-import { HistoricalExportsTab } from './HistoricalExportsTab'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { ErrorDetailsModal } from './ErrorDetailsModal'
+import { LemonButton } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
import { ActivityLog } from 'lib/components/ActivityLog/ActivityLog'
import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
+import { PageHeader } from 'lib/components/PageHeader'
+import { IconSettings } from 'lib/lemon-ui/icons'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
-import { PluginTags } from 'scenes/plugins/tabs/apps/components'
+import { appMetricsSceneLogic } from 'scenes/apps/appMetricsSceneLogic'
import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
-import { AppLogsTab } from './AppLogsTab'
-import { LemonButton } from '@posthog/lemon-ui'
-import { IconSettings } from 'lib/lemon-ui/icons'
import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+import { PluginTags } from 'scenes/plugins/tabs/apps/components'
+import { SceneExport } from 'scenes/sceneTypes'
+
import { AppMetricsTab } from '~/types'
+import { AppLogsTab } from './AppLogsTab'
+import { ErrorDetailsModal } from './ErrorDetailsModal'
+import { HistoricalExportsTab } from './HistoricalExportsTab'
+import { MetricsTab } from './MetricsTab'
+
export const scene: SceneExport = {
component: AppMetrics,
logic: appMetricsSceneLogic,
diff --git a/frontend/src/scenes/apps/ErrorDetailsModal.tsx b/frontend/src/scenes/apps/ErrorDetailsModal.tsx
index 926177cd552fb..e4c643a5b422b 100644
--- a/frontend/src/scenes/apps/ErrorDetailsModal.tsx
+++ b/frontend/src/scenes/apps/ErrorDetailsModal.tsx
@@ -1,13 +1,14 @@
-import { useState } from 'react'
import { useActions, useValues } from 'kea'
-import { AppMetricErrorDetail, appMetricsSceneLogic } from './appMetricsSceneLogic'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
import { TZLabel } from 'lib/components/TZLabel'
-import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconChevronLeft, IconChevronRight, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+import { useState } from 'react'
+
+import { AppMetricErrorDetail, appMetricsSceneLogic } from './appMetricsSceneLogic'
export function ErrorDetailsModal(): JSX.Element {
const { errorDetails, errorDetailsModalError, errorDetailsLoading } = useValues(appMetricsSceneLogic)
diff --git a/frontend/src/scenes/apps/FrontendAppScene.tsx b/frontend/src/scenes/apps/FrontendAppScene.tsx
index 84bb63518c32f..bc0f2146fdf6f 100644
--- a/frontend/src/scenes/apps/FrontendAppScene.tsx
+++ b/frontend/src/scenes/apps/FrontendAppScene.tsx
@@ -1,8 +1,8 @@
-import { SceneExport } from 'scenes/sceneTypes'
import { useValues } from 'kea'
-import { frontendAppSceneLogic } from 'scenes/apps/frontendAppSceneLogic'
import { PageHeader } from 'lib/components/PageHeader'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
+import { frontendAppSceneLogic } from 'scenes/apps/frontendAppSceneLogic'
+import { SceneExport } from 'scenes/sceneTypes'
export function FrontendAppScene(): JSX.Element {
const { Component, appConfig, breadcrumbs } = useValues(frontendAppSceneLogic)
diff --git a/frontend/src/scenes/apps/HistoricalExport.tsx b/frontend/src/scenes/apps/HistoricalExport.tsx
index 0642110b3b3c9..2a9415e75146f 100644
--- a/frontend/src/scenes/apps/HistoricalExport.tsx
+++ b/frontend/src/scenes/apps/HistoricalExport.tsx
@@ -1,9 +1,11 @@
import { Card } from 'antd'
import { useValues } from 'kea'
+
+import { AppMetricsTab } from '~/types'
+
import { AppMetricsGraph } from './AppMetricsGraph'
import { historicalExportLogic, HistoricalExportLogicProps } from './historicalExportLogic'
import { ErrorsOverview, MetricsOverview } from './MetricsTab'
-import { AppMetricsTab } from '~/types'
export function HistoricalExport(props: HistoricalExportLogicProps): JSX.Element {
const { data, dataLoading } = useValues(historicalExportLogic(props))
diff --git a/frontend/src/scenes/apps/HistoricalExportsTab.tsx b/frontend/src/scenes/apps/HistoricalExportsTab.tsx
index ed94dcbeb1433..974337a54cb48 100644
--- a/frontend/src/scenes/apps/HistoricalExportsTab.tsx
+++ b/frontend/src/scenes/apps/HistoricalExportsTab.tsx
@@ -1,15 +1,16 @@
+import { Progress } from 'antd'
import { useActions, useValues } from 'kea'
-import { appMetricsSceneLogic, HistoricalExportInfo } from './appMetricsSceneLogic'
+import { LemonButton } from 'lib/lemon-ui/LemonButton/LemonButton'
import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
-import { HistoricalExport } from './HistoricalExport'
import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { Progress } from 'antd'
-import { PluginJobModal } from 'scenes/plugins/edit/interface-jobs/PluginJobConfiguration'
import { useEffect } from 'react'
-import { LemonButton } from 'lib/lemon-ui/LemonButton/LemonButton'
+import { PluginJobModal } from 'scenes/plugins/edit/interface-jobs/PluginJobConfiguration'
import { userLogic } from 'scenes/userLogic'
+import { appMetricsSceneLogic, HistoricalExportInfo } from './appMetricsSceneLogic'
+import { HistoricalExport } from './HistoricalExport'
+
const RELOAD_HISTORICAL_EXPORTS_FREQUENCY_MS = 20000
export function HistoricalExportsTab(): JSX.Element {
diff --git a/frontend/src/scenes/apps/MetricsTab.tsx b/frontend/src/scenes/apps/MetricsTab.tsx
index 425219384c912..635039f37377a 100644
--- a/frontend/src/scenes/apps/MetricsTab.tsx
+++ b/frontend/src/scenes/apps/MetricsTab.tsx
@@ -1,17 +1,19 @@
-import { AppErrorSummary, AppMetrics, appMetricsSceneLogic } from './appMetricsSceneLogic'
-import { DescriptionColumns } from './constants'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { humanFriendlyDuration, humanFriendlyNumber } from 'lib/utils'
-import { AppMetricsGraph } from './AppMetricsGraph'
-import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
import { useActions, useValues } from 'kea'
-import { LemonTable } from 'lib/lemon-ui/LemonTable'
import { TZLabel } from 'lib/components/TZLabel'
+import { IconInfo } from 'lib/lemon-ui/icons'
+import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+import { LemonTable } from 'lib/lemon-ui/LemonTable'
import { Link } from 'lib/lemon-ui/Link'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { IconInfo } from 'lib/lemon-ui/icons'
+import { humanFriendlyDuration, humanFriendlyNumber } from 'lib/utils'
+
import { AppMetricsTab } from '~/types'
+import { AppMetricsGraph } from './AppMetricsGraph'
+import { AppErrorSummary, AppMetrics, appMetricsSceneLogic } from './appMetricsSceneLogic'
+import { DescriptionColumns } from './constants'
+
export interface MetricsTabProps {
tab: AppMetricsTab
}
diff --git a/frontend/src/scenes/apps/appMetricsSceneLogic.ts b/frontend/src/scenes/apps/appMetricsSceneLogic.ts
index 577b3624e6287..ca4b4239691c5 100644
--- a/frontend/src/scenes/apps/appMetricsSceneLogic.ts
+++ b/frontend/src/scenes/apps/appMetricsSceneLogic.ts
@@ -1,18 +1,19 @@
-import { kea, key, props, path, actions, selectors, reducers, listeners } from 'kea'
+import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-
-import type { appMetricsSceneLogicType } from './appMetricsSceneLogicType'
-import { urls } from 'scenes/urls'
-import { AppMetricsTab, AppMetricsUrlParams, Breadcrumb, PluginConfigWithPluginInfo, UserBasicType } from '~/types'
-import api, { PaginatedResponse } from 'lib/api'
-import { teamLogic } from 'scenes/teamLogic'
import { actionToUrl, urlToAction } from 'kea-router'
+import { router } from 'kea-router'
+import api, { PaginatedResponse } from 'lib/api'
+import { dayjs } from 'lib/dayjs'
import { toParams } from 'lib/utils'
import { HISTORICAL_EXPORT_JOB_NAME_V2 } from 'scenes/plugins/edit/interface-jobs/PluginJobConfiguration'
-import { interfaceJobsLogic, InterfaceJobsProps } from '../plugins/edit/interface-jobs/interfaceJobsLogic'
-import { dayjs } from 'lib/dayjs'
-import { router } from 'kea-router'
import { Scene } from 'scenes/sceneTypes'
+import { teamLogic } from 'scenes/teamLogic'
+import { urls } from 'scenes/urls'
+
+import { AppMetricsTab, AppMetricsUrlParams, Breadcrumb, PluginConfigWithPluginInfo, UserBasicType } from '~/types'
+
+import { interfaceJobsLogic, InterfaceJobsProps } from '../plugins/edit/interface-jobs/interfaceJobsLogic'
+import type { appMetricsSceneLogicType } from './appMetricsSceneLogicType'
export interface AppMetricsLogicProps {
/** Used as the logic's key */
diff --git a/frontend/src/scenes/apps/frontendAppRequire.ts b/frontend/src/scenes/apps/frontendAppRequire.ts
index f0df491e00ee4..2714d4e0c20c0 100644
--- a/frontend/src/scenes/apps/frontendAppRequire.ts
+++ b/frontend/src/scenes/apps/frontendAppRequire.ts
@@ -1,11 +1,11 @@
+import * as appsCommon from '@posthog/apps-common'
+import * as lemonUi from '@posthog/lemon-ui'
import * as allKea from 'kea'
-import * as allKeaRouter from 'kea-router'
-import * as allKeaLoaders from 'kea-loaders'
import * as allKeaForms from 'kea-forms'
-import * as allKeaWindowValues from 'kea-window-values'
+import * as allKeaLoaders from 'kea-loaders'
+import * as allKeaRouter from 'kea-router'
import * as allKeaSubscriptions from 'kea-subscriptions'
-import * as appsCommon from '@posthog/apps-common'
-import * as lemonUi from '@posthog/lemon-ui'
+import * as allKeaWindowValues from 'kea-window-values'
import React from 'react'
const packages = {
diff --git a/frontend/src/scenes/apps/frontendAppSceneLogic.ts b/frontend/src/scenes/apps/frontendAppSceneLogic.ts
index a165a79be9482..d60075bb66c84 100644
--- a/frontend/src/scenes/apps/frontendAppSceneLogic.ts
+++ b/frontend/src/scenes/apps/frontendAppSceneLogic.ts
@@ -1,9 +1,11 @@
-import { BuiltLogic, connect, kea, key, LogicWrapper, props, selectors, path } from 'kea'
+import { BuiltLogic, connect, kea, key, LogicWrapper, path, props, selectors } from 'kea'
+import { subscriptions } from 'kea-subscriptions'
+import { objectsEqual } from 'lib/utils'
import { frontendAppsLogic } from 'scenes/apps/frontendAppsLogic'
+
import { Breadcrumb, FrontendApp, FrontendAppConfig } from '~/types'
+
import type { frontendAppSceneLogicType } from './frontendAppSceneLogicType'
-import { subscriptions } from 'kea-subscriptions'
-import { objectsEqual } from 'lib/utils'
export interface FrontendAppSceneLogicProps {
/** Used as the logic's key */
@@ -15,9 +17,9 @@ export const frontendAppSceneLogic = kea([
path(['scenes', 'apps', 'frontendAppSceneLogic']),
props({} as FrontendAppSceneLogicProps),
key((props) => props.id),
- connect({
+ connect(() => ({
values: [frontendAppsLogic, ['frontendApps', 'appConfigs']],
- }),
+ })),
selectors(() => ({
// Frontend app created after receiving a bundle via import('').getFrontendApp()
frontendApp: [
diff --git a/frontend/src/scenes/apps/frontendAppsLogic.tsx b/frontend/src/scenes/apps/frontendAppsLogic.tsx
index 1405c620eed87..a8e24d32a3dfd 100644
--- a/frontend/src/scenes/apps/frontendAppsLogic.tsx
+++ b/frontend/src/scenes/apps/frontendAppsLogic.tsx
@@ -1,13 +1,15 @@
import { actions, afterMount, connect, defaults, kea, path, reducers } from 'kea'
-import type { frontendAppsLogicType } from './frontendAppsLogicType'
-import { getAppContext } from 'lib/utils/getAppContext'
import { loaders } from 'kea-loaders'
-import { FrontendApp, FrontendAppConfig } from '~/types'
-import { frontendAppRequire } from './frontendAppRequire'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { getAppContext } from 'lib/utils/getAppContext'
import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
import { urls } from 'scenes/urls'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+
+import { FrontendApp, FrontendAppConfig } from '~/types'
+
+import { frontendAppRequire } from './frontendAppRequire'
+import type { frontendAppsLogicType } from './frontendAppsLogicType'
/** Manages the loading and lifecycle of frontend apps. */
export const frontendAppsLogic = kea([
diff --git a/frontend/src/scenes/apps/historicalExportLogic.ts b/frontend/src/scenes/apps/historicalExportLogic.ts
index 80fdfe5735f82..710a90823f067 100644
--- a/frontend/src/scenes/apps/historicalExportLogic.ts
+++ b/frontend/src/scenes/apps/historicalExportLogic.ts
@@ -1,9 +1,9 @@
-import { kea, events, key, props, path } from 'kea'
+import { events, kea, key, path, props } from 'kea'
import { loaders } from 'kea-loaders'
import api from 'lib/api'
+
import { teamLogic } from '../teamLogic'
import { AppErrorSummary, AppMetrics, HistoricalExportInfo } from './appMetricsSceneLogic'
-
import type { historicalExportLogicType } from './historicalExportLogicType'
export interface HistoricalExportLogicProps {
diff --git a/frontend/src/scenes/authentication/InviteSignup.stories.tsx b/frontend/src/scenes/authentication/InviteSignup.stories.tsx
index 2f138aefa6c66..6cc336caf2d18 100644
--- a/frontend/src/scenes/authentication/InviteSignup.stories.tsx
+++ b/frontend/src/scenes/authentication/InviteSignup.stories.tsx
@@ -1,8 +1,10 @@
// Signup.stories.tsx
import { Meta } from '@storybook/react'
import { useEffect } from 'react'
+
import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
import preflightJson from '~/mocks/fixtures/_preflight.json'
+
import { InviteSignup } from './InviteSignup'
import { inviteSignupLogic } from './inviteSignupLogic'
diff --git a/frontend/src/scenes/authentication/InviteSignup.tsx b/frontend/src/scenes/authentication/InviteSignup.tsx
index 3c4c780eb3f6e..00705231015a4 100644
--- a/frontend/src/scenes/authentication/InviteSignup.tsx
+++ b/frontend/src/scenes/authentication/InviteSignup.tsx
@@ -1,22 +1,24 @@
+import { LemonButton, LemonCheckbox, LemonDivider, LemonInput } from '@posthog/lemon-ui'
+import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { inviteSignupLogic, ErrorCodes } from './inviteSignupLogic'
-import { userLogic } from 'scenes/userLogic'
-import { PrevalidatedInvite } from '~/types'
-import { Link } from 'lib/lemon-ui/Link'
+import { Form } from 'kea-forms'
+import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import PasswordStrength from 'lib/components/PasswordStrength'
+import SignupRoleSelect from 'lib/components/SignupRoleSelect'
import { SocialLoginButtons } from 'lib/components/SocialLoginButton/SocialLoginButton'
-import { urls } from 'scenes/urls'
-import { SceneExport } from 'scenes/sceneTypes'
+import { Field, PureField } from 'lib/forms/Field'
+import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons'
+import { Link } from 'lib/lemon-ui/Link'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
-import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons'
-import { LemonButton, LemonCheckbox, LemonDivider, LemonInput } from '@posthog/lemon-ui'
-import { Form } from 'kea-forms'
-import { Field, PureField } from 'lib/forms/Field'
-import PasswordStrength from 'lib/components/PasswordStrength'
-import clsx from 'clsx'
-import { BridgePage } from 'lib/components/BridgePage/BridgePage'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import SignupRoleSelect from 'lib/components/SignupRoleSelect'
+import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
+
+import { PrevalidatedInvite } from '~/types'
+
+import { ErrorCodes, inviteSignupLogic } from './inviteSignupLogic'
import { SupportModalButton } from './SupportModalButton'
export const scene: SceneExport = {
diff --git a/frontend/src/scenes/authentication/Login.stories.tsx b/frontend/src/scenes/authentication/Login.stories.tsx
index f6ffca2742686..8c92d465c6143 100644
--- a/frontend/src/scenes/authentication/Login.stories.tsx
+++ b/frontend/src/scenes/authentication/Login.stories.tsx
@@ -1,13 +1,15 @@
// Login.stories.tsx
import { Meta, StoryFn } from '@storybook/react'
-import { Login } from './Login'
-import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
-import { useEffect } from 'react'
-import preflightJson from '../../mocks/fixtures/_preflight.json'
import { router } from 'kea-router'
+import { useEffect } from 'react'
import { urls } from 'scenes/urls'
-import { loginLogic } from './loginLogic'
+
+import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
+
+import preflightJson from '../../mocks/fixtures/_preflight.json'
+import { Login } from './Login'
import { Login2FA } from './Login2FA'
+import { loginLogic } from './loginLogic'
const meta: Meta = {
title: 'Scenes-Other/Login',
diff --git a/frontend/src/scenes/authentication/Login.tsx b/frontend/src/scenes/authentication/Login.tsx
index 82552cbc2399f..6e3045f29b51b 100644
--- a/frontend/src/scenes/authentication/Login.tsx
+++ b/frontend/src/scenes/authentication/Login.tsx
@@ -1,20 +1,22 @@
-import { useEffect, useRef } from 'react'
import './Login.scss'
-import { useActions, useValues } from 'kea'
-import { loginLogic } from './loginLogic'
-import { Link } from 'lib/lemon-ui/Link'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { SocialLoginButtons, SSOEnforcedLoginButton } from 'lib/components/SocialLoginButton/SocialLoginButton'
-import clsx from 'clsx'
-import { SceneExport } from 'scenes/sceneTypes'
+
import { LemonButton, LemonInput } from '@posthog/lemon-ui'
+import { captureException } from '@sentry/react'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
+import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import { SocialLoginButtons, SSOEnforcedLoginButton } from 'lib/components/SocialLoginButton/SocialLoginButton'
import { Field } from 'lib/forms/Field'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { BridgePage } from 'lib/components/BridgePage/BridgePage'
-import RegionSelect from './RegionSelect'
+import { Link } from 'lib/lemon-ui/Link'
+import { useEffect, useRef } from 'react'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { loginLogic } from './loginLogic'
import { redirectIfLoggedInOtherInstance } from './redirectToLoggedInInstance'
-import { captureException } from '@sentry/react'
+import RegionSelect from './RegionSelect'
import { SupportModalButton } from './SupportModalButton'
import { useButtonStyle } from './useButtonStyles'
diff --git a/frontend/src/scenes/authentication/Login2FA.tsx b/frontend/src/scenes/authentication/Login2FA.tsx
index 7dfa004e16b5d..c1bb53c1e59d4 100644
--- a/frontend/src/scenes/authentication/Login2FA.tsx
+++ b/frontend/src/scenes/authentication/Login2FA.tsx
@@ -1,11 +1,12 @@
+import { LemonButton, LemonInput } from '@posthog/lemon-ui'
import { useValues } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { login2FALogic } from './login2FALogic'
import { Form } from 'kea-forms'
+import { BridgePage } from 'lib/components/BridgePage/BridgePage'
import { Field } from 'lib/forms/Field'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { LemonButton, LemonInput } from '@posthog/lemon-ui'
-import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import { login2FALogic } from './login2FALogic'
import { useButtonStyle } from './useButtonStyles'
export function Login2FA(): JSX.Element {
diff --git a/frontend/src/scenes/authentication/PasswordReset.stories.tsx b/frontend/src/scenes/authentication/PasswordReset.stories.tsx
index 6837428f76278..4b3c6b4cdd399 100644
--- a/frontend/src/scenes/authentication/PasswordReset.stories.tsx
+++ b/frontend/src/scenes/authentication/PasswordReset.stories.tsx
@@ -1,10 +1,12 @@
// PasswordReset.stories.tsx
import { Meta } from '@storybook/react'
-import { PasswordReset } from './PasswordReset'
import { useEffect } from 'react'
+import { passwordResetLogic } from 'scenes/authentication/passwordResetLogic'
+
import { useStorybookMocks } from '~/mocks/browser'
import preflightJson from '~/mocks/fixtures/_preflight.json'
-import { passwordResetLogic } from 'scenes/authentication/passwordResetLogic'
+
+import { PasswordReset } from './PasswordReset'
// some metadata and optional parameters
const meta: Meta = {
diff --git a/frontend/src/scenes/authentication/PasswordReset.tsx b/frontend/src/scenes/authentication/PasswordReset.tsx
index 9a8a4c9e276c7..a3a7590cd48c9 100644
--- a/frontend/src/scenes/authentication/PasswordReset.tsx
+++ b/frontend/src/scenes/authentication/PasswordReset.tsx
@@ -1,18 +1,19 @@
/*
Scene to request a password reset email.
*/
-import { useActions, useValues } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { passwordResetLogic } from './passwordResetLogic'
-import { router } from 'kea-router'
-import { SceneExport } from 'scenes/sceneTypes'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { LemonButton, LemonDivider, LemonInput, Link } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
-import { Field } from 'lib/forms/Field'
+import { router } from 'kea-router'
import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
+import { Field } from 'lib/forms/Field'
import { IconCheckCircleOutline, IconErrorOutline } from 'lib/lemon-ui/icons'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { passwordResetLogic } from './passwordResetLogic'
import { SupportModalButton } from './SupportModalButton'
import { useButtonStyle } from './useButtonStyles'
diff --git a/frontend/src/scenes/authentication/PasswordResetComplete.stories.tsx b/frontend/src/scenes/authentication/PasswordResetComplete.stories.tsx
index d6c551b553594..7387cc6a3b7b0 100644
--- a/frontend/src/scenes/authentication/PasswordResetComplete.stories.tsx
+++ b/frontend/src/scenes/authentication/PasswordResetComplete.stories.tsx
@@ -1,11 +1,13 @@
// PasswordResetComplete.stories.tsx
import { Meta } from '@storybook/react'
-import { PasswordResetComplete } from './PasswordResetComplete'
-import { useEffect } from 'react'
import { router } from 'kea-router'
+import { useEffect } from 'react'
import { urls } from 'scenes/urls'
+
import { useStorybookMocks } from '~/mocks/browser'
+import { PasswordResetComplete } from './PasswordResetComplete'
+
// some metadata and optional parameters
const meta: Meta = {
title: 'Scenes-Other/Password Reset Complete',
diff --git a/frontend/src/scenes/authentication/PasswordResetComplete.tsx b/frontend/src/scenes/authentication/PasswordResetComplete.tsx
index 27a32962d2961..49e1a4e93742d 100644
--- a/frontend/src/scenes/authentication/PasswordResetComplete.tsx
+++ b/frontend/src/scenes/authentication/PasswordResetComplete.tsx
@@ -1,17 +1,18 @@
/*
Scene to enter a new password from a received reset link
*/
-import { useValues } from 'kea'
-import { passwordResetLogic } from './passwordResetLogic'
-import { SceneExport } from 'scenes/sceneTypes'
-import { Field } from 'lib/forms/Field'
import { LemonButton, LemonInput } from '@posthog/lemon-ui'
-import PasswordStrength from 'lib/components/PasswordStrength'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { useValues } from 'kea'
import { Form } from 'kea-forms'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import PasswordStrength from 'lib/components/PasswordStrength'
+import { Field } from 'lib/forms/Field'
import { IconErrorOutline } from 'lib/lemon-ui/icons'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { passwordResetLogic } from './passwordResetLogic'
export const scene: SceneExport = {
component: PasswordResetComplete,
diff --git a/frontend/src/scenes/authentication/RegionSelect.tsx b/frontend/src/scenes/authentication/RegionSelect.tsx
index c380579f55d7c..161ced67a365d 100644
--- a/frontend/src/scenes/authentication/RegionSelect.tsx
+++ b/frontend/src/scenes/authentication/RegionSelect.tsx
@@ -1,14 +1,14 @@
-import { useState } from 'react'
-import { useValues } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { LemonModal, LemonSelect } from '@posthog/lemon-ui'
-import { Region } from '~/types'
-import { CLOUD_HOSTNAMES, FEATURE_FLAGS } from 'lib/constants'
+import { useValues } from 'kea'
import { router } from 'kea-router'
-
+import { CLOUD_HOSTNAMES, FEATURE_FLAGS } from 'lib/constants'
import { PureField } from 'lib/forms/Field'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { IconCheckmark } from 'lib/lemon-ui/icons'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { useState } from 'react'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import { Region } from '~/types'
const sections = [
{
diff --git a/frontend/src/scenes/authentication/Setup2FA.tsx b/frontend/src/scenes/authentication/Setup2FA.tsx
index 8c9360d8a01ee..dcc3113d18e44 100644
--- a/frontend/src/scenes/authentication/Setup2FA.tsx
+++ b/frontend/src/scenes/authentication/Setup2FA.tsx
@@ -1,10 +1,12 @@
-import { setup2FALogic } from './setup2FALogic'
+import './Setup2FA.scss'
+
import { LemonButton, LemonInput } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
import { Form } from 'kea-forms'
import { Field } from 'lib/forms/Field'
-import { useValues } from 'kea'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import './Setup2FA.scss'
+
+import { setup2FALogic } from './setup2FALogic'
export function Setup2FA({ onSuccess }: { onSuccess: () => void }): JSX.Element | null {
const { startSetupLoading, generalError } = useValues(setup2FALogic({ onSuccess }))
diff --git a/frontend/src/scenes/authentication/SupportModalButton.tsx b/frontend/src/scenes/authentication/SupportModalButton.tsx
index 557b894d609f3..1beaed9a86e02 100644
--- a/frontend/src/scenes/authentication/SupportModalButton.tsx
+++ b/frontend/src/scenes/authentication/SupportModalButton.tsx
@@ -1,7 +1,7 @@
import { LemonButton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { SupportModal } from 'lib/components/Support/SupportModal'
import { supportLogic } from 'lib/components/Support/supportLogic'
+import { SupportModal } from 'lib/components/Support/SupportModal'
import { IconBugShield } from 'lib/lemon-ui/icons'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
diff --git a/frontend/src/scenes/authentication/WelcomeLogo.tsx b/frontend/src/scenes/authentication/WelcomeLogo.tsx
index ac96c6f39989a..74f86005ab386 100644
--- a/frontend/src/scenes/authentication/WelcomeLogo.tsx
+++ b/frontend/src/scenes/authentication/WelcomeLogo.tsx
@@ -1,9 +1,9 @@
+import { Link } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import defaultLogo from 'public/posthog-logo.svg'
import cloudLogo from 'public/posthog-logo-cloud.svg'
import demoLogo from 'public/posthog-logo-demo.svg'
-import defaultLogo from 'public/posthog-logo.svg'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { useValues } from 'kea'
-import { Link } from '@posthog/lemon-ui'
export function WelcomeLogo({ view }: { view?: string }): JSX.Element {
const UTM_TAGS = `utm_campaign=in-product&utm_tag=${view || 'welcome'}-header`
diff --git a/frontend/src/scenes/authentication/inviteSignupLogic.ts b/frontend/src/scenes/authentication/inviteSignupLogic.ts
index 23f70644c1ef6..4950cac2750ca 100644
--- a/frontend/src/scenes/authentication/inviteSignupLogic.ts
+++ b/frontend/src/scenes/authentication/inviteSignupLogic.ts
@@ -1,9 +1,11 @@
-import { kea, path, actions, reducers, listeners } from 'kea'
+import { actions, kea, listeners, path, reducers } from 'kea'
+import { forms } from 'kea-forms'
import { loaders } from 'kea-loaders'
import { urlToAction } from 'kea-router'
-import { forms } from 'kea-forms'
import api from 'lib/api'
+
import { PrevalidatedInvite } from '~/types'
+
import type { inviteSignupLogicType } from './inviteSignupLogicType'
export enum ErrorCodes {
diff --git a/frontend/src/scenes/authentication/login2FALogic.ts b/frontend/src/scenes/authentication/login2FALogic.ts
index 796dfc764f764..4da5deb50adbe 100644
--- a/frontend/src/scenes/authentication/login2FALogic.ts
+++ b/frontend/src/scenes/authentication/login2FALogic.ts
@@ -1,12 +1,13 @@
-import { kea, path, connect, listeners, actions, reducers } from 'kea'
+import { actions, connect, kea, listeners, path, reducers } from 'kea'
import { forms } from 'kea-forms'
import api from 'lib/api'
-import { SSOProvider } from '~/types'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { handleLoginRedirect } from './loginLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import { SSOProvider } from '~/types'
import type { login2FALogicType } from './login2FALogicType'
+import { handleLoginRedirect } from './loginLogic'
export interface AuthenticateResponseType {
success: boolean
diff --git a/frontend/src/scenes/authentication/loginLogic.test.ts b/frontend/src/scenes/authentication/loginLogic.test.ts
index 063c22f5df8cf..de694690d4298 100644
--- a/frontend/src/scenes/authentication/loginLogic.test.ts
+++ b/frontend/src/scenes/authentication/loginLogic.test.ts
@@ -1,8 +1,9 @@
-import { handleLoginRedirect, loginLogic } from 'scenes/authentication/loginLogic'
-import { initKeaTests } from '~/test/init'
import { router } from 'kea-router'
-import { initKea } from '~/initKea'
import { testUtilsPlugin } from 'kea-test-utils'
+import { handleLoginRedirect, loginLogic } from 'scenes/authentication/loginLogic'
+
+import { initKea } from '~/initKea'
+import { initKeaTests } from '~/test/init'
describe('loginLogic', () => {
describe('parseLoginRedirectURL', () => {
diff --git a/frontend/src/scenes/authentication/loginLogic.ts b/frontend/src/scenes/authentication/loginLogic.ts
index ca159812bc771..419f04e3c91d6 100644
--- a/frontend/src/scenes/authentication/loginLogic.ts
+++ b/frontend/src/scenes/authentication/loginLogic.ts
@@ -1,16 +1,18 @@
-import { kea, path, connect, listeners, actions, reducers } from 'kea'
+import { actions, connect, kea, listeners, path, reducers } from 'kea'
+import { forms } from 'kea-forms'
import { loaders } from 'kea-loaders'
import { urlToAction } from 'kea-router'
-import { forms } from 'kea-forms'
-import api from 'lib/api'
-import type { loginLogicType } from './loginLogicType'
import { router } from 'kea-router'
-import { SSOProvider } from '~/types'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import api from 'lib/api'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { urls } from 'scenes/urls'
+import { SSOProvider } from '~/types'
+
+import type { loginLogicType } from './loginLogicType'
+
export interface AuthenticateResponseType {
success: boolean
errorCode?: string
diff --git a/frontend/src/scenes/authentication/passwordResetLogic.ts b/frontend/src/scenes/authentication/passwordResetLogic.ts
index b4835fcce495e..487510514e474 100644
--- a/frontend/src/scenes/authentication/passwordResetLogic.ts
+++ b/frontend/src/scenes/authentication/passwordResetLogic.ts
@@ -1,9 +1,10 @@
import { kea, path, reducers } from 'kea'
+import { forms } from 'kea-forms'
import { loaders } from 'kea-loaders'
import { urlToAction } from 'kea-router'
-import { forms } from 'kea-forms'
import api from 'lib/api'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
+
import type { passwordResetLogicType } from './passwordResetLogicType'
export interface ResponseType {
diff --git a/frontend/src/scenes/authentication/redirectToLoggedInInstance.ts b/frontend/src/scenes/authentication/redirectToLoggedInInstance.ts
index 479a9a50f4b78..b5e5bf852f8ec 100644
--- a/frontend/src/scenes/authentication/redirectToLoggedInInstance.ts
+++ b/frontend/src/scenes/authentication/redirectToLoggedInInstance.ts
@@ -22,8 +22,8 @@
*/
import { lemonToast } from '@posthog/lemon-ui'
-import { getCookie } from 'lib/api'
import { captureException } from '@sentry/react'
+import { getCookie } from 'lib/api'
// cookie values
const PH_CURRENT_INSTANCE = 'ph_current_instance'
diff --git a/frontend/src/scenes/authentication/setup2FALogic.ts b/frontend/src/scenes/authentication/setup2FALogic.ts
index b76de829f2cdb..7fe843a95fdaf 100644
--- a/frontend/src/scenes/authentication/setup2FALogic.ts
+++ b/frontend/src/scenes/authentication/setup2FALogic.ts
@@ -1,10 +1,10 @@
-import { kea, path, connect, afterMount, listeners, actions, reducers, props } from 'kea'
-import { loaders } from 'kea-loaders'
+import { lemonToast } from '@posthog/lemon-ui'
+import { actions, afterMount, connect, kea, listeners, path, props, reducers } from 'kea'
import { forms } from 'kea-forms'
+import { loaders } from 'kea-loaders'
import api from 'lib/api'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { lemonToast } from '@posthog/lemon-ui'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import type { setup2FALogicType } from './setup2FALogicType'
diff --git a/frontend/src/scenes/authentication/signup/Signup.stories.tsx b/frontend/src/scenes/authentication/signup/Signup.stories.tsx
index 0ebdd83f170fd..7fe843e9433c2 100644
--- a/frontend/src/scenes/authentication/signup/Signup.stories.tsx
+++ b/frontend/src/scenes/authentication/signup/Signup.stories.tsx
@@ -1,9 +1,11 @@
// Signup.stories.tsx
import { Meta } from '@storybook/react'
import { useEffect } from 'react'
-import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
import { userLogic } from 'scenes/userLogic'
+
+import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
import preflightJson from '~/mocks/fixtures/_preflight.json'
+
import { SignupContainer } from './SignupContainer'
const meta: Meta = {
diff --git a/frontend/src/scenes/authentication/signup/SignupContainer.tsx b/frontend/src/scenes/authentication/signup/SignupContainer.tsx
index 6dce9f08abe6d..1fea3ff456e73 100644
--- a/frontend/src/scenes/authentication/signup/SignupContainer.tsx
+++ b/frontend/src/scenes/authentication/signup/SignupContainer.tsx
@@ -1,15 +1,17 @@
import { useValues } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { userLogic } from 'scenes/userLogic'
-import { SceneExport } from 'scenes/sceneTypes'
-import { BridgePage } from 'lib/components/BridgePage/BridgePage'
-import { SignupForm } from './signupForm/SignupForm'
-import { Region } from '~/types'
import { router } from 'kea-router'
-import { Link } from 'lib/lemon-ui/Link'
-import { IconCheckCircleOutline } from 'lib/lemon-ui/icons'
+import { BridgePage } from 'lib/components/BridgePage/BridgePage'
import { CLOUD_HOSTNAMES, FEATURE_FLAGS } from 'lib/constants'
+import { IconCheckCircleOutline } from 'lib/lemon-ui/icons'
+import { Link } from 'lib/lemon-ui/Link'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { SceneExport } from 'scenes/sceneTypes'
+import { userLogic } from 'scenes/userLogic'
+
+import { Region } from '~/types'
+
+import { SignupForm } from './signupForm/SignupForm'
export const scene: SceneExport = {
component: SignupContainer,
diff --git a/frontend/src/scenes/authentication/signup/signupForm/SignupForm.tsx b/frontend/src/scenes/authentication/signup/signupForm/SignupForm.tsx
index 897fa059db68d..3569e017d4645 100644
--- a/frontend/src/scenes/authentication/signup/signupForm/SignupForm.tsx
+++ b/frontend/src/scenes/authentication/signup/signupForm/SignupForm.tsx
@@ -1,15 +1,16 @@
-import { useEffect, useState } from 'react'
-import { useActions, useValues } from 'kea'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { signupLogic } from './signupLogic'
-import { userLogic } from '../../../userLogic'
-import { SceneExport } from 'scenes/sceneTypes'
import { LemonButton } from '@posthog/lemon-ui'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { useActions, useValues } from 'kea'
import { IconArrowLeft } from 'lib/lemon-ui/icons'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
+import { useEffect, useState } from 'react'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { userLogic } from '../../../userLogic'
import { SignupPanel1 } from './panels/SignupPanel1'
import { SignupPanel2 } from './panels/SignupPanel2'
+import { signupLogic } from './signupLogic'
export const scene: SceneExport = {
component: SignupForm,
diff --git a/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx b/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx
index b9eca413dcf47..088644afa997d 100644
--- a/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx
+++ b/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel1.tsx
@@ -1,14 +1,15 @@
-import { useRef, useEffect } from 'react'
-import { LemonInput, LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, LemonInput } from '@posthog/lemon-ui'
import { useValues } from 'kea'
import { Form } from 'kea-forms'
-import { Field } from 'lib/forms/Field'
import PasswordStrength from 'lib/components/PasswordStrength'
import { SocialLoginButtons } from 'lib/components/SocialLoginButton/SocialLoginButton'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { signupLogic } from '../signupLogic'
+import { Field } from 'lib/forms/Field'
import { Link } from 'lib/lemon-ui/Link'
+import { useEffect, useRef } from 'react'
import { useButtonStyle } from 'scenes/authentication/useButtonStyles'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
+import { signupLogic } from '../signupLogic'
export function SignupPanel1(): JSX.Element | null {
const { preflight } = useValues(preflightLogic)
diff --git a/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel2.tsx b/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel2.tsx
index 801f02e626464..a6d893ca97537 100644
--- a/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel2.tsx
+++ b/frontend/src/scenes/authentication/signup/signupForm/panels/SignupPanel2.tsx
@@ -1,12 +1,13 @@
-import { LemonInput, LemonButton, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonInput, Link } from '@posthog/lemon-ui'
import { useValues } from 'kea'
import { Form } from 'kea-forms'
+import SignupReferralSource from 'lib/components/SignupReferralSource'
import SignupRoleSelect from 'lib/components/SignupRoleSelect'
import { Field } from 'lib/forms/Field'
+import { useButtonStyle } from 'scenes/authentication/useButtonStyles'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
import { signupLogic } from '../signupLogic'
-import SignupReferralSource from 'lib/components/SignupReferralSource'
-import { useButtonStyle } from 'scenes/authentication/useButtonStyles'
const UTM_TAGS = 'utm_campaign=in-product&utm_tag=signup-header'
diff --git a/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts b/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
index 3806235fe9939..803f47ecad608 100644
--- a/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
+++ b/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
@@ -1,14 +1,15 @@
-import { kea, path, connect, actions, reducers } from 'kea'
-import { urlToAction } from 'kea-router'
+import { lemonToast } from '@posthog/lemon-ui'
+import { isString } from '@tiptap/core'
+import { actions, connect, kea, path, reducers } from 'kea'
import { forms } from 'kea-forms'
+import { urlToAction } from 'kea-router'
import api from 'lib/api'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import type { signupLogicType } from './signupLogicType'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { CLOUD_HOSTNAMES, FEATURE_FLAGS } from 'lib/constants'
-import { lemonToast } from '@posthog/lemon-ui'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { urls } from 'scenes/urls'
-import { isString } from '@tiptap/core'
+
+import type { signupLogicType } from './signupLogicType'
export interface AccountResponse {
success: boolean
diff --git a/frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx b/frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx
index f770d53674b39..723bb6061d41b 100644
--- a/frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx
+++ b/frontend/src/scenes/authentication/signup/verify-email/VerifyEmail.tsx
@@ -2,11 +2,12 @@ import { LemonButton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { BridgePage } from 'lib/components/BridgePage/BridgePage'
import { HeartHog, MailHog, SurprisedHog } from 'lib/components/hedgehogs'
+import { supportLogic } from 'lib/components/Support/supportLogic'
+import { SupportModal } from 'lib/components/Support/SupportModal'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { SceneExport } from 'scenes/sceneTypes'
+
import { verifyEmailLogic } from './verifyEmailLogic'
-import { SupportModal } from 'lib/components/Support/SupportModal'
-import { supportLogic } from 'lib/components/Support/supportLogic'
export const scene: SceneExport = {
component: VerifyEmail,
diff --git a/frontend/src/scenes/authentication/signup/verify-email/verifyEmailLogic.ts b/frontend/src/scenes/authentication/signup/verify-email/verifyEmailLogic.ts
index 72c68e8b58423..8b28386fff3e3 100644
--- a/frontend/src/scenes/authentication/signup/verify-email/verifyEmailLogic.ts
+++ b/frontend/src/scenes/authentication/signup/verify-email/verifyEmailLogic.ts
@@ -3,6 +3,7 @@ import { loaders } from 'kea-loaders'
import { urlToAction } from 'kea-router'
import api from 'lib/api'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
+
import type { verifyEmailLogicType } from './verifyEmailLogicType'
export interface ResponseType {
diff --git a/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx b/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx
index c9a92bb9d1aa8..94d2416f57ca2 100644
--- a/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportBackfillModal.tsx
@@ -1,12 +1,11 @@
import { useActions, useValues } from 'kea'
-
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-
-import { LemonModal } from 'lib/lemon-ui/LemonModal'
import { Form } from 'kea-forms'
import { Field } from 'lib/forms/Field'
-import { batchExportLogic } from './batchExportLogic'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonCalendarSelectInput } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect'
+import { LemonModal } from 'lib/lemon-ui/LemonModal'
+
+import { batchExportLogic } from './batchExportLogic'
export function BatchExportBackfillModal(): JSX.Element {
const { batchExportConfig, isBackfillModalOpen, isBackfillFormSubmitting } = useValues(batchExportLogic)
diff --git a/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx b/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx
index 78a5d8d4dd2e6..e2774c7b38a98 100644
--- a/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx
@@ -1,17 +1,18 @@
-import { LemonInput, LemonSelect, LemonCheckbox, LemonDivider, LemonButton } from '@posthog/lemon-ui'
-import { useValues, useActions } from 'kea'
+import { LemonButton, LemonCheckbox, LemonDivider, LemonInput, LemonSelect } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { Field } from 'lib/forms/Field'
+import { IconInfo } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { LemonCalendarSelectInput } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput/LemonFileInput'
-import { IconInfo } from 'lib/lemon-ui/icons'
-import { BatchExportsEditLogicProps, batchExportsEditLogic } from './batchExportEditLogic'
-import { Field } from 'lib/forms/Field'
+import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
+
+import { batchExportsEditLogic, BatchExportsEditLogicProps } from './batchExportEditLogic'
export function BatchExportsEditForm(props: BatchExportsEditLogicProps): JSX.Element {
const logic = batchExportsEditLogic(props)
diff --git a/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx b/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx
index 3f6dfcf661597..3c9e42f872ef8 100644
--- a/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx
@@ -1,9 +1,10 @@
-import { SceneExport } from 'scenes/sceneTypes'
-import { PageHeader } from 'lib/components/PageHeader'
import { useValues } from 'kea'
-import { BatchExportsEditLogicProps, batchExportsEditLogic } from './batchExportEditLogic'
-import { batchExportsEditSceneLogic } from './batchExportEditSceneLogic'
+import { PageHeader } from 'lib/components/PageHeader'
+import { SceneExport } from 'scenes/sceneTypes'
+
import { BatchExportsEditForm } from './BatchExportEditForm'
+import { batchExportsEditLogic, BatchExportsEditLogicProps } from './batchExportEditLogic'
+import { batchExportsEditSceneLogic } from './batchExportEditSceneLogic'
export const scene: SceneExport = {
component: BatchExportsEditScene,
diff --git a/frontend/src/scenes/batch_exports/BatchExportScene.tsx b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
index f8f1b778ee6bf..244c1f55b236a 100644
--- a/frontend/src/scenes/batch_exports/BatchExportScene.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
@@ -1,36 +1,38 @@
-import { SceneExport } from 'scenes/sceneTypes'
-import { PageHeader } from 'lib/components/PageHeader'
+import { TZLabel } from '@posthog/apps-common'
import {
LemonButton,
+ LemonCheckbox,
LemonDivider,
- LemonTable,
- LemonTag,
LemonInput,
+ LemonTable,
LemonTableColumns,
- LemonCheckbox,
+ LemonTag,
} from '@posthog/lemon-ui'
-import { urls } from 'scenes/urls'
import { useActions, useValues } from 'kea'
-import { useEffect, useState } from 'react'
-import { BatchExportLogicProps, batchExportLogic, BatchExportTab } from './batchExportLogic'
-import { BatchExportLogsProps, batchExportLogsLogic, LOGS_PORTION_LIMIT } from './batchExportLogsLogic'
-import { BatchExportRunIcon, BatchExportTag } from './components'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+import { NotFound } from 'lib/components/NotFound'
+import { PageHeader } from 'lib/components/PageHeader'
+import { dayjs } from 'lib/dayjs'
import { IconEllipsis, IconRefresh } from 'lib/lemon-ui/icons'
-import { capitalizeFirstLetter, identifierToHuman } from 'lib/utils'
-import { BatchExportBackfillModal } from './BatchExportBackfillModal'
-import { humanizeDestination, intervalToFrequency, isRunInProgress } from './utils'
-import { TZLabel } from '@posthog/apps-common'
-import { Popover } from 'lib/lemon-ui/Popover'
import { LemonCalendarRange } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
-import { NotFound } from 'lib/components/NotFound'
-import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { LemonMenu } from 'lib/lemon-ui/LemonMenu'
+import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
-import { dayjs } from 'lib/dayjs'
-import { BatchExportLogEntryLevel, BatchExportLogEntry } from '~/types'
+import { Popover } from 'lib/lemon-ui/Popover'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { capitalizeFirstLetter, identifierToHuman } from 'lib/utils'
import { pluralize } from 'lib/utils'
+import { useEffect, useState } from 'react'
+import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { BatchExportLogEntry, BatchExportLogEntryLevel } from '~/types'
+
+import { BatchExportBackfillModal } from './BatchExportBackfillModal'
+import { batchExportLogic, BatchExportLogicProps, BatchExportTab } from './batchExportLogic'
+import { batchExportLogsLogic, BatchExportLogsProps, LOGS_PORTION_LIMIT } from './batchExportLogsLogic'
+import { BatchExportRunIcon, BatchExportTag } from './components'
+import { humanizeDestination, intervalToFrequency, isRunInProgress } from './utils'
export const scene: SceneExport = {
component: BatchExportScene,
diff --git a/frontend/src/scenes/batch_exports/BatchExports.stories.tsx b/frontend/src/scenes/batch_exports/BatchExports.stories.tsx
index cc4bbde8ba5ae..5b1c2f9966acf 100644
--- a/frontend/src/scenes/batch_exports/BatchExports.stories.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExports.stories.tsx
@@ -1,9 +1,11 @@
import { Meta, StoryFn } from '@storybook/react'
-import { App } from 'scenes/App'
-import { useEffect } from 'react'
import { router } from 'kea-router'
-import { mswDecorator } from '~/mocks/browser'
+import { useEffect } from 'react'
+import { App } from 'scenes/App'
import { urls } from 'scenes/urls'
+
+import { mswDecorator } from '~/mocks/browser'
+
import { createExportServiceHandlers } from './__mocks__/api-mocks'
export default {
diff --git a/frontend/src/scenes/batch_exports/BatchExportsListScene.tsx b/frontend/src/scenes/batch_exports/BatchExportsListScene.tsx
index d1883ab08dbdc..228d2ae96a82d 100644
--- a/frontend/src/scenes/batch_exports/BatchExportsListScene.tsx
+++ b/frontend/src/scenes/batch_exports/BatchExportsListScene.tsx
@@ -1,11 +1,12 @@
-import { SceneExport } from 'scenes/sceneTypes'
-import { PageHeader } from 'lib/components/PageHeader'
import { LemonButton, LemonTable, Link } from '@posthog/lemon-ui'
-import { urls } from 'scenes/urls'
import { useActions, useValues } from 'kea'
-import { batchExportsListLogic } from './batchExportsListLogic'
-import { LemonMenu, LemonMenuItems } from 'lib/lemon-ui/LemonMenu'
+import { PageHeader } from 'lib/components/PageHeader'
import { IconEllipsis } from 'lib/lemon-ui/icons'
+import { LemonMenu, LemonMenuItems } from 'lib/lemon-ui/LemonMenu'
+import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { batchExportsListLogic } from './batchExportsListLogic'
import { BatchExportRunIcon, BatchExportTag } from './components'
export const scene: SceneExport = {
diff --git a/frontend/src/scenes/batch_exports/__mocks__/api-mocks.ts b/frontend/src/scenes/batch_exports/__mocks__/api-mocks.ts
index ab62ca297b39e..b56c742569c45 100644
--- a/frontend/src/scenes/batch_exports/__mocks__/api-mocks.ts
+++ b/frontend/src/scenes/batch_exports/__mocks__/api-mocks.ts
@@ -1,4 +1,5 @@
import { CountedPaginatedResponse } from 'lib/api'
+
import { BatchExportConfiguration } from '~/types'
export const createExportServiceHandlers = (
diff --git a/frontend/src/scenes/batch_exports/batchExportEditLogic.ts b/frontend/src/scenes/batch_exports/batchExportEditLogic.ts
index 0fa15c3651b99..c2b9620d09ac9 100644
--- a/frontend/src/scenes/batch_exports/batchExportEditLogic.ts
+++ b/frontend/src/scenes/batch_exports/batchExportEditLogic.ts
@@ -1,4 +1,10 @@
import { actions, afterMount, connect, kea, key, listeners, path, props, selectors } from 'kea'
+import { forms } from 'kea-forms'
+import { beforeUnload, router } from 'kea-router'
+import api from 'lib/api'
+import { Dayjs, dayjs } from 'lib/dayjs'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
import {
BatchExportConfiguration,
@@ -11,15 +17,8 @@ import {
Breadcrumb,
} from '~/types'
-import api from 'lib/api'
-import { forms } from 'kea-forms'
-import { urls } from 'scenes/urls'
-import { beforeUnload, router } from 'kea-router'
-
import type { batchExportsEditLogicType } from './batchExportEditLogicType'
-import { dayjs, Dayjs } from 'lib/dayjs'
import { batchExportLogic } from './batchExportLogic'
-import { Scene } from 'scenes/sceneTypes'
export type BatchExportsEditLogicProps = {
id: string
diff --git a/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts b/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts
index 9d9825dea2865..e0766163ed448 100644
--- a/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts
+++ b/frontend/src/scenes/batch_exports/batchExportEditSceneLogic.ts
@@ -1,14 +1,12 @@
import { connect, kea, key, path, props, selectors } from 'kea'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
import { Breadcrumb } from '~/types'
-import { urls } from 'scenes/urls'
-
-import { batchExportLogic } from './batchExportLogic'
import { BatchExportsEditLogicProps } from './batchExportEditLogic'
-
import type { batchExportsEditSceneLogicType } from './batchExportEditSceneLogicType'
-import { Scene } from 'scenes/sceneTypes'
+import { batchExportLogic } from './batchExportLogic'
export const batchExportsEditSceneLogic = kea([
props({} as BatchExportsEditLogicProps),
diff --git a/frontend/src/scenes/batch_exports/batchExportLogic.ts b/frontend/src/scenes/batch_exports/batchExportLogic.ts
index 6c0c5ca8fcec1..37cc5fc86e649 100644
--- a/frontend/src/scenes/batch_exports/batchExportLogic.ts
+++ b/frontend/src/scenes/batch_exports/batchExportLogic.ts
@@ -1,17 +1,16 @@
+import { lemonToast } from '@posthog/lemon-ui'
import { actions, beforeUnmount, kea, key, listeners, path, props, reducers, selectors } from 'kea'
-
+import { forms } from 'kea-forms'
import { loaders } from 'kea-loaders'
-import { BatchExportConfiguration, BatchExportRun, Breadcrumb, GroupedBatchExportRuns } from '~/types'
-
+import { router } from 'kea-router'
import api, { PaginatedResponse } from 'lib/api'
-
-import { lemonToast } from '@posthog/lemon-ui'
-import { forms } from 'kea-forms'
-import { dayjs, Dayjs } from 'lib/dayjs'
+import { Dayjs, dayjs } from 'lib/dayjs'
+import { Scene } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
+
+import { BatchExportConfiguration, BatchExportRun, Breadcrumb, GroupedBatchExportRuns } from '~/types'
+
import type { batchExportLogicType } from './batchExportLogicType'
-import { router } from 'kea-router'
-import { Scene } from 'scenes/sceneTypes'
export type BatchExportLogicProps = {
id: string
diff --git a/frontend/src/scenes/batch_exports/batchExportLogsLogic.ts b/frontend/src/scenes/batch_exports/batchExportLogsLogic.ts
index b63e4f50abf20..d361b286bde6d 100644
--- a/frontend/src/scenes/batch_exports/batchExportLogsLogic.ts
+++ b/frontend/src/scenes/batch_exports/batchExportLogsLogic.ts
@@ -1,10 +1,11 @@
-import { loaders } from 'kea-loaders'
-import { kea, props, key, path, connect, actions, reducers, selectors, listeners, events } from 'kea'
-import api from '~/lib/api'
-import { BatchExportLogEntryLevel, BatchExportLogEntry } from '~/types'
import { CheckboxValueType } from 'antd/lib/checkbox/Group'
+import { actions, connect, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
import { teamLogic } from 'scenes/teamLogic'
+import api from '~/lib/api'
+import { BatchExportLogEntry, BatchExportLogEntryLevel } from '~/types'
+
import type { batchExportLogsLogicType } from './batchExportLogsLogicType'
export interface BatchExportLogsProps {
diff --git a/frontend/src/scenes/batch_exports/batchExportsListLogic.ts b/frontend/src/scenes/batch_exports/batchExportsListLogic.ts
index 5ac29c5336dcf..98171e05009ac 100644
--- a/frontend/src/scenes/batch_exports/batchExportsListLogic.ts
+++ b/frontend/src/scenes/batch_exports/batchExportsListLogic.ts
@@ -1,13 +1,12 @@
+import { lemonToast } from '@posthog/lemon-ui'
import { actions, afterMount, beforeUnmount, kea, listeners, path, reducers, selectors } from 'kea'
-
import { loaders } from 'kea-loaders'
-import { BatchExportConfiguration } from '~/types'
-
import api, { CountedPaginatedResponse } from 'lib/api'
+import { PaginationManual } from 'lib/lemon-ui/PaginationControl'
+
+import { BatchExportConfiguration } from '~/types'
import type { batchExportsListLogicType } from './batchExportsListLogicType'
-import { PaginationManual } from 'lib/lemon-ui/PaginationControl'
-import { lemonToast } from '@posthog/lemon-ui'
const PAGE_SIZE = 10
// Refresh the current page of exports periodically to see whats up.
diff --git a/frontend/src/scenes/batch_exports/components.tsx b/frontend/src/scenes/batch_exports/components.tsx
index 5e3856ce78aee..7191de9f40685 100644
--- a/frontend/src/scenes/batch_exports/components.tsx
+++ b/frontend/src/scenes/batch_exports/components.tsx
@@ -1,9 +1,10 @@
+import './BatchExports.scss'
+
import { LemonTag } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { BatchExportConfiguration, BatchExportRun } from '~/types'
-import './BatchExports.scss'
+import { BatchExportConfiguration, BatchExportRun } from '~/types'
export function BatchExportTag({ batchExportConfig }: { batchExportConfig: BatchExportConfiguration }): JSX.Element {
return (
diff --git a/frontend/src/scenes/billing/Billing.stories.tsx b/frontend/src/scenes/billing/Billing.stories.tsx
index 3a43552e646c0..ab6cbae8ea895 100644
--- a/frontend/src/scenes/billing/Billing.stories.tsx
+++ b/frontend/src/scenes/billing/Billing.stories.tsx
@@ -1,9 +1,11 @@
import { Meta } from '@storybook/react'
-import { Billing } from './Billing'
-import { useStorybookMocks, mswDecorator } from '~/mocks/browser'
-import preflightJson from '~/mocks/fixtures/_preflight.json'
+
+import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
import billingJson from '~/mocks/fixtures/_billing_v2.json'
import billingJsonWithDiscount from '~/mocks/fixtures/_billing_v2_with_discount.json'
+import preflightJson from '~/mocks/fixtures/_preflight.json'
+
+import { Billing } from './Billing'
const meta: Meta = {
title: 'Scenes-Other/Billing v2',
diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx
index 5c02c43bb2dbf..63517aa1d99b4 100644
--- a/frontend/src/scenes/billing/Billing.tsx
+++ b/frontend/src/scenes/billing/Billing.tsx
@@ -1,23 +1,24 @@
-import { useEffect } from 'react'
-import { billingLogic } from './billingLogic'
import { LemonButton, LemonDivider, LemonInput, Link } from '@posthog/lemon-ui'
+import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
+import { Field, Form } from 'kea-forms'
+import { PageHeader } from 'lib/components/PageHeader'
+import { supportLogic } from 'lib/components/Support/supportLogic'
+import { dayjs } from 'lib/dayjs'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
+import { IconPlus } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { dayjs } from 'lib/dayjs'
-import clsx from 'clsx'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { capitalizeFirstLetter } from 'lib/utils'
-import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
+import { useEffect } from 'react'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { SceneExport } from 'scenes/sceneTypes'
+
import { BillingHero } from './BillingHero'
-import { PageHeader } from 'lib/components/PageHeader'
+import { billingLogic } from './billingLogic'
import { BillingProduct } from './BillingProduct'
-import { IconPlus } from 'lib/lemon-ui/icons'
-import { SceneExport } from 'scenes/sceneTypes'
-import { supportLogic } from 'lib/components/Support/supportLogic'
-import { Field, Form } from 'kea-forms'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
export const scene: SceneExport = {
component: Billing,
diff --git a/frontend/src/scenes/billing/BillingGauge.tsx b/frontend/src/scenes/billing/BillingGauge.tsx
index bdc61e4437a0c..cb0b5f480da50 100644
--- a/frontend/src/scenes/billing/BillingGauge.tsx
+++ b/frontend/src/scenes/billing/BillingGauge.tsx
@@ -1,8 +1,9 @@
+import './BillingGauge.scss'
+
import clsx from 'clsx'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { compactNumber } from 'lib/utils'
import { useMemo } from 'react'
-import './BillingGauge.scss'
type BillingGaugeItemProps = {
width: string
diff --git a/frontend/src/scenes/billing/BillingHero.tsx b/frontend/src/scenes/billing/BillingHero.tsx
index 3dbe62ca6dc62..ca8e8170a5832 100644
--- a/frontend/src/scenes/billing/BillingHero.tsx
+++ b/frontend/src/scenes/billing/BillingHero.tsx
@@ -1,5 +1,6 @@
-import { BlushingHog } from 'lib/components/hedgehogs'
import './BillingHero.scss'
+
+import { BlushingHog } from 'lib/components/hedgehogs'
import useResizeObserver from 'use-resize-observer'
export const BillingHero = (): JSX.Element => {
diff --git a/frontend/src/scenes/billing/BillingLimitInput.tsx b/frontend/src/scenes/billing/BillingLimitInput.tsx
index fac3943214ea7..db519a096265a 100644
--- a/frontend/src/scenes/billing/BillingLimitInput.tsx
+++ b/frontend/src/scenes/billing/BillingLimitInput.tsx
@@ -1,14 +1,16 @@
-import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
-import { billingLogic } from './billingLogic'
-import { convertAmountToUsage } from './billing-utils'
+import { LemonButton, LemonInput } from '@posthog/lemon-ui'
+import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
-import { billingProductLogic } from './billingProductLogic'
-import { LemonButton, LemonInput } from '@posthog/lemon-ui'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import clsx from 'clsx'
import { useRef } from 'react'
+import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
+
+import { convertAmountToUsage } from './billing-utils'
+import { billingLogic } from './billingLogic'
+import { billingProductLogic } from './billingProductLogic'
+
export const BillingLimitInput = ({ product }: { product: BillingProductV2Type }): JSX.Element | null => {
const limitInputRef = useRef(null)
const { billing, billingLoading } = useValues(billingLogic)
diff --git a/frontend/src/scenes/billing/BillingPopup.tsx b/frontend/src/scenes/billing/BillingPopup.tsx
index 68b016050df5d..c84d607af28c7 100644
--- a/frontend/src/scenes/billing/BillingPopup.tsx
+++ b/frontend/src/scenes/billing/BillingPopup.tsx
@@ -1,4 +1,5 @@
import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
+
import { Billing } from './Billing'
export type BillingPopupProps = {
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index 4f041630529c8..2fdda7beadd4a 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -1,30 +1,32 @@
-import { LemonSelectOptions, LemonButton, LemonTable, LemonTag, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonSelectOptions, LemonTable, LemonTag, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import {
- IconChevronRight,
- IconCheckmark,
- IconExpandMore,
- IconPlus,
IconArticle,
IconCheckCircleOutline,
+ IconCheckmark,
+ IconChevronRight,
+ IconExpandMore,
IconInfo,
+ IconPlus,
} from 'lib/lemon-ui/icons'
+import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { More } from 'lib/lemon-ui/LemonButton/More'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { getProductIcon } from 'scenes/products/Products'
+
import { BillingProductV2AddonType, BillingProductV2Type, BillingV2TierType } from '~/types'
+
import { convertLargeNumberToWords, getUpgradeProductLink, summarizeUsage } from './billing-utils'
import { BillingGauge } from './BillingGauge'
-import { billingLogic } from './billingLogic'
import { BillingLimitInput } from './BillingLimitInput'
+import { billingLogic } from './billingLogic'
import { billingProductLogic } from './billingProductLogic'
-import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { ProductPricingModal } from './ProductPricingModal'
import { PlanComparisonModal } from './PlanComparison'
-import { getProductIcon } from 'scenes/products/Products'
+import { ProductPricingModal } from './ProductPricingModal'
import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'
const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462'
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
index a2e75da9e5115..3b341f534f9ec 100644
--- a/frontend/src/scenes/billing/PlanComparison.tsx
+++ b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -1,16 +1,19 @@
-import React from 'react'
-import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { IconCheckmark, IconClose, IconWarning } from 'lib/lemon-ui/icons'
-import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'
import './PlanComparison.scss'
+
+import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
+import { IconCheckmark, IconClose, IconWarning } from 'lib/lemon-ui/icons'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
-import { billingLogic } from './billingLogic'
+import React from 'react'
import { getProductIcon } from 'scenes/products/Products'
import useResizeObserver from 'use-resize-observer'
+import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'
+
+import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
+import { billingLogic } from './billingLogic'
+
export function PlanIcon({
feature,
className,
diff --git a/frontend/src/scenes/billing/PlanTable.tsx b/frontend/src/scenes/billing/PlanTable.tsx
index d406171b954e9..30c244fbc3fdc 100644
--- a/frontend/src/scenes/billing/PlanTable.tsx
+++ b/frontend/src/scenes/billing/PlanTable.tsx
@@ -1,12 +1,15 @@
+import './PlanTable.scss'
+
import { LemonButton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { IconCheckmark, IconClose, IconWarning } from 'lib/lemon-ui/icons'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+
import { AvailableFeature, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'
+
import { billingLogic } from './billingLogic'
-import './PlanTable.scss'
export function PlanIcon({
feature,
diff --git a/frontend/src/scenes/billing/ProductPricingModal.tsx b/frontend/src/scenes/billing/ProductPricingModal.tsx
index 150a4be47f7e9..4e7879e80b98e 100644
--- a/frontend/src/scenes/billing/ProductPricingModal.tsx
+++ b/frontend/src/scenes/billing/ProductPricingModal.tsx
@@ -1,6 +1,8 @@
import { LemonModal } from '@posthog/lemon-ui'
import { capitalizeFirstLetter } from 'lib/utils'
+
import { BillingProductV2AddonType, BillingProductV2Type, BillingV2PlanType } from '~/types'
+
import { getTierDescription } from './BillingProduct'
export const ProductPricingModal = ({
diff --git a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
index b76a6945055f6..f4bbb17473f7a 100644
--- a/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
+++ b/frontend/src/scenes/billing/UnsubscribeSurveyModal.tsx
@@ -1,8 +1,10 @@
import { LemonBanner, LemonButton, LemonModal, LemonTextArea, Link } from '@posthog/lemon-ui'
-import { billingProductLogic } from './billingProductLogic'
import { useActions, useValues } from 'kea'
+
import { BillingProductV2Type } from '~/types'
+
import { billingLogic } from './billingLogic'
+import { billingProductLogic } from './billingProductLogic'
export const UnsubscribeSurveyModal = ({ product }: { product: BillingProductV2Type }): JSX.Element | null => {
const { surveyID, surveyResponse } = useValues(billingProductLogic({ product }))
diff --git a/frontend/src/scenes/billing/billing-utils.spec.ts b/frontend/src/scenes/billing/billing-utils.spec.ts
index a28188ba901a3..48c34f4da53ba 100644
--- a/frontend/src/scenes/billing/billing-utils.spec.ts
+++ b/frontend/src/scenes/billing/billing-utils.spec.ts
@@ -1,3 +1,9 @@
+import { dayjs } from 'lib/dayjs'
+import tk from 'timekeeper'
+
+import billingJson from '~/mocks/fixtures/_billing_v2.json'
+import billingJsonWithFlatFee from '~/mocks/fixtures/_billing_v2_with_flat_fee.json'
+
import {
convertAmountToUsage,
convertLargeNumberToWords,
@@ -5,10 +11,6 @@ import {
projectUsage,
summarizeUsage,
} from './billing-utils'
-import tk from 'timekeeper'
-import { dayjs } from 'lib/dayjs'
-import billingJson from '~/mocks/fixtures/_billing_v2.json'
-import billingJsonWithFlatFee from '~/mocks/fixtures/_billing_v2_with_flat_fee.json'
describe('summarizeUsage', () => {
it('should summarise usage', () => {
diff --git a/frontend/src/scenes/billing/billing-utils.ts b/frontend/src/scenes/billing/billing-utils.ts
index 4b55f893bf04e..b6b152c099fe4 100644
--- a/frontend/src/scenes/billing/billing-utils.ts
+++ b/frontend/src/scenes/billing/billing-utils.ts
@@ -1,4 +1,5 @@
import { dayjs } from 'lib/dayjs'
+
import { BillingProductV2Type, BillingV2TierType, BillingV2Type } from '~/types'
export const summarizeUsage = (usage: number | null): string => {
diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts
index 5318987edd632..63c5c5222d9e8 100644
--- a/frontend/src/scenes/billing/billingLogic.ts
+++ b/frontend/src/scenes/billing/billingLogic.ts
@@ -1,19 +1,21 @@
-import { kea, path, actions, connect, afterMount, selectors, listeners, reducers } from 'kea'
+import { lemonToast } from '@posthog/lemon-ui'
+import { actions, afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { forms } from 'kea-forms'
import { loaders } from 'kea-loaders'
-import api from 'lib/api'
-import { BillingProductV2Type, BillingV2Type, ProductKey } from '~/types'
import { router, urlToAction } from 'kea-router'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import api from 'lib/api'
import { dayjs } from 'lib/dayjs'
-import { lemonToast } from '@posthog/lemon-ui'
+import { LemonBannerAction } from 'lib/lemon-ui/LemonBanner/LemonBanner'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { pluralize } from 'lib/utils'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import posthog from 'posthog-js'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { userLogic } from 'scenes/userLogic'
-import { pluralize } from 'lib/utils'
+
+import { BillingProductV2Type, BillingV2Type, ProductKey } from '~/types'
+
import type { billingLogicType } from './billingLogicType'
-import { forms } from 'kea-forms'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { LemonBannerAction } from 'lib/lemon-ui/LemonBanner/LemonBanner'
export const ALLOCATION_THRESHOLD_ALERT = 0.85 // Threshold to show warning of event usage near limit
export const ALLOCATION_THRESHOLD_BLOCK = 1.2 // Threshold to block usage
diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
index 723e152e9723d..5d78ef5ac7e81 100644
--- a/frontend/src/scenes/billing/billingProductLogic.ts
+++ b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -1,10 +1,12 @@
import { actions, connect, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import posthog from 'posthog-js'
+import React from 'react'
+
import { BillingProductV2AddonType, BillingProductV2Type, BillingV2PlanType, BillingV2TierType } from '~/types'
+
+import { convertAmountToUsage } from './billing-utils'
import { billingLogic } from './billingLogic'
import type { billingProductLogicType } from './billingProductLogicType'
-import { convertAmountToUsage } from './billing-utils'
-import posthog from 'posthog-js'
-import React from 'react'
const DEFAULT_BILLING_LIMIT = 500
diff --git a/frontend/src/scenes/cohorts/Cohort.tsx b/frontend/src/scenes/cohorts/Cohort.tsx
index d597f2a93964a..2286edee5e429 100644
--- a/frontend/src/scenes/cohorts/Cohort.tsx
+++ b/frontend/src/scenes/cohorts/Cohort.tsx
@@ -1,8 +1,10 @@
-import { cohortSceneLogic } from './cohortSceneLogic'
import 'antd/lib/dropdown/style/index.css'
-import { SceneExport } from 'scenes/sceneTypes'
+
import { CohortEdit } from 'scenes/cohorts/CohortEdit'
+import { SceneExport } from 'scenes/sceneTypes'
+
import { CohortLogicProps } from './cohortEditLogic'
+import { cohortSceneLogic } from './cohortSceneLogic'
export const scene: SceneExport = {
component: Cohort,
diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
index 72774547a2057..edbf5ddd46559 100644
--- a/frontend/src/scenes/cohorts/CohortEdit.tsx
+++ b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -1,34 +1,36 @@
-import { CohortLogicProps, cohortEditLogic } from 'scenes/cohorts/cohortEditLogic'
+import { LemonDivider } from '@posthog/lemon-ui'
+import { UploadFile } from 'antd/es/upload/interface'
+import Dragger from 'antd/lib/upload/Dragger'
import { useActions, useValues } from 'kea'
-import { userLogic } from 'scenes/userLogic'
-import { PageHeader } from 'lib/components/PageHeader'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { Form } from 'kea-forms'
import { router } from 'kea-router'
-import { urls } from 'scenes/urls'
-import { Divider } from 'antd'
+import { NotFound } from 'lib/components/NotFound'
+import { PageHeader } from 'lib/components/PageHeader'
+import { CohortTypeEnum } from 'lib/constants'
import { Field } from 'lib/forms/Field'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
+import { IconUploadFile } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { More } from 'lib/lemon-ui/LemonButton/More'
import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
+import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
-import { COHORT_TYPE_OPTIONS } from 'scenes/cohorts/CohortFilters/constants'
-import { CohortTypeEnum } from 'lib/constants'
-import { AvailableFeature, NotebookNodeType } from '~/types'
import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
-import Dragger from 'antd/lib/upload/Dragger'
-import { UploadFile } from 'antd/es/upload/interface'
-import { IconUploadFile } from 'lib/lemon-ui/icons'
-import { CohortCriteriaGroups } from 'scenes/cohorts/CohortFilters/CohortCriteriaGroups'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { Form } from 'kea-forms'
-import { NotFound } from 'lib/components/NotFound'
-import { Query } from '~/queries/Query/Query'
import { pluralize } from 'lib/utils'
-import { LemonDivider } from '@posthog/lemon-ui'
-import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect'
-import { More } from 'lib/lemon-ui/LemonButton/More'
+import { cohortEditLogic, CohortLogicProps } from 'scenes/cohorts/cohortEditLogic'
+import { CohortCriteriaGroups } from 'scenes/cohorts/CohortFilters/CohortCriteriaGroups'
+import { COHORT_TYPE_OPTIONS } from 'scenes/cohorts/CohortFilters/constants'
import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
+import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
+
+import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect'
+import { Query } from '~/queries/Query/Query'
+import { AvailableFeature, NotebookNodeType } from '~/types'
export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
+ const is3000 = useFeatureFlag('POSTHOG_3000')
const logicProps = { id }
const logic = cohortEditLogic(logicProps)
const { deleteCohort, setOuterGroupsType, setQuery, duplicateCohort } = useActions(logic)
@@ -126,8 +128,8 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
}
/>
-
-
+ {!is3000 && }
+
@@ -211,7 +213,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
) : (
<>
-
+
Matching criteria
@@ -236,7 +238,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
{/* The typeof here is needed to pass the cohort id to the query below. Using `isNewCohort` won't work */}
{typeof cohort.id === 'number' && (
<>
-
+
Persons in this cohort
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
index 1535f6974e591..4a57b3dc2beed 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
@@ -1,17 +1,19 @@
import './CohortCriteriaGroups.scss'
-import { criteriaToBehavioralFilterType, isCohortCriteriaGroup } from 'scenes/cohorts/cohortUtils'
+
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
import { Group } from 'kea-forms'
import { Field as KeaField } from 'kea-forms/lib/components'
-import clsx from 'clsx'
-import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
-import { alphabet } from 'lib/utils'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconCopy, IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
-import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { useActions, useValues } from 'kea'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
+import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
+import { alphabet } from 'lib/utils'
+import { cohortEditLogic, CohortLogicProps } from 'scenes/cohorts/cohortEditLogic'
import { CohortCriteriaRowBuilder } from 'scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder'
-import { CohortLogicProps, cohortEditLogic } from 'scenes/cohorts/cohortEditLogic'
+import { criteriaToBehavioralFilterType, isCohortCriteriaGroup } from 'scenes/cohorts/cohortUtils'
+
import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect'
export function CohortCriteriaGroups(logicProps: CohortLogicProps): JSX.Element {
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.stories.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.stories.tsx
index 684a4a78a529a..e87ba2481f9c2 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.stories.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.stories.tsx
@@ -1,17 +1,18 @@
-import { useState } from 'react'
import { Meta } from '@storybook/react'
+import { useMountedLogic } from 'kea'
+import { Form } from 'kea-forms'
+import { taxonomicFilterMocksDecorator } from 'lib/components/TaxonomicFilter/__mocks__/taxonomicFilterMocksDecorator'
+import { useState } from 'react'
+import { cohortEditLogic } from 'scenes/cohorts/cohortEditLogic'
import {
CohortCriteriaRowBuilder,
CohortCriteriaRowBuilderProps,
} from 'scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder'
-import { taxonomicFilterMocksDecorator } from 'lib/components/TaxonomicFilter/__mocks__/taxonomicFilterMocksDecorator'
-import { useMountedLogic } from 'kea'
+import { BehavioralFilterType } from 'scenes/cohorts/CohortFilters/types'
+
import { actionsModel } from '~/models/actionsModel'
import { cohortsModel } from '~/models/cohortsModel'
-import { BehavioralFilterType } from 'scenes/cohorts/CohortFilters/types'
import { BehavioralEventType } from '~/types'
-import { Form } from 'kea-forms'
-import { cohortEditLogic } from 'scenes/cohorts/cohortEditLogic'
const meta: Meta = {
title: 'Filters/Cohort Filters/Row Builder',
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
index 4f7209a7d5583..9b5968364a232 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
@@ -1,16 +1,18 @@
import './CohortCriteriaRowBuilder.scss'
-import { BehavioralFilterType, CohortFieldProps, Field, FilterType } from 'scenes/cohorts/CohortFilters/types'
-import { renderField, ROWS } from 'scenes/cohorts/CohortFilters/constants'
-import { Col, Divider } from 'antd'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { IconCopy, IconDelete } from 'lib/lemon-ui/icons'
-import { AnyCohortCriteriaType, BehavioralEventType, FilterLogicalOperator } from '~/types'
+
+import { Divider } from 'antd'
import clsx from 'clsx'
+import { useActions } from 'kea'
import { Field as KeaField } from 'kea-forms'
+import { IconCopy, IconDelete } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { useActions } from 'kea'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { cohortEditLogic, CohortLogicProps } from 'scenes/cohorts/cohortEditLogic'
+import { renderField, ROWS } from 'scenes/cohorts/CohortFilters/constants'
+import { BehavioralFilterType, CohortFieldProps, Field, FilterType } from 'scenes/cohorts/CohortFilters/types'
import { cleanCriteria } from 'scenes/cohorts/cohortUtils'
-import { CohortLogicProps, cohortEditLogic } from 'scenes/cohorts/cohortEditLogic'
+
+import { AnyCohortCriteriaType, BehavioralEventType, FilterLogicalOperator } from '~/types'
export interface CohortCriteriaRowBuilderProps {
id: CohortLogicProps['id']
@@ -38,7 +40,7 @@ export function CohortCriteriaRowBuilder({
const renderFieldComponent = (_field: Field, i: number): JSX.Element => {
return (
-
)
}
-
-export default Textfit
diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationActionsCell.tsx b/frontend/src/scenes/insights/views/Funnels/CorrelationActionsCell.tsx
index bd4b4dcaba5ba..f346115de4a0e 100644
--- a/frontend/src/scenes/insights/views/Funnels/CorrelationActionsCell.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/CorrelationActionsCell.tsx
@@ -1,15 +1,14 @@
-import { useState } from 'react'
import { useActions, useValues } from 'kea'
-
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { funnelCorrelationLogic } from 'scenes/funnels/funnelCorrelationLogic'
+import { IconEllipsis } from 'lib/lemon-ui/icons'
+import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
+import { Popover } from 'lib/lemon-ui/Popover/Popover'
+import { useState } from 'react'
import { funnelCorrelationDetailsLogic } from 'scenes/funnels/funnelCorrelationDetailsLogic'
+import { funnelCorrelationLogic } from 'scenes/funnels/funnelCorrelationLogic'
import { funnelPropertyCorrelationLogic } from 'scenes/funnels/funnelPropertyCorrelationLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
import { FunnelCorrelation, FunnelCorrelationResultsType } from '~/types'
-import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
-import { IconEllipsis } from 'lib/lemon-ui/icons'
export const EventCorrelationActionsCell = ({ record }: { record: FunnelCorrelation }): JSX.Element => {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.tsx b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.tsx
index 4506930a29828..9e8a922f250f3 100644
--- a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.tsx
@@ -1,13 +1,9 @@
-import { Button, Modal } from 'antd'
import './CorrelationMatrix.scss'
+
+import { Button, Modal } from 'antd'
+import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { capitalizeFirstLetter, percentage, pluralize } from 'lib/utils'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { Link } from 'lib/lemon-ui/Link'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
import {
IconCancel,
IconCheckCircleOutline,
@@ -16,11 +12,17 @@ import {
IconTrendingFlatDown,
} from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import clsx from 'clsx'
-import { parseDisplayNameForCorrelation } from 'scenes/funnels/funnelUtils'
-import { funnelCorrelationLogic } from 'scenes/funnels/funnelCorrelationLogic'
+import { Link } from 'lib/lemon-ui/Link'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { capitalizeFirstLetter, percentage, pluralize } from 'lib/utils'
import { funnelCorrelationDetailsLogic } from 'scenes/funnels/funnelCorrelationDetailsLogic'
+import { funnelCorrelationLogic } from 'scenes/funnels/funnelCorrelationLogic'
import { funnelPersonsModalLogic } from 'scenes/funnels/funnelPersonsModalLogic'
+import { parseDisplayNameForCorrelation } from 'scenes/funnels/funnelUtils'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
+import { FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
export function CorrelationMatrix(): JSX.Element {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx
index a3971c891a7de..b10dd04e1e45a 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelBinsPicker.tsx
@@ -1,12 +1,13 @@
-import { useActions, useValues } from 'kea'
-import { BIN_COUNT_AUTO } from 'lib/constants'
import { InputNumber, Select } from 'antd'
-import { BinCountValue } from '~/types'
import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
+import { BIN_COUNT_AUTO } from 'lib/constants'
+import { IconBarChart } from 'lib/lemon-ui/icons'
import { ANTD_TOOLTIP_PLACEMENTS } from 'lib/utils'
-import { insightLogic } from 'scenes/insights/insightLogic'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { IconBarChart } from 'lib/lemon-ui/icons'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
+import { BinCountValue } from '~/types'
// Constraints as defined in funnel_time_to_convert.py:34
const MIN = 1
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx
index 59deda6801480..e938e03c69eb6 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelConversionWindowFilter.tsx
@@ -1,13 +1,14 @@
-import { capitalizeFirstLetter, pluralize } from 'lib/utils'
-import { useState } from 'react'
-import { EditorFilterProps, FunnelConversionWindow, FunnelConversionWindowTimeUnit } from '~/types'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { useDebouncedCallback } from 'use-debounce'
+import { IconInfo } from '@posthog/icons'
import { LemonInput, LemonSelect, LemonSelectOption } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { capitalizeFirstLetter, pluralize } from 'lib/utils'
+import { useState } from 'react'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { useDebouncedCallback } from 'use-debounce'
+
import { FunnelsFilter } from '~/queries/schema'
-import { IconInfo } from '@posthog/icons'
+import { EditorFilterProps, FunnelConversionWindow, FunnelConversionWindowTimeUnit } from '~/types'
const TIME_INTERVAL_BOUNDS: Record = {
[FunnelConversionWindowTimeUnit.Second]: [1, 3600],
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.tsx
index 55718cd3ffc33..1933f49b96a03 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.tsx
@@ -1,17 +1,17 @@
-import { useMountedLogic, useValues } from 'kea'
+import './FunnelCorrelation.scss'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { useMountedLogic, useValues } from 'kea'
+import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
import { funnelCorrelationUsageLogic } from 'scenes/funnels/funnelCorrelationUsageLogic'
+import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
-import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
+import { AvailableFeature } from '~/types'
+
+import { FunnelCorrelationFeedbackForm } from './FunnelCorrelationFeedbackForm'
import { FunnelCorrelationSkewWarning } from './FunnelCorrelationSkewWarning'
import { FunnelCorrelationTable } from './FunnelCorrelationTable'
-import { FunnelCorrelationFeedbackForm } from './FunnelCorrelationFeedbackForm'
import { FunnelPropertyCorrelationTable } from './FunnelPropertyCorrelationTable'
-import { AvailableFeature } from '~/types'
-
-import './FunnelCorrelation.scss'
export const FunnelCorrelation = (): JSX.Element | null => {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationFeedbackForm.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationFeedbackForm.tsx
index d2838054e3e80..7399a0e979fc3 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationFeedbackForm.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationFeedbackForm.tsx
@@ -1,11 +1,9 @@
-import { useRef } from 'react'
-import { useActions, useValues } from 'kea'
-
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { funnelCorrelationFeedbackLogic } from 'scenes/funnels/funnelCorrelationFeedbackLogic'
-
import { LemonButton, LemonTextArea } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
import { IconClose, IconComment } from 'lib/lemon-ui/icons'
+import { useRef } from 'react'
+import { funnelCorrelationFeedbackLogic } from 'scenes/funnels/funnelCorrelationFeedbackLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
export const FunnelCorrelationFeedbackForm = (): JSX.Element | null => {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationSkewWarning.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationSkewWarning.tsx
index 587c33aefa508..6e4cc1416ffe0 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationSkewWarning.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationSkewWarning.tsx
@@ -1,12 +1,10 @@
-import { useActions, useValues } from 'kea'
-import { Card } from 'antd'
-
-import { insightLogic } from 'scenes/insights/insightLogic'
-
-import { IconFeedback } from 'lib/lemon-ui/icons'
// eslint-disable-next-line no-restricted-imports
import { CloseOutlined } from '@ant-design/icons'
+import { Card } from 'antd'
+import { useActions, useValues } from 'kea'
+import { IconFeedback } from 'lib/lemon-ui/icons'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
export const FunnelCorrelationSkewWarning = (): JSX.Element | null => {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.tsx
index 1c3a022249323..0501b62fe4b70 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.tsx
@@ -1,29 +1,31 @@
-import { useEffect } from 'react'
-import { ConfigProvider, Table, Empty } from 'antd'
+import './FunnelCorrelationTable.scss'
+
+import { IconInfo } from '@posthog/icons'
+import { LemonCheckbox } from '@posthog/lemon-ui'
+import { ConfigProvider, Empty, Table } from 'antd'
import Column from 'antd/lib/table/Column'
import { useActions, useValues } from 'kea'
-import { IconSelectEvents, IconTrendUp, IconTrendingDown, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
-import { FunnelCorrelation, FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { ValueInspectorButton } from 'scenes/funnels/ValueInspectorButton'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import './FunnelCorrelationTable.scss'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { VisibilitySensor } from 'lib/components/VisibilitySensor/VisibilitySensor'
+import { IconSelectEvents, IconTrendingDown, IconTrendUp, IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { CorrelationMatrix } from './CorrelationMatrix'
-import { capitalizeFirstLetter } from 'lib/utils'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { EventCorrelationActionsCell } from './CorrelationActionsCell'
import { Link } from 'lib/lemon-ui/Link'
-import { funnelCorrelationUsageLogic } from 'scenes/funnels/funnelCorrelationUsageLogic'
-
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { capitalizeFirstLetter } from 'lib/utils'
+import { useEffect } from 'react'
import { funnelCorrelationLogic } from 'scenes/funnels/funnelCorrelationLogic'
+import { funnelCorrelationUsageLogic } from 'scenes/funnels/funnelCorrelationUsageLogic'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { parseDisplayNameForCorrelation } from 'scenes/funnels/funnelUtils'
-import { LemonCheckbox } from '@posthog/lemon-ui'
import { funnelPersonsModalLogic } from 'scenes/funnels/funnelPersonsModalLogic'
-import { IconInfo } from '@posthog/icons'
+import { parseDisplayNameForCorrelation } from 'scenes/funnels/funnelUtils'
+import { ValueInspectorButton } from 'scenes/funnels/ValueInspectorButton'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
+import { FunnelCorrelation, FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
+
+import { EventCorrelationActionsCell } from './CorrelationActionsCell'
+import { CorrelationMatrix } from './CorrelationMatrix'
export function FunnelCorrelationTable(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelDisplayLayoutPicker.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelDisplayLayoutPicker.tsx
index 3b4c95d14d886..1a21527301fad 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelDisplayLayoutPicker.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelDisplayLayoutPicker.tsx
@@ -1,9 +1,9 @@
+import { LemonSelect } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { FunnelLayout } from 'lib/constants'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { LemonSelect } from '@posthog/lemon-ui'
import { IconFunnelHorizontal, IconFunnelVertical } from 'lib/lemon-ui/icons'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
export function FunnelDisplayLayoutPicker(): JSX.Element {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
index 3325b103ba438..fbede9951a858 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelPropertyCorrelationTable.tsx
@@ -1,28 +1,31 @@
-import { useEffect } from 'react'
-import { Link } from 'lib/lemon-ui/Link'
-import { Col, ConfigProvider, Row, Table, Empty } from 'antd'
+import './FunnelCorrelationTable.scss'
+
+import { IconInfo } from '@posthog/icons'
+import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
+import { Col, ConfigProvider, Empty, Row, Table } from 'antd'
import Column from 'antd/lib/table/Column'
import { useActions, useValues } from 'kea'
-import { FunnelCorrelation, FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { ValueInspectorButton } from 'scenes/funnels/ValueInspectorButton'
+import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { IconSelectProperties, IconTrendingDown, IconTrendingUp } from 'lib/lemon-ui/icons'
-import './FunnelCorrelationTable.scss'
import { VisibilitySensor } from 'lib/components/VisibilitySensor/VisibilitySensor'
+import { IconSelectProperties, IconTrendingDown, IconTrendingUp } from 'lib/lemon-ui/icons'
+import { Link } from 'lib/lemon-ui/Link'
+import { Popover } from 'lib/lemon-ui/Popover'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { capitalizeFirstLetter } from 'lib/utils'
-import { PropertyCorrelationActionsCell } from './CorrelationActionsCell'
+import { useEffect } from 'react'
+import { useState } from 'react'
import { funnelCorrelationUsageLogic } from 'scenes/funnels/funnelCorrelationUsageLogic'
-import { parseDisplayNameForCorrelation } from 'scenes/funnels/funnelUtils'
-import { funnelPropertyCorrelationLogic } from 'scenes/funnels/funnelPropertyCorrelationLogic'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { Popover } from 'lib/lemon-ui/Popover'
-import { PersonPropertySelect } from 'lib/components/PersonPropertySelect/PersonPropertySelect'
-import { useState } from 'react'
-import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
import { funnelPersonsModalLogic } from 'scenes/funnels/funnelPersonsModalLogic'
-import { IconInfo } from '@posthog/icons'
+import { funnelPropertyCorrelationLogic } from 'scenes/funnels/funnelPropertyCorrelationLogic'
+import { parseDisplayNameForCorrelation } from 'scenes/funnels/funnelUtils'
+import { ValueInspectorButton } from 'scenes/funnels/ValueInspectorButton'
+import { insightLogic } from 'scenes/insights/insightLogic'
+
+import { FunnelCorrelation, FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
+
+import { PropertyCorrelationActionsCell } from './CorrelationActionsCell'
export function FunnelPropertyCorrelationTable(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelStepOrderPicker.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelStepOrderPicker.tsx
index 54bc248662a91..615fc8bfa1a77 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelStepOrderPicker.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelStepOrderPicker.tsx
@@ -1,11 +1,10 @@
+import { LemonSelect } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-
-import { insightLogic } from 'scenes/insights/insightLogic'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
-import { StepOrderValue } from '~/types'
-import { LemonSelect } from '@posthog/lemon-ui'
import { FunnelsFilter } from '~/queries/schema'
+import { StepOrderValue } from '~/types'
interface StepOption {
key?: string
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx
index ba9f0b36b07a4..c875b1cec5355 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx
@@ -1,11 +1,11 @@
+import { LemonSelect, LemonSelectOption, LemonSelectOptions } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-
import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
import { insightLogic } from 'scenes/insights/insightLogic'
-import { LemonSelect, LemonSelectOptions, LemonSelectOption } from '@posthog/lemon-ui'
-import { seriesNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { seriesNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
+
export function FunnelStepsPicker(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
const { series, isFunnelWithEnoughSteps, funnelsFilter } = useValues(insightVizDataLogic(insightProps))
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx
index 0d2c3471ba6ee..ab8bae047fc37 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelStepsTable.tsx
@@ -1,23 +1,25 @@
import { useActions, useValues } from 'kea'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { LemonTable, LemonTableColumn, LemonTableColumnGroup } from 'lib/lemon-ui/LemonTable'
-import { FlattenedFunnelStepByBreakdown } from '~/types'
+import { getSeriesColor } from 'lib/colors'
import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
-import { getVisibilityKey } from 'scenes/funnels/funnelUtils'
-import { getActionFilterFromFunnelStep, getSignificanceFromBreakdownStep } from './funnelStepTableUtils'
-import { cohortsModel } from '~/models/cohortsModel'
+import { IconFlag } from 'lib/lemon-ui/icons'
import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
-import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
import { LemonRow } from 'lib/lemon-ui/LemonRow'
+import { LemonTable, LemonTableColumn, LemonTableColumnGroup } from 'lib/lemon-ui/LemonTable'
+import { Lettermark, LettermarkColor } from 'lib/lemon-ui/Lettermark'
import { humanFriendlyDuration, humanFriendlyNumber, percentage } from 'lib/utils'
-import { ValueInspectorButton } from 'scenes/funnels/ValueInspectorButton'
-import { getSeriesColor } from 'lib/colors'
-import { IconFlag } from 'lib/lemon-ui/icons'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { formatBreakdownLabel } from 'scenes/insights/utils'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
import { funnelPersonsModalLogic } from 'scenes/funnels/funnelPersonsModalLogic'
+import { getVisibilityKey } from 'scenes/funnels/funnelUtils'
+import { ValueInspectorButton } from 'scenes/funnels/ValueInspectorButton'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { formatBreakdownLabel } from 'scenes/insights/utils'
+
+import { cohortsModel } from '~/models/cohortsModel'
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { FlattenedFunnelStepByBreakdown } from '~/types'
+
+import { getActionFilterFromFunnelStep, getSignificanceFromBreakdownStep } from './funnelStepTableUtils'
export function FunnelStepsTable(): JSX.Element | null {
const { insightProps, insightLoading } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelVizType.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelVizType.tsx
index 3f613df7d8a10..9850c935468c6 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelVizType.tsx
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelVizType.tsx
@@ -1,12 +1,10 @@
+import { IconClock, IconFilter, IconTrending } from '@posthog/icons'
import { useActions, useValues } from 'kea'
-
+import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
-import { FunnelVizType as VizType, EditorFilterProps } from '~/types'
import { FunnelsFilter } from '~/queries/schema'
-import { IconFilter, IconClock, IconTrending } from '@posthog/icons'
-
-import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
+import { EditorFilterProps, FunnelVizType as VizType } from '~/types'
type LabelProps = {
icon: JSX.Element
diff --git a/frontend/src/scenes/insights/views/Histogram/Histogram.tsx b/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
index 11671e289ecae..52e807a65deb2 100644
--- a/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
+++ b/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
@@ -1,14 +1,15 @@
-import { useEffect } from 'react'
+import './Histogram.scss'
+
import * as d3 from 'd3'
-import { D3Selector, D3Transition, useD3 } from 'lib/hooks/useD3'
+import { useActions, useValues } from 'kea'
import { FunnelLayout } from 'lib/constants'
-import { createRoundedRectPath, D3HistogramDatum, getConfig, INITIAL_CONFIG } from './histogramUtils'
+import { D3Selector, D3Transition, useD3 } from 'lib/hooks/useD3'
import { animate, getOrCreateEl, wrap } from 'lib/utils/d3Utils'
-
-import './Histogram.scss'
-import { useActions, useValues } from 'kea'
+import { useEffect } from 'react'
import { histogramLogic } from 'scenes/insights/views/Histogram/histogramLogic'
+import { createRoundedRectPath, D3HistogramDatum, getConfig, INITIAL_CONFIG } from './histogramUtils'
+
export interface HistogramDatum {
id: string | number
bin0: number
diff --git a/frontend/src/scenes/insights/views/Histogram/histogramLogic.test.ts b/frontend/src/scenes/insights/views/Histogram/histogramLogic.test.ts
index 5dee7f5acfce8..254d7ad4e5ddc 100644
--- a/frontend/src/scenes/insights/views/Histogram/histogramLogic.test.ts
+++ b/frontend/src/scenes/insights/views/Histogram/histogramLogic.test.ts
@@ -1,7 +1,9 @@
-import { histogramLogic } from './histogramLogic'
-import { initKeaTests } from '~/test/init'
-import { getConfig } from 'scenes/insights/views/Histogram/histogramUtils'
import { FunnelLayout } from 'lib/constants'
+import { getConfig } from 'scenes/insights/views/Histogram/histogramUtils'
+
+import { initKeaTests } from '~/test/init'
+
+import { histogramLogic } from './histogramLogic'
describe('histogramLogic', () => {
let logic: ReturnType
diff --git a/frontend/src/scenes/insights/views/Histogram/histogramLogic.ts b/frontend/src/scenes/insights/views/Histogram/histogramLogic.ts
index a3bcd68aeaca9..2993434027fec 100644
--- a/frontend/src/scenes/insights/views/Histogram/histogramLogic.ts
+++ b/frontend/src/scenes/insights/views/Histogram/histogramLogic.ts
@@ -1,7 +1,8 @@
-import { kea, path, actions, reducers } from 'kea'
+import { actions, kea, path, reducers } from 'kea'
+import { FunnelLayout } from 'lib/constants'
import { getConfig, HistogramConfig } from 'scenes/insights/views/Histogram/histogramUtils'
+
import type { histogramLogicType } from './histogramLogicType'
-import { FunnelLayout } from 'lib/constants'
export const histogramLogic = kea([
path(['scenes', 'insights', 'Histogram', 'histogramLogic']),
diff --git a/frontend/src/scenes/insights/views/InsightsTable/DashboardInsightsTable.tsx b/frontend/src/scenes/insights/views/InsightsTable/DashboardInsightsTable.tsx
index 6ed7c8f0c9df7..f01085a698529 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/DashboardInsightsTable.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/DashboardInsightsTable.tsx
@@ -1,5 +1,4 @@
import { useValues } from 'kea'
-
import { insightLogic } from 'scenes/insights/insightLogic'
import { InsightsTable } from './InsightsTable'
diff --git a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.stories.tsx b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.stories.tsx
index 5b3283417f019..0d658d852b08f 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.stories.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.stories.tsx
@@ -1,16 +1,15 @@
-import { useState } from 'react'
-import { BindLogic } from 'kea'
import { Meta, StoryFn, StoryObj } from '@storybook/react'
-
+import { BindLogic } from 'kea'
+import { useState } from 'react'
import { insightLogic } from 'scenes/insights/insightLogic'
-import { insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz'
+
import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
-
+import { insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz'
+import { getCachedResults } from '~/queries/nodes/InsightViz/utils'
import { BaseMathType, InsightLogicProps } from '~/types'
import { InsightsTable } from './InsightsTable'
-import { getCachedResults } from '~/queries/nodes/InsightViz/utils'
type Story = StoryObj
const meta: Meta = {
diff --git a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx
index 4af3720692485..004bf853b61ca 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx
@@ -1,27 +1,29 @@
-import { useActions, useValues } from 'kea'
-import { cohortsModel } from '~/models/cohortsModel'
-import { ChartDisplayType, ItemMode } from '~/types'
-import { CalcColumnState } from './insightsTableLogic'
-import { IndexedTrendResult } from 'scenes/trends/types'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { entityFilterLogic } from '../../filters/ActionFilter/entityFilterLogic'
import './InsightsTable.scss'
+
+import { useActions, useValues } from 'kea'
+import { getSeriesColor } from 'lib/colors'
import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
-import { countryCodeToName } from '../WorldMap'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { formatBreakdownLabel } from 'scenes/insights/utils'
+import { insightLogic } from 'scenes/insights/insightLogic'
import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
import { isTrendsFilter } from 'scenes/insights/sharedUtils'
+import { formatBreakdownLabel } from 'scenes/insights/utils'
+import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
+import { IndexedTrendResult } from 'scenes/trends/types'
-import { SeriesCheckColumnTitle, SeriesCheckColumnItem } from './columns/SeriesCheckColumn'
-import { SeriesColumnItem } from './columns/SeriesColumn'
-import { BreakdownColumnTitle, BreakdownColumnItem } from './columns/BreakdownColumn'
-import { WorldMapColumnTitle, WorldMapColumnItem } from './columns/WorldMapColumn'
+import { cohortsModel } from '~/models/cohortsModel'
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { ChartDisplayType, ItemMode } from '~/types'
+
+import { entityFilterLogic } from '../../filters/ActionFilter/entityFilterLogic'
+import { countryCodeToName } from '../WorldMap'
import { AggregationColumnItem, AggregationColumnTitle } from './columns/AggregationColumn'
+import { BreakdownColumnItem, BreakdownColumnTitle } from './columns/BreakdownColumn'
+import { SeriesCheckColumnItem, SeriesCheckColumnTitle } from './columns/SeriesCheckColumn'
+import { SeriesColumnItem } from './columns/SeriesColumn'
import { ValueColumnItem, ValueColumnTitle } from './columns/ValueColumn'
+import { WorldMapColumnItem, WorldMapColumnTitle } from './columns/WorldMapColumn'
import { AggregationType, insightsTableDataLogic } from './insightsTableDataLogic'
-import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
-import { getSeriesColor } from 'lib/colors'
+import { CalcColumnState } from './insightsTableLogic'
export interface InsightsTableProps {
/** Whether this is just a legend instead of standalone insight viz. Default: false. */
diff --git a/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.tsx b/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.tsx
index ba2ec9f539329..17c37aa67e073 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.tsx
@@ -1,19 +1,18 @@
-import { useValues, useActions } from 'kea'
-import { Dropdown, Menu } from 'antd'
// eslint-disable-next-line no-restricted-imports
import { DownOutlined } from '@ant-design/icons'
-
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-
+import { Dropdown, Menu } from 'antd'
+import { useActions, useValues } from 'kea'
import { average, median } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { formatAggregationValue } from 'scenes/insights/utils'
import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
+import { formatAggregationValue } from 'scenes/insights/utils'
import { IndexedTrendResult } from 'scenes/trends/types'
-import { CalcColumnState } from '../insightsTableLogic'
-import { TrendsFilterType } from '~/types'
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
import { TrendsFilter } from '~/queries/schema'
+import { TrendsFilterType } from '~/types'
+
+import { CalcColumnState } from '../insightsTableLogic'
const CALC_COLUMN_LABELS: Record = {
total: 'Total Sum',
diff --git a/frontend/src/scenes/insights/views/InsightsTable/columns/BreakdownColumn.tsx b/frontend/src/scenes/insights/views/InsightsTable/columns/BreakdownColumn.tsx
index b64d677c8f975..a81efe34981b7 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/columns/BreakdownColumn.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/columns/BreakdownColumn.tsx
@@ -1,8 +1,9 @@
-import { BreakdownFilter } from '~/queries/schema'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
import stringWithWBR from 'lib/utils/stringWithWBR'
-import { IndexedTrendResult } from 'scenes/trends/types'
import { formatBreakdownType } from 'scenes/insights/utils'
+import { IndexedTrendResult } from 'scenes/trends/types'
+
+import { BreakdownFilter } from '~/queries/schema'
type BreakdownColumnTitleProps = { breakdownFilter: BreakdownFilter }
diff --git a/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx b/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx
index 785744697466f..81896e494e251 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/columns/SeriesColumn.tsx
@@ -1,11 +1,12 @@
import clsx from 'clsx'
import { getSeriesColor } from 'lib/colors'
-import { IndexedTrendResult } from 'scenes/trends/types'
import { InsightLabel } from 'lib/components/InsightLabel'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { IconEdit } from 'lib/lemon-ui/icons'
-import { TrendResult } from '~/types'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { capitalizeFirstLetter } from 'lib/utils'
+import { IndexedTrendResult } from 'scenes/trends/types'
+
+import { TrendResult } from '~/types'
type SeriesColumnItemProps = {
item: IndexedTrendResult
diff --git a/frontend/src/scenes/insights/views/InsightsTable/columns/ValueColumn.tsx b/frontend/src/scenes/insights/views/InsightsTable/columns/ValueColumn.tsx
index 1273048ef0b1e..26b225cae477e 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/columns/ValueColumn.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/columns/ValueColumn.tsx
@@ -1,11 +1,12 @@
import { useValues } from 'kea'
-import { IndexedTrendResult } from 'scenes/trends/types'
import { DateDisplay } from 'lib/components/DateDisplay'
-import { IntervalType, TrendsFilterType } from '~/types'
-import { formatAggregationValue } from 'scenes/insights/utils'
import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
+import { formatAggregationValue } from 'scenes/insights/utils'
+import { IndexedTrendResult } from 'scenes/trends/types'
+
import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
import { TrendsFilter } from '~/queries/schema'
+import { IntervalType, TrendsFilterType } from '~/types'
type ValueColumnTitleProps = {
index: number
diff --git a/frontend/src/scenes/insights/views/InsightsTable/columns/WorldMapColumn.tsx b/frontend/src/scenes/insights/views/InsightsTable/columns/WorldMapColumn.tsx
index 7efdf58de5844..a05e2d00717cf 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/columns/WorldMapColumn.tsx
+++ b/frontend/src/scenes/insights/views/InsightsTable/columns/WorldMapColumn.tsx
@@ -1,5 +1,6 @@
-import { IndexedTrendResult } from 'scenes/trends/types'
import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { IndexedTrendResult } from 'scenes/trends/types'
+
import { countryCodeToName } from '../../WorldMap'
export function WorldMapColumnTitle(): JSX.Element {
diff --git a/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.test.ts b/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.test.ts
index 46357caafc616..30ddcd27e2a4a 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.test.ts
+++ b/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.test.ts
@@ -1,11 +1,11 @@
import { expectLogic } from 'kea-test-utils'
-import { initKeaTests } from '~/test/init'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import { BaseMathType, ChartDisplayType, InsightShortId, PropertyMathType } from '~/types'
import { NodeKind, TrendsQuery } from '~/queries/schema'
+import { initKeaTests } from '~/test/init'
+import { BaseMathType, ChartDisplayType, InsightShortId, PropertyMathType } from '~/types'
-import { insightsTableDataLogic, AggregationType } from './insightsTableDataLogic'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { AggregationType, insightsTableDataLogic } from './insightsTableDataLogic'
const Insight123 = '123' as InsightShortId
diff --git a/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.ts b/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.ts
index cb40c623122b6..1d9a2806444c9 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.ts
+++ b/frontend/src/scenes/insights/views/InsightsTable/insightsTableDataLogic.ts
@@ -1,11 +1,10 @@
-import { kea, props, key, path, connect, actions, reducers, selectors } from 'kea'
+import { actions, connect, kea, key, path, props, reducers, selectors } from 'kea'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
import { ChartDisplayType, InsightLogicProps } from '~/types'
-import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
-
import type { insightsTableDataLogicType } from './insightsTableDataLogicType'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
export enum AggregationType {
Total = 'total',
diff --git a/frontend/src/scenes/insights/views/InsightsTable/insightsTableLogic.ts b/frontend/src/scenes/insights/views/InsightsTable/insightsTableLogic.ts
index a4c1c8962a0f3..04d17c2c5a031 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/insightsTableLogic.ts
+++ b/frontend/src/scenes/insights/views/InsightsTable/insightsTableLogic.ts
@@ -1,7 +1,9 @@
-import { kea, props, path, actions, reducers, selectors } from 'kea'
+import { actions, kea, path, props, reducers, selectors } from 'kea'
+import { isTrendsFilter } from 'scenes/insights/sharedUtils'
+
import { ChartDisplayType, FilterType } from '~/types'
+
import type { insightsTableLogicType } from './insightsTableLogicType'
-import { isTrendsFilter } from 'scenes/insights/sharedUtils'
export type CalcColumnState = 'total' | 'average' | 'median'
diff --git a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
index 99f5080c825db..88bc33ee22fea 100644
--- a/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
+++ b/frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx
@@ -1,5 +1,8 @@
-import { useEffect, useRef, useState } from 'react'
-import { Root, createRoot } from 'react-dom/client'
+import 'chartjs-adapter-dayjs-3'
+
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import ChartjsPluginStacked100, { ExtendedChartData } from 'chartjs-plugin-stacked100'
+import clsx from 'clsx'
import { useValues } from 'kea'
import {
ActiveElement,
@@ -10,34 +13,33 @@ import {
ChartOptions,
ChartType,
Color,
+ GridLineOptions,
InteractionItem,
+ ScriptableLineSegmentContext,
TickOptions,
- GridLineOptions,
TooltipModel,
TooltipOptions,
- ScriptableLineSegmentContext,
} from 'lib/Chart'
-import ChartDataLabels from 'chartjs-plugin-datalabels'
-import 'chartjs-adapter-dayjs-3'
-import { areObjectValuesEmpty, lightenDarkenColor, hexToRGBA } from '~/lib/utils'
import { getBarColorFromStatus, getGraphColors, getSeriesColor } from 'lib/colors'
import { AnnotationsOverlay } from 'lib/components/AnnotationsOverlay'
-import { GraphDataset, GraphPoint, GraphPointPayload, GraphType } from '~/types'
-import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
-import { lineGraphLogic } from 'scenes/insights/views/LineGraph/lineGraphLogic'
-import { TooltipConfig } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
-import { groupsModel } from '~/models/groupsModel'
-import { ErrorBoundary } from '~/layout/ErrorBoundary'
+import { SeriesLetter } from 'lib/components/SeriesGlyph'
+import { useResizeObserver } from 'lib/hooks/useResizeObserver'
+import { useEffect, useRef, useState } from 'react'
+import { createRoot, Root } from 'react-dom/client'
import { formatAggregationAxisValue, formatPercentStackAxisValue } from 'scenes/insights/aggregationAxisFormat'
import { insightLogic } from 'scenes/insights/insightLogic'
-import { useResizeObserver } from 'lib/hooks/useResizeObserver'
+import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
+import { TooltipConfig } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { lineGraphLogic } from 'scenes/insights/views/LineGraph/lineGraphLogic'
import { PieChart } from 'scenes/insights/views/LineGraph/PieChart'
+
+import { ErrorBoundary } from '~/layout/ErrorBoundary'
import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-import { SeriesLetter } from 'lib/components/SeriesGlyph'
+import { areObjectValuesEmpty, hexToRGBA, lightenDarkenColor } from '~/lib/utils'
+import { groupsModel } from '~/models/groupsModel'
import { TrendsFilter } from '~/queries/schema'
-import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import ChartjsPluginStacked100, { ExtendedChartData } from 'chartjs-plugin-stacked100'
-import clsx from 'clsx'
+import { GraphDataset, GraphPoint, GraphPointPayload, GraphType } from '~/types'
let tooltipRoot: Root
diff --git a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx
index 0f98110273c0c..d3424bbcb8fc2 100644
--- a/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx
+++ b/frontend/src/scenes/insights/views/LineGraph/PieChart.tsx
@@ -1,19 +1,24 @@
-import { useEffect, useRef } from 'react'
+import 'chartjs-adapter-dayjs-3'
+
+import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels'
+import { useActions, useValues } from 'kea'
import {
ActiveElement,
Chart,
+ ChartDataset,
ChartEvent,
ChartItem,
- ChartType,
- TooltipModel,
ChartOptions,
- ChartDataset,
+ ChartType,
Plugin,
+ TooltipModel,
} from 'lib/Chart'
-import 'chartjs-adapter-dayjs-3'
-import { areObjectValuesEmpty } from '~/lib/utils'
-import { GraphType } from '~/types'
+import { SeriesLetter } from 'lib/components/SeriesGlyph'
+import { useEffect, useRef } from 'react'
import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
+import { SeriesDatum } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
import {
ensureTooltip,
filterNestedDataset,
@@ -21,14 +26,11 @@ import {
onChartClick,
onChartHover,
} from 'scenes/insights/views/LineGraph/LineGraph'
-import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
-import { useActions, useValues } from 'kea'
-import { groupsModel } from '~/models/groupsModel'
import { lineGraphLogic } from 'scenes/insights/views/LineGraph/lineGraphLogic'
-import { insightLogic } from 'scenes/insights/insightLogic'
-import { SeriesDatum } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
-import { SeriesLetter } from 'lib/components/SeriesGlyph'
-import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels'
+
+import { areObjectValuesEmpty } from '~/lib/utils'
+import { groupsModel } from '~/models/groupsModel'
+import { GraphType } from '~/types'
let timer: NodeJS.Timeout | null = null
diff --git a/frontend/src/scenes/insights/views/LineGraph/lineGraphLogic.ts b/frontend/src/scenes/insights/views/LineGraph/lineGraphLogic.ts
index e7473601a28b7..a5df4b88f6c79 100644
--- a/frontend/src/scenes/insights/views/LineGraph/lineGraphLogic.ts
+++ b/frontend/src/scenes/insights/views/LineGraph/lineGraphLogic.ts
@@ -1,7 +1,9 @@
-import { kea, path, selectors } from 'kea'
import { TooltipItem } from 'chart.js'
-import { GraphDataset } from '~/types'
+import { kea, path, selectors } from 'kea'
import { SeriesDatum } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
+
+import { GraphDataset } from '~/types'
+
import type { lineGraphLogicType } from './lineGraphLogicType'
// TODO: Eventually we should move all state from LineGraph into this logic
diff --git a/frontend/src/scenes/insights/views/Paths/PathStepPicker.tsx b/frontend/src/scenes/insights/views/Paths/PathStepPicker.tsx
index 74fcf78ea4515..a618625785b41 100644
--- a/frontend/src/scenes/insights/views/Paths/PathStepPicker.tsx
+++ b/frontend/src/scenes/insights/views/Paths/PathStepPicker.tsx
@@ -1,15 +1,14 @@
-import { useActions, useValues } from 'kea'
-import { Select } from 'antd'
// eslint-disable-next-line no-restricted-imports
import { BarsOutlined } from '@ant-design/icons'
+import { Select } from 'antd'
+import { useActions, useValues } from 'kea'
import { ANTD_TOOLTIP_PLACEMENTS } from 'lib/utils'
-
+import { insightLogic } from 'scenes/insights/insightLogic'
import { DEFAULT_STEP_LIMIT } from 'scenes/paths/pathsDataLogic'
import { pathsDataLogic } from 'scenes/paths/pathsDataLogic'
import { userLogic } from 'scenes/userLogic'
import { AvailableFeature } from '~/types'
-import { insightLogic } from 'scenes/insights/insightLogic'
interface StepOption {
label: string
diff --git a/frontend/src/scenes/insights/views/Trends/FunnelsCue.tsx b/frontend/src/scenes/insights/views/Trends/FunnelsCue.tsx
index 263a633226135..c7f9433a99bf6 100644
--- a/frontend/src/scenes/insights/views/Trends/FunnelsCue.tsx
+++ b/frontend/src/scenes/insights/views/Trends/FunnelsCue.tsx
@@ -1,7 +1,7 @@
import { useActions, useValues } from 'kea'
-import { funnelsCueLogic } from 'scenes/insights/views/Trends/funnelsCueLogic'
-import { insightLogic } from 'scenes/insights/insightLogic'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { funnelsCueLogic } from 'scenes/insights/views/Trends/funnelsCueLogic'
export function FunnelsCue(): JSX.Element | null {
const { insightProps } = useValues(insightLogic)
diff --git a/frontend/src/scenes/insights/views/Trends/funnelsCueLogic.tsx b/frontend/src/scenes/insights/views/Trends/funnelsCueLogic.tsx
index 4fb90ffd57480..fce1c5c8c6f04 100644
--- a/frontend/src/scenes/insights/views/Trends/funnelsCueLogic.tsx
+++ b/frontend/src/scenes/insights/views/Trends/funnelsCueLogic.tsx
@@ -1,14 +1,16 @@
-import { kea, props, key, path, connect, actions, reducers, listeners, selectors, events } from 'kea'
-import { InsightLogicProps } from '~/types'
-import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
-import { insightLogic } from 'scenes/insights/insightLogic'
+import { actions, connect, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import posthog from 'posthog-js'
-import { FEATURE_FLAGS } from 'lib/constants'
-import type { funnelsCueLogicType } from './funnelsCueLogicType'
+import { insightLogic } from 'scenes/insights/insightLogic'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
-import { isFunnelsQuery, isInsightVizNode, isTrendsQuery } from '~/queries/utils'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+
import { InsightVizNode, NodeKind } from '~/queries/schema'
+import { isFunnelsQuery, isInsightVizNode, isTrendsQuery } from '~/queries/utils'
+import { InsightLogicProps } from '~/types'
+
+import type { funnelsCueLogicType } from './funnelsCueLogicType'
export const funnelsCueLogic = kea([
props({} as InsightLogicProps),
diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx
index 472ad00a1aaeb..5085cfd419acd 100644
--- a/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx
+++ b/frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx
@@ -1,18 +1,21 @@
-import { useValues, useActions } from 'kea'
+import './WorldMap.scss'
+
+import { useActions, useValues } from 'kea'
+import { BRAND_BLUE_HSL, gradateColor } from 'lib/colors'
import React, { HTMLProps, useEffect, useRef } from 'react'
+import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
import { insightLogic } from 'scenes/insights/insightLogic'
-import { ChartDisplayType, ChartParams, TrendResult } from '~/types'
-import './WorldMap.scss'
import { InsightTooltip } from 'scenes/insights/InsightTooltip/InsightTooltip'
+import { openPersonsModal } from 'scenes/trends/persons-modal/PersonsModal'
+
+import { groupsModel } from '~/models/groupsModel'
+import { ChartDisplayType, ChartParams, TrendResult } from '~/types'
+
import { SeriesDatum } from '../../InsightTooltip/insightTooltipUtils'
import { ensureTooltip } from '../LineGraph/LineGraph'
-import { worldMapLogic } from './worldMapLogic'
import { countryCodeToFlag, countryCodeToName } from './countryCodes'
import { countryVectors } from './countryVectors'
-import { groupsModel } from '~/models/groupsModel'
-import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
-import { openPersonsModal } from 'scenes/trends/persons-modal/PersonsModal'
-import { BRAND_BLUE_HSL, gradateColor } from 'lib/colors'
+import { worldMapLogic } from './worldMapLogic'
/** The saturation of a country is proportional to its value BUT the saturation has a floor to improve visibility. */
const SATURATION_FLOOR = 0.2
diff --git a/frontend/src/scenes/insights/views/WorldMap/index.ts b/frontend/src/scenes/insights/views/WorldMap/index.ts
index 3b4866cf21dca..ad0fc13da1f54 100644
--- a/frontend/src/scenes/insights/views/WorldMap/index.ts
+++ b/frontend/src/scenes/insights/views/WorldMap/index.ts
@@ -1,2 +1,2 @@
-export { WorldMap } from './WorldMap'
export { countryCodeToFlag, countryCodeToName } from './countryCodes'
+export { WorldMap } from './WorldMap'
diff --git a/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx b/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx
index 755c7f1e22445..534e66560ca4b 100644
--- a/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx
+++ b/frontend/src/scenes/insights/views/WorldMap/worldMapLogic.tsx
@@ -1,6 +1,8 @@
-import { kea, props, key, path, connect, actions, reducers, selectors } from 'kea'
+import { actions, connect, kea, key, path, props, reducers, selectors } from 'kea'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+
import { InsightLogicProps, TrendResult } from '~/types'
+
import { keyForInsightLogicProps } from '../../sharedUtils'
import type { worldMapLogicType } from './worldMapLogicType'
diff --git a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationDetails.tsx b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationDetails.tsx
index 1d14c6223dea7..b0e523bef5788 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationDetails.tsx
+++ b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationDetails.tsx
@@ -1,10 +1,11 @@
-import { AsyncMigration, AsyncMigrationError, asyncMigrationsLogic } from './asyncMigrationsLogic'
-import { LemonTable, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
import { useActions, useValues } from 'kea'
+import { IconRefresh } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonTable, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
import { humanFriendlyDetailedTime } from 'lib/utils'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { IconRefresh } from 'lib/lemon-ui/icons'
+
+import { AsyncMigration, AsyncMigrationError, asyncMigrationsLogic } from './asyncMigrationsLogic'
export function AsyncMigrationDetails({ asyncMigration }: { asyncMigration: AsyncMigration }): JSX.Element {
const { asyncMigrationErrorsLoading, asyncMigrationErrors } = useValues(asyncMigrationsLogic)
diff --git a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationParametersModal.tsx b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationParametersModal.tsx
index a0deb2a283041..16dbf65a8ce9d 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationParametersModal.tsx
+++ b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrationParametersModal.tsx
@@ -1,13 +1,13 @@
-import { useState } from 'react'
+import { Link } from '@posthog/lemon-ui'
import { useActions } from 'kea'
-import { AsyncMigrationModalProps, asyncMigrationsLogic } from 'scenes/instance/AsyncMigrations/asyncMigrationsLogic'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { asyncMigrationParameterFormLogic } from 'scenes/instance/AsyncMigrations/asyncMigrationParameterFormLogic'
import { Field, Form } from 'kea-forms'
-import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
import { LemonModal } from 'lib/lemon-ui/LemonModal'
-import { Link } from '@posthog/lemon-ui'
+import { useState } from 'react'
+import { asyncMigrationParameterFormLogic } from 'scenes/instance/AsyncMigrations/asyncMigrationParameterFormLogic'
+import { AsyncMigrationModalProps, asyncMigrationsLogic } from 'scenes/instance/AsyncMigrations/asyncMigrationsLogic'
export function AsyncMigrationParametersModal(props: AsyncMigrationModalProps): JSX.Element {
const { closeAsyncMigrationsModal } = useActions(asyncMigrationsLogic)
diff --git a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
index dc1be09924ebc..4bc890c80f38a 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
+++ b/frontend/src/scenes/instance/AsyncMigrations/AsyncMigrations.tsx
@@ -1,29 +1,30 @@
-import { useEffect } from 'react'
-import { PageHeader } from 'lib/components/PageHeader'
-import { SceneExport } from 'scenes/sceneTypes'
+import { Link } from '@posthog/lemon-ui'
import { Button, Progress } from 'antd'
import { useActions, useValues } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
+import { IconPlayCircle, IconRefresh, IconReplay } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { More } from 'lib/lemon-ui/LemonButton/More'
+import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
+import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
+import { LemonTag, LemonTagType } from 'lib/lemon-ui/LemonTag/LemonTag'
+import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { humanFriendlyDetailedTime } from 'lib/utils'
+import { useEffect } from 'react'
+import { AsyncMigrationParametersModal } from 'scenes/instance/AsyncMigrations/AsyncMigrationParametersModal'
+import { SceneExport } from 'scenes/sceneTypes'
+import { userLogic } from 'scenes/userLogic'
+
+import { AsyncMigrationDetails } from './AsyncMigrationDetails'
import {
AsyncMigration,
- migrationStatusNumberToMessage,
asyncMigrationsLogic,
AsyncMigrationsTab,
AsyncMigrationStatus,
+ migrationStatusNumberToMessage,
} from './asyncMigrationsLogic'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { userLogic } from 'scenes/userLogic'
import { SettingUpdateField } from './SettingUpdateField'
-import { LemonTable, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
-import { AsyncMigrationDetails } from './AsyncMigrationDetails'
-import { humanFriendlyDetailedTime } from 'lib/utils'
-import { More } from 'lib/lemon-ui/LemonButton/More'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { LemonTag, LemonTagType } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { IconPlayCircle, IconRefresh, IconReplay } from 'lib/lemon-ui/icons'
-import { AsyncMigrationParametersModal } from 'scenes/instance/AsyncMigrations/AsyncMigrationParametersModal'
-import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
-import { Link } from '@posthog/lemon-ui'
export const scene: SceneExport = {
component: AsyncMigrations,
diff --git a/frontend/src/scenes/instance/AsyncMigrations/SettingUpdateField.tsx b/frontend/src/scenes/instance/AsyncMigrations/SettingUpdateField.tsx
index 20bd8b9065626..415d832354f3e 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/SettingUpdateField.tsx
+++ b/frontend/src/scenes/instance/AsyncMigrations/SettingUpdateField.tsx
@@ -1,9 +1,11 @@
-import { useState } from 'react'
import { Button, Col, Divider, Input, Row } from 'antd'
import { useActions } from 'kea'
-import { asyncMigrationsLogic } from './asyncMigrationsLogic'
+import { useState } from 'react'
+
import { InstanceSetting } from '~/types'
+import { asyncMigrationsLogic } from './asyncMigrationsLogic'
+
export function SettingUpdateField({ setting }: { setting: InstanceSetting }): JSX.Element {
const { updateSetting } = useActions(asyncMigrationsLogic)
diff --git a/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationParameterFormLogic.ts b/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationParameterFormLogic.ts
index 449af49a92dfc..8cee7669a49f5 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationParameterFormLogic.ts
+++ b/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationParameterFormLogic.ts
@@ -1,4 +1,4 @@
-import { kea, key, props, path } from 'kea'
+import { kea, key, path, props } from 'kea'
import { forms } from 'kea-forms'
import { AsyncMigrationModalProps, asyncMigrationsLogic } from 'scenes/instance/AsyncMigrations/asyncMigrationsLogic'
diff --git a/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationsLogic.ts b/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationsLogic.ts
index b87588dff5198..9966096c8a6d0 100644
--- a/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationsLogic.ts
+++ b/frontend/src/scenes/instance/AsyncMigrations/asyncMigrationsLogic.ts
@@ -1,14 +1,15 @@
+import { actions, connect, events, kea, listeners, path, reducers, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
+import { actionToUrl, urlToAction } from 'kea-router'
import api from 'lib/api'
-import { kea, path, connect, actions, events, listeners, selectors, reducers } from 'kea'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { systemStatusLogic } from 'scenes/instance/SystemStatus/systemStatusLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { userLogic } from 'scenes/userLogic'
-import type { asyncMigrationsLogicType } from './asyncMigrationsLogicType'
-import { systemStatusLogic } from 'scenes/instance/SystemStatus/systemStatusLogic'
import { InstanceSetting } from '~/types'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { loaders } from 'kea-loaders'
-import { actionToUrl, urlToAction } from 'kea-router'
+
+import type { asyncMigrationsLogicType } from './asyncMigrationsLogicType'
export type TabName = 'overview' | 'internal_metrics'
// keep in sync with MigrationStatus in posthog/models/async_migration.py
diff --git a/frontend/src/scenes/instance/DeadLetterQueue/DeadLetterQueue.tsx b/frontend/src/scenes/instance/DeadLetterQueue/DeadLetterQueue.tsx
index fa516dea91558..6b8a6933c39f6 100644
--- a/frontend/src/scenes/instance/DeadLetterQueue/DeadLetterQueue.tsx
+++ b/frontend/src/scenes/instance/DeadLetterQueue/DeadLetterQueue.tsx
@@ -1,10 +1,11 @@
+import { useActions, useValues } from 'kea'
import { PageHeader } from 'lib/components/PageHeader'
+import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
import { SceneExport } from 'scenes/sceneTypes'
-import { useValues, useActions } from 'kea'
-import { deadLetterQueueLogic, DeadLetterQueueTab } from './deadLetterQueueLogic'
import { userLogic } from 'scenes/userLogic'
+
+import { deadLetterQueueLogic, DeadLetterQueueTab } from './deadLetterQueueLogic'
import { MetricsTab } from './MetricsTab'
-import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
export const scene: SceneExport = {
component: DeadLetterQueue,
diff --git a/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx b/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
index 901500d92a6c4..430c80e85cdbf 100644
--- a/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
+++ b/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
@@ -1,11 +1,12 @@
import { Button, Col, Divider, Row, Statistic } from 'antd'
-import { useValues, useActions } from 'kea'
-import { deadLetterQueueLogic } from './deadLetterQueueLogic'
-import { userLogic } from 'scenes/userLogic'
-import { LemonTable } from 'lib/lemon-ui/LemonTable'
+import { useActions, useValues } from 'kea'
+import { IconRefresh } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonTable } from 'lib/lemon-ui/LemonTable'
import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
-import { IconRefresh } from 'lib/lemon-ui/icons'
+import { userLogic } from 'scenes/userLogic'
+
+import { deadLetterQueueLogic } from './deadLetterQueueLogic'
// keep in sync with posthog/api/dead_letter_queue.py
const ROWS_LIMIT = 10
diff --git a/frontend/src/scenes/instance/DeadLetterQueue/deadLetterQueueLogic.ts b/frontend/src/scenes/instance/DeadLetterQueue/deadLetterQueueLogic.ts
index 4bd84df2e226d..2135874059cdc 100644
--- a/frontend/src/scenes/instance/DeadLetterQueue/deadLetterQueueLogic.ts
+++ b/frontend/src/scenes/instance/DeadLetterQueue/deadLetterQueueLogic.ts
@@ -1,10 +1,10 @@
-import { SystemStatusRow } from './../../../types'
-import api from 'lib/api'
import { actions, afterMount, kea, listeners, path, reducers, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
+import api from 'lib/api'
import { userLogic } from 'scenes/userLogic'
+import { SystemStatusRow } from './../../../types'
import type { deadLetterQueueLogicType } from './deadLetterQueueLogicType'
-import { loaders } from 'kea-loaders'
export type TabName = 'overview' | 'internal_metrics'
export enum DeadLetterQueueTab {
diff --git a/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx b/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx
index 4bb150b48d68e..79d221898a27a 100644
--- a/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/InstanceConfigSaveModal.tsx
@@ -2,7 +2,9 @@ import { LemonButton, LemonModal } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
import { pluralize } from 'lib/utils'
+
import { SystemStatusRow } from '~/types'
+
import { RenderMetricValue } from './RenderMetricValue'
import { systemStatusLogic } from './systemStatusLogic'
diff --git a/frontend/src/scenes/instance/SystemStatus/InstanceConfigTab.tsx b/frontend/src/scenes/instance/SystemStatus/InstanceConfigTab.tsx
index 6924ec179ffad..9d9f0eff4a507 100644
--- a/frontend/src/scenes/instance/SystemStatus/InstanceConfigTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/InstanceConfigTab.tsx
@@ -1,16 +1,18 @@
+import { LemonButton, Link } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
+import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
import { IconOpenInNew, IconWarning } from 'lib/lemon-ui/icons'
import { LemonTable, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
-import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
+import { pluralize } from 'lib/utils'
+import { useEffect } from 'react'
import { EnvironmentConfigOption, preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+
import { InstanceSetting } from '~/types'
+
+import { InstanceConfigSaveModal } from './InstanceConfigSaveModal'
import { MetricValue, RenderMetricValue } from './RenderMetricValue'
import { RenderMetricValueEdit } from './RenderMetricValueEdit'
import { ConfigMode, systemStatusLogic } from './systemStatusLogic'
-import { InstanceConfigSaveModal } from './InstanceConfigSaveModal'
-import { pluralize } from 'lib/utils'
-import { LemonButton, Link } from '@posthog/lemon-ui'
-import { useEffect } from 'react'
export function InstanceConfigTab(): JSX.Element {
const { configOptions, preflightLoading } = useValues(preflightLogic)
diff --git a/frontend/src/scenes/instance/SystemStatus/InternalMetricsTab.tsx b/frontend/src/scenes/instance/SystemStatus/InternalMetricsTab.tsx
index a53f8afe10a5e..7451de6a05d29 100644
--- a/frontend/src/scenes/instance/SystemStatus/InternalMetricsTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/InternalMetricsTab.tsx
@@ -1,12 +1,13 @@
-import { useMemo, useState } from 'react'
+import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
import { Table } from 'antd'
+import { ColumnsType } from 'antd/lib/table'
import { useActions, useValues } from 'kea'
+import { IconRefresh } from 'lib/lemon-ui/icons'
+import { LemonCollapse } from 'lib/lemon-ui/LemonCollapse'
+import { useMemo, useState } from 'react'
import { systemStatusLogic } from 'scenes/instance/SystemStatus/systemStatusLogic'
+
import { QuerySummary } from '~/types'
-import { ColumnsType } from 'antd/lib/table'
-import { LemonCollapse } from 'lib/lemon-ui/LemonCollapse'
-import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
-import { IconRefresh } from 'lib/lemon-ui/icons'
export function InternalMetricsTab(): JSX.Element {
const { openSections, queries, queriesLoading } = useValues(systemStatusLogic)
diff --git a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
index a61d9eb7e20cb..cbf13c19dcf59 100644
--- a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
@@ -1,10 +1,11 @@
-import { Button, Col, Divider, Row } from 'antd'
+import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
import { useValues } from 'kea'
-import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { kafkaInspectorLogic } from './kafkaInspectorLogic'
import { Field, Form } from 'kea-forms'
+import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput'
+import { kafkaInspectorLogic } from './kafkaInspectorLogic'
+
export function KafkaInspectorTab(): JSX.Element {
const { kafkaMessage } = useValues(kafkaInspectorLogic)
@@ -12,7 +13,7 @@ export function KafkaInspectorTab(): JSX.Element {
Kafka Inspector
Debug Kafka messages using the inspector tool.
-
+
diff --git a/frontend/src/scenes/instance/SystemStatus/OverviewTab.tsx b/frontend/src/scenes/instance/SystemStatus/OverviewTab.tsx
index ab3984d675038..71ed29426d9ab 100644
--- a/frontend/src/scenes/instance/SystemStatus/OverviewTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/OverviewTab.tsx
@@ -1,10 +1,12 @@
-import { systemStatusLogic } from './systemStatusLogic'
+import { LemonTable } from '@posthog/lemon-ui'
import { useValues } from 'kea'
-import { SystemStatusRow, SystemStatusSubrows } from '~/types'
import { IconOpenInNew } from 'lib/lemon-ui/icons'
import { Link } from 'lib/lemon-ui/Link'
+
+import { SystemStatusRow, SystemStatusSubrows } from '~/types'
+
import { RenderMetricValue } from './RenderMetricValue'
-import { LemonTable } from '@posthog/lemon-ui'
+import { systemStatusLogic } from './systemStatusLogic'
const METRIC_KEY_TO_INTERNAL_LINK = {
async_migrations_ok: '/instance/async_migrations',
diff --git a/frontend/src/scenes/instance/SystemStatus/RenderMetricValue.tsx b/frontend/src/scenes/instance/SystemStatus/RenderMetricValue.tsx
index 89b3660a8d886..9d5b2a81083ab 100644
--- a/frontend/src/scenes/instance/SystemStatus/RenderMetricValue.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/RenderMetricValue.tsx
@@ -1,7 +1,8 @@
+import { TZLabel } from '@posthog/apps-common'
+import { IconLock } from 'lib/lemon-ui/icons'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
+
import { InstanceSetting, SystemStatusRow } from '~/types'
-import { IconLock } from 'lib/lemon-ui/icons'
-import { TZLabel } from '@posthog/apps-common'
const TIMESTAMP_VALUES = new Set(['last_event_ingested_timestamp'])
diff --git a/frontend/src/scenes/instance/SystemStatus/RenderMetricValueEdit.tsx b/frontend/src/scenes/instance/SystemStatus/RenderMetricValueEdit.tsx
index 20922721843a3..5f8f3acc9907c 100644
--- a/frontend/src/scenes/instance/SystemStatus/RenderMetricValueEdit.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/RenderMetricValueEdit.tsx
@@ -1,5 +1,6 @@
import { LemonCheckbox, LemonInput } from '@posthog/lemon-ui'
import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
+
import { MetricValue } from './RenderMetricValue'
interface MetricValueEditInterface extends MetricValue {
diff --git a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
index 3605857912d5d..c9f0274320c1b 100644
--- a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
@@ -1,16 +1,18 @@
+import { Link } from '@posthog/lemon-ui'
import { Divider, Modal } from 'antd'
import { useActions, useValues } from 'kea'
+import { usersLemonSelectOptions } from 'lib/components/UserSelectItem'
import { IconDelete } from 'lib/lemon-ui/icons'
-import { LemonTableColumns, LemonTable } from 'lib/lemon-ui/LemonTable'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
+import { LemonTable, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
+import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
+import { userLogic } from 'scenes/userLogic'
+
import { UserType } from '~/types'
+
import { staffUsersLogic } from './staffUsersLogic'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { userLogic } from 'scenes/userLogic'
-import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { LemonSelectMultiple } from 'lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple'
-import { usersLemonSelectOptions } from 'lib/components/UserSelectItem'
-import { Link } from '@posthog/lemon-ui'
export function StaffUsersTab(): JSX.Element {
const { user: myself } = useValues(userLogic)
diff --git a/frontend/src/scenes/instance/SystemStatus/index.tsx b/frontend/src/scenes/instance/SystemStatus/index.tsx
index 0c4e7d08eda42..69ccf9b44bc11 100644
--- a/frontend/src/scenes/instance/SystemStatus/index.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/index.tsx
@@ -1,24 +1,24 @@
import './index.scss'
-import { Alert } from 'antd'
-import { systemStatusLogic, InstanceStatusTabName } from './systemStatusLogic'
+import { LemonBanner, Link } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { PageHeader } from 'lib/components/PageHeader'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
import { IconInfo } from 'lib/lemon-ui/icons'
-import { OverviewTab } from 'scenes/instance/SystemStatus/OverviewTab'
+import { LemonTab, LemonTabs } from 'lib/lemon-ui/LemonTabs'
+import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
import { InternalMetricsTab } from 'scenes/instance/SystemStatus/InternalMetricsTab'
+import { OverviewTab } from 'scenes/instance/SystemStatus/OverviewTab'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
import { SceneExport } from 'scenes/sceneTypes'
-import { InstanceConfigTab } from './InstanceConfigTab'
import { userLogic } from 'scenes/userLogic'
-import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { StaffUsersTab } from './StaffUsersTab'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { FEATURE_FLAGS } from 'lib/constants'
+
+import { InstanceConfigTab } from './InstanceConfigTab'
import { KafkaInspectorTab } from './KafkaInspectorTab'
-import { LemonTab, LemonTabs } from 'lib/lemon-ui/LemonTabs'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { Link } from '@posthog/lemon-ui'
+import { StaffUsersTab } from './StaffUsersTab'
+import { InstanceStatusTabName, systemStatusLogic } from './systemStatusLogic'
export const scene: SceneExport = {
component: SystemStatus,
@@ -105,44 +105,35 @@ export function SystemStatus(): JSX.Element {
}
/>
- {error && (
- An unknown error occurred. Please try again or contact us.}
- type="error"
- showIcon
- />
- )}
- {siteUrlMisconfigured && (
-
- Your SITE_URL environment variable seems misconfigured. Your{' '}
- SITE_URL is set to{' '}
-
- {preflight?.site_url}
- {' '}
- but you're currently browsing this page from{' '}
-
- {window.location.origin}
-
- . In order for PostHog to work properly, please set this to the origin where your instance
- is hosted.{' '}
-
- Learn more
-
-
- }
- showIcon
- type="warning"
- style={{ marginBottom: 32 }}
- />
- )}
+
+ {error && (
+
+
Something went wrong
+
{error || 'An unknown error occurred. Please try again or contact us.'}
+
+ )}
+ {siteUrlMisconfigured && (
+
+ Your SITE_URL environment variable seems misconfigured. Your SITE_URL{' '}
+ is set to{' '}
+
+ {preflight?.site_url}
+ {' '}
+ but you're currently browsing this page from{' '}
+
+ {window.location.origin}
+
+ . In order for PostHog to work properly, please set this to the origin where your instance is
+ hosted.
+
+ )}
+
diff --git a/frontend/src/scenes/instance/SystemStatus/kafkaInspectorLogic.ts b/frontend/src/scenes/instance/SystemStatus/kafkaInspectorLogic.ts
index f10afcd1dd3e9..3fcb9422d906c 100644
--- a/frontend/src/scenes/instance/SystemStatus/kafkaInspectorLogic.ts
+++ b/frontend/src/scenes/instance/SystemStatus/kafkaInspectorLogic.ts
@@ -1,8 +1,9 @@
import { actions, kea, path } from 'kea'
-import api from 'lib/api'
-import type { kafkaInspectorLogicType } from './kafkaInspectorLogicType'
import { forms } from 'kea-forms'
import { loaders } from 'kea-loaders'
+import api from 'lib/api'
+
+import type { kafkaInspectorLogicType } from './kafkaInspectorLogicType'
export interface KafkaMessage {
topic: string
partition: number
diff --git a/frontend/src/scenes/instance/SystemStatus/staffUsersLogic.ts b/frontend/src/scenes/instance/SystemStatus/staffUsersLogic.ts
index 1f59748f42345..d246472c51228 100644
--- a/frontend/src/scenes/instance/SystemStatus/staffUsersLogic.ts
+++ b/frontend/src/scenes/instance/SystemStatus/staffUsersLogic.ts
@@ -1,10 +1,12 @@
+import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, path, connect, actions, reducers, selectors, events } from 'kea'
import { router } from 'kea-router'
import api from 'lib/api'
import { urls } from 'scenes/urls'
import { userLogic } from 'scenes/userLogic'
+
import { UserType } from '~/types'
+
import type { staffUsersLogicType } from './staffUsersLogicType'
export const staffUsersLogic = kea([
diff --git a/frontend/src/scenes/instance/SystemStatus/systemStatusLogic.ts b/frontend/src/scenes/instance/SystemStatus/systemStatusLogic.ts
index 2a17736df79c8..a3fde5d7610ee 100644
--- a/frontend/src/scenes/instance/SystemStatus/systemStatusLogic.ts
+++ b/frontend/src/scenes/instance/SystemStatus/systemStatusLogic.ts
@@ -1,14 +1,16 @@
-import { actionToUrl, urlToAction } from 'kea-router'
+import { actions, events, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
+import { actionToUrl, urlToAction } from 'kea-router'
import api from 'lib/api'
-import { kea, path, actions, reducers, selectors, listeners, events } from 'kea'
-import type { systemStatusLogicType } from './systemStatusLogicType'
-import { userLogic } from 'scenes/userLogic'
-import { SystemStatus, SystemStatusRow, SystemStatusQueriesResult, InstanceSetting } from '~/types'
-import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { isUserLoggedIn } from 'lib/utils'
import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { isUserLoggedIn } from 'lib/utils'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { userLogic } from 'scenes/userLogic'
+
+import { InstanceSetting, SystemStatus, SystemStatusQueriesResult, SystemStatusRow } from '~/types'
+
+import type { systemStatusLogicType } from './systemStatusLogicType'
export enum ConfigMode {
View = 'view',
diff --git a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx
index 594cfa583e4bc..a1f1fae053850 100644
--- a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx
+++ b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx
@@ -1,13 +1,16 @@
-import React, { useState } from 'react'
-import { NotebookNodeType } from '~/types'
import './DraggableToNotebook.scss'
-import { useActions, useValues } from 'kea'
+
import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
import { FlaggedFeature } from 'lib/components/FlaggedFeature'
import { FEATURE_FLAGS } from 'lib/constants'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { notebookPanelLogic } from '../NotebookPanel/notebookPanelLogic'
+import React, { useState } from 'react'
+
+import { NotebookNodeType } from '~/types'
+
import { useNotebookNode } from '../Nodes/NotebookNodeContext'
+import { notebookPanelLogic } from '../NotebookPanel/notebookPanelLogic'
export type DraggableToNotebookBaseProps = {
href?: string
diff --git a/frontend/src/scenes/notebooks/IconNotebook.tsx b/frontend/src/scenes/notebooks/IconNotebook.tsx
index a534044d3e6b7..bdc4a14becc46 100644
--- a/frontend/src/scenes/notebooks/IconNotebook.tsx
+++ b/frontend/src/scenes/notebooks/IconNotebook.tsx
@@ -1,6 +1,6 @@
+import { IconNotebook as IconNotebook3000 } from '@posthog/icons'
import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { IconNotebook as IconNotebookLegacy, LemonIconProps } from 'lib/lemon-ui/icons'
-import { IconNotebook as IconNotebook3000 } from '@posthog/icons'
export function IconNotebook(props: LemonIconProps): JSX.Element {
const is3000 = useFeatureFlag('POSTHOG_3000')
diff --git a/frontend/src/scenes/notebooks/Marks/NotebookMarkLink.tsx b/frontend/src/scenes/notebooks/Marks/NotebookMarkLink.tsx
index f50e1290734a2..5af0f8ed1d7d6 100644
--- a/frontend/src/scenes/notebooks/Marks/NotebookMarkLink.tsx
+++ b/frontend/src/scenes/notebooks/Marks/NotebookMarkLink.tsx
@@ -1,7 +1,8 @@
-import { Mark, getMarkRange, mergeAttributes } from '@tiptap/core'
-import { linkPasteRule } from '../Nodes/utils'
+import { getMarkRange, Mark, mergeAttributes } from '@tiptap/core'
import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { linkPasteRule } from '../Nodes/utils'
+
export const NotebookMarkLink = Mark.create({
name: 'link',
priority: 1000,
diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss
index 179f475205dbf..1d4fa2d2021a3 100644
--- a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss
+++ b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss
@@ -56,7 +56,7 @@
}
&--selected {
- --border-color: var(--primary-3000);
+ --border-color: var(--border-bold);
}
&--auto-hide-metadata {
diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
index cba90e520677c..d2c96c06ee054 100644
--- a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
@@ -75,7 +75,17 @@ function NodeWrapper(props: NodeWrapperP
// nodeId can start null, but should then immediately be generated
const nodeLogic = useMountedLogic(notebookNodeLogic(logicProps))
const { resizeable, expanded, actions, nodeId } = useValues(nodeLogic)
- const { setExpanded, deleteNode, toggleEditing, insertOrSelectNextLine } = useActions(nodeLogic)
+ const { setRef, setExpanded, deleteNode, toggleEditing, insertOrSelectNextLine } = useActions(nodeLogic)
+
+ const { ref: inViewRef, inView } = useInView({ triggerOnce: true })
+
+ const setRefs = useCallback(
+ (node) => {
+ setRef(node)
+ inViewRef(node)
+ },
+ [inViewRef]
+ )
useEffect(() => {
// TRICKY: child nodes mount the parent logic so we need to control the mounting / unmounting directly in this component
@@ -92,7 +102,6 @@ function NodeWrapper(props: NodeWrapperP
mountedNotebookLogic,
})
- const [ref, inView] = useInView({ triggerOnce: true })
const contentRef = useRef(null)
// If resizeable is true then the node attr "height" is required
@@ -136,7 +145,7 @@ function NodeWrapper(props: NodeWrapperP
{
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/NotebookNodePersonFeed.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/NotebookNodePersonFeed.tsx
index b5c4ee5c2fd71..6b226f53c41ef 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/NotebookNodePersonFeed.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/NotebookNodePersonFeed.tsx
@@ -1,10 +1,11 @@
-import { useValues } from 'kea'
-
import { LemonSkeleton } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
import { NotFound } from 'lib/components/NotFound'
-import { NotebookNodeType, PersonType } from '~/types'
import { NotebookNodeProps } from 'scenes/notebooks/Notebook/utils'
import { personLogic } from 'scenes/persons/personLogic'
+
+import { NotebookNodeType, PersonType } from '~/types'
+
import { createPostHogWidgetNode } from '../NodeWrapper'
import { notebookNodePersonFeedLogic } from './notebookNodePersonFeedLogic'
import { Session } from './Session'
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx
index d3f346ae2d728..799c9561c4180 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx
@@ -1,15 +1,16 @@
-import { useState } from 'react'
-import { useActions, useValues } from 'kea'
-
-import { LemonButton } from '@posthog/lemon-ui'
import { IconRewindPlay } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
import { dayjs } from 'lib/dayjs'
-// import { TimelineEntry } from '~/queries/schema'
-import { NotebookNodeType } from '~/types'
import { IconUnfoldLess, IconUnfoldMore } from 'lib/lemon-ui/icons'
import { humanFriendlyDetailedTime, humanFriendlyDuration } from 'lib/utils'
-import { SessionEvent } from './SessionEvent'
+import { useState } from 'react'
+
+// import { TimelineEntry } from '~/queries/schema'
+import { NotebookNodeType } from '~/types'
+
import { notebookNodeLogic } from '../notebookNodeLogic'
+import { SessionEvent } from './SessionEvent'
type SessionProps = {
session: any // TimelineEntry
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/SessionEvent.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/SessionEvent.tsx
index 00131544c5662..ddb16a428c1ce 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/SessionEvent.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/SessionEvent.tsx
@@ -1,6 +1,8 @@
-import { EventType } from '~/types'
-import { eventToDescription } from 'lib/utils'
import { dayjs } from 'lib/dayjs'
+import { eventToDescription } from 'lib/utils'
+
+import { EventType } from '~/types'
+
import { EventIcon } from './EventIcon'
type SessionEventProps = { event: EventType }
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/notebookNodePersonFeedLogic.ts b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/notebookNodePersonFeedLogic.ts
index 43649f6573a38..0f500ba932df8 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/notebookNodePersonFeedLogic.ts
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/notebookNodePersonFeedLogic.ts
@@ -1,4 +1,4 @@
-import { kea, key, path, props, afterMount } from 'kea'
+import { afterMount, kea, key, path, props } from 'kea'
import { loaders } from 'kea-loaders'
import { query } from '~/queries/query'
diff --git a/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx b/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx
index b154f2de5cabb..33a473a06edea 100644
--- a/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/components/NotebookNodeTitle.tsx
@@ -1,10 +1,11 @@
-import { KeyboardEvent } from 'react'
+import { LemonInput, Tooltip } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { notebookNodeLogic } from '../notebookNodeLogic'
+import posthog from 'posthog-js'
+import { KeyboardEvent } from 'react'
import { useEffect, useState } from 'react'
-import { LemonInput, Tooltip } from '@posthog/lemon-ui'
import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
-import posthog from 'posthog-js'
+
+import { notebookNodeLogic } from '../notebookNodeLogic'
export function NotebookNodeTitle(): JSX.Element {
const { isEditable } = useValues(notebookLogic)
diff --git a/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts b/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
index c40cdfbbdb781..e49cd38e1042d 100644
--- a/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
+++ b/frontend/src/scenes/notebooks/Nodes/notebookNodeLogic.ts
@@ -63,6 +63,7 @@ export const notebookNodeLogic = kea([
initializeNode: true,
setMessageListeners: (listeners: NotebookNodeMessagesListeners) => ({ listeners }),
setTitlePlaceholder: (titlePlaceholder: string) => ({ titlePlaceholder }),
+ setRef: (ref: HTMLElement | null) => ({ ref }),
}),
connect((props: NotebookNodeLogicProps) => ({
@@ -71,6 +72,13 @@ export const notebookNodeLogic = kea([
})),
reducers(({ props }) => ({
+ ref: [
+ null as HTMLElement | null,
+ {
+ setRef: (_, { ref }) => ref,
+ unregisterNodeLogic: () => null,
+ },
+ ],
expanded: [
props.startExpanded ?? true,
{
@@ -246,7 +254,9 @@ export const notebookNodeLogic = kea([
props.updateAttributes(attributes)
},
toggleEditing: ({ visible }) => {
- const shouldShowThis = typeof visible === 'boolean' ? visible : !values.notebookLogic.values.editingNodeId
+ const shouldShowThis =
+ typeof visible === 'boolean' ? visible : values.notebookLogic.values.editingNodeId !== values.nodeId
+
props.notebookLogic.actions.setEditingNodeId(shouldShowThis ? values.nodeId : null)
},
initializeNode: () => {
diff --git a/frontend/src/scenes/notebooks/Notebook/Editor.tsx b/frontend/src/scenes/notebooks/Notebook/Editor.tsx
index be73659b7c7e0..287351779a53f 100644
--- a/frontend/src/scenes/notebooks/Notebook/Editor.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/Editor.tsx
@@ -1,47 +1,46 @@
-import posthog from 'posthog-js'
-import { useActions, useValues } from 'kea'
-import { useCallback, useMemo, useRef } from 'react'
-
+import { lemonToast } from '@posthog/lemon-ui'
import { Editor as TTEditor } from '@tiptap/core'
-import { EditorContent, useEditor } from '@tiptap/react'
+import ExtensionDocument from '@tiptap/extension-document'
import { FloatingMenu } from '@tiptap/extension-floating-menu'
-import StarterKit from '@tiptap/starter-kit'
import ExtensionPlaceholder from '@tiptap/extension-placeholder'
-import ExtensionDocument from '@tiptap/extension-document'
import TaskItem from '@tiptap/extension-task-item'
import TaskList from '@tiptap/extension-task-list'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { useActions, useValues } from 'kea'
+import { sampleOne } from 'lib/utils'
+import posthog from 'posthog-js'
+import { useCallback, useMemo, useRef } from 'react'
-import { NotebookNodeFlagCodeExample } from '../Nodes/NotebookNodeFlagCodeExample'
-import { NotebookNodeFlag } from '../Nodes/NotebookNodeFlag'
-import { NotebookNodeExperiment } from '../Nodes/NotebookNodeExperiment'
-import { NotebookNodeQuery } from '../Nodes/NotebookNodeQuery'
-import { NotebookNodeRecording } from '../Nodes/NotebookNodeRecording'
-import { NotebookNodePlaylist } from '../Nodes/NotebookNodePlaylist'
-import { NotebookNodePerson } from '../Nodes/NotebookNodePerson'
-import { NotebookNodeBacklink } from '../Nodes/NotebookNodeBacklink'
-import { NotebookNodeReplayTimestamp } from '../Nodes/NotebookNodeReplayTimestamp'
-import { NotebookMarkLink } from '../Marks/NotebookMarkLink'
-import { insertionSuggestionsLogic } from '../Suggestions/insertionSuggestionsLogic'
-import { FloatingSuggestions } from '../Suggestions/FloatingSuggestions'
-import { lemonToast } from '@posthog/lemon-ui'
import { NotebookNodeType } from '~/types'
-import { NotebookNodeImage } from '../Nodes/NotebookNodeImage'
-import { EditorFocusPosition, EditorRange, JSONContent, Node, textContent } from './utils'
-import { SlashCommandsExtension } from './SlashCommands'
+import { NotebookMarkLink } from '../Marks/NotebookMarkLink'
+import { NotebookNodeBacklink } from '../Nodes/NotebookNodeBacklink'
+import { NotebookNodeCohort } from '../Nodes/NotebookNodeCohort'
import { NotebookNodeEarlyAccessFeature } from '../Nodes/NotebookNodeEarlyAccessFeature'
-import { NotebookNodeSurvey } from '../Nodes/NotebookNodeSurvey'
-import { InlineMenu } from './InlineMenu'
-import { notebookLogic } from './notebookLogic'
-import { sampleOne } from 'lib/utils'
+import { NotebookNodeEmbed } from '../Nodes/NotebookNodeEmbed'
+import { NotebookNodeExperiment } from '../Nodes/NotebookNodeExperiment'
+import { NotebookNodeFlag } from '../Nodes/NotebookNodeFlag'
+import { NotebookNodeFlagCodeExample } from '../Nodes/NotebookNodeFlagCodeExample'
import { NotebookNodeGroup } from '../Nodes/NotebookNodeGroup'
-import { NotebookNodeCohort } from '../Nodes/NotebookNodeCohort'
+import { NotebookNodeImage } from '../Nodes/NotebookNodeImage'
+import { NotebookNodeMap } from '../Nodes/NotebookNodeMap'
+import { NotebookNodeMention } from '../Nodes/NotebookNodeMention'
+import { NotebookNodePerson } from '../Nodes/NotebookNodePerson'
import { NotebookNodePersonFeed } from '../Nodes/NotebookNodePersonFeed/NotebookNodePersonFeed'
+import { NotebookNodePlaylist } from '../Nodes/NotebookNodePlaylist'
import { NotebookNodeProperties } from '../Nodes/NotebookNodeProperties'
-import { NotebookNodeMap } from '../Nodes/NotebookNodeMap'
+import { NotebookNodeQuery } from '../Nodes/NotebookNodeQuery'
+import { NotebookNodeRecording } from '../Nodes/NotebookNodeRecording'
+import { NotebookNodeReplayTimestamp } from '../Nodes/NotebookNodeReplayTimestamp'
+import { NotebookNodeSurvey } from '../Nodes/NotebookNodeSurvey'
+import { FloatingSuggestions } from '../Suggestions/FloatingSuggestions'
+import { insertionSuggestionsLogic } from '../Suggestions/insertionSuggestionsLogic'
+import { InlineMenu } from './InlineMenu'
import { MentionsExtension } from './MentionsExtension'
-import { NotebookNodeMention } from '../Nodes/NotebookNodeMention'
-import { NotebookNodeEmbed } from '../Nodes/NotebookNodeEmbed'
+import { notebookLogic } from './notebookLogic'
+import { SlashCommandsExtension } from './SlashCommands'
+import { EditorFocusPosition, EditorRange, JSONContent, Node, textContent } from './utils'
const CustomDocument = ExtensionDocument.extend({
content: 'heading block*',
diff --git a/frontend/src/scenes/notebooks/Notebook/InlineMenu.tsx b/frontend/src/scenes/notebooks/Notebook/InlineMenu.tsx
index 1eb952e410ee1..d0d31cd04377c 100644
--- a/frontend/src/scenes/notebooks/Notebook/InlineMenu.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/InlineMenu.tsx
@@ -4,6 +4,7 @@ import { BubbleMenu } from '@tiptap/react'
import { IconBold, IconDelete, IconItalic, IconLink, IconOpenInNew } from 'lib/lemon-ui/icons'
import { isURL } from 'lib/utils'
import { useRef } from 'react'
+
import NotebookIconHeading from './NotebookIconHeading'
export const InlineMenu = ({ editor }: { editor: Editor }): JSX.Element => {
diff --git a/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx b/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx
index f18450d3b3525..d5c98de3f94ac 100644
--- a/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/MentionsExtension.tsx
@@ -1,17 +1,18 @@
+import { LemonButton, ProfilePicture } from '@posthog/lemon-ui'
import { Extension } from '@tiptap/core'
-import Suggestion from '@tiptap/suggestion'
-
+import { PluginKey } from '@tiptap/pm/state'
import { ReactRenderer } from '@tiptap/react'
-import { LemonButton, ProfilePicture } from '@posthog/lemon-ui'
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react'
-import { EditorRange } from './utils'
-import { Popover } from 'lib/lemon-ui/Popover'
+import Suggestion from '@tiptap/suggestion'
import Fuse from 'fuse.js'
import { useValues } from 'kea'
-import { notebookLogic } from './notebookLogic'
+import { Popover } from 'lib/lemon-ui/Popover'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react'
import { membersLogic } from 'scenes/organization/membersLogic'
+
import { NotebookNodeType, OrganizationMemberType } from '~/types'
-import { PluginKey } from '@tiptap/pm/state'
+
+import { notebookLogic } from './notebookLogic'
+import { EditorRange } from './utils'
type MentionsProps = {
range: EditorRange
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
index ed584c90842d8..9b0139e499d63 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -147,14 +147,6 @@
}
}
- &--editable {
- .NotebookEditor .ProseMirror {
- // Add some padding to help clicking below the last element
- padding-bottom: 10rem;
- flex: 1;
- }
- }
-
.NotebookColumn {
position: relative;
width: 0;
@@ -191,6 +183,11 @@
.NotebookColumn__content {
width: var(--notebook-column-left-width);
transform: translateX(-100%);
+
+ > .LemonWidget .LemonWidget__content {
+ max-height: var(--notebook-sidebar-height);
+ overflow: auto;
+ }
}
}
@@ -218,12 +215,27 @@
}
}
+ &--editable {
+ .NotebookEditor .ProseMirror {
+ // Add some padding to help clicking below the last element
+ padding-bottom: 10rem;
+ flex: 1;
+ }
+
+ .NotebookColumn--left.NotebookColumn--showing {
+ & + .NotebookEditor {
+ .ProseMirror {
+ // Add a lot of padding to allow the entire column to always be on screen
+ padding-bottom: 100vh;
+ }
+ }
+ }
+ }
+
.NotebookHistory {
flex: 1;
display: flex;
flex-direction: column;
- height: var(--notebook-sidebar-height);
- overflow: hidden;
}
.NotebookInlineMenu {
@@ -236,13 +248,6 @@
}
}
- .NotebookColumnLeft__widget {
- > .LemonWidget__content {
- max-height: calc(100vh - 220px);
- overflow: auto;
- }
- }
-
.LemonTable__content > table > thead {
position: sticky;
top: 0;
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx b/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx
index 6e00e37d2652e..e67b51d7ad639 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx
@@ -1,12 +1,14 @@
import { Meta, StoryFn } from '@storybook/react'
-import { useEffect } from 'react'
-import { mswDecorator } from '~/mocks/browser'
import { router } from 'kea-router'
-import { urls } from 'scenes/urls'
+import { useEffect } from 'react'
import { App } from 'scenes/App'
+import { urls } from 'scenes/urls'
+
+import { mswDecorator } from '~/mocks/browser'
+import { NotebookType } from '~/types'
+
import notebook12345Json from './__mocks__/notebook-12345.json'
import { notebookTestTemplate } from './__mocks__/notebook-template-for-snapshot'
-import { NotebookType } from '~/types'
// a list of test cases to run, showing different types of content in notebooks
const testCases: Record = {
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
index 9b65abb1ddf06..4b896c1cdb989 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
@@ -1,23 +1,25 @@
-import { useEffect } from 'react'
-import { NotebookLogicProps, notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
-import { BindLogic, useActions, useValues } from 'kea'
import './Notebook.scss'
-import { NotFound } from 'lib/components/NotFound'
import clsx from 'clsx'
-import { notebookSettingsLogic } from './notebookSettingsLogic'
+import { BindLogic, useActions, useValues } from 'kea'
+import { NotFound } from 'lib/components/NotFound'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
+import { useWhyDidIRender } from 'lib/hooks/useWhyDidIRender'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { useEffect } from 'react'
+import { notebookLogic, NotebookLogicProps } from 'scenes/notebooks/Notebook/notebookLogic'
+
+import { ErrorBoundary } from '~/layout/ErrorBoundary'
import { SCRATCHPAD_NOTEBOOK } from '~/models/notebooksModel'
-import { NotebookConflictWarning } from './NotebookConflictWarning'
-import { NotebookLoadingState } from './NotebookLoadingState'
+
import { Editor } from './Editor'
-import { EditorFocusPosition, JSONContent } from './utils'
import { NotebookColumnLeft } from './NotebookColumnLeft'
-import { ErrorBoundary } from '~/layout/ErrorBoundary'
-import { NotebookHistoryWarning } from './NotebookHistory'
-import { useWhyDidIRender } from 'lib/hooks/useWhyDidIRender'
import { NotebookColumnRight } from './NotebookColumnRight'
-import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
+import { NotebookConflictWarning } from './NotebookConflictWarning'
+import { NotebookHistoryWarning } from './NotebookHistory'
+import { NotebookLoadingState } from './NotebookLoadingState'
+import { notebookSettingsLogic } from './notebookSettingsLogic'
+import { EditorFocusPosition, JSONContent } from './utils'
export type NotebookProps = NotebookLogicProps & {
initialAutofocus?: EditorFocusPosition
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookColumnLeft.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookColumnLeft.tsx
index e952c0cb8fd48..871f352760c89 100644
--- a/frontend/src/scenes/notebooks/Notebook/NotebookColumnLeft.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/NotebookColumnLeft.tsx
@@ -1,11 +1,12 @@
-import { LemonWidget } from 'lib/lemon-ui/LemonWidget'
-import { BuiltLogic, useActions, useValues } from 'kea'
+import { LemonButton } from '@posthog/lemon-ui'
import clsx from 'clsx'
-import { notebookLogic } from './notebookLogic'
+import { BuiltLogic, useActions, useValues } from 'kea'
+import { LemonWidget } from 'lib/lemon-ui/LemonWidget'
+import { useEffect, useRef, useState } from 'react'
+
import { notebookNodeLogicType } from '../Nodes/notebookNodeLogicType'
-import { LemonButton } from '@posthog/lemon-ui'
-import { IconEyeVisible } from 'lib/lemon-ui/icons'
import { NotebookHistory } from './NotebookHistory'
+import { notebookLogic } from './notebookLogic'
export const NotebookColumnLeft = (): JSX.Element | null => {
const { editingNodeLogic, isShowingLeftColumn, showHistory } = useValues(notebookLogic)
@@ -16,7 +17,7 @@ export const NotebookColumnLeft = (): JSX.Element | null => {
'NotebookColumn--showing': isShowingLeftColumn,
})}
>
-
+ {editingNodeLogic ? : null}