fix: handling of 404 in dashboard is updated (#2908)

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,
 				};
 			}

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

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;