[dashboard] Implement Teams UI (selector, creation wizard, members page, project page) #4401

jankeromnes · 2021-06-06T06:59:05Z

TODO:

Update the top navigtation with tabs so that Workspaces and Settings are palced below the account dropdown
Move the Admin item to the right menu
Introduce a dropdown to switch between teams as well as create new teams
Introduce a full page form to create a team
Polish account dropdown to better align with spec
Toggle Teams & Projects UI on-and-off with a permission (thanks @svenefftinge for [t&p] added permission #4396!)
Surface basic membership information for Teams (e.g. user ID + full name)
A team is reachable by its URL which is https://gitpod.io/<teamname>
Disallow team names that are also user names or that conflict with dashboard URLs (EDIT now tracked here: [Teams] Disallow team names that are also user names or that conflict with dashboard URLs #4469)

jankeromnes · 2021-06-06T15:36:53Z

Currently looks like this:

The new Teams UI can also be disabled (showTeams=false), making the top menu look almost exactly like before (except Admin is now on the right):

svenefftinge · 2021-06-07T06:55:07Z

Can you also include #4354 in this PR (see)?

jankeromnes · 2021-06-07T06:59:20Z

@svenefftinge Sure, many thanks!

jankeromnes · 2021-06-08T14:43:54Z

Well, at least the new check works! 🤣

  1) TeamDBSpec
       createAndFindATeam:
     Error: Team name should match /^[A-Za-z0-9]+$/

https://github.com/gitpod-io/gitpod/blob/f83bfadeebe840ee38d95ca5b50d2b30753079ca/components/gitpod-db/src/team-db.spec.db.ts#L45

jankeromnes · 2021-06-09T10:31:32Z

Alright, this is now ready for review. 🎉

Please take a look! 🙏 In particular:

@svenefftinge and @gtsiolis could you please review the overall UX?
@AlexTugarev could you please review the addition of teams to the UserContext?
@csweichel could you please review the GuardedTeam access guard?

Notes: I'm happy to make any fixes/adjustments, but in the interest of time, I'll probably make larger changes in follow-up Pull Requests (in order to merge soon and unblock others from working on these pages too.) -- For example, there is still no team name deny-list, so you can create teams called "settings" or "workspaces" 😬 (will fix that next).

svenefftinge

code looks good!

components/dashboard/src/Login.tsx

svenefftinge · 2021-06-09T11:12:16Z

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

+        const memberships = await this.teamDB.findMembershipsByTeam(team.id);
+        await this.guardAccess({ kind: "team", subject: team, memberships }, "get");
+        return Promise.all(memberships.map(async (m: DBTeamMembership): Promise<TeamMemberInfo> => {
+            const member = await this.userDB.findUserById(m.userId);


Depending on the team size this can become expensive. A single SQL query would be better.

svenefftinge · 2021-06-09T11:15:23Z

Disallow team names that are also user names or that conflict with dashboard URLs

would be good to move this to an issue, so we don't forget :-)

gtsiolis · 2021-06-09T22:20:26Z

/werft run

👍 started the job as gitpod-build-jx-teams-ui.40

gtsiolis

Clicking those tabs feels so good! Thanks for adding this @jankeromnes! 🌟

Left some first-round comments, feel free to open follow up issues for anything that can go in a later PR or ingore any comments that seem minor. 🏀

components/dashboard/src/App.tsx

gtsiolis · 2021-06-09T22:26:56Z

components/dashboard/src/components/Menu.tsx

+                                }
+                            ]}>
+                                <div className="flex p-1.5 pl-3 rounded-lg hover:bg-gray-200">
+                                    <span className="text-base text-gray-600 font-semibold">{team?.name || userFullName}</span>


issue: Reminder to restore the colors for dark theme! These can use the colors of the menu items on the right. Font size can be text-sm! 🌙

@gtsiolis Unless I'm looking at the wrong spec, the Figma file currently has text-base (i.e. 16px) for team member names, not text-sm (i.e. 14px).

@jankeromnes You are absolutely right! The initial specs are using 16px for the main and secondary navigation on the top right which is now still using a 14px size. May I suggest the following two items:

Either use the smaller size of align all navigation elements and make sure they are using a 32px height?

If we go with the specs (16px), semibold here is rendering quite bold so I'd either change the font weight to medium or even better enable font-smoothing for the product as in https://github.com/gitpod-io/website/pull/222.

Now tracked in #4471

gtsiolis · 2021-06-09T22:29:04Z

components/dashboard/src/components/Menu.tsx

+                                ...(teams || []).map(t => ({
+                                    title: t.name,
+                                    customContent: <div className="w-full text-gray-400 flex flex-col">
+                                        <span className="text-gray-800 text-base font-semibold">{t.name}</span>


issue: Reminder to add colors for dark theme and use text-sm font size!

Suggested change

<span className="text-gray-800 text-base font-semibold">{t.name}</span>

<span className="text-gray-800 text-sm dark:text-gray-300 font-semibold">{t.name}</span>

@gtsiolis: The spec currently has text-base a.k.a. 16px as font size for team names in the team switcher-menu.

Now tracked in #4471

components/dashboard/src/teams/NewTeam.tsx

gtsiolis · 2021-06-09T22:33:42Z

components/dashboard/src/components/Menu.tsx

+                    </Link>
+                    <div className="ml-2 text-base">
+                        {showTeamsUI
+                            ? <ContextMenu classes="w-64 left-0" menuEntries={[


question: Could we bg-gray-100 on hover and also use this background for the currently active team? 💭

Now tracked in #4471

components/dashboard/src/projects/Projects.tsx

components/dashboard/src/teams/NewTeam.tsx

gtsiolis · 2021-06-09T22:44:03Z

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

-                <Tab name='Recent' setSelection={setSelection} selection={selection} />
-                <Tab name='Examples' setSelection={setSelection} selection={selection} />
+                <TabMenuItem name='Recent' selected={selection === 'Recent'} onClick={() => setSelection('Recent')} />
+                <TabMenuItem name='Examples' selected={selection === 'Examples'} onClick={() => setSelection('Examples')} />


question: Could we make this tab menu disappear when creating a new team similar with the specs? Low priority! 🔅

Now tracked in #4471

components/dashboard/src/projects/Projects.tsx

components/server/src/user/user-service.ts

…ge, project page)

…ss name

jankeromnes · 2021-06-10T14:06:43Z

Thanks again for the fantastic reviews! ❤️

Also, phew!, addressed all nits (either here or by opening follow-up issues), and double/triple-checked everything again.

One more smoke test on this deployment (because I'm getting tired and had to do some pretty crazy interactive reverts/rebases) and we should be good to merge. 🚀

EDIT: All perfect! 😌

jankeromnes force-pushed the jx/teams-ui branch 5 times, most recently from 49100ab to facd6ca Compare June 6, 2021 15:16

jankeromnes force-pushed the jx/teams-ui branch from facd6ca to ce2d778 Compare June 7, 2021 09:34

gtsiolis added component: dashboard roadmap item: teams & projects labels Jun 7, 2021

jankeromnes force-pushed the jx/teams-ui branch 15 times, most recently from 8af3ab1 to f83bfad Compare June 8, 2021 14:35

jankeromnes force-pushed the jx/teams-ui branch 3 times, most recently from 0f54090 to 9b8a149 Compare June 8, 2021 16:13

jankeromnes requested review from svenefftinge, gtsiolis, AlexTugarev and csweichel June 9, 2021 10:50

svenefftinge approved these changes Jun 9, 2021

View reviewed changes

jankeromnes changed the title ~~[dashboard] Implement Team selector and creation wizard~~ [dashboard] Implement Teams UI (selector, creation wizard, members page, project page) Jun 9, 2021

jankeromnes force-pushed the jx/teams-ui branch from 6d2596b to 8500539 Compare June 9, 2021 15:45

gtsiolis mentioned this pull request Jun 9, 2021

Improve workspaces empty state #4455

Open

gtsiolis approved these changes Jun 9, 2021

View reviewed changes

gtsiolis reviewed Jun 9, 2021

View reviewed changes

components/dashboard/src/projects/Projects.tsx Outdated Show resolved Hide resolved

jankeromnes force-pushed the jx/teams-ui branch 6 times, most recently from 32ec662 to fd9006d Compare June 10, 2021 13:18

jankeromnes mentioned this pull request Jun 10, 2021

[Teams] Disallow team names that are also user names or that conflict with dashboard URLs #4469

Closed

2 tasks

svenefftinge reviewed Jun 10, 2021

View reviewed changes

components/server/src/user/user-service.ts Outdated Show resolved Hide resolved

This was referenced Jun 10, 2021

[server] Optimize query behind getTeamMembers #4470

Closed

[Teams] Adjust styling of Teams menu & pages #4471

Closed

jankeromnes added 2 commits June 10, 2021 13:58

[dashboard] Implement Teams UI (selector, creation wizard, members pa…

a023c2a

…ge, project page)

[dashboard] Unify 'Learn more' link style with a 'learn-more' CSS cla…

d3ade5f

…ss name

jankeromnes force-pushed the jx/teams-ui branch from fd9006d to d3ade5f Compare June 10, 2021 13:58

jankeromnes merged commit 2588d5f into main Jun 10, 2021

jankeromnes deleted the jx/teams-ui branch June 10, 2021 14:08

gtsiolis mentioned this pull request Jun 11, 2021

[dashboard] Implement inviting team members #4490

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] Implement Teams UI (selector, creation wizard, members page, project page) #4401

[dashboard] Implement Teams UI (selector, creation wizard, members page, project page) #4401

jankeromnes commented Jun 6, 2021 •

edited by svenefftinge

Loading

jankeromnes commented Jun 6, 2021

svenefftinge commented Jun 7, 2021

jankeromnes commented Jun 7, 2021

jankeromnes commented Jun 8, 2021 •

edited

Loading

jankeromnes commented Jun 9, 2021 •

edited

Loading

svenefftinge left a comment

svenefftinge Jun 9, 2021

jankeromnes Jun 10, 2021

svenefftinge commented Jun 9, 2021

gtsiolis commented Jun 9, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Jun 9, 2021

jankeromnes Jun 10, 2021

gtsiolis Jun 10, 2021

jankeromnes Jun 10, 2021

gtsiolis Jun 9, 2021

jankeromnes Jun 10, 2021

jankeromnes Jun 10, 2021

gtsiolis Jun 9, 2021

jankeromnes Jun 10, 2021

gtsiolis Jun 9, 2021

jankeromnes Jun 10, 2021

jankeromnes commented Jun 10, 2021 •

edited

Loading

	<span className="text-gray-800 text-base font-semibold">{t.name}</span>
	<span className="text-gray-800 text-sm dark:text-gray-300 font-semibold">{t.name}</span>

[dashboard] Implement Teams UI (selector, creation wizard, members page, project page) #4401

[dashboard] Implement Teams UI (selector, creation wizard, members page, project page) #4401

Conversation

jankeromnes commented Jun 6, 2021 • edited by svenefftinge Loading

jankeromnes commented Jun 6, 2021

svenefftinge commented Jun 7, 2021

jankeromnes commented Jun 7, 2021

jankeromnes commented Jun 8, 2021 • edited Loading

jankeromnes commented Jun 9, 2021 • edited Loading

svenefftinge left a 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 9, 2021

gtsiolis commented Jun 9, 2021 • edited by werft-gitpod-dev-com bot Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jankeromnes commented Jun 10, 2021 • edited Loading

jankeromnes commented Jun 6, 2021 •

edited by svenefftinge

Loading

jankeromnes commented Jun 8, 2021 •

edited

Loading

jankeromnes commented Jun 9, 2021 •

edited

Loading

gtsiolis commented Jun 9, 2021 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Jun 10, 2021 •

edited

Loading