From cd6985591f7b352b29da624727494815348e775c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 23 Aug 2023 21:09:53 -0300
Subject: [PATCH] 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                         | 10 +++++++++-
 .../src/components/fetchErrorComponent/index.tsx | 16 ++++++++++++++++
 .../components/genericIconComponent/index.tsx    |  8 +++++++-
 .../src/components/loadingComponent/index.tsx    |  4 +---
 src/frontend/src/constants/constants.ts          |  4 ++++
 src/frontend/src/contexts/typesContext.tsx       |  1 -
 src/frontend/src/types/components/index.ts       |  8 ++++++++
 src/frontend/src/utils/styleUtils.ts             |  2 ++
 8 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/frontend/src/components/fetchErrorComponent/index.tsx

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 5bda7ff37..2109222ed 100644
--- a/src/frontend/src/App.tsx
+++ b/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} />
             )}
diff --git a/src/frontend/src/components/fetchErrorComponent/index.tsx b/src/frontend/src/components/fetchErrorComponent/index.tsx
new file mode 100644
index 000000000..6004d9dfc
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index 32647f159..a06707d74 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/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}
+    />
+  );
 }
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 31e78d474..a1e406710 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/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 (
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 3f698c64e..aa9f1555a 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/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.";
diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx
index 189f61af0..05346838d 100644
--- a/src/frontend/src/contexts/typesContext.tsx
+++ b/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);
         });
       }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 5cf87b8d3..0ebe768c1 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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;
+};
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 42fbe8773..ca100b5c3 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/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,
 };