[dashboard Use public-api to CreateTeams

Author: easyCZ

components/dashboard/BUILD.yaml

@@ -17,6 +17,7 @@ packages:
       - scripts/run-integration-tests.sh
     deps:
       - components/gitpod-protocol:lib
+      - components/public-api/typescript:lib
     config:
       commands:
         build: ["yarn", "build"]

components/dashboard/package.json

@@ -4,7 +4,9 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
+    "@bufbuild/connect-web": "^0.2.1",
     "@gitpod/gitpod-protocol": "0.1.5",
+    "@gitpod/public-api": "0.1.5",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
     "configcat-js": "^6.0.0",

components/dashboard/src/projects/NewProject.tsx

@@ -21,6 +21,8 @@ import { trackEvent } from "../Analytics";
 import exclamation from "../images/exclamation.svg";
 import ErrorMessage from "../components/ErrorMessage";
 import Spinner from "../icons/Spinner.svg";
+import { teamsService } from "../service/public-api";
+import { getExperimentsClient } from "../experiments/client";
 
 export default function NewProject() {
     const location = useLocation();
@@ -721,6 +723,7 @@ function GitProviders(props: {
 
 function NewTeam(props: { onSuccess: (team: Team) => void }) {
     const { setTeams } = useContext(TeamsContext);
+    const { user } = useContext(UserContext);
 
     const [teamName, setTeamName] = useState<string | undefined>();
     const [error, setError] = useState<string | undefined>();
@@ -729,6 +732,37 @@ function NewTeam(props: { onSuccess: (team: Team) => void }) {
         if (!teamName) {
             return;
         }
+
+        const isExperimentalTeamsServiceEnabled = await getExperimentsClient().getValueAsync(
+            "publicApiExperimentalTeamsService",
+            false,
+            {
+                user,
+            },
+        );
+        if (isExperimentalTeamsServiceEnabled) {
+            try {
+                const response = await teamsService.createTeam({
+                    name: teamName,
+                });
+                const team = response.team;
+                setTeams(await getGitpodService().server.getTeams());
+
+                const mappedTeam: Team = {
+                    id: team?.id || "",
+                    name: team?.name || "",
+                    slug: team?.slug || "",
+                    creationTime: "",
+                };
+                props.onSuccess(mappedTeam);
+                return;
+            } catch (error) {
+                console.error(error);
+                setError(error?.message || "Failed to create new team!");
+                return;
+            }
+        }
+
         try {
             const team = await getGitpodService().server.createTeam(teamName);
             setTeams(await getGitpodService().server.getTeams());

components/dashboard/src/service/public-api.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { createConnectTransport, createPromiseClient, Interceptor } from "@bufbuild/connect-web";
+
+// Import service definition that you want to connect to.
+import { TeamsService } from "@gitpod/public-api/lib/gitpod/experimental/v1/teams_connectweb";
+import { getGitpodService } from "./service";
+
+let token: string | undefined;
+
+const authInterceptor: Interceptor = (next) => async (req) => {
+    if (!token) {
+        const newToken = await getGitpodService().server.generateNewGitpodToken({
+            type: 1,
+            scopes: [
+                "function:getGitpodTokenScopes",
+                "function:getWorkspace",
+                "function:getWorkspaces",
+                "function:createTeam",
+                "function:joinTeam",
+                "function:getTeamMembers",
+                "function:listenForWorkspaceInstanceUpdates",
+                "resource:default",
+            ],
+        });
+        token = newToken;
+    }
+
+    req.header.set("Authorization", `Bearer ${token}`);
+    return await next(req);
+};
+
+const transport = createConnectTransport({
+    baseUrl: `${window.location.protocol}//api.${window.location.host}`,
+    interceptors: [authInterceptor],
+});
+
+export const teamsService = createPromiseClient(TeamsService, transport);

components/dashboard/src/teams/NewTeam.tsx

@@ -8,15 +8,41 @@ import { FormEvent, useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { getGitpodService } from "../service/service";
 import { TeamsContext } from "./teams-context";
+import { teamsService } from "../service/public-api";
+import { getExperimentsClient } from "../experiments/client";
+import { UserContext } from "../user-context";
 
 export default function () {
     const { setTeams } = useContext(TeamsContext);
+    const { user } = useContext(UserContext);
     const history = useHistory();
 
     const [creationError, setCreationError] = useState<Error>();
     let name = "";
     const createTeam = async (event: FormEvent) => {
         event.preventDefault();
+        const isExperimentalTeamsServiceEnabled = await getExperimentsClient().getValueAsync(
+            "publicApiExperimentalTeamsService",
+            false,
+            {
+                user,
+            },
+        );
+        if (isExperimentalTeamsServiceEnabled) {
+            try {
+                const response = await teamsService.createTeam({ name });
+                const team = response.team;
+                setTeams(await getGitpodService().server.getTeams());
+
+                history.push(`/t/${team!.slug}`);
+                return;
+            } catch (error) {
+                console.error(error);
+                setCreationError(error);
+                return;
+            }
+        }
+
         try {
             const team = await getGitpodService().server.createTeam(name);
             const teams = await getGitpodService().server.getTeams();