[dashboard] Team settings page

Fixes #5066

Author: Laurie T. Malau

components/dashboard/README.md

@@ -29,3 +29,6 @@ const GitIntegration = React.lazy(() => import('./settings/GitIntegration'));
 ```
 
 Global state is passed through `React.Context`.
+
+After creating a new component, run the following to update the license header:
+`leeway run components:update-license-header`

components/dashboard/src/App.tsx

@@ -34,6 +34,7 @@ const CreateWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ './s
 const NewTeam = React.lazy(() => import(/* webpackPrefetch: true */ './teams/NewTeam'));
 const JoinTeam = React.lazy(() => import(/* webpackPrefetch: true */ './teams/JoinTeam'));
 const Members = React.lazy(() => import(/* webpackPrefetch: true */ './teams/Members'));
+const TeamSettings = React.lazy(() => import(/* webpackPrefetch: true */ './teams/TeamSettings'));
 const NewProject = React.lazy(() => import(/* webpackPrefetch: true */ './projects/NewProject'));
 const ConfigureProject = React.lazy(() => import(/* webpackPrefetch: true */ './projects/ConfigureProject'));
 const Projects = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Projects'));
@@ -280,33 +281,36 @@ function App() {
                     <Route exact path="/teams/join" component={JoinTeam} />
                 </Route>
                 {(teams || []).map(team =>
-                <Route path={`/t/${team.slug}`} key={team.slug}>
-                    <Route exact path={`/t/${team.slug}`}>
-                        <Redirect to={`/t/${team.slug}/workspaces`} />
-                    </Route>
-                    <Route exact path={`/t/${team.slug}/:maybeProject/:resourceOrPrebuild?`} render={(props) => {
-                        const { maybeProject, resourceOrPrebuild } = props.match.params;
-                        if (maybeProject === "projects") {
-                            return <Projects />;
-                        }
-                        if (maybeProject === "workspaces") {
-                            return <Workspaces />;
-                        }
-                        if (maybeProject === "members") {
-                            return <Members />;
-                        }
-                        if (resourceOrPrebuild === "configure") {
-                            return <ConfigureProject />;
-                        }
-                        if (resourceOrPrebuild === "workspaces") {
-                            return <Workspaces />;
-                        }
-                        if (resourceOrPrebuild === "prebuilds") {
-                            return <Prebuilds />;
-                        }
-                        return resourceOrPrebuild ? <Prebuild /> : <Project />;
-                    }} />
-                </Route>)}
+                    <Route path={`/t/${team.slug}`} key={team.slug}>
+                        <Route exact path={`/t/${team.slug}`}>
+                            <Redirect to={`/t/${team.slug}/workspaces`} />
+                        </Route>
+                        <Route exact path={`/t/${team.slug}/:maybeProject/:resourceOrPrebuild?`} render={(props) => {
+                            const { maybeProject, resourceOrPrebuild } = props.match.params;
+                            if (maybeProject === "projects") {
+                                return <Projects />;
+                            }
+                            if (maybeProject === "workspaces") {
+                                return <Workspaces />;
+                            }
+                            if (maybeProject === "members") {
+                                return <Members />;
+                            }
+                            if (maybeProject === "settings") {
+                                return <TeamSettings />;
+                            }
+                            if (resourceOrPrebuild === "configure") {
+                                return <ConfigureProject />;
+                            }
+                            if (resourceOrPrebuild === "workspaces") {
+                                return <Workspaces />;
+                            }
+                            if (resourceOrPrebuild === "prebuilds") {
+                                return <Prebuilds />;
+                            }
+                            return resourceOrPrebuild ? <Prebuild /> : <Project />;
+                        }} />
+                    </Route>)}
                 <Route path="*" render={
                     (_match) => {
 

components/dashboard/src/Menu.tsx

@@ -33,11 +33,12 @@ export default function Menu() {
     const { user } = useContext(UserContext);
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
+    const visibleTeams = teams?.filter(team => { return Boolean(!team.markedDeleted) });
 
     const match = useRouteMatch<{ segment1?: string, segment2?: string, segment3?: string }>("/(t/)?:segment1/:segment2?/:segment3?");
     const projectName = (() => {
         const resource = match?.params?.segment2;
-        if (resource && !["projects", "members", "users", "workspaces"].includes(resource)) {
+        if (resource && !["projects", "members", "users", "workspaces", "settings"].includes(resource)) {
             return resource;
         }
     })();
@@ -121,6 +122,10 @@ export default function Menu() {
                 {
                     title: 'Members',
                     link: `/t/${team.slug}/members`
+                },
+                {
+                    title: 'Settings',
+                    link: `/t/${team.slug}/settings`,
                 }
             ];
         }
@@ -178,7 +183,7 @@ export default function Menu() {
                             separator: true,
                             link: '/',
                         },
-                        ...(teams || []).map(t => ({
+                        ...(visibleTeams || []).map(t => ({
                             title: t.name,
                             customContent: <div className="w-full text-gray-400 flex flex-col">
                                 <span className="text-gray-800 dark:text-gray-300 text-base font-semibold">{t.name}</span>

components/dashboard/src/components/ConfirmationModal.tsx

@@ -4,6 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import AlertBox from "./AlertBox";
 import Modal from "./Modal";
 
 export default function ConfirmationModal(props: {
@@ -13,27 +14,32 @@ export default function ConfirmationModal(props: {
     buttonText?: string,
     buttonDisabled?: boolean,
     visible?: boolean,
+    warningText?: string,
     onClose: () => void,
     onConfirm: () => void,
 }) {
 
-    const c: React.ReactChild[] = [
-        <p className="mt-1 mb-2 text-base text-gray-500">{props.areYouSureText || "Are you sure?"}</p>,
+    const child: React.ReactChild[] = [
+        <p className="mt-3 mb-3 text-base text-gray-500">{props.areYouSureText || "Are you sure?"}</p>,
     ]
 
+    if (props.warningText) {
+        child.unshift(<AlertBox>{props.warningText}</AlertBox>);
+    }
+
     const isEntity = (x: any): x is Entity => typeof x === "object" && "name" in x;
     if (props.children) {
         if (isEntity(props.children)) {
-            c.push(
+            child.push(
                 <div className="w-full p-4 mb-2 bg-gray-100 dark:bg-gray-700 rounded-xl group">
                     <p className="text-base text-gray-800 dark:text-gray-100 font-semibold">{props.children.name}</p>
                     {props.children.description && <p className="text-gray-500">{props.children.description}</p>}
                 </div>
             )
         } else if (Array.isArray(props.children)) {
-            c.push(...props.children);
+            child.push(...props.children);
         } else {
-            c.push(props.children);
+            child.push(props.children);
         }
     }
 
@@ -52,7 +58,7 @@ export default function ConfirmationModal(props: {
             onClose={props.onClose}
             onEnter={() => { props.onConfirm(); return true; }}
         >
-            {c}
+            {child}
         </Modal>
     );
 }

components/dashboard/src/teams/TeamSettings.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2021 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 { useContext, useState } from "react";
+import { useLocation } from "react-router";
+import ConfirmationModal from "../components/ConfirmationModal";
+import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import { getGitpodService, gitpodHostUrl } from "../service/service";
+import { getCurrentTeam, TeamsContext } from "./teams-context";
+
+export default function TeamSettings() {
+    const [modal, setModal] = useState(false);
+    const [teamSlug, setTeamSlug] = useState('');
+    const { teams } = useContext(TeamsContext);
+    const location = useLocation();
+    const team = getCurrentTeam(location, teams);
+
+    const close = () => setModal(false);
+
+    const deleteTeam = async () => {
+        if (!team) {
+            return
+        }
+        await getGitpodService().server.deleteTeam(team.id);
+        document.location.href = gitpodHostUrl.asSettings().toString();
+    };
+
+    const settingsMenu = [
+        {
+            title: 'General',
+            link: [`/t/${team?.slug}/settings`]
+        }
+    ]
+
+    return <>
+        <PageWithSubMenu subMenu={settingsMenu} title='General' subtitle='Manage general team settings.'>
+            <h3>Delete Team</h3>
+            <p className="text-base text-gray-500 pb-4">Deleting this team will also remove all associated data with this team, including projects and workspaces. Deleted teams cannot be restored!</p>
+            <button className="danger secondary" onClick={() => setModal(true)}>Delete Account</button>
+        </PageWithSubMenu>
+
+        <ConfirmationModal
+            title="Delete Team"
+            areYouSureText="You are about to permanently delete this team including all associated data with this team."
+            buttonText="Delete Team"
+            buttonDisabled={teamSlug !== team!.slug}
+            visible={modal}
+            warningText="Warning: this action cannot be reversed."
+            onClose={close}
+            onConfirm={deleteTeam}
+        >
+            <ol className="text-gray-500 text-m list-outside list-decimal">
+                <li className="ml-5">All <b>projects</b> added in this team will be deleted and cannot be restored afterwards.</li>
+                <li className="ml-5">All <b>workspaces</b> opened for projects within this team will be deleted for all team members and cannot be restored afterwards.</li>
+                <li className="ml-5">All <b>members</b> of this team will lose access to this team, associated projects and workspaces.</li>
+            </ol>
+            <p className="pt-4 pb-2 text-gray-600 dark:text-gray-400 text-base font-semibold">Type your team's URL slug to confirm</p>
+            <input className="w-full" type="text" onChange={e => setTeamSlug(e.target.value)}></input>
+        </ConfirmationModal>
+    </>
+}

components/gitpod-db/src/team-db.ts

@@ -18,4 +18,5 @@ export interface TeamDB {
     findTeamMembershipInviteById(inviteId: string): Promise<TeamMembershipInvite>;
     findGenericInviteByTeamId(teamId: string): Promise<TeamMembershipInvite | undefined>;
     resetGenericInvite(teamId: string): Promise<TeamMembershipInvite>;
+    deleteTeam(teamId: string): Promise<void>;
 }

components/gitpod-db/src/typeorm/entity/db-team.ts

@@ -22,6 +22,9 @@ export class DBTeam {
   @Column("varchar")
   creationTime: string;
 
+  @Column()
+  markedDeleted?: boolean;
+
   // This column triggers the db-sync deletion mechanism. It's not intended for public consumption.
   @Column()
   deleted: boolean;

components/gitpod-db/src/typeorm/migration/1632908105486-AddSoftDeletedToTeam.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2021 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 {MigrationInterface, QueryRunner} from "typeorm";
+import { columnExists } from "./helper/helper";
+
+export class AddMarkedDeletedToTeam1632908105486 implements MigrationInterface {
+
+    public async up(queryRunner: QueryRunner): Promise<any> {
+        if (!(await columnExists(queryRunner, "d_b_team", "markedDeleted"))) {
+            await queryRunner.query("ALTER TABLE d_b_team ADD COLUMN `markedDeleted` tinyint(4) NOT NULL DEFAULT '0'");
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<any> {
+    }
+
+}

components/gitpod-db/src/typeorm/team-db-impl.ts

@@ -145,6 +145,15 @@ export class TeamDBImpl implements TeamDB {
         return team;
     }
 
+    public async deleteTeam(teamId: string): Promise<void> {
+        const teamRepo = await this.getTeamRepo();
+        const team = await this.findTeamById(teamId);
+        if (team) {
+            team.markedDeleted = true;
+            await teamRepo.save(team);
+        }
+    }
+
     public async addMemberToTeam(userId: string, teamId: string): Promise<void> {
         const teamRepo = await this.getTeamRepo();
         const team = await teamRepo.findOneById(teamId);

components/gitpod-protocol/src/gitpod-service.ts

@@ -123,6 +123,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     removeTeamMember(teamId: string, userId: string): Promise<void>;
     getGenericInvite(teamId: string): Promise<TeamMembershipInvite>;
     resetGenericInvite(inviteId: string): Promise<TeamMembershipInvite>;
+    deleteTeam(teamId: string): Promise<void>;
 
     // Projects
     getProviderRepositoriesForUser(params: GetProviderRepositoriesParams): Promise<ProviderRepository[]>;

components/gitpod-protocol/src/teams-projects-protocol.ts

@@ -101,6 +101,7 @@ export interface Team {
     name: string;
     slug: string;
     creationTime: string;
+    markedDeleted?: boolean;
     /** This is a flag that triggers the HARD DELETION of this entity */
     deleted?: boolean;
 }

components/server/src/auth/rate-limiter.ts

@@ -88,6 +88,7 @@ function getConfig(config: RateLimiterConfig): RateLimiterConfig {
         "removeTeamMember": { group: "default", points: 1 },
         "getGenericInvite": { group: "default", points: 1 },
         "resetGenericInvite": { group: "default", points: 1 },
+        "deleteTeam": { group: "default", points: 1 },
         "getProviderRepositoriesForUser":  { group: "default", points: 1 },
         "createProject":  { group: "default", points: 1 },
         "getTeamProjects": { group: "default", points: 1 },

components/server/src/workspace/gitpod-server-impl.ts

@@ -1555,6 +1555,25 @@ export class GitpodServerImpl<Client extends GitpodClient, Server extends Gitpod
         return this.projectsService.deleteProject(projectId);
     }
 
+    public async deleteTeam(teamId: string): Promise<void> {
+        const user = this.checkAndBlockUser("deleteTeam");
+        await this.guardTeamOperation(teamId, "delete");
+
+        await this.teamDB.deleteTeam(teamId);
+        const teamProjects = await this.projectsService.getTeamProjects(teamId);
+        teamProjects.forEach(project => {
+            this.deleteProject(project.id);
+        })
+
+        return this.analytics.track({
+            userId: user.id,
+            event: "team_deleted",
+            properties: {
+                team_id: teamId
+            }
+        })
+    }
+
     public async getTeamProjects(teamId: string): Promise<Project[]> {
         this.checkUser("getTeamProjects");
         await this.guardTeamOperation(teamId, "get");