Merge branch 'ce-2024-revisements-to-user-profile-page' into 'develop'

CE-2024: Revisement to user profile page

See merge request !339

src/components/Job/JobTable.js

@@ -27,6 +27,27 @@ const jobLogColumns = [
   }
 ];
 
+const userPageJobLogColumns = [
+  {
+    field: "type",
+    headerName: "Type",
+    flex: 0,
+    headerAlign: "center",
+    align: "center"
+  },
+  { field: "ioc", headerName: "IOC name", width: "15ch", sortable: false },
+  { field: "version", headerName: "Revision", width: "10ch", sortable: false },
+  { field: "host", headerName: "Host", width: "15ch", sortable: false },
+  {
+    field: "start",
+    headerName: "Time",
+    width: "15ch",
+    sortable: false,
+    headerAlign: "right",
+    textAlign: "right"
+  }
+];
+
 function createTableRow(job, colorStyle) {
   return {
     id: job.id,
@@ -88,7 +109,8 @@ export function JobTable({
   loading
 }) {
   const tableTypeSpecifics = {
-    jobLog: [jobLogColumns, createTableRowJobLog]
+    jobLog: [jobLogColumns, createTableRowJobLog],
+    userPageJobLog: [userPageJobLogColumns, createTableRowJobLog]
   };
 
   const [columns, createRow] = tableTypeSpecifics[rowType];

src/components/common/User/UserIOCList.js

@@ -42,9 +42,9 @@ export function UserIocList({ userName }) {
   };
 
   return (
-    <Card>
+    <Card variant="plain">
       <CardHeader
-        title={`IOCs registered by ${userName}`}
+        title={"IOCs registered"}
         titleTypographyProps={{
           variant: "h2",
           component: "h2"

src/components/common/User/UserOperationList.js

@@ -39,9 +39,9 @@ export function UserOperationList({ userName }) {
   };
 
   return (
-    <Card>
+    <Card variant="plain">
       <CardHeader
-        title={`Operations by ${userName}`}
+        title={"Operations"}
         titleTypographyProps={{
           variant: "h2",
           component: "h2"
@@ -53,6 +53,7 @@ export function UserOperationList({ userName }) {
         loading={loading}
         pagination={pagination}
         onPage={onPage}
+        rowType="userPageJobLog"
       />
     </Card>
   );

src/components/common/User/UserProfile.js

 import React from "react";
-import { Avatar, Card, CardHeader } from "@mui/material";
-import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
+import {
+  Avatar,
+  Card,
+  CardMedia,
+  CardContent,
+  Typography
+} from "@mui/material";
 
 export function UserProfile({ userInfo }) {
-  const userData = {
-    username: userInfo?.loginName,
-    avatar: (
-      <Avatar
-        src={userInfo?.avatar}
-        variant="rounded"
-      />
-    )
-  };
-
   return (
-    <Card>
-      <CardHeader
-        title="User profile page"
-        titleTypographyProps={{
-          variant: "h2",
-          component: "h2"
-        }}
-      />
-      <KeyValueTable
-        obj={userData}
-        variant="overline"
-        sx={{ border: 0 }}
-        valueOptions={{ headerName: "" }}
-      />
+    <Card
+      variant="plain"
+      sx={{ display: "flex", flexDirection: "row" }}
+    >
+      <CardContent>
+        <CardMedia>
+          <Avatar
+            sx={{ width: 96, height: 96 }}
+            src={userInfo?.avatar}
+            variant="circle"
+          />
+        </CardMedia>
+      </CardContent>
+      <CardContent>
+        <Typography
+          component="h2"
+          variant="h2"
+        >
+          {userInfo?.fullName}
+        </Typography>
+        <Typography
+          component="h3"
+          variant="h4"
+        >
+          {`@${userInfo?.loginName}`}
+        </Typography>
+      </CardContent>
     </Card>
   );
 }

src/components/navigation/NavigationMenu/LoginControls.js

@@ -59,7 +59,7 @@ export function ProfileMenu({ user }) {
     menuItems: [
       ...objUserRoles,
       {
-        text: "User profile page",
+        text: "User profile",
         action: () => userProfile(),
         icon: <PersonIcon fontSize="small" />
       },

src/views/UserPage/UserDetailsAccessControl.js

@@ -2,14 +2,12 @@ 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} />
+        <UserDetailsContainer />
       </AccessControl>
     </RootContainer>
   );

src/views/UserPage/UserDetailsContainer.js

@@ -3,9 +3,11 @@ import { UserPageView } from "./UserPageView";
 import { LinearProgress } from "@mui/material";
 import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
 import { useUserInfo } from "../../api/SwaggerApi";
+import { useParams } from "react-router-dom";
 import { userContext } from "@ess-ics/ce-ui-common/dist/contexts/User";
 
-export function UserDetailsContainer({ userName }) {
+export function UserDetailsContainer() {
+  const { userName } = useParams();
   const { user } = useContext(userContext);
   const [error, setError] = useState(null);
 
@@ -52,7 +54,7 @@ export function UserDetailsContainer({ userName }) {
           status={error?.status ?? "404"}
           message={error?.message}
         />
-      ) : user?.loginName === userName ? (
+      ) : user ? (
         <UserPageView
           userName={userName}
           user={user}

src/views/UserPage/UserPageView.js

-import React from "react";
+import React, { useContext, useEffect } from "react";
 import { Grid } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { RootContainer } from "../../components/common/Container/RootContainer";
+import { GlobalAppBarContext, RootPaper } from "@ess-ics/ce-ui-common";
+import { applicationTitle } from "../../components/common/Helper";
 import { UserProfile } from "../../components/common/User/UserProfile";
 import { UserIocList } from "../../components/common/User/UserIOCList";
 import { UserOperationList } from "../../components/common/User/UserOperationList";
 
-const PREFIX = "UserPage";
-
-const classes = {
-  paper: `${PREFIX}-paper`
-};
-
-const StyledRootContainer = styled(RootContainer)(({ theme }) => ({
-  [`& .${classes.paper}`]: {
-    maxWidth: "80%",
-    padding: theme.spacing(4)
-  }
-}));
-
 export function UserPageView({ userName, userInfo }) {
+  const { setTitle } = useContext(GlobalAppBarContext);
+  useEffect(() => setTitle(applicationTitle(userName)), [setTitle, userName]);
+
   return (
-    <StyledRootContainer>
+    <RootPaper>
       <Grid
         container
         spacing={1}
@@ -36,15 +26,15 @@ export function UserPageView({ userName, userInfo }) {
           item
           xs={12}
         >
-          <UserOperationList userName={userName} />
+          <UserIocList userName={userName} />
         </Grid>
         <Grid
           item
           xs={12}
         >
-          <UserIocList userName={userName} />
+          <UserOperationList userName={userName} />
         </Grid>
       </Grid>
-    </StyledRootContainer>
+    </RootPaper>
   );
 }

src/views/UserPage/index.js

 import { UserPageView } from "./UserPageView";
+import { UserDetailsAccessControl } from "./UserDetailsAccessControl";
+import { UserDetailsContainer } from "./UserDetailsContainer";
 
-export { UserPageView };
+export { UserPageView, UserDetailsAccessControl, UserDetailsContainer };
 export default UserPageView;