From 9741ce60052ae2df02f34dcf0ecfb5d8c1f2c1e9 Mon Sep 17 00:00:00 2001 From: David Newell Date: Wed, 4 Oct 2023 10:52:01 +0100 Subject: [PATCH] chore: type fixes ahead of React 18 (#17752) --- .../CommandPalette/DebugCHQueries.tsx | 4 ++-- frontend/src/lib/components/DebugNotice.tsx | 4 ++-- .../src/lib/components/FlaggedFeature.tsx | 2 +- .../components/PropertySelect.tsx | 2 +- .../LemonMenu/useKeyboardNavigation.ts | 6 ++--- .../nodes/InsightViz/InsightDisplayConfig.tsx | 6 ++--- .../dataManagementDescribers.tsx | 2 +- .../feature-flags/activityDescriptions.tsx | 2 +- .../scenes/notebooks/Nodes/NodeWrapper.tsx | 2 +- .../scenes/persons/RelatedFeatureFlags.tsx | 24 +++++++++++-------- .../plugins/pluginActivityDescriptions.tsx | 19 ++++++++------- .../saved-insights/activityDescriptions.tsx | 6 +++-- 12 files changed, 43 insertions(+), 36 deletions(-) diff --git a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx index 71c5eb8f212a2..bef1adb4210d1 100644 --- a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx +++ b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx @@ -55,12 +55,12 @@ const debugCHQueriesLogic = kea([ 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 index 7de6f47fcce83..11d70ba34054d 100644 --- 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)} /> -
+
Branch: {debugInfo.branch}
-
+
Revision: {debugInfo.revision}
diff --git a/frontend/src/lib/components/FlaggedFeature.tsx b/frontend/src/lib/components/FlaggedFeature.tsx index ddf01d7589328..682a50aeb0d40 100644 --- 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 index 0e55a88e75fd5..3cc2e1b93a9e0 100644 --- 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 index 41744607d9bb0..19b4fb92442f1 100644 --- 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 -1) { itemsRef.current[itemIndex].current?.focus() } else { - ;(referenceRef.current as HTMLElement).focus() + referenceRef.current?.focus() } } @@ -40,12 +40,12 @@ export function useKeyboardNavigation { - ;(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 index 5f05687f6c168..8c2adfd1f6f89 100644 --- 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): JSX.Element { - return {props.children} +function ConfigFilter({ children }: { children: ReactNode }): JSX.Element { + return {children} } diff --git a/frontend/src/scenes/data-management/dataManagementDescribers.tsx b/frontend/src/scenes/data-management/dataManagementDescribers.tsx index 4c0d3cfee5d62..40a883bb7f44b 100644 --- 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 "{change?.after}" + changed description to "{change?.after as string}" , ], } diff --git a/frontend/src/scenes/feature-flags/activityDescriptions.tsx b/frontend/src/scenes/feature-flags/activityDescriptions.tsx index f774616afe7ba..e7f90ab9c628c 100644 --- 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
{change?.after}%
+ changed rollout percentage to
{change?.after as string}%
, ], } diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx index 0497eb5bb0fa5..f9c97954e9a3f 100644 --- a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx +++ b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx @@ -38,7 +38,7 @@ import { export interface NodeWrapperProps { 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 index dad9f36c94ec5..08a3d1e23dc6f 100644 --- 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 Match evaluation { 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 index 016a4cfd86e1d..839f1f7861399 100644 --- 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 ? '' : change.after changes.push( <> - field {change.field} set to {newValue} + field {change.field} set to {newValue as string} ) } @@ -134,20 +134,20 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan if (change.action === 'created') { changeWording = ( <> - added new field {change.field}" with value {changeAfter} + added new field {change.field}" with value {changeAfter as string} ) } else if (change.action === 'deleted') { changeWording = ( <> - removed field {change.field}, which had value {changeBefore} + removed field {change.field}, which had value {changeBefore as string} ) } else if (change.action === 'changed') { changeWording = ( <> - updated field {change.field} from value {changeBefore} to value{' '} - {changeAfter}{' '} + updated field {change.field} from value {changeBefore as string} to + value {changeAfter as string}{' '} ) } @@ -175,27 +175,28 @@ export function pluginActivityDescriber(logItem: ActivityLogItem): HumanizedChan if (logItem.activity === 'attachment_created') { changeWording = ( <> - attached a file {change.after} + attached a file {change.after as string} ) } else if (logItem.activity == 'attachment_updated') { if (change.after === change.before) { changeWording = ( <> - updated attached file {change.after} + updated attached file {change.after as string} ) } else { changeWording = ( <> - updated attached file from {change.before} to {change.after} + updated attached file from {change.before as string} to{' '} + {change.after as string} ) } } else if (logItem.activity === 'attachment_deleted') { changeWording = ( <> - deleted attached file {change.before} + deleted attached file {change.before as string} ) } diff --git a/frontend/src/scenes/saved-insights/activityDescriptions.tsx b/frontend/src/scenes/saved-insights/activityDescriptions.tsx index e52c66a9c2991..ab67fb7972184 100644 --- 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 "{change?.after}" + changed the short id {asNotification && ' of the insight '}to{' '} + "{change?.after as string}" , ], } @@ -119,7 +120,8 @@ const insightActionsMapping: Record< return { description: [ <> - changed the description {asNotification && ' of the insight '}to "{change?.after}" + changed the description {asNotification && ' of the insight '}to{' '} + "{change?.after as string}" , ], }