From 138d8ee4b0ef77127b76c12de4136414099f9499 Mon Sep 17 00:00:00 2001
From: clee2000 <44682903+clee2000@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:32:16 -0800
Subject: [PATCH] [HUD][BE?] New CheckBoxSelector component (#5858)

I see this format used a lot, so I decided to make a component for it
---
 torchci/components/CheckBoxSelector.tsx       | 29 ++++++
 torchci/pages/failure.tsx                     | 24 ++---
 .../[repoName]/[branch]/[[...page]].tsx       | 98 ++++---------------
 3 files changed, 57 insertions(+), 94 deletions(-)
 create mode 100644 torchci/components/CheckBoxSelector.tsx

diff --git a/torchci/components/CheckBoxSelector.tsx b/torchci/components/CheckBoxSelector.tsx
new file mode 100644
index 0000000000..502b449a01
--- /dev/null
+++ b/torchci/components/CheckBoxSelector.tsx
@@ -0,0 +1,29 @@
+export default function CheckBoxSelector({
+  value,
+  setValue,
+  checkBoxName,
+  labelText,
+}: {
+  value: boolean;
+  setValue: (_value: boolean) => void;
+  checkBoxName: string;
+  labelText: string;
+}) {
+  return (
+    <div>
+      <span
+        onClick={() => {
+          setValue(!value);
+        }}
+      >
+        <input
+          type="checkbox"
+          name={checkBoxName}
+          checked={value}
+          onChange={() => {}}
+        />
+        <label htmlFor={checkBoxName}> {labelText}</label>
+      </span>
+    </div>
+  );
+}
diff --git a/torchci/pages/failure.tsx b/torchci/pages/failure.tsx
index 8efdaebc3a..e7ee7e5edd 100644
--- a/torchci/pages/failure.tsx
+++ b/torchci/pages/failure.tsx
@@ -1,3 +1,4 @@
+import CheckBoxSelector from "components/CheckBoxSelector";
 import JobLinks from "components/JobLinks";
 import JobSummary from "components/JobSummary";
 import LogViewer from "components/LogViewer";
@@ -22,21 +23,14 @@ function FuzzySearchCheckBox({
   setUseFuzzySearch: any;
 }) {
   return (
-    <>
-      <div
-        onClick={() => {
-          setUseFuzzySearch(!useFuzzySearch);
-        }}
-      >
-        <input
-          type="checkbox"
-          name="useFuzzySearch"
-          checked={useFuzzySearch}
-          onChange={() => {}}
-        />
-        <label htmlFor="useFuzzySearch"> Use fuzzy search</label>
-      </div>
-    </>
+    <CheckBoxSelector
+      checkBoxName="useFuzzySearch"
+      value={useFuzzySearch}
+      setValue={() => {
+        setUseFuzzySearch(!useFuzzySearch);
+      }}
+      labelText="Use fuzzy search"
+    />
   );
 }
 
diff --git a/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx b/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx
index 6baad6c82c..6b077b1577 100644
--- a/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx
+++ b/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx
@@ -1,3 +1,4 @@
+import CheckBoxSelector from "components/CheckBoxSelector";
 import CopyLink from "components/CopyLink";
 import {
   GroupHudTableColumns,
@@ -307,13 +308,17 @@ function GroupFilterableHudTable({
           setUseGrouping(false);
         }}
       />
-      <GroupViewCheckBox
-        useGrouping={useGrouping}
-        setUseGrouping={setUseGrouping}
+      <CheckBoxSelector
+        value={useGrouping}
+        setValue={(value) => setUseGrouping(value)}
+        checkBoxName="groupView"
+        labelText={"Use grouped view"}
       />
-      <UnstableCheckBox
-        hideUnstable={hideUnstable}
-        setHideUnstable={setHideUnstable}
+      <CheckBoxSelector
+        value={hideUnstable}
+        setValue={(value) => setHideUnstable(value)}
+        checkBoxName="hideUnstable"
+        labelText={"Hide unstable jobs"}
       />
       <MonsterFailuresCheckbox />
       <table className={styles.hudTable}>
@@ -335,62 +340,6 @@ function GroupFilterableHudTable({
   );
 }
 
-function GroupViewCheckBox({
-  useGrouping,
-  setUseGrouping,
-}: {
-  useGrouping: boolean;
-  setUseGrouping: any;
-}) {
-  return (
-    <>
-      <div>
-        <span
-          onClick={() => {
-            setUseGrouping(!useGrouping);
-          }}
-        >
-          <input
-            type="checkbox"
-            name="groupView"
-            checked={useGrouping}
-            onChange={() => {}}
-          />
-          <label htmlFor="groupView"> Use grouped view</label>
-        </span>
-      </div>
-    </>
-  );
-}
-
-function UnstableCheckBox({
-  hideUnstable,
-  setHideUnstable,
-}: {
-  hideUnstable: boolean;
-  setHideUnstable: any;
-}) {
-  return (
-    <>
-      <div>
-        <span
-          onClick={() => {
-            setHideUnstable(!hideUnstable);
-          }}
-        >
-          <input
-            type="checkbox"
-            name="hideUnstable"
-            checked={hideUnstable}
-            onChange={() => {}}
-          />
-          <label htmlFor="hideUnstable"> Hide unstable jobs</label>
-        </span>
-      </div>
-    </>
-  );
-}
-
 export const MonsterFailuresContext = createContext<
   [boolean, ((_value: boolean) => void) | undefined]
 >([false, undefined]);
@@ -415,23 +364,14 @@ export function MonsterFailuresCheckbox() {
     MonsterFailuresContext
   );
   return (
-    <>
-      <div title="Replace `X` with a monster icon based on the error line.">
-        <span
-          onClick={() => {
-            setMonsterFailures && setMonsterFailures(!monsterFailures);
-          }}
-        >
-          <input
-            type="checkbox"
-            name="monsterFailures"
-            checked={monsterFailures}
-            onChange={() => {}}
-          />
-          <label htmlFor="monsterFailures"> Monsterize failures</label>
-        </span>
-      </div>
-    </>
+    <div title="Replace `X` with a monster icon based on the error line.">
+      <CheckBoxSelector
+        value={monsterFailures}
+        setValue={(value) => setMonsterFailures && setMonsterFailures(value)}
+        checkBoxName="monsterFailures"
+        labelText={"Monsterize failures"}
+      />
+    </div>
   );
 }