Upgrade TypeScript and fix resulting compilation errors

5 files changed, 19 insertions, 23 deletions

diff --git a/gui/src/main/ipc-event-channel.ts b/gui/src/main/ipc-event-channel.ts
index d189634950..bae499910d 100644
--- a/gui/src/main/ipc-event-channel.ts
+++ b/gui/src/main/ipc-event-channel.ts
@@ -1,14 +1,14 @@
 import { ipcMain, WebContents } from 'electron';
 
-import { createIpcMain, IpcMain, Schema } from '../shared/ipc-helpers';
+import { createIpcMain, IpcMain, Notifier, Schema } from '../shared/ipc-helpers';
 import { ipcSchema } from '../shared/ipc-schema';
 
 // Type where the notify functions have been replaced with either `undefined` if no `WebContents` is
 // available, or with the function curried with the `WebContents`.
 type IpcMainBootstrappedWithWebContents<S extends Schema> = {
   [GK in keyof IpcMain<S>]: {
-    [CK in keyof IpcMain<S>[GK]]: CK extends `notify${string}`
-      ? undefined | ((arg: Parameters<IpcMain<S>[GK][CK]>[1]) => ReturnType<IpcMain<S>[GK][CK]>)
+    [CK in keyof IpcMain<S>[GK]]: IpcMain<S>[GK][CK] extends Notifier<infer T>
+      ? undefined | ((arg: T) => ReturnType<IpcMain<S>[GK][CK]>)
       : IpcMain<S>[GK][CK];
   };
 };
diff --git a/gui/src/renderer/components/AppButton.tsx b/gui/src/renderer/components/AppButton.tsx
index a3edc78ad3..45c93e1b2a 100644
--- a/gui/src/renderer/components/AppButton.tsx
+++ b/gui/src/renderer/components/AppButton.tsx
@@ -54,7 +54,10 @@ const BaseButton = React.memo(function BaseButtonT(props: IProps) {
         if (groups.label === undefined && typeof child === 'string') {
           return { ...groups, label: <Label textOffset={textOffset}>{child}</Label> };
         } else if (React.isValidElement(child) && child.type === Label) {
-          return { ...groups, label: React.cloneElement(child, { textOffset }) };
+          return {
+            ...groups,
+            label: React.cloneElement(child as React.ReactElement<ILabelProps>, { textOffset }),
+          };
         } else if (groups.label === undefined) {
           return { ...groups, left: [...groups.left, child] };
         } else {
diff --git a/gui/src/renderer/components/ScopeBar.tsx b/gui/src/renderer/components/ScopeBar.tsx
index be5420b0b5..10b177c2c3 100644
--- a/gui/src/renderer/components/ScopeBar.tsx
+++ b/gui/src/renderer/components/ScopeBar.tsx
@@ -16,7 +16,7 @@ interface IScopeBarProps {
   defaultSelectedIndex?: number;
   onChange?: (selectedIndex: number) => void;
   className?: string;
-  children: React.ReactNode;
+  children: React.ReactElement<IScopeBarItemProps>[];
 }
 
 export function ScopeBar(props: IScopeBarProps) {
diff --git a/gui/src/renderer/context.tsx b/gui/src/renderer/context.tsx
index 0867618136..3b5fcc14fb 100644
--- a/gui/src/renderer/context.tsx
+++ b/gui/src/renderer/context.tsx
@@ -15,24 +15,15 @@ const missingContextError = new Error(
   'The context value is empty. Make sure to wrap the component in AppContext.Provider.',
 );
 
-export default function withAppContext<Props>(BaseComponent: React.ComponentType<Props>) {
-  // Exclude the IAppContext from props since those are injected props
-  const wrappedComponent = (props: Omit<Props, keyof IAppContext>) => {
-    return (
-      <AppContext.Consumer>
-        {(context) => {
-          if (context) {
-            // Enforce type because Typescript does not recognize that
-            // (Props ~ IAppContext & IAppContext) is identical to Props.
-            const mergedProps = ({ ...props, ...context } as unknown) as Props;
+type PropsWithoutAppContext<Props> = Omit<Props, 'app'>;
 
-            return <BaseComponent {...mergedProps} />;
-          } else {
-            throw missingContextError;
-          }
-        }}
-      </AppContext.Consumer>
-    );
+export default function withAppContext<Props>(
+  BaseComponent: React.ComponentType<PropsWithoutAppContext<Props> & IAppContext>,
+) {
+  // Exclude the IAppContext from props since those are injected props
+  const wrappedComponent = (props: PropsWithoutAppContext<Props>) => {
+    const appContext = useAppContext();
+    return <BaseComponent app={appContext} {...props} />;
   };
 
   if (window.env.development) {
diff --git a/gui/src/shared/ipc-helpers.ts b/gui/src/shared/ipc-helpers.ts
index 1680b45d11..fda5c2d3b5 100644
--- a/gui/src/shared/ipc-helpers.ts
+++ b/gui/src/shared/ipc-helpers.ts
@@ -5,7 +5,9 @@ import { capitalize } from './string-helpers';
 
 type Handler<T, R> = (callback: (arg: T) => R) => void;
 type Sender<T, R> = (arg: T) => R;
-type Notifier<T> = (webContents: WebContents | undefined, arg: T) => void;
+// Remove export after upgrading to Electron 21+ and removal of code to curry notifiers with
+// webContents in ../main/ipc-event-channel.ts.
+export type Notifier<T> = (webContents: WebContents | undefined, arg: T) => void;
 type Listener<T> = (callback: (arg: T) => void) => void;
 
 interface MainToRenderer<T> {