Upgrade typescript to 4.9.5

package.json

@@ -12,8 +12,8 @@
     "@azure/msal-browser": "2.14.2",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
-    "@fluentui/react": "8.112.1",
-    "@fluentui/react-components": "9.34.0",
+    "@fluentui/react": "8.119.0",
+    "@fluentui/react-components": "9.54.2",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -134,8 +134,8 @@
     "@types/node": "12.11.1",
     "@types/post-robot": "10.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.3",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "17.0.15",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
     "@types/react-splitter-layout": "3.0.1",
@@ -187,8 +187,8 @@
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "9.2.4",
-    "typedoc": "0.22.15",
-    "typescript": "4.3.5",
+    "typedoc": "0.26.2",
+    "typescript": "4.9.5",
     "url-loader": "4.1.1",
     "wait-on": "4.0.2",
     "webpack": "5.88.2",

patches/@phosphor+virtualdom+1.2.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@phosphor/virtualdom/lib/index.d.ts b/node_modules/@phosphor/virtualdom/lib/index.d.ts
+index 95682b9..73e2daa 100644
+--- a/node_modules/@phosphor/virtualdom/lib/index.d.ts
++++ b/node_modules/@phosphor/virtualdom/lib/index.d.ts
+@@ -58,7 +58,7 @@ export declare type ElementEventMap = {
+     ondrop: DragEvent;
+     ondurationchange: Event;
+     onemptied: Event;
+-    onended: MediaStreamErrorEvent;
++    onended: ErrorEvent;
+     onerror: ErrorEvent;
+     onfocus: FocusEvent;
+     oninput: Event;

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -737,17 +737,17 @@ export class D3ForceGraph implements GraphRenderer {
       .on("dblclick", function (this: Element, _: MouseEvent, d: D3Node) {
         // https://stackoverflow.com/a/41945742 ('this' implicitly has type 'any' because it does not have a type annotation)
         // this is the <g> element
-        self.onNodeClicked(this.parentNode, d);
+        self.onNodeClicked(this.parentNode as BaseType, d);
       })
       .on("click", function (this: Element, _: MouseEvent, d: D3Node) {
         // this is the <g> element
-        self.onNodeClicked(this.parentNode, d);
+        self.onNodeClicked(this.parentNode as BaseType, d);
       })
       .on("keypress", function (this: Element, event: KeyboardEvent, d: D3Node) {
         if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
           event.stopPropagation();
           // this is the <g> element
-          self.onNodeClicked(this.parentNode, d);
+          self.onNodeClicked(this.parentNode as BaseType, d);
         }
       });
     var nodeSize = this.igraphConfig.nodeSize;

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -2,22 +2,13 @@
 import { Link } from "@fluentui/react";
 import { CellId, CellType, ImmutableNotebook } from "@nteract/commutable";
 // Vendor modules
-import {
-  actions,
-  AppState,
-  ContentRef,
-  DocumentRecordProps,
-  KernelRef,
-  NotebookContentRecord,
-  selectors,
-} from "@nteract/core";
+import { actions, AppState, ContentRef, KernelRef, NotebookContentRecord, selectors } from "@nteract/core";
 import "@nteract/styles/editor-overrides.css";
 import "@nteract/styles/global-variables.css";
 import "codemirror/addon/hint/show-hint.css";
 import "codemirror/lib/codemirror.css";
 import { Notebook } from "Common/Constants";
 import { useDialog } from "Explorer/Controls/Dialog";
-import * as Immutable from "immutable";
 import * as React from "react";
 import { Provider } from "react-redux";
 import "react-table/react-table.css";
@@ -315,7 +306,8 @@ export class NotebookComponentBootstrapper {
       return false;
     }
 
-    return selectors.notebook.isDirty(content.model as Immutable.RecordOf<DocumentRecordProps>);
+    // TODO Fix this typing here
+    return selectors.notebook.isDirty(content.model as never);
   }
 
   public isNotebookUntrusted(): boolean {

src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx

@@ -111,7 +111,8 @@ const makeMapStateToProps = (_initialState: AppState, initialProps: InitialProps
     } else if (kernel?.kernelSpecName) {
       kernelSpecDisplayName = kernel.kernelSpecName;
     } else if (content && content.type === "notebook") {
-      kernelSpecDisplayName = selectors.notebook.displayName(content.model) || " ";
+      // TODO Fix typing here
+      kernelSpecDisplayName = selectors.notebook.displayName(content.model as never) || " ";
     }
 
     return {

src/global.d.ts

@@ -15,4 +15,9 @@ declare global {
     $: any;
     gitSha: string;
   }
+
+  // msSaveBlob has been removed from typescript 4.4, but not completely deprecated from browsers
+  interface Navigator {
+    msSaveBlob?: (blob: any, defaultName?: string) => boolean;
+  }
 }

src/hooks/useGraphPhoto.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { configContext } from "../ConfigContext";
 
-export async function fetchPhoto(accessToken: string): Promise<Blob | void> {
+export async function fetchPhoto(accessToken: string): Promise<Blob> {
   const headers = new Headers();
   const bearer = `Bearer ${accessToken}`;