add proper error handling

Author: eric-richardson1

web/renderer/components/DatabaseNav/index.tsx

@@ -26,7 +26,7 @@ export default function DatabaseNav(props: Props) {
 
 function Inner(props: Props) {
   const { isDolt, isPostgres } = useDatabaseDetails();
-  
+
   return (
     <div data-cy="db-page-header-nav" className={css.headerNav}>
       <Tooltip id="disabled-database-nav-item" />
@@ -36,7 +36,7 @@ function Inner(props: Props) {
           if (tab === "Tests" && isDolt && isPostgres) {
             return null;
           }
-          
+
           const item = <NavItem {...props} key={tab} name={tab} i={i} />;
           if (tab === "Database") {
             return item;

web/renderer/components/pageComponents/DatabasePage/ForPulls/PullActions/Merge/index.tsx

@@ -275,15 +275,17 @@ function TestResultsListItem({
 
 function TestResults({ params }: { params: RefParams }) {
   const [testResults, setTestResults] = useState<TestResult[]>([]);
-  const [runTests] = useRunTestsLazyQuery();
-  const { data } = useTestListQuery({
+  const [runTestError, setRunTestError] = useState<string | null>(null);
+  const [runTests, { error: runTestsError }] = useRunTestsLazyQuery();
+  const { data, loading, error } = useTestListQuery({
     variables: {
       databaseName: params.databaseName,
       refName: params.refName,
     },
   });
 
   const handleRunTests = useCallback(async () => {
+    setRunTestError(null);
     try {
       const result = await runTests({
         variables: {
@@ -292,12 +294,50 @@ function TestResults({ params }: { params: RefParams }) {
         },
       });
 
+      if (result.error) {
+        console.error("Error running tests:", result.error);
+        setRunTestError(result.error.message);
+        setTestResults([]);
+        return;
+      }
+
       setTestResults(result.data?.runTests.list ?? []);
-    } catch {
+    } catch (err) {
+      console.error("Error running tests:", err);
+      setRunTestError(
+        err instanceof Error ? err.message : "Failed to run tests",
+      );
       setTestResults([]);
     }
   }, [runTests, params.databaseName, params.refName]);
 
+  if (loading) {
+    return (
+      <div className={css.testResultsOuter}>
+        <SmallLoader.WithText text="Loading tests..." loaded={false} />
+      </div>
+    );
+  }
+
+  if (error) {
+    console.error("Error loading test list:", error);
+    return (
+      <div className={css.testResultsOuter}>
+        <div className={css.testResultsContainer}>
+          <div className={css.testResultsTop}>
+            <span style={{ color: "red" }}>
+              Failed to load tests: {error.message}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (runTestsError) {
+    console.error("Run Tests query error:", runTestsError);
+  }
+
   if (!data?.tests.list || data.tests.list.length === 0) {
     return null;
   }
@@ -338,6 +378,11 @@ function TestResults({ params }: { params: RefParams }) {
             [css.testResultsTestsOrange]: orange,
           })}
         >
+          {(runTestError || runTestsError) && (
+            <div style={{ color: "red", padding: "8px" }}>
+              Error running tests: {runTestError || runTestsError?.message}
+            </div>
+          )}
           <ul>
             {testResults.length > 0 ? (
               testResults.map(test => (

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

@@ -74,6 +74,14 @@
   @apply text-center text-lg m-6;
 }
 
+.errorContainer {
+  @apply text-center m-6;
+}
+
+.errorText {
+  @apply text-red-600 text-lg;
+}
+
 .fieldInput {
   @apply w-full p-2 border border-stone-100 rounded text-sm;
 }

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

@@ -26,6 +26,8 @@ export default function TestList({ params }: Props) {
     groupedTests,
     sortedGroupEntries,
     emptyGroups,
+    testsLoading,
+    testsError,
     setState,
     handleRunAll,
     handleHashNavigation,
@@ -66,26 +68,28 @@ export default function TestList({ params }: Props) {
     <div className={css.container}>
       <div className={css.top}>
         <h1>Tests</h1>
-        <div className={css.actionArea}>
-          <div className={css.createActions}>
-            <HideForNoWritesWrapper params={params}>
-              <CreateDropdown
-                onCreateGroup={() => setShowNewGroupModal(true)}
-              />
-            </HideForNoWritesWrapper>
-            <Link {...workingDiff(params)}>
-              <Button>Commit</Button>
-            </Link>
-          </div>
+        {!testsLoading && !testsError && (
+          <div className={css.actionArea}>
+            <div className={css.createActions}>
+              <HideForNoWritesWrapper params={params}>
+                <CreateDropdown
+                  onCreateGroup={() => setShowNewGroupModal(true)}
+                />
+              </HideForNoWritesWrapper>
+              <Link {...workingDiff(params)}>
+                <Button>Commit</Button>
+              </Link>
+            </div>
 
-          <div className={css.primaryActions}>
-            {tests.length > 0 && (
-              <Button onClick={handleRunAll} className={css.runAllButton}>
-                Run All
-              </Button>
-            )}
+            <div className={css.primaryActions}>
+              {tests.length > 0 && (
+                <Button onClick={handleRunAll} className={css.runAllButton}>
+                  Run All
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
 
       <NewGroupModal
@@ -125,6 +129,12 @@ export default function TestList({ params }: Props) {
             )}
           </div>
         </div>
+      ) : testsError ? (
+        <div className={css.errorContainer}>
+          <p className={css.errorText}>Failed to load tests: {testsError}</p>
+        </div>
+      ) : testsLoading ? (
+        <p className={css.loading}>Loading tests...</p>
       ) : (
         <p className={css.noTests}>No tests found</p>
       )}