[public-api] Implement experimental TeamsService

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,7 @@ 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";
 
 export default function NewProject() {
     const location = useLocation();
@@ -729,6 +730,26 @@ function NewTeam(props: { onSuccess: (team: Team) => void }) {
         if (!teamName) {
             return;
         }
+
+        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);
+        }
+
         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,6 +8,7 @@ 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";
 
 export default function () {
     const { setTeams } = useContext(TeamsContext);
@@ -17,6 +18,19 @@ export default function () {
     let name = "";
     const createTeam = async (event: FormEvent) => {
         event.preventDefault();
+        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);
+        }
         try {
             const team = await getGitpodService().server.createTeam(name);
             const teams = await getGitpodService().server.getTeams();

components/public-api/typescript/src/gitpod/experimental/v1/pagination_pb.ts

@@ -31,4 +31,3 @@ export const TeamsService = {
     },
   }
 } as const;
-

components/public-api/typescript/src/gitpod/experimental/v1/teams_connectweb.ts

@@ -78,4 +78,3 @@ export const WorkspacesService = {
     },
   }
 } as const;
-