From 78d29a99e50b6cfa09dc0f86eb93cb1202005e07 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Fri, 27 May 2022 16:40:19 -0400
Subject: [PATCH 01/12] Remove deprecated React.SFC usage

---
 ui/frontend/AdvancedOptionsMenu.tsx     |  2 +-
 ui/frontend/BuildMenu.tsx               |  6 +++---
 ui/frontend/ButtonMenuItem.tsx          |  2 +-
 ui/frontend/ChannelMenu.tsx             |  4 ++--
 ui/frontend/ConfigElement.tsx           |  6 +++---
 ui/frontend/ConfigMenu.tsx              |  2 +-
 ui/frontend/Header.tsx                  | 22 +++++++++++-----------
 ui/frontend/HeaderButton.tsx            |  2 +-
 ui/frontend/Help.tsx                    | 10 +++++-----
 ui/frontend/HelpExample.tsx             |  2 +-
 ui/frontend/Loader.tsx                  |  2 +-
 ui/frontend/MenuAside.tsx               |  2 +-
 ui/frontend/MenuGroup.tsx               |  2 +-
 ui/frontend/MenuItem.tsx                |  2 +-
 ui/frontend/ModeMenu.tsx                |  2 +-
 ui/frontend/Notifications.tsx           |  6 +++---
 ui/frontend/Output.tsx                  |  6 +++---
 ui/frontend/Output/Execute.tsx          |  4 ++--
 ui/frontend/Output/Gist.tsx             |  6 +++---
 ui/frontend/Output/Header.tsx           |  2 +-
 ui/frontend/Output/Loader.tsx           |  2 +-
 ui/frontend/Output/OutputPrism.tsx      |  2 +-
 ui/frontend/Output/PaneWithMir.tsx      |  2 +-
 ui/frontend/Output/Section.tsx          |  2 +-
 ui/frontend/Output/SimplePane.tsx       |  4 ++--
 ui/frontend/PageSwitcher.tsx            |  2 +-
 ui/frontend/Playground.tsx              |  4 ++--
 ui/frontend/PopButton.tsx               |  2 +-
 ui/frontend/SegmentedButton.tsx         |  2 +-
 ui/frontend/SelectableMenuItem.tsx      |  2 +-
 ui/frontend/ToolsMenu.tsx               |  2 +-
 ui/frontend/editor/AceEditor.tsx        |  2 +-
 ui/frontend/editor/Editor.tsx           |  2 +-
 ui/frontend/editor/MonacoEditor.tsx     |  2 +-
 ui/frontend/editor/MonacoEditorCore.tsx |  2 +-
 ui/frontend/uss-router/Link.tsx         |  2 +-
 ui/frontend/uss-router/Router.tsx       |  2 +-
 37 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/ui/frontend/AdvancedOptionsMenu.tsx b/ui/frontend/AdvancedOptionsMenu.tsx
index c364c870d..00db0ea7c 100644
--- a/ui/frontend/AdvancedOptionsMenu.tsx
+++ b/ui/frontend/AdvancedOptionsMenu.tsx
@@ -8,7 +8,7 @@ import { State } from './reducers';
 import * as selectors from './selectors';
 import { Backtrace, Edition } from './types';
 
-const AdvancedOptionsMenu: React.SFC = () => {
+const AdvancedOptionsMenu: React.FC = () => {
   const isEditionDefault = useSelector(selectors.isEditionDefault);
   const edition = useSelector((state: State) => state.configuration.edition);
   const isBacktraceSet = useSelector(selectors.getBacktraceSet);
diff --git a/ui/frontend/BuildMenu.tsx b/ui/frontend/BuildMenu.tsx
index f6443b3ca..74cd5f14a 100644
--- a/ui/frontend/BuildMenu.tsx
+++ b/ui/frontend/BuildMenu.tsx
@@ -27,7 +27,7 @@ const useDispatchAndClose = (action: () => actions.ThunkAction, close: () => voi
   );
 }
 
-const BuildMenu: React.SFC<BuildMenuProps> = props => {
+const BuildMenu: React.FC<BuildMenuProps> = props => {
   const isHirAvailable = useSelector(selectors.isHirAvailable);
   const isWasmAvailable = useSelector(selectors.isWasmAvailable);
 
@@ -75,14 +75,14 @@ const BuildMenu: React.SFC<BuildMenuProps> = props => {
   );
 };
 
-const HirAside: React.SFC = () => (
+const HirAside: React.FC = () => (
   <MenuAside>
     Note: HIR currently requires using the Nightly channel, selecting this
     option will switch to Nightly.
   </MenuAside>
 );
 
-const WasmAside: React.SFC = () => (
+const WasmAside: React.FC = () => (
   <MenuAside>
     Note: WASM currently requires using the Nightly channel, selecting this
     option will switch to Nightly.
diff --git a/ui/frontend/ButtonMenuItem.tsx b/ui/frontend/ButtonMenuItem.tsx
index 1da72a580..3b7ef27b5 100644
--- a/ui/frontend/ButtonMenuItem.tsx
+++ b/ui/frontend/ButtonMenuItem.tsx
@@ -10,7 +10,7 @@ interface ButtonMenuItemProps extends Button {
   name: string;
 }
 
-const ButtonMenuItem: React.SFC<ButtonMenuItemProps> = ({ name, children, ...props }) => (
+const ButtonMenuItem: React.FC<ButtonMenuItemProps> = ({ name, children, ...props }) => (
   <MenuItem>
     <button className={styles.container} {...props}>
       <div className={styles.name} data-test-id="button-menu-item__name">{name}</div>
diff --git a/ui/frontend/ChannelMenu.tsx b/ui/frontend/ChannelMenu.tsx
index 39c454366..b63b0e80e 100644
--- a/ui/frontend/ChannelMenu.tsx
+++ b/ui/frontend/ChannelMenu.tsx
@@ -15,7 +15,7 @@ interface ChannelMenuProps {
   close: () => void;
 }
 
-const ChannelMenu: React.SFC<ChannelMenuProps> = props => {
+const ChannelMenu: React.FC<ChannelMenuProps> = props => {
   const channel = useSelector((state: State) => state.configuration.channel);
   const stableVersion = useSelector(selectors.stableVersionText);
   const betaVersion = useSelector(selectors.betaVersionText);
@@ -63,7 +63,7 @@ const ChannelMenu: React.SFC<ChannelMenuProps> = props => {
   );
 };
 
-const Desc: React.SFC<{}> = ({ children }) => (
+const Desc: React.FC<{}> = ({ children }) => (
   <p className={styles.description}>{children}</p>
 );
 
diff --git a/ui/frontend/ConfigElement.tsx b/ui/frontend/ConfigElement.tsx
index ce06e3707..3872f7e71 100644
--- a/ui/frontend/ConfigElement.tsx
+++ b/ui/frontend/ConfigElement.tsx
@@ -14,7 +14,7 @@ interface EitherProps extends ConfigElementProps {
   onChange: (_: string) => any;
 }
 
-export const Either: React.SFC<EitherProps> =
+export const Either: React.FC<EitherProps> =
   ({ id, a, b, aLabel = a, bLabel = b, value, onChange, ...rest }) => (
     <ConfigElement {...rest}>
       <div className={styles.toggle}>
@@ -41,7 +41,7 @@ interface SelectProps extends ConfigElementProps {
   onChange: (_: string) => any;
 }
 
-export const Select: React.SFC<SelectProps> = ({ value, onChange, children, ...rest }) => (
+export const Select: React.FC<SelectProps> = ({ value, onChange, children, ...rest }) => (
   <ConfigElement {...rest}>
     <select className={styles.select} value={value} onChange={e => onChange(e.target.value)}>
       {children}
@@ -55,7 +55,7 @@ interface ConfigElementProps {
   aside?: JSX.Element,
 }
 
-const ConfigElement: React.SFC<ConfigElementProps> = ({ name, isNotDefault, aside, children }) => (
+const ConfigElement: React.FC<ConfigElementProps> = ({ name, isNotDefault, aside, children }) => (
   <MenuItem>
     <div className={styles.container}>
       <span className={isNotDefault ? styles.notDefault : styles.name}>{name}</span>
diff --git a/ui/frontend/ConfigMenu.tsx b/ui/frontend/ConfigMenu.tsx
index 6573ecbe3..fc457f5b5 100644
--- a/ui/frontend/ConfigMenu.tsx
+++ b/ui/frontend/ConfigMenu.tsx
@@ -25,7 +25,7 @@ const MONACO_THEMES = [
   'vs', 'vs-dark', 'vscode-dark-plus',
 ];
 
-const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
+const ConfigMenu: React.FC<ConfigMenuProps> = () => {
   const keybinding = useSelector((state: State) => state.configuration.ace.keybinding);
   const aceTheme = useSelector((state: State) => state.configuration.ace.theme);
   const monacoTheme = useSelector((state: State) => state.configuration.monaco.theme);
diff --git a/ui/frontend/Header.tsx b/ui/frontend/Header.tsx
index 28207fe91..b77f5b7d3 100644
--- a/ui/frontend/Header.tsx
+++ b/ui/frontend/Header.tsx
@@ -18,7 +18,7 @@ import { useAppDispatch } from './configureStore';
 
 import styles from './Header.module.css';
 
-const Header: React.SFC = () => (
+const Header: React.FC = () => (
   <div data-test-id="header" className={styles.container}>
     <HeaderSet id="build">
       <SegmentedButtonSet>
@@ -60,11 +60,11 @@ interface HeaderSetProps {
   id: string;
 }
 
-const HeaderSet: React.SFC<HeaderSetProps> = ({ id, children }) => (
+const HeaderSet: React.FC<HeaderSetProps> = ({ id, children }) => (
   <div className={id == 'channel-mode' ? styles.setChannelMode : styles.set}>{children}</div>
 );
 
-const ExecuteButton: React.SFC = () => {
+const ExecuteButton: React.FC = () => {
   const executionLabel = useSelector(selectors.getExecutionLabel);
 
   const dispatch = useAppDispatch();
@@ -79,7 +79,7 @@ const ExecuteButton: React.SFC = () => {
   );
 };
 
-const BuildMenuButton: React.SFC = () => {
+const BuildMenuButton: React.FC = () => {
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
     <SegmentedButton title="Select what to build" ref={ref} onClick={toggle}>
       <HeaderButton icon={<MoreOptionsIcon />} />
@@ -90,7 +90,7 @@ const BuildMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={BuildMenu} />;
 };
 
-const ModeMenuButton: React.SFC = () => {
+const ModeMenuButton: React.FC = () => {
   const label = useSelector(selectors.getModeLabel);
 
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
@@ -103,7 +103,7 @@ const ModeMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ModeMenu} />;
 };
 
-const ChannelMenuButton: React.SFC = () => {
+const ChannelMenuButton: React.FC = () => {
   const label = useSelector(selectors.getChannelLabel);
 
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
@@ -116,7 +116,7 @@ const ChannelMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ChannelMenu} />;
 }
 
-const AdvancedOptionsMenuButton: React.SFC = () => {
+const AdvancedOptionsMenuButton: React.FC = () => {
   const advancedOptionsSet = useSelector(selectors.getAdvancedOptionsSet);
 
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
@@ -129,7 +129,7 @@ const AdvancedOptionsMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={AdvancedOptionsMenu} />;
 }
 
-const ShareButton: React.SFC = () => {
+const ShareButton: React.FC = () => {
   const dispatch = useAppDispatch();
   const gistSave = useCallback(() => dispatch(actions.performGistSave()), [dispatch]);
 
@@ -141,7 +141,7 @@ const ShareButton: React.SFC = () => {
 };
 
 
-const ToolsMenuButton: React.SFC = () => {
+const ToolsMenuButton: React.FC = () => {
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
     <SegmentedButton title="Run extra tools on the source code" ref={ref} onClick={toggle}>
       <HeaderButton isExpandable>Tools</HeaderButton>
@@ -152,7 +152,7 @@ const ToolsMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ToolsMenu} />;
 };
 
-const ConfigMenuButton: React.SFC = () => {
+const ConfigMenuButton: React.FC = () => {
   const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
     <SegmentedButton title="Show the configuration options" ref={ref} onClick={toggle}>
       <HeaderButton icon={<ConfigIcon />} isExpandable>Config</HeaderButton>
@@ -163,7 +163,7 @@ const ConfigMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={ConfigMenu} />;
 };
 
-const HelpButton: React.SFC = () => (
+const HelpButton: React.FC = () => (
   <SegmentedLink title="View help" action={actions.navigateToHelp}>
     <HeaderButton icon={<HelpIcon />} />
   </SegmentedLink>
diff --git a/ui/frontend/HeaderButton.tsx b/ui/frontend/HeaderButton.tsx
index 8a5e9b1a6..cabb75b6e 100644
--- a/ui/frontend/HeaderButton.tsx
+++ b/ui/frontend/HeaderButton.tsx
@@ -11,7 +11,7 @@ interface HeaderButtonProps {
   isExpandable?: boolean;
 }
 
-const HeaderButton: React.SFC<HeaderButtonProps> = ({ bold, icon, rightIcon, isExpandable, children }) => {
+const HeaderButton: React.FC<HeaderButtonProps> = ({ bold, icon, rightIcon, isExpandable, children }) => {
   const c = [styles.container];
 
   if (bold) { c.push(styles.bold); }
diff --git a/ui/frontend/Help.tsx b/ui/frontend/Help.tsx
index 48e7c35a6..c52dff46b 100644
--- a/ui/frontend/Help.tsx
+++ b/ui/frontend/Help.tsx
@@ -75,7 +75,7 @@ fn main() {
     println!("{}", a_loop());
 }`;
 
-const Help: React.SFC = () => {
+const Help: React.FC = () => {
   return (
     <section className={styles.container}>
       <h1>The Rust Playground</h1>
@@ -316,10 +316,10 @@ const Help: React.SFC = () => {
   );
 };
 
-const H2: React.SFC = ({ children }) => <h2>{children}</h2>;
-const H3: React.SFC = ({ children }) => <h3>{children}</h3>;
+const H2: React.FC = ({ children }) => <h2>{children}</h2>;
+const H3: React.FC = ({ children }) => <h3>{children}</h3>;
 
-const LinkableSection: React.SFC<LinkableSectionProps> = ({
+const LinkableSection: React.FC<LinkableSectionProps> = ({
   id, header, level: Level, children,
 }) => (
   <div id={id}>
@@ -338,7 +338,7 @@ interface LinkableSectionProps {
   level: (ChildrenProps) => JSX.Element;
 }
 
-const Code: React.SFC = ({ children }) => (
+const Code: React.FC = ({ children }) => (
   <code className={styles.code}>{children}</code>
 );
 
diff --git a/ui/frontend/HelpExample.tsx b/ui/frontend/HelpExample.tsx
index 40eb524d4..50899d667 100644
--- a/ui/frontend/HelpExample.tsx
+++ b/ui/frontend/HelpExample.tsx
@@ -14,7 +14,7 @@ export interface HelpExampleProps {
   code: string;
 }
 
-const HelpExample: React.SFC<HelpExampleProps> = ({ code }) => {
+const HelpExample: React.FC<HelpExampleProps> = ({ code }) => {
   const dispatch = useAppDispatch();
   const showExample = useCallback(
     () => dispatch(actions.showExample(code)),
diff --git a/ui/frontend/Loader.tsx b/ui/frontend/Loader.tsx
index a604ce7dc..93abadc9e 100644
--- a/ui/frontend/Loader.tsx
+++ b/ui/frontend/Loader.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './Loader.module.css';
 
-const Loader: React.SFC = () => (
+const Loader: React.FC = () => (
   <div>
     <span className={styles.dot}>⬤</span>
     <span className={styles.dot}>⬤</span>
diff --git a/ui/frontend/MenuAside.tsx b/ui/frontend/MenuAside.tsx
index 46b4d207a..f6659f09c 100644
--- a/ui/frontend/MenuAside.tsx
+++ b/ui/frontend/MenuAside.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './MenuAside.module.css';
 
-const MenuAside: React.SFC = ({ children }) => (
+const MenuAside: React.FC = ({ children }) => (
   <p className={styles.aside}>
     {children}
   </p>
diff --git a/ui/frontend/MenuGroup.tsx b/ui/frontend/MenuGroup.tsx
index 576fc69c1..a6ca3d572 100644
--- a/ui/frontend/MenuGroup.tsx
+++ b/ui/frontend/MenuGroup.tsx
@@ -6,7 +6,7 @@ interface MenuGroupProps {
   title: string;
 }
 
-const MenuGroup: React.SFC<MenuGroupProps> = ({ title, children }) => (
+const MenuGroup: React.FC<MenuGroupProps> = ({ title, children }) => (
   <div className={styles.container}>
     <h1 className={styles.title}>{title}</h1>
     <div className={styles.content}>
diff --git a/ui/frontend/MenuItem.tsx b/ui/frontend/MenuItem.tsx
index ae9a61471..fd07a8031 100644
--- a/ui/frontend/MenuItem.tsx
+++ b/ui/frontend/MenuItem.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './MenuItem.module.css';
 
-const MenuItem: React.SFC<{}> = ({ children }) => (
+const MenuItem: React.FC<{}> = ({ children }) => (
   <div className={styles.container}>{children}</div>
 );
 
diff --git a/ui/frontend/ModeMenu.tsx b/ui/frontend/ModeMenu.tsx
index b6077a737..6f6e6993e 100644
--- a/ui/frontend/ModeMenu.tsx
+++ b/ui/frontend/ModeMenu.tsx
@@ -12,7 +12,7 @@ interface ModeMenuProps {
   close: () => void;
 }
 
-const ModeMenu: React.SFC<ModeMenuProps> = props => {
+const ModeMenu: React.FC<ModeMenuProps> = props => {
   const mode = useSelector((state: State) => state.configuration.mode);
   const dispatch = useDispatch();
   const changeMode = useCallback((mode) => {
diff --git a/ui/frontend/Notifications.tsx b/ui/frontend/Notifications.tsx
index 89e8f16b8..4cc54bf70 100644
--- a/ui/frontend/Notifications.tsx
+++ b/ui/frontend/Notifications.tsx
@@ -11,7 +11,7 @@ import styles from './Notifications.module.css';
 
 const MONACO_EDITOR_URL = 'https://microsoft.github.io/monaco-editor/';
 
-const Notifications: React.SFC = () => {
+const Notifications: React.FC = () => {
   return (
     <Portal>
       <div className={styles.container}>
@@ -21,7 +21,7 @@ const Notifications: React.SFC = () => {
   );
 };
 
-const MonacoEditorAvailableNotification: React.SFC = () => {
+const MonacoEditorAvailableNotification: React.FC = () => {
   const monicoEditorAvailable = useSelector(selectors.showMonicoEditorAvailableSelector);
 
   const dispatch = useDispatch();
@@ -40,7 +40,7 @@ interface NotificationProps {
   onClose: () => void;
 }
 
-const Notification: React.SFC<NotificationProps> = ({ onClose, children }) => (
+const Notification: React.FC<NotificationProps> = ({ onClose, children }) => (
   <div className={styles.notification}>
     <div className={styles.notificationContent}>{children}</div>
     <button className={styles.close} onClick={onClose}><Close /></button>
diff --git a/ui/frontend/Output.tsx b/ui/frontend/Output.tsx
index d7300c180..a51d97958 100644
--- a/ui/frontend/Output.tsx
+++ b/ui/frontend/Output.tsx
@@ -14,7 +14,7 @@ import * as selectors from './selectors';
 
 import styles from './Output.module.css';
 
-const Tab: React.SFC<TabProps> = ({ kind, focus, label, onClick, tabProps }) => {
+const Tab: React.FC<TabProps> = ({ kind, focus, label, onClick, tabProps }) => {
   if (selectors.hasProperties(tabProps)) {
     return (
       <button className={focus === kind ? styles.tabSelected : styles.tab}
@@ -35,7 +35,7 @@ interface TabProps {
   tabProps: object;
 }
 
-const PaneWithCode: React.SFC<PaneWithCodeProps> = ({ code, ...rest }) => (
+const PaneWithCode: React.FC<PaneWithCodeProps> = ({ code, ...rest }) => (
   <SimplePane {...rest}>
     <Section kind="code" label="Result">{code}</Section>
   </SimplePane>
@@ -45,7 +45,7 @@ interface PaneWithCodeProps extends SimplePaneProps {
   code?: string;
 }
 
-const Output: React.SFC = () => {
+const Output: React.FC = () => {
   const somethingToShow = useSelector(selectors.getSomethingToShow);
   const { meta: { focus }, execute, format, clippy, miri, macroExpansion, assembly, llvmIr, mir, hir, wasm, gist } =
     useSelector((state: State) => state.output);
diff --git a/ui/frontend/Output/Execute.tsx b/ui/frontend/Output/Execute.tsx
index 80d8937bd..7e1fe7896 100644
--- a/ui/frontend/Output/Execute.tsx
+++ b/ui/frontend/Output/Execute.tsx
@@ -10,7 +10,7 @@ import SimplePane from './SimplePane';
 
 import styles from './Execute.module.css';
 
-const Execute: React.SFC = () => {
+const Execute: React.FC = () => {
   const details = useSelector((state: State) => state.output.execute);
   const isAutoBuild = useSelector(selectors.isAutoBuildSelector);
 
@@ -29,7 +29,7 @@ interface WarningProps {
   addMainFunction: () => any;
 }
 
-const Warning: React.SFC<WarningProps> = props => (
+const Warning: React.FC<WarningProps> = props => (
   <Section kind="warning" label="Warnings">
     No main function was detected, so your code was compiled
     {'\n'}
diff --git a/ui/frontend/Output/Gist.tsx b/ui/frontend/Output/Gist.tsx
index 1ac3e566b..0f86f1c30 100644
--- a/ui/frontend/Output/Gist.tsx
+++ b/ui/frontend/Output/Gist.tsx
@@ -10,7 +10,7 @@ import Loader from './Loader';
 
 import styles from './Gist.module.css';
 
-const Gist: React.SFC = () => {
+const Gist: React.FC = () => {
   const showLoader = useSelector(selectors.showGistLoaderSelector);
 
   return (
@@ -52,7 +52,7 @@ class Copied extends React.PureComponent<CopiedProps, CopiedState> {
   }
 }
 
-const Links: React.SFC = () => {
+const Links: React.FC = () => {
   const codeUrl = useSelector(selectors.codeUrlSelector);
   const gistUrl = useSelector((state: State) => state.output.gist.url);
   const permalink = useSelector(selectors.permalinkSelector);
@@ -72,7 +72,7 @@ interface NewWindowProps {
   href: string;
 }
 
-const NewWindow: React.SFC<NewWindowProps> = props => (
+const NewWindow: React.FC<NewWindowProps> = props => (
   <p>
     <a href={props.href} target="_blank" rel="noopener noreferrer">{props.children}</a>
   </p>
diff --git a/ui/frontend/Output/Header.tsx b/ui/frontend/Output/Header.tsx
index c3a5b1141..933d64320 100644
--- a/ui/frontend/Output/Header.tsx
+++ b/ui/frontend/Output/Header.tsx
@@ -6,7 +6,7 @@ interface HeaderProps {
   label: string;
 }
 
-const Header: React.SFC<HeaderProps> = ({ label }) => (
+const Header: React.FC<HeaderProps> = ({ label }) => (
   <span className={styles.container}>{label}</span>
 );
 
diff --git a/ui/frontend/Output/Loader.tsx b/ui/frontend/Output/Loader.tsx
index 939043b3c..859911173 100644
--- a/ui/frontend/Output/Loader.tsx
+++ b/ui/frontend/Output/Loader.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import GenericLoader from '../Loader';
 import Header from './Header';
 
-const Loader: React.SFC = () => (
+const Loader: React.FC = () => (
   <div>
     <Header label="Progress" />
     <GenericLoader />
diff --git a/ui/frontend/Output/OutputPrism.tsx b/ui/frontend/Output/OutputPrism.tsx
index 2f1d1698b..70dfb0431 100644
--- a/ui/frontend/Output/OutputPrism.tsx
+++ b/ui/frontend/Output/OutputPrism.tsx
@@ -7,7 +7,7 @@ interface OutputPrismProps {
   languageCode: 'language-rust_mir' | 'language-rust_errors';
 }
 
-const OutputPrism: React.SFC<OutputPrismProps> = ({ languageCode, children }) => (
+const OutputPrism: React.FC<OutputPrismProps> = ({ languageCode, children }) => (
   <pre>
     <PrismCode className={`${styles.container} ${languageCode}`}>
       {children}
diff --git a/ui/frontend/Output/PaneWithMir.tsx b/ui/frontend/Output/PaneWithMir.tsx
index 625d6bfb8..931938a25 100644
--- a/ui/frontend/Output/PaneWithMir.tsx
+++ b/ui/frontend/Output/PaneWithMir.tsx
@@ -8,7 +8,7 @@ interface PaneWithMirProps extends SimplePaneProps {
   code?: string;
 }
 
-const PaneWithMir: React.SFC<PaneWithMirProps> = ({ code, ...rest }) => (
+const PaneWithMir: React.FC<PaneWithMirProps> = ({ code, ...rest }) => (
   <SimplePane {...rest}>
     <div data-test-id="output-result">
       <Header label="Result" />
diff --git a/ui/frontend/Output/Section.tsx b/ui/frontend/Output/Section.tsx
index a774764e1..ed16cb94a 100644
--- a/ui/frontend/Output/Section.tsx
+++ b/ui/frontend/Output/Section.tsx
@@ -9,7 +9,7 @@ interface SectionProps {
   label: string;
 }
 
-const Section: React.SFC<SectionProps> = ({ kind, label, children }) => (
+const Section: React.FC<SectionProps> = ({ kind, label, children }) => (
   children && (
     <div data-test-id={`output-${kind}`}>
       <Header label={label} />
diff --git a/ui/frontend/Output/SimplePane.tsx b/ui/frontend/Output/SimplePane.tsx
index be8a0c8fd..1445d367f 100644
--- a/ui/frontend/Output/SimplePane.tsx
+++ b/ui/frontend/Output/SimplePane.tsx
@@ -9,7 +9,7 @@ interface HighlightErrorsProps {
   label: string;
 }
 
-const HighlightErrors: React.SFC<HighlightErrorsProps> = ({ label, children }) => (
+const HighlightErrors: React.FC<HighlightErrorsProps> = ({ label, children }) => (
   <div data-test-id="output-stderr">
     <Header label={label} />
     <OutputPrism languageCode="language-rust_errors">
@@ -29,7 +29,7 @@ export interface ReallySimplePaneProps {
   error?: string;
 }
 
-const SimplePane: React.SFC<SimplePaneProps> = props => (
+const SimplePane: React.FC<SimplePaneProps> = props => (
   <div data-test-id={`output-${props.kind}`}>
     {(props.requestsInProgress > 0) && <Loader />}
     <Section kind="error" label="Errors">{props.error}</Section>
diff --git a/ui/frontend/PageSwitcher.tsx b/ui/frontend/PageSwitcher.tsx
index 413e225de..cd0b1d28a 100644
--- a/ui/frontend/PageSwitcher.tsx
+++ b/ui/frontend/PageSwitcher.tsx
@@ -5,7 +5,7 @@ import Help from './Help';
 import Playground from './Playground';
 import { State } from './reducers';
 
-const PageSwitcher: React.SFC = () => {
+const PageSwitcher: React.FC = () => {
   const page = useSelector((state: State) => state.page);
 
   switch (page) {
diff --git a/ui/frontend/Playground.tsx b/ui/frontend/Playground.tsx
index 9cb4daa52..c67da6427 100644
--- a/ui/frontend/Playground.tsx
+++ b/ui/frontend/Playground.tsx
@@ -36,7 +36,7 @@ const HANDLE_STYLES = {
 // because we want to reduce the number of times that the Editor
 // component is remounted. Each time it's remounted, we see a flicker and
 // lose state (like undo history).
-const ResizableArea: React.SFC = () => {
+const ResizableArea: React.FC = () => {
   const somethingToShow = useSelector(selectors.getSomethingToShow);
   const isFocused = useSelector(selectors.isOutputFocused);
   const orientation = useSelector(selectors.orientation);
@@ -85,7 +85,7 @@ const ResizableArea: React.SFC = () => {
   );
 };
 
-const Playground: React.SFC = () => {
+const Playground: React.FC = () => {
   const showNotifications = useSelector(selectors.anyNotificationsToShowSelector);
 
   return (
diff --git a/ui/frontend/PopButton.tsx b/ui/frontend/PopButton.tsx
index 36b11126c..8ab26cf13 100644
--- a/ui/frontend/PopButton.tsx
+++ b/ui/frontend/PopButton.tsx
@@ -11,7 +11,7 @@ interface NewPopProps {
   Menu: React.ComponentType<{ close: () => void }>;
 }
 
-const PopButton: React.SFC<NewPopProps> = ({ Button, Menu }) => {
+const PopButton: React.FC<NewPopProps> = ({ Button, Menu }) => {
   const [isOpen, setOpen] = useState(false);
   const toggle = useCallback(() => setOpen(v => !v), []);
   const close = useCallback(() => setOpen(false), []);
diff --git a/ui/frontend/SegmentedButton.tsx b/ui/frontend/SegmentedButton.tsx
index dee69bd27..a2eb71ff4 100644
--- a/ui/frontend/SegmentedButton.tsx
+++ b/ui/frontend/SegmentedButton.tsx
@@ -4,7 +4,7 @@ import Link, { LinkProps } from './uss-router/Link';
 
 import styles from './SegmentedButton.module.css';
 
-export const SegmentedButtonSet: React.SFC = ({ children }) => (
+export const SegmentedButtonSet: React.FC = ({ children }) => (
   <div className={styles.container}>{children}</div>
 );
 
diff --git a/ui/frontend/SelectableMenuItem.tsx b/ui/frontend/SelectableMenuItem.tsx
index a5dac2519..4d5f2672a 100644
--- a/ui/frontend/SelectableMenuItem.tsx
+++ b/ui/frontend/SelectableMenuItem.tsx
@@ -12,7 +12,7 @@ interface SelectableMenuItemProps extends Button {
   selected: boolean;
 }
 
-const SelectableMenuItem: React.SFC<SelectableMenuItemProps> = ({ name, selected, children, ...props }) => (
+const SelectableMenuItem: React.FC<SelectableMenuItemProps> = ({ name, selected, children, ...props }) => (
   <MenuItem>
     <button className={selected ? styles.selected : styles.container} {...props}>
       <div className={styles.header}>
diff --git a/ui/frontend/ToolsMenu.tsx b/ui/frontend/ToolsMenu.tsx
index 233be6818..a0ed22c74 100644
--- a/ui/frontend/ToolsMenu.tsx
+++ b/ui/frontend/ToolsMenu.tsx
@@ -13,7 +13,7 @@ interface ToolsMenuProps {
   close: () => void;
 }
 
-const ToolsMenu: React.SFC<ToolsMenuProps> = props => {
+const ToolsMenu: React.FC<ToolsMenuProps> = props => {
   const rustfmtVersion = useSelector(selectors.rustfmtVersionText);
   const rustfmtVersionDetails = useSelector(selectors.rustfmtVersionDetailsText);
   const clippyVersionDetails = useSelector(selectors.clippyVersionDetailsText);
diff --git a/ui/frontend/editor/AceEditor.tsx b/ui/frontend/editor/AceEditor.tsx
index 725f3fa95..f6229b060 100644
--- a/ui/frontend/editor/AceEditor.tsx
+++ b/ui/frontend/editor/AceEditor.tsx
@@ -83,7 +83,7 @@ function useEditorProp<T>(editor: AceModule, prop: T, whenPresent: (editor: AceM
   }, [editor, prop, whenPresent]);
 }
 
-const AceEditor: React.SFC<AceEditorProps> = props => {
+const AceEditor: React.FC<AceEditorProps> = props => {
   const [editor, setEditor] = useState<AceModule>(null);
   const child = useRef<HTMLDivElement>(null);
 
diff --git a/ui/frontend/editor/Editor.tsx b/ui/frontend/editor/Editor.tsx
index 145f3b2e2..02354d1a5 100644
--- a/ui/frontend/editor/Editor.tsx
+++ b/ui/frontend/editor/Editor.tsx
@@ -116,7 +116,7 @@ const editorMap = {
   [EditorType.Monaco]: MonacoEditor,
 };
 
-const Editor: React.SFC = () => {
+const Editor: React.FC = () => {
   const code = useSelector((state: State) => state.code);
   const editor = useSelector((state: State) => state.configuration.editor);
   const position = useSelector((state: State) => state.position);
diff --git a/ui/frontend/editor/MonacoEditor.tsx b/ui/frontend/editor/MonacoEditor.tsx
index 94a281ade..e714fabf2 100644
--- a/ui/frontend/editor/MonacoEditor.tsx
+++ b/ui/frontend/editor/MonacoEditor.tsx
@@ -4,7 +4,7 @@ import { CommonEditorProps } from '../types';
 
 const MonacoEditorLazy = React.lazy(() => import('./MonacoEditorCore'));
 
-const MonacoEditor: React.SFC<CommonEditorProps> = props => (
+const MonacoEditor: React.FC<CommonEditorProps> = props => (
   <Suspense fallback={'Loading'}>
     <MonacoEditorLazy {...props} />
   </Suspense>
diff --git a/ui/frontend/editor/MonacoEditorCore.tsx b/ui/frontend/editor/MonacoEditorCore.tsx
index 9998815d8..cb20014d3 100644
--- a/ui/frontend/editor/MonacoEditorCore.tsx
+++ b/ui/frontend/editor/MonacoEditorCore.tsx
@@ -32,7 +32,7 @@ const initEditor = (execute: () => any): EditorDidMount => (editor, monaco) => {
   });
 };
 
-const MonacoEditorCore: React.SFC<CommonEditorProps> = props => {
+const MonacoEditorCore: React.FC<CommonEditorProps> = props => {
   const theme = useSelector((s: State) => s.configuration.monaco.theme);
 
   return (
diff --git a/ui/frontend/uss-router/Link.tsx b/ui/frontend/uss-router/Link.tsx
index 27166ffb5..61fc33876 100644
--- a/ui/frontend/uss-router/Link.tsx
+++ b/ui/frontend/uss-router/Link.tsx
@@ -11,7 +11,7 @@ export interface LinkProps extends SlimAnchor {
   onClick?: () => void;
 }
 
-const Link: React.SFC<LinkProps> = (props) => {
+const Link: React.FC<LinkProps> = (props) => {
   const dispatch = useDispatch();
   const router = useContext(Context);
   const { action, onClick, children, ...anchorProps } = props;
diff --git a/ui/frontend/uss-router/Router.tsx b/ui/frontend/uss-router/Router.tsx
index 440d1e33e..c4b0edf21 100644
--- a/ui/frontend/uss-router/Router.tsx
+++ b/ui/frontend/uss-router/Router.tsx
@@ -6,7 +6,7 @@ interface RouterProps {
   router: boolean;
 }
 
-const Router: React.SFC<RouterProps> = (props) => {
+const Router: React.FC<RouterProps> = (props) => {
 
   return (
     <Context.Provider value={props.router}>

From 57746a5ceb73028a7b064a9ab41697d2c76fcb86 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Fri, 27 May 2022 16:49:36 -0400
Subject: [PATCH 02/12] Fix TS typing errors in the Help component

---
 ui/frontend/Help.tsx | 37 +++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/ui/frontend/Help.tsx b/ui/frontend/Help.tsx
index c52dff46b..9d186df22 100644
--- a/ui/frontend/Help.tsx
+++ b/ui/frontend/Help.tsx
@@ -81,7 +81,7 @@ const Help: React.FC = () => {
       <h1>The Rust Playground</h1>
       <Link action={actions.navigateToIndex}>Return to the playground</Link>
 
-      <LinkableSection id="about" header="About" level={H2}>
+      <LinkableSection id="about" header="About" level="h2">
         <p>
           The playground is an <a href={REPO_URL}>open source project</a>.
           If you have any suggestions for features, issues with the
@@ -107,8 +107,8 @@ const Help: React.FC = () => {
         </p>
       </LinkableSection>
 
-      <LinkableSection id="features" header="Features" level={H2}>
-        <LinkableSection id="features-crates" header="Crates" level={H3}>
+      <LinkableSection id="features" header="Features" level="h2">
+        <LinkableSection id="features-crates" header="Crates" level="h3">
           <p>
             The playground provides the top 100 most downloaded crates
           from <a href={CRATES_IO_URL}>crates.io</a>, the crates from
@@ -126,7 +126,7 @@ const Help: React.FC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-formatting" header="Formatting code" level={H3}>
+        <LinkableSection id="features-formatting" header="Formatting code" level="h3">
           <p>
             <a href={RUSTFMT_URL}>rustfmt</a> is a tool for formatting Rust code
           according to the Rust style guidelines. Click on the <strong>Format</strong>
@@ -137,7 +137,7 @@ const Help: React.FC = () => {
           <Example code={RUSTFMT_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-linting" header="Linting code" level={H3}>
+        <LinkableSection id="features-linting" header="Linting code" level="h3">
           <p>
             <a href={CLIPPY_URL}>Clippy</a> is a collection of lints to catch common
           mistakes and improve your Rust code. Click on the <strong>Clippy</strong>
@@ -149,7 +149,7 @@ const Help: React.FC = () => {
           <Example code={CLIPPY_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-miri" header="Checking code for undefined behavior" level={H3}>
+        <LinkableSection id="features-miri" header="Checking code for undefined behavior" level="h3">
           <p>
             <a href={MIRI_URL}>Miri</a> is an interpreter for Rust’s mid-level intermediate
             representation (MIR) and can be used to detect certain kinds of undefined behavior
@@ -160,7 +160,7 @@ const Help: React.FC = () => {
           <Example code={MIRI_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-sharing" header="Sharing code" level={H3}>
+        <LinkableSection id="features-sharing" header="Sharing code" level="h3">
           <p>
             Once you have some code worth saving or sharing, click on the
             {' '}
@@ -171,7 +171,7 @@ const Help: React.FC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-linking" header="Linking to the playground with initial code" level={H3}>
+        <LinkableSection id="features-linking" header="Linking to the playground with initial code" level="h3">
           <p>
             If you have a web page with Rust code that you’d like to
             show in action, you can link to the playground with the
@@ -183,7 +183,7 @@ const Help: React.FC = () => {
           <pre className={styles.code}><code>{LINK_EXAMPLE}</code></pre>
         </LinkableSection>
 
-        <LinkableSection id="features-tests" header="Executing tests" level={H3}>
+        <LinkableSection id="features-tests" header="Executing tests" level="h3">
           <p>
             If your code contains the <Code>#[test]</Code> attribute and does not
           contain a <Code>main</Code> method, <Code>cargo test</Code> will be
@@ -193,7 +193,7 @@ const Help: React.FC = () => {
           <Example code={TEST_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-library" header="Compiling as a library" level={H3}>
+        <LinkableSection id="features-library" header="Compiling as a library" level="h3">
           <p>
             If your code contains the <Code>#![crate_type=&quot;lib&quot;]</Code> attribute,
             {' '}
@@ -204,7 +204,7 @@ const Help: React.FC = () => {
           <Example code={LIBRARY_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-output-formats" header="Output formats" level={H3}>
+        <LinkableSection id="features-output-formats" header="Output formats" level="h3">
           <p>
             Instead of executing the code, you can also see intermediate
             output of the compiler as x86_64 assembly, LLVM IR, Rust MIR, or
@@ -217,7 +217,7 @@ const Help: React.FC = () => {
           <Example code={OUTPUT_EXAMPLE} />
         </LinkableSection>
 
-        <LinkableSection id="features-modes" header="Compilation modes" level={H3}>
+        <LinkableSection id="features-modes" header="Compilation modes" level="h3">
           <p>
             Rust has two primary compilation modes: <strong>Debug</strong> and
             {' '}
@@ -232,7 +232,7 @@ const Help: React.FC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-channels" header="Rust channels" level={H3}>
+        <LinkableSection id="features-channels" header="Rust channels" level="h3">
           <p>
             Rust releases new <strong>stable</strong> versions every 6
           weeks. Between these stable releases, <strong>beta</strong> versions of the
@@ -247,7 +247,7 @@ const Help: React.FC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-customization" header="Customization" level={H3}>
+        <LinkableSection id="features-customization" header="Customization" level="h3">
           <p>
             The <a href={ACE_URL}>Ajax.org Cloud9 Editor (Ace)</a> is used to
             provide a better interface for editing code. Ace comes with
@@ -265,7 +265,7 @@ const Help: React.FC = () => {
           </p>
         </LinkableSection>
 
-        <LinkableSection id="features-persistence" header="Persistence" level={H3}>
+        <LinkableSection id="features-persistence" header="Persistence" level="h3">
           <p>
             The most recently entered code will be automatically saved in your browser’s
             {' '}
@@ -280,7 +280,7 @@ const Help: React.FC = () => {
         </LinkableSection>
       </LinkableSection>
 
-      <LinkableSection id="limitations" header="Limitations" level={H2}>
+      <LinkableSection id="limitations" header="Limitations" level="h2">
         <p>
           To prevent the playground from being used to attack other computers and
           to ensure it is available for everyone to use, some limitations
@@ -316,9 +316,6 @@ const Help: React.FC = () => {
   );
 };
 
-const H2: React.FC = ({ children }) => <h2>{children}</h2>;
-const H3: React.FC = ({ children }) => <h3>{children}</h3>;
-
 const LinkableSection: React.FC<LinkableSectionProps> = ({
   id, header, level: Level, children,
 }) => (
@@ -335,7 +332,7 @@ const LinkableSection: React.FC<LinkableSectionProps> = ({
 interface LinkableSectionProps {
   id: string;
   header: string;
-  level: (ChildrenProps) => JSX.Element;
+  level: React.ElementType;
 }
 
 const Code: React.FC = ({ children }) => (

From 456c42ba61df1de55512be10c736ea6a3ce0125e Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Tue, 7 Jun 2022 12:53:41 -0400
Subject: [PATCH 03/12] Fix TS typing errors in the reducers

---
 ui/frontend/reducers/output/assembly.ts       | 4 ----
 ui/frontend/reducers/output/clippy.ts         | 3 ---
 ui/frontend/reducers/output/execute.ts        | 3 ---
 ui/frontend/reducers/output/format.ts         | 3 ---
 ui/frontend/reducers/output/gist.ts           | 9 ---------
 ui/frontend/reducers/output/hir.ts            | 4 ----
 ui/frontend/reducers/output/llvmIr.ts         | 4 ----
 ui/frontend/reducers/output/macroExpansion.ts | 3 ---
 ui/frontend/reducers/output/meta.ts           | 3 +--
 ui/frontend/reducers/output/mir.ts            | 4 ----
 ui/frontend/reducers/output/miri.ts           | 3 ---
 ui/frontend/reducers/output/wasm.ts           | 4 ----
 ui/frontend/reducers/selection.ts             | 2 --
 ui/frontend/reducers/versions.ts              | 6 ------
 14 files changed, 1 insertion(+), 54 deletions(-)

diff --git a/ui/frontend/reducers/output/assembly.ts b/ui/frontend/reducers/output/assembly.ts
index f3e1ee227..69159753d 100644
--- a/ui/frontend/reducers/output/assembly.ts
+++ b/ui/frontend/reducers/output/assembly.ts
@@ -3,10 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  code: null,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/clippy.ts b/ui/frontend/reducers/output/clippy.ts
index d0d2e25a8..42e4966bf 100644
--- a/ui/frontend/reducers/output/clippy.ts
+++ b/ui/frontend/reducers/output/clippy.ts
@@ -3,9 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/execute.ts b/ui/frontend/reducers/output/execute.ts
index 45922885d..6558ce4c7 100644
--- a/ui/frontend/reducers/output/execute.ts
+++ b/ui/frontend/reducers/output/execute.ts
@@ -3,9 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  stdout: null,
-  stderr: null,
-  error: null,
   isAutoBuild: false,
 };
 
diff --git a/ui/frontend/reducers/output/format.ts b/ui/frontend/reducers/output/format.ts
index 7078daa57..0f53e403d 100644
--- a/ui/frontend/reducers/output/format.ts
+++ b/ui/frontend/reducers/output/format.ts
@@ -3,9 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/gist.ts b/ui/frontend/reducers/output/gist.ts
index 7feb16578..6fc6eaf99 100644
--- a/ui/frontend/reducers/output/gist.ts
+++ b/ui/frontend/reducers/output/gist.ts
@@ -4,15 +4,6 @@ import { finish, RequestsInProgress, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  id: null,
-  url: null,
-  code: null,
-  stdout: null,
-  stderr: null,
-  channel: null,
-  mode: null,
-  edition: null,
-  error: null,
 };
 
 interface State extends RequestsInProgress {
diff --git a/ui/frontend/reducers/output/hir.ts b/ui/frontend/reducers/output/hir.ts
index 32db2d7bc..b3a709149 100644
--- a/ui/frontend/reducers/output/hir.ts
+++ b/ui/frontend/reducers/output/hir.ts
@@ -3,10 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  code: null,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/llvmIr.ts b/ui/frontend/reducers/output/llvmIr.ts
index 764babd19..67cd2f65b 100644
--- a/ui/frontend/reducers/output/llvmIr.ts
+++ b/ui/frontend/reducers/output/llvmIr.ts
@@ -3,10 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  code: null,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/macroExpansion.ts b/ui/frontend/reducers/output/macroExpansion.ts
index a27039974..840a039e4 100644
--- a/ui/frontend/reducers/output/macroExpansion.ts
+++ b/ui/frontend/reducers/output/macroExpansion.ts
@@ -3,9 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/meta.ts b/ui/frontend/reducers/output/meta.ts
index 37689c903..1f8dd9207 100644
--- a/ui/frontend/reducers/output/meta.ts
+++ b/ui/frontend/reducers/output/meta.ts
@@ -2,7 +2,6 @@ import { Action, ActionType } from '../../actions';
 import { Focus } from '../../types';
 
 const DEFAULT: State = {
-  focus: null,
 };
 
 interface State {
@@ -44,7 +43,7 @@ export default function meta(state = DEFAULT, action: Action) {
     case ActionType.RequestFormat:
       return { ...state, focus: Focus.Format };
     case ActionType.FormatSucceeded:
-      return { ...state, focus: null };
+      return { ...state, focus: undefined };
 
     case ActionType.RequestGistLoad:
     case ActionType.RequestGistSave:
diff --git a/ui/frontend/reducers/output/mir.ts b/ui/frontend/reducers/output/mir.ts
index cce84a24b..8c060c3d0 100644
--- a/ui/frontend/reducers/output/mir.ts
+++ b/ui/frontend/reducers/output/mir.ts
@@ -3,10 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  code: null,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/miri.ts b/ui/frontend/reducers/output/miri.ts
index 4d82c6a39..69cfc1c77 100644
--- a/ui/frontend/reducers/output/miri.ts
+++ b/ui/frontend/reducers/output/miri.ts
@@ -3,9 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/output/wasm.ts b/ui/frontend/reducers/output/wasm.ts
index a2e75ce37..f8d1831b4 100644
--- a/ui/frontend/reducers/output/wasm.ts
+++ b/ui/frontend/reducers/output/wasm.ts
@@ -3,10 +3,6 @@ import { finish, start } from './sharedStateManagement';
 
 const DEFAULT: State = {
   requestsInProgress: 0,
-  code: null,
-  stdout: null,
-  stderr: null,
-  error: null,
 };
 
 interface State {
diff --git a/ui/frontend/reducers/selection.ts b/ui/frontend/reducers/selection.ts
index 57ce86895..7d19939cb 100644
--- a/ui/frontend/reducers/selection.ts
+++ b/ui/frontend/reducers/selection.ts
@@ -2,8 +2,6 @@ import { Action, ActionType } from '../actions';
 import { Selection } from '../types';
 
 const DEFAULT: Selection = {
-  start: null,
-  end: null,
 };
 
 export default function position(state = DEFAULT, action: Action) {
diff --git a/ui/frontend/reducers/versions.ts b/ui/frontend/reducers/versions.ts
index d562fb299..75add115f 100644
--- a/ui/frontend/reducers/versions.ts
+++ b/ui/frontend/reducers/versions.ts
@@ -2,12 +2,6 @@ import { Action, ActionType } from '../actions';
 import { Version } from '../types';
 
 const DEFAULT: State = {
-  stable: null,
-  beta: null,
-  nightly: null,
-  rustfmt: null,
-  clippy: null,
-  miri: null,
 };
 
 export interface State {

From 76f0d8769eb43d606676a9b939d9f4db8fb4b5de Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Sun, 29 May 2022 12:16:42 -0400
Subject: [PATCH 04/12] Fix TS typing errors in the Section component

---
 ui/frontend/Output/Section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/frontend/Output/Section.tsx b/ui/frontend/Output/Section.tsx
index ed16cb94a..85c9789b5 100644
--- a/ui/frontend/Output/Section.tsx
+++ b/ui/frontend/Output/Section.tsx
@@ -10,7 +10,7 @@ interface SectionProps {
 }
 
 const Section: React.FC<SectionProps> = ({ kind, label, children }) => (
-  children && (
+  React.Children.count(children) === 0 ? null : (
     <div data-test-id={`output-${kind}`}>
       <Header label={label} />
       <pre><code className={styles.code}>{children}</code></pre>

From d8167bf0804ce4ceb35eed2265375aef0e886c19 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Sun, 29 May 2022 12:20:25 -0400
Subject: [PATCH 05/12] Fix TS typing errors in the Output component

---
 ui/frontend/Output.tsx | 6 +++---
 ui/frontend/actions.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/frontend/Output.tsx b/ui/frontend/Output.tsx
index a51d97958..bd9905c7d 100644
--- a/ui/frontend/Output.tsx
+++ b/ui/frontend/Output.tsx
@@ -51,7 +51,7 @@ const Output: React.FC = () => {
     useSelector((state: State) => state.output);
 
   const dispatch = useDispatch();
-  const focusClose = useCallback(() => dispatch(actions.changeFocus(null)), [dispatch]);
+  const focusClose = useCallback(() => dispatch(actions.changeFocus()), [dispatch]);
   const focusExecute = useCallback(() => dispatch(actions.changeFocus(Focus.Execute)), [dispatch]);
   const focusFormat = useCallback(() => dispatch(actions.changeFocus(Focus.Format)), [dispatch]);
   const focusClippy = useCallback(() => dispatch(actions.changeFocus(Focus.Clippy)), [dispatch]);
@@ -68,8 +68,8 @@ const Output: React.FC = () => {
     return null;
   }
 
-  let close = null;
-  let body = null;
+  let close: React.ReactElement | null = null;
+  let body: React.ReactElement | null = null;
   if (focus) {
     close = <button className={styles.tabClose} onClick={focusClose}>Close</button>;
 
diff --git a/ui/frontend/actions.ts b/ui/frontend/actions.ts
index 4b415a2c1..1813edfdb 100644
--- a/ui/frontend/actions.ts
+++ b/ui/frontend/actions.ts
@@ -180,7 +180,7 @@ export const reExecuteWithBacktrace = (): ThunkAction => dispatch => {
   dispatch(performExecuteOnly());
 };
 
-export const changeFocus = (focus: Focus) =>
+export const changeFocus = (focus?: Focus) =>
   createAction(ActionType.ChangeFocus, { focus });
 
 const requestExecute = () =>

From f599f8530103f5392221053cd19e7ea50ad707ca Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Sun, 29 May 2022 12:22:32 -0400
Subject: [PATCH 06/12] Fix TS typing errors in the Gist component

---
 ui/frontend/Output/Gist.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/frontend/Output/Gist.tsx b/ui/frontend/Output/Gist.tsx
index 0f86f1c30..41d70a943 100644
--- a/ui/frontend/Output/Gist.tsx
+++ b/ui/frontend/Output/Gist.tsx
@@ -61,7 +61,7 @@ const Links: React.FC = () => {
   return (
     <Fragment>
       <Copied href={permalink}>Permalink to the playground</Copied>
-      <Copied href={gistUrl}>Direct link to the gist</Copied>
+      { gistUrl ? <Copied href={gistUrl}>Direct link to the gist</Copied> : null }
       <Copied href={codeUrl}>Embedded code in link</Copied>
       <NewWindow href={urloUrl}>Open a new thread in the Rust user forum</NewWindow>
     </Fragment>

From 862b5d243e8bf3b73cf254ccf6e33d56a553db95 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Sun, 29 May 2022 12:34:38 -0400
Subject: [PATCH 07/12] Fix TS typing errors in highlighting.ts

---
 ui/frontend/highlighting.ts | 139 +++++++++++++++++++++---------------
 ui/frontend/package.json    |   1 +
 ui/frontend/yarn.lock       |   5 ++
 3 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/ui/frontend/highlighting.ts b/ui/frontend/highlighting.ts
index 38847b421..7929f51e6 100644
--- a/ui/frontend/highlighting.ts
+++ b/ui/frontend/highlighting.ts
@@ -57,17 +57,21 @@ export function configureRustErrors({
   Prism.hooks.add('wrap', env => {
     if (env.type === 'error-explanation') {
       const errorMatch = /E\d+/.exec(env.content);
-      const [errorCode] = errorMatch;
-      env.tag = 'a';
-      env.attributes.href = `https://doc.rust-lang.org/${getChannel()}/error-index.html#${errorCode}`;
-      env.attributes.target = '_blank';
+      if (errorMatch) {
+        const [errorCode] = errorMatch;
+        env.tag = 'a';
+        env.attributes.href = `https://doc.rust-lang.org/${getChannel()}/error-index.html#${errorCode}`;
+        env.attributes.target = '_blank';
+      }
     }
     if (env.type === 'see-issue') {
       const errorMatch = /\d+/.exec(env.content);
-      const [errorCode] = errorMatch;
-      env.tag = 'a';
-      env.attributes.href = `https://github.com/rust-lang/rust/issues/${errorCode}`;
-      env.attributes.target = '_blank';
+      if (errorMatch) {
+        const [errorCode] = errorMatch;
+        env.tag = 'a';
+        env.attributes.href = `https://github.com/rust-lang/rust/issues/${errorCode}`;
+        env.attributes.target = '_blank';
+      }
     }
     if (env.type === 'error-location') {
       let line;
@@ -78,8 +82,10 @@ export function configureRustErrors({
         col = errorMatchFull[2];
       } else {
         const errorMatchShort = /:(\d+)/.exec(env.content);
-        line = errorMatchShort[1];
-        col = '1';
+        if (errorMatchShort) {
+          line = errorMatchShort[1];
+          col = '1';
+        }
       }
       env.tag = 'a';
       env.attributes.href = '#';
@@ -92,10 +98,13 @@ export function configureRustErrors({
       env.attributes['data-suggestion'] = env.content;
     }
     if (env.type === 'feature-gate') {
-      const [_, featureGate] = /feature\((.*?)\)/.exec(env.content);
-      env.tag = 'a';
-      env.attributes.href = '#';
-      env.attributes['data-feature-gate'] = featureGate;
+      const featureMatch = /feature\((.*?)\)/.exec(env.content);
+      if (featureMatch) {
+        const [_, featureGate] = featureMatch;
+        env.tag = 'a';
+        env.attributes.href = '#';
+        env.attributes['data-feature-gate'] = featureGate;
+      }
     }
     if (env.type === 'backtrace-enable') {
       env.tag = 'a';
@@ -104,70 +113,86 @@ export function configureRustErrors({
     }
     if (env.type === 'backtrace-location') {
       const errorMatch = /:(\d+)/.exec(env.content);
-      const [_, line] = errorMatch;
-      env.tag = 'a';
-      env.attributes.href = '#';
-      env.attributes['data-line'] = line;
-      env.attributes['data-col'] = '1';
+      if (errorMatch) {
+        const [_, line] = errorMatch;
+        env.tag = 'a';
+        env.attributes.href = '#';
+        env.attributes['data-line'] = line;
+        env.attributes['data-col'] = '1';
+      }
     }
     if (env.type === 'mir-source') {
       const lineMatch = /(\d+):(\d+): (\d+):(\d+)/.exec(env.content);
-      const [_, startLine, startCol, endLine, endCol] = lineMatch;
-      env.tag = 'a';
-      env.attributes.href = '#';
-      env.attributes['data-start-line'] = startLine;
-      env.attributes['data-start-col'] = startCol;
-      env.attributes['data-end-line'] = endLine;
-      env.attributes['data-end-col'] = endCol;
+      if (lineMatch) {
+        const [_, startLine, startCol, endLine, endCol] = lineMatch;
+        env.tag = 'a';
+        env.attributes.href = '#';
+        env.attributes['data-start-line'] = startLine;
+        env.attributes['data-start-col'] = startCol;
+        env.attributes['data-end-line'] = endLine;
+        env.attributes['data-end-col'] = endCol;
+      }
     }
   });
 
   Prism.hooks.add('after-highlight', env => {
     const links = env.element.querySelectorAll('.error-location, .backtrace-location');
-    Array.from(links).forEach((link: HTMLAnchorElement) => {
-      const { line, col } = link.dataset;
-      link.onclick = e => {
-        e.preventDefault();
-        gotoPosition(line, col);
-      };
+    Array.from(links).forEach(link => {
+      if (link instanceof HTMLAnchorElement) {
+        const { line, col } = link.dataset;
+        link.onclick = e => {
+          e.preventDefault();
+          gotoPosition(line, col);
+        };
+      }
     });
 
     const importSuggestions = env.element.querySelectorAll('.import-suggestion');
-    Array.from(importSuggestions).forEach((link: HTMLAnchorElement) => {
-      const { suggestion } = link.dataset;
-      link.onclick = (e) => {
-        e.preventDefault();
-        addImport(suggestion + '\n');
-      };
+    Array.from(importSuggestions).forEach(link => {
+      if (link instanceof HTMLAnchorElement) {
+        const { suggestion } = link.dataset;
+        link.onclick = (e) => {
+          e.preventDefault();
+          addImport(suggestion + '\n');
+        };
+      }
     });
 
     const featureGateEnablers = env.element.querySelectorAll('.feature-gate');
-    Array.from(featureGateEnablers).forEach((link: HTMLAnchorElement) => {
-      link.onclick = e => {
-        e.preventDefault();
-        enableFeatureGate(link.dataset.featureGate);
-        gotoPosition(1, 1);
-      };
+    Array.from(featureGateEnablers).forEach(link => {
+      if (link instanceof HTMLAnchorElement) {
+        link.onclick = e => {
+          e.preventDefault();
+          enableFeatureGate(link.dataset.featureGate);
+          gotoPosition(1, 1);
+        };
+      }
     });
 
     const backtraceEnablers = env.element.querySelectorAll('.backtrace-enable');
-    Array.from(backtraceEnablers).forEach((link: HTMLAnchorElement) => {
-      link.onclick = e => {
-        e.preventDefault();
-        reExecuteWithBacktrace();
-      };
+    Array.from(backtraceEnablers).forEach(link => {
+      if (link instanceof HTMLAnchorElement) {
+        link.onclick = e => {
+          e.preventDefault();
+          reExecuteWithBacktrace();
+        };
+      }
     });
 
     const mirSourceLinks = env.element.querySelectorAll('.mir-source');
-    Array.from(mirSourceLinks).forEach((link: HTMLAnchorElement) => {
-      const { startLine, startCol, endLine, endCol } = link.dataset;
-      const start = makePosition(startLine, startCol);
-      const end = makePosition(endLine, endCol);
+    Array.from(mirSourceLinks).forEach(link => {
+      if (link instanceof HTMLAnchorElement) {
+        const { startLine, startCol, endLine, endCol } = link.dataset;
+        if (startLine && startCol && endLine && endCol) {
+          const start = makePosition(startLine, startCol);
+          const end = makePosition(endLine, endCol);
 
-      link.onclick = e => {
-        e.preventDefault();
-        selectText(start, end);
-      };
+          link.onclick = e => {
+            e.preventDefault();
+            selectText(start, end);
+          };
+        }
+      }
     });
   });
 }
diff --git a/ui/frontend/package.json b/ui/frontend/package.json
index 64d6665aa..5c07ff858 100644
--- a/ui/frontend/package.json
+++ b/ui/frontend/package.json
@@ -43,6 +43,7 @@
     "@babel/preset-react": "^7.0.0",
     "@types/jest": "^27.0.0",
     "@types/lodash": "^4.14.118",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
diff --git a/ui/frontend/yarn.lock b/ui/frontend/yarn.lock
index 3da6ec6f0..a864c7efe 100644
--- a/ui/frontend/yarn.lock
+++ b/ui/frontend/yarn.lock
@@ -1452,6 +1452,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.1.tgz#76e72d8a775eef7ce649c63c8acae1a0824bbaed"
   integrity sha512-XFjFHmaLVifrAKaZ+EKghFHtHSUonyw8P2Qmy2/+osBnrKbH9UYtlK10zg8/kCt47MFilll/DEDKy3DHfJ0URw==
 
+"@types/prismjs@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"

From 45a7e95bee280997b0d9b89bb47a23175844304f Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Sun, 29 May 2022 21:35:26 -0400
Subject: [PATCH 08/12] Fix TS typing errors in the PopButton component

---
 ui/frontend/PopButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/frontend/PopButton.tsx b/ui/frontend/PopButton.tsx
index 8ab26cf13..7c42f7b85 100644
--- a/ui/frontend/PopButton.tsx
+++ b/ui/frontend/PopButton.tsx
@@ -7,7 +7,7 @@ import styles from './PopButton.module.css';
 interface NewPopProps {
   Button: React.ComponentType<{
     toggle: () => void;
-  } & React.RefAttributes<HTMLElement>>;
+  } & React.RefAttributes<HTMLButtonElement>>;
   Menu: React.ComponentType<{ close: () => void }>;
 }
 
@@ -16,9 +16,9 @@ const PopButton: React.FC<NewPopProps> = ({ Button, Menu }) => {
   const toggle = useCallback(() => setOpen(v => !v), []);
   const close = useCallback(() => setOpen(false), []);
 
-  const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const [arrowElement, setArrowElement] = useState(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
+  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
 
   const { styles: popperStyles, attributes: popperAttributes } = usePopper(referenceElement, popperElement, {
     modifiers: [

From 18e69d75aab18b1ff3e8f7e00493cfc8aa0a837d Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Sun, 29 May 2022 21:37:07 -0400
Subject: [PATCH 09/12] Fix TS typing errors in the Notifications component

---
 ui/frontend/Notifications.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/frontend/Notifications.tsx b/ui/frontend/Notifications.tsx
index 4cc54bf70..ad193c711 100644
--- a/ui/frontend/Notifications.tsx
+++ b/ui/frontend/Notifications.tsx
@@ -27,13 +27,13 @@ const MonacoEditorAvailableNotification: React.FC = () => {
   const dispatch = useDispatch();
   const seenMonicoEditorAvailable = useCallback(() => dispatch(actions.seenMonicoEditorAvailable()), [dispatch]);
 
-  return monicoEditorAvailable && (
+  return monicoEditorAvailable ? (
     <Notification onClose={seenMonicoEditorAvailable}>
       The <a href={MONACO_EDITOR_URL}>Monaco Editor</a>, the code editor
       that powers VS Code, is now available in the playground. Choose
       your preferred editor from the Config menu.
     </Notification>
-  );
+  ) : null;
 };
 
 interface NotificationProps {

From 33828dc02042cbe6ac721082b8f788f736362ca6 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Sun, 29 May 2022 21:38:34 -0400
Subject: [PATCH 10/12] Correct spelling of "Monaco"

---
 ui/frontend/Notifications.tsx  | 8 ++++----
 ui/frontend/actions.ts         | 2 +-
 ui/frontend/selectors/index.ts | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/frontend/Notifications.tsx b/ui/frontend/Notifications.tsx
index ad193c711..d444a65da 100644
--- a/ui/frontend/Notifications.tsx
+++ b/ui/frontend/Notifications.tsx
@@ -22,13 +22,13 @@ const Notifications: React.FC = () => {
 };
 
 const MonacoEditorAvailableNotification: React.FC = () => {
-  const monicoEditorAvailable = useSelector(selectors.showMonicoEditorAvailableSelector);
+  const monacoEditorAvailable = useSelector(selectors.showMonacoEditorAvailableSelector);
 
   const dispatch = useDispatch();
-  const seenMonicoEditorAvailable = useCallback(() => dispatch(actions.seenMonicoEditorAvailable()), [dispatch]);
+  const seenMonacoEditorAvailable = useCallback(() => dispatch(actions.seenMonacoEditorAvailable()), [dispatch]);
 
-  return monicoEditorAvailable ? (
-    <Notification onClose={seenMonicoEditorAvailable}>
+  return monacoEditorAvailable ? (
+    <Notification onClose={seenMonacoEditorAvailable}>
       The <a href={MONACO_EDITOR_URL}>Monaco Editor</a>, the code editor
       that powers VS Code, is now available in the playground. Choose
       your preferred editor from the Config menu.
diff --git a/ui/frontend/actions.ts b/ui/frontend/actions.ts
index 1813edfdb..00c962ed1 100644
--- a/ui/frontend/actions.ts
+++ b/ui/frontend/actions.ts
@@ -705,7 +705,7 @@ export function performVersionsLoad(): ThunkAction {
 const notificationSeen = (notification: Notification) =>
   createAction(ActionType.NotificationSeen, { notification });
 
-export const seenMonicoEditorAvailable = () => notificationSeen(Notification.MonacoEditorAvailable);
+export const seenMonacoEditorAvailable = () => notificationSeen(Notification.MonacoEditorAvailable);
 
 export const browserWidthChanged = (isSmall: boolean) =>
   createAction(ActionType.BrowserWidthChanged, { isSmall });
diff --git a/ui/frontend/selectors/index.ts b/ui/frontend/selectors/index.ts
index ab0b1d046..bc037c15d 100644
--- a/ui/frontend/selectors/index.ts
+++ b/ui/frontend/selectors/index.ts
@@ -252,13 +252,13 @@ const NOW = new Date();
 
 const MONACO_EDITOR_AVAILABLE_END = new Date('2022-02-15T00:00:00Z');
 const MONACO_EDITOR_AVAILABLE_OPEN = NOW <= MONACO_EDITOR_AVAILABLE_END;
-export const showMonicoEditorAvailableSelector = createSelector(
+export const showMonacoEditorAvailableSelector = createSelector(
   notificationsSelector,
   notifications => MONACO_EDITOR_AVAILABLE_OPEN && !notifications.seenMonacoEditorAvailable,
 );
 
 export const anyNotificationsToShowSelector = createSelector(
-  showMonicoEditorAvailableSelector,
+  showMonacoEditorAvailableSelector,
   (...allNotifications) => allNotifications.some(n => n),
 );
 

From 4e2599f9ab91f0f493e70a32e5ac33abe4d1a453 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Mon, 30 May 2022 20:47:01 -0400
Subject: [PATCH 11/12] Fix TS typing errors in the AceEditor component

---
 ui/frontend/.eslintrc.js         |  3 +++
 ui/frontend/editor/AceEditor.tsx | 40 ++++++++++++++++++--------------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/ui/frontend/.eslintrc.js b/ui/frontend/.eslintrc.js
index c2011302c..edeef48e8 100644
--- a/ui/frontend/.eslintrc.js
+++ b/ui/frontend/.eslintrc.js
@@ -22,6 +22,9 @@ module.exports = {
     'no-trailing-spaces': 'error',
     'quotes': ['error', 'single'],
 
+    '@typescript-eslint/ban-ts-comment': ['error', {
+      'ts-ignore': 'allow-with-description',
+    }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/indent': ['error', 2],
     '@typescript-eslint/no-explicit-any': 'off',
diff --git a/ui/frontend/editor/AceEditor.tsx b/ui/frontend/editor/AceEditor.tsx
index f6229b060..eab3aa459 100644
--- a/ui/frontend/editor/AceEditor.tsx
+++ b/ui/frontend/editor/AceEditor.tsx
@@ -3,13 +3,14 @@ import { connect } from 'react-redux';
 import { aceResizeKey, offerCrateAutocompleteOnUse } from '../selectors';
 
 import State from '../state';
-import { AceResizeKey, CommonEditorProps, Crate, PairCharacters, Position, Selection } from '../types';
+import { AceResizeKey, Crate, PairCharacters, Position, Selection } from '../types';
 
 import styles from './Editor.module.css';
 
 type Ace = typeof import('ace-builds');
 type AceModule = import('ace-builds').Ace.Editor;
 type AceCompleter = import('ace-builds').Ace.Completer;
+type AceCompletion = import('ace-builds').Ace.Completion;
 
 const displayExternCrateAutocomplete = (editor: AceModule, autocompleteOnUse: boolean) => {
   const { session } = editor;
@@ -23,7 +24,7 @@ const displayExternCrateAutocomplete = (editor: AceModule, autocompleteOnUse: bo
 
 const buildCrateAutocompleter = (autocompleteOnUse: boolean, crates: Crate[]): AceCompleter => ({
   getCompletions: (editor, _session, _pos, _prefix, callback) => {
-    let suggestions = [];
+    let suggestions: AceCompletion[] = [];
 
     if (displayExternCrateAutocomplete(editor, autocompleteOnUse)) {
       const len = crates.length;
@@ -64,7 +65,7 @@ interface AceEditorProps {
   autocompleteOnUse: boolean;
   code: string;
   execute: () => any;
-  keybinding?: string;
+  keybinding: string;
   onEditCode: (_: string) => any;
   position: Position;
   selection: Selection;
@@ -75,7 +76,7 @@ interface AceEditorProps {
 }
 
 // Run an effect when the editor or prop changes
-function useEditorProp<T>(editor: AceModule, prop: T, whenPresent: (editor: AceModule, prop: T) => void) {
+function useEditorProp<T>(editor: AceModule | null, prop: T, whenPresent: (editor: AceModule, prop: T) => void) {
   useEffect(() => {
     if (editor) {
       return whenPresent(editor, prop);
@@ -84,7 +85,7 @@ function useEditorProp<T>(editor: AceModule, prop: T, whenPresent: (editor: AceM
 }
 
 const AceEditor: React.FC<AceEditorProps> = props => {
-  const [editor, setEditor] = useState<AceModule>(null);
+  const [editor, setEditor] = useState<AceModule | null>(null);
   const child = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -184,7 +185,7 @@ const AceEditor: React.FC<AceEditorProps> = props => {
   // 4. When all else fails, we ignore the prop if the value to set is
   //    what Ace already has.
   const doingSetProp = useRef(false);
-  const previouslyNotified = useRef([]);
+  const previouslyNotified = useRef<string[]>([]);
   const onEditCodeDebounced = useRafDebouncedFunction(
     props.onEditCode,
     useCallback(code => previouslyNotified.current.push(code), [previouslyNotified]),
@@ -234,8 +235,9 @@ const AceEditor: React.FC<AceEditorProps> = props => {
   }), [props.keybinding, props.ace]);
 
   useEditorProp(editor, keybindingProps, useCallback((editor, { keybinding, ace }) => {
-    const handler = keybinding ? `ace/keyboard/${keybinding}` : null;
-    editor.setKeyboardHandler(handler);
+    const handler = keybinding === 'ace' ? null : `ace/keyboard/${keybinding}`;
+    // @ts-ignore https://github.com/ajaxorg/ace/issues/4801
+    editor.setOption('keyboardHandler', handler);
 
     if (keybinding === 'vim') {
       const { CodeMirror: { Vim } } = ace.require('ace/keyboard/vim');
@@ -319,7 +321,7 @@ interface AceEditorAsyncProps {
   autocompleteOnUse: boolean;
   code: string;
   execute: () => any;
-  keybinding?: string;
+  keybinding: string;
   onEditCode: (_: string) => any;
   position: Position;
   selection: Selection;
@@ -342,7 +344,11 @@ class AceEditorAsync extends React.Component<AceEditorAsyncProps, AceEditorAsync
   public render() {
     if (this.isLoaded()) {
       const { ace, theme, keybinding } = this.state;
-      return <AceEditor {...this.props} ace={ace} theme={theme} keybinding={keybinding} />;
+      if (ace && theme && keybinding) {
+        return <AceEditor {...this.props} ace={ace} theme={theme} keybinding={keybinding} />;
+      } else {
+        return <div>Internal error while loading the ACE editor</div>;
+      }
     } else {
       return <div>Loading the ACE editor...</div>;
     }
@@ -395,7 +401,7 @@ class AceEditorAsync extends React.Component<AceEditorAsyncProps, AceEditorAsync
   }
 
   private isKeybindingBuiltin() {
-    return this.props.keybinding === null;
+    return this.props.keybinding === 'ace';
   }
 
   private isKeybindingLoadNeeded() {
@@ -404,8 +410,6 @@ class AceEditorAsync extends React.Component<AceEditorAsyncProps, AceEditorAsync
   }
 
   private async loadKeybinding() {
-    if (!this.isKeybindingLoadNeeded()) { return; }
-
     const { keybinding } = this.props;
 
     if (this.isKeybindingBuiltin()) {
@@ -413,6 +417,8 @@ class AceEditorAsync extends React.Component<AceEditorAsyncProps, AceEditorAsync
       return;
     }
 
+    if (!this.isKeybindingLoadNeeded()) { return; }
+
     this.setState({ keybindingState: LoadState.Loading });
 
     await this.requireLibraries();
@@ -465,22 +471,22 @@ interface AceEditorAsyncState {
 
 interface PropsFromState {
   theme: string;
-  keybinding?: string;
+  keybinding: string;
   resizeKey?: AceResizeKey;
   autocompleteOnUse: boolean;
   pairCharacters: PairCharacters;
 }
 
-const mapStateToProps = (state: State) => {
+const mapStateToProps = (state: State): PropsFromState => {
   const { configuration: { ace: { theme, keybinding, pairCharacters } } } = state;
 
   return {
     theme,
     pairCharacters,
-    keybinding: keybinding === 'ace' ? null : keybinding,
+    keybinding,
     resizeKey: aceResizeKey(state),
     autocompleteOnUse: offerCrateAutocompleteOnUse(state),
   };
 };
 
-export default connect<PropsFromState, undefined, CommonEditorProps>(mapStateToProps)(AceEditorAsync);
+export default connect(mapStateToProps)(AceEditorAsync);

From e3c8669951a2948380b84579760bacd958f9db75 Mon Sep 17 00:00:00 2001
From: Jake Goulding <jake.goulding@integer32.com>
Date: Tue, 7 Jun 2022 11:59:44 -0400
Subject: [PATCH 12/12] Upgrade history to 5.3

---
 ui/frontend/package.json        |  2 +-
 ui/frontend/uss-router/index.ts |  6 ++---
 ui/frontend/yarn.lock           | 39 ++++++---------------------------
 3 files changed, 11 insertions(+), 36 deletions(-)

diff --git a/ui/frontend/package.json b/ui/frontend/package.json
index 5c07ff858..ecf903465 100644
--- a/ui/frontend/package.json
+++ b/ui/frontend/package.json
@@ -11,7 +11,7 @@
     "ace-builds": "^1.4.4",
     "common-tags": "^1.8.0",
     "core-js": "^3.1.3",
-    "history": "^4.6.0",
+    "history": "^5.3.0",
     "isomorphic-fetch": "^3.0.0",
     "lodash": "^4.17.0",
     "monaco-editor": "^0.33.0",
diff --git a/ui/frontend/uss-router/index.ts b/ui/frontend/uss-router/index.ts
index a9a3f8a74..334477477 100644
--- a/ui/frontend/uss-router/index.ts
+++ b/ui/frontend/uss-router/index.ts
@@ -38,9 +38,9 @@ export function createRouter({
   };
 
   // Watch changes to the browser state
-  history.listen((nextLocation, historyAction) => {
-    if (historyAction === 'POP') {
-      dispatchBrowserLocationChange(nextLocation);
+  history.listen(({ action, location }) => {
+    if (action === 'POP') {
+      dispatchBrowserLocationChange(location);
     }
   });
 
diff --git a/ui/frontend/yarn.lock b/ui/frontend/yarn.lock
index a864c7efe..e20bd5114 100644
--- a/ui/frontend/yarn.lock
+++ b/ui/frontend/yarn.lock
@@ -929,7 +929,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.16.7"
     "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
   integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
@@ -3277,17 +3277,12 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-history@^4.6.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
-  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+history@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
   dependencies:
-    "@babel/runtime" "^7.1.2"
-    loose-envify "^1.2.0"
-    resolve-pathname "^3.0.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-    value-equal "^1.0.1"
+    "@babel/runtime" "^7.7.6"
 
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
@@ -4286,7 +4281,7 @@ lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5346,11 +5341,6 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve-pathname@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
-  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -6023,16 +6013,6 @@ throttle-debounce@^2.1.0:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
   integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
 
-tiny-invariant@^1.0.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
-  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
-
-tiny-warning@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -6284,11 +6264,6 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-value-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
-  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
 walker@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"