From c0546d355a2a2790633a70844cf7ae51ce27b430 Mon Sep 17 00:00:00 2001
From: Tom Herold <tom.herold@scalableminds.com>
Date: Tue, 14 Mar 2023 15:37:44 +0100
Subject: [PATCH] applied PR feedback

---
 .../javascripts/admin/team/team_list_view.tsx | 60 +++++++++++++------
 .../javascripts/admin/user/user_list_view.tsx | 27 ++-------
 2 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/frontend/javascripts/admin/team/team_list_view.tsx b/frontend/javascripts/admin/team/team_list_view.tsx
index 957056025c1..b3b616d6c10 100644
--- a/frontend/javascripts/admin/team/team_list_view.tsx
+++ b/frontend/javascripts/admin/team/team_list_view.tsx
@@ -26,6 +26,47 @@ type State = {
   isTeamCreationModalVisible: boolean;
 };
 
+export function renderTeamRolesAndPermissionsForUser(user: APIUser) {
+  //used by user list page
+  const tags = [
+    ...(user.isOrganizationOwner ? [["Organization Owner", "cyan"]] : []),
+    ...(user.isAdmin
+      ? [["Admin - Access to all Teams", "red"]]
+      : [
+          ...(user.isDatasetManager ? [["Dataset Manager - Edit all Datasets", "geekblue"]] : []),
+          ...user.teams.map((team) => {
+            const roleName = team.isTeamManager ? "Team Manager" : "Member";
+            return [`${team.name}: ${roleName}`, stringToColor(roleName)];
+          }),
+        ]),
+  ];
+
+  return tags.map(([text, color]) => (
+    <Tag key={`${text}_${user.id}`} color={color} style={{ marginBottom: 4 }}>
+      {text}
+    </Tag>
+  ));
+}
+
+function renderTeamRolesForUser(user: APIUser, highlightedTeam: APITeam) {
+  // used by teams list page
+  // does not include dataset managers and team names
+  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>
+  ));
+}
+
 const persistence = new Persistence<Pick<State, "searchQuery">>(
   {
     searchQuery: PropTypes.string,
@@ -118,23 +159,6 @@ 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) =>
@@ -148,7 +172,7 @@ class TeamListView extends React.PureComponent<Props, State> {
         {teamMembers.map((teamMember) => (
           <li>
             {teamMember.firstName} {teamMember.lastName} ({teamMember.email}){" "}
-            {this.renderTeamRolesForUser(teamMember, team)}
+            {renderTeamRolesForUser(teamMember, team)}
           </li>
         ))}
       </ul>
diff --git a/frontend/javascripts/admin/user/user_list_view.tsx b/frontend/javascripts/admin/user/user_list_view.tsx
index 744d6896307..8aad0ed4772 100644
--- a/frontend/javascripts/admin/user/user_list_view.tsx
+++ b/frontend/javascripts/admin/user/user_list_view.tsx
@@ -31,7 +31,6 @@ import type { OxalisState } from "oxalis/store";
 import { enforceActiveUser } from "oxalis/model/accessors/user_accessor";
 import LinkButton from "components/link_button";
 import { getEditableUsers, updateUser } from "admin/admin_rest_api";
-import { stringToColor } from "libs/format_utils";
 import EditableTextLabel from "oxalis/view/components/editable_text_label";
 import ExperienceModalView from "admin/user/experience_modal_view";
 import Persistence from "libs/persistence";
@@ -43,6 +42,7 @@ import messages from "messages";
 import { logoutUserAction } from "../../oxalis/model/actions/user_actions";
 import Store from "../../oxalis/store";
 import { enforceActiveOrganization } from "oxalis/model/accessors/organization_accessors";
+import { renderTeamRolesAndPermissionsForUser } from "admin/team/team_list_view";
 
 const { Column } = Table;
 const { Search } = Input;
@@ -543,28 +543,9 @@ class UserListView extends React.PureComponent<Props, State> {
               dataIndex="teams"
               key="teams_"
               width={250}
-              render={(_teams: APITeamMembership[], user: APIUser) => {
-                const tags = [
-                  ...(user.isOrganizationOwner ? [["Organization Owner", "cyan"]] : []),
-                  ...(user.isAdmin
-                    ? [["Admin - Access to all Teams", "red"]]
-                    : [
-                        ...(user.isDatasetManager
-                          ? [["Dataset Manager - Edit all Datasets", "geekblue"]]
-                          : []),
-                        ...user.teams.map((team) => {
-                          const roleName = team.isTeamManager ? "Team Manager" : "Member";
-                          return [`${team.name}: ${roleName}`, stringToColor(roleName)];
-                        }),
-                      ]),
-                ];
-
-                return tags.map(([text, color]) => (
-                  <Tag key={`${text}_${user.id}`} color={color} style={{ marginBottom: 4 }}>
-                    {text}
-                  </Tag>
-                ));
-              }}
+              render={(_teams: APITeamMembership[], user: APIUser) =>
+                renderTeamRolesAndPermissionsForUser(user)
+              }
             />
             <Column
               title="Status"