fix(frontend): Add error page for unsubscribed users (#87)

CHANGELOG.md

@@ -11,10 +11,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update dependency on vulnerability for @adobe/css-tools and axios
 - Fix styles on Save Reports and Upload Ratings
 - Fix roles that are shown on Table info
+- Fix finding for entering country risk if user is not subscribed
 
 ### Changed
 - Updated arc42 documentation to align with the EDC updated Country Risk application.
 
+### Added
+- Added Error Page for when user is with right credentials but not subscribed to the App
+
+
 ## [1.3.0] - 2023-12-06
 
 ### Added 

package.json

@@ -4,7 +4,7 @@
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@catena-x/portal-shared-components": "2.1.3",
+    "@catena-x/portal-shared-components": "2.1.30",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "5.10.6",
@@ -98,8 +98,10 @@
       "@mui/types": "7.2.5",
       "@mui/system": {
         "@mui/types": "7.2.5"
-      }
-    }
+      },
+      "@mui/x-data-grid": "6.18.4"
+    },
+    "i18next": "22.5.1"
   },
   "jest": {
     "transformIgnorePatterns": [

src/App.js

@@ -31,6 +31,7 @@ import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import AboutPage from "./components/dashboard/AboutCard/AboutPage";
 import { FooterPortal } from "./components/dashboard/Footer/FooterPortal";
+import ErrorPageCR from "./components/dashboard/ErrorPage/ErrorPageCR";
 
 function App() {
   return (
@@ -42,18 +43,17 @@ function App() {
               <CompanyUserProvider>
                 <ReportProvider>
                   <ReloadProvider>
-                    <Router>
-                      <div className="navbar">
-                        <NavigationBar />
-                      </div>
-                      <div className="App">
-                        <Routes>
-                          <Route path="/" element={<Dashboard />} />
-                          <Route path="/about" element={<AboutPage />} />
-                        </Routes>
-                        <FooterPortal />
-                      </div>
-                    </Router>
+                    <div className="navbar">
+                      <NavigationBar />
+                    </div>
+                    <div className="App">
+                      <Routes>
+                        <Route path="/" element={<Dashboard />} />
+                        <Route path="/about" element={<AboutPage />} />
+                        <Route path="/error" element={<ErrorPageCR />} />
+                      </Routes>
+                      <FooterPortal />
+                    </div>
                   </ReloadProvider>
                 </ReportProvider>
               </CompanyUserProvider>

src/components/dashboard/AboutCard/AboutPage.js

@@ -29,7 +29,7 @@ export default function AboutPage() {
   return (
     <div className="AboutPage">
       <PageHeader title="About" topPage={false} headerHeight={200}>
-        <PageBreadcrumb style background="rgb(223, 228, 234)" />
+        <PageBreadcrumb title={"About"} style background="rgb(223, 228, 234)" />
       </PageHeader>
       <div className="AboutCardContainer">
         <AboutCard className="AboutCard" {...legalJson} />

src/components/dashboard/ErrorPage/ErrorPageCR.js

@@ -0,0 +1,62 @@
+/********************************************************************************
+ * Copyright (c) 2022,2024 BMW Group AG
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { AboutCard, PageHeader } from "@catena-x/portal-shared-components";
+import legalJson from "../../../legal-notice.json";
+import { Link } from "@mui/icons-material";
+import { Breadcrumb, Typography } from "@catena-x/portal-shared-components";
+import { PageBreadcrumb } from "../PageBreadCrumb/PageBreadcrumb";
+import "./error.scss";
+import { ErrorPage } from "@catena-x/portal-shared-components";
+import { FooterPortal } from "../Footer/FooterPortal";
+import NavigationBar from "../NavigationBar/NavigationBar";
+import { useNavigate } from "react-router-dom";
+import { getPortalLink } from "../../services/EnvironmentService";
+const ErrorPageCR = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="Error">
+      <NavigationBar />
+      <PageHeader title="Error" topPage={false} headerHeight={200}>
+
+      </PageHeader>
+      <ErrorPage
+        additionalDescription="Please contact your admin."
+        color="gray"
+        description="The server encountered an internal error or misconfiguration and was unable to complete your request."
+        header="401 (Unauthorized)"
+        homeButtonTitle="Homepage"
+        hasNavigation={false}
+        onHomeClick={() => {
+          window.location.href = getPortalLink() + "/appmarketplace";
+        }}
+        onReloadClick={() => {
+          navigate("/");
+        }}
+        reloadButtonTitle="Reload Page"
+        title="Oops, Something went wrong, subscribe to Country Risk App not found."
+      />
+      <FooterPortal></FooterPortal>
+    </div>
+  );
+};
+
+export default ErrorPageCR;

src/components/dashboard/ErrorPage/error.scss

@@ -0,0 +1,28 @@
+/********************************************************************************
+* Copyright (c) 2022,2024 BMW Group AG
+* Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
+*
+* See the NOTICE file(s) distributed with this work for additional
+* information regarding copyright ownership.
+*
+* This program and the accompanying materials are made available under the
+* terms of the Apache License, Version 2.0 which is available at
+* https://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* SPDX-License-Identifier: Apache-2.0
+********************************************************************************/
+
+.ErrorPage {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-weight: 100;
+  font-size: small;
+}

src/components/dashboard/PageBreadCrumb/PageBreadcrumb.js

@@ -32,7 +32,7 @@ function isParamsEmpty(params) {
   return true;
 }
 
-export const PageBreadcrumb = () => {
+export const PageBreadcrumb = ({ title }) => {
   const navigate = useNavigate();
   const params = useParams();
   const location = useLocation();
@@ -54,7 +54,7 @@ export const PageBreadcrumb = () => {
   }, [location, params]);
 
   const getCrumbTitle = (crumb) => {
-    return "About";
+    return title;
   };
 
   const breadcrumbs = () => {

src/components/dashboard/RootComponent/RootComponent.js

@@ -0,0 +1,38 @@
+/********************************************************************************
+ * Copyright (c) 2022,2024 BMW Group AG
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+import React, { useState, useEffect } from "react";
+import App from "../../../App";
+import ErrorPageCR from "../ErrorPage/ErrorPageCR";
+
+const RootComponent = ({ user }) => {
+  const [shouldShowErrorPage, setShouldShowErrorPage] = useState(false);
+
+  useEffect(() => {
+    if (user.access) {
+      setShouldShowErrorPage(false);
+    } else {
+      setShouldShowErrorPage(true);
+    }
+  }, [user]);
+
+  return shouldShowErrorPage ? <ErrorPageCR /> : <App />;
+};
+
+export default RootComponent;