[dashboard] Implement inviting team members

Author: jankeromnes

components/dashboard/src/App.tsx

@@ -29,6 +29,7 @@ const Preferences = React.lazy(() => import(/* webpackPrefetch: true */ './setti
 const StartWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ './start/StartWorkspace'));
 const CreateWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ './start/CreateWorkspace'));
 const NewTeam = React.lazy(() => import(/* webpackPrefetch: true */ './teams/NewTeam'));
+const JoinTeam = React.lazy(() => import(/* webpackPrefetch: true */ './teams/JoinTeam'));
 const Members = React.lazy(() => import(/* webpackPrefetch: true */ './teams/Members'));
 const Projects = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Projects'));
 const InstallGitHubApp = React.lazy(() => import(/* webpackPrefetch: true */ './prebuilds/InstallGitHubApp'));
@@ -154,7 +155,6 @@ function App() {
                 <Route path="/notifications" exact component={Notifications} />
                 <Route path="/plans" exact component={Plans} />
                 <Route path="/teams" exact component={Teams} />
-                <Route path="/new-team" exact component={NewTeam} />
                 <Route path="/variables" exact component={EnvironmentVariables} />
                 <Route path="/preferences" exact component={Preferences} />
                 <Route path="/install-github-app" exact component={InstallGitHubApp} />
@@ -184,6 +184,8 @@ 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} />
                 {(teams || []).map(team => <Route path={`/${team.slug}`}>
                     <Route exact path={`/${team.slug}`}>
                         <Redirect to={`/${team.slug}/projects`} />

components/dashboard/src/teams/JoinTeam.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { useContext, useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { getGitpodService } from "../service/service";
+import { TeamsContext } from "./teams-context";
+
+export default function() {
+    const { setTeams } = useContext(TeamsContext);
+    const history = useHistory();
+
+    const [ joinError, setJoinError ] = useState<Error>();
+    const teamId = new URL(window.location.href).searchParams.get('teamId');
+
+    useEffect(() => {
+        (async () => {
+            try {
+                if (!teamId) {
+                    throw new Error('This invite URL is incorrect: No team ID specified');
+                }
+                await getGitpodService().server.joinTeam(teamId);
+                const teams = await getGitpodService().server.getTeams();
+                const team = teams.find(t => t.id === teamId);
+                if (!team) {
+                    throw new Error('Failed to join team. Please contact support.');
+                }
+                setTeams(teams);
+                history.push(`/${team.slug}/members`);
+            } catch (error) {
+                console.error(error);
+                setJoinError(error);
+            }
+        })();
+    }, []);
+    return <div className="mt-16 text-center text-gitpod-red">{String(joinError)}</div>
+}

components/dashboard/src/teams/Members.tsx

@@ -9,7 +9,11 @@ import moment from "moment";
 import { useContext, useEffect, useState } from "react";
 import { 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 { TeamsContext, getCurrentTeam } from "./teams-context";
 
 
@@ -18,6 +22,7 @@ export default function() {
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
     const [ members, setMembers ] = useState<TeamMemberInfo[]>([]);
+    const [ showInviteModal, setShowInviteModal ] = useState<boolean>(false);
 
     useEffect(() => {
         if (!team) {
@@ -29,29 +34,105 @@ export default function() {
         })();
     }, [ team ]);
 
+    const getInviteURL = () => {
+        const link = new URL(window.location.href);
+        link.pathname = '/join-team';
+        link.search = '?teamId=' + team?.id;
+        return link.href;
+    }
+
+    const [ copied, setCopied ] = useState<boolean>(false);
+    const copyToClipboard = (text: string) => {
+        const el = document.createElement("textarea");
+        el.value = text;
+        document.body.appendChild(el);
+        el.select();
+        try {
+            document.execCommand("copy");
+        } finally {
+            document.body.removeChild(el);
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
     return <>
         <Header title="Members" subtitle="Manage team members." />
         <div className="lg:px-28 px-10">
-            <div className="mt-2 grid grid-cols-3 px-6 py-2 font-semibold border-t border-b border-gray-200 dark:border-gray-800">
-                <p className="pl-14">Name</p>
-                <p>Joined</p>
-                <p>Role</p>
-            </div>
-            {members.map(m => <div className="mt-2 grid grid-cols-3 p-6 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl">
-                <div className="flex items-center">
-                    <div className="w-14">{m.avatarUrl && <img className="rounded-full w-8 h-8" src={m.avatarUrl || ''} alt={m.fullName} />}</div>
-                    <div>
-                        <div className="text-base text-gray-900 dark:text-gray-50 font-medium">{m.fullName}</div>
-                        <p>{m.primaryEmail}</p>
+            <div className="flex mt-8">
+                <div className="flex">
+                    <div className="py-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16"><path fill="#A8A29E" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"/></svg>
                     </div>
+                    <input type="search" placeholder="Search Members" onChange={() => { /* TODO */ }} />
                 </div>
-                <div className="flex items-center">
-                    <div className="text-gray-400">{moment(m.memberSince).fromNow()}</div>
-                </div>
-                <div className="flex items-center">
-                    <div className=" text-gray-400">Owner</div>
+                <div className="flex-1" />
+                <div className="py-3 pl-3">
+                    <DropDown prefix="Role: " contextMenuWidth="w-32" activeEntry={'All'} entries={[{
+                        title: 'All',
+                        onClick: () => { /* TODO */ }
+                    }, {
+                        title: 'Owner',
+                        onClick: () => { /* TODO */ }
+                    }, {
+                        title: 'Member',
+                        onClick: () => { /* TODO */ }
+                    }]} />
                 </div>
-            </div>)}
+                <button onClick={() => setShowInviteModal(true)} className="ml-2">Invite Members</button>
+            </div>
+            <ItemsList className="mt-2">
+                <Item header={true} className="grid grid-cols-3">
+                    <ItemField>
+                        <span className="pl-14">Name</span>
+                    </ItemField>
+                    <ItemField>
+                        <span>Joined</span>
+                    </ItemField>
+                    <ItemField className="flex items-center">
+                        <span className="flex-grow">Role</span>
+                        <ItemFieldContextMenu />
+                    </ItemField>
+                </Item>
+                {members.map(m => <Item className="grid grid-cols-3">
+                    <ItemField className="flex items-center">
+                        <div className="w-14">{m.avatarUrl && <img className="rounded-full w-8 h-8" src={m.avatarUrl || ''} alt={m.fullName} />}</div>
+                        <div>
+                            <div className="text-base text-gray-900 dark:text-gray-50 font-medium">{m.fullName}</div>
+                            <p>{m.primaryEmail}</p>
+                        </div>
+                    </ItemField>
+                    <ItemField>
+                        <span className="text-gray-400">{moment(m.memberSince).fromNow()}</span>
+                    </ItemField>
+                    <ItemField className="flex items-center">
+                        <span className="text-gray-400 flex-grow capitalize">{m.role}</span>
+                        <ItemFieldContextMenu menuEntries={[
+                            {
+                                title: 'Remove',
+                                customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300',
+                                onClick: () => { /* TODO(janx) */ }
+                            },
+                        ]} />
+                    </ItemField>
+                </Item>)}
+            </ItemsList>
         </div>
+        {showInviteModal && <Modal visible={true} onClose={() => setShowInviteModal(false)}>
+            <h3 className="mb-4">Invite Members</h3>
+            <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 flex flex-col">
+                <label htmlFor="inviteUrl" className="font-medium">Invite URL</label>
+                <div className="w-full relative">
+                    <input name="inviteUrl" disabled={true} readOnly={true} type="text" value={getInviteURL()} className="rounded-md w-full truncate pr-8" />
+                    <div className="cursor-pointer" onClick={() => copyToClipboard(getInviteURL())}>
+                        <img src={copy} title="Copy Invite URL" className="absolute top-1/3 right-3" />
+                    </div>
+                </div>
+                <p className="mt-1 text-gray-500 text-sm">{copied ? 'Copied to clipboard!' : 'Use this URL to join this team as a Member.'}</p>
+            </div>
+            <div className="flex justify-end mt-6">
+                <button className="secondary" onClick={() => setShowInviteModal(false)}>Done</button>
+            </div>
+        </Modal>}
     </>;
 }

components/dashboard/src/workspaces/Workspaces.tsx

@@ -70,9 +70,7 @@ export default class Workspaces extends React.Component<WorkspacesProps, Workspa
             <div className="lg:px-28 px-10 pt-8 flex">
                 <div className="flex">
                     <div className="py-4">
-                        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path fillRule="evenodd" clipRule="evenodd" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z" fill="#A8A29E"/>
-                        </svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16"><path fill="#A8A29E" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"/></svg>
                     </div>
                     <input type="search" placeholder="Search Workspaces" onChange={(v) => { if (wsModel) wsModel.setSearch(v.target.value) }} />
                 </div>

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

@@ -12,4 +12,5 @@ export interface TeamDB {
     findMembersByTeam(teamId: string): Promise<TeamMemberInfo[]>;
     findTeamsByUser(userId: string): Promise<Team[]>;
     createTeam(userId: string, name: string): Promise<Team>;
+    addMemberToTeam(userId: string, teamId: string): Promise<void>;
 }

components/gitpod-db/src/typeorm/entity/db-team-membership.ts

@@ -4,6 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import { TeamMemberRole } from "@gitpod/gitpod-protocol";
 import { Entity, Column, PrimaryColumn, Index } from "typeorm";
 import { TypeORM } from "../typeorm";
 
@@ -21,6 +22,9 @@ export class DBTeamMembership {
   @Index("ind_userId")
   userId: string;
 
+  @Column("varchar")
+  role: TeamMemberRole;
+
   @Column("varchar")
   creationTime: string;
 

components/gitpod-db/src/typeorm/migration/1622468446118-TeamsAndProjects.ts

@@ -10,7 +10,7 @@ export class TeamsAndProjects1622468446118 implements MigrationInterface {
 
     public async up(queryRunner: QueryRunner): Promise<any> {
         await queryRunner.query("CREATE TABLE IF NOT EXISTS `d_b_team` (`id` char(36) NOT NULL, `name` varchar(255) NOT NULL, `slug` varchar(255) NOT NULL, `creationTime` varchar(255) NOT NULL, `deleted` tinyint(4) NOT NULL DEFAULT '0', `_lastModified` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6), PRIMARY KEY (`id`), KEY `ind_dbsync` (`_lastModified`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;");
-        await queryRunner.query("CREATE TABLE IF NOT EXISTS `d_b_team_membership` (`id` char(36) NOT NULL, `teamId` char(36) NOT NULL, `userId` char(36) NOT NULL, `creationTime` varchar(255) NOT NULL, `deleted` tinyint(4) NOT NULL DEFAULT '0', `_lastModified` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6), PRIMARY KEY (`id`), KEY `ind_teamId` (`teamId`), KEY `ind_userId` (`userId`), KEY `ind_dbsync` (`_lastModified`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;");
+        await queryRunner.query("CREATE TABLE IF NOT EXISTS `d_b_team_membership` (`id` char(36) NOT NULL, `teamId` char(36) NOT NULL, `userId` char(36) NOT NULL, `role` varchar(255) NOT NULL, `creationTime` varchar(255) NOT NULL, `deleted` tinyint(4) NOT NULL DEFAULT '0', `_lastModified` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6), PRIMARY KEY (`id`), KEY `ind_teamId` (`teamId`), KEY `ind_userId` (`userId`), KEY `ind_dbsync` (`_lastModified`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;");
         await queryRunner.query("CREATE TABLE IF NOT EXISTS `d_b_project` (`id` char(36) NOT NULL, `cloneUrl` varchar(255) NOT NULL, `teamId` char(36) NOT NULL, `appInstallationId` varchar(255) NOT NULL, `creationTime` varchar(255) NOT NULL, `deleted` tinyint(4) NOT NULL DEFAULT '0', `_lastModified` timestamp(6) NOT NULL DEFAULT CURRENT_TIMESTAMP(6) ON UPDATE CURRENT_TIMESTAMP(6), PRIMARY KEY (`id`), KEY `ind_teamId` (`teamId`), KEY `ind_dbsync` (`_lastModified`)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;");
     }
 

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

@@ -49,6 +49,7 @@ export class TeamDBImpl implements TeamDB {
             fullName: u.fullName || u.name,
             primaryEmail: User.getPrimaryEmail(u),
             avatarUrl: u.avatarUrl,
+            role: memberships.find(m => m.userId === u.id)!.role,
             memberSince: u.creationDate,
         }));
     }
@@ -85,8 +86,32 @@ export class TeamDBImpl implements TeamDB {
             id: uuidv4(),
             teamId: team.id,
             userId,
+            role: 'owner',
             creationTime: team.creationTime,
         });
         return team;
     }
+
+    public async addMemberToTeam(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) {
+            throw new Error('A team with this ID could not be found');
+        }
+        const membershipRepo = await this.getMembershipRepo();
+        const membership = await membershipRepo.findOne({ teamId, userId });
+        if (!!membership) {
+            throw new Error('You are already a member of this team');
+        }
+        await membershipRepo.save({
+            id: uuidv4(),
+            teamId: team.id,
+            userId,
+            role: 'member',
+            creationTime: new Date().toISOString(),
+        });
+    }
 }

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

@@ -111,6 +111,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getTeams(): Promise<Team[]>;
     getTeamMembers(teamId: string): Promise<TeamMemberInfo[]>;
     createTeam(name: string): Promise<Team>;
+    joinTeam(teamId: string): Promise<void>;
 
     // content service
     getContentBlobUploadUrl(name: string): Promise<string>

components/gitpod-protocol/src/protocol.ts

@@ -1197,10 +1197,13 @@ export interface Team {
     deleted?: boolean;
 }
 
+export type TeamMemberRole = "owner" | "member";
+
 export interface TeamMemberInfo {
     userId: string;
     fullName?: string;
     primaryEmail?: string;
     avatarUrl?: string;
+    role: TeamMemberRole;
     memberSince: string;
 }