style of the sharing table; link to the group/{group_id} page (#967)

* style of the sharing table; link to the group/{group_id} page

* precommits

Author: longshuicy

frontend/src/components/sharing/GroupAndRoleSubTable.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import TableContainer from "@mui/material/TableContainer";
 import Table from "@mui/material/Table";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import TableCell from "@mui/material/TableCell";
 import TableBody from "@mui/material/TableBody";
 import { GroupAndRoleSubTableEntry } from "./GroupAndRoleSubTableEntry";
 import { GroupOut } from "../../openapi/v2";
+import { TableRow } from "@mui/material";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
 
 type GroupAndRoleSubTableProps = {
 	group: GroupOut;
@@ -20,15 +20,17 @@ export function GroupAndRoleSubTable(props: GroupAndRoleSubTableProps) {
 			<Table
 				sx={{
 					minWidth: 650,
-					backgroundColor: "#EEEEEE",
+					fontSize: "0.8rem",
 				}}
-				aria-label="simple table"
+				size="small"
+				aria-label="group and roles table"
 			>
 				<TableHead>
 					<TableRow>
 						<TableCell />
-						<TableCell align="right">Name</TableCell>
-						<TableCell align="right">Email</TableCell>
+						<TableCell>Member Name</TableCell>
+						<TableCell align="right">Member Email</TableCell>
+						<TableCell align="right" />
 						<TableCell align="right" />
 					</TableRow>
 				</TableHead>

frontend/src/components/sharing/GroupAndRoleSubTableEntry.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import { UserOut } from "../../openapi/v2";
-import { Button } from "@mui/material";
+import { Link } from "@mui/material";
 import { theme } from "../../theme";
 import Gravatar from "react-gravatar";
 import PersonIcon from "@mui/icons-material/Person";
@@ -14,6 +14,8 @@ type GroupAndRoleSubTableEntryProps = {
 const iconStyle = {
 	verticalAlign: "middle",
 	color: theme.palette.primary.main,
+	width: "20px",
+	marginRight: "0.5em",
 };
 
 export function GroupAndRoleSubTableEntry(
@@ -24,30 +26,38 @@ export function GroupAndRoleSubTableEntry(
 	return (
 		<TableRow
 			key={user.id}
-			sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+			sx={{
+				"&:last-child td, &:last-child th": {
+					border: 0,
+				},
+				paddingLeft: 0,
+			}}
 		>
 			<TableCell />
-			<TableCell align="right">
+			<TableCell align="left">
 				{user.email ? (
 					<Gravatar
 						email={user.email}
 						rating="g"
 						style={{
-							width: "32px",
-							height: "32px",
+							width: "20px",
+							height: "20px",
 							borderRadius: "50%",
 							verticalAlign: "middle",
+							marginRight: "0.5em",
 						}}
 					/>
 				) : (
 					<PersonIcon sx={iconStyle} />
 				)}
-				<Button>
+				{/*TODO once personal profile page is ready link to it*/}
+				<Link sx={{ textDecoration: "None" }}>
 					{user.first_name} {user.last_name}
-				</Button>
+				</Link>
 			</TableCell>
 			<TableCell align="right">{user.email}</TableCell>
 			<TableCell align="right" />
+			<TableCell align="right" />
 		</TableRow>
 	);
 }

frontend/src/components/sharing/GroupAndRoleTable.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { RootState } from "../../types/data";
-import { useDispatch, useSelector } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
 import TableContainer from "@mui/material/TableContainer";
 import Table from "@mui/material/Table";
 import TableHead from "@mui/material/TableHead";
@@ -11,10 +10,6 @@ import TableBody from "@mui/material/TableBody";
 import { GroupAndRoleTableEntry } from "./GroupAndRoleTableEntry";
 
 export const GroupAndRoleTable = (): JSX.Element => {
-	const { datasetId } = useParams<{ datasetId?: string }>();
-
-	const dispatch = useDispatch();
-
 	const datasetRolesList = useSelector(
 		(state: RootState) => state.dataset.roles
 	);

frontend/src/components/sharing/GroupAndRoleTableEntry.tsx

@@ -32,7 +32,7 @@ import {
 	removeDatasetGroupRole,
 	setDatasetGroupRole,
 } from "../../actions/dataset";
-import { useParams } from "react-router-dom";
+import { Link as RouterLink, useParams } from "react-router-dom";
 import { GroupAndRoleSubTable } from "./GroupAndRoleSubTable";
 
 type GroupAndRoleTableEntryProps = {
@@ -133,7 +133,9 @@ export function GroupAndRoleTableEntry(props: GroupAndRoleTableEntryProps) {
 				</TableCell>
 				<TableCell>
 					<GroupIcon sx={iconStyle} />
-					<Button>{group_role.group.name}</Button>
+					<Button component={RouterLink} to={`/groups/${group_role.group.id}`}>
+						{group_role.group.name}
+					</Button>
 				</TableCell>
 				<TableCell align="right">
 					{group_role.group.users ? group_role.group.users.length : 0} members