[dashboard] Improve team members page

Author: jankeromnes

components/dashboard/src/App.tsx

@@ -154,7 +154,6 @@ function App() {
                 <Route path="/integrations" exact component={Integrations} />
                 <Route path="/notifications" exact component={Notifications} />
                 <Route path="/plans" exact component={Plans} />
-                <Route path="/teams" exact component={Teams} />
                 <Route path="/variables" exact component={EnvironmentVariables} />
                 <Route path="/preferences" exact component={Preferences} />
                 <Route path="/install-github-app" exact component={InstallGitHubApp} />
@@ -184,8 +183,11 @@ function App() {
                         <p className="mt-4 text-lg text-gitpod-red">{decodeURIComponent(getURLHash())}</p>
                     </div>
                 </Route>
-                <Route path="/new-team" exact component={NewTeam} />
-                <Route path="/join-team" exact component={JoinTeam} />
+                <Route path="/teams">
+                    <Route exact path="/teams" component={Teams} />
+                    <Route exact path="/teams/new" component={NewTeam} />
+                    <Route exact path="/teams/join" component={JoinTeam} />
+                </Route>
                 {(teams || []).map(team => <Route path={`/${team.slug}`}>
                     <Route exact path={`/${team.slug}`}>
                         <Redirect to={`/${team.slug}/projects`} />

components/dashboard/src/Menu.tsx

@@ -43,6 +43,9 @@ export default function Menu() {
     const showTeamsUI = user?.rolesOrPermissions?.includes('teams-and-projects') || window.location.hostname.endsWith('gitpod-dev.com') || window.location.hostname.endsWith('gitpod-io-dev.com');
     const team = getCurrentTeam(location, teams);
 
+    // Hide most of the top menu when in a full-page form.
+    const isMinimalUI = ['/new', '/teams/new'].includes(location.pathname);
+
     const [ teamMembers, setTeamMembers ] = useState<Record<string, TeamMemberInfo[]>>({});
     useEffect(() => {
         if (!showTeamsUI || !teams) {
@@ -106,7 +109,7 @@ export default function Menu() {
                     <Link to="/">
                         <img src={gitpodIcon} className="h-6" />
                     </Link>
-                    <div className="ml-2 text-base">
+                    {!isMinimalUI && <div className="ml-2 text-base">
                         {showTeamsUI
                             ? <ContextMenu classes="w-64 left-0" menuEntries={[
                                 {
@@ -136,7 +139,7 @@ export default function Menu() {
                                         <span className="flex-1 font-semibold">New Team</span>
                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" className="w-3.5"><path fill="currentColor" fill-rule="evenodd" d="M7 0a1 1 0 011 1v5h5a1 1 0 110 2H8v5a1 1 0 11-2 0V8H1a1 1 0 010-2h5V1a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                                     </div>,
-                                    onClick: () => history.push("/new-team"),
+                                    onClick: () => history.push("/teams/new"),
                                 }
                             ]}>
                                 <div className="flex p-1.5 pl-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
@@ -153,13 +156,13 @@ export default function Menu() {
                                 </ul>
                             </nav>
                         }
-                    </div>
+                    </div>}
                 </div>
                 <div className="flex flex-1 items-center w-auto" id="menu">
                     <nav className="flex-1">
                         <ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
                             <li className="flex-1"></li>
-                            {rightMenu.map(entry => <li key={entry.title}>
+                            {!isMinimalUI && rightMenu.map(entry => <li key={entry.title}>
                                 <PillMenuItem name={entry.title} selected={isSelected(entry, location)} link={entry.link}/>
                             </li>)}
                         </ul>
@@ -186,10 +189,10 @@ export default function Menu() {
                     </div>
                 </div>
             </div>
-            {showTeamsUI && <div className="flex">
+            {!isMinimalUI && showTeamsUI && <div className="flex">
                 {leftMenu.map(entry => <TabMenuItem name={entry.title} selected={isSelected(entry, location)} link={entry.link}/>)}
             </div>}
         </header>
-        {showTeamsUI && <Separator />}
+        {!isMinimalUI && showTeamsUI && <Separator />}
     </>;
 }

components/dashboard/src/teams/Members.tsx

@@ -7,18 +7,21 @@
 import { TeamMemberInfo, TeamMembershipInvite } from "@gitpod/gitpod-protocol";
 import moment from "moment";
 import { useContext, useEffect, useState } from "react";
-import { useLocation } from "react-router";
+import { useHistory, useLocation } from "react-router";
 import Header from "../components/Header";
 import DropDown from "../components/DropDown";
 import { ItemsList, Item, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
 import Modal from "../components/Modal";
-import { getGitpodService } from "../service/service";
 import copy from '../images/copy.svg';
+import { getGitpodService } from "../service/service";
+import { UserContext } from "../user-context";
 import { TeamsContext, getCurrentTeam } from "./teams-context";
 
 
 export default function() {
-    const { teams } = useContext(TeamsContext);
+    const { user } = useContext(UserContext);
+    const { teams, setTeams } = useContext(TeamsContext);
+    const history = useHistory();
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
     const [ members, setMembers ] = useState<TeamMemberInfo[]>([]);
@@ -41,7 +44,7 @@ export default function() {
 
     const getInviteURL = (inviteId: string) => {
         const link = new URL(window.location.href);
-        link.pathname = '/join-team';
+        link.pathname = '/teams/join';
         link.search = '?inviteId=' + inviteId;
         return link.href;
     }
@@ -70,6 +73,20 @@ export default function() {
         }
     }
 
+    const removeTeamMember = async (userId: string) => {
+        await getGitpodService().server.removeTeamMember(team!.id, userId);
+        const newTeams = await getGitpodService().server.getTeams();
+        if (newTeams.some(t => t.id === team!.id)) {
+            // We're still a member of this team.
+            const newMembers = await getGitpodService().server.getTeamMembers(team!.id);
+            setMembers(newMembers);
+        } else {
+            // We're no longer a member of this team (note: we navigate away first in order to avoid a 404).
+            history.push('/');
+            setTeams(newTeams);
+        }
+    }
+
     return <>
         <Header title="Members" subtitle="Manage team members." />
         <div className="lg:px-28 px-10">
@@ -100,8 +117,9 @@ export default function() {
                     <ItemField>
                         <span className="pl-14">Name</span>
                     </ItemField>
-                    <ItemField>
+                    <ItemField className="flex items-center space-x-1">
                         <span>Joined</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" className="h-4 w-4" viewBox="0 0 16 16"><path fill="#A8A29E" fill-rule="evenodd" d="M13.366 8.234a.8.8 0 010 1.132l-4.8 4.8a.8.8 0 01-1.132 0l-4.8-4.8a.8.8 0 111.132-1.132L7.2 11.67V2.4a.8.8 0 111.6 0v9.269l3.434-3.435a.8.8 0 011.132 0z" clip-rule="evenodd"/></svg>
                     </ItemField>
                     <ItemField className="flex items-center">
                         <span className="flex-grow">Role</span>
@@ -123,10 +141,10 @@ export default function() {
                         <span className="text-gray-400 flex-grow capitalize">{m.role}</span>
                         <ItemFieldContextMenu menuEntries={[
                             {
-                                title: 'Remove',
+                                title: (m.userId === user?.id) ? 'Leave Team' : 'Remove',
                                 customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300',
-                                onClick: () => { /* TODO(janx) */ }
-                            },
+                                onClick: () => removeTeamMember(m.userId)
+                            }
                         ]} />
                     </ItemField>
                 </Item>)}

components/dashboard/src/teams/NewTeam.tsx

@@ -27,7 +27,7 @@ export default function () {
             setCreationError(error);
         }
     }
-    return <div className="flex flex-col w-96 mt-16 mx-auto items-center">
+    return <div className="flex flex-col w-96 mt-24 mx-auto items-center">
         <h1>New Team</h1>
         <p className="text-gray-500 text-center text-base">Teams allow you to <strong>group multiple projects</strong>, <strong>collaborate with others</strong>, <strong>manage subscriptions</strong> with one centralized billing, and more. <a className="learn-more" href="https://www.gitpod.io/docs/teams/">Learn more</a></p>
         <form className="mt-16 w-full" onSubmit={createTeam}>

components/gitpod-db/src/team-db.ts

@@ -13,6 +13,7 @@ export interface TeamDB {
     findTeamsByUser(userId: string): Promise<Team[]>;
     createTeam(userId: string, name: string): Promise<Team>;
     addMemberToTeam(userId: string, teamId: string): Promise<void>;
+    removeMemberFromTeam(userId: string, teamId: string): Promise<void>;
     findTeamMembershipInviteById(inviteId: string): Promise<TeamMembershipInvite>;
     findGenericInviteByTeamId(teamId: string): Promise<TeamMembershipInvite | undefined>;
     resetGenericInvite(teamId: string): Promise<TeamMembershipInvite>;

components/gitpod-db/src/typeorm/team-db-impl.ts

@@ -41,30 +41,34 @@ export class TeamDBImpl implements TeamDB {
 
     public async findTeamById(teamId: string): Promise<Team | undefined> {
         const teamRepo = await this.getTeamRepo();
-        return teamRepo.findOne({ id: teamId });
+        return teamRepo.findOne({ id: teamId, deleted: false });
     }
 
     public async findMembersByTeam(teamId: string): Promise<TeamMemberInfo[]> {
         const membershipRepo = await this.getMembershipRepo();
         const userRepo = await this.getUserRepo();
-        const memberships = await membershipRepo.find({ teamId });
+        const memberships = await membershipRepo.find({ teamId, deleted: false });
         const users = await userRepo.findByIds(memberships.map(m => m.userId));
-        const infos = users.map(u => ({
-            userId: u.id,
-            fullName: u.fullName || u.name,
-            primaryEmail: User.getPrimaryEmail(u),
-            avatarUrl: u.avatarUrl,
-            role: memberships.find(m => m.userId === u.id)!.role,
-            memberSince: u.creationDate,
-        }));
+        const infos = users.map(u => {
+            const m = memberships.find(m => m.userId === u.id)!;
+            return {
+                userId: u.id,
+                fullName: u.fullName || u.name,
+                primaryEmail: User.getPrimaryEmail(u),
+                avatarUrl: u.avatarUrl,
+                role: m.role,
+                memberSince: m.creationTime,
+            };
+        });
         return infos.sort((a,b) => a.memberSince < b.memberSince ? 1 : (a.memberSince === b.memberSince ? 0 : -1));
     }
 
     public async findTeamsByUser(userId: string): Promise<Team[]> {
         const teamRepo = await this.getTeamRepo();
         const membershipRepo = await this.getMembershipRepo();
-        const memberships = await membershipRepo.find({ userId });
-        return teamRepo.findByIds(memberships.map(m => m.teamId));
+        const memberships = await membershipRepo.find({ userId, deleted: false });
+        const teams = await teamRepo.findByIds(memberships.map(m => m.teamId));
+        return teams.filter(t => !t.deleted);
     }
 
     public async createTeam(userId: string, name: string): Promise<Team> {
@@ -76,7 +80,7 @@ export class TeamDBImpl implements TeamDB {
         }
         const slug = name.toLocaleLowerCase().replace(/ /g, '-');
         const teamRepo = await this.getTeamRepo();
-        const existingTeam = await teamRepo.findOne({ slug });
+        const existingTeam = await teamRepo.findOne({ slug, deleted: false });
         if (!!existingTeam) {
             throw new Error('A team with this name already exists');
         }
@@ -104,11 +108,11 @@ export class TeamDBImpl implements TeamDB {
         }
         const teamRepo = await this.getTeamRepo();
         const team = await teamRepo.findOneById(teamId);
-        if (!team) {
+        if (!team || !!team.deleted) {
             throw new Error('A team with this ID could not be found');
         }
         const membershipRepo = await this.getMembershipRepo();
-        const membership = await membershipRepo.findOne({ teamId, userId });
+        const membership = await membershipRepo.findOne({ teamId, userId, deleted: false });
         if (!!membership) {
             throw new Error('You are already a member of this team');
         }
@@ -121,6 +125,24 @@ export class TeamDBImpl implements TeamDB {
         });
     }
 
+    public async removeMemberFromTeam(userId: string, teamId: string): Promise<void> {
+        if (teamId.length !== 36) {
+            throw new Error('This team ID is incorrect');
+        }
+        const teamRepo = await this.getTeamRepo();
+        const team = await teamRepo.findOneById(teamId);
+        if (!team || !!team.deleted) {
+            throw new Error('A team with this ID could not be found');
+        }
+        const membershipRepo = await this.getMembershipRepo();
+        const membership = await membershipRepo.findOne({ teamId, userId, deleted: false });
+        if (!membership) {
+            throw new Error('You are not currently a member of this team');
+        }
+        membership.deleted = true;
+        await membershipRepo.save(membership);
+    }
+
     public async findTeamMembershipInviteById(inviteId: string): Promise<TeamMembershipInvite> {
         const inviteRepo = await this.getMembershipInviteRepo();
         const invite = await inviteRepo.findOneById(inviteId);

components/gitpod-protocol/src/gitpod-service.ts

@@ -112,6 +112,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getTeamMembers(teamId: string): Promise<TeamMemberInfo[]>;
     createTeam(name: string): Promise<Team>;
     joinTeam(inviteId: string): Promise<Team>;
+    removeTeamMember(teamId: string, userId: string): Promise<void>;
     getGenericInvite(teamId: string): Promise<TeamMembershipInvite>;
     resetGenericInvite(inviteId: string): Promise<TeamMembershipInvite>;
 

components/server/src/auth/rate-limiter.ts

@@ -82,6 +82,7 @@ function readConfig(): RateLimiterConfig {
         "getTeamMembers": { group: "default", points: 1 },
         "createTeam": { group: "default", points: 1 },
         "joinTeam": { group: "default", points: 1 },
+        "removeTeamMember": { group: "default", points: 1 },
         "getGenericInvite": { group: "default", points: 1 },
         "resetGenericInvite": { group: "default", points: 1 },
         "getContentBlobUploadUrl": { group: "default", points: 1 },

components/server/src/auth/resource-access.ts

@@ -156,7 +156,18 @@ export class OwnerResourceGuard implements ResourceAccessGuard {
             case "envVar":
                 return resource.subject.userId === this.userId;
             case "team":
-                return resource.members.some(m => m.userId === this.userId);
+                switch (operation) {
+                    case "create":
+                        // Anyone can create a new team.
+                        return true;
+                    case "get":
+                        // Only members can get infos about a team.
+                        return resource.members.some(m => m.userId === this.userId);
+                    case "update":
+                    case "delete":
+                        // Only owners can update or delete a team.
+                        return resource.members.some(m => m.userId === this.userId && m.role === "owner");
+                }
         }
     }
 

components/server/src/workspace/gitpod-server-impl.ts

@@ -1417,6 +1417,13 @@ export class GitpodServerImpl<Client extends GitpodClient, Server extends Gitpod
         return team!;
     }
 
+    public async removeTeamMember(teamId: string, userId: string): Promise<void> {
+        const user = this.checkUser("removeTeamMember");
+        // Users are free to leave any team themselves, but only owners can remove others from their teams.
+        await this.guardTeamOperation(teamId, user.id === userId ? "get" : "update");
+        await this.teamDB.removeMemberFromTeam(userId, teamId);
+    }
+
     public async getGenericInvite(teamId: string): Promise<TeamMembershipInvite> {
         this.checkUser("getGenericInvite");
         await this.guardTeamOperation(teamId, "get");