}
- suffix={
}
- placeholder={activeFlow?.instruction ?? 'What would you like to do? Try some suggestions…'}
+ suffix={
}
+ placeholder={activeFlow?.instruction ?? 'Run a command…'}
autoFocus
value={input}
onChange={setInput}
diff --git a/frontend/src/lib/components/CommandBar/ActionResult.tsx b/frontend/src/lib/components/CommandBar/ActionResult.tsx
index 3ae32bd484a14..e10144edb6b4f 100644
--- a/frontend/src/lib/components/CommandBar/ActionResult.tsx
+++ b/frontend/src/lib/components/CommandBar/ActionResult.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react'
import { useActions } from 'kea'
+import { useEffect, useRef } from 'react'
-import { actionBarLogic } from './actionBarLogic'
import { CommandResultDisplayable } from '../CommandPalette/commandPaletteLogic'
+import { actionBarLogic } from './actionBarLogic'
type SearchResultProps = {
result: CommandResultDisplayable
@@ -22,9 +22,11 @@ export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Elemen
}, [focused])
return (
-
+
{
onMouseEnterResult(result.index)
}}
@@ -42,6 +44,7 @@ export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Elemen
{result.display}
+ {focused &&
Run command
}
)
diff --git a/frontend/src/lib/components/CommandBar/ActionResults.tsx b/frontend/src/lib/components/CommandBar/ActionResults.tsx
index ed44ab499d03e..c104546e9210f 100644
--- a/frontend/src/lib/components/CommandBar/ActionResults.tsx
+++ b/frontend/src/lib/components/CommandBar/ActionResults.tsx
@@ -1,10 +1,9 @@
import { useValues } from 'kea'
+import { getNameFromActionScope } from 'lib/components/CommandBar/utils'
import { CommandResultDisplayable } from '../CommandPalette/commandPaletteLogic'
-
import { actionBarLogic } from './actionBarLogic'
import { ActionResult } from './ActionResult'
-import { getNameFromActionScope } from 'lib/components/CommandBar/utils'
type ResultsGroupProps = {
scope: string
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx b/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx
new file mode 100644
index 0000000000000..898e3bc1de0c4
--- /dev/null
+++ b/frontend/src/lib/components/CommandBar/CommandBar.stories.tsx
@@ -0,0 +1,289 @@
+import { Meta } from '@storybook/react'
+import { useActions } from 'kea'
+import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
+import { BarStatus } from 'lib/components/CommandBar/types'
+import { useEffect } from 'react'
+
+import { mswDecorator } from '~/mocks/browser'
+
+import { CommandBar } from './CommandBar'
+
+const SEARCH_RESULT = {
+ results: [
+ {
+ type: 'insight',
+ result_id: '3b7NrJXF',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name: 'SQL query',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'U2W7bAq1',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name: 'All events → All events user conversion rate',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '120',
+ extra_fields: {
+ key: 'person-on-events-enabled',
+ name: 'person-on-events-enabled',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: '44fpCyF7',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name: 'User lifecycle based on Pageview',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '150',
+ extra_fields: {
+ key: 'cs-dashboards',
+ name: 'cs-dashboards',
+ },
+ },
+ {
+ type: 'notebook',
+ result_id: 'b1ZyFO6K',
+ extra_fields: {
+ title: 'Notes 27/09',
+ text_content: 'Notes 27/09\nasd\nas\nda\ns\nd\nlalala',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'Ap5YYl2H',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name:
+ 'Pageview count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: '4Xaltnro',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name: 'User paths based on page views and custom events',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'HUkkq7Au',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name:
+ 'Pageview count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count & All events count',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'hF5z02Iw',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name: 'Pageview count & All events count',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '143',
+ extra_fields: {
+ key: 'high-frequency-batch-exports',
+ name: 'high-frequency-batch-exports',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '126',
+ extra_fields: {
+ key: 'onboarding-v2-demo',
+ name: 'onboarding-v2-demo',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '142',
+ extra_fields: {
+ key: 'web-analytics',
+ name: 'web-analytics',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: '94r9bOyB',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name: 'Pageview count & All events count',
+ },
+ },
+ {
+ type: 'dashboard',
+ result_id: '1',
+ extra_fields: {
+ name: '🔑 Key metrics',
+ description: 'Company overview.',
+ },
+ },
+ {
+ type: 'notebook',
+ result_id: 'eq4n8PQY',
+ extra_fields: {
+ title: 'asd',
+ text_content: 'asd',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'QcCPEk7d',
+ extra_fields: {
+ name: 'Daily unique visitors over time',
+ description: null,
+ derived_name: '$pageview unique users & All events count',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '133',
+ extra_fields: {
+ key: 'feedback-scene',
+ name: 'feedback-scene',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'PWwez0ma',
+ extra_fields: {
+ name: 'Most popular pages',
+ description: null,
+ derived_name: null,
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'HKTERZ40',
+ extra_fields: {
+ name: 'Feature Flag calls made by unique users per variant',
+ description:
+ 'Shows the number of unique user calls made on feature flag per variant with key: notebooks',
+ derived_name: null,
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '161',
+ extra_fields: {
+ key: 'console-recording-search',
+ name: 'console-recording-search',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '134',
+ extra_fields: {
+ key: 'early-access-feature',
+ name: 'early-access-feature',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'uE7xieYc',
+ extra_fields: {
+ name: '',
+ description: '',
+ derived_name: 'Pageview count',
+ },
+ },
+ {
+ type: 'feature_flag',
+ result_id: '159',
+ extra_fields: {
+ key: 'surveys-multiple-questions',
+ name: 'surveys-multiple-questions',
+ },
+ },
+ {
+ type: 'insight',
+ result_id: 'AVPsaax4',
+ extra_fields: {
+ name: 'Monthly app revenue',
+ description: null,
+ derived_name: null,
+ },
+ },
+ ],
+ counts: {
+ insight: 80,
+ dashboard: 14,
+ experiment: 1,
+ feature_flag: 66,
+ notebook: 2,
+ action: 4,
+ cohort: 3,
+ },
+}
+
+const meta: Meta
= {
+ title: 'Components/Command Bar',
+ component: CommandBar,
+ decorators: [
+ mswDecorator({
+ get: {
+ '/api/projects/:team_id/search': SEARCH_RESULT,
+ },
+ }),
+ ],
+ parameters: {
+ layout: 'fullscreen',
+ testOptions: {
+ snapshotTargetSelector: '[data-attr="command-bar"]',
+ },
+ viewMode: 'story',
+ },
+}
+export default meta
+
+export function Search(): JSX.Element {
+ const { setCommandBar } = useActions(commandBarLogic)
+
+ useEffect(() => {
+ setCommandBar(BarStatus.SHOW_SEARCH)
+ }, [])
+
+ return
+}
+
+export function Actions(): JSX.Element {
+ const { setCommandBar } = useActions(commandBarLogic)
+
+ useEffect(() => {
+ setCommandBar(BarStatus.SHOW_ACTIONS)
+ }, [])
+
+ return
+}
+
+export function Shortcuts(): JSX.Element {
+ const { setCommandBar } = useActions(commandBarLogic)
+
+ useEffect(() => {
+ setCommandBar(BarStatus.SHOW_SHORTCUTS)
+ }, [])
+
+ return
+}
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
index cd906715a4cdc..480cf294d9e3a 100644
--- a/frontend/src/lib/components/CommandBar/CommandBar.tsx
+++ b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -1,29 +1,47 @@
-import { useRef } from 'react'
-import { useActions, useValues } from 'kea'
+import './index.scss'
+import { useActions, useValues } from 'kea'
import { useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
+import { forwardRef, useRef } from 'react'
+import { ActionBar } from './ActionBar'
import { commandBarLogic } from './commandBarLogic'
+import { SearchBar } from './SearchBar'
+import { Shortcuts } from './Shortcuts'
import { BarStatus } from './types'
-import './index.scss'
-import { SearchBar } from './SearchBar'
-import { ActionBar } from './ActionBar'
+interface CommandBarOverlayProps {
+ barStatus: BarStatus
+ children?: React.ReactNode
+}
-const CommandBarOverlay = ({ children }: { children?: React.ReactNode }): JSX.Element => (
-
- {children}
-
-)
+const CommandBarOverlay = forwardRef(function CommandBarOverlayInternal(
+ { barStatus, children },
+ ref
+): JSX.Element {
+ return (
+
+ )
+})
export function CommandBar(): JSX.Element | null {
const containerRef = useRef(null)
@@ -37,15 +55,10 @@ export function CommandBar(): JSX.Element | null {
}
return (
-
-
- {barStatus === BarStatus.SHOW_SEARCH ?
:
}
-
{
setActiveTab(type)
inputRef.current?.focus()
diff --git a/frontend/src/lib/components/CommandBar/SearchInput.tsx b/frontend/src/lib/components/CommandBar/SearchInput.tsx
index ce03cc5af4cc7..3d79b64531e78 100644
--- a/frontend/src/lib/components/CommandBar/SearchInput.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchInput.tsx
@@ -1,30 +1,35 @@
+import { LemonInput } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
+import { isMac } from 'lib/utils'
+import { forwardRef, Ref } from 'react'
+import { teamLogic } from 'scenes/teamLogic'
-import { LemonInput } from '@posthog/lemon-ui'
import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
import { searchBarLogic } from './searchBarLogic'
-import { forwardRef, Ref } from 'react'
-import { teamLogic } from 'scenes/teamLogic'
export const SearchInput = forwardRef(function _SearchInput(_, ref: Ref
): JSX.Element {
const { currentTeam } = useValues(teamLogic)
const { searchQuery } = useValues(searchBarLogic)
const { setSearchQuery } = useActions(searchBarLogic)
+ const modifierKey = isMac() ? '⌘' : '^'
+ const placeholder = currentTeam
+ ? `Search the ${currentTeam.name} project or press ${modifierKey}⇧K to go to commands…`
+ : `Search or press ${modifierKey}⇧K to go to commands…`
+
return (
}
+ suffix={}
+ placeholder={placeholder}
autoFocus
value={searchQuery}
onChange={setSearchQuery}
- placeholder={currentTeam ? `Search the ${currentTeam.name} project…` : 'Search…'}
/>
)
diff --git a/frontend/src/lib/components/CommandBar/SearchResult.tsx b/frontend/src/lib/components/CommandBar/SearchResult.tsx
index 8c5364ca87101..9a14a6203fa5a 100644
--- a/frontend/src/lib/components/CommandBar/SearchResult.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchResult.tsx
@@ -1,10 +1,17 @@
-import { useLayoutEffect, useRef } from 'react'
+import { LemonSkeleton } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
+import { useLayoutEffect, useRef } from 'react'
+import { summarizeInsight } from 'scenes/insights/summarizeInsight'
+import { mathsLogic } from 'scenes/trends/mathsLogic'
+
+import { cohortsModel } from '~/models/cohortsModel'
+import { groupsModel } from '~/models/groupsModel'
+import { Node } from '~/queries/schema'
+import { FilterType } from '~/types'
import { resultTypeToName } from './constants'
import { searchBarLogic, urlForResult } from './searchBarLogic'
import { SearchResult as SearchResultType } from './types'
-import { LemonSkeleton } from '@posthog/lemon-ui'
type SearchResultProps = {
result: SearchResultType
@@ -41,9 +48,7 @@ export const SearchResult = ({ result, resultIndex, focused, keyboardFocused }:
return (
{
if (isAutoScrolling) {
return
@@ -88,9 +93,23 @@ type ResultNameProps = {
}
export const ResultName = ({ result }: ResultNameProps): JSX.Element | null => {
+ const { aggregationLabel } = useValues(groupsModel)
+ const { cohortsById } = useValues(cohortsModel)
+ const { mathDefinitions } = useValues(mathsLogic)
+
const { type, extra_fields } = result
if (type === 'insight') {
- return extra_fields.name ?
{extra_fields.name} :
{extra_fields.derived_name}
+ return extra_fields.name ? (
+
{extra_fields.name}
+ ) : (
+
+ {summarizeInsight(extra_fields.query as Node | null, extra_fields.filters as Partial, {
+ aggregationLabel,
+ cohortsById,
+ mathDefinitions,
+ })}
+
+ )
} else if (type === 'feature_flag') {
return
{extra_fields.key}
} else if (type === 'notebook') {
diff --git a/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx b/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx
index f91b09a865dd3..57bd498e353ea 100644
--- a/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchResultPreview.tsx
@@ -1,10 +1,9 @@
import { useValues } from 'kea'
+import { ResultDescription, ResultName } from 'lib/components/CommandBar/SearchResult'
import { resultTypeToName } from './constants'
import { searchBarLogic } from './searchBarLogic'
-import { ResultDescription, ResultName } from 'lib/components/CommandBar/SearchResult'
-
export const SearchResultPreview = (): JSX.Element | null => {
const { activeResultIndex, filterSearchResults } = useValues(searchBarLogic)
diff --git a/frontend/src/lib/components/CommandBar/SearchResults.tsx b/frontend/src/lib/components/CommandBar/SearchResults.tsx
index 9a1e217d69b4d..c385bd315ad44 100644
--- a/frontend/src/lib/components/CommandBar/SearchResults.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchResults.tsx
@@ -1,7 +1,6 @@
import { useValues } from 'kea'
import { DetectiveHog } from '../hedgehogs'
-
import { searchBarLogic } from './searchBarLogic'
import { SearchResult, SearchResultSkeleton } from './SearchResult'
import { SearchResultPreview } from './SearchResultPreview'
diff --git a/frontend/src/lib/components/CommandBar/SearchTabs.tsx b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
index fe6e9a9edb2ad..4e3d65c29cadd 100644
--- a/frontend/src/lib/components/CommandBar/SearchTabs.tsx
+++ b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
@@ -17,7 +17,7 @@ export const SearchTabs = ({ inputRef }: SearchTabsProps): JSX.Element | null =>
}
return (
-
+
{Object.entries(searchResponse.counts).map(([type, count]) => (
{
+ useMountedLogic(shortcutsLogic)
+
+ return (
+
+
Keyboard shortcuts
+
Site-wide shortcuts
+
+
+ Open search
+
+
+ Open command palette
+
+
+
{title}
{viewAllURL && View all}
-
+
diff --git a/frontend/src/lib/components/CompareFilter/CompareFilter.tsx b/frontend/src/lib/components/CompareFilter/CompareFilter.tsx
index 02d2ad2e91f4b..a70f38cc31c17 100644
--- a/frontend/src/lib/components/CompareFilter/CompareFilter.tsx
+++ b/frontend/src/lib/components/CompareFilter/CompareFilter.tsx
@@ -1,6 +1,6 @@
-import { useValues, useActions } from 'kea'
-import { insightLogic } from 'scenes/insights/insightLogic'
import { LemonCheckbox } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { insightLogic } from 'scenes/insights/insightLogic'
import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
export function CompareFilter(): JSX.Element | null {
diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
index 0e85ee60317d8..03480644f2d5b 100644
--- a/frontend/src/lib/components/CopyToClipboard.tsx
+++ b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -1,8 +1,8 @@
-import { HTMLProps } from 'react'
-import { copyToClipboard } from 'lib/utils/copyToClipboard'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { IconCopy } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
+import { HTMLProps } from 'react'
interface InlinePropsBase extends HTMLProps
{
description?: string
diff --git a/frontend/src/lib/components/DateDisplay/index.tsx b/frontend/src/lib/components/DateDisplay/index.tsx
index c5e35fd8944e2..55a48230e6782 100644
--- a/frontend/src/lib/components/DateDisplay/index.tsx
+++ b/frontend/src/lib/components/DateDisplay/index.tsx
@@ -1,6 +1,8 @@
+import './DateDisplay.scss'
+
import { dayjs } from 'lib/dayjs'
+
import { IntervalType } from '~/types'
-import './DateDisplay.scss'
interface DateDisplayProps {
date: string
diff --git a/frontend/src/lib/components/DateFilter/DateFilter.tsx b/frontend/src/lib/components/DateFilter/DateFilter.tsx
index 254493add06ed..d647324c7e1ee 100644
--- a/frontend/src/lib/components/DateFilter/DateFilter.tsx
+++ b/frontend/src/lib/components/DateFilter/DateFilter.tsx
@@ -1,15 +1,6 @@
-import { useRef } from 'react'
-import { dateMapping, dateFilterToText, uuid } from 'lib/utils'
-import { DateMappingOption } from '~/types'
-import { dayjs } from 'lib/dayjs'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { dateFilterLogic } from './dateFilterLogic'
-import { RollingDateRangeFilter } from './RollingDateRangeFilter'
+import { Placement } from '@floating-ui/react'
+import { LemonButton, LemonButtonProps, LemonButtonWithDropdown, LemonDivider } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { LemonButtonWithDropdown, LemonDivider, LemonButton, LemonButtonProps } from '@posthog/lemon-ui'
-import { IconCalendar } from 'lib/lemon-ui/icons'
-import { LemonCalendarSelect } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect'
-import { LemonCalendarRange } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
import {
CUSTOM_OPTION_DESCRIPTION,
CUSTOM_OPTION_KEY,
@@ -17,7 +8,18 @@ import {
DateFilterLogicProps,
DateFilterView,
} from 'lib/components/DateFilter/types'
-import { Placement } from '@floating-ui/react'
+import { dayjs } from 'lib/dayjs'
+import { IconCalendar } from 'lib/lemon-ui/icons'
+import { LemonCalendarSelect } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect'
+import { LemonCalendarRange } from 'lib/lemon-ui/LemonCalendarRange/LemonCalendarRange'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { dateFilterToText, dateMapping, uuid } from 'lib/utils'
+import { useRef } from 'react'
+
+import { DateMappingOption } from '~/types'
+
+import { dateFilterLogic } from './dateFilterLogic'
+import { RollingDateRangeFilter } from './RollingDateRangeFilter'
export interface DateFilterProps {
showCustom?: boolean
diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
index 8f99bb64c0bde..3d18b2e5b2d96 100644
--- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
+++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
@@ -45,9 +45,15 @@
line-height: 1.25rem;
align-items: center;
- input {
+ .LemonInput {
width: 3rem;
- text-align: center;
+ min-height: 0;
+ padding: 0;
+ border: none;
+
+ input {
+ text-align: center;
+ }
}
.RollingDateRangeFilter__counter__step {
diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx
index c1371a66414fe..f25ef9f06be6d 100644
--- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx
+++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx
@@ -1,11 +1,12 @@
-import { Input } from 'antd'
-import { DateOption, rollingDateRangeFilterLogic } from './rollingDateRangeFilterLogic'
+import './RollingDateRangeFilter.scss'
+
+import { LemonButton, LemonInput, LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
+import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { LemonButton, LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { dayjs } from 'lib/dayjs'
-import clsx from 'clsx'
-import './RollingDateRangeFilter.scss'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+
+import { DateOption, rollingDateRangeFilterLogic } from './rollingDateRangeFilterLogic'
const dateOptions: LemonSelectOptions = [
{ value: 'days', label: 'days' },
@@ -38,11 +39,6 @@ export function RollingDateRangeFilter({
useActions(rollingDateRangeFilterLogic(logicProps))
const { counter, dateOption, formattedDate } = useValues(rollingDateRangeFilterLogic(logicProps))
- const onInputChange = (event: React.ChangeEvent): void => {
- const newValue = event.target.value ? parseFloat(event.target.value) : undefined
- setCounter(newValue)
- }
-
return (
-
- setCounter(value)}
/>
{
let props: DateFilterLogicProps
diff --git a/frontend/src/lib/components/DateFilter/dateFilterLogic.ts b/frontend/src/lib/components/DateFilter/dateFilterLogic.ts
index 13536740e4c93..77faff7074618 100644
--- a/frontend/src/lib/components/DateFilter/dateFilterLogic.ts
+++ b/frontend/src/lib/components/DateFilter/dateFilterLogic.ts
@@ -1,9 +1,11 @@
-import { actions, props, kea, listeners, path, reducers, selectors, key } from 'kea'
-import { dayjs, Dayjs } from 'lib/dayjs'
-import type { dateFilterLogicType } from './dateFilterLogicType'
-import { isDate, dateFilterToText, dateStringToDayJs, formatDateRange, formatDate } from 'lib/utils'
-import { DateMappingOption } from '~/types'
+import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea'
import { CUSTOM_OPTION_VALUE, DateFilterLogicProps, DateFilterView } from 'lib/components/DateFilter/types'
+import { Dayjs, dayjs } from 'lib/dayjs'
+import { dateFilterToText, dateStringToDayJs, formatDate, formatDateRange, isDate } from 'lib/utils'
+
+import { DateMappingOption } from '~/types'
+
+import type { dateFilterLogicType } from './dateFilterLogicType'
export const dateFilterLogic = kea([
path(['lib', 'components', 'DateFilter', 'DateFilterLogic']),
diff --git a/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.test.ts b/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.test.ts
index f97bde9e94457..861274103fa93 100644
--- a/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.test.ts
+++ b/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.test.ts
@@ -1,5 +1,7 @@
import { expectLogic } from 'kea-test-utils'
+
import { initKeaTests } from '~/test/init'
+
import { rollingDateRangeFilterLogic } from './rollingDateRangeFilterLogic'
describe('rollingDateRangeFilterLogic', () => {
diff --git a/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts b/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts
index 4600f12bc2b89..29bed83a7566f 100644
--- a/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts
+++ b/frontend/src/lib/components/DateFilter/rollingDateRangeFilterLogic.ts
@@ -1,9 +1,11 @@
-import { actions, props, kea, listeners, path, reducers, selectors } from 'kea'
-import type { rollingDateRangeFilterLogicType } from './rollingDateRangeFilterLogicType'
-import { Dayjs } from 'lib/dayjs'
import './RollingDateRangeFilter.scss'
+
+import { actions, kea, listeners, path, props, reducers, selectors } from 'kea'
+import { Dayjs } from 'lib/dayjs'
import { dateFilterToText } from 'lib/utils'
+import type { rollingDateRangeFilterLogicType } from './rollingDateRangeFilterLogicType'
+
const dateOptionsMap = {
q: 'quarters',
m: 'months',
diff --git a/frontend/src/lib/components/DateFilter/types.ts b/frontend/src/lib/components/DateFilter/types.ts
index 63bbd2c29303a..d3563cbbad0bf 100644
--- a/frontend/src/lib/components/DateFilter/types.ts
+++ b/frontend/src/lib/components/DateFilter/types.ts
@@ -1,4 +1,5 @@
import { Dayjs } from 'lib/dayjs'
+
import { DateMappingOption } from '~/types'
export enum DateFilterView {
diff --git a/frontend/src/lib/components/DatePicker.tsx b/frontend/src/lib/components/DatePicker.tsx
index dfe194d66ab78..42ce83e78640a 100644
--- a/frontend/src/lib/components/DatePicker.tsx
+++ b/frontend/src/lib/components/DatePicker.tsx
@@ -1,6 +1,7 @@
-import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
-import generatePicker from 'antd/lib/date-picker/generatePicker'
import './DatePicker.scss'
+
+import generatePicker from 'antd/lib/date-picker/generatePicker'
import { dayjs } from 'lib/dayjs'
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'
export const DatePicker = generatePicker(dayjsGenerateConfig)
diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
index 4ceb631d56d77..0f6f31011e404 100644
--- a/frontend/src/lib/components/DebugNotice.tsx
+++ b/frontend/src/lib/components/DebugNotice.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
import { IconClose } from 'lib/lemon-ui/icons'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { useEffect, useState } from 'react'
export function DebugNotice(): JSX.Element | null {
const [debugInfo, setDebugInfo] = useState<{ branch: string; revision: string } | undefined>()
diff --git a/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx b/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx
index 1ad4be54568a5..b0e9045a7e102 100644
--- a/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/ActionPopoverInfo.tsx
@@ -1,6 +1,8 @@
-import { ActionType } from '~/types'
import { DefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopover'
import { genericOperatorToHumanName, propertyValueToHumanName } from 'lib/components/DefinitionPopover/utils'
+
+import { ActionType } from '~/types'
+
import { PropertyKeyInfo } from '../PropertyKeyInfo'
export function ActionPopoverInfo({ entity }: { entity: ActionType }): JSX.Element | null {
diff --git a/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx b/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx
index 1c309951b1956..2cfcf0ad93948 100644
--- a/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/CohortPopoverInfo.tsx
@@ -1,21 +1,23 @@
-import { AnyCohortCriteriaType, CohortType, FilterLogicalOperator } from '~/types'
+import { useValues } from 'kea'
import { DefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopover'
import {
genericOperatorToHumanName,
operatorToHumanName,
propertyValueToHumanName,
} from 'lib/components/DefinitionPopover/utils'
+import { pluralize } from 'lib/utils'
+import { BEHAVIORAL_TYPE_TO_LABEL } from 'scenes/cohorts/CohortFilters/constants'
import {
COHORT_MATCHING_DAYS,
criteriaToBehavioralFilterType,
criteriaToHumanSentence,
isCohortCriteriaGroup,
} from 'scenes/cohorts/cohortUtils'
-import { pluralize } from 'lib/utils'
-import { BEHAVIORAL_TYPE_TO_LABEL } from 'scenes/cohorts/CohortFilters/constants'
-import { useValues } from 'kea'
-import { cohortsModel } from '~/models/cohortsModel'
+
import { actionsModel } from '~/models/actionsModel'
+import { cohortsModel } from '~/models/cohortsModel'
+import { AnyCohortCriteriaType, CohortType, FilterLogicalOperator } from '~/types'
+
import { PropertyKeyInfo } from '../PropertyKeyInfo'
const MAX_CRITERIA_GROUPS = 2
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
index 46fc5d0773ed8..4f9297fe9261b 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
@@ -146,15 +146,6 @@
.definition-popover-edit-form-value {
margin-bottom: 1rem;
-
- &.definition-popover-owner-select {
- .ant-select-selector {
- .ant-select-selection-placeholder {
- color: black;
- font-weight: normal;
- }
- }
- }
}
}
}
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
index 65a7711d3b635..db1cdb0b48cdc 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
@@ -1,18 +1,19 @@
import './DefinitionPopover.scss'
+
+import { Divider, DividerProps } from 'antd'
import clsx from 'clsx'
-import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
import { useActions, useValues } from 'kea'
+import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { getKeyMapping } from 'lib/taxonomy'
-import { KeyMapping, UserBasicType, PropertyDefinition } from '~/types'
-import { Owner } from 'scenes/events/Owner'
import { dayjs } from 'lib/dayjs'
-import { Divider, DividerProps, Select } from 'antd'
-import { membersLogic } from 'scenes/organization/membersLogic'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
import { Link } from 'lib/lemon-ui/Link'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { getKeyMapping } from 'lib/taxonomy'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
+import { Owner } from 'scenes/events/Owner'
+
+import { KeyMapping, UserBasicType } from '~/types'
interface DefinitionPopoverProps {
children: React.ReactNode
@@ -236,48 +237,6 @@ function Card({
)
}
-function Type({ propertyType }: { propertyType: PropertyDefinition['property_type'] | null }): JSX.Element {
- return propertyType ? (
-
- ) : (
- <>
- )
-}
-
-function OwnerDropdown(): JSX.Element {
- const { members } = useValues(membersLogic)
- const { localDefinition } = useValues(definitionPopoverLogic)
- const { setLocalDefinition } = useActions(definitionPopoverLogic)
-
- return (
- }
- style={{ minWidth: 200 }}
- dropdownClassName="owner-option"
- onChange={(val) => {
- const newOwner = members.find((mem) => mem.user.id === val)?.user
- if (newOwner) {
- setLocalDefinition({ owner: newOwner })
- } else {
- setLocalDefinition({ owner: null })
- }
- }}
- >
-
-
-
- {members.map((member) => (
-
-
-
- ))}
-
- )
-}
-
export const DefinitionPopover = {
Wrapper,
Header,
@@ -289,6 +248,4 @@ export const DefinitionPopover = {
Grid,
Section,
Card,
- OwnerDropdown,
- Type,
}
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
index cb4af914b655b..7193044205f95 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
@@ -1,26 +1,28 @@
+import { hide } from '@floating-ui/react'
+import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { ActionPopoverInfo } from 'lib/components/DefinitionPopover/ActionPopoverInfo'
+import { CohortPopoverInfo } from 'lib/components/DefinitionPopover/CohortPopoverInfo'
+import { DefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopover'
+import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
+import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
+import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
import {
SimpleOption,
TaxonomicDefinitionTypes,
TaxonomicFilterGroup,
TaxonomicFilterGroupType,
} from 'lib/components/TaxonomicFilter/types'
-import { useActions, useValues } from 'kea'
-import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
-import { useEffect } from 'react'
-import { isPostHogProp, KEY_MAPPING } from 'lib/taxonomy'
-import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { DefinitionPopover } from 'lib/components/DefinitionPopover/DefinitionPopover'
-import { Link } from 'lib/lemon-ui/Link'
import { IconInfo, IconLock, IconOpenInNew } from 'lib/lemon-ui/icons'
-import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
-import { ActionType, CohortType, EventDefinition, PropertyDefinition } from '~/types'
-import { ActionPopoverInfo } from 'lib/components/DefinitionPopover/ActionPopoverInfo'
-import { CohortPopoverInfo } from 'lib/components/DefinitionPopover/CohortPopoverInfo'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
+import { Link } from 'lib/lemon-ui/Link'
import { Popover } from 'lib/lemon-ui/Popover'
-import { hide } from '@floating-ui/react'
-import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { isPostHogProp, KEY_MAPPING } from 'lib/taxonomy'
+import { useEffect } from 'react'
+
+import { ActionType, CohortType, EventDefinition, PropertyDefinition } from '~/types'
+
import { TZLabel } from '../TZLabel'
function TaxonomyIntroductionSection(): JSX.Element {
diff --git a/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.test.ts b/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.test.ts
index c893dc7506426..1db1f33132221 100644
--- a/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.test.ts
+++ b/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.test.ts
@@ -1,5 +1,14 @@
-import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
+import { expectLogic } from 'kea-test-utils'
import api from 'lib/api'
+import { definitionPopoverLogic, DefinitionPopoverState } from 'lib/components/DefinitionPopover/definitionPopoverLogic'
+import { TaxonomicDefinitionTypes, TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { urls } from 'scenes/urls'
+
+import { useMocks } from '~/mocks/jest'
+import { actionsModel } from '~/models/actionsModel'
+import { cohortsModel } from '~/models/cohortsModel'
+import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
+import { initKeaTests } from '~/test/init'
import {
mockActionDefinition,
mockCohort,
@@ -9,15 +18,7 @@ import {
mockGroup,
mockPersonProperty,
} from '~/test/mocks'
-import { initKeaTests } from '~/test/init'
-import { TaxonomicDefinitionTypes, TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { expectLogic } from 'kea-test-utils'
-import { urls } from 'scenes/urls'
-import { actionsModel } from '~/models/actionsModel'
import { ActionType, CohortType, PersonProperty, PropertyDefinition } from '~/types'
-import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { cohortsModel } from '~/models/cohortsModel'
-import { useMocks } from '~/mocks/jest'
describe('definitionPopoverLogic', () => {
let logic: ReturnType
diff --git a/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.ts b/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.ts
index 931d1b00114d6..38f907c0abbee 100644
--- a/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.ts
+++ b/frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.ts
@@ -1,19 +1,21 @@
+import equal from 'fast-deep-equal'
+import { actions, connect, events, kea, listeners, path, props, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
-import { kea, props, path, connect, actions, reducers, selectors, listeners, events } from 'kea'
-import type { definitionPopoverLogicType } from './definitionPopoverLogicType'
+import api from 'lib/api'
+import { getSingularType } from 'lib/components/DefinitionPopover/utils'
import { TaxonomicDefinitionTypes, TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
import { capitalizeFirstLetter } from 'lib/utils'
-import { getSingularType } from 'lib/components/DefinitionPopover/utils'
-import { ActionType, AvailableFeature, CohortType, EventDefinition, PropertyDefinition } from '~/types'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import { urls } from 'scenes/urls'
-import api from 'lib/api'
+import { userLogic } from 'scenes/userLogic'
+
import { actionsModel } from '~/models/actionsModel'
-import { updatePropertyDefinitions } from '~/models/propertyDefinitionsModel'
import { cohortsModel } from '~/models/cohortsModel'
-import equal from 'fast-deep-equal'
-import { userLogic } from 'scenes/userLogic'
-import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { updatePropertyDefinitions } from '~/models/propertyDefinitionsModel'
+import { ActionType, AvailableFeature, CohortType, EventDefinition, PropertyDefinition } from '~/types'
+
+import type { definitionPopoverLogicType } from './definitionPopoverLogicType'
const IS_TEST_MODE = process.env.NODE_ENV === 'test'
diff --git a/frontend/src/lib/components/DefinitionPopover/utils.ts b/frontend/src/lib/components/DefinitionPopover/utils.ts
index 1a7ec529cc0f3..f828aea981fc2 100644
--- a/frontend/src/lib/components/DefinitionPopover/utils.ts
+++ b/frontend/src/lib/components/DefinitionPopover/utils.ts
@@ -1,7 +1,8 @@
-import { AnyPropertyFilter, PropertyFilterValue, PropertyOperator } from '~/types'
-import { allOperatorsMapping, genericOperatorMap } from 'lib/utils'
-import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
import { isPropertyFilterWithOperator } from 'lib/components/PropertyFilters/utils'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { allOperatorsMapping, genericOperatorMap } from 'lib/utils'
+
+import { AnyPropertyFilter, PropertyFilterValue, PropertyOperator } from '~/types'
export function operatorToHumanName(operator?: string): string {
if (operator === 'gte') {
diff --git a/frontend/src/lib/components/Drawer.tsx b/frontend/src/lib/components/Drawer.tsx
index 2275e52121054..bc20fba4bff30 100644
--- a/frontend/src/lib/components/Drawer.tsx
+++ b/frontend/src/lib/components/Drawer.tsx
@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react'
import { Drawer as AntDrawer } from 'antd'
import { DrawerProps } from 'antd/lib/drawer'
+import { PropsWithChildren } from 'react'
export function Drawer(props: PropsWithChildren): JSX.Element {
return
diff --git a/frontend/src/lib/components/DropdownSelector/DropdownSelector.scss b/frontend/src/lib/components/DropdownSelector/DropdownSelector.scss
deleted file mode 100644
index b8ffa8d145235..0000000000000
--- a/frontend/src/lib/components/DropdownSelector/DropdownSelector.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.dropdown-selector {
- padding: 0.5rem;
- border: 1px solid var(--border-light);
- border-radius: var(--radius);
- display: flex;
- align-items: center;
- cursor: pointer;
-
- &.disabled {
- color: var(--muted);
- cursor: not-allowed;
- }
-
- &.compact {
- padding: 0.333rem 0.5rem;
- }
-
- .dropdown-arrow {
- display: flex;
- align-items: center;
- padding-left: 4px;
- font-size: 1.2em;
- color: var(--muted-alt);
- }
-}
diff --git a/frontend/src/lib/components/DropdownSelector/DropdownSelector.tsx b/frontend/src/lib/components/DropdownSelector/DropdownSelector.tsx
deleted file mode 100644
index abe0e061c8827..0000000000000
--- a/frontend/src/lib/components/DropdownSelector/DropdownSelector.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/* Custom dropdown selector with an icon a help caption */
-import { Dropdown, Menu } from 'antd'
-import clsx from 'clsx'
-import { IconArrowDropDown } from 'lib/lemon-ui/icons'
-import './DropdownSelector.scss'
-
-interface DropdownSelectorProps {
- label?: string
- value: string | null
- onValueChange: (value: string) => void
- options: DropdownOption[]
- hideDescriptionOnDisplay?: boolean // Hides the description support text on the main display component (i.e. only shown in the dropdown menu)
- disabled?: boolean
- compact?: boolean
-}
-
-interface DropdownOption {
- key: string
- label: string
- description?: string
- icon: JSX.Element
- hidden?: boolean
-}
-
-interface SelectItemInterface {
- icon: JSX.Element
- label: string
- description?: string
- onClick: () => void
-}
-
-function SelectItem({ icon, label, description, onClick }: SelectItemInterface): JSX.Element {
- return (
-
-
- {description &&
{description}
}
-
e.preventDefault()}
- >
-
- {selectedOption && (
- {}}
- description={hideDescriptionOnDisplay ? undefined : selectedOption.description}
- />
- )}
-
-
-
-
-
@@ -49,10 +50,18 @@ export function PageHeader({
{!is3000 &&
{buttons}
}
)}
- {is3000 && buttons && actionsContainer && createPortal(buttons, actionsContainer)}
+ {is3000 &&
+ buttons &&
+ actionsContainer &&
+ createPortal(
+
+ {buttons}
+ ,
+ actionsContainer
+ )}
{caption &&
{caption}
}
- {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 04789b93cbb35..2f90e0ea44f63 100644
--- a/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
+++ b/frontend/src/lib/components/SocialLoginButton/SocialLoginButton.tsx
@@ -1,12 +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
@@ -113,6 +116,7 @@ interface SSOEnforcedLoginButtonProps {
}
export function SSOEnforcedLoginButton({ provider, email }: SSOEnforcedLoginButtonProps): JSX.Element {
+ const buttonStyles = useButtonStyle()
return (
Log in with {SSO_PROVIDER_NAMES[provider]}
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 dcbd1ca4255d4..38094c08dd21f 100644
--- a/frontend/src/lib/components/VersionChecker/VersionCheckerBanner.tsx
+++ b/frontend/src/lib/components/VersionChecker/VersionCheckerBanner.tsx
@@ -1,12 +1,17 @@
import { useValues } from 'kea'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+
import { versionCheckerLogic } from './versionCheckerLogic'
-export function VersionCheckerBanner(): JSX.Element {
+export function VersionCheckerBanner({ minVersionAccepted }: { minVersionAccepted?: string }): JSX.Element {
const { versionWarning } = useValues(versionCheckerLogic)
-
// We don't want to show a message if the diff is too small (we might be still deploying the changes out)
- if (!versionWarning || versionWarning.diff < 5) {
+ if (
+ !versionWarning ||
+ (minVersionAccepted && versionWarning.currentVersion
+ ? versionWarning.currentVersion.localeCompare(minVersionAccepted) >= 0
+ : versionWarning.diff < 5)
+ ) {
return <>
}
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.scss b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
index e165aaa435d4f..9a948c4f24dd3 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
@@ -1,13 +1,14 @@
.LemonBanner {
+ align-items: center;
border-radius: var(--radius);
- padding: 0.5rem 0.75rem;
+ border: solid 1px var(--border-3000);
color: var(--primary-alt);
- font-weight: 500;
display: flex;
- align-items: center;
- text-align: left;
+ font-weight: 500;
gap: 0.5rem;
min-height: 3rem;
+ padding: 0.5rem 0.75rem;
+ text-align: left;
&.LemonBanner--info {
background-color: var(--primary-alt-highlight);
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 6422a901239ff..2a23964cfc0f9 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -1,24 +1,35 @@
-.LemonButton {
- position: relative;
- transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
- transform 100ms ease;
- display: flex;
- flex-direction: row;
- flex-shrink: 0;
+.LemonButton,
+.Link.LemonButton {
+ // Make sure we override .Link's styles where needed, e.g. padding
align-items: center;
- justify-content: flex-start;
- padding: 0.25rem 0.75rem;
- gap: 0.5rem;
+ appearance: none !important; // Important as this gets overridden by Ant styles...
background: none;
border-radius: var(--radius);
border: none;
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+
+ .posthog-3000 & {
+ font-family: var(--font-title);
+ }
+
+ flex-shrink: 0;
font-size: 0.875rem;
- text-align: left;
- line-height: 1.5rem;
font-weight: 500;
- cursor: pointer;
+ gap: 0.5rem;
+ justify-content: flex-start;
+ line-height: 1.5rem;
+ padding: 0.25rem 0.75rem;
+ position: relative;
+ text-align: left;
+ transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
+ transform 100ms ease;
user-select: none;
- appearance: none !important; // Important as this gets overridden by Ant styles...
+
+ .font-normal {
+ font-family: var(--font-sans);
+ }
> span {
display: flex;
@@ -91,8 +102,7 @@
}
}
- &.LemonButton--small,
- .Breadcrumbs3000 & {
+ &.LemonButton--small {
gap: 0.25rem;
> span {
@@ -137,12 +147,6 @@
@each $status in ('primary', 'danger', 'primary-alt', 'muted') {
&.LemonButton--status-#{$status} {
- color: var(--#{$status}-3000, var(--#{$status}, var(--primary)));
-
- .LemonButton__icon {
- color: var(--#{$status}-3000, var(--#{$status}));
- }
-
// Primary - blocked color style
&.LemonButton--primary {
color: #fff;
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 e0067bc5406af..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,68 +23,70 @@
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);
padding: 0.25rem 0.75rem;
width: 100%;
- .LemonButton__icon:first-child {
- transition: var(--transition);
- color: var(--default);
+ .LemonButton__icon {
opacity: 0.5;
}
}
+ &.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;
}
}
@@ -92,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;
}
}
@@ -121,7 +122,7 @@
padding: 0;
min-height: 0;
- > span {
+ .LemonButton__chrome {
padding: 0;
min-height: 0;
}
@@ -131,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;
}
}
@@ -154,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;
@@ -171,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);
@@ -192,7 +194,7 @@
&.LemonButton--is-stealth:not(.LemonButton--active) {
&:hover {
- > span {
+ .LemonButton__chrome {
border-color: var(--secondary-3000-button-border);
}
}
@@ -201,7 +203,7 @@
background-color: transparent;
border-color: transparent;
- > span {
+ .LemonButton__chrome {
background-color: transparent;
border-color: transparent;
color: var(--muted);
@@ -244,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/LemonButtonLegacy.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
index fc10519414fee..abe0e6cc3e802 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
@@ -124,6 +124,12 @@ body:not(.posthog-3000) {
background: var(--#{$status}-highlight, var(--primary-highlight));
}
+ color: var(--#{$status}-3000, var(--#{$status}, var(--primary)));
+
+ .LemonButton__icon {
+ color: var(--#{$status}-3000, var(--#{$status}));
+ }
+
&:not([aria-disabled='true']):active {
color: var(--#{$status}-dark, var(--primary-dark));
@@ -134,6 +140,8 @@ body:not(.posthog-3000) {
// Primary - blocked color style
&.LemonButton--primary {
+ color: #fff;
+
.LemonButton__icon {
color: #fff;
}
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.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
index c00645bafc1e1..a5f81f7376b58 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
@@ -17,10 +17,18 @@
&:hover:not([aria-disabled='true']) {
border-color: var(--primary-3000-hover);
+
+ .posthog-3000 & {
+ border-color: var(--border-bold);
+ }
}
&.LemonInput--focused:not([aria-disabled='true']) {
border-color: var(--primary-3000);
+
+ .posthog-3000 & {
+ border-color: var(--border-bold);
+ }
}
&.LemonInput--transparent-background {
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.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
index 50b5e18e475d6..c785fbc3c53b6 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -1,4 +1,7 @@
.LemonSwitch {
+ --lemon-switch-height: 1.25rem;
+ --lemon-switch-width: 2.25rem;
+
width: fit-content;
font-weight: 500;
line-height: 1.5rem;
@@ -46,6 +49,11 @@
cursor: not-allowed; // A label with for=* also toggles the switch, so it shouldn't have the text select cursor
}
}
+
+ .posthog-3000 & {
+ --lemon-switch-height: 1.125rem;
+ --lemon-switch-width: calc(11 / 6 * var(--lemon-switch-height)); // Same proportion as in IconToggle
+ }
}
.LemonSwitch__button {
@@ -53,8 +61,8 @@
display: inline-block;
flex-shrink: 0;
padding: 0;
- width: 2.25rem;
- height: 1.25rem;
+ width: var(--lemon-switch-width);
+ height: var(--lemon-switch-height);
background: none;
border: none;
cursor: pointer;
@@ -75,8 +83,21 @@
background-color: var(--border);
transition: background-color 100ms ease;
+ .posthog-3000 & {
+ border-radius: var(--lemon-switch-height);
+ height: 100%;
+ width: 100%;
+ top: 0;
+ pointer-events: none;
+ background-color: var(--border-bold);
+ }
+
.LemonSwitch--checked & {
background-color: var(--primary-highlight);
+
+ .posthog-3000 & {
+ background-color: var(--primary-3000);
+ }
}
}
@@ -89,23 +110,55 @@
border-radius: 0.625rem;
background-color: #fff;
border: 2px solid var(--border);
- transition: background-color 100ms ease, transform 100ms ease, border-color 100ms ease;
+ transition: background-color 100ms ease, transform 100ms ease, width 100ms ease, border-color 100ms ease;
cursor: inherit;
display: flex;
align-items: center;
justify-content: center;
+ .posthog-3000 & {
+ --lemon-switch-handle-ratio: calc(3 / 4); // Same proportion as in IconToggle
+ --lemon-switch-handle-gutter: calc(var(--lemon-switch-height) * calc(1 - var(--lemon-switch-handle-ratio)) / 2);
+ --lemon-switch-handle-width: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio));
+ --lemon-switch-active-translate: translateX(
+ calc(var(--lemon-switch-width) - var(--lemon-switch-handle-width) - var(--lemon-switch-handle-gutter) * 2)
+ );
+
+ top: var(--lemon-switch-handle-gutter);
+ left: var(--lemon-switch-handle-gutter);
+ width: var(--lemon-switch-handle-width);
+ height: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio));
+ border: none;
+ pointer-events: none;
+ background-color: #fff;
+ }
+
.LemonSwitch--checked & {
background-color: var(--primary);
border-color: var(--primary);
transform: translateX(1rem);
+
+ .posthog-3000 & {
+ transform: var(--lemon-switch-active-translate);
+ background-color: #fff;
+ }
}
.LemonSwitch--active & {
transform: scale(1.1);
+
+ .posthog-3000 & {
+ --lemon-switch-handle-width: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio) * 1.2);
+
+ transform: none;
+ }
}
.LemonSwitch--active.LemonSwitch--checked & {
transform: translateX(1rem) scale(1.1);
+
+ .posthog-3000 & {
+ transform: var(--lemon-switch-active-translate);
+ }
}
}
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 945a59523535b..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
@@ -79,7 +80,7 @@ export function LemonSwitch({
buttonComponent = (
{/* wrap it in a div so that the tooltip works even when disabled */}
- {buttonComponent}
+ {buttonComponent}
)
}
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 a94f5989178e8..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([
posthog.capture('survey created', {
name: survey.name,
id: survey.id,
+ survey_type: survey.type,
questions_length: survey.questions.length,
question_types: survey.questions.map((question) => question.type),
})
@@ -1109,6 +1113,7 @@ export const eventUsageLogic = kea([
posthog.capture('survey launched', {
name: survey.name,
id: survey.id,
+ survey_type: survey.type,
question_types: survey.questions.map((question) => question.type),
created_at: survey.created_at,
start_date: survey.start_date,
diff --git a/frontend/src/lib/utils/kea-logic-builders.ts b/frontend/src/lib/utils/kea-logic-builders.ts
index 8724c0acfd9fb..92c4ff8fb7344 100644
--- a/frontend/src/lib/utils/kea-logic-builders.ts
+++ b/frontend/src/lib/utils/kea-logic-builders.ts
@@ -1,4 +1,4 @@
-import { BuiltLogic, afterMount } from 'kea'
+import { afterMount, BuiltLogic } from 'kea'
/**
* Some kea logics are used heavily across multiple areas so we keep it mounted once loaded with this trick.
*/
diff --git a/frontend/src/lib/utils/logics.ts b/frontend/src/lib/utils/logics.ts
index 5efc717ac4975..93efac6422618 100644
--- a/frontend/src/lib/utils/logics.ts
+++ b/frontend/src/lib/utils/logics.ts
@@ -1,4 +1,5 @@
import { organizationLogic } from 'scenes/organizationLogic'
+
import { teamLogic } from '../../scenes/teamLogic'
import { OrganizationType, TeamType } from '../../types'
import { getAppContext } from './getAppContext'
diff --git a/frontend/src/loadPostHogJS.tsx b/frontend/src/loadPostHogJS.tsx
index 2acd266241f82..807fce2883849 100644
--- a/frontend/src/loadPostHogJS.tsx
+++ b/frontend/src/loadPostHogJS.tsx
@@ -1,6 +1,6 @@
-import posthog, { PostHogConfig } from 'posthog-js'
import * as Sentry from '@sentry/react'
import { FEATURE_FLAGS } from 'lib/constants'
+import posthog, { PostHogConfig } from 'posthog-js'
const configWithSentry = (config: Partial): Partial => {
if ((window as any).SENTRY_DSN) {
@@ -27,8 +27,8 @@ export function loadPostHogJS(): void {
bootstrap: window.POSTHOG_USER_IDENTITY_WITH_FLAGS ? window.POSTHOG_USER_IDENTITY_WITH_FLAGS : {},
opt_in_site_apps: true,
loaded: (posthog) => {
- if (posthog.webPerformance) {
- posthog.webPerformance._forceAllowLocalhost = true
+ if (posthog.sessionRecording) {
+ posthog.sessionRecording._forceAllowLocalhostNetworkCapture = true
}
if (window.IMPERSONATED_SESSION) {
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.scss b/frontend/src/queries/nodes/InsightViz/InsightViz.scss
index a6197196fe264..01315b0d6877b 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightViz.scss
+++ b/frontend/src/queries/nodes/InsightViz/InsightViz.scss
@@ -68,6 +68,12 @@
}
}
+.WebAnalyticsDashboard {
+ .InsightVizDisplay {
+ --insight-viz-min-height: 25rem;
+ }
+}
+
.RetentionContainer {
width: 100%;
display: flex;
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.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
index 0c2b080492e42..6637f4f265e04 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -1,6 +1,11 @@
.PropertyGroupFilters {
.property-group {
background-color: var(--side);
+
+ .posthog-3000 & {
+ border-width: 1px;
+ }
+
padding: 0.5rem;
border-radius: 4px;
}
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 b21948c769209..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 || [])
@@ -103,6 +105,14 @@ export const getShowValueOnSeries = (query: InsightQueryNode): boolean | undefin
}
}
+export const getShowLabelsOnSeries = (query: InsightQueryNode): boolean | undefined => {
+ if (isTrendsQuery(query)) {
+ return query.trendsFilter?.show_labels_on_series
+ } else {
+ return undefined
+ }
+}
+
export const getShowPercentStackView = (query: InsightQueryNode): boolean | undefined => {
if (isTrendsQuery(query)) {
return query.trendsFilter?.show_percent_stack_view
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/schema.json b/frontend/src/queries/schema.json
index d7b3b2ca0da1d..7d5f3cb358ffc 100644
--- a/frontend/src/queries/schema.json
+++ b/frontend/src/queries/schema.json
@@ -3020,6 +3020,9 @@
},
"type": "array"
},
+ "show_labels_on_series": {
+ "type": "boolean"
+ },
"show_legend": {
"type": "boolean"
},
@@ -3140,6 +3143,18 @@
"additionalProperties": false,
"description": "Chart specific rendering options. Use ChartRenderingMetadata for non-serializable values, e.g. onClick handlers",
"properties": {
+ "ActionsPie": {
+ "additionalProperties": false,
+ "properties": {
+ "disableHoverOffset": {
+ "type": "boolean"
+ },
+ "hideAggregation": {
+ "type": "boolean"
+ }
+ },
+ "type": "object"
+ },
"RETENTION": {
"additionalProperties": false,
"properties": {
diff --git a/frontend/src/queries/schema.ts b/frontend/src/queries/schema.ts
index 5e0f19452d438..1f035b9d1acba 100644
--- a/frontend/src/queries/schema.ts
+++ b/frontend/src/queries/schema.ts
@@ -4,6 +4,7 @@ import {
Breakdown,
BreakdownKeyType,
BreakdownType,
+ ChartDisplayType,
CountPerActorMathType,
EventPropertyFilter,
EventType,
@@ -403,6 +404,10 @@ export interface VizSpecificOptions {
hideSizeColumn?: boolean
useSmallLayout?: boolean
}
+ [ChartDisplayType.ActionsPie]?: {
+ disableHoverOffset?: boolean
+ hideAggregation?: boolean
+ }
}
export interface InsightVizNode extends Node, InsightVizNodeViewProps {
@@ -424,7 +429,6 @@ interface InsightVizNodeViewProps {
embedded?: boolean
suppressSessionAnalysisWarning?: boolean
hidePersonsModal?: boolean
-
vizSpecificOptions?: VizSpecificOptions
}
diff --git a/frontend/src/queries/types.ts b/frontend/src/queries/types.ts
index f1e63d8f54549..2ae3a75e65009 100644
--- a/frontend/src/queries/types.ts
+++ b/frontend/src/queries/types.ts
@@ -1,6 +1,7 @@
-import { ChartDisplayType, 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 {
@@ -24,6 +25,9 @@ export interface ChartRenderingMetadata {
[ChartDisplayType.WorldMap]?: {
countryProps?: (countryCode: string, countryData: TrendResult | undefined) => Omit, 'key'>
}
+ [ChartDisplayType.ActionsPie]?: {
+ onSegmentClick?: (payload: GraphPointPayload) => void
+ }
}
export type QueryContextColumnTitleComponent = ComponentType<{
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 f816ce47b66ea..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
@@ -32,21 +34,21 @@ export function AppMetricsGraph({ tab, metrics, metricsLoading }: AppMetricsGrap
label: descriptions.successes,
data: metrics.successes,
borderColor: '',
- ...colorConfig('data-brand-blue'),
+ ...colorConfig('data-color-1'),
},
...(descriptions.successes_on_retry
? [
{
label: descriptions.successes_on_retry,
data: metrics.successes_on_retry,
- ...colorConfig('data-yellow'),
+ ...colorConfig('data-color-13'),
},
]
: []),
{
label: descriptions.failures,
data: metrics.failures,
- ...colorConfig('data-vermilion'),
+ ...colorConfig('data-color-5'),
},
],
},
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 61a13b54feb53..6e3045f29b51b 100644
--- a/frontend/src/scenes/authentication/Login.tsx
+++ b/frontend/src/scenes/authentication/Login.tsx
@@ -1,21 +1,24 @@
-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'
export const ERROR_MESSAGES: Record = {
no_new_organizations:
@@ -55,6 +58,7 @@ export function Login(): JSX.Element {
const passwordInputRef = useRef(null)
const isPasswordHidden = precheckResponse.status === 'pending' || precheckResponse.sso_enforcement
+ const buttonStyles = useButtonStyle()
useEffect(() => {
if (preflight?.cloud) {
@@ -146,6 +150,7 @@ export function Login(): JSX.Element {
type="primary"
center
loading={isLoginSubmitting || precheckResponseLoading}
+ {...buttonStyles}
>
Log in
diff --git a/frontend/src/scenes/authentication/Login2FA.tsx b/frontend/src/scenes/authentication/Login2FA.tsx
index 6bd87ca93a34b..c1bb53c1e59d4 100644
--- a/frontend/src/scenes/authentication/Login2FA.tsx
+++ b/frontend/src/scenes/authentication/Login2FA.tsx
@@ -1,15 +1,19 @@
+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 {
const { isTwofactortokenSubmitting, generalError } = useValues(login2FALogic)
const { preflight } = useValues(preflightLogic)
+ const buttonStyles = useButtonStyle()
+
return (
Login
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 d1c2b3a037314..a3a7590cd48c9 100644
--- a/frontend/src/scenes/authentication/PasswordReset.tsx
+++ b/frontend/src/scenes/authentication/PasswordReset.tsx
@@ -1,19 +1,21 @@
/*
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'
export const scene: SceneExport = {
component: PasswordReset,
@@ -85,6 +87,7 @@ function EmailUnavailable(): JSX.Element {
function ResetForm(): JSX.Element {
const { isRequestPasswordResetSubmitting } = useValues(passwordResetLogic)
+ const buttonStyles = useButtonStyle()
return (