chore(kea): upgrade logics to v3 format with codemod

PostHog · Oct 26, 2023 · 90694b5 · 90694b5
1 parent b68ba2d
commit 90694b5
Show file tree

Hide file tree

Showing 63 changed files with 1,499 additions and 1,535 deletions.
diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts
@@ -1,4 +1,6 @@
-import { kea } from 'kea'
+import { windowValues } from 'kea-windowvalues'
+import { loaders } from 'kea-loaders'
+import { kea, path, connect, actions, reducers, selectors, listeners } from 'kea'
 import api from 'lib/api'
 import { organizationLogic } from 'scenes/organizationLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
@@ -17,13 +19,13 @@ export type ProjectNoticeVariant =
     | 'unverified_email'
     | 'is_impersonated'
 
-export const navigationLogic = kea<navigationLogicType>({
-    path: ['layout', 'navigation', 'navigationLogic'],
-    connect: {
+export const navigationLogic = kea<navigationLogicType>([
+    path(['layout', 'navigation', 'navigationLogic']),
+    connect({
         values: [sceneLogic, ['sceneConfig', 'activeScene'], membersLogic, ['members', 'membersLoading']],
         actions: [eventUsageLogic, ['reportProjectNoticeDismissed']],
-    },
-    actions: {
+    }),
+    actions({
         toggleSideBarBase: (override?: boolean) => ({ override }), // Only use the override for testing
         toggleSideBarMobile: (override?: boolean) => ({ override }), // Only use the override for testing
         toggleActivationSideBar: true,
@@ -43,8 +45,25 @@ export const navigationLogic = kea<navigationLogicType>({
         closeAppSourceEditor: true,
         setOpenAppMenu: (id: number | null) => ({ id }),
         closeProjectNotice: (projectNoticeVariant: ProjectNoticeVariant) => ({ projectNoticeVariant }),
-    },
-    reducers: {
+    }),
+    loaders({
+        navigationStatus: [
+            { system_status_ok: true, async_migrations_ok: true } as {
+                system_status_ok: boolean
+                async_migrations_ok: boolean
+            },
+            {
+                loadNavigationStatus: async () => {
+                    return await api.get('api/instance_settings')
+                },
+            },
+        ],
+    }),
+    windowValues(() => ({
+        fullscreen: (window) => !!window.document.fullscreenElement,
+        mobileLayout: (window) => window.innerWidth < 992, // Sync width threshold with Sass variable $lg!
+    })),
+    reducers({
         // Non-mobile base
         isSideBarShownBase: [
             true,
@@ -112,12 +131,8 @@ export const navigationLogic = kea<navigationLogicType>({
                 closeProjectNotice: (state, { projectNoticeVariant }) => ({ ...state, [projectNoticeVariant]: true }),
             },
         ],
-    },
-    windowValues: () => ({
-        fullscreen: (window) => !!window.document.fullscreenElement,
-        mobileLayout: (window) => window.innerWidth < 992, // Sync width threshold with Sass variable $lg!
     }),
-    selectors: {
+    selectors({
         /** `noSidebar` whether the current scene should display a sidebar at all */
         noSidebar: [
             (s) => [s.fullscreen, s.sceneConfig],
@@ -201,21 +216,8 @@ export const navigationLogic = kea<navigationLogicType>({
                 return null
             },
         ],
-    },
-    loaders: {
-        navigationStatus: [
-            { system_status_ok: true, async_migrations_ok: true } as {
-                system_status_ok: boolean
-                async_migrations_ok: boolean
-            },
-            {
-                loadNavigationStatus: async () => {
-                    return await api.get('api/instance_settings')
-                },
-            },
-        ],
-    },
-    listeners: ({ actions, values }) => ({
+    }),
+    listeners(({ actions, values }) => ({
         closeProjectNotice: ({ projectNoticeVariant }) => {
             actions.reportProjectNoticeDismissed(projectNoticeVariant)
         },
@@ -226,5 +228,5 @@ export const navigationLogic = kea<navigationLogicType>({
                 actions.showActivationSideBar()
             }
         },
-    }),
-})
+    })),
+])
diff --git a/frontend/src/lib/components/ActivityLog/activityLogLogic.tsx b/frontend/src/lib/components/ActivityLog/activityLogLogic.tsx
@@ -1,4 +1,5 @@
-import { kea } from 'kea'
+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 {
     ActivityLogItem,
@@ -11,7 +12,7 @@ import {
 import type { activityLogLogicType } from './activityLogLogicType'
 import { PaginationManual } from 'lib/lemon-ui/PaginationControl'
 import { urls } from 'scenes/urls'
-import { router } from 'kea-router'
+import { router, urlToAction } from 'kea-router'
 import { flagActivityDescriber } from 'scenes/feature-flags/activityDescriptions'
 import { pluginActivityDescriber } from 'scenes/plugins/pluginActivityDescriptions'
 import { insightActivityDescriber } from 'scenes/saved-insights/activityDescriptions'
@@ -51,30 +52,30 @@ export type ActivityLogLogicProps = {
     id?: number | string
 }
 
-export const activityLogLogic = kea<activityLogLogicType>({
-    path: (key) => ['lib', 'components', 'ActivityLog', 'activitylog', 'logic', key],
-    props: {} as ActivityLogLogicProps,
-    key: ({ scope, id }) => `activity/${scope}/${id || 'all'}`,
-    actions: {
+export const activityLogLogic = kea<activityLogLogicType>([
+    props({} as ActivityLogLogicProps),
+    key(({ scope, id }) => `activity/${scope}/${id || 'all'}`),
+    path((key) => ['lib', 'components', 'ActivityLog', 'activitylog', 'logic', key]),
+    actions({
         setPage: (page: number) => ({ page }),
-    },
-    loaders: ({ values, props }) => ({
+    }),
+    loaders(({ values, props }) => ({
         activity: [
             { results: [], total_count: 0 } as ActivityLogPaginatedResponse<ActivityLogItem>,
             {
                 fetchActivity: async () => await api.activity.list(props, values.page),
             },
         ],
-    }),
-    reducers: () => ({
+    })),
+    reducers(() => ({
         page: [
             1,
             {
                 setPage: (_, { page }) => page,
             },
         ],
-    }),
-    selectors: ({ actions }) => ({
+    })),
+    selectors(({ actions }) => ({
         pagination: [
             (s) => [s.page, s.totalCount],
             (page, totalCount): PaginationManual => {
@@ -100,14 +101,14 @@ export const activityLogLogic = kea<activityLogLogicType>({
                 return activity.total_count ?? null
             },
         ],
-    }),
-    listeners: ({ actions }) => ({
+    })),
+    listeners(({ actions }) => ({
         setPage: async (_, breakpoint) => {
             await breakpoint()
             actions.fetchActivity()
         },
-    }),
-    urlToAction: ({ values, actions, props }) => {
+    })),
+    urlToAction(({ values, actions, props }) => {
         const onPageChange = (
             searchParams: Record<string, any>,
             hashParams: Record<string, any>,
@@ -153,10 +154,10 @@ export const activityLogLogic = kea<activityLogLogicType>({
             [urls.appHistory(':pluginConfigId')]: (_, searchParams, hashParams) =>
                 onPageChange(searchParams, hashParams, ActivityScope.PLUGIN, true),
         }
-    },
-    events: ({ actions }) => ({
+    }),
+    events(({ actions }) => ({
         afterMount: () => {
             actions.fetchActivity()
         },
-    }),
-})
+    })),
+])
diff --git a/frontend/src/lib/components/AddToDashboard/addToDashboardModalLogic.ts b/frontend/src/lib/components/AddToDashboard/addToDashboardModalLogic.ts
@@ -1,4 +1,4 @@
-import { kea } from 'kea'
+import { kea, props, key, path, connect, actions, reducers, selectors, listeners } from 'kea'
 import { dashboardsModel } from '~/models/dashboardsModel'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
@@ -17,19 +17,19 @@ export interface AddToDashboardModalLogicProps {
 }
 
 // Helping kea-typegen navigate the exported default class for Fuse
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
 export interface Fuse extends FuseClass<any> {}
 
-export const addToDashboardModalLogic = kea<addToDashboardModalLogicType>({
-    path: ['lib', 'components', 'AddToDashboard', 'saveToDashboardModalLogic'],
-    props: {} as AddToDashboardModalLogicProps,
-    key: ({ insight }) => {
+export const addToDashboardModalLogic = kea<addToDashboardModalLogicType>([
+    props({} as AddToDashboardModalLogicProps),
+    key(({ insight }) => {
         if (!insight.short_id) {
             throw Error('must provide an insight with a short id')
         }
         return insight.short_id
-    },
-    connect: (props: AddToDashboardModalLogicProps) => ({
+    }),
+    path(['lib', 'components', 'AddToDashboard', 'saveToDashboardModalLogic']),
+    connect((props: AddToDashboardModalLogicProps) => ({
         actions: [
             insightLogic({ dashboardItemId: props.insight.short_id, cachedInsight: props.insight }),
             ['updateInsight', 'updateInsightSuccess', 'updateInsightFailure'],
@@ -38,18 +38,17 @@ export const addToDashboardModalLogic = kea<addToDashboardModalLogicType>({
             newDashboardLogic,
             ['showNewDashboardModal'],
         ],
-    }),
-    actions: {
+    })),
+    actions({
         addNewDashboard: true,
         setDashboardId: (id: number) => ({ id }),
         setSearchQuery: (query: string) => ({ query }),
         setInsight: (insight: InsightType) => ({ insight }),
         setScrollIndex: (index: number) => ({ index }),
         addToDashboard: (insight: Partial<InsightModel>, dashboardId: number) => ({ insight, dashboardId }),
         removeFromDashboard: (insight: Partial<InsightModel>, dashboardId: number) => ({ insight, dashboardId }),
-    },
-
-    reducers: {
+    }),
+    reducers({
         _dashboardId: [null as null | number, { setDashboardId: (_, { id }) => id }],
         searchQuery: ['', { setSearchQuery: (_, { query }) => query }],
         scrollIndex: [-1 as number, { setScrollIndex: (_, { index }) => index }],
@@ -62,9 +61,8 @@ export const addToDashboardModalLogic = kea<addToDashboardModalLogicType>({
                 updateInsightFailure: () => null,
             },
         ],
-    },
-
-    selectors: {
+    }),
+    selectors({
         dashboardId: [
             (s) => [
                 s._dashboardId,
@@ -108,9 +106,8 @@ export const addToDashboardModalLogic = kea<addToDashboardModalLogicType>({
                 ...availableDashboards,
             ],
         ],
-    },
-
-    listeners: ({ actions, values, props }) => ({
+    }),
+    listeners(({ actions, values, props }) => ({
         setDashboardId: ({ id }) => {
             dashboardsModel.actions.setLastDashboardId(id)
         },
@@ -153,5 +150,5 @@ export const addToDashboardModalLogic = kea<addToDashboardModalLogicType>({
                 }
             )
         },
-    }),
-})
+    })),
+])
diff --git a/frontend/src/lib/components/ChartFilter/chartFilterLogic.ts b/frontend/src/lib/components/ChartFilter/chartFilterLogic.ts
@@ -1,27 +1,24 @@
-import { kea } from 'kea'
+import { kea, props, key, path, connect, actions, selectors, listeners } from 'kea'
 import type { chartFilterLogicType } from './chartFilterLogicType'
 import { ChartDisplayType, InsightLogicProps } from '~/types'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
-export const chartFilterLogic = kea<chartFilterLogicType>({
-    props: {} as InsightLogicProps,
-    key: keyForInsightLogicProps('new'),
-    path: (key) => ['lib', 'components', 'ChartFilter', 'chartFilterLogic', key],
-    connect: (props: InsightLogicProps) => ({
+export const chartFilterLogic = kea<chartFilterLogicType>([
+    props({} as InsightLogicProps),
+    key(keyForInsightLogicProps('new')),
+    path((key) => ['lib', 'components', 'ChartFilter', 'chartFilterLogic', key]),
+    connect((props: InsightLogicProps) => ({
         actions: [insightVizDataLogic(props), ['updateInsightFilter', 'updateBreakdown']],
         values: [insightVizDataLogic(props), ['isTrends', 'isStickiness', 'display', 'series']],
-    }),
-
-    actions: () => ({
+    })),
+    actions(() => ({
         setChartFilter: (chartFilter: ChartDisplayType) => ({ chartFilter }),
-    }),
-
-    selectors: {
+    })),
+    selectors({
         chartFilter: [(s) => [s.display], (display): ChartDisplayType | null | undefined => display],
-    },
-
-    listeners: ({ actions, values }) => ({
+    }),
+    listeners(({ actions, values }) => ({
         setChartFilter: ({ chartFilter }) => {
             const { isTrends, isStickiness, display, series } = values
             const newDisplay = chartFilter as ChartDisplayType
@@ -42,5 +39,5 @@ export const chartFilterLogic = kea<chartFilterLogicType>({
                 }
             }
         },
-    }),
-})
+    })),
+])