fix: Circular imports issue (#18518)

* Removed all models in favour of "permanent" mounting

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Fix

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Fixed up mounting

* Update UI snapshots for `chromium` (2)

* Fixes for permanent mount

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Fix api to not have a dependency on logics

* Tried fixing import situation

* Update UI snapshots for `chromium` (2)

* Move deleteWithUndo

* Update UI snapshots for `chromium` (1)

* Fix utils imports

* Moved some things around

* Fixes

* fix up cyclic deps issue

* Moved more types

* Moved things around...

* Fixes

* Remove issue

* Fix

* Update UI snapshots for `chromium` (2)

* Fixed import issue

* Update UI snapshots for `chromium` (2)

* Fixed up api import

* Update UI snapshots for `chromium` (1)

* Fixed the imports!!!!!!

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Fix imports

* Fix

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Fixes

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (2)

* Fix

* Fix

* Fix

---------

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

frontend/src/layout/navigation-3000/sidebars/featureFlags.tsx

@@ -10,7 +10,8 @@ import type { featureFlagsSidebarLogicType } from './featureFlagsType'
 import Fuse from 'fuse.js'
 import { FeatureFlagType } from '~/types'
 import { subscriptions } from 'kea-subscriptions'
-import { copyToClipboard, deleteWithUndo } from 'lib/utils'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
+import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
 import { teamLogic } from 'scenes/teamLogic'
 import { featureFlagLogic } from 'scenes/feature-flags/featureFlagLogic'
 import { navigation3000Logic } from '../navigationLogic'

frontend/src/layout/navigation-3000/sidebars/insights.ts

@@ -9,7 +9,7 @@ import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
 import { INSIGHTS_PER_PAGE, savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
 import type { insightsSidebarLogicType } from './insightsType'
 import { findSearchTermInItemName } from './utils'
-import { deleteWithUndo } from 'lib/utils'
+import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
 import { teamLogic } from 'scenes/teamLogic'
 import { api } from '@posthog/apps-common'
 import { insightsModel } from '~/models/insightsModel'

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSettings.tsx

@@ -3,10 +3,11 @@ import { sidePanelSettingsLogic } from './sidePanelSettingsLogic'
 import { Settings } from 'scenes/settings/Settings'
 import { LemonButton } from '@posthog/lemon-ui'
 import { urls } from 'scenes/urls'
-import { SettingsLogicProps, settingsLogic } from 'scenes/settings/settingsLogic'
+import { settingsLogic } from 'scenes/settings/settingsLogic'
 import { useEffect } from 'react'
 import { SidePanelPaneHeader } from '../components/SidePanelPane'
 import { IconExternal } from '@posthog/icons'
+import { SettingsLogicProps } from 'scenes/settings/types'
 
 export const SidePanelSettings = (): JSX.Element => {
     const { settings } = useValues(sidePanelSettingsLogic)

frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx

@@ -7,7 +7,7 @@ import { LemonDialog } from '@posthog/lemon-ui'
 import type { sidePanelSettingsLogicType } from './sidePanelSettingsLogicType'
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
 import { SidePanelTab } from '~/types'
-import { SettingsLogicProps } from 'scenes/settings/settingsLogic'
+import { SettingsLogicProps } from 'scenes/settings/types'
 
 export const sidePanelSettingsLogic = kea<sidePanelSettingsLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelSettingsLogic']),

frontend/src/lib/api.ts

@@ -1,4 +1,7 @@
 import posthog from 'posthog-js'
+import { decompressSync, strFromU8 } from 'fflate'
+import { encodeParams } from 'kea-router'
+
 import {
     ActionType,
     BatchExportLogEntry,
@@ -55,22 +58,27 @@ import {
     ExternalDataStripeSourceCreatePayload,
     ExternalDataStripeSource,
 } from '~/types'
-import { getCurrentOrganizationId, getCurrentTeamId } from './utils/logics'
-import { CheckboxValueType } from 'antd/lib/checkbox/Group'
-import { LOGS_PORTION_LIMIT } from 'scenes/plugins/plugin/pluginLogsLogic'
+import {
+    ACTIVITY_PAGE_SIZE,
+    DashboardPrivilegeLevel,
+    EVENT_DEFINITIONS_PER_PAGE,
+    EVENT_PROPERTY_DEFINITIONS_PER_PAGE,
+    LOGS_PORTION_LIMIT,
+} from './constants'
 import { toParams } from 'lib/utils'
-import { DashboardPrivilegeLevel } from './constants'
-import { EVENT_DEFINITIONS_PER_PAGE } from 'scenes/data-management/events/eventDefinitionsTableLogic'
-import { EVENT_PROPERTY_DEFINITIONS_PER_PAGE } from 'scenes/data-management/properties/propertyDefinitionsTableLogic'
 import { ActivityLogItem, ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
 import { ActivityLogProps } from 'lib/components/ActivityLog/ActivityLog'
 import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
 import { QuerySchema, QueryStatus } from '~/queries/schema'
-import { decompressSync, strFromU8 } from 'fflate'
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
-import { encodeParams } from 'kea-router'
 
-export const ACTIVITY_PAGE_SIZE = 20
+/**
+ * WARNING: Be very careful importing things here. This file is heavily used and can trigger a lot of cyclic imports
+ * Preferably create a dedicated file in utils/..
+ */
+
+type CheckboxValueType = string | number | boolean
+
 const PAGINATION_DEFAULT_MAX_PAGES = 10
 
 export interface PaginatedResponse<T> {
@@ -116,6 +124,33 @@ export async function getJSONOrThrow(response: Response): Promise<any> {
     }
 }
 
+export class ApiConfig {
+    private static _currentOrganizationId: OrganizationType['id'] | null = null
+    private static _currentTeamId: TeamType['id'] | null = null
+
+    static getCurrentOrganizationId(): OrganizationType['id'] {
+        if (!this._currentOrganizationId) {
+            throw new Error('Organization ID is not known.')
+        }
+        return this._currentOrganizationId
+    }
+
+    static setCurrentOrganizationId(id: OrganizationType['id']): void {
+        this._currentOrganizationId = id
+    }
+
+    static getCurrentTeamId(): TeamType['id'] {
+        if (!this._currentTeamId) {
+            throw new Error('Team ID is not known.')
+        }
+        return this._currentTeamId
+    }
+
+    static setCurrentTeamId(id: TeamType['id']): void {
+        this._currentTeamId = id
+    }
+}
+
 class ApiRequest {
     private pathComponents: string[]
     private queryString: string | undefined
@@ -169,7 +204,7 @@ class ApiRequest {
         return this.addPathComponent('organizations')
     }
 
-    public organizationsDetail(id: OrganizationType['id'] = getCurrentOrganizationId()): ApiRequest {
+    public organizationsDetail(id: OrganizationType['id'] = ApiConfig.getCurrentOrganizationId()): ApiRequest {
         return this.organizations().addPathComponent(id)
     }
 
@@ -200,7 +235,7 @@ class ApiRequest {
         return this.addPathComponent('projects')
     }
 
-    public projectsDetail(id: TeamType['id'] = getCurrentTeamId()): ApiRequest {
+    public projectsDetail(id: TeamType['id'] = ApiConfig.getCurrentTeamId()): ApiRequest {
         return this.projects().addPathComponent(id)
     }
 
@@ -528,7 +563,7 @@ class ApiRequest {
     // Resource Access Permissions
 
     public featureFlagAccessPermissions(flagId: FeatureFlagType['id']): ApiRequest {
-        return this.featureFlag(flagId, getCurrentTeamId()).addPathComponent('role_access')
+        return this.featureFlag(flagId, ApiConfig.getCurrentTeamId()).addPathComponent('role_access')
     }
 
     public featureFlagAccessPermissionsDetail(
@@ -697,13 +732,13 @@ const api = {
 
     organizationFeatureFlags: {
         async get(
-            orgId: OrganizationType['id'] = getCurrentOrganizationId(),
+            orgId: OrganizationType['id'] = ApiConfig.getCurrentOrganizationId(),
             featureFlagKey: FeatureFlagType['key']
         ): Promise<OrganizationFeatureFlags> {
             return await new ApiRequest().organizationFeatureFlags(orgId, featureFlagKey).get()
         },
         async copy(
-            orgId: OrganizationType['id'] = getCurrentOrganizationId(),
+            orgId: OrganizationType['id'] = ApiConfig.getCurrentOrganizationId(),
             data: OrganizationFeatureFlagsCopyBody
         ): Promise<{ success: FeatureFlagType[]; failed: any }> {
             return await new ApiRequest().copyOrganizationFeatureFlags(orgId).create({ data })
@@ -745,7 +780,7 @@ const api = {
         list(
             activityLogProps: ActivityLogProps,
             page: number = 1,
-            teamId: TeamType['id'] = getCurrentTeamId()
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
         ): Promise<ActivityLogPaginatedResponse<ActivityLogItem>> {
             const requestForScope: Record<ActivityScope, (props: ActivityLogProps) => ApiRequest | null> = {
                 [ActivityScope.FEATURE_FLAG]: (props) => {
@@ -790,7 +825,7 @@ const api = {
     },
 
     exports: {
-        determineExportUrl(exportId: number, teamId: TeamType['id'] = getCurrentTeamId()): string {
+        determineExportUrl(exportId: number, teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()): string {
             return new ApiRequest()
                 .export(exportId, teamId)
                 .withAction('content')
@@ -801,12 +836,12 @@ const api = {
         async create(
             data: Partial<ExportedAssetType>,
             params: Record<string, any> = {},
-            teamId: TeamType['id'] = getCurrentTeamId()
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
         ): Promise<ExportedAssetType> {
             return new ApiRequest().exports(teamId).withQueryString(toParams(params)).create({ data })
         },
 
-        async get(id: number, teamId: TeamType['id'] = getCurrentTeamId()): Promise<ExportedAssetType> {
+        async get(id: number, teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()): Promise<ExportedAssetType> {
             return new ApiRequest().export(id, teamId).get()
         },
     },
@@ -815,7 +850,7 @@ const api = {
         async get(
             id: EventType['id'],
             includePerson: boolean = false,
-            teamId: TeamType['id'] = getCurrentTeamId()
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
         ): Promise<EventType> {
             let apiRequest = new ApiRequest().event(id, teamId)
             if (includePerson) {
@@ -826,23 +861,23 @@ const api = {
         async list(
             filters: EventsListQueryParams,
             limit: number = 100,
-            teamId: TeamType['id'] = getCurrentTeamId()
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
         ): Promise<PaginatedResponse<EventType>> {
             const params: EventsListQueryParams = { ...filters, limit, orderBy: filters.orderBy ?? ['-timestamp'] }
             return new ApiRequest().events(teamId).withQueryString(toParams(params)).get()
         },
         determineListEndpoint(
             filters: EventsListQueryParams,
             limit: number = 100,
-            teamId: TeamType['id'] = getCurrentTeamId()
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
         ): string {
             const params: EventsListQueryParams = { ...filters, limit }
             return new ApiRequest().events(teamId).withQueryString(toParams(params)).assembleFullUrl()
         },
     },
 
     tags: {
-        async list(teamId: TeamType['id'] = getCurrentTeamId()): Promise<string[]> {
+        async list(teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()): Promise<string[]> {
             return new ApiRequest().tags(teamId).get()
         },
     },
@@ -865,7 +900,7 @@ const api = {
         },
         async list({
             limit = EVENT_DEFINITIONS_PER_PAGE,
-            teamId = getCurrentTeamId(),
+            teamId = ApiConfig.getCurrentTeamId(),
             ...params
         }: {
             limit?: number
@@ -881,7 +916,7 @@ const api = {
         },
         determineListEndpoint({
             limit = EVENT_DEFINITIONS_PER_PAGE,
-            teamId = getCurrentTeamId(),
+            teamId = ApiConfig.getCurrentTeamId(),
             ...params
         }: {
             limit?: number
@@ -930,7 +965,7 @@ const api = {
         },
         async list({
             limit = EVENT_PROPERTY_DEFINITIONS_PER_PAGE,
-            teamId = getCurrentTeamId(),
+            teamId = ApiConfig.getCurrentTeamId(),
             ...params
         }: {
             event_names?: string[]
@@ -956,7 +991,7 @@ const api = {
         },
         determineListEndpoint({
             limit = EVENT_PROPERTY_DEFINITIONS_PER_PAGE,
-            teamId = getCurrentTeamId(),
+            teamId = ApiConfig.getCurrentTeamId(),
             ...params
         }: {
             event_names?: string[]

frontend/src/lib/components/ActivityLog/activityLogLogic.tsx

@@ -1,6 +1,6 @@
 import { loaders } from 'kea-loaders'
 import { kea, props, key, path, actions, reducers, selectors, listeners, events } from 'kea'
-import api, { ACTIVITY_PAGE_SIZE, ActivityLogPaginatedResponse } from 'lib/api'
+import api, { ActivityLogPaginatedResponse } from 'lib/api'
 import {
     ActivityLogItem,
     ActivityScope,
@@ -19,6 +19,7 @@ import { insightActivityDescriber } from 'scenes/saved-insights/activityDescript
 import { personActivityDescriber } from 'scenes/persons/activityDescriptions'
 import { dataManagementActivityDescriber } from 'scenes/data-management/dataManagementDescribers'
 import { notebookActivityDescriber } from 'scenes/notebooks/Notebook/notebookActivityDescriber'
+import { ACTIVITY_PAGE_SIZE } from 'lib/constants'
 
 /**
  * Having this function inside the `humanizeActivity module was causing very weird test errors in other modules

frontend/src/lib/components/Cards/InsightCard/InsightDetails.tsx

@@ -1,5 +1,5 @@
 import { useValues } from 'kea'
-import { allOperatorsMapping, capitalizeFirstLetter, formatPropertyLabel } from 'lib/utils'
+import { allOperatorsMapping, capitalizeFirstLetter } from 'lib/utils'
 import { LocalFilter, toLocalFilters } from 'scenes/insights/filters/ActionFilter/entityFilterLogic'
 import { humanizePathsEventTypes } from 'scenes/insights/utils'
 import { apiValueToMathType, MathCategory, MathDefinition, mathsLogic } from 'scenes/trends/mathsLogic'
@@ -26,6 +26,7 @@ import { cohortsModel } from '~/models/cohortsModel'
 import React from 'react'
 import { isPathsFilter, isTrendsFilter } from 'scenes/insights/sharedUtils'
 import {
+    formatPropertyLabel,
     isAnyPropertyfilter,
     isCohortPropertyFilter,
     isPropertyFilterWithOperator,

frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx

@@ -18,7 +18,7 @@ import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml'
 import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup'
 import http from 'react-syntax-highlighter/dist/esm/languages/prism/http'
 import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql'
-import { copyToClipboard } from 'lib/utils'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
 import { Popconfirm } from 'antd'
 import { PopconfirmProps } from 'antd/lib/popconfirm'
 import './CodeSnippet.scss'

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -6,7 +6,8 @@ import { dashboardsModel } from '~/models/dashboardsModel'
 import { Parser } from 'expr-eval'
 import { DashboardType, InsightType } from '~/types'
 import api from 'lib/api'
-import { copyToClipboard, isMobile, isURL, sample, uniqueBy } from 'lib/utils'
+import { isMobile, isURL, sample, uniqueBy } from 'lib/utils'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
 import { userLogic } from 'scenes/userLogic'
 import { personalAPIKeysLogic } from '../../../scenes/settings/user/personalAPIKeysLogic'
 import { teamLogic } from 'scenes/teamLogic'

frontend/src/lib/components/CopyToClipboard.tsx

@@ -1,5 +1,5 @@
 import { HTMLProps } from 'react'
-import { copyToClipboard } from 'lib/utils'
+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'

frontend/src/lib/components/DateFilter/DateFilter.tsx

@@ -3,14 +3,20 @@ import { dateMapping, dateFilterToText, uuid } from 'lib/utils'
 import { DateMappingOption } from '~/types'
 import { dayjs } from 'lib/dayjs'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { CUSTOM_OPTION_DESCRIPTION, CUSTOM_OPTION_KEY, CUSTOM_OPTION_VALUE, dateFilterLogic } from './dateFilterLogic'
+import { dateFilterLogic } from './dateFilterLogic'
 import { RollingDateRangeFilter } from './RollingDateRangeFilter'
 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 { DateFilterLogicProps, DateFilterView } from 'lib/components/DateFilter/types'
+import {
+    CUSTOM_OPTION_DESCRIPTION,
+    CUSTOM_OPTION_KEY,
+    CUSTOM_OPTION_VALUE,
+    DateFilterLogicProps,
+    DateFilterView,
+} from 'lib/components/DateFilter/types'
 import { Placement } from '@floating-ui/react'
 
 export interface DateFilterProps {

frontend/src/lib/components/DateFilter/dateFilterLogic.ts

@@ -3,11 +3,7 @@ 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 { DateFilterLogicProps, DateFilterView } from 'lib/components/DateFilter/types'
-
-export const CUSTOM_OPTION_KEY = 'Custom'
-export const CUSTOM_OPTION_VALUE = 'No date range override'
-export const CUSTOM_OPTION_DESCRIPTION = 'Use the original date ranges of insights'
+import { CUSTOM_OPTION_VALUE, DateFilterLogicProps, DateFilterView } from 'lib/components/DateFilter/types'
 
 export const dateFilterLogic = kea<dateFilterLogicType>([
     path(['lib', 'components', 'DateFilter', 'DateFilterLogic']),

frontend/src/lib/components/DateFilter/types.ts

@@ -15,3 +15,7 @@ export type DateFilterLogicProps = {
     dateOptions?: DateMappingOption[]
     isDateFormatted?: boolean
 }
+
+export const CUSTOM_OPTION_KEY = 'Custom'
+export const CUSTOM_OPTION_VALUE = 'No date range override'
+export const CUSTOM_OPTION_DESCRIPTION = 'Use the original date ranges of insights'

frontend/src/lib/components/NotFound/index.tsx

@@ -4,7 +4,7 @@ import './NotFound.scss'
 import { useActions, useValues } from 'kea'
 import { supportLogic } from '../Support/supportLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { useNotebookNode } from 'scenes/notebooks/Nodes/notebookNodeLogic'
+import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
 import { LemonButton } from '@posthog/lemon-ui'
 
 interface NotFoundProps {

frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.tsx

@@ -5,10 +5,11 @@ import { CloseButton } from 'lib/components/CloseButton'
 import { cohortsModel } from '~/models/cohortsModel'
 import { useValues } from 'kea'
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
-import { formatPropertyLabel, midEllipsis } from 'lib/utils'
+import { midEllipsis } from 'lib/utils'
 import { KEY_MAPPING } from 'lib/taxonomy'
 import React from 'react'
 import { PropertyFilterIcon } from 'lib/components/PropertyFilters/components/PropertyFilterIcon'
+import { formatPropertyLabel } from '../utils'
 
 export interface PropertyFilterButtonProps {
     onClick?: () => void