Last round of lint fixes

cypress/support/e2e.ts

@@ -17,7 +17,7 @@
 import './commands';
 
 // Handle uncaught exceptions
-Cypress.on('uncaught:exception', (err, runnable) => {
+Cypress.on('uncaught:exception', (err) => {
   // TODO: Ignore transient network errors until either browser caching
   // or js fixtures are supported
   // https://github.com/cypress-io/cypress/issues/18335

src/App.tsx

@@ -4,6 +4,7 @@ import { useGoogleAnalytics } from './playground-ui/GoogleAnalyticsHook';
 import PlaygroundUIThemed from './playground-ui/PlaygroundUIThemed';
 import 'react-reflex/styles.css';
 import { BrowserRouter } from 'react-router-dom';
+import { type ReactNode } from 'react';
 import 'typeface-roboto-mono/index.css'; // Import the Roboto Mono font.
 import './App.css';
 import { EmbeddedPlayground } from './components/EmbeddedPlayground';
@@ -13,11 +14,6 @@ import AppConfig from './services/configservice';
 import { PLAYGROUND_UI_COLORS } from './theme';
 
 export interface AppProps {
-  /**
-   * withRouter, it specified, is the router to wrap the application with.
-   */
-  withRouter?: any;
-
   /**
    * forTesting indicates whether the app is for testing.
    */
@@ -29,7 +25,7 @@ function ForTesting() {
 }
 
 function ThemedApp(props: {
-  withRouter?: any;
+  withRouter?: () => ReactNode;
   forTesting: boolean | undefined;
 }) {
   if (window.location.pathname.indexOf('/i/') >= 0) {
@@ -55,7 +51,12 @@ function ThemedApp(props: {
         <ForTesting />
     );
   } else {
-    return <FullPlayground withRouter={props.withRouter} />;
+    return (
+        // @ts-expect-error RRv5 types are jank
+      <BrowserRouter>
+<FullPlayground />
+</BrowserRouter>
+    );
   }
 }
 
@@ -72,7 +73,6 @@ function App(props: AppProps) {
       <AlertProvider>
         <ConfirmDialogProvider>
           <ThemedApp
-            withRouter={props.withRouter}
             forTesting={props.forTesting}
           />
         </ConfirmDialogProvider>

src/components/FullPlayground.tsx

@@ -12,7 +12,6 @@ import { useZedTerminalService } from '../spicedb-common/services/zedterminalser
 import { parseValidationYAML } from '../spicedb-common/validationfileformat';
 import { LinearProgress, Tab, Tabs, Tooltip } from '@material-ui/core';
 import AppBar from '@material-ui/core/AppBar';
-import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
 import TextField from '@material-ui/core/TextField';
@@ -41,7 +40,7 @@ import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import clsx from 'clsx';
 import { saveAs } from 'file-saver';
 import { fileDialog } from 'file-select-dialog';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import { useCookies } from 'react-cookie';
 import 'react-reflex/styles.css';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -90,13 +89,6 @@ import { ValidationPanel, ValidationSummary } from './panels/validation';
 import { VisualizerPanel, VisualizerSummary } from './panels/visualizer';
 import { WatchesPanel, WatchesSummary } from './panels/watches';
 
-export interface AppProps {
-  /**
-   * withRouter, it specified, is the router to wrap the application with.
-   */
-  withRouter?: any;
-}
-
 const TOOLBAR_BREAKPOINT = 1550; // pixels
 
 interface StyleProps {
@@ -361,29 +353,26 @@ interface SharingState {
   shareReference?: string;
 }
 
-export function FullPlayground(props: { withRouter?: any }) {
+export function FullPlayground() {
   return  <>
       <DiscordChatCrate
         serverId={AppConfig().discord.serverId}
         channelId={AppConfig().discord.channelId}
       />
-      <ApolloedPlayground withRouter={props.withRouter} />
+      <ApolloedPlayground />
     </>
 }
 
-function ApolloedPlayground(props: { withRouter?: any }) {
+function ApolloedPlayground() {
   const datastore = usePlaygroundDatastore();
-  const Router = props.withRouter ? props.withRouter : Box;
   return (
-    <Router>
       <ShareLoader
         datastore={datastore}
         shareUrlRoot="s"
         sharedRequired={false}
       >
         <ThemedAppView key="app" datastore={datastore} />
       </ShareLoader>
-    </Router>
   );
 }
 
@@ -615,7 +604,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
 
     setPreviousValidationForDiff(undefined);
     validationService.conductValidation(
-      (validated: boolean, result: ValidationResult) => {
+      (_validated: boolean, result: ValidationResult) => {
         if (result.updatedValidationYaml) {
           const updatedYaml = normalizeValidationYAML(
             result.updatedValidationYaml
@@ -670,7 +659,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
   const validationState = validationService.state;
 
   const handleChangeTab = (
-    event: React.ChangeEvent<{}>,
+    _event: React.ChangeEvent<HTMLElement>,
     selectedTabValue: string
   ) => {
     const item = datastore.getById(selectedTabValue)!;
@@ -702,8 +691,8 @@ export function ThemedAppView(props: { datastore: DataStore }) {
       return cookieService.relationshipsEditorType;
     });
   const handleChangeRelationshipEditor = (
-    event: React.MouseEvent<HTMLElement, MouseEvent>,
-    value: any
+    _event: React.MouseEvent<HTMLElement, MouseEvent>,
+    value: unknown
   ) => {
     const type = value ? value.toString() : 'grid';
     if (
@@ -713,8 +702,10 @@ export function ThemedAppView(props: { datastore: DataStore }) {
       return;
     }
 
-    cookieService.setRelationshipsEditorType(type);
-    setRelationshipEditor(type);
+    if (type === 'grid' || type === 'code') {
+        cookieService.setRelationshipsEditorType(type);
+        setRelationshipEditor(type);
+    }
   };
 
   const appConfig = AppConfig();
@@ -1081,7 +1072,7 @@ export function ThemedAppView(props: { datastore: DataStore }) {
 const TabLabelWithCount = (props: {
   problemService: ProblemService;
   kind: DataStoreItemKind;
-  icon: React.ReactChild;
+  icon: ReactNode;
   title: string;
 }) => {
   const classes = useSummaryStyles();
@@ -1262,7 +1253,7 @@ const getFileContentsAsText = async (file: File): Promise<string> => {
   return new Promise(
     (
       resolve: (value: string | PromiseLike<string>) => void,
-      reject: (reason?: any) => void
+      reject: () => void
     ) => {
       const reader = new FileReader();
       reader.onloadend = function (e: ProgressEvent<FileReader>) {

src/components/GuidedTour.tsx

@@ -1,8 +1,5 @@
 import { Theme, useTheme } from '@material-ui/core/styles';
-import React from 'react';
-import Joyride, { ACTIONS, EVENTS, Step } from 'react-joyride';
-
-const _ = React;
+import Joyride, { ACTIONS, EVENTS, type Step } from 'react-joyride';
 
 export const TourElementClass = {
   schema: 'tec-schema',
@@ -92,11 +89,10 @@ const handleEvents = (
     index: number;
     size: number;
     type: string;
-    step: any;
+    step: Step;
   }) => {
-    const { action, index, size, type, step } = data;
+    const { action, type, step } = data;
 
-    const properties = { Step: step.title, StepIndex: index, StepsCount: size };
     // Tour start
     if (ACTIONS.START === action && EVENTS.TOUR_START === type) {
       // No-op
@@ -107,7 +103,9 @@ const handleEvents = (
     }
     // Tour before step
     if (ACTIONS.NEXT === action && EVENTS.STEP_BEFORE === type) {
-      onEnterStep(step.target);
+        if (typeof step.target === "string") {
+            onEnterStep(step.target);
+        }
     }
     // Tour step
     if (ACTIONS.UPDATE === action && EVENTS.TOOLTIP === type) {

src/components/InlinePlayground.tsx

@@ -118,7 +118,7 @@ function InlinePlaygroundUI(props: { datastore: DataStore }) {
   );
 
   const handleChangeTab = (
-    event: React.ChangeEvent<{}>,
+    _event: React.ChangeEvent<HTMLElement>,
     selectedTabName: string
   ) => {
     setCurrentTabName(selectedTabName);

src/components/KindIcons.tsx

@@ -1,15 +1,14 @@
 import { faDatabase } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import WarningIcon from '@material-ui/icons/Warning';
-import React from 'react';
 import 'react-reflex/styles.css';
 
 interface StyleProps {
     small?: boolean
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
     createStyles({
         ns: {
             fontFamily: 'Roboto Mono, monospace',

src/components/ValidationButton.tsx

@@ -7,14 +7,11 @@ import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 import ErrorIcon from '@material-ui/icons/Error';
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
 import clsx from 'clsx';
-import React from 'react';
 import 'react-reflex/styles.css';
 import { DataStore } from '../services/datastore';
 import { ValidationState, ValidationStatus } from '../services/validation';
 import { TourElementClass } from './GuidedTour';
 
-const _ = React;
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     gcm: {

src/components/panels/base/components.tsx

@@ -8,7 +8,7 @@ import Tabs from '@material-ui/core/Tabs';
 import Toolbar from '@material-ui/core/Toolbar';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
-import React, { useCallback } from 'react';
+import { useCallback, type ReactNode } from 'react';
 import { DataStore } from '../../../services/datastore';
 import { Services } from '../../../services/services';
 import { Panel, useSummaryStyles } from './common';
@@ -24,7 +24,7 @@ export function PanelSummaryBar<L extends string>(props: {
   coordinator: PanelsCoordinator<L>;
   services: Services;
   disabled?: boolean | undefined;
-  overrideSummaryDisplay?: React.ReactChild;
+  overrideSummaryDisplay?: ReactNode;
 }) {
   const classes = useSummaryStyles();
 
@@ -40,7 +40,7 @@ export function PanelSummaryBar<L extends string>(props: {
         className={classes.summaryBar}
         style={{
           gridTemplateColumns: `${panels
-            .map((panel: Panel<L>) => 'auto')
+            .map(() => 'auto')
             .join(' ')} 1fr auto`,
         }}
         variant="dense"
@@ -132,7 +132,7 @@ export function PanelDisplay<L extends string>(
   const currentTabName = coordinator.getActivePanel(props.location)?.id || '';
 
   const handleChangeTab = useCallback(
-    (event: React.ChangeEvent<{}>, selectedPanelId: string) => {
+    (_event: React.ChangeEvent<HTMLElement>, selectedPanelId: string) => {
       coordinator.setActivePanel(selectedPanelId, props.location);
     },
     [coordinator, props.location]

src/components/panels/base/coordinator.tsx

@@ -165,6 +165,7 @@ export function usePanelsCoordinator<L extends string>(props: PanelCoordinatorPr
             }
         } catch (e) {
             // Do nothing.
+            console.error(e)
         }
 
         const locations: Record<string, L> = {};
@@ -333,4 +334,4 @@ export function usePanelsCoordinator<L extends string>(props: PanelCoordinatorPr
         isDisplayVisible: isDisplayVisible,
         listLocations: listLocations,
     };
-}
+}

src/components/panels/base/reflexed.tsx

@@ -1,7 +1,7 @@
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
 import HorizontalSplitIcon from "@material-ui/icons/HorizontalSplit";
 import VerticalSplitIcon from "@material-ui/icons/VerticalSplit";
-import React, { PropsWithChildren, useEffect, useState } from "react";
+import { PropsWithChildren, useEffect, useState, Children, isValidElement, cloneElement, type ReactNode } from "react";
 import {
   HandlerProps,
   ReflexContainer,
@@ -31,7 +31,7 @@ const MINIMUM_VERTICAL_FLEX = 0.2;
 const MINIMUM_HORIZONTAL_SIZE = 200;
 const MINIMUM_VERTICAL_SIZE = 200;
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     noOverflow: {
       overflow: "hidden !important",
@@ -53,7 +53,7 @@ interface PanelDefProps<E> {
   panels: Panel<ReflexedPanelLocation>[];
   extraProps?: E | undefined;
   disabled?: boolean | undefined;
-  overrideSummaryDisplay?: React.ReactChild;
+  overrideSummaryDisplay?: ReactNode;
 }
 
 interface Dimensions {
@@ -263,14 +263,14 @@ function MainDisplayAndVertical<E>(
     ? { width: props.dimensions.width, height: contentHeight }
     : undefined;
 
-  const adjustedChildren = React.Children.map(props.children, (child) => {
+  const adjustedChildren = Children.map(props.children, (child) => {
     // Based on: https://stackoverflow.com/a/55486160
-    if (!React.isValidElement<EnrichedChildren>(child)) {
+    if (!isValidElement<EnrichedChildren>(child)) {
       return child;
     }
 
     const elementChild: React.ReactElement<EnrichedChildren> = child;
-    return React.cloneElement(
+    return cloneElement(
       elementChild,
       { dimensions: contentDimensions, ...child.props },
       null