refactor(frontend): fix React warnings

15 files changed, 41 insertions, 87 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index d2774f34..acff57db 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -51,7 +51,7 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@mui/system": "^5.16.0",
-    "@mui/x-data-grid": "^7.8.0",
+    "@mui/x-data-grid": "^7.9.0",
     "ansi-styles": "^6.2.1",
     "csstype": "^3.1.3",
     "d3": "^7.9.0",
@@ -88,7 +88,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.9",
     "@types/ms": "^0.7.34",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/pnpapi": "^0.0.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/subprojects/frontend/src/DirectionalSplitPane.tsx b/subprojects/frontend/src/DirectionalSplitPane.tsx
index 110bb202..22959e14 100644
--- a/subprojects/frontend/src/DirectionalSplitPane.tsx
+++ b/subprojects/frontend/src/DirectionalSplitPane.tsx
@@ -151,8 +151,3 @@ export default function DirectionalSplitPane({
     </Stack>
   );
 }
-
-DirectionalSplitPane.defaultProps = {
-  primaryOnly: false,
-  secondaryOnly: false,
-};
diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
index 7c759c36..0c265709 100644
--- a/subprojects/frontend/src/PaneButtons.tsx
+++ b/subprojects/frontend/src/PaneButtons.tsx
@@ -92,7 +92,7 @@ function PaneButtons({
   return (
     <PaneButtonGroup
       size={hideLabel ? 'small' : 'medium'}
-      hideLabel={hideLabel ?? PaneButtons.defaultProps.hideLabel}
+      hideLabel={hideLabel ?? false}
     >
       <ToggleButton
         value="code"
@@ -140,8 +140,4 @@ function PaneButtons({
   );
 }
 
-PaneButtons.defaultProps = {
-  hideLabel: false,
-};
-
 export default observer(PaneButtons);
diff --git a/subprojects/frontend/src/RootStoreProvider.tsx b/subprojects/frontend/src/RootStoreProvider.tsx
index 7cb89af1..40114340 100644
--- a/subprojects/frontend/src/RootStoreProvider.tsx
+++ b/subprojects/frontend/src/RootStoreProvider.tsx
@@ -29,7 +29,3 @@ export default function RootStoreProvider({
     <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
   );
 }
-
-RootStoreProvider.defaultProps = {
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/Tooltip.tsx b/subprojects/frontend/src/Tooltip.tsx
new file mode 100644
index 00000000..b793f1d2
--- /dev/null
+++ b/subprojects/frontend/src/Tooltip.tsx
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import MuiTooltip, { TooltipProps } from '@mui/material/Tooltip';
+
+export default function Tooltip({
+  children,
+  ...props
+}: TooltipProps): JSX.Element {
+  return (
+    <MuiTooltip {...props}>
+      <span className="RefineryTooltip-Container">{children}</span>
+    </MuiTooltip>
+  );
+}
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
index 606aabea..8504779f 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -99,12 +99,3 @@ export default function AnimatedButton({
     </AnimatedButtonBase>
   );
 }
-
-AnimatedButton.defaultProps = {
-  'aria-label': undefined,
-  onClick: undefined,
-  disabled: false,
-  startIcon: undefined,
-  sx: undefined,
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 50cd51dc..0bb5f542 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -22,9 +22,11 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import Tooltip from '@mui/material/Tooltip';
+import MuiTooltip from '@mui/material/Tooltip';
 import { observer } from 'mobx-react-lite';
 
+import Tooltip from '../Tooltip';
+
 import ConnectButton from './ConnectButton';
 import type EditorStore from './EditorStore';
 
@@ -99,7 +101,7 @@ export default observer(function EditorButtons({
         </IconButton>
       </Tooltip>
       <ToggleButtonGroup size="small" className="rounded" sx={{ mx: 1 }}>
-        <Tooltip title="Line numbers">
+        <MuiTooltip title="Line numbers">
           <ToggleButton
             selected={editorStore?.showLineNumbers ?? false}
             disabled={editorStore === undefined}
@@ -108,8 +110,8 @@ export default observer(function EditorButtons({
           >
             <FormatListNumberedIcon fontSize="small" />
           </ToggleButton>
-        </Tooltip>
-        <Tooltip title="Color identifiers">
+        </MuiTooltip>
+        <MuiTooltip title="Color identifiers">
           <ToggleButton
             selected={editorStore?.colorIdentifiers ?? false}
             disabled={editorStore === undefined}
@@ -118,8 +120,8 @@ export default observer(function EditorButtons({
           >
             <LooksIcon fontSize="small" />
           </ToggleButton>
-        </Tooltip>
-        <Tooltip title="Find and replace">
+        </MuiTooltip>
+        <MuiTooltip title="Find and replace">
           <ToggleButton
             selected={editorStore?.searchPanel?.state ?? false}
             disabled={editorStore === undefined}
@@ -132,8 +134,8 @@ export default observer(function EditorButtons({
           >
             <SearchIcon fontSize="small" />
           </ToggleButton>
-        </Tooltip>
-        <Tooltip title="Diagnostics panel">
+        </MuiTooltip>
+        <MuiTooltip title="Diagnostics panel">
           <ToggleButton
             selected={editorStore?.lintPanel?.state ?? false}
             disabled={editorStore === undefined}
@@ -146,7 +148,7 @@ export default observer(function EditorButtons({
           >
             {getLintIcon(editorStore?.delayedErrors?.highestDiagnosticLevel)}
           </ToggleButton>
-        </Tooltip>
+        </MuiTooltip>
       </ToggleButtonGroup>
       <Tooltip title="Automatic format">
         <IconButton
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index b6b1655a..930cbfdb 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -75,7 +75,7 @@ const GenerateButton = observer(function GenerateButton({
   if (errorCount > 0) {
     diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`);
   }
-  if (!(hideWarnings ?? false) && warningCount > 0) {
+  if (!hideWarnings && warningCount > 0) {
     diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`);
   }
   const summary = diagnostics.join(' and ');
@@ -111,8 +111,4 @@ const GenerateButton = observer(function GenerateButton({
   );
 });
 
-GenerateButton.defaultProps = {
-  hideWarnings: false,
-};
-
 export default GenerateButton;
diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
index 0980ea20..385942e1 100644
--- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -38,10 +38,8 @@ function DotGraphVisualizer({
   animateThreshold?: number;
   setSvgContainer?: (container: HTMLElement | undefined) => void;
 }): JSX.Element {
-  const transitionTimeOrDefault =
-    transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
-  const animateThresholdOrDefault =
-    animateThreshold ?? DotGraphVisualizer.defaultProps.animateThreshold;
+  const transitionTimeOrDefault = transitionTime ?? 250;
+  const animateThresholdOrDefault = animateThreshold ?? 100;
   const disposerRef = useRef<IReactionDisposer | undefined>();
   const graphvizRef = useRef<
     Graphviz<BaseType, unknown, null, undefined> | undefined
@@ -163,11 +161,4 @@ function DotGraphVisualizer({
   );
 }
 
-DotGraphVisualizer.defaultProps = {
-  fitZoom: undefined,
-  transitionTime: 250,
-  animateThreshold: 100,
-  setSvgContainer: undefined,
-};
-
 export default observer(DotGraphVisualizer);
diff --git a/subprojects/frontend/src/graph/RelationName.tsx b/subprojects/frontend/src/graph/RelationName.tsx
index e651cb87..5ae08a20 100644
--- a/subprojects/frontend/src/graph/RelationName.tsx
+++ b/subprojects/frontend/src/graph/RelationName.tsx
@@ -49,7 +49,7 @@ function RelationName({
   abbreviate?: boolean;
 }): JSX.Element {
   const { name, simpleName } = metadata;
-  if (abbreviate ?? RelationName.defaultProps.abbreviate) {
+  if (abbreviate) {
     return <FormattedName name={simpleName} metadata={metadata} />;
   }
   if (name.endsWith(simpleName)) {
@@ -65,8 +65,4 @@ function RelationName({
   return <FormattedName name={name} metadata={metadata} />;
 }
 
-RelationName.defaultProps = {
-  abbreviate: false,
-};
-
 export default observer(RelationName);
diff --git a/subprojects/frontend/src/graph/SlideInDialog.tsx b/subprojects/frontend/src/graph/SlideInDialog.tsx
index d9060fb0..318b0c0f 100644
--- a/subprojects/frontend/src/graph/SlideInDialog.tsx
+++ b/subprojects/frontend/src/graph/SlideInDialog.tsx
@@ -77,7 +77,7 @@ export default function SlideInDialog({
 
   return (
     <SlideInDialogRoot
-      dialog={dialog ?? SlideInDialog.defaultProps.dialog}
+      dialog={dialog ?? false}
       aria-labelledby={dialog ? titleId : undefined}
     >
       {dialog && (
@@ -102,8 +102,3 @@ export default function SlideInDialog({
     </SlideInDialogRoot>
   );
 }
-
-SlideInDialog.defaultProps = {
-  dialog: false,
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/graph/SlideInPanel.tsx b/subprojects/frontend/src/graph/SlideInPanel.tsx
index 47bbe0a6..13fdce17 100644
--- a/subprojects/frontend/src/graph/SlideInPanel.tsx
+++ b/subprojects/frontend/src/graph/SlideInPanel.tsx
@@ -96,7 +96,3 @@ export default function SlideInPanel({
     </SlideInPanelRoot>
   );
 }
-
-SlideInPanel.defaultProps = {
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx
index 619113ef..1cd58769 100644
--- a/subprojects/frontend/src/graph/VisibilityPanel.tsx
+++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx
@@ -16,11 +16,12 @@ import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
-import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 
+import Tooltip from '../Tooltip';
+
 import type GraphStore from './GraphStore';
 import { isVisibilityAllowed } from './GraphStore';
 import RelationName from './RelationName';
diff --git a/subprojects/frontend/src/graph/ZoomCanvas.tsx b/subprojects/frontend/src/graph/ZoomCanvas.tsx
index 07e44a12..57e754f5 100644
--- a/subprojects/frontend/src/graph/ZoomCanvas.tsx
+++ b/subprojects/frontend/src/graph/ZoomCanvas.tsx
@@ -55,9 +55,8 @@ export default function ZoomCanvas({
   fitPadding?: number;
   transitionTime?: number;
 }): JSX.Element {
-  const fitPaddingOrDefault = fitPadding ?? ZoomCanvas.defaultProps.fitPadding;
-  const transitionTimeOrDefault =
-    transitionTime ?? ZoomCanvas.defaultProps.transitionTime;
+  const fitPaddingOrDefault = fitPadding ?? 8;
+  const transitionTimeOrDefault = transitionTime ?? 250;
 
   const canvasRef = useRef<HTMLDivElement | undefined>();
   const elementRef = useRef<HTMLDivElement | undefined>();
@@ -235,9 +234,3 @@ export default function ZoomCanvas({
     </Box>
   );
 }
-
-ZoomCanvas.defaultProps = {
-  children: undefined,
-  fitPadding: 8,
-  transitionTime: 250,
-};
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 1d70dbaf..b8d5ba8d 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -385,10 +385,6 @@ function ThemeAndContrastThemeProvider({
   );
 }
 
-ThemeAndContrastThemeProvider.defaultProps = {
-  children: undefined,
-};
-
 export function ContrastThemeProvider({
   children,
 }: {
@@ -405,10 +401,6 @@ export function ContrastThemeProvider({
   );
 }
 
-ContrastThemeProvider.defaultProps = {
-  children: undefined,
-};
-
 const ThemeProvider = observer(function ThemeProvider({
   children,
 }: {
@@ -428,8 +420,4 @@ const ThemeProvider = observer(function ThemeProvider({
   );
 });
 
-ThemeProvider.defaultProps = {
-  children: undefined,
-};
-
 export default ThemeProvider;