[dashboard] Improve usage-based billing account selection UX

Author: jankeromnes

components/dashboard/src/components/BillingAccountSelector.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useContext, useEffect, useState } from "react";
-import { Team } from "@gitpod/gitpod-protocol";
+import { Team, TeamMemberInfo } from "@gitpod/gitpod-protocol";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { getGitpodService } from "../service/service";
 import { TeamsContext } from "../teams/teams-context";
@@ -17,6 +17,7 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
     const { user, setUser } = useContext(UserContext);
     const { teams } = useContext(TeamsContext);
     const [teamsWithBillingEnabled, setTeamsWithBillingEnabled] = useState<Team[] | undefined>();
+    const [membersByTeam, setMembersByTeam] = useState<Record<string, TeamMemberInfo[]>>({});
 
     useEffect(() => {
         if (!teams) {
@@ -34,6 +35,25 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
         ).then(() => setTeamsWithBillingEnabled(teamsWithBilling));
     }, [teams]);
 
+    useEffect(() => {
+        if (!teamsWithBillingEnabled) {
+            return;
+        }
+        (async () => {
+            const members: Record<string, TeamMemberInfo[]> = {};
+            await Promise.all(
+                teamsWithBillingEnabled.map(async (team) => {
+                    try {
+                        members[team.id] = await getGitpodService().server.getTeamMembers(team.id);
+                    } catch (error) {
+                        console.error("Could not get members of team", team, error);
+                    }
+                }),
+            );
+            setMembersByTeam(members);
+        })();
+    }, [teamsWithBillingEnabled]);
+
     const setUsageAttributionTeam = async (team?: Team) => {
         if (!user) {
             return;
@@ -63,15 +83,17 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
                     <p>Bill all my usage to:</p>
                     <div className="mt-4 flex space-x-3">
                         {/* <SelectableCardSolid
-                            className="w-36 h-32"
+                            className="w-52 h-14"
                             title="(myself)"
                             selected={
                                 !!user &&
                                 selectedAttributionId === AttributionId.render({ kind: "user", userId: user.id })
                             }
                             onClick={() => setUsageAttributionTeam(undefined)}
                         >
-                            <div className="flex-grow flex items-end p-1"></div>
+                            <div className="flex-grow flex items-end p-1">
+                                Personal Account
+                            </div>
                         </SelectableCardSolid> */}
                         {teamsWithBillingEnabled.length === 0 && (
                             <span>
@@ -81,14 +103,20 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
                         )}
                         {teamsWithBillingEnabled.map((t) => (
                             <SelectableCardSolid
-                                className="w-36 h-32"
+                                className="w-52 h-14"
                                 title={t.name}
                                 selected={
                                     selectedAttributionId === AttributionId.render({ kind: "team", teamId: t.id })
                                 }
                                 onClick={() => setUsageAttributionTeam(t)}
                             >
-                                <div className="flex-grow flex items-end p-1"></div>
+                                <div className="flex-grow flex items-end p-1">
+                                    {!!membersByTeam[t.id]
+                                        ? `${membersByTeam[t.id].length} member${
+                                              membersByTeam[t.id].length === 1 ? "" : "s"
+                                          }`
+                                        : "..."}
+                                </div>
                             </SelectableCardSolid>
                         ))}
                     </div>