From 9ad17c2d60380ec38ff0e6f571f3ac0f3d50466e Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Thu, 15 Jun 2023 11:15:25 +0530
Subject: [PATCH] fix: handling of 404 in dashboard is updated (#2908)

---
 frontend/src/api/ErrorResponseHandler.ts  |  2 +-
 frontend/src/pages/NewDashboard/index.tsx | 14 +++++++++++++-
 frontend/src/types/common/index.ts        |  4 ++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/api/ErrorResponseHandler.ts b/frontend/src/api/ErrorResponseHandler.ts
index 060b93493f..2c42f0951b 100644
--- a/frontend/src/api/ErrorResponseHandler.ts
+++ b/frontend/src/api/ErrorResponseHandler.ts
@@ -16,7 +16,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 				return {
 					statusCode,
 					payload: null,
-					error: 'Not Found',
+					error: data.errorType,
 					message: null,
 				};
 			}
diff --git a/frontend/src/pages/NewDashboard/index.tsx b/frontend/src/pages/NewDashboard/index.tsx
index 2183531f63..6d64ca500f 100644
--- a/frontend/src/pages/NewDashboard/index.tsx
+++ b/frontend/src/pages/NewDashboard/index.tsx
@@ -1,3 +1,5 @@
+import { Typography } from 'antd';
+import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import NewDashboard from 'container/NewDashboard';
 import { useEffect } from 'react';
@@ -8,6 +10,7 @@ import { ThunkDispatch } from 'redux-thunk';
 import { GetDashboard, GetDashboardProps } from 'store/actions/dashboard';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
+import { ErrorType } from 'types/common';
 import DashboardReducer from 'types/reducer/dashboards';
 
 function NewDashboardPage({ getDashboard }: NewDashboardProps): JSX.Element {
@@ -26,8 +29,17 @@ function NewDashboardPage({ getDashboard }: NewDashboardProps): JSX.Element {
 		}
 	}, [getDashboard, dashboardId, dashboards.length]);
 
+	if (
+		error &&
+		!loading &&
+		dashboards.length === 0 &&
+		errorMessage === ErrorType.NotFound
+	) {
+		return <NotFound />;
+	}
+
 	if (error && !loading && dashboards.length === 0) {
-		return <div>{errorMessage}</div>;
+		return <Typography>{errorMessage}</Typography>;
 	}
 
 	// when user comes from dashboard page. dashboard array is populated with some dashboard as dashboard is populated
diff --git a/frontend/src/types/common/index.ts b/frontend/src/types/common/index.ts
index c32bc6f44b..9e68e1173e 100644
--- a/frontend/src/types/common/index.ts
+++ b/frontend/src/types/common/index.ts
@@ -25,4 +25,8 @@ export type ErrorStatusCode =
 	| BadRequest
 	| Conflict;
 
+export enum ErrorType {
+	NotFound = 'not_found',
+}
+
 export type StatusCode = SuccessStatusCode | ErrorStatusCode;