fix(graph): prevent error when no errors are present & error modal is…

… open
nrwl · Apr 25, 2024 · ede4a17 · ede4a17
1 parent 2fe4849
commit ede4a17
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/graph/shared/src/lib/error-toast.tsx b/graph/shared/src/lib/error-toast.tsx
@@ -23,7 +23,7 @@ export interface ErrorToastImperativeHandle {
 }
 
 interface ErrorToastProps {
-  errors: GraphError[] | undefined;
+  errors?: GraphError[] | undefined;
 }
 
 export const ErrorToast = forwardRef(
@@ -68,9 +68,19 @@ export const ErrorToast = forwardRef(
 
     useLayoutEffect(() => {
       if (searchParams.get('show-error') === 'true') {
-        inputsModalRef.current?.openModal();
+        if (errors && errors.length > 0) {
+          inputsModalRef.current?.openModal();
+        } else {
+          setSearchParams(
+            (currentSearchParams) => {
+              currentSearchParams.delete('show-error');
+              return currentSearchParams;
+            },
+            { replace: true, preventScrollReset: true }
+          );
+        }
       }
-    }, [searchParams, inputsModalRef]);
+    }, [searchParams, inputsModalRef, errors, setSearchParams]);
 
     return (
       <Transition
@@ -85,19 +95,21 @@ export const ErrorToast = forwardRef(
         <div className="fixed inset-x-0 bottom-0 px-4 py-2 text-center">
           <div
             onClick={() => inputsModalRef.current?.openModal()}
-            className="mx-auto max-w-[75%] w-fit bg-red-600 p-4 rounded-md shadow-lg z-50 cursor-pointer text-slate-200 items-center flex"
+            className="z-50 mx-auto flex w-fit max-w-[75%] cursor-pointer items-center rounded-md bg-red-600 p-4 text-slate-200 shadow-lg"
           >
-            <ExclamationCircleIcon className="h-6 w-6 inline-block mr-2" />
+            <ExclamationCircleIcon className="mr-2 inline-block h-6 w-6" />
             Some project information might be missing. Click to see errors.
           </div>
-          <Modal
-            title={`Project Graph Errors`}
-            ref={inputsModalRef}
-            onOpen={handleModalOpen}
-            onClose={handleModalClose}
-          >
-            <ErrorRenderer errors={errors!} />
-          </Modal>
+          {errors?.length > 0 && (
+            <Modal
+              title={`Project Graph Errors`}
+              ref={inputsModalRef}
+              onOpen={handleModalOpen}
+              onClose={handleModalClose}
+            >
+              <ErrorRenderer errors={errors ?? []} />
+            </Modal>
+          )}
         </div>
       </Transition>
     );

diff --git a/graph/ui-components/src/lib/error-renderer.tsx b/graph/ui-components/src/lib/error-renderer.tsx
@@ -15,13 +15,13 @@ export function ErrorRenderer({ errors }: { errors: GraphError[] }) {
             ? `${error.fileName}:${error.cause.errors[0].location.line}:${error.cause.errors[0].location.column}`
             : error.fileName;
         return (
-          <div className="pb-4 overflow-hidden">
-            <span className="font-normal font-bold dark:text-slate-200 flex-col inline-flex md:inline max-w-full break-words">
+          <div className="overflow-hidden pb-4">
+            <span className="inline-flex max-w-full flex-col break-words font-normal font-bold dark:text-slate-200 md:inline">
               <span>{errorHeading}</span>
-              <span className="hidden md:inline px-1">-</span>
+              <span className="hidden px-1 md:inline">-</span>
               <span>{fileSpecifier}</span>
             </span>
-            <pre className="whitespace-pre-wrap pl-4 pt-3 overflow-x-scroll">
+            <pre className="overflow-x-scroll whitespace-pre-wrap pl-4 pt-3">
               {isCauseWithErrors(error.cause) &&
               error.cause.errors.length === 1 ? (
                 <div>