Added members to admin team page

CHANGELOG.unreleased.md

@@ -12,6 +12,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Added
 - Added support for remote Zarr datasets with a `datasource-properties.json` as created by the WEBKNOSSOS Python library. [#6879](https://github.com/scalableminds/webknossos/pull/6879)
+- Added list of all respective team members to the administration page for teams. [#6915](https://github.com/scalableminds/webknossos/pull/6915)
 
 ### Changed
 - Upgraded antd UI library to v4.24.8 [#6865](https://github.com/scalableminds/webknossos/pull/6865)

frontend/javascripts/admin/team/team_list_view.tsx

@@ -1,27 +1,31 @@
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@sca... Remove this comment to see the full error message
 import { PropTypes } from "@scalableminds/prop-types";
-import { Table, Spin, Button, Input, Modal, Alert } from "antd";
+import { Table, Spin, Button, Input, Modal, Alert, Tag } from "antd";
 import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import * as React from "react";
 import _ from "lodash";
-import type { APITeam } from "types/api_flow_types";
-import { getEditableTeams, deleteTeam } from "admin/admin_rest_api";
+import type { APITeam, APITeamMembership, APIUser } from "types/api_flow_types";
+import { getEditableTeams, deleteTeam, getEditableUsers } from "admin/admin_rest_api";
 import { handleGenericError } from "libs/error_handling";
 import LinkButton from "components/link_button";
 import CreateTeamModal from "admin/team/create_team_modal_view";
 import Persistence from "libs/persistence";
 import * as Utils from "libs/utils";
 import messages from "messages";
+import { stringToColor } from "libs/format_utils";
 const { Column } = Table;
 const { Search } = Input;
 const typeHint: APITeam[] = [];
+
 type Props = {};
 type State = {
   isLoading: boolean;
-  teams: Array<APITeam>;
+  teams: APITeam[];
+  users: APIUser[];
   searchQuery: string;
   isTeamCreationModalVisible: boolean;
 };
+
 const persistence = new Persistence<Pick<State, "searchQuery">>(
   {
     searchQuery: PropTypes.string,
@@ -33,6 +37,7 @@ class TeamListView extends React.PureComponent<Props, State> {
   state: State = {
     isLoading: true,
     teams: [],
+    users: [],
     searchQuery: "",
     isTeamCreationModalVisible: false,
   };
@@ -48,10 +53,11 @@ class TeamListView extends React.PureComponent<Props, State> {
   }
 
   async fetchData(): Promise<void> {
-    const teams = await getEditableTeams();
+    const [teams, users] = await Promise.all([getEditableTeams(), getEditableUsers()]);
     this.setState({
       isLoading: false,
       teams,
+      users,
     });
   }
 
@@ -112,6 +118,43 @@ class TeamListView extends React.PureComponent<Props, State> {
     );
   }
 
+  renderTeamRolesForUser(user: APIUser, highlightedTeam: APITeam) {
+    const tags = user.isAdmin
+      ? [["Admin - Access to all Teams", "red"]]
+      : user.teams
+          .filter((team) => team.id === highlightedTeam.id)
+          .map((team) => {
+            const roleName = team.isTeamManager ? "Team Manager" : "Member";
+            return [`${roleName}`, stringToColor(roleName)];
+          });
+
+    return tags.map(([text, color]) => (
+      <Tag key={`${text}_${user.id}`} color={color} style={{ marginBottom: 4 }}>
+        {text}
+      </Tag>
+    ));
+  }
+
+  renderUsersForTeam(team: APITeam) {
+    const teamMembers = this.state.users.filter(
+      (user) =>
+        user.teams.some((userTeam: APITeamMembership) => userTeam.id === team.id) || user.isAdmin,
+    );
+
+    if (teamMembers.length === 0) return messages["team.no_members"];
+
+    return (
+      <ul>
+        {teamMembers.map((teamMember) => (
+          <li>
+            {teamMember.firstName} {teamMember.lastName} ({teamMember.email}){" "}
+            {this.renderTeamRolesForUser(teamMember, team)}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
   render() {
     const marginRight = {
       marginRight: 20,
@@ -165,6 +208,10 @@ class TeamListView extends React.PureComponent<Props, State> {
               pagination={{
                 defaultPageSize: 50,
               }}
+              expandable={{
+                expandedRowRender: (team) => this.renderUsersForTeam(team),
+                rowExpandable: (_team) => true,
+              }}
               style={{
                 marginTop: 30,
                 marginBottom: 30,

frontend/javascripts/messages.tsx

@@ -356,6 +356,7 @@ instead. Only enable this option if you understand its effect. All layers will n
     "This download does only include the volume data annotated in the tasks of this project. The fallback volume data is excluded.",
   "script.delete": "Do you really want to delete this script?",
   "team.delete": "Do you really want to delete this team?",
+  "team.no_members": "This team has no members assigned yet.",
   "taskType.delete": "Do you really want to delete this task type and all its associated tasks?",
   "auth.registration_email_input": "Please input your E-mail!",
   "auth.registration_email_invalid": "The input is not valid E-mail!",