[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) {
@@ -31,9 +32,28 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
                     teamsWithBilling.push(t);
                 }
             }),
-        ).then(() => setTeamsWithBillingEnabled(teamsWithBilling));
+        ).then(() => setTeamsWithBillingEnabled(teamsWithBilling.sort((a, b) => (a.name > b.name ? 1 : -1))));
     }, [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-60 h-18"
                             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 px-1">
+                                <span className="text-sm text-gray-400">Personal Account</span>
+                            </div>
                         </SelectableCardSolid> */}
                         {teamsWithBillingEnabled.length === 0 && (
                             <span>
@@ -81,14 +103,22 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
                         )}
                         {teamsWithBillingEnabled.map((t) => (
                             <SelectableCardSolid
-                                className="w-36 h-32"
+                                className="w-60 h-18"
                                 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 px-1">
+                                    <span className="text-sm text-gray-400">
+                                        {!!membersByTeam[t.id]
+                                            ? `${membersByTeam[t.id].length} member${
+                                                  membersByTeam[t.id].length === 1 ? "" : "s"
+                                              }`
+                                            : "..."}
+                                    </span>
+                                </div>
                             </SelectableCardSolid>
                         ))}
                     </div>

components/dashboard/src/settings/Billing.tsx

@@ -10,8 +10,6 @@ import { BillingAccountSelector } from "../components/BillingAccountSelector";
 export default function Billing() {
     return (
         <PageWithSettingsSubMenu title="Billing" subtitle="Usage-Based Billing.">
-            <h3>Usage-Based Billing</h3>
-            <h2 className="text-gray-500">Manage usage-based billing, spending limit, and payment method.</h2>
             <div className="mt-8">
                 <h3>Billing Account</h3>
                 <BillingAccountSelector />