CE-1891: Reroute no access to 401 page

src/App.js

@@ -27,7 +27,7 @@ import { RecordDetailsView } from "./views/records/RecordDetailsView";
 import { TestErrorView } from "./views/TestErrorView";
 import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
 import { applicationTitle } from "./components/common/Helper";
-import { UserPageView } from "./views/UserPage/UserPageView";
+import { UserDetailsAccessControl } from "./views/UserPage/UserDetailsAccessControl";
 
 // setting up the application (TAB)title
 function App() {
@@ -115,7 +115,7 @@ function App() {
                         />
                         <Route
                           path="/user/:userName"
-                          element={<UserPageView />}
+                          element={<UserDetailsAccessControl />}
                           exact
                         />
                         <Route

src/components/common/User/UserProfile.js

 import React from "react";
-import { Avatar, Card, CardHeader, Typography } from "@mui/material";
+import { Avatar, Card, CardHeader } from "@mui/material";
 import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
 
-export function UserProfile({ userInfo, errorMessage }) {
+export function UserProfile({ userInfo }) {
   const userData = {
     username: userInfo?.loginName,
     avatar: (
@@ -22,16 +22,12 @@ export function UserProfile({ userInfo, errorMessage }) {
           component: "h2"
         }}
       />
-      {errorMessage ? (
-        <Typography>{errorMessage}</Typography>
-      ) : (
-        <KeyValueTable
-          obj={userData}
-          variant="overline"
-          sx={{ border: 0 }}
-          valueOptions={{ headerName: "" }}
-        />
-      )}
+      <KeyValueTable
+        obj={userData}
+        variant="overline"
+        sx={{ border: 0 }}
+        valueOptions={{ headerName: "" }}
+      />
     </Card>
   );
 }

src/components/navigation/NotFoundView/NotFoundView.js

@@ -8,14 +8,15 @@ import { ServerErrorPage, RootPaper } from "@ess-ics/ce-ui-common";
 
 const propTypes = {
   /** String containing message of page not found. Otherwise defaults to a generic "Page Not Found" message */
-  message: string
+  message: string,
+  status: string
 };
 
-export default function NotFoundView({ message }) {
+export default function NotFoundView({ message, status }) {
   return (
     <RootPaper>
       <ServerErrorPage
-        status={"404"}
+        status={status}
         message={message}
         supportHref={window.SUPPORT_URL}
       />
@@ -24,3 +25,7 @@ export default function NotFoundView({ message }) {
 }
 
 NotFoundView.propTypes = propTypes;
+
+NotFoundView.defaultProps = {
+  status: "404"
+};

src/views/IOC/IOCDetailsContainer.js

-import React, { useState } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import { IOCDetailsView } from "./IOCDetailsView";
 import { LinearProgress } from "@mui/material";
 import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
 import { onFetchEntityError } from "../../components/common/Helper";
 import { useIOC } from "../../api/SwaggerApi";
+import { userContext } from "@ess-ics/ce-ui-common/dist/contexts/User";
+import useUrlState from "@ahooksjs/use-url-state";
 
 export function IOCDetailsContainer({ id }) {
-  const [notFoundError, setNotFoundError] = useState();
+  const { user } = useContext(userContext);
+  const [urlState] = useUrlState();
+  const [error, setError] = useState(null);
+
   const [ioc, getIOC /* reset*/, , loading] = useIOC(id, (m, s) => {
     // handle error code 404, and define custom message on the UI because BE sends back generic error message
-    onFetchEntityError(m, s, setNotFoundError);
+    onFetchEntityError(m, s, setError);
   });
 
+  useEffect(() => {
+    // user logs in => clear error message, and try to re-request userInfo
+    if (user) {
+      setError(null);
+    } else if (!user && urlState?.tab) {
+      // user is not logged in => show a message
+      setError({ message: "Unauthorized", status: "401" });
+    }
+  }, [urlState, user]);
+
   return (
     <>
-      {notFoundError ? (
-        <NotFoundView />
+      {error ? (
+        <NotFoundView
+          message={error?.message}
+          status={error?.status}
+        />
       ) : ioc ? (
         <IOCDetailsView
           ioc={ioc}

src/views/UserPage/UserDetailsAccessControl.js

+import React from "react";
+import { RootContainer } from "../../components/common/Container/RootContainer";
+import AccessControl from "../../components/auth/AccessControl";
+import { UserDetailsContainer } from "./UserDetailsContainer";
+import { useParams } from "react-router-dom";
+
+export function UserDetailsAccessControl() {
+  const { userName } = useParams();
+  return (
+    <RootContainer>
+      <AccessControl allowedRoles={[]}>
+        <UserDetailsContainer userName={userName} />
+      </AccessControl>
+    </RootContainer>
+  );
+}

src/views/UserPage/UserDetailsContainer.js

+import React, { useContext, useEffect, useState } from "react";
+import { UserPageView } from "./UserPageView";
+import { LinearProgress } from "@mui/material";
+import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
+import { useUserInfo } from "../../api/SwaggerApi";
+import { userContext } from "@ess-ics/ce-ui-common/dist/contexts/User";
+
+export function UserDetailsContainer({ userName }) {
+  const { user } = useContext(userContext);
+  const [error, setError] = useState(null);
+
+  const [userInfo, getUserInfo, ,] = useUserInfo(userName, (m, s) => {
+    // log error message for userInfo
+    console.warn(m);
+
+    // user not found
+    if (s === 404) {
+      setError({ message: "Page not found", status: `${s}` });
+      // do not show snackbar error
+      return false;
+    }
+
+    // user doesn't have permission to fetch userInfo
+    if (s === 401) {
+      setError({ message: "Unauthorized", status: `${s}` });
+      // do not show snackbar error
+      return false;
+    }
+  });
+
+  useEffect(() => {
+    // user logs in => clear error message, and try to re-request userInfo
+    if (user) {
+      setError(null);
+    } else {
+      // user is not logged in => show a message
+      setError({ message: "Unauthorized", status: "401" });
+    }
+  }, [user]);
+
+  useEffect(() => {
+    // request userInfo only if user is logged in
+    if (user) {
+      getUserInfo();
+    }
+  }, [getUserInfo, userName, user]);
+
+  return (
+    <>
+      {error ? (
+        <NotFoundView
+          status={error?.status ?? "404"}
+          message={error?.message}
+        />
+      ) : user?.loginName === userName ? (
+        <UserPageView
+          userName={userName}
+          user={user}
+          userInfo={userInfo}
+        />
+      ) : (
+        <LinearProgress color="primary" />
+      )}
+    </>
+  );
+}

src/views/UserPage/UserPageView.js

-import React, { useContext, useState } from "react";
+import React from "react";
 import { Grid } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { RootContainer } from "../../components/common/Container/RootContainer";
-import { useParams } from "react-router-dom";
-import { useUserInfo } from "../../api/SwaggerApi";
-import { userContext } from "@ess-ics/ce-ui-common/dist/contexts/User";
 import { UserProfile } from "../../components/common/User/UserProfile";
-import { useEffect } from "react";
 import { UserIocList } from "../../components/common/User/UserIOCList";
 import { UserOperationList } from "../../components/common/User/UserOperationList";
 
@@ -23,90 +19,31 @@ const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
   }
 }));
 
-export function UserPageView() {
-  const { userName } = useParams();
-  const { user } = useContext(userContext);
-  const [errorMessage, setErrorMessage] = useState();
-
-  const [userInfo, getUserInfo, ,] = useUserInfo(userName, (m, s) => {
-    // log error message for userInfo
-    console.warn(m);
-    // user not found
-    if (s === 404) {
-      setErrorMessage("User not found!");
-      // do not show snackbar error
-      return false;
-    }
-
-    // user doesn't have permission to fetch userInfo
-    if (s === 401) {
-      setErrorMessage("No activity");
-      // do not show snackbar error
-      return false;
-    }
-    // show any other errors with snackbar
-  });
-
-  useEffect(() => {
-    // user logs in => clear error message, and try to re-request userInfo
-    if (user) {
-      setErrorMessage(null);
-    } else {
-      // user is not logged in => show a message
-      setErrorMessage("No activity!");
-    }
-  }, [user]);
-
-  useEffect(() => {
-    // request userInfo only if user is logged in
-    if (user) {
-      getUserInfo();
-    }
-  }, [getUserInfo, userName, user]);
-
-  // content for userActivity, e.g. operations that the user done, or IOCs that owns
-  const userActivityContent = (
-    <>
-      <Grid
-        item
-        xs={12}
-      >
-        <UserOperationList userName={userName} />
-      </Grid>
-
-      <Grid
-        item
-        xs={12}
-      >
-        <UserIocList userName={userName} />
-      </Grid>
-    </>
-  );
-
-  // show userPage for everyone, but hide userActivity for non-logged in users, and for not existing user
-  const content = (
-    <>
-      <Grid
-        item
-        xs={12}
-      >
-        <UserProfile
-          userInfo={userInfo}
-          errorMessage={errorMessage}
-        />
-      </Grid>
-
-      {user && !errorMessage && userActivityContent}
-    </>
-  );
-
+export function UserPageView({ userName, userInfo }) {
   return (
     <StyledRootContainer>
       <Grid
         container
         spacing={1}
       >
-        {content}
+        <Grid
+          item
+          xs={12}
+        >
+          <UserProfile userInfo={userInfo} />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+        >
+          <UserOperationList userName={userName} />
+        </Grid>
+        <Grid
+          item
+          xs={12}
+        >
+          <UserIocList userName={userName} />
+        </Grid>
       </Grid>
     </StyledRootContainer>
   );