From 6da4eb991693345c270aa42a07d619a3b5fb427a Mon Sep 17 00:00:00 2001
From: Fabrizio Sestito <fabrizio.sestito@suse.com>
Date: Tue, 12 Apr 2022 11:26:38 +0200
Subject: [PATCH] Add not found page (#338)

* Change about page link

* Add 404 page
---
 assets/js/components/AboutPage/AboutPage.jsx |  2 +-
 assets/js/components/NotFound/NotFound.jsx   | 37 ++++++++++++++++++++
 assets/js/components/NotFound/index.js       |  3 ++
 assets/js/trento.jsx                         |  2 ++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/components/NotFound/NotFound.jsx
 create mode 100644 assets/js/components/NotFound/index.js

diff --git a/assets/js/components/AboutPage/AboutPage.jsx b/assets/js/components/AboutPage/AboutPage.jsx
index 76555d9f46..f30c0b90a7 100644
--- a/assets/js/components/AboutPage/AboutPage.jsx
+++ b/assets/js/components/AboutPage/AboutPage.jsx
@@ -54,7 +54,7 @@ const AboutPage = () => {
               },
               {
                 title: 'GitHub repository',
-                content: 'https://github.com/trento-project/trento',
+                content: 'https://github.com/trento-project/web',
                 render: (content) => <a href={content}>{content}</a>,
               },
               {
diff --git a/assets/js/components/NotFound/NotFound.jsx b/assets/js/components/NotFound/NotFound.jsx
new file mode 100644
index 0000000000..a88cac0b58
--- /dev/null
+++ b/assets/js/components/NotFound/NotFound.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Button from '@components/Button';
+import TrentoLogo from '../../../static/trento-icon.png';
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  return (
+    <main className="bg-white relative overflow-hidden h-screen relative">
+      <div className="container mx-auto h-screen pt-32 md:pt-0 px-6 z-10 flex items-center justify-between">
+        <div className="container mx-auto px-6 flex flex-col-reverse lg:flex-row justify-between items-center relative">
+          <div className="w-full mb-16 md:mb-8 text-center lg:text-left">
+            <h1 className="font-light font-sans text-center lg:text-left text-5xl lg:text-8xl mt-12 md:mt-0 text-gray-700">
+              Sorry,<br></br>the page is in another castle.
+            </h1>
+            <Button
+              className="px-2 py-2 w-36 mt-16"
+              type="secondary"
+              onClick={() => {
+                navigate(`/`);
+              }}
+            >
+              Go back home
+            </Button>
+          </div>
+          <div className="block w-full mx-auto md:mt-0 relative max-w-md lg:max-w-2xl">
+            <img src={TrentoLogo} />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default NotFound;
diff --git a/assets/js/components/NotFound/index.js b/assets/js/components/NotFound/index.js
new file mode 100644
index 0000000000..2d0c485533
--- /dev/null
+++ b/assets/js/components/NotFound/index.js
@@ -0,0 +1,3 @@
+import NotFound from './NotFound';
+
+export default NotFound;
diff --git a/assets/js/trento.jsx b/assets/js/trento.jsx
index 83840436a4..6b35ccb1e6 100644
--- a/assets/js/trento.jsx
+++ b/assets/js/trento.jsx
@@ -22,6 +22,7 @@ import DatabasesOverview from '@components/DatabasesOverview';
 import SapSystemDetails from './components/SapSystemDetails/SapSystemDetails';
 import DatabaseDetails from './components/DatabaseDetails';
 import ChecksCatalog from '@components/ChecksCatalog';
+import NotFound from '@components/NotFound';
 
 const App = () => {
   return (
@@ -51,6 +52,7 @@ const App = () => {
               <Route path="databases/:id" element={<DatabaseDetails />} />
               <Route path="clusters/:clusterID" element={<ClusterDetails />} />
             </Route>
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </BrowserRouter>
       </Provider>