[dashboard] Implement inviting team members #4490

jankeromnes · 2021-06-11T15:21:47Z

Fixes #4421

Depends on #4482 (← please merge that one first, then rebase here).

jankeromnes · 2021-06-11T15:40:45Z

Okay, this works! 🎉 Many thanks @AlexTugarev and @gtsiolis for helping test this! 🙏

The invite flow works well. 👍

Still to be done (e.g. as follow-ups after my holidays 😇):

Some UI bits have no effect (Member search, Member Role toggle, Remove member -- see "TODO"s in the code).
When joining fails (e.g. you try to join a second time), the error page is quite basic. It should probably be improved.
The URLs /new-team and /join-team maybe aren't ideal. Alternative suggestions welcome. 🙏

gtsiolis

Awesome work @jankeromnes! UX LGTM! Thanks for adding this! 🌟

Left a first round of comments that can easily slip into follow-up issues or PRs. 🏓

components/dashboard/src/App.tsx

gtsiolis · 2021-06-11T17:25:41Z

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

+        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');


suggestion: If you are already a team member, ideally we could a) redirect to the members page as usual and b) show a toast notification (see #3530) at the bottom of the page with this message. 🍞

fyi: Added follow up issue for this in #5925. 🏓

gtsiolis · 2021-06-11T17:42:34Z

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

+
+    public async addMemberToTeam(userId: string, teamId: string): Promise<void> {
+        if (teamId.length !== 36) {
+            throw new Error('This team ID is incorrect');


suggestion: Reminder to facelift these error pages and possibly include an action button. 🎗️

gtsiolis · 2021-06-11T17:43:58Z

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";


praise: Great to see this awesome component again! 🌟 Cc @corneliusludmann

components/dashboard/src/teams/Members.tsx

gtsiolis · 2021-06-11T17:48:04Z

components/dashboard/src/teams/Members.tsx

                </div>
-            </div>)}
+                <button onClick={() => setShowInviteModal(true)} className="ml-2">Invite Members</button>


question: Could we get the action button on the empty state of the projects page to also trigger the same modal? Makes sense?

components/dashboard/src/teams/Members.tsx

gtsiolis · 2021-06-11T18:21:07Z

components/dashboard/src/teams/Members.tsx

+                <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>


suggestion: Not sure if this is needed here but Close could be better and aligned with other similar modals with one secondary action button down here.

Suggested change

<button className="secondary" onClick={() => setShowInviteModal(false)}>Done</button>

<button className="secondary" onClick={() => setShowInviteModal(false)}>Close</button>

AlexTugarev · 2021-06-14T04:18:22Z

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

@@ -1416,6 +1406,13 @@ export class GitpodServerImpl<Client extends GitpodClient, Server extends Gitpod
        return this.teamDB.createTeam(user.id, name);
    }

+    public async joinTeam(teamId: string): Promise<void> {


this is tricky. it basically allow me to join any team, just by knowing the id, thus the id serves as password.
could a OTS help here? there is already a service in place.

I don't think reusing OTS fits the purpose here well. We'll need to associate teams and invalidate the tokens on user action. For the email-based invite we'll also need to associate an email. I think we should introduce a dedicated table for this.

svenefftinge · 2021-06-14T05:53:04Z

/werft run

👍 started the job as gitpod-build-jx-invite-team-members.5

svenefftinge · 2021-06-12T11:55:06Z

components/dashboard/src/teams/Members.tsx

+    const getInviteURL = () => {
+        const link = new URL(window.location.href);
+        link.pathname = '/join-team';
+        link.search = '?teamId=' + team?.id;


We'll need to generate invite IDs on the server, that can be invalidated.

svenefftinge · 2021-06-14T05:57:33Z

I'll continue.

svenefftinge · 2021-06-14T12:26:17Z

/werft run

👍 started the job as gitpod-build-jx-invite-team-members.10

svenefftinge · 2021-06-14T13:44:14Z

@AlexTugarev can you have another look?

AlexTugarev

Accepting invitation worked nicely, also rejection.

Left some comments/questions.

AlexTugarev · 2021-06-14T13:53:00Z

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

@@ -1416,6 +1406,42 @@ export class GitpodServerImpl<Client extends GitpodClient, Server extends Gitpod
        return this.teamDB.createTeam(user.id, name);
    }

+    public async joinTeam(inviteId: string): Promise<Team> {
+        const user = this.checkUser("joinTeam");
+        const invite = await this.teamDB.findTeamMembershipInviteById(inviteId);


30 sec for db-sync are negligible, right?

Yes, this is async and in most cases regional, too.

AlexTugarev · 2021-06-14T14:01:07Z

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

+    }
+
+    public async resetGenericInvite(teamId: string): Promise<TeamMembershipInvite> {
+        this.checkUser("getGenericInvite");


typo, should be resetGenericInvite

AlexTugarev · 2021-06-14T14:03:12Z

components/dashboard/src/teams/Members.tsx

            setMembers(infos);
+            if (!invite) {
+                invite = await getGitpodService().server.resetGenericInvite(team.id);


Why calling reset is nothing was found?

If there is no invite URL we want to create one.

AlexTugarev · 2021-06-14T14:04:32Z

components/dashboard/src/teams/Members.tsx

+    };
+
+    const resetInviteLink = async () => {
+        const newInvite = await getGitpodService().server.resetGenericInvite(team!.id);


why resetting by team.id? couldn't there be a race?

svenefftinge · 2021-06-15T06:51:46Z

/werft run

👍 started the job as gitpod-build-jx-invite-team-members.14

jankeromnes changed the title ~~[dashboard] Implement inviting and removing team members~~ [dashboard] Implement inviting team members Jun 11, 2021

jankeromnes force-pushed the jx/invite-team-members branch from 432b0fd to 201d63f Compare June 11, 2021 15:36

jankeromnes marked this pull request as ready for review June 11, 2021 15:37

jankeromnes requested review from gtsiolis, svenefftinge and AlexTugarev June 11, 2021 15:40

gtsiolis added the component: dashboard label Jun 11, 2021

gtsiolis approved these changes Jun 11, 2021

View reviewed changes

AlexTugarev reviewed Jun 14, 2021

View reviewed changes

svenefftinge reviewed Jun 14, 2021

View reviewed changes

svenefftinge self-assigned this Jun 14, 2021

jankeromnes added 2 commits June 14, 2021 08:03

[server] Optimize getTeamMembers (N queries → 1 query)

2f22291

[dashboard] Implement inviting team members

c12f5ec

svenefftinge force-pushed the jx/invite-team-members branch 4 times, most recently from 57523c1 to 0a8ef97 Compare June 14, 2021 12:06

svenefftinge force-pushed the jx/invite-team-members branch from 0a8ef97 to b82288f Compare June 14, 2021 12:51

svenefftinge force-pushed the jx/invite-team-members branch from b82288f to 23a0a76 Compare June 14, 2021 13:47

AlexTugarev approved these changes Jun 14, 2021

View reviewed changes

svenefftinge force-pushed the jx/invite-team-members branch from 23a0a76 to 4901d57 Compare June 14, 2021 15:49

[teams] Use invites that can be reset

7b72a71

svenefftinge force-pushed the jx/invite-team-members branch from 4901d57 to 7b72a71 Compare June 15, 2021 07:22

svenefftinge merged commit 99ec2a5 into main Jun 15, 2021

svenefftinge deleted the jx/invite-team-members branch June 15, 2021 11:06

This was referenced Jun 21, 2021

[server] Optimize getTeamMembers (N queries → 1 query) #4482

Closed

[dashboard] Improve team members page #4571

Merged

svenefftinge mentioned this pull request Jun 22, 2021

[server] Optimize query behind getTeamMembers #4470

Closed

gtsiolis mentioned this pull request Sep 29, 2021

Redirect users to the members list when trying to join a team they have already joined #5925

Closed

gtsiolis mentioned this pull request Oct 11, 2021

Allow users to invite team members by email #6154

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] Implement inviting team members #4490

[dashboard] Implement inviting team members #4490

jankeromnes commented Jun 11, 2021 •

edited

jankeromnes commented Jun 11, 2021 •

edited by werft-gitpod-dev-com bot

gtsiolis left a comment

gtsiolis Jun 11, 2021

gtsiolis Sep 29, 2021

gtsiolis Jun 11, 2021

gtsiolis Jun 11, 2021

gtsiolis Jun 11, 2021

gtsiolis Jun 11, 2021

AlexTugarev Jun 14, 2021

svenefftinge Jun 14, 2021

svenefftinge commented Jun 14, 2021 •

edited by werft-gitpod-dev-com bot

svenefftinge Jun 12, 2021

svenefftinge commented Jun 14, 2021

svenefftinge commented Jun 14, 2021 •

edited by werft-gitpod-dev-com bot

svenefftinge commented Jun 14, 2021

AlexTugarev left a comment

AlexTugarev Jun 14, 2021

svenefftinge Jun 14, 2021

AlexTugarev Jun 14, 2021

AlexTugarev Jun 14, 2021

svenefftinge Jun 15, 2021

AlexTugarev Jun 14, 2021

svenefftinge commented Jun 15, 2021 •

edited by werft-gitpod-dev-com bot

	<button className="secondary" onClick={() => setShowInviteModal(false)}>Done</button>
	<button className="secondary" onClick={() => setShowInviteModal(false)}>Close</button>

[dashboard] Implement inviting team members #4490

[dashboard] Implement inviting team members #4490

Conversation

jankeromnes commented Jun 11, 2021 • edited

jankeromnes commented Jun 11, 2021 • edited by werft-gitpod-dev-com bot

gtsiolis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svenefftinge commented Jun 14, 2021 • edited by werft-gitpod-dev-com bot

Choose a reason for hiding this comment

svenefftinge commented Jun 14, 2021

svenefftinge commented Jun 14, 2021 • edited by werft-gitpod-dev-com bot

svenefftinge commented Jun 14, 2021

AlexTugarev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svenefftinge commented Jun 15, 2021 • edited by werft-gitpod-dev-com bot

jankeromnes commented Jun 11, 2021 •

edited

jankeromnes commented Jun 11, 2021 •

edited by werft-gitpod-dev-com bot

svenefftinge commented Jun 14, 2021 •

edited by werft-gitpod-dev-com bot

svenefftinge commented Jun 14, 2021 •

edited by werft-gitpod-dev-com bot

svenefftinge commented Jun 15, 2021 •

edited by werft-gitpod-dev-com bot