From a073792d8c5ef146445f6a255624c7d3dcd3f114 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 29 Jun 2023 12:48:32 +0200
Subject: [PATCH] fix: project 404 (#4114)

## About the changes
If project doesn't exist, show 404 information.

![image](https://github.com/Unleash/unleash/assets/2625371/6d7e1dfa-52f0-495b-a559-9733ec0b9340)

<!-- Does it close an issue? Multiple? -->
Closes
[issue/1-1069](https://linear.app/unleash/issue/1-1069/project-doesnt-show-404-if-it-doesnt-exist)
---
 .../src/component/project/Project/Project.tsx     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 4ad9086c18..5536338b6c 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -14,7 +14,7 @@ import {
     StyledTabContainer,
     StyledTopRow,
 } from './Project.styles';
-import { Tabs } from '@mui/material';
+import { Paper, Tabs, Typography } from '@mui/material';
 import { Delete, Edit, FileUpload } from '@mui/icons-material';
 import useToast from 'hooks/useToast';
 import useQueryParams from 'hooks/useQueryParams';
@@ -46,7 +46,7 @@ const NAVIGATE_TO_EDIT_PROJECT = 'NAVIGATE_TO_EDIT_PROJECT';
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
     const params = useQueryParams();
-    const { project, loading, refetch } = useProject(projectId);
+    const { project, loading, error, refetch } = useProject(projectId);
     const ref = useLoading(loading);
     const { setToastData } = useToast();
     const [modalOpen, setModalOpen] = useState(false);
@@ -110,6 +110,17 @@ export const Project = () => {
         /* eslint-disable-next-line */
     }, []);
 
+    if (error?.status === 404) {
+        return (
+            <Paper sx={theme => ({ padding: theme.spacing(2, 4, 4) })}>
+                <Typography variant="h1">404 Not Found</Typography>
+                <Typography>
+                    Project <strong>{projectId}</strong> does not exist.
+                </Typography>
+            </Paper>
+        );
+    }
+
     const onFavorite = async () => {
         if (project?.favorite) {
             await unfavorite(projectId);