From fb7d780b6f1bb5432734bb85da3527e861c3b837 Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Fri, 11 Jul 2025 15:47:15 +0200
Subject: [PATCH] refactor(gui-client): don't hardcode IDs (#9831)

A linter I am trying out locally suggested to not hardcode HTML IDs. TIL
about React's `useId`.
---
 .../components/AdvancedSettingsPage.tsx       | 18 ++++++++-----
 .../components/DiagnosticsPage.tsx            |  2 +-
 .../components/GeneralSettingsPage.tsx        | 26 ++++++++++---------
 .../components/ManagedTextInput.tsx           |  0
 .../src-frontend/components/OverviewPage.tsx  | 22 +++++-----------
 5 files changed, 33 insertions(+), 35 deletions(-)
 delete mode 100644 rust/gui-client/src-frontend/components/ManagedTextInput.tsx

diff --git a/rust/gui-client/src-frontend/components/AdvancedSettingsPage.tsx b/rust/gui-client/src-frontend/components/AdvancedSettingsPage.tsx
index 730e54e56..0b398aca1 100644
--- a/rust/gui-client/src-frontend/components/AdvancedSettingsPage.tsx
+++ b/rust/gui-client/src-frontend/components/AdvancedSettingsPage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useId, useState } from "react";
 import { Button, Label } from "flowbite-react";
 import { AdvancedSettingsViewModel } from "../generated/AdvancedSettingsViewModel";
 import { ManagedTextInput } from "./ManagedInput";
@@ -39,6 +39,10 @@ export default function AdvancedSettingsPage({
     );
   }, [settings]);
 
+  const authBaseUrlId = useId();
+  const apiUrlId = useId();
+  const logFilterInput = useId();
+
   return (
     <div className="container p-4">
       <div className="pb-2">
@@ -59,12 +63,12 @@ export default function AdvancedSettingsPage({
         className="max-w flex flex-col gap-2"
       >
         <div>
-          <Label className="text-neutral-600" htmlFor="auth-base-url-input">
+          <Label className="text-neutral-600" htmlFor={authBaseUrlId}>
             Auth Base URL
           </Label>
           <ManagedTextInput
             name="auth_base_url"
-            id="auth-base-url-input"
+            id={authBaseUrlId}
             managed={localSettings.auth_url_is_managed}
             value={localSettings.auth_url}
             onChange={(e) =>
@@ -78,12 +82,12 @@ export default function AdvancedSettingsPage({
         </div>
 
         <div>
-          <Label className="text-neutral-600" htmlFor="api-url-input">
+          <Label className="text-neutral-600" htmlFor={apiUrlId}>
             API URL
           </Label>
           <ManagedTextInput
             name="api_url"
-            id="api-url-input"
+            id={apiUrlId}
             managed={localSettings.api_url_is_managed}
             value={localSettings.api_url}
             onChange={(e) =>
@@ -97,12 +101,12 @@ export default function AdvancedSettingsPage({
         </div>
 
         <div>
-          <Label className="text-neutral-600" htmlFor="log-filter-input">
+          <Label className="text-neutral-600" htmlFor={logFilterInput}>
             Log Filter
           </Label>
           <ManagedTextInput
             name="log_filter"
-            id="log-filter-input"
+            id={logFilterInput}
             managed={localSettings.log_filter_is_managed}
             value={localSettings.log_filter}
             onChange={(e) =>
diff --git a/rust/gui-client/src-frontend/components/DiagnosticsPage.tsx b/rust/gui-client/src-frontend/components/DiagnosticsPage.tsx
index d09f077ec..8cbb106eb 100644
--- a/rust/gui-client/src-frontend/components/DiagnosticsPage.tsx
+++ b/rust/gui-client/src-frontend/components/DiagnosticsPage.tsx
@@ -28,7 +28,7 @@ export default function Diagnostics({
       <div className="p-4 rounded-lg">
         <div className="mt-8 flex justify-center">
           <p className="mr-1">Log directory size:</p>
-          <p id="log-count-output">{`${files} files, ${megabytes} MB`}</p>
+          <p>{`${files} files, ${megabytes} MB`}</p>
         </div>
 
         <div className="mt-8 flex justify-center gap-4">
diff --git a/rust/gui-client/src-frontend/components/GeneralSettingsPage.tsx b/rust/gui-client/src-frontend/components/GeneralSettingsPage.tsx
index ce0ebce96..58aad9318 100644
--- a/rust/gui-client/src-frontend/components/GeneralSettingsPage.tsx
+++ b/rust/gui-client/src-frontend/components/GeneralSettingsPage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useId, useState } from "react";
 import { Button, Label, ToggleSwitch } from "flowbite-react";
 import { GeneralSettingsViewModel } from "../generated/GeneralSettingsViewModel";
 import { ManagedToggleSwitch, ManagedTextInput } from "./ManagedInput";
@@ -39,6 +39,11 @@ export default function GeneralSettingsPage({
     );
   }, [settings]);
 
+  const accountSlugInputId = useId();
+  const startMinimizedInputId = useId();
+  const startOnLoginInputId = useId();
+  const connectOnStartInputId = useId();
+
   return (
     <div className="container p-4">
       <div className="pb-2">
@@ -53,12 +58,12 @@ export default function GeneralSettingsPage({
         className="max-w flex flex-col gap-2"
       >
         <div>
-          <Label className="text-neutral-600" htmlFor="account-slug-input">
+          <Label className="text-neutral-600" htmlFor={accountSlugInputId}>
             Account slug
           </Label>
           <ManagedTextInput
             name="account_slug"
-            id="account-slug-input"
+            id={accountSlugInputId}
             managed={localSettings.account_slug_is_managed}
             value={localSettings.account_slug}
             onChange={(e) =>
@@ -72,12 +77,12 @@ export default function GeneralSettingsPage({
 
         <div className="flex flex-col max-w-1/2 gap-4 mt-4">
           <div className="flex justify-between items-center">
-            <Label className="text-neutral-600" htmlFor="start-minimized-input">
+            <Label className="text-neutral-600" htmlFor={startMinimizedInputId}>
               Start minimized
             </Label>
             <ToggleSwitch
               name="start_minimized"
-              id="start-minimized-input"
+              id={startMinimizedInputId}
               checked={localSettings.start_minimized}
               onChange={(e) =>
                 setLocalSettings({
@@ -89,12 +94,12 @@ export default function GeneralSettingsPage({
           </div>
 
           <div className="flex justify-between items-center">
-            <Label className="text-neutral-600" htmlFor="start-on-login-input">
+            <Label className="text-neutral-600" htmlFor={startOnLoginInputId}>
               Start on login
             </Label>
             <ToggleSwitch
               name="start_on_login"
-              id="start-on-login-input"
+              id={startOnLoginInputId}
               checked={localSettings.start_on_login}
               onChange={(e) =>
                 setLocalSettings({
@@ -106,15 +111,12 @@ export default function GeneralSettingsPage({
           </div>
 
           <div className="flex justify-between items-center">
-            <Label
-              className="text-neutral-600"
-              htmlFor="connect-on-start-input"
-            >
+            <Label className="text-neutral-600" htmlFor={connectOnStartInputId}>
               Connect on start
             </Label>
             <ManagedToggleSwitch
               name="connect-on-start"
-              id="connect-on-start-input"
+              id={connectOnStartInputId}
               managed={localSettings.connect_on_start_is_managed}
               checked={localSettings.connect_on_start}
               onChange={(e) =>
diff --git a/rust/gui-client/src-frontend/components/ManagedTextInput.tsx b/rust/gui-client/src-frontend/components/ManagedTextInput.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/rust/gui-client/src-frontend/components/OverviewPage.tsx b/rust/gui-client/src-frontend/components/OverviewPage.tsx
index c8a917f47..67789d377 100644
--- a/rust/gui-client/src-frontend/components/OverviewPage.tsx
+++ b/rust/gui-client/src-frontend/components/OverviewPage.tsx
@@ -53,15 +53,13 @@ interface SignedOutProps {
 
 function SignedOut({ signIn }: SignedOutProps) {
   return (
-    <div id="signed-out">
+    <div>
       <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 &quot;Sign in&quot; below.
         </p>
-        <Button id="sign-in" onClick={signIn}>
-          Sign in
-        </Button>
+        <Button onClick={signIn}>Sign in</Button>
         <p className="text-xs text-center">
           Firezone will continue running after this window is closed.
           <br />
@@ -80,23 +78,17 @@ interface SignedInProps {
 
 function SignedIn({ actorName, accountSlug, signOut }: SignedInProps) {
   return (
-    <div id="signed-in">
+    <div>
       <div className="flex flex-col items-center gap-4">
         <p className="text-center">
           You are currently signed into&nbsp;
-          <span className="font-bold" id="account-slug">
-            {accountSlug}
-          </span>
+          <span className="font-bold">{accountSlug}</span>
           &nbsp;as&nbsp;
-          <span className="font-bold" id="actor-name">
-            {actorName}
-          </span>
+          <span className="font-bold">{actorName}</span>
           .<br />
           Click the Firezone icon in the taskbar to see the list of Resources.
         </p>
-        <Button id="sign-out" onClick={signOut}>
-          Sign out
-        </Button>
+        <Button onClick={signOut}>Sign out</Button>
         <p className="text-xs text-center">
           Firezone will continue running in the taskbar after this window is
           closed.
@@ -108,7 +100,7 @@ function SignedIn({ actorName, accountSlug, signOut }: SignedInProps) {
 
 function Loading() {
   return (
-    <div id="loading">
+    <div>
       <div className="flex flex-col items-center gap-4">
         <Spinner />
         <p className="text-xs text-center">