From bc5fa1abb46f922813e5aebc4eed10a873686f76 Mon Sep 17 00:00:00 2001
From: Alexander Madsen <alexander.madsen@ess.eu>
Date: Tue, 12 Sep 2023 07:47:35 +0000
Subject: [PATCH] CE-2024: Revisement to user profile page
---
src/components/Job/JobTable.js | 24 +++++++-
src/components/common/User/UserIOCList.js | 4 +-
.../common/User/UserOperationList.js | 5 +-
src/components/common/User/UserProfile.js | 60 +++++++++++--------
.../NavigationMenu/LoginControls.js | 2 +-
.../UserPage/UserDetailsAccessControl.js | 4 +-
src/views/UserPage/UserDetailsContainer.js | 6 +-
src/views/UserPage/UserPageView.js | 30 ++++------
src/views/UserPage/index.js | 4 +-
9 files changed, 81 insertions(+), 58 deletions(-)
diff --git a/src/components/Job/JobTable.js b/src/components/Job/JobTable.js
index 9f4b8912..89f0bea5 100644
--- a/src/components/Job/JobTable.js
+++ b/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];
diff --git a/src/components/common/User/UserIOCList.js b/src/components/common/User/UserIOCList.js
index ccd470c2..93398e3e 100644
--- a/src/components/common/User/UserIOCList.js
+++ b/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"
diff --git a/src/components/common/User/UserOperationList.js b/src/components/common/User/UserOperationList.js
index 37140179..6f57ef0f 100644
--- a/src/components/common/User/UserOperationList.js
+++ b/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>
);
diff --git a/src/components/common/User/UserProfile.js b/src/components/common/User/UserProfile.js
index 103ea39d..934a4f00 100644
--- a/src/components/common/User/UserProfile.js
+++ b/src/components/common/User/UserProfile.js
@@ -1,33 +1,41 @@
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>
);
}
diff --git a/src/components/navigation/NavigationMenu/LoginControls.js b/src/components/navigation/NavigationMenu/LoginControls.js
index f5d8dc72..8e00b7cf 100644
--- a/src/components/navigation/NavigationMenu/LoginControls.js
+++ b/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" />
},
diff --git a/src/views/UserPage/UserDetailsAccessControl.js b/src/views/UserPage/UserDetailsAccessControl.js
index be5aa906..69f010ee 100644
--- a/src/views/UserPage/UserDetailsAccessControl.js
+++ b/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>
);
diff --git a/src/views/UserPage/UserDetailsContainer.js b/src/views/UserPage/UserDetailsContainer.js
index 0aac2aa7..868c4c84 100644
--- a/src/views/UserPage/UserDetailsContainer.js
+++ b/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}
diff --git a/src/views/UserPage/UserPageView.js b/src/views/UserPage/UserPageView.js
index f0885d8b..71d3681a 100644
--- a/src/views/UserPage/UserPageView.js
+++ b/src/views/UserPage/UserPageView.js
@@ -1,27 +1,17 @@
-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>
);
}
diff --git a/src/views/UserPage/index.js b/src/views/UserPage/index.js
index 232a503f..f77d92ac 100644
--- a/src/views/UserPage/index.js
+++ b/src/views/UserPage/index.js
@@ -1,4 +1,6 @@
import { UserPageView } from "./UserPageView";
+import { UserDetailsAccessControl } from "./UserDetailsAccessControl";
+import { UserDetailsContainer } from "./UserDetailsContainer";
-export { UserPageView };
+export { UserPageView, UserDetailsAccessControl, UserDetailsContainer };
export default UserPageView;
--
GitLab