[HUD] Move a bunch of code for the main hud tables around (#6988)

Changes:
* Get rid of GroupFilterableHudTable by flattening it into the parent
(it was sort of a wrapper component)
* Get rid of HudTable component by flattening it into the parent
* Create a component just for FiltersAndSettings which has the job
filter search and the settings
* Move this component so that it's in a location that still gets shown
even when the HUD data is still being fetched
* Fetches data from contexts and the router instead of the input params
for all the settings in this component (not sure if this is a good idea.
It's nice to not have to pass a ton of things in, but maybe there are
perf issues)
* Adds a bunch of useRouter everywhere to get params instead of passing
it around as an input param (maybe this has perf issues)

Should have no visual changes other than the loading thing

Pros:
* Got rid of some components (flattened them out) -> less confusing
* Move a bunch of input params to be fetched in the component from
providers -> don't need to to pass things around all the time
* job filters + settings are still shown when the hud data is still
loading

Cons:
* Maybe causes worse perf?  ex more rerenders?  unsure

Author: clee2000

torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx

@@ -283,93 +283,68 @@ function HudTableBody({
   );
 }
 
-function GroupFilterableHudTable({
-  params,
-  children,
-  groupNames,
-  useGrouping,
-  setUseGrouping,
-  hideUnstable,
-  setHideUnstable,
-  hideGreenColumns,
-  setHideGreenColumns,
-}: {
-  params: HudParams;
-  children: React.ReactNode;
-  groupNames: string[];
-  useGrouping: boolean;
-  setUseGrouping: any;
-  hideUnstable: boolean;
-  setHideUnstable: any;
-  hideGreenColumns: boolean;
-  setHideGreenColumns: any;
-}) {
+function FiltersAndSettings({}: {}) {
+  const router = useRouter();
+  const params = packHudParams(router.query);
   const { jobFilter, handleSubmit } = useTableFilter(params);
-  const headerNames = groupNames;
   const [mergeEphemeralLF, setMergeEphemeralLF] = useContext(MergeLFContext);
   const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
+  const [hideUnstable, setHideUnstable] = usePreference("hideUnstable");
+  const [hideGreenColumns, setHideGreenColumns] =
+    useHideGreenColumnsPreference();
+  const [useGrouping, setUseGrouping] = useGroupingPreference(
+    params.nameFilter
+  );
 
   return (
-    <>
-      <div style={{ position: "relative", clear: "both" }}>
-        <div className={styles.hudControlsRow}>
-          <JobFilterInput
-            currentFilter={jobFilter}
-            handleSubmit={handleSubmit}
-          />
-          <SettingsPanel
-            settingGroups={{
-              // You need to specify both checkBoxName and key for each setting.
-              // `checkbox name` is used by CheckBoxSelector while `key` is
-              // used to uniquely identify the component in the settings panel.
-              // As far as I can CheckBoxSelector cannot read or write `key` but
-              // React requires us to set key since it's a list element, so we
-              // end up with some unfortunate duplication.
-              "View Options": [
-                <CheckBoxSelector
-                  value={useGrouping}
-                  setValue={(value) => setUseGrouping(value)}
-                  checkBoxName="groupView"
-                  key="groupView"
-                  labelText={"Use grouped view"}
-                />,
-                <MonsterFailuresCheckbox key="monsterFailures" />,
-              ],
-              "Filter Options": [
-                <CheckBoxSelector
-                  value={hideUnstable}
-                  setValue={(value) => setHideUnstable(value)}
-                  checkBoxName="hideUnstable"
-                  key="hideUnstable"
-                  labelText={"Hide unstable jobs"}
-                />,
-                <CheckBoxSelector
-                  value={hideGreenColumns}
-                  setValue={(value) => setHideGreenColumns(value)}
-                  checkBoxName="hideGreenColumns"
-                  key="hideGreenColumns"
-                  labelText={"Hide green columns"}
-                />,
-                <CheckBoxSelector
-                  value={mergeEphemeralLF}
-                  setValue={setMergeEphemeralLF}
-                  checkBoxName="mergeEphemeralLF"
-                  key="mergeEphemeralLF"
-                  labelText={"Condense LF, ephemeral jobs"}
-                />,
-              ],
-            }}
-            isOpen={settingsPanelOpen}
-            onToggle={() => setSettingsPanelOpen(!settingsPanelOpen)}
-          />
-        </div>
-        <table className={styles.hudTable} style={{ overflow: "auto" }}>
-          <GroupHudTableColumns names={headerNames} />
-          <GroupHudTableHeader names={headerNames} />
-          {children}
-        </table>
-      </div>
-    </>
+    <div className={styles.hudControlsRow}>
+      <JobFilterInput currentFilter={jobFilter} handleSubmit={handleSubmit} />
+      <SettingsPanel
+        settingGroups={{
+          // You need to specify both checkBoxName and key for each setting.
+          // `checkbox name` is used by CheckBoxSelector while `key` is
+          // used to uniquely identify the component in the settings panel.
+          // As far as I can CheckBoxSelector cannot read or write `key` but
+          // React requires us to set key since it's a list element, so we
+          // end up with some unfortunate duplication.
+          "View Options": [
+            <CheckBoxSelector
+              value={useGrouping}
+              setValue={(value) => setUseGrouping(value)}
+              checkBoxName="groupView"
+              key="groupView"
+              labelText={"Use grouped view"}
+            />,
+            <MonsterFailuresCheckbox key="monsterFailures" />,
+          ],
+          "Filter Options": [
+            <CheckBoxSelector
+              value={hideUnstable}
+              setValue={(value) => setHideUnstable(value)}
+              checkBoxName="hideUnstable"
+              key="hideUnstable"
+              labelText={"Hide unstable jobs"}
+            />,
+            <CheckBoxSelector
+              value={hideGreenColumns}
+              setValue={(value) => setHideGreenColumns(value)}
+              checkBoxName="hideGreenColumns"
+              key="hideGreenColumns"
+              labelText={"Hide green columns"}
+            />,
+            <CheckBoxSelector
+              value={mergeEphemeralLF}
+              setValue={setMergeEphemeralLF}
+              checkBoxName="mergeEphemeralLF"
+              key="mergeEphemeralLF"
+              labelText={"Condense LF, ephemeral jobs"}
+            />,
+          ],
+        }}
+        isOpen={settingsPanelOpen}
+        onToggle={() => setSettingsPanelOpen(!settingsPanelOpen)}
+      />
+    </div>
   );
 }
 
@@ -416,18 +391,6 @@ export function MonsterFailuresCheckbox() {
   );
 }
 
-function HudTable({ params }: { params: HudParams }) {
-  const data = useHudData(params);
-  if (data === undefined) {
-    return <LoadingPage />;
-  }
-  return (
-    <>
-      <GroupedHudTable params={params} data={data} />
-    </>
-  );
-}
-
 function HudHeader({ params }: { params: HudParams }) {
   function handleBranchSubmit(branch: string) {
     window.location.href = formatHudUrlForRoute("hud", { ...params, branch });
@@ -525,7 +488,10 @@ export default function Hud() {
                     style={{ marginLeft: "10px" }}
                   />
                 </div>
-                <HudTable params={params} />
+                <div style={{ position: "relative", clear: "both" }}>
+                  <FiltersAndSettings />
+                  <GroupedHudTable params={params} />
+                </div>
                 <PageSelector params={params} baseUrl="hud" />
                 <br />
                 <div>
@@ -576,13 +542,9 @@ function CopyPermanentLink({
   return <CopyLink textToCopy={url} compressed={false} style={style} />;
 }
 
-function GroupedHudTable({
-  params,
-  data,
-}: {
-  params: HudParams;
-  data: RowData[];
-}) {
+function GroupedHudTable({ params }: { params: HudParams }) {
+  const router = useRouter();
+  const data = useHudData(params);
   const { data: unstableIssuesData } = useSWR<IssueLabelApiResponse>(
     `/api/issue/unstable`,
     fetcher,
@@ -592,19 +554,16 @@ function GroupedHudTable({
     }
   );
   const jobNames = new Set(
-    data.flatMap((row) => Array.from(row.nameToJobs.keys()))
+    data?.flatMap((row) => Array.from(row.nameToJobs.keys()))
   );
 
-  const [hideUnstable, setHideUnstable] = usePreference("hideUnstable");
-  const [hideGreenColumns, setHideGreenColumns] =
-    useHideGreenColumnsPreference();
-  const [useGrouping, setUseGrouping] = useGroupingPreference(
-    params.nameFilter
-  );
+  const [hideUnstable] = usePreference("hideUnstable");
+  const [hideGreenColumns] = useHideGreenColumnsPreference();
+  const [useGrouping] = useGroupingPreference(params.nameFilter);
 
   const { shaGrid, groupNameMapping, jobsWithFailures, groupsWithFailures } =
     getGroupingData(
-      data,
+      data ?? [],
       jobNames,
       (!useGrouping && hideUnstable) || (useGrouping && !hideUnstable),
       unstableIssuesData ?? []
@@ -614,7 +573,6 @@ function GroupedHudTable({
 
   const { jobFilter } = useTableFilter(params);
 
-  const router = useRouter();
   useEffect(() => {
     // Only run on component mount, this assumes that the user's preference is
     // the value in local storage
@@ -688,26 +646,23 @@ function GroupedHudTable({
     return true;
   });
 
+  if (data === undefined) {
+    return <LoadingPage />;
+  }
+
   return (
     <GroupingContext.Provider
       value={{ groupNameMapping, expandedGroups, setExpandedGroups }}
     >
-      <GroupFilterableHudTable
-        params={params}
-        groupNames={names}
-        useGrouping={useGrouping}
-        setUseGrouping={setUseGrouping}
-        hideUnstable={hideUnstable}
-        setHideUnstable={setHideUnstable}
-        hideGreenColumns={hideGreenColumns}
-        setHideGreenColumns={setHideGreenColumns}
-      >
+      <table className={styles.hudTable} style={{ overflow: "auto" }}>
+        <GroupHudTableColumns names={names} />
+        <GroupHudTableHeader names={names} />
         <HudTableBody
           shaGrid={shaGrid}
           names={names}
           unstableIssues={unstableIssuesData ?? []}
         />
-      </GroupFilterableHudTable>
+      </table>
     </GroupingContext.Provider>
   );
 }