[dashboard] Use Public API when fetching team members

Author: easyCZ

components/dashboard/src/Menu.tsx

@@ -27,6 +27,7 @@ import FeedbackFormModal from "./feedback-form/FeedbackModal";
 import { inResource, isGitpodIo } from "./utils";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { FeatureFlagContext } from "./contexts/FeatureFlagContext";
+import { publicApiTeamMembersToProtocol, teamsService } from "./service/public-api";
 
 interface Entry {
     title: string;
@@ -36,7 +37,7 @@ interface Entry {
 
 export default function Menu() {
     const { user } = useContext(UserContext);
-    const { showUsageView } = useContext(FeatureFlagContext);
+    const { showUsageView, usePublicApiTeamsService } = useContext(FeatureFlagContext);
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
@@ -128,7 +129,11 @@ export default function Menu() {
             await Promise.all(
                 teams.map(async (team) => {
                     try {
-                        members[team.id] = await getGitpodService().server.getTeamMembers(team.id);
+                        members[team.id] = usePublicApiTeamsService
+                            ? await publicApiTeamMembersToProtocol(
+                                  (await teamsService.getTeam({ teamId: team!.id })).team?.members || [],
+                              )
+                            : await getGitpodService().server.getTeamMembers(team.id);
                     } catch (error) {
                         console.error("Could not get members of team", team, error);
                     }

components/dashboard/src/components/BillingAccountSelector.tsx

@@ -13,13 +13,16 @@ import { UserContext } from "../user-context";
 import SelectableCardSolid from "../components/SelectableCardSolid";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 import Alert from "./Alert";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
+import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
 
 export function BillingAccountSelector(props: { onSelected?: () => void }) {
     const { user, setUser } = useContext(UserContext);
     const { teams } = useContext(TeamsContext);
     const [teamsAvailableForAttribution, setTeamsAvailableForAttribution] = useState<Team[] | undefined>();
     const [membersByTeam, setMembersByTeam] = useState<Record<string, TeamMemberInfo[]>>({});
     const [errorMessage, setErrorMessage] = useState<string | undefined>();
+    const { usePublicApiTeamsService } = useContext(FeatureFlagContext);
 
     useEffect(() => {
         if (!teams) {
@@ -54,7 +57,11 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
         Promise.all(
             teams.map(async (team) => {
                 try {
-                    members[team.id] = await getGitpodService().server.getTeamMembers(team.id);
+                    members[team.id] = usePublicApiTeamsService
+                        ? await publicApiTeamMembersToProtocol(
+                              (await teamsService.getTeam({ teamId: team!.id })).team?.members || [],
+                          )
+                        : await getGitpodService().server.getTeamMembers(team.id);
                 } catch (error) {
                     console.warn("Could not get members of team", team, error);
                 }

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -20,6 +20,8 @@ import Modal from "../components/Modal";
 import Alert from "./Alert";
 import dayjs from "dayjs";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
+import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
 
 const BASE_USAGE_LIMIT_FOR_STRIPE_USERS = 1000;
 
@@ -32,6 +34,7 @@ interface Props {
 export default function UsageBasedBillingConfig({ attributionId }: Props) {
     const location = useLocation();
     const { currency } = useContext(PaymentContext);
+    const { usePublicApiTeamsService } = useContext(FeatureFlagContext);
     const [showUpdateLimitModal, setShowUpdateLimitModal] = useState<boolean>(false);
     const [showBillingSetupModal, setShowBillingSetupModal] = useState<boolean>(false);
     const [stripeSubscriptionId, setStripeSubscriptionId] = useState<string | undefined>();
@@ -102,7 +105,11 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                 let limit = BASE_USAGE_LIMIT_FOR_STRIPE_USERS;
                 const attrId = AttributionId.parse(attributionId);
                 if (attrId?.kind === "team") {
-                    const members = await getGitpodService().server.getTeamMembers(attrId.teamId);
+                    const members = usePublicApiTeamsService
+                        ? await publicApiTeamMembersToProtocol(
+                              (await teamsService.getTeam({ teamId: attrId.teamId })).team?.members || [],
+                          )
+                        : await getGitpodService().server.getTeamMembers(attrId.teamId);
                     limit = BASE_USAGE_LIMIT_FOR_STRIPE_USERS * members.length;
                 }
                 const newLimit = await getGitpodService().server.subscribeToStripe(attributionId, setupIntentId, limit);

components/dashboard/src/projects/NewProject.tsx

@@ -21,14 +21,20 @@ import { trackEvent } from "../Analytics";
 import exclamation from "../images/exclamation.svg";
 import ErrorMessage from "../components/ErrorMessage";
 import Spinner from "../icons/Spinner.svg";
-import { publicApiTeamsToProtocol, publicApiTeamToProtocol, teamsService } from "../service/public-api";
+import {
+    publicApiTeamMembersToProtocol,
+    publicApiTeamsToProtocol,
+    publicApiTeamToProtocol,
+    teamsService,
+} from "../service/public-api";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 import { ConnectError } from "@bufbuild/connect-web";
 
 export default function NewProject() {
     const location = useLocation();
     const { teams } = useContext(TeamsContext);
     const { user, setUser } = useContext(UserContext);
+    const { usePublicApiTeamsService } = useContext(FeatureFlagContext);
 
     const [selectedProviderHost, setSelectedProviderHost] = useState<string | undefined>();
     const [reposInAccounts, setReposInAccounts] = useState<ProviderRepository[]>([]);
@@ -113,7 +119,11 @@ export default function NewProject() {
             await Promise.all(
                 teams.map(async (team) => {
                     try {
-                        members[team.id] = await getGitpodService().server.getTeamMembers(team.id);
+                        members[team.id] = usePublicApiTeamsService
+                            ? await publicApiTeamMembersToProtocol(
+                                  (await teamsService.getTeam({ teamId: team!.id })).team?.members || [],
+                              )
+                            : await getGitpodService().server.getTeamMembers(team.id);
                     } catch (error) {
                         console.error("Could not get members of team", team, error);
                     }

components/dashboard/src/teams/TeamBilling.tsx

@@ -24,6 +24,8 @@ import { getCurrentTeam, TeamsContext } from "./teams-context";
 import { getTeamSettingsMenu } from "./TeamSettings";
 import TeamUsageBasedBilling from "./TeamUsageBasedBilling";
 import { UserContext } from "../user-context";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
+import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
 
 type PendingPlan = Plan & { pendingSince: number };
 
@@ -39,14 +41,19 @@ export default function TeamBilling() {
     const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
     const [pendingTeamPlan, setPendingTeamPlan] = useState<PendingPlan | undefined>();
     const [pollTeamSubscriptionTimeout, setPollTeamSubscriptionTimeout] = useState<NodeJS.Timeout | undefined>();
+    const { usePublicApiTeamsService } = useContext(FeatureFlagContext);
 
     useEffect(() => {
         if (!team) {
             return;
         }
         (async () => {
             const [memberInfos, subscription, teamBillingMode] = await Promise.all([
-                getGitpodService().server.getTeamMembers(team.id),
+                usePublicApiTeamsService
+                    ? teamsService.getTeam({ teamId: team!.id }).then((resp) => {
+                          return publicApiTeamMembersToProtocol(resp.team?.members || []);
+                      })
+                    : getGitpodService().server.getTeamMembers(team.id),
                 getGitpodService().server.getTeamSubscription(team.id),
                 getGitpodService().server.getBillingModeForTeam(team.id),
             ]);

components/dashboard/src/teams/TeamSettings.tsx

@@ -11,7 +11,7 @@ import { Redirect, useLocation } from "react-router";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
-import { teamsService } from "../service/public-api";
+import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
@@ -51,7 +51,12 @@ export default function TeamSettings() {
     useEffect(() => {
         (async () => {
             if (!team) return;
-            const members = await getGitpodService().server.getTeamMembers(team.id);
+            const members = usePublicApiTeamsService
+                ? await publicApiTeamMembersToProtocol(
+                      (await teamsService.getTeam({ teamId: team!.id })).team?.members || [],
+                  )
+                : await getGitpodService().server.getTeamMembers(team.id);
+
             const currentUserInTeam = members.find((member) => member.userId === user?.id);
             setIsUserOwner(currentUserInTeam?.role === "owner");