Merge pull request #1135 from rust-lang/maint

Maintenance

Author: shepmaster

tests/.gitignore

@@ -1 +1,2 @@
 screenshots/
+test-failures/

ui/frontend/ButtonMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import MenuItem from './MenuItem';
 

ui/frontend/ButtonSet.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import Link, { LinkProps } from './uss-router/Link';
 

ui/frontend/ConfigElement.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import MenuItem from './MenuItem';
 

ui/frontend/Header.tsx

@@ -70,7 +70,7 @@ const Header: React.FC = () => {
 };
 
 interface PortalProps {
-  menuContainer: RefObject<HTMLDivElement>;
+  menuContainer: RefObject<HTMLDivElement | null>;
 }
 
 const ExecuteButton: React.FC = () => {

ui/frontend/Output/Gist.module.css

@@ -1,12 +1,12 @@
-$copied-duration: 1s ease-in-out;
-
 .container {
   display: flex;
+
+  --copied-duration: 1s ease-in-out;
 }
 
 .button {
   composes: -buttonReset from '../shared.module.css';
-  transition: color $copied-duration;
+  transition: color var(--copied-duration);
   cursor: pointer;
   margin: 0 0.25em 0 0.5em;
 }
@@ -15,9 +15,9 @@ $copied-duration: 1s ease-in-out;
   visibility: hidden;
   opacity: 0;
   transition:
-    visibility $copied-duration,
-    opacity $copied-duration,
-    color $copied-duration;
+    visibility var(--copied-duration),
+    opacity var(--copied-duration),
+    color var(--copied-duration);
 }
 
 .active {

ui/frontend/Output/Gist.tsx

@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import React, { Fragment, useCallback, useState } from 'react';
 
 import { ClipboardIcon } from '../Icon';
 import * as selectors from '../selectors';
@@ -34,33 +33,27 @@ interface CopiedProps {
   href: string;
 }
 
-interface CopiedState {
-  copied: boolean;
-}
+const Copied: React.FC<CopiedProps> = ({ children, href }) => {
+  const [copied, setCopied] = useState(false);
 
-class Copied extends React.PureComponent<CopiedProps, CopiedState> {
-  public constructor(props: CopiedProps) {
-    super(props);
-    this.state = { copied: false };
-  }
+  const startCopy = useCallback(() => {
+    setCopied(true);
 
-  public render() {
-    return (
-      <p className={this.state.copied ? styles.active : styles.container}>
-        <a href={this.props.href}>{this.props.children}</a>
-        <CopyToClipboard text={this.props.href} onCopy={this.copied}>
-          <button className={styles.button}><ClipboardIcon /></button>
-        </CopyToClipboard>
-        <span className={styles.text}>Copied!</span>
-      </p>
-    );
-  }
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }, []);
 
-  private copied = () => {
-    this.setState({ copied: true });
-    setTimeout(() => { this.setState({ copied: false }); }, 1000);
-  }
-}
+  return (
+    <p className={copied ? styles.active : styles.container}>
+      <a href={href}>{children}</a>
+      <button className={styles.button} onClick={startCopy}>
+        <ClipboardIcon />
+      </button>
+      <span className={styles.text}>Copied!</span>
+    </p>
+  );
+};
 
 const Links: React.FC = () => {
   const codeUrl = useAppSelector(selectors.codeUrlSelector);

ui/frontend/PopButton.tsx

@@ -29,7 +29,7 @@ export interface MenuProps {
 interface NewPopProps {
   Button: React.ComponentType<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
   Menu: React.ComponentType<MenuProps>;
-  menuContainer?: React.RefObject<HTMLDivElement>;
+  menuContainer?: React.RefObject<HTMLDivElement | null>;
 }
 
 const CONTAINER_STYLE: { [key in Placement]?: string } = {

ui/frontend/SelectableMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { CheckmarkIcon } from './Icon';
 import MenuItem from './MenuItem';

ui/frontend/editor/AceEditorCore.tsx

@@ -65,7 +65,7 @@ const buildCrateAutocompleter = (autocompleteOnUse: boolean, crates: Crate[]): A
 });
 
 function useRafDebouncedFunction<A extends unknown[]>(fn: (...args: A) => void, onCall?: (...args: A) => void) {
-  const timeout = useRef<number>();
+  const timeout = useRef<number>(undefined);
 
   return useCallback((...args: A): void => {
     if (timeout.current) {
@@ -159,6 +159,7 @@ const AceEditor: React.FC<AceEditorProps> = props => {
   // open the autocomplete. This should help people understand that
   // there are crates available.
   useEditorProp(editor, autocompleteProps, useCallback((editor, { autocompleteOnUse, crates }) => {
+    // @ts-expect-error https://github.com/ajaxorg/ace/issues/5742
     editor.commands.on('afterExec', ({ editor, command }) => {
       if (!(command.name === 'backspace' || command.name === 'insertstring')) {
         return;
@@ -257,6 +258,7 @@ const AceEditor: React.FC<AceEditorProps> = props => {
     editor.setOption('keyboardHandler', handler);
 
     if (keybinding === 'vim') {
+      // @ts-expect-error https://github.com/ajaxorg/ace/issues/5743
       const { CodeMirror: { Vim } }: VimKeybindings = ace.require('ace/keyboard/vim');
       Vim.defineEx('write', 'w', (cm) => {
         cm.ace.execCommand('executeCode');