chore: type fixes ahead of React 18 (#17752)

PostHog · Oct 4, 2023 · 9741ce6 · 9741ce6
1 parent 5d16729
commit 9741ce6
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 36 deletions.
diff --git a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
@@ -55,12 +55,12 @@ const debugCHQueriesLogic = kea<debugCHQueriesLogicType>([
     selectors({
         paths: [
             (s) => [s.queries],
-            (queries: Query[]) => {
+            (queries: Query[]): [string, number][] | null => {
                 return queries
                     ? Object.entries(
                           queries
                               .map((result) => result.path)
-                              .reduce((acc, val) => {
+                              .reduce((acc: { [path: string]: number }, val: string) => {
                                   acc[val] = acc[val] === undefined ? 1 : (acc[val] += 1)
                                   return acc
                               }, {})

diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
@@ -39,10 +39,10 @@ export function DebugNotice(): JSX.Element | null {
                     onClick={() => setNoticeHidden(true)}
                 />
             </div>
-            <div className="p-2 border-l-4 border-danger text-danger-dark  truncate">
+            <div className="p-2 border-l-4 border-danger text-danger-dark truncate">
                 Branch: <b>{debugInfo.branch}</b>
             </div>
-            <div className="p-2 border-l-4 border-warning text-warning-dark  truncate">
+            <div className="p-2 border-l-4 border-warning text-warning-dark truncate">
                 Revision: <b>{debugInfo.revision}</b>
             </div>
         </div>

diff --git a/frontend/src/lib/components/FlaggedFeature.tsx b/frontend/src/lib/components/FlaggedFeature.tsx
@@ -7,7 +7,7 @@ export type PostHogFeatureProps = {
     /** What specific state or variant of feature flag needs to be active. */
     match?: string | boolean
     /** Rendered when the flag state/variant matches. */
-    children: React.ReactNode | ((payload: any) => React.ReactNode)
+    children: JSX.Element | ((payload: any) => JSX.Element)
     /** Rendered when the flag state/variant doesn't match. */
     fallback?: React.ReactNode
 }

diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertySelect.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertySelect.tsx
@@ -79,7 +79,7 @@ export function PropertySelect({
                 return true // set to avoid ant.d doing its own filtering
             }}
             onChange={(_: null, selection) => {
-                const { value: val, type } = selection as SelectionOptionType
+                const { value: val, type } = selection as unknown as SelectionOptionType
                 onChange(type, val.replace(/^(event_|person_|element_)/gi, ''))
             }}
             style={{ width: '100%' }}

diff --git a/frontend/src/lib/lemon-ui/LemonMenu/useKeyboardNavigation.ts b/frontend/src/lib/lemon-ui/LemonMenu/useKeyboardNavigation.ts
@@ -19,7 +19,7 @@ export function useKeyboardNavigation<R extends HTMLElement = HTMLElement, I ext
         if (itemIndex > -1) {
             itemsRef.current[itemIndex].current?.focus()
         } else {
-            ;(referenceRef.current as HTMLElement).focus()
+            referenceRef.current?.focus()
         }
     }
 
@@ -40,12 +40,12 @@ export function useKeyboardNavigation<R extends HTMLElement = HTMLElement, I ext
             }
         }
 
-        ;(referenceRef.current as HTMLElement).addEventListener('keydown', handleKeyDown)
+        referenceRef.current?.addEventListener('keydown', handleKeyDown)
         for (const item of itemsRef.current) {
             item.current?.addEventListener('keydown', handleKeyDown)
         }
         return () => {
-            ;(referenceRef.current as HTMLElement).removeEventListener('keydown', handleKeyDown)
+            referenceRef.current?.removeEventListener('keydown', handleKeyDown)
             for (const item of itemsRef.current) {
                 item.current?.removeEventListener('keydown', handleKeyDown)
             }

diff --git a/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx b/frontend/src/queries/nodes/InsightViz/InsightDisplayConfig.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { useValues } from 'kea'
 
 import { insightLogic } from 'scenes/insights/insightLogic'
@@ -157,6 +157,6 @@ export function InsightDisplayConfig({ disableTable }: InsightDisplayConfigProps
     )
 }
 
-function ConfigFilter(props: PropsWithChildren<ReactNode>): JSX.Element {
-    return <span className="space-x-2 flex items-center text-sm">{props.children}</span>
+function ConfigFilter({ children }: { children: ReactNode }): JSX.Element {
+    return <span className="space-x-2 flex items-center text-sm">{children}</span>
 }
diff --git a/frontend/src/scenes/data-management/dataManagementDescribers.tsx b/frontend/src/scenes/data-management/dataManagementDescribers.tsx
@@ -22,7 +22,7 @@ const dataManagementActionsMapping: Record<
         return {
             description: [
                 <>
-                    changed description to <strong>"{change?.after}"</strong>
+                    changed description to <strong>"{change?.after as string}"</strong>
                 </>,
             ],
         }

diff --git a/frontend/src/scenes/feature-flags/activityDescriptions.tsx b/frontend/src/scenes/feature-flags/activityDescriptions.tsx
@@ -191,7 +191,7 @@ const featureFlagActionsMapping: Record<
         return {
             description: [
                 <>
-                    changed rollout percentage to <div className="highlighted-activity">{change?.after}%</div>
+                    changed rollout percentage to <div className="highlighted-activity">{change?.after as string}%</div>
                 </>,
             ],
         }

diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx
@@ -38,7 +38,7 @@ import {
 
 export interface NodeWrapperProps<T extends CustomNotebookNodeAttributes> {
     nodeType: NotebookNodeType
-    children?: ReactNode | ((isEdit: boolean, isPreview: boolean) => ReactNode)
+    children?: ReactNode
 
     // Meta properties - these should never be too advanced - more advanced should be done via updateAttributes in the component
     defaultTitle: string

diff --git a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
@@ -158,11 +158,13 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
                         <b>Match evaluation</b>
                     </span>
                     <LemonSelect
-                        options={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Matched', value: FeatureFlagMatchReason.ConditionMatch },
-                            { label: 'Not matched', value: 'not matched' },
-                        ]}
+                        options={
+                            [
+                                { label: 'All', value: 'all' },
+                                { label: 'Matched', value: FeatureFlagMatchReason.ConditionMatch },
+                                { label: 'Not matched', value: 'not matched' },
+                            ] as { label: string; value: string }[]
+                        }
                         onChange={(reason) => {
                             if (reason) {
                                 if (reason === 'all') {
@@ -194,11 +196,13 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
                                 }
                             }
                         }}
-                        options={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Enabled', value: 'true' },
-                            { label: 'Disabled', value: 'false' },
-                        ]}
+                        options={
+                            [
+                                { label: 'All', value: 'all' },
+                                { label: 'Enabled', value: 'true' },
+                                { label: 'Disabled', value: 'false' },
+                            ] as { label: string; value: string }[]
+                        }
                         value="all"
                         dropdownMaxContentWidth
                     />

diff --git a/frontend/src/scenes/plugins/pluginActivityDescriptions.tsx b/frontend/src/scenes/plugins/pluginActivityDescriptions.tsx
@@ -35,7 +35,7 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
             const newValue = change.after === SECRET_FIELD_VALUE ? '<secret_value>' : change.after
             changes.push(
                 <>
-                    field <code>{change.field}</code> set to <code>{newValue}</code>
+                    field <code>{change.field}</code> set to <code>{newValue as string}</code>
                 </>
             )
         }
@@ -134,20 +134,20 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
             if (change.action === 'created') {
                 changeWording = (
                     <>
-                        added new field <code>{change.field}</code>" with value <code>{changeAfter}</code>
+                        added new field <code>{change.field}</code>" with value <code>{changeAfter as string}</code>
                     </>
                 )
             } else if (change.action === 'deleted') {
                 changeWording = (
                     <>
-                        removed field <code>{change.field}</code>, which had value <code>{changeBefore}</code>
+                        removed field <code>{change.field}</code>, which had value <code>{changeBefore as string}</code>
                     </>
                 )
             } else if (change.action === 'changed') {
                 changeWording = (
                     <>
-                        updated field <code>{change.field}</code> from value <code>{changeBefore}</code> to value{' '}
-                        <code>{changeAfter}</code>{' '}
+                        updated field <code>{change.field}</code> from value <code>{changeBefore as string}</code> to
+                        value <code>{changeAfter as string}</code>{' '}
                     </>
                 )
             }
@@ -175,27 +175,28 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan
             if (logItem.activity === 'attachment_created') {
                 changeWording = (
                     <>
-                        attached a file <code>{change.after}</code>
+                        attached a file <code>{change.after as string}</code>
                     </>
                 )
             } else if (logItem.activity == 'attachment_updated') {
                 if (change.after === change.before) {
                     changeWording = (
                         <>
-                            updated attached file <code>{change.after}</code>
+                            updated attached file <code>{change.after as string}</code>
                         </>
                     )
                 } else {
                     changeWording = (
                         <>
-                            updated attached file from <code>{change.before}</code> to <code>{change.after}</code>
+                            updated attached file from <code>{change.before as string}</code> to{' '}
+                            <code>{change.after as string}</code>
                         </>
                     )
                 }
             } else if (logItem.activity === 'attachment_deleted') {
                 changeWording = (
                     <>
-                        deleted attached file <code>{change.before}</code>
+                        deleted attached file <code>{change.before as string}</code>
                     </>
                 )
             }

diff --git a/frontend/src/scenes/saved-insights/activityDescriptions.tsx b/frontend/src/scenes/saved-insights/activityDescriptions.tsx
@@ -99,7 +99,8 @@ const insightActionsMapping: Record<
         return {
             description: [
                 <>
-                    changed the short id {asNotification && ' of the insight '}to <strong>"{change?.after}"</strong>
+                    changed the short id {asNotification && ' of the insight '}to{' '}
+                    <strong>"{change?.after as string}"</strong>
                 </>,
             ],
         }
@@ -119,7 +120,8 @@ const insightActionsMapping: Record<
         return {
             description: [
                 <>
-                    changed the description {asNotification && ' of the insight '}to <strong>"{change?.after}"</strong>
+                    changed the description {asNotification && ' of the insight '}to{' '}
+                    <strong>"{change?.after as string}"</strong>
                 </>,
             ],
         }