Upgrade to TypeScript 4.3.2

.prettierrc.yaml

@@ -3,3 +3,9 @@ printWidth: 100
 trailingComma: "all"
 tabWidth: 2
 semi: true
+
+# For TS 4.3: https://github.com/prettier/prettier/issues/10642#issuecomment-849879761
+overrides:
+  - files: ["*.ts", "*.tsx"]
+    options:
+      parser: babel-ts

.yarn/yarn-wrapper.js

@@ -4,7 +4,7 @@
 const path = require("path");
 const fs = require("fs");
 
-const REAL_YARN = path.join(__dirname, "releases", "yarn-2.4.1.cjs");
+const REAL_YARN = path.join(__dirname, "releases", "yarn-3.0.0-rc.2.cjs");
 
 try {
   if (fs.statSync(REAL_YARN).size < 10000) {

app/components/Autocomplete.stories.tsx

@@ -29,7 +29,7 @@ function focusInput(el: any) {
 storiesOf("components/Autocomplete", module)
   .add("filtering to 'o'", () => {
     class Example extends Component {
-      render() {
+      override render() {
         return (
           <div style={{ padding: 20 }} ref={focusInput}>
             <Autocomplete
@@ -137,7 +137,7 @@ storiesOf("components/Autocomplete", module)
   })
   .add("at the right edge of the screen", () => {
     class Example extends Component {
-      render() {
+      override render() {
         return (
           <div style={{ position: "absolute", right: 0, padding: 20 }} ref={focusInput}>
             <Autocomplete
@@ -155,7 +155,7 @@ storiesOf("components/Autocomplete", module)
   })
   .add("with a long truncated path (and autoSize)", () => {
     class Example extends Component {
-      render() {
+      override render() {
         return (
           <div style={{ maxWidth: 200 }} ref={focusInput}>
             <Autocomplete

app/components/Autocomplete.tsx

@@ -118,7 +118,7 @@ export default class Autocomplete<T = unknown> extends PureComponent<
   // When we lose the scrollbar, we can safely set `showAllItems: false` again, because all items
   // will be in view anyway. We cannot set it to false earlier, as `<ReactAutocomplete>` may have a
   // reference to the highlighted element, which can cause an error if we hide it.
-  componentDidUpdate(): void {
+  override componentDidUpdate(): void {
     if (
       (this._autocomplete.current?.refs.menu as Element)?.scrollHeight <=
         (this._autocomplete.current?.refs.menu as Element)?.clientHeight &&
@@ -256,7 +256,7 @@ export default class Autocomplete<T = unknown> extends PureComponent<
     }
   };
 
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const {
       autocompleteKey,
       autoSize = false,

app/components/ButtonBase.tsx

@@ -37,7 +37,7 @@ class ButtonBaseImpl extends React.Component<Props> {
   animationId?: ReturnType<typeof requestAnimationFrame>;
   cancelTimeoutId?: ReturnType<typeof setTimeout>;
 
-  componentWillUnmount() {
+  override componentWillUnmount() {
     if (this.animationId != undefined) {
       cancelAnimationFrame(this.animationId);
     }
@@ -75,7 +75,7 @@ class ButtonBaseImpl extends React.Component<Props> {
     this.setState({ mouseDown: false });
   };
 
-  render() {
+  override render() {
     const {
       children,
       id,

app/components/Dropdown/index.tsx

@@ -45,7 +45,7 @@ type State = {
 };
 
 export default class Dropdown<T> extends React.Component<Props<T>, State> {
-  state = { isOpen: false };
+  override state = { isOpen: false };
   toggle = (): void => {
     if (!this.props.disabled) {
       this.setState({ isOpen: !this.state.isOpen });
@@ -122,7 +122,7 @@ export default class Dropdown<T> extends React.Component<Props<T>, State> {
     return button;
   }
 
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const { isOpen } = this.state;
     const { position, flatEdges, menuStyle } = this.props;
     const style = {

app/components/ErrorBoundary.stories.tsx

@@ -20,7 +20,7 @@ import StoreSetup from "@foxglove/studio-base/stories/StoreSetup";
 import ErrorBoundary from "./ErrorBoundary";
 
 class Broken extends React.Component {
-  render() {
+  override render() {
     throw {
       stack: `
   an error occurred

app/components/ErrorBoundary.tsx

@@ -45,17 +45,17 @@ export default class ErrorBoundary extends React.Component<
   { children: React.ReactNode; hideSourceLocations?: boolean },
   State
 > {
-  state: State = {
+  override state: State = {
     error: undefined,
     errorInfo: undefined,
   };
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     captureException(new AppError(error, errorInfo));
     this.setState({ error, errorInfo });
   }
 
-  render(): React.ReactNode {
+  override render(): React.ReactNode {
     const { error, errorInfo } = this.state;
     if (error) {
       let name = "this panel";

app/components/KeyListener.tsx

@@ -29,7 +29,7 @@ export default class KeyListener extends React.Component<Props> {
     global: false,
   };
 
-  componentDidMount(): void {
+  override componentDidMount(): void {
     const { global } = this.props;
     const target = global ? document : this.el?.parentElement;
     if (target) {
@@ -39,7 +39,7 @@ export default class KeyListener extends React.Component<Props> {
     }
   }
 
-  componentWillUnmount(): void {
+  override componentWillUnmount(): void {
     const { global } = this.props;
     const target = global ? document : this.el?.parentElement;
     if (target) {
@@ -85,7 +85,7 @@ export default class KeyListener extends React.Component<Props> {
     }
   };
 
-  render(): JSX.Element {
+  override render(): JSX.Element {
     return <div style={{ display: "none" }} ref={(el) => (this.el = el ?? undefined)} />;
   }
 }

app/components/Menu/Menu.tsx

@@ -27,7 +27,7 @@ type Props = {
 // and provides a helper { Item } component which can be used
 // to render typical menu items with text & an icon
 export default class Menu extends React.PureComponent<Props> {
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const { children, className, style } = this.props;
     const classes = cx(styles.container, className);
     return (

app/components/Menu/SubMenu.tsx

@@ -35,7 +35,7 @@ type Props = {
 export default class SubMenu extends React.Component<Props, State> {
   _unmounted: boolean = false;
 
-  state = {
+  override state = {
     open: false,
   };
 
@@ -51,12 +51,12 @@ export default class SubMenu extends React.Component<Props, State> {
     this.setState(({ open }) => ({ open: !open }));
   };
 
-  componentWillUnmount(): void {
+  override componentWillUnmount(): void {
     // the submenu might unmount on click, so don't update state if its gone
     this._unmounted = true;
   }
 
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const { text, children, checked, direction, icon, dataTest, style } = this.props;
     const { open } = this.state;
     return (

app/components/MessagePathSyntax/MessagePathInput.tsx

@@ -231,7 +231,7 @@ class MessagePathInputUnconnected extends React.PureComponent<
     }
   };
 
-  render() {
+  override render() {
     const {
       path,
       topics,

app/components/NotificationDisplay.stories.tsx

@@ -58,7 +58,7 @@ storiesOf("components/NotificationDisplay", module)
   })
   .add("With one error", () => {
     class Wrapper extends React.Component<any> {
-      componentDidMount() {
+      override componentDidMount() {
         sendNotification(
           "Something bad happened",
           "This error is on purpose - it comes from the story",
@@ -67,15 +67,15 @@ storiesOf("components/NotificationDisplay", module)
         );
       }
 
-      render() {
+      override render() {
         return <NotificationDisplayWrapper />;
       }
     }
     return <Wrapper />;
   })
   .add("With one warning", () => {
     class Wrapper extends React.Component<any> {
-      componentDidMount() {
+      override componentDidMount() {
         sendNotification(
           "This is the final countdown",
           "This warning is on purpose - it comes from the story",
@@ -84,15 +84,15 @@ storiesOf("components/NotificationDisplay", module)
         );
       }
 
-      render() {
+      override render() {
         return <NotificationDisplayWrapper />;
       }
     }
     return <Wrapper />;
   })
   .add("With one message", () => {
     class Wrapper extends React.Component<any> {
-      componentDidMount() {
+      override componentDidMount() {
         sendNotification(
           "Here's a helpful tip",
           "These are the details of the message",
@@ -101,7 +101,7 @@ storiesOf("components/NotificationDisplay", module)
         );
       }
 
-      render() {
+      override render() {
         return <NotificationDisplayWrapper />;
       }
     }

app/components/NotificationDisplay.tsx

@@ -157,7 +157,7 @@ type NotificationListProps = {
 
 // exported for storybook
 export class NotificationList extends React.PureComponent<NotificationListProps> {
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const { notifications, onClick } = this.props;
     return (
       <Menu style={{ marginTop: 2 }}>

app/components/PanelToolbar/index.stories.tsx

@@ -31,7 +31,7 @@ class MosaicWrapper extends React.Component<{
   children: React.ReactNode;
   width?: number;
 }> {
-  render() {
+  override render() {
     const { width = 300 } = this.props;
     return (
       <Mosaic
@@ -56,7 +56,7 @@ class MosaicWrapper extends React.Component<{
 }
 
 class PanelToolbarWithOpenMenu extends React.PureComponent<{ hideToolbars?: boolean }> {
-  render() {
+  override render() {
     return (
       <div
         ref={(el) => {
@@ -149,7 +149,7 @@ storiesOf("components/PanelToolbar", module)
   })
   .add("menu (only panel)", () => {
     class Story extends React.Component {
-      render() {
+      override render() {
         return (
           <MosaicWrapper>
             <PanelToolbarWithOpenMenu />
@@ -161,7 +161,7 @@ storiesOf("components/PanelToolbar", module)
   })
   .add("menu (with sibling panel)", () => {
     class Story extends React.Component {
-      render() {
+      override render() {
         return (
           <MosaicWrapper layout={{ direction: "row", first: "dummy", second: "Sibling" }}>
             <PanelToolbarWithOpenMenu />
@@ -173,7 +173,7 @@ storiesOf("components/PanelToolbar", module)
   })
   .add("menu for Tab panel", () => {
     class Story extends React.Component {
-      render() {
+      override render() {
         return (
           <MosaicWrapper layout={{ direction: "row", first: "Tab", second: "Sibling" }}>
             <PanelToolbarWithOpenMenu />
@@ -185,7 +185,7 @@ storiesOf("components/PanelToolbar", module)
   })
   .add("no toolbars", () => {
     class Story extends React.Component {
-      render() {
+      override render() {
         return (
           <MosaicWrapper layout={{ direction: "row", first: "dummy", second: "Sibling" }}>
             <PanelToolbarWithOpenMenu hideToolbars />

app/components/Select/Option.tsx

@@ -45,7 +45,7 @@ export default class Option extends React.Component<Props> {
     );
   }
 
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const { onClick, active, disabled, children } = this.props;
     const className = cx(styles.container, {
       [styles.active as string]: active,

app/components/Select/Select.tsx

@@ -46,7 +46,7 @@ export default class Select extends React.Component<Props, State> {
 
   el?: HTMLDivElement;
 
-  state = {
+  override state = {
     isOpen: false,
   };
 
@@ -112,7 +112,7 @@ export default class Select extends React.Component<Props, State> {
     );
   }
 
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const { isOpen } = this.state;
     const { text, value, icon } = this.props;
     return (

app/components/ShareJsonModal.tsx

@@ -63,7 +63,7 @@ function selectText(element?: HTMLTextAreaElement | ReactNull): void {
 }
 
 export default class ShareJsonModal extends Component<Props, State> {
-  state = {
+  override state = {
     value: encode(this.props.value),
     error: false,
     copied: false,
@@ -107,7 +107,7 @@ export default class ShareJsonModal extends Component<Props, State> {
     return <div className="notification is-danger">The input you provided is invalid.</div>;
   }
 
-  render(): JSX.Element {
+  override render(): JSX.Element {
     const { value, copied } = this.state;
 
     return (