[WIP] add user lists to user tab

typescript/Frontend/src/components/Groups/Users/UserList.tsx

@@ -0,0 +1,22 @@
+import { List } from "@mui/material";
+import { ReactNode } from "react";
+
+const InnovenergyList = ({ children }: { children: ReactNode }) => {
+  return (
+    <List
+      sx={{
+        bgcolor: "background.paper",
+        position: "relative",
+        overflow: "auto",
+        maxHeight: 500,
+        pr: 2,
+      }}
+      component="nav"
+      aria-labelledby="nested-list-subheader"
+    >
+      {children}
+    </List>
+  );
+};
+
+export default InnovenergyList;

typescript/Frontend/src/components/Groups/Users/Users.tsx

@@ -1,99 +1,14 @@
-import List from "@mui/material/List";
-import ListItemText from "@mui/material/ListItemText";
-import { CircularProgress, Divider, Grid, ListItemIcon } from "@mui/material";
-import { Fragment, useContext, useEffect, useState } from "react";
-import axiosConfig from "../../../config/axiosConfig";
-import { useParams } from "react-router-dom";
-import ListItem from "@mui/material/ListItem";
-import GroupRemoveIcon from "@mui/icons-material/GroupRemove";
-import { User } from "../../../util/user.util";
-import { GroupContext } from "../../Context/GroupContextProvider";
-import { Link } from "react-router-dom";
-import routes from "../../../routes.json";
+import { Grid } from "@mui/material";
+import UsersWithDirectAccess from "./UsersWithDirectAccess";
+import UsersWithInheritedAccess from "./UsersWithInheritedAccess";
 
-const InstallationList = () => {
-  const [data, setData] = useState<any>();
-  const [loading, setLoading] = useState(false);
-
-  const { id } = useParams();
-  const { currentType } = useContext(GroupContext);
-
-  useEffect(() => {
-    setLoading(true);
-    axiosConfig
-      .get(
-        currentType === "Folder"
-          ? "/GetUsersWithAccessToFolder"
-          : "/GetUsersWithAccessToInstallation",
-        { params: { id } }
-      )
-      .then((res) => {
-        // TODO temp solution
-        const mappedData = res.data
-          .filter((element: any) => element.user)
-          .map((element: any) => element.user);
-        console.log(mappedData);
-        setData(mappedData);
-        setLoading(false);
-      });
-  }, [currentType, id]);
-
-  const filterDuplicateUsers = (data: any[]) => {
-    return data.reduce((prev: User[], curr: User) => {
-      const foundUser = prev.find((el) => el.id === curr.id);
-      if (foundUser) {
-        const prevIds = foundUser.folderIds ? foundUser.folderIds : [];
-        foundUser.folderIds = [...prevIds, curr.parentId];
-        return prev;
-      }
-      curr.folderIds = [curr.parentId];
-      prev.push(curr);
-      return prev;
-    }, []);
-  };
-
-  if (loading) {
+const Users = () => {
   return (
-      <Grid container justifyContent="center" width="100%">
-        <CircularProgress sx={{ m: 6 }} />
+    <Grid container sx={{ mt: 1 }}>
+      <UsersWithInheritedAccess />
+      <UsersWithDirectAccess />
     </Grid>
   );
-  }
-  if (data) {
-    return (
-      <List
-        sx={{
-          bgcolor: "background.paper",
-          position: "relative",
-          width: 500,
-        }}
-        component="nav"
-        aria-labelledby="nested-list-subheader"
-      >
-        {filterDuplicateUsers(data).map((user: User) => {
-          return (
-            <Fragment key={user.id}>
-              <ListItem>
-                <ListItemText
-                  primary={user.name}
-                  secondary={
-                    <>
-                      Inherited access from{" "}
-                      <Link to={routes.groups + routes.users + user.parentId}>
-                        this folder
-                      </Link>
-                    </>
-                  }
-                />
-              </ListItem>
-              <Divider />
-            </Fragment>
-          );
-        })}
-      </List>
-    );
-  }
-  return null;
 };
 
-export default InstallationList;
+export default Users;

typescript/Frontend/src/components/Groups/Users/UsersWithDirectAccess.tsx

@@ -0,0 +1,99 @@
+import {
+  Grid,
+  ListItem,
+  ListItemText,
+  Divider,
+  IconButton,
+  Avatar,
+  ListItemAvatar,
+  Typography,
+} from "@mui/material";
+import { Fragment, useCallback, useContext, useEffect, useState } from "react";
+import axiosConfig from "../../../config/axiosConfig";
+import { User } from "../../../util/user.util";
+import PersonRemoveIcon from "@mui/icons-material/PersonRemove";
+import { GroupContext } from "../../Context/GroupContextProvider";
+import { useParams } from "react-router-dom";
+import InnovenergyList from "./UserList";
+import PersonIcon from "@mui/icons-material/Person";
+import { FormattedMessage } from "react-intl";
+
+const UsersWithDirectAccess = () => {
+  const [users, setUsers] = useState<User[]>();
+
+  const { currentType } = useContext(GroupContext);
+  const { id } = useParams();
+
+  const fetchUsers = useCallback(async () => {
+    axiosConfig
+      .get(
+        currentType === "Folder"
+          ? "/GetUsersWithDirectAccessToFolder"
+          : "/GetUsersWithDirectAccessToInstallation",
+        { params: { id } }
+      )
+      .then((res) => {
+        setUsers(res.data);
+      });
+  }, [currentType, id]);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [currentType, fetchUsers, id]);
+
+  const handleIconClick = (userId: number) => {
+    const folderId = id ? parseInt(id) : "";
+    axiosConfig
+      .post(
+        currentType === "Folder"
+          ? "/RevokeUserAccessToFolder"
+          : "/RevokeUserAccessToInstallation",
+        { userId: userId, folderId: folderId }
+      )
+      .then((res) => {
+        fetchUsers();
+      });
+  };
+
+  if (users && users.length) {
+    return (
+      <Grid item xs={6}>
+        <Typography variant="overline" gutterBottom>
+          <FormattedMessage
+            id="usersWithDirectAccess"
+            defaultMessage="Users with direct access"
+          />
+        </Typography>
+        <InnovenergyList>
+          {users.map((user) => {
+            return (
+              <Fragment key={user.id}>
+                <ListItem
+                  secondaryAction={
+                    <IconButton
+                      onClick={() => handleIconClick(user.id)}
+                      edge="end"
+                    >
+                      <PersonRemoveIcon id={user.id.toString()} />
+                    </IconButton>
+                  }
+                >
+                  <ListItemAvatar>
+                    <Avatar>
+                      <PersonIcon />
+                    </Avatar>
+                  </ListItemAvatar>
+                  <ListItemText primary={user.name} />
+                </ListItem>
+                <Divider />
+              </Fragment>
+            );
+          })}
+        </InnovenergyList>
+      </Grid>
+    );
+  }
+  return null;
+};
+
+export default UsersWithDirectAccess;

typescript/Frontend/src/components/Groups/Users/UsersWithInheritedAccess.tsx

@@ -0,0 +1,103 @@
+import {
+  Grid,
+  ListItem,
+  ListItemText,
+  Divider,
+  ListItemAvatar,
+  Avatar,
+  Typography,
+} from "@mui/material";
+import { Fragment, useContext, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import axiosConfig from "../../../config/axiosConfig";
+import { UserWithInheritedAccess } from "../../../util/user.util";
+import { GroupContext } from "../../Context/GroupContextProvider";
+import routes from "../../../routes.json";
+import InnovenergyList from "./UserList";
+import PersonIcon from "@mui/icons-material/Person";
+import { FormattedMessage } from "react-intl";
+
+const UsersWithInheritedAccess = () => {
+  const [users, setUsers] = useState<UserWithInheritedAccess[]>();
+
+  const { currentType } = useContext(GroupContext);
+  const { id } = useParams();
+
+  useEffect(() => {
+    axiosConfig
+      .get(
+        currentType === "Folder"
+          ? "/GetUsersWithInheritedAccessToFolder"
+          : "/GetUsersWithInheritedAccessToInstallation",
+        { params: { id } }
+      )
+      .then((res) => {
+        setUsers(res.data);
+      });
+  }, [currentType, id]);
+
+  const filterDuplicateUsers = (data: any[]) => {
+    return data.reduce(
+      (prev: UserWithInheritedAccess[], curr: UserWithInheritedAccess) => {
+        const foundUser = prev.find(({ user }) => user.id === curr.user.id);
+        if (foundUser) {
+          const prevIds = foundUser.user.folderIds
+            ? foundUser.user.folderIds
+            : [];
+          foundUser.user.folderIds = [...prevIds, curr.user.parentId];
+          return prev;
+        }
+        curr.user.folderIds = [curr.user.parentId];
+        prev.push(curr);
+        return prev;
+      },
+      []
+    );
+  };
+  if (users && users.length) {
+    return (
+      <Grid item xs={6}>
+        <Typography variant="overline" gutterBottom>
+          <FormattedMessage
+            id="usersWithInheritedAccess"
+            defaultMessage="Users with inherited access"
+          />
+        </Typography>
+        <InnovenergyList>
+          {filterDuplicateUsers(users).map(
+            ({ user }: UserWithInheritedAccess) => {
+              return (
+                <Fragment key={user.id}>
+                  <ListItem>
+                    <ListItemAvatar>
+                      <Avatar>
+                        <PersonIcon />
+                      </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText
+                      primary={user.name}
+                      secondary={
+                        <>
+                          Inherited access from{" "}
+                          <Link
+                            to={routes.groups + routes.users + user.parentId}
+                          >
+                            this folder
+                          </Link>
+                        </>
+                      }
+                    />
+                  </ListItem>
+                  <Divider />
+                </Fragment>
+              );
+            }
+          )}
+        </InnovenergyList>
+      </Grid>
+    );
+  }
+  return null;
+};
+
+export default UsersWithInheritedAccess;

typescript/Frontend/src/util/user.util.tsx

@@ -10,3 +10,8 @@ export interface User {
   type: string;
   folderIds?: number[];
 }
+
+export interface UserWithInheritedAccess {
+  folderId: number;
+  user: User;
+}