factor out statusUtils class

Author: eric-richardson1

web/renderer/components/pageComponents/DatabasePage/ForTests/TestList/TestItemRenderer.tsx

@@ -1,5 +1,4 @@
 import TestItem from "@pageComponents/DatabasePage/ForTests/TestItem";
-import { getTestStatusColors, getStatusClassName } from "./statusUtils";
 import css from "./index.module.css";
 import { Test } from "@gen/graphql-types";
 
@@ -17,7 +16,7 @@ type Props = {
   onNameEdit: (testName: string, name: string) => void;
   onNameBlur: (testName: string) => void;
   onRunTest: (testName: string) => Promise<void>;
-  onDeleteTest: (testName: string) => Promise<void>;
+  onDeleteTest: (testName: string) => void;
 };
 
 export default function TestItemRenderer({
@@ -36,15 +35,6 @@ export default function TestItemRenderer({
   return (
     <>
       {tests.map(test => {
-        const testStatusColors = getTestStatusColors(
-          testResults[test.testName],
-        );
-        const statusClassName = getStatusClassName(testStatusColors, {
-          green: css.greenTest,
-          red: css.redTest,
-          orange: css.orangeTest,
-        });
-
         return (
           <TestItem
             key={test.testName}
@@ -53,15 +43,14 @@ export default function TestItemRenderer({
             isExpanded={expandedItems.has(test.testName)}
             editingName={editingTestNames[test.testName]}
             testResult={testResults[test.testName]}
-            className={statusClassName}
             onToggleExpanded={() => onToggleExpanded(test.testName)}
             onUpdateTest={(field, value) =>
               onUpdateTest(test.testName, field, value)
             }
             onNameEdit={name => onNameEdit(test.testName, name)}
             onNameBlur={() => onNameBlur(test.testName)}
             onRunTest={async () => await onRunTest(test.testName)}
-            onDeleteTest={async () => await onDeleteTest(test.testName)}
+            onDeleteTest={() => onDeleteTest(test.testName)}
           />
         );
       })}

web/renderer/components/pageComponents/DatabasePage/ForTests/TestList/index.module.css

@@ -203,17 +203,6 @@
   @apply mb-4;
 }
 
-.greenGroup {
-  @apply border-l-green-400 text-green-400;
-}
-
-.redGroup {
-  @apply border-l-red-400 text-red-400;
-}
-
-.orangeGroup {
-  @apply text-orange-500;
-}
 
 .runAllButton {
   @apply bg-green-600 text-white;

web/renderer/components/pageComponents/DatabasePage/ForTests/TestList/index.tsx

@@ -8,7 +8,6 @@ import { useTestList } from "./useTestList";
 import { RefParams } from "@lib/params";
 import CreateDropdown from "./CreateDropdown";
 import TestItemRenderer from "./TestItemRenderer";
-import { getGroupStatusColors, getStatusClassName } from "./statusUtils";
 import Link from "@components/links/Link";
 import { workingDiff } from "@lib/urls";
 
@@ -101,23 +100,13 @@ export default function TestList({ params }: Props) {
               .filter(([groupName]) => groupName !== "")
               .map(([groupName, groupTests]) => {
                 const isGroupExpanded = expandedGroups.has(groupName);
-                const groupStatusColors = getGroupStatusColors(
-                  groupTests,
-                  testResults,
-                );
-
                 return (
                   <div key={groupName} className={css.groupedTests}>
                     <TestGroup
                       group={groupName}
                       isExpanded={isGroupExpanded}
                       onToggle={() => toggleGroupExpanded(groupName)}
                       testCount={groupTests.length}
-                      className={getStatusClassName(groupStatusColors, {
-                        green: css.greenGroup,
-                        red: css.redGroup,
-                        orange: css.orangeGroup,
-                      })}
                       groupResult={getGroupResult(groupName)}
                       onRunGroup={async () => await handleRunGroup(groupName)}
                       onDeleteGroup={async () => handleDeleteGroup(groupName)}

web/renderer/components/pageComponents/DatabasePage/ForTests/TestList/statusUtils.ts

@@ -104,7 +104,7 @@ export function useTestList(params: RefParams) {
             },
           });
 
-          const testResultsList = result.data?.runTests.list || [];
+          const testResultsList = result.data?.runTests.list ?? [];
           const allResults = getResults(testResultsList);
 
           setTestResults(allResults);
@@ -125,25 +125,25 @@ export function useTestList(params: RefParams) {
     data?.tests.list,
   ]);
 
-  const toggleExpanded = (id: string) => {
+  const toggleExpanded = useCallback((testName: string) => {
     const newExpanded = new Set(expandedItems);
-    if (newExpanded.has(id)) {
-      newExpanded.delete(id);
+    if (newExpanded.has(testName)) {
+      newExpanded.delete(testName);
     } else {
-      newExpanded.add(id);
+      newExpanded.add(testName);
     }
     setExpandedItems(newExpanded);
-  };
+  }, [expandedItems]);
 
-  const toggleGroupExpanded = (groupName: string) => {
+  const toggleGroupExpanded = useCallback((groupName: string) => {
     const newExpandedGroups = new Set(expandedGroups);
     if (newExpandedGroups.has(groupName)) {
       newExpandedGroups.delete(groupName);
     } else {
       newExpandedGroups.add(groupName);
     }
     setExpandedGroups(newExpandedGroups);
-  };
+  }, [expandedGroups]);
 
   const updateTest = (name: string, field: keyof Test, value: string) => {
     setTests(
@@ -237,7 +237,7 @@ export function useTestList(params: RefParams) {
     });
   };
 
-  const handleDeleteTest = async (testName: string) => {
+  const handleDeleteTest = (testName: string) => {
     setTests(tests.filter(test => test.testName !== testName));
     setExpandedItems(prev => {
       const newSet = new Set(prev);
@@ -247,7 +247,7 @@ export function useTestList(params: RefParams) {
     setHasUnsavedChanges(true);
   };
 
-  const handleDeleteGroup = async (groupName: string) => {
+  const handleDeleteGroup = (groupName: string) => {
     setTests(tests.filter(test => test.testGroup !== groupName));
     setExpandedGroups(prev => {
       const newSet = new Set(prev);
@@ -472,7 +472,6 @@ export function useTestList(params: RefParams) {
     expandedItems,
     expandedGroups,
     editingTestNames,
-    hasUnsavedChanges,
     tests,
     groupedTests,
     sortedGroupEntries,
@@ -488,7 +487,6 @@ export function useTestList(params: RefParams) {
     handleDeleteGroup,
     handleCreateGroup,
     handleCreateTest,
-    handleSaveAll,
     handleRenameGroup,
     handleTestNameEdit,
     handleTestNameBlur,