chore(frontend): Sort imports (#18663)

* chore(frontend): Sort imports

* Fix Storybook build problem

* Try a different fix

* Fix another circular import

* Fix more circular imports

* Fix logic connection

* Ignore `cypress` in TS

* Don't check import order in logic types

* Fix another `connect()`

* Don't sort imports in Notebooks nodes code

* Fix another connection

* Increase specificity of .LemonButton against .Link

* Fix styling issues

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.eslintrc.js

@@ -44,11 +44,23 @@ module.exports = {
         sourceType: 'module',
         project: 'tsconfig.json',
     },
-    plugins: ['prettier', 'react', 'cypress', '@typescript-eslint', 'no-only-tests', 'jest', 'compat', 'posthog'],
+    plugins: [
+        'prettier',
+        'react',
+        'cypress',
+        '@typescript-eslint',
+        'no-only-tests',
+        'jest',
+        'compat',
+        'posthog',
+        'simple-import-sort',
+    ],
     rules: {
         'no-console': ['error', { allow: ['warn', 'error'] }],
         'no-debugger': 'error',
         'no-only-tests/no-only-tests': 'error',
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
         'react/prop-types': [0],
         'react/react-in-jsx-scope': [0],
         'react/no-unescaped-entities': [0],
@@ -266,11 +278,19 @@ module.exports = {
             },
         },
         {
-            // disable these rules for files generated by kea-typegen
-            files: ['*Type.ts', '*Type.tsx'],
+            files: ['*Type.ts', '*Type.tsx'], // Kea typegen output
             rules: {
                 'no-restricted-imports': 'off',
-                '@typescript-eslint/ban-types': ['off'],
+                '@typescript-eslint/ban-types': 'off',
+                'simple-import-sort/imports': 'off',
+                'simple-import-sort/exports': 'off',
+            },
+        },
+        {
+            files: ['frontend/src/scenes/notebooks/Nodes/*'], // Notebooks code weirdly relies on its order of sorting
+            rules: {
+                'simple-import-sort/imports': 'off',
+                'simple-import-sort/exports': 'off',
             },
         },
         {

cypress/e2e/insights.cy.ts

@@ -1,7 +1,8 @@
 import { urls } from 'scenes/urls'
-import { randomString } from '../support/random'
+
 import { decideResponse } from '../fixtures/api/decide'
-import { savedInsights, createInsight, insight } from '../productAnalytics'
+import { createInsight, insight, savedInsights } from '../productAnalytics'
+import { randomString } from '../support/random'
 
 // For tests related to trends please check trendsElements.js
 // insight tests were split up because Cypress was struggling with this many tests in one file🙈

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -1,18 +1,20 @@
-import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
+import './ExportedInsight.scss'
+
+import clsx from 'clsx'
 import { BindLogic } from 'kea'
-import { insightLogic } from 'scenes/insights/insightLogic'
 import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
-import './ExportedInsight.scss'
-import { Logo } from '~/toolbar/assets/Logo'
+import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
+import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
 import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
-import { ExportOptions, ExportType } from '~/exporter/types'
-import clsx from 'clsx'
 import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
+import { insightLogic } from 'scenes/insights/insightLogic'
 import { isTrendsFilter } from 'scenes/insights/sharedUtils'
-import { isDataTableNode } from '~/queries/utils'
-import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
+
+import { ExportOptions, ExportType } from '~/exporter/types'
 import { Query } from '~/queries/Query/Query'
-import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
+import { isDataTableNode } from '~/queries/utils'
+import { Logo } from '~/toolbar/assets/Logo'
+import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
 
 export function ExportedInsight({
     insight,

frontend/src/exporter/Exporter.stories.tsx

@@ -1,9 +1,11 @@
-import { useEffect } from 'react'
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { Exporter } from './Exporter'
+import { useEffect } from 'react'
+
 import { dashboard } from '~/exporter/__mocks__/Exporter.mocks'
 import { ExportType } from '~/exporter/types'
 
+import { Exporter } from './Exporter'
+
 type Story = StoryObj<typeof Exporter>
 const meta: Meta<typeof Exporter> = {
     title: 'Exporter/Exporter',

frontend/src/exporter/Exporter.tsx

@@ -1,18 +1,21 @@
 import '~/styles'
 import './Exporter.scss'
-import { useEffect } from 'react'
-import { ExportedData, ExportType } from '~/exporter/types'
-import { DashboardPlacement } from '~/types'
-import { ExportedInsight } from '~/exporter/ExportedInsight/ExportedInsight'
-import { Logo } from '~/toolbar/assets/Logo'
-import { Dashboard } from 'scenes/dashboard/Dashboard'
-import { useResizeObserver } from 'lib/hooks/useResizeObserver'
-import { Link } from 'lib/lemon-ui/Link'
+
 import clsx from 'clsx'
 import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
+import { useResizeObserver } from 'lib/hooks/useResizeObserver'
+import { Link } from 'lib/lemon-ui/Link'
+import { useEffect } from 'react'
+import { Dashboard } from 'scenes/dashboard/Dashboard'
 import { SessionRecordingPlayer } from 'scenes/session-recordings/player/SessionRecordingPlayer'
 import { SessionRecordingPlayerMode } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { ExportedInsight } from '~/exporter/ExportedInsight/ExportedInsight'
+import { ExportedData, ExportType } from '~/exporter/types'
+import { Logo } from '~/toolbar/assets/Logo'
+import { DashboardPlacement } from '~/types'
+
 import { exporterViewLogic } from './exporterViewLogic'
 
 export function Exporter(props: ExportedData): JSX.Element {

frontend/src/exporter/__mocks__/Exporter.mocks.tsx

@@ -1,3 +1,5 @@
+import { FunnelLayout, ShownAsValue } from 'lib/constants'
+
 import {
     ChartDisplayType,
     DashboardTile,
@@ -7,7 +9,6 @@ import {
     InsightShortId,
     InsightType,
 } from '~/types'
-import { FunnelLayout, ShownAsValue } from 'lib/constants'
 
 export const dashboard: DashboardType = {
     id: 1,

frontend/src/exporter/exporterViewLogic.ts

@@ -1,7 +1,7 @@
 import { kea, path, props, selectors } from 'kea'
-import { ExportedData } from './types'
 
 import type { exporterViewLogicType } from './exporterViewLogicType'
+import { ExportedData } from './types'
 
 // This is a simple logic that is mounted by the Exporter view and then can be found by any nested callers
 // This simplifies passing props everywhere.

frontend/src/exporter/index.tsx

@@ -1,10 +1,13 @@
 import '~/styles'
 import './Exporter.scss'
+
 import { createRoot } from 'react-dom/client'
-import { loadPostHogJS } from '~/loadPostHogJS'
-import { initKea } from '~/initKea'
+
 import { Exporter } from '~/exporter/Exporter'
 import { ExportedData } from '~/exporter/types'
+import { initKea } from '~/initKea'
+import { loadPostHogJS } from '~/loadPostHogJS'
+
 import { ErrorBoundary } from '../layout/ErrorBoundary'
 
 // Disable tracking for all exports and embeds.

frontend/src/globals.d.ts

@@ -1,4 +1,5 @@
 import posthog from 'posthog-js'
+
 import { ExportedData } from '~/exporter/types'
 
 declare global {

frontend/src/index.tsx

@@ -1,16 +1,14 @@
 import '~/styles'
 
-import { createRoot } from 'react-dom/client'
 import { getContext } from 'kea'
-
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { createRoot } from 'react-dom/client'
 import { App } from 'scenes/App'
-import { initKea } from './initKea'
 
-import { loadPostHogJS } from './loadPostHogJS'
+import { initKea } from './initKea'
 import { ErrorBoundary } from './layout/ErrorBoundary'
-
-import { PostHogProvider } from 'posthog-js/react'
-import posthog from 'posthog-js'
+import { loadPostHogJS } from './loadPostHogJS'
 
 loadPostHogJS()
 initKea()

frontend/src/initKea.ts

@@ -1,13 +1,13 @@
 import { KeaPlugin, resetContext } from 'kea'
+import { formsPlugin } from 'kea-forms'
+import { loadersPlugin } from 'kea-loaders'
 import { localStoragePlugin } from 'kea-localstorage'
 import { routerPlugin } from 'kea-router'
-import { loadersPlugin } from 'kea-loaders'
-import { windowValuesPlugin } from 'kea-window-values'
-import { identifierToHuman } from 'lib/utils'
+import { subscriptionsPlugin } from 'kea-subscriptions'
 import { waitForPlugin } from 'kea-waitfor'
+import { windowValuesPlugin } from 'kea-window-values'
 import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import { subscriptionsPlugin } from 'kea-subscriptions'
-import { formsPlugin } from 'kea-forms'
+import { identifierToHuman } from 'lib/utils'
 
 /*
 Actions for which we don't want to show error alerts,

frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -1,8 +1,9 @@
-import { getCurrentHub, ErrorBoundary as SentryErrorBoundary } from '@sentry/react'
+import './ErrorBoundary.scss'
+
+import { ErrorBoundary as SentryErrorBoundary, getCurrentHub } from '@sentry/react'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
 import { IconArrowDropDown } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './ErrorBoundary.scss'
 
 export function ErrorBoundary({ children }: { children: React.ReactElement }): JSX.Element {
     const isSentryInitialized = !!getCurrentHub().getClient()

frontend/src/layout/ErrorNetwork.tsx

@@ -1,5 +1,5 @@
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { IconRefresh } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
 
 export function ErrorNetwork(): JSX.Element {
     return (

frontend/src/layout/ErrorProjectUnavailable.tsx

@@ -1,5 +1,6 @@
-import { PageHeader } from 'lib/components/PageHeader'
 import { useValues } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
+
 import { organizationLogic } from '../scenes/organizationLogic'
 
 export function ErrorProjectUnavailable(): JSX.Element {

frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.stories.tsx

@@ -1,9 +1,11 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
-import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
+import { FeatureFlagKey } from 'lib/constants'
 import { EarlyAccessFeature } from 'posthog-js'
+
+import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
+
 import { CONSTRAINED_PREVIEWS } from './featurePreviewsLogic'
-import { FeatureFlagKey } from 'lib/constants'
+import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
 
 interface StoryProps {
     earlyAccessFeatures: EarlyAccessFeature[]

frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx

@@ -1,9 +1,10 @@
 import { LemonButton, LemonDivider, LemonModal, LemonSwitch, LemonTextArea, Link } from '@posthog/lemon-ui'
-import { useActions, useValues, useAsyncActions } from 'kea'
+import clsx from 'clsx'
+import { useActions, useAsyncActions, useValues } from 'kea'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner'
 import { useLayoutEffect, useState } from 'react'
+
 import { EnrichedEarlyAccessFeature, featurePreviewsLogic } from './featurePreviewsLogic'
-import clsx from 'clsx'
 
 export function FeaturePreviewsModal({
     inline,

frontend/src/layout/FeaturePreviews/featurePreviewsLogic.tsx

@@ -1,12 +1,13 @@
-import { actions, kea, reducers, path, selectors, connect, listeners } from 'kea'
-import { EarlyAccessFeature, posthog } from 'posthog-js'
+import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { actionToUrl, router, urlToAction } from 'kea-router'
 import { supportLogic } from 'lib/components/Support/supportLogic'
-import { userLogic } from 'scenes/userLogic'
 import { FEATURE_FLAGS, FeatureFlagKey } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { EarlyAccessFeature, posthog } from 'posthog-js'
+import { userLogic } from 'scenes/userLogic'
+
 import type { featurePreviewsLogicType } from './featurePreviewsLogicType'
-import { actionToUrl, router, urlToAction } from 'kea-router'
 
 /** Features that can only be toggled if you fall under the `${flagKey}-preview` flag */
 export const CONSTRAINED_PREVIEWS: Set<FeatureFlagKey> = new Set([FEATURE_FLAGS.POSTHOG_3000])

frontend/src/layout/FeaturePreviews/index.ts

@@ -1,2 +1,2 @@
-export { FeaturePreviewsModal } from './FeaturePreviewsModal'
 export { featurePreviewsLogic } from './featurePreviewsLogic'
+export { FeaturePreviewsModal } from './FeaturePreviewsModal'

frontend/src/layout/GlobalModals.tsx

@@ -1,19 +1,19 @@
-import { kea, path, actions, reducers, useActions, useValues } from 'kea'
-import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
-import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
-
-import type { globalModalsLogicType } from './GlobalModalsType'
-import { FeaturePreviewsModal } from './FeaturePreviews'
-import { UpgradeModal } from 'scenes/UpgradeModal'
 import { LemonModal } from '@posthog/lemon-ui'
-import { Setup2FA } from 'scenes/authentication/Setup2FA'
-import { userLogic } from 'scenes/userLogic'
-import { membersLogic } from 'scenes/organization/membersLogic'
+import { actions, kea, path, reducers, useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
+import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'
+import { Setup2FA } from 'scenes/authentication/Setup2FA'
+import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
+import { membersLogic } from 'scenes/organization/membersLogic'
+import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { InviteModal } from 'scenes/settings/organization/InviteModal'
-import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
+import { UpgradeModal } from 'scenes/UpgradeModal'
+import { userLogic } from 'scenes/userLogic'
+
+import { FeaturePreviewsModal } from './FeaturePreviews'
+import type { globalModalsLogicType } from './GlobalModalsType'
 
 export const globalModalsLogic = kea<globalModalsLogicType>([
     path(['layout', 'navigation', 'globalModalsLogic']),

frontend/src/layout/navigation-3000/Navigation.stories.tsx

@@ -1,11 +1,12 @@
 import { Meta } from '@storybook/react'
-import { mswDecorator, setFeatureFlags } from '~/mocks/browser'
-import { useEffect } from 'react'
 import { router } from 'kea-router'
-import { urls } from 'scenes/urls'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { useEffect } from 'react'
 import { App } from 'scenes/App'
+import { urls } from 'scenes/urls'
+
+import { mswDecorator, setFeatureFlags } from '~/mocks/browser'
 import { EMPTY_PAGINATED_RESPONSE } from '~/mocks/handlers'
-import { FEATURE_FLAGS } from 'lib/constants'
 
 const meta: Meta = {
     title: 'PostHog 3000/Navigation',

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -1,18 +1,20 @@
-import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
+import './Navigation.scss'
+
+import clsx from 'clsx'
 import { useMountedLogic, useValues } from 'kea'
+import { CommandPalette } from 'lib/components/CommandPalette/CommandPalette'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { ReactNode, useEffect } from 'react'
+import { SceneConfig } from 'scenes/sceneTypes'
+
 import { Breadcrumbs } from './components/Breadcrumbs'
+import { MinimalNavigation } from './components/MinimalNavigation'
 import { Navbar } from './components/Navbar'
 import { Sidebar } from './components/Sidebar'
-import './Navigation.scss'
-import { themeLogic } from './themeLogic'
 import { navigation3000Logic } from './navigationLogic'
-import clsx from 'clsx'
-import { SceneConfig } from 'scenes/sceneTypes'
-import { FlaggedFeature } from 'lib/components/FlaggedFeature'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { SidePanel } from './sidepanel/SidePanel'
-import { MinimalNavigation } from './components/MinimalNavigation'
+import { themeLogic } from './themeLogic'
 
 export function Navigation({
     children,

frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx

@@ -1,14 +1,16 @@
-import React, { useLayoutEffect, useState } from 'react'
+import './Breadcrumbs.scss'
+
+import { LemonSkeleton } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { EditableField } from 'lib/components/EditableField/EditableField'
 import { IconArrowDropDown } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
-import './Breadcrumbs.scss'
-import { FinalizedBreadcrumb } from '~/types'
-import clsx from 'clsx'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
+import React, { useLayoutEffect, useState } from 'react'
+
 import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
-import { LemonSkeleton } from '@posthog/lemon-ui'
-import { EditableField } from 'lib/components/EditableField/EditableField'
+import { FinalizedBreadcrumb } from '~/types'
 
 const COMPACTION_DISTANCE = 44