fix(App.tsx): replace hardcoded error message with FetchErrorComponent to improve error handling and display

feat(App.tsx): add support for displaying fetch error message and description in FetchErrorComponent
feat(fetchErrorComponent): create FetchErrorComponent to display fetch error message and description
fix(genericIconComponent): add stroke-width property to ensure consistent icon stroke width
feat(loadingComponent): import LoadingComponentProps from types/components to improve type safety
feat(constants): add FETCH_ERROR_MESSAGE and FETCH_ERROR_DESCRIPTION constants for fetch error handling
fix(typesContext): remove console.log statement and set fetchError to true when an error occurs during fetching types
feat(typesContext): add error handling for fetching types and set fetchError to true when an error occurs
feat(typesContext): import fetchErrorComponentType from types/components to improve type safety
feat(types/components): create fetchErrorComponentType and LoadingComponentProps interfaces for type safety
fix(styleUtils): import Unplug icon from lucide-react to fix missing icon issue

src/frontend/src/App.tsx

@@ -9,7 +9,12 @@ import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
 import CrashErrorComponent from "./components/CrashErrorComponent";
+import FetchErrorComponent from "./components/fetchErrorComponent";
 import LoadingComponent from "./components/loadingComponent";
+import {
+  FETCH_ERROR_DESCRIPION,
+  FETCH_ERROR_MESSAGE,
+} from "./constants/constants";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
@@ -140,7 +145,10 @@ export default function App() {
         {loading ? (
           <div className="loading-page-panel">
             {fetchError ? (
-              <div>There was an error on the backend</div>
+              <FetchErrorComponent
+                description={FETCH_ERROR_DESCRIPION}
+                message={FETCH_ERROR_MESSAGE}
+              ></FetchErrorComponent>
             ) : (
               <LoadingComponent remSize={50} />
             )}

src/frontend/src/components/fetchErrorComponent/index.tsx

@@ -0,0 +1,16 @@
+import { fetchErrorComponentType } from "../../types/components";
+import IconComponent from "../genericIconComponent";
+
+export default function FetchErrorComponent({
+  message,
+  description,
+}: fetchErrorComponentType) {
+  return (
+    <div role="status" className="m-auto flex flex-col items-center">
+      <IconComponent className={`h-16 w-16`} name="Unplug"></IconComponent>
+      <br></br>
+      <span className="text-lg text-almost-medium-blue">{message}</span>
+      <span className="text-lg text-almost-medium-blue">{description}</span>
+    </div>
+  );
+}

src/frontend/src/components/genericIconComponent/index.tsx

@@ -7,5 +7,11 @@ export default function IconComponent({
   iconColor,
 }: IconComponentProps): JSX.Element {
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-  return <TargetIcon className={className} style={{ color: iconColor }} />;
+  return (
+    <TargetIcon
+      className={className}
+      style={{ color: iconColor }}
+      stroke-width={1.5}
+    />
+  );
 }

src/frontend/src/components/loadingComponent/index.tsx

@@ -1,6 +1,4 @@
-type LoadingComponentProps = {
-  remSize: number;
-};
+import { LoadingComponentProps } from "../../types/components";
 
 export default function LoadingComponent({ remSize }: LoadingComponentProps) {
   return (

src/frontend/src/constants/constants.ts

@@ -511,3 +511,7 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
 ];
 
 export const skipNodeUpdate = ["CustomComponent"];
+
+export const FETCH_ERROR_MESSAGE = "Couldn't establish a connection.";
+export const FETCH_ERROR_DESCRIPION =
+  "Check if everything is working properly and try again.";

src/frontend/src/contexts/typesContext.tsx

@@ -78,7 +78,6 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       } catch (error) {
         console.error("An error has occurred while fetching types.");
         await getHealth().catch((e) => {
-          console.log("entrou");
           setFetchError(true);
         });
       }

src/frontend/src/types/components/index.ts

@@ -171,3 +171,11 @@ export type IconComponentProps = {
 export interface languageMap {
   [key: string]: string | undefined;
 }
+export type fetchErrorComponentType = {
+  message: string;
+  description: string;
+};
+
+export type LoadingComponentProps = {
+  remSize: number;
+};

src/frontend/src/utils/styleUtils.ts

@@ -56,6 +56,7 @@ import {
   TerminalSquare,
   Trash2,
   Undo,
+  Unplug,
   Upload,
   Users2,
   Variable,
@@ -275,4 +276,5 @@ export const nodeIconsLucide = {
   Upload,
   MessageSquare,
   MoreHorizontal,
+  Unplug,
 };