Fix underspecified react hooks and add linting for it

eslint.config.js

@@ -1,3 +1,4 @@
+import reactHooks from "eslint-plugin-react-hooks";
 import simpleImportSort from "eslint-plugin-simple-import-sort";
 import neostandard, { plugins, resolveIgnoresFromGitignore } from "neostandard";
 
@@ -16,6 +17,15 @@ export default [
     },
   },
   plugins.react.configs.flat["jsx-runtime"],
+  {
+    plugins: {
+      "react-hooks": reactHooks,
+    },
+    rules: {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "error",
+    },
+  },
   plugins.promise.configs["flat/recommended"],
   {
     plugins: {

package.json

@@ -49,6 +49,7 @@
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.25.1",
     "eslint-formatter-checkstyle": "^8.40.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "jsdom": "^26.1.0",
     "neostandard": "^0.12.1",

src/main/frontend/common/i18n/i18n-provider.tsx

@@ -39,7 +39,7 @@ export const I18NProvider: FunctionComponent<I18NProviderProps> = ({
       setMessages(found);
     };
     fetchMessages();
-  }, []);
+  }, [locale, bundles]);
 
   return (
     <I18NContext.Provider value={messages}>{children}</I18NContext.Provider>

src/main/frontend/common/tree-api.ts

@@ -54,7 +54,7 @@ export default function useRunPoller({
       () => setLoading(false),
       currentRunPath,
     );
-  }, []);
+  }, [currentRunPath, previousRunPath]);
 
   return {
     run,

src/main/frontend/common/utils/live-total.tsx

@@ -9,18 +9,17 @@ export default function LiveTotal({
   total: number | undefined;
   start: number;
 }) {
-  const sinceStart = () => Date.now() - start;
-  const [duration, setDuration] = useState<number>(total ?? sinceStart());
+  const [duration, setDuration] = useState<number>(total ?? Date.now() - start);
   useEffect(() => {
     if (total == null) {
       const interval = setInterval(() => {
-        setDuration(sinceStart());
+        setDuration(Date.now() - start);
       }, 3001); // to match step polling interval
       return () => clearInterval(interval);
     } else {
       setDuration(total);
     }
-  }, [total]);
+  }, [start, total]);
 
   return <Total ms={duration} />;
 }

src/main/frontend/common/utils/timings.tsx

@@ -104,15 +104,16 @@ export function Paused({ since }: { since: number }) {
 }
 
 export function Started({ since }: { since: number }) {
+  const messages = useMessages();
+  const locale = useLocale();
+
   if (since === 0) {
     return <></>;
   }
-
-  const messages = useMessages();
   return (
     <>
       {messages.format(LocalizedMessageKey.startedAgo, {
-        "0": humanise(Math.abs(since - Date.now()), useLocale()),
+        "0": humanise(Math.abs(since - Date.now()), locale),
       })}
     </>
   );

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx

@@ -23,7 +23,7 @@ export const MultiPipelineGraph = () => {
         console.log(err);
       });
     }
-  }, [runs, poll]);
+  }, [currentJobPath, runs, poll]);
 
   const locale = useLocale();
 

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx

@@ -23,12 +23,11 @@ export default function SingleRun({ run, currentJobPath }: SingleRunProps) {
   });
 
   function Changes() {
+    const messages = useContext(I18NContext);
+
     if (run.changesCount === 0) {
       return;
     }
-
-    const messages = useContext(I18NContext);
-
     return (
       <>
         {" - "}

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/settings-button.spec.tsx

@@ -12,21 +12,14 @@ describe("SettingsButton", () => {
     return div;
   };
 
-  const renderComponent = (
-    buttonPortal: HTMLElement | null = createButtonPortal(),
-  ) => {
+  const renderComponent = (buttonPortal: HTMLElement) => {
     return render(
       <UserPreferencesProvider>
         <SettingsButton buttonPortal={buttonPortal} />
       </UserPreferencesProvider>,
     );
   };
 
-  it("should not render when buttonPortal is null", () => {
-    renderComponent(null);
-    expect(screen.queryByText("Settings")).toBeNull();
-  });
-
   it("should render settings button in portal", () => {
     const buttonPortal = createButtonPortal();
     renderComponent(buttonPortal);

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/settings-button.tsx

@@ -11,17 +11,10 @@ import {
 import { useUserPreferences } from "../../../common/user/user-preferences-provider.tsx";
 
 type SettingsButtonProps = {
-  buttonPortal: HTMLElement | null;
+  buttonPortal: HTMLElement;
 };
 
 export default function SettingsButton({ buttonPortal }: SettingsButtonProps) {
-  if (!buttonPortal) {
-    console.warn(
-      "Could not find settings button element to generate a portal.",
-    );
-    return <></>;
-  }
-
   const messages = useMessages();
   const { showNames, setShowNames, showDurations, setShowDurations } =
     useUserPreferences();

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx

@@ -1,5 +1,5 @@
 import linkifyHtml from "linkify-html";
-import { memo, useEffect, useRef } from "react";
+import { memo } from "react";
 
 import { linkifyJsOptions } from "../../../common/utils/linkify-js.ts";
 import { makeReactChildren, tokenizeANSIString } from "./Ansi.tsx";
@@ -9,28 +9,17 @@ export interface ConsoleLineProps {
   content: string;
   stepId: string;
   startByte: number;
-  heightCallback: (height: number) => void;
 }
 
 // Console output line
 export const ConsoleLine = memo(function ConsoleLine(props: ConsoleLineProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const height = ref.current ? ref.current.getBoundingClientRect().height : 0;
-    props.heightCallback(height);
-  }, []);
-
   return (
     <pre
       style={{ background: "none", border: "none" }}
       className="console-output-line"
       key={`console-line-pre${props.lineNumber}`}
     >
-      <div
-        className="console-output-line"
-        key={`${props.lineNumber}-body`}
-        ref={ref}
-      >
+      <div className="console-output-line" key={`${props.lineNumber}-body`}>
         <a
           className="console-line-number"
           id={`log-${props.lineNumber}`}