fix: errors exhibition and printing (#5892)

* Added onBuildError to error case on buildVertices

* add onBuildError just if there's no source

* refactor: Update markdown rendering in alert components

* Fixed list on error

* Fixed md exibition of error

* Fixed exibition for component erorrs

* Made errors be generated with the correct map

* Removed markdown from unused places

* Update src/frontend/src/utils/buildUtils.ts

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

* Update src/frontend/src/utils/buildUtils.ts

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -1,5 +1,7 @@
 import { CustomLink } from "@/customization/components/custom-link";
 import { useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import IconComponent from "../../../../components/common/genericIconComponent";
 import { SingleAlertComponentType } from "../../../../types/alerts";
 
@@ -28,10 +30,35 @@ export default function SingleAlert({
         </h3>
         {dropItem.list ? (
           <div className="mt-2 text-sm text-error-foreground">
-            <ul className="list-disc space-y-1 pl-5">
+            <ul className="list-disc space-y-1 pl-5 align-top">
               {dropItem.list.map((item, idx) => (
                 <li className="word-break-break-word" key={idx}>
-                  {item}
+                  <Markdown
+                    linkTarget="_blank"
+                    remarkPlugins={[remarkGfm]}
+                    className="align-text-top"
+                    components={{
+                      a: ({ node, ...props }) => (
+                        <a
+                          href={props.href}
+                          target="_blank"
+                          className="underline"
+                          rel="noopener noreferrer"
+                        >
+                          {props.children}
+                        </a>
+                      ),
+                      p({ node, ...props }) {
+                        return (
+                          <span className="inline-block w-fit max-w-full align-text-top">
+                            {props.children}
+                          </span>
+                        );
+                      },
+                    }}
+                  >
+                    {Array.isArray(item) ? item.join("\n") : item}
+                  </Markdown>
                 </li>
               ))}
             </ul>

src/frontend/src/alerts/error/index.tsx

@@ -1,5 +1,7 @@
 import { Transition } from "@headlessui/react";
 import { useEffect, useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import IconComponent from "../../components/common/genericIconComponent";
 import { ErrorAlertType } from "../../types/alerts";
 
@@ -23,7 +25,6 @@ export default function ErrorAlert({
 
   return (
     <Transition
-      className="relative"
       show={show}
       appear={true}
       enter="transition-transform duration-500 ease-out"
@@ -54,11 +55,38 @@ export default function ErrorAlert({
             <h3 className="error-build-foreground line-clamp-2">{title}</h3>
             {list?.length !== 0 &&
             list?.some((item) => item !== null && item !== undefined) ? (
-              <div className="error-build-message-div">
+              <div className="mt-2 text-sm text-error-foreground">
-                <ul className="error-build-message-list">
+                <ul className="list-disc space-y-1 pl-5 align-top">
                   {list.map((item, index) => (
-                    <li key={index} className="line-clamp-5">
+                    <li key={index} className="word-break-break-word">
-                      {item}
+                      <span className="">
+                        <Markdown
+                          linkTarget="_blank"
+                          remarkPlugins={[remarkGfm]}
+                          className="align-text-top"
+                          components={{
+                            a: ({ node, ...props }) => (
+                              <a
+                                href={props.href}
+                                target="_blank"
+                                className="underline"
+                                rel="noopener noreferrer"
+                              >
+                                {props.children}
+                              </a>
+                            ),
+                            p({ node, ...props }) {
+                              return (
+                                <span className="inline-block w-fit max-w-full align-text-top">
+                                  {props.children}
+                                </span>
+                              );
+                            },
+                          }}
+                        >
+                          {Array.isArray(item) ? item.join("\n") : item}
+                        </Markdown>
+                      </span>
                     </li>
                   ))}
                 </ul>

src/frontend/src/utils/buildUtils.ts

@@ -248,7 +248,7 @@ export async function buildFlowVertices({
           if (!buildData.valid) {
             // lots is a dictionary with the key the output field name and the value the log object
             // logs: { [key: string]: { message: any; type: string }[] };
-            const errorMessages = Object.keys(buildData.data.outputs).map(
+            const errorMessages = Object.keys(buildData.data.outputs).flatMap(
               (key) => {
                 const outputs = buildData.data.outputs[key];
                 if (Array.isArray(outputs)) {
@@ -317,9 +317,11 @@ export async function buildFlowVertices({
         return true;
       }
       case "error": {
-        useFlowStore.getState().setIsBuilding(false);
+        if (data?.category === "error") {
-        if (data.category === "error") {
           useMessagesStore.getState().addMessage(data);
+          if (data?.properties?.source?.id === null) {
+            onBuildError!("Error Building Flow", [data.text]);
+          }
         }
         buildResults.push(false);
         return true;