chore(gui-client): configure eslint (#9550)

Resolves: #9546

.github/workflows/_tauri.yml

@@ -33,6 +33,14 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+  static-analysis:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: ./.github/actions/setup-node
+      - run: pnpm install
+      - run: pnpm eslint .
+
   build-gui:
     name: build-gui-${{ matrix.runs-on }}
     needs: update-release-draft

rust/gui-client/eslint.config.js

@@ -0,0 +1,14 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import reactplugin from "eslint-plugin-react";
+
+export default tseslint.config({
+  ignores: ["dist/**"],
+  extends: [
+    eslint.configs.recommended,
+    tseslint.configs.strict,
+    reactplugin.configs.flat.recommended,
+  ],
+});

rust/gui-client/package.json

@@ -16,6 +16,7 @@
     "postinstall": "flowbite-react patch"
   },
   "dependencies": {
+    "@eslint/js": "^9.29.0",
     "@fontsource-variable/source-sans-3": "^5.2.8",
     "@heroicons/react": "^2.2.0",
     "@sentry/core": "^9.27.0",
@@ -28,6 +29,8 @@
     "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.5.1",
+    "eslint": "^9.29.0",
+    "eslint-plugin-react": "^7.37.5",
     "flowbite": "^3.1.2",
     "flowbite-react": "^0.11.7",
     "react": "^19.1.0",
@@ -37,6 +40,7 @@
     "tailwindcss": "^4.1.7",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
+    "typescript-eslint": "^8.34.1",
     "vite": "^6.3.4",
     "vite-plugin-typescript": "^1.0.4"
   }

rust/gui-client/src-frontend/components/App.tsx

@@ -30,16 +30,16 @@ import Overview from "./OverviewPage";
 import { GeneralSettingsViewModel } from "../generated/GeneralSettingsViewModel";
 
 export default function App() {
-  let [session, setSession] = useState<SessionViewModel | null>(null);
-  let [logCount, setLogCount] = useState<FileCount | null>(null);
-  let [generalSettings, setGeneralSettings] =
+  const [session, setSession] = useState<SessionViewModel | null>(null);
+  const [logCount, setLogCount] = useState<FileCount | null>(null);
+  const [generalSettings, setGeneralSettings] =
     useState<GeneralSettingsViewModel | null>(null);
-  let [advancedSettings, setAdvancedSettings] =
+  const [advancedSettings, setAdvancedSettings] =
     useState<AdvancedSettingsViewModel | null>(null);
 
   useEffect(() => {
     const sessionChanged = listen<SessionViewModel>("session_changed", (e) => {
-      let session = e.payload;
+      const session = e.payload;
 
       console.log("session_changed", { session });
       setSession(session);
@@ -47,7 +47,7 @@ export default function App() {
     const generalSettingsChangedUnlisten = listen<GeneralSettingsViewModel>(
       "general_settings_changed",
       (e) => {
-        let generalSettings = e.payload;
+        const generalSettings = e.payload;
 
         console.log("general_settings_changed", { settings: generalSettings });
         setGeneralSettings(generalSettings);
@@ -56,7 +56,7 @@ export default function App() {
     const advancedSettingsChangedUnlisten = listen<AdvancedSettingsViewModel>(
       "advanced_settings_changed",
       (e) => {
-        let advancedSettings = e.payload;
+        const advancedSettings = e.payload;
 
         console.log("advanced_settings_changed", {
           settings: advancedSettings,
@@ -65,13 +65,13 @@ export default function App() {
       }
     );
     const logsRecountedUnlisten = listen<FileCount>("logs_recounted", (e) => {
-      let file_count = e.payload;
+      const file_count = e.payload;
 
       console.log("logs_recounted", { file_count });
       setLogCount(file_count);
     });
 
-    invoke<void>("update_state"); // Let the backend know that we (re)-initialised
+    invoke("update_state"); // Let the backend know that we (re)-initialised
 
     return () => {
       sessionChanged.then((unlistenFn) => unlistenFn());
@@ -168,7 +168,7 @@ export default function App() {
                 exportLogs={() => invoke("export_logs")}
                 clearLogs={async () => {
                   await invoke("clear_logs");
-                  let logCount = await invoke<FileCount>("count_logs");
+                  const logCount = await invoke<FileCount>("count_logs");
 
                   setLogCount(logCount);
                 }}

rust/gui-client/src-frontend/components/DiagnosticsPage.tsx

@@ -14,8 +14,8 @@ export default function Diagnostics({
   exportLogs,
   clearLogs,
 }: DiagnosticsPageProps) {
-  let bytes = logCount?.bytes ?? 0;
-  let files = logCount?.files ?? 0;
+  const bytes = logCount?.bytes ?? 0;
+  const files = logCount?.files ?? 0;
 
   const megabytes = Math.round(bytes / 100000) / 10;
 

rust/gui-client/src-frontend/components/ManagedInput.tsx

@@ -8,7 +8,7 @@ import {
 import React, { PropsWithChildren } from "react";
 
 export function ManagedTextInput(props: TextInputProps & { managed: boolean }) {
-  let { managed, ...inputProps } = props;
+  const { managed, ...inputProps } = props;
 
   if (managed) {
     return (
@@ -24,7 +24,7 @@ export function ManagedTextInput(props: TextInputProps & { managed: boolean }) {
 export function ManagedToggleSwitch(
   props: ToggleSwitchProps & { managed: boolean }
 ) {
-  let { managed, ...toggleSwitchProps } = props;
+  const { managed, ...toggleSwitchProps } = props;
 
   if (managed) {
     return (
@@ -38,7 +38,7 @@ export function ManagedToggleSwitch(
 }
 
 function ManagedTooltip(props: PropsWithChildren) {
-  let { children } = props;
+  const { children } = props;
 
   return (
     <Tooltip

rust/gui-client/src-frontend/components/OverviewPage.tsx

@@ -33,8 +33,8 @@ function Session(props: OverviewPageProps) {
     case "Loading": {
       return <Loading />;
     }
-    default:
-      let { account_slug, actor_name } = props.session.SignedIn;
+    default: {
+      const { account_slug, actor_name } = props.session.SignedIn;
 
       return (
         <SignedIn
@@ -43,6 +43,7 @@ function Session(props: OverviewPageProps) {
           signOut={props.signOut}
         />
       );
+    }
   }
 }
 
@@ -56,7 +57,7 @@ function SignedOut({ signIn }: SignedOutProps) {
       <div className="flex flex-col items-center gap-4">
         <p className="text-center">
           You can sign in by clicking the Firezone icon in the taskbar or by
-          clicking 'Sign in' below.
+          clicking &quot;Sign in&quot; below.
         </p>
         <Button id="sign-in" onClick={signIn}>
           Sign in

rust/gui-client/src-frontend/initSentry.ts

@@ -6,7 +6,7 @@ type Environment = "production" | "staging" | "on-prem" | "unknown";
 let client: Client | undefined;
 
 export default function initSentry(apiUrl: string) {
-  let env = environment(URL.parse(apiUrl));
+  const env = environment(URL.parse(apiUrl));
 
   if (env == "on-prem" || env == "unknown") {
     if (client) {
@@ -16,7 +16,7 @@ export default function initSentry(apiUrl: string) {
     return;
   }
 
-  let options = {
+  const options = {
     dsn: "https://2e17bf5ed24a78c0ac9e84a5de2bd6fc@o4507971108339712.ingest.us.sentry.io/4508008945549312",
     environment: env,
     release: `gui-client@${__APP_VERSION__}`,