Merge branch 'add-react-linter-rules'

4 files changed, 9 insertions, 8 deletions

diff --git a/gui/src/renderer/components/main-view/ConnectionActionButton.tsx b/gui/src/renderer/components/main-view/ConnectionActionButton.tsx
index ad579da671..437fa93321 100644
--- a/gui/src/renderer/components/main-view/ConnectionActionButton.tsx
+++ b/gui/src/renderer/components/main-view/ConnectionActionButton.tsx
@@ -31,7 +31,7 @@ function ConnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) {
       const error = e as Error;
       log.error(`Failed to connect the tunnel: ${error.message}`);
     }
-  }, []);
+  }, [connectTunnel]);
 
   return (
     <StyledConnectionButton color={SmallButtonColor.green} onClick={onConnect} {...props}>
@@ -51,7 +51,7 @@ function DisconnectButton() {
       const error = e as Error;
       log.error(`Failed to disconnect the tunnel: ${error.message}`);
     }
-  }, []);
+  }, [disconnectTunnel]);
 
   const displayAsCancel = tunnelState !== 'connected';
 
diff --git a/gui/src/renderer/components/main-view/ConnectionPanel.tsx b/gui/src/renderer/components/main-view/ConnectionPanel.tsx
index 5b4e576f76..34e98abeea 100644
--- a/gui/src/renderer/components/main-view/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/main-view/ConnectionPanel.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { useBoolean } from '../../lib/utilityHooks';
+import { useBoolean } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
 import CustomScrollbars from '../CustomScrollbars';
 import { BackAction } from '../KeyboardNavigation';
diff --git a/gui/src/renderer/components/main-view/FeatureIndicators.tsx b/gui/src/renderer/components/main-view/FeatureIndicators.tsx
index 2d7914fd87..5b7e60ade0 100644
--- a/gui/src/renderer/components/main-view/FeatureIndicators.tsx
+++ b/gui/src/renderer/components/main-view/FeatureIndicators.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { colors, strings } from '../../../config.json';
 import { FeatureIndicator } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { useStyledRef } from '../../lib/utilityHooks';
+import { useStyledRef } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
 import { InfoIcon } from '../InfoButton';
@@ -169,6 +169,7 @@ export default function FeatureIndicators(props: FeatureIndicatorsProps) {
 
           // Place the ellipsis at the end of the last visible indicator.
           const left = lastVisibleIndicatorRect.right - containerRect.left;
+          // eslint-disable-next-line react-compiler/react-compiler
           ellipsisRef.current.style.left = `${left}px`;
           ellipsisRef.current.style.visibility = 'visible';
 
diff --git a/gui/src/renderer/components/main-view/SelectLocationButton.tsx b/gui/src/renderer/components/main-view/SelectLocationButton.tsx
index 30b132a84e..50508a3192 100644
--- a/gui/src/renderer/components/main-view/SelectLocationButton.tsx
+++ b/gui/src/renderer/components/main-view/SelectLocationButton.tsx
@@ -33,7 +33,7 @@ export default function SelectLocationButtons() {
 }
 
 function SelectLocationButton(props: MultiButtonCompatibleProps) {
-  const history = useHistory();
+  const { push } = useHistory();
 
   const tunnelState = useSelector((state) => state.connection.status.state);
   const relaySettings = useSelector((state) => state.settings.relaySettings);
@@ -46,8 +46,8 @@ function SelectLocationButton(props: MultiButtonCompatibleProps) {
   );
 
   const onSelectLocation = useCallback(() => {
-    history.push(RoutePath.selectLocation, { transition: transitions.show });
-  }, [history.push]);
+    push(RoutePath.selectLocation, { transition: transitions.show });
+  }, [push]);
 
   return (
     <StyledSmallButton
@@ -129,7 +129,7 @@ function ReconnectButton(props: MultiButtonCompatibleProps) {
       const error = e as Error;
       log.error(`Failed to reconnect the tunnel: ${error.message}`);
     }
-  }, []);
+  }, [reconnectTunnel]);
 
   return (
     <StyledReconnectButton