WIP: show more errors

valbuild · Nov 4, 2024 · 8f4eeb9 · 8f4eeb9
1 parent 6cf82f5
commit 8f4eeb9
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 92 deletions.
diff --git a/packages/ui/spa/ng/ValProvider.tsx b/packages/ui/spa/ng/ValProvider.tsx
@@ -369,6 +369,11 @@ export function useLoadingStatus(): LoadingStatus {
   }, [sourcesSyncStatus]);
 }
 
+export function useSyncStatus() {
+  const { sourcesSyncStatus } = useContext(ValContext);
+  return sourcesSyncStatus;
+}
+
 export function usePublish() {
   const { publish, isPublishing, publishError } = useContext(ValContext);
   return { publish, isPublishing, publishError };
@@ -469,6 +474,10 @@ export function useSchemaSha() {
   return useContext(ValContext).schemaSha;
 }
 
+export function useGlobalError() {
+  // sync errors, schema errors, patch errors, validation errors
+}
+
 type ShallowSourceOf<SchemaType extends SerializedSchema["type"]> =
   | { status: "not-found" }
   | {

diff --git a/packages/ui/spa/ng/components/DraftChanges.tsx b/packages/ui/spa/ng/components/DraftChanges.tsx
@@ -45,20 +45,11 @@ export function DraftChanges({
   const prevInsertedPatchesRef = useRef<Set<PatchId>>(new Set());
   useEffect(() => {
     async function load() {
-      if (!schemaSha || !("data" in schemasRes)) {
-        // only error if we somehow lose the schemas
-        if (patchSetsSchemaShaRef.current) {
-          setPatchSetsError(
-            "Something wrong happened while loading patches (schema not found)",
-          );
-        }
-        return;
-      }
       if (patchSetsSchemaShaRef.current !== schemaSha) {
         // Reset if schema changes
         patchSetsRef.current = new PatchSets();
       }
-      patchSetsSchemaShaRef.current = schemaSha;
+      patchSetsSchemaShaRef.current = schemaSha ?? null;
       if (!patchSetsRef.current) {
         // Initialize if not already
         patchSetsRef.current = new PatchSets();
@@ -83,6 +74,13 @@ export function DraftChanges({
       if (patchIds.length > 0 && requestPatchIds.length === 0) {
         return;
       }
+      if (schemasRes.status === "error") {
+        setPatchSetsError(schemasRes.error);
+        return;
+      }
+      if (!("data" in schemasRes)) {
+        return;
+      }
       const patchSets = patchSetsRef.current;
       const schemas = schemasRes.data;
       requestedPatchIdsRef.current = requestPatchIds;

diff --git a/packages/ui/spa/ng/components/Field.tsx b/packages/ui/spa/ng/components/Field.tsx
@@ -36,6 +36,8 @@ export function Field({
 
   const [isExpanded, setIsExpanded] = useState(true);
   const source = "data" in sourceAtPath ? sourceAtPath.data : undefined;
+  const isBoolean =
+    "data" in schemaAtPath && schemaAtPath.data?.type === "boolean";
   const isNullableBoolean =
     "data" in schemaAtPath &&
     schemaAtPath.data?.opt === true &&
@@ -48,81 +50,77 @@ export function Field({
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          {"data" in schemaAtPath &&
-            !isNullableBoolean &&
-            schemaAtPath.data.opt && (
-              <Checkbox
-                disabled={loadingStatus === "loading"}
-                checked={source !== null}
-                onCheckedChange={() => {
-                  if (source === null) {
-                    addPatch([
-                      {
-                        op: "replace",
-                        path: patchPath,
-                        value: emptyOf({
-                          ...schemaAtPath.data,
-                          opt: false, // empty of nullable is null, so we override
-                        }) as JSONValue,
-                      },
-                    ]);
-                  } else {
-                    addPatch([
-                      {
-                        op: "replace",
-                        path: patchPath,
-                        value: null,
-                      },
-                    ]);
-                  }
-                }}
-              />
-            )}
-          {"data" in schemaAtPath &&
-            isNullableBoolean &&
-            schemaAtPath.data.opt && (
-              <Checkbox
-                disabled={loadingStatus === "loading"}
-                checked={
-                  source === null
-                    ? "indeterminate"
-                    : typeof source === "boolean"
-                      ? source
-                      : false
+          {!isBoolean && "data" in schemaAtPath && schemaAtPath.data.opt && (
+            <Checkbox
+              disabled={loadingStatus === "loading"}
+              checked={source !== null}
+              onCheckedChange={() => {
+                if (source === null) {
+                  addPatch([
+                    {
+                      op: "replace",
+                      path: patchPath,
+                      value: emptyOf({
+                        ...schemaAtPath.data,
+                        opt: false, // empty of nullable is null, so we override
+                      }) as JSONValue,
+                    },
+                  ]);
+                } else {
+                  addPatch([
+                    {
+                      op: "replace",
+                      path: patchPath,
+                      value: null,
+                    },
+                  ]);
                 }
-                onCheckedChange={() => {
-                  if (source === null) {
-                    addPatch([
-                      {
-                        op: "replace",
-                        path: patchPath,
-                        value: true,
-                      },
-                    ]);
-                  } else if (source === true) {
-                    addPatch([
-                      {
-                        op: "replace",
-                        path: patchPath,
-                        value: false,
-                      },
-                    ]);
-                  } else {
-                    addPatch([
-                      {
-                        op: "replace",
-                        path: patchPath,
-                        value: null,
-                      },
-                    ]);
-                  }
-                }}
-              />
-            )}
+              }}
+            />
+          )}
+          {isBoolean && (
+            <Checkbox
+              disabled={loadingStatus === "loading"}
+              checked={
+                source === null
+                  ? "indeterminate"
+                  : typeof source === "boolean"
+                    ? source
+                    : false
+              }
+              onCheckedChange={() => {
+                if (source === null) {
+                  addPatch([
+                    {
+                      op: "replace",
+                      path: patchPath,
+                      value: true,
+                    },
+                  ]);
+                } else if (source === false && isNullableBoolean) {
+                  addPatch([
+                    {
+                      op: "replace",
+                      path: patchPath,
+                      value: null,
+                    },
+                  ]);
+                } else {
+                  addPatch([
+                    {
+                      op: "replace",
+                      path: patchPath,
+                      value: false,
+                    },
+                  ]);
+                }
+              }}
+            />
+          )}
           {typeof label === "string" && <Label>{label}</Label>}
           {label && typeof label !== "string" && label}
         </div>
-        {source !== null && !isNullableBoolean && (
+        {source !== null && !isBoolean && (
           <button
             onClick={() => setIsExpanded((prev) => !prev)}
             className={classNames("transform transition-transform", {
@@ -134,7 +132,7 @@ export function Field({
           </button>
         )}
       </div>
-      {!isNullableBoolean && (
+      {!isBoolean && (
         <AnimateHeight isOpen={isExpanded && source !== null}>
           {source !== null && (
             <div className="flex flex-col gap-6 pt-6">{children}</div>

diff --git a/packages/ui/spa/ng/components/FieldSchemaError.tsx b/packages/ui/spa/ng/components/FieldSchemaError.tsx
@@ -9,7 +9,9 @@ export function FieldSchemaError({
 }) {
   return (
     <div>
-      <div>Schema error: {error}</div>
+      <div className="p-4 rounded bg-bg-error-primary text-text-primary">
+        {error}
+      </div>
     </div>
   );
 }
diff --git a/packages/ui/spa/ng/components/ToolsMenu.tsx b/packages/ui/spa/ng/components/ToolsMenu.tsx
@@ -1,4 +1,9 @@
-import { LoadingStatus, useLoadingStatus, usePublish } from "../ValProvider";
+import {
+  LoadingStatus,
+  useLoadingStatus,
+  usePublish,
+  useSyncStatus,
+} from "../ValProvider";
 import { ScrollArea } from "../../components/ui/scroll-area";
 import { useState, useEffect } from "react";
 import { DraftChanges } from "./DraftChanges";
@@ -13,11 +18,30 @@ export function ToolsMenu({
   isOpen: boolean;
   setOpen: (open: boolean) => void;
 }) {
-  const loadingStatus = useLoadingStatus();
+  const syncStatus = useSyncStatus();
   // Debounce loading status to avoid flickering...
-  const [debouncedLoadingStatus, setDebouncedLoadingStatus] =
-    useState(loadingStatus);
+  const [debouncedLoadingStatus, setDebouncedLoadingStatus] = useState<
+    "loading" | "error" | "success" | "not-asked"
+  >("not-asked");
+  const [loadingErrors, setLoadingErrors] = useState<{
+    moduleFilePath: string;
+    errors: string[];
+  } | null>(null);
   useEffect(() => {
+    let loadingStatus: "loading" | "error" | "success" = "success";
+    for (const [moduleFilePath, value] of Object.entries(syncStatus)) {
+      if (value.status === "error") {
+        loadingStatus = "error";
+        setLoadingErrors({ moduleFilePath, errors: value.errors });
+        break;
+      } else if (value.status === "loading") {
+        loadingStatus = "loading";
+        break;
+      }
+    }
+    if (loadingStatus !== "error") {
+      setLoadingErrors(null);
+    }
     if (loadingStatus === "success") {
       const timeout = setTimeout(() => {
         setDebouncedLoadingStatus(loadingStatus);
@@ -28,21 +52,21 @@ export function ToolsMenu({
     } else {
       setDebouncedLoadingStatus(loadingStatus);
     }
-  }, [loadingStatus]);
+  }, [syncStatus]);
   const { publishError } = usePublish();
 
   return (
     <nav className="flex flex-col gap-1 pr-4">
       <div className="flex items-center h-16 gap-4 p-4 mt-4 bg-bg-tertiary rounded-3xl">
         <ToolsMenuButtons
-          loadingStatus={loadingStatus}
+          loadingStatus={debouncedLoadingStatus}
           isOpen={isOpen}
           setOpen={setOpen}
         />
       </div>
-      {debouncedLoadingStatus === "error" && (
-        <div className="bg-bg-error-primary text-text-error-primary rounded-3xl">
-          Could not fetch data
+      {loadingErrors && (
+        <div className="p-4 bg-bg-error-primary text-text-Wprimary rounded-3xl">
+          {loadingErrors.moduleFilePath}: {loadingErrors.errors[0]}
         </div>
       )}
       {publishError && (