[dashboard] single workspaces list

reverts the multiple workspaces lists under teams and projects
reintroduces a single workspaces list that shows all my workspaces

Author: svenefftinge

components/dashboard/src/App.tsx

@@ -277,7 +277,7 @@ function App() {
                 <Route path="/admin/workspaces" component={WorkspacesSearch} />
 
                 <Route path={["/", "/login"]} exact>
-                    <Redirect to="/projects" />
+                    <Redirect to="/workspaces" />
                 </Route>
                 <Route path={["/settings"]} exact>
                     <Redirect to="/account" />
@@ -307,9 +307,6 @@ function App() {
                         if (resourceOrPrebuild === "configure") {
                             return <ConfigureProject />;
                         }
-                        if (resourceOrPrebuild === "workspaces") {
-                            return <Workspaces />;
-                        }
                         if (resourceOrPrebuild === "prebuilds") {
                             return <Prebuilds />;
                         }
@@ -346,9 +343,6 @@ function App() {
                             if (resourceOrPrebuild === "settings") {
                                 return <ProjectSettings />;
                             }
-                            if (resourceOrPrebuild === "workspaces") {
-                                return <Workspaces />;
-                            }
                             if (resourceOrPrebuild === "prebuilds") {
                                 return <Prebuilds />;
                             }

components/dashboard/src/Menu.tsx

@@ -97,10 +97,6 @@ export default function Menu() {
                     title: 'Branches',
                     link: `${teamOrUserSlug}/${projectSlug}`,
                 },
-                {
-                    title: 'Workspaces',
-                    link: `${teamOrUserSlug}/${projectSlug}/workspaces`,
-                },
                 {
                     title: 'Prebuilds',
                     link: `${teamOrUserSlug}/${projectSlug}/prebuilds`,
@@ -120,11 +116,7 @@ export default function Menu() {
                 {
                     title: 'Projects',
                     link: `/t/${team.slug}/projects`,
-                },
-                {
-                    title: 'Workspaces',
-                    link: `/t/${team.slug}/workspaces`,
-                    alternatives: [`/t/${team.slug}`]
+                    alternatives: ([] as string[])
                 },
                 {
                     title: 'Members',
@@ -143,15 +135,15 @@ export default function Menu() {
         }
         // User menu
         return [
-            {
-                title: 'Projects',
-                link: '/projects'
-            },
             {
                 title: 'Workspaces',
                 link: '/workspaces',
                 alternatives: ['/']
             },
+            {
+                title: 'Projects',
+                link: '/projects'
+            },
             {
                 title: 'Settings',
                 link: '/settings',
@@ -240,18 +232,11 @@ export default function Menu() {
         )
     }
 
-    const gitpodIconUrl = () => {
-        if (team) {
-            return `/t/${team.slug}`;
-        }
-        return "/"
-    }
-
     return <>
         <header className={`app-container flex flex-col pt-4 space-y-4 ${isMinimalUI || !!prebuildId ? 'pb-4' : ''}`} data-analytics='{"button_type":"menu"}'>
             <div className="flex h-10">
                 <div className="flex justify-between items-center pr-3">
-                    <Link to={gitpodIconUrl()}>
+                    <Link to="/">
                         <img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
                     </Link>
                     {!isMinimalUI && <div className="ml-2 text-base">

components/dashboard/src/workspaces/Workspaces.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useContext, useEffect, useState } from "react";
-import { Project, Team, WhitelistedRepository, Workspace, WorkspaceInfo } from "@gitpod/gitpod-protocol";
+import { WhitelistedRepository, Workspace, WorkspaceInfo } from "@gitpod/gitpod-protocol";
 import Header from "../components/Header";
 import DropDown from "../components/DropDown";
 import { WorkspaceModel } from "./workspace-model";
@@ -15,8 +15,6 @@ import { StartWorkspaceModal, WsStartEntry } from "./StartWorkspaceModal";
 import { ItemsList } from "../components/ItemsList";
 import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
 import { useLocation, useRouteMatch } from "react-router";
-import { toRemoteURL } from "../projects/render-utils";
-import { Link, useHistory } from "react-router-dom";
 
 export interface WorkspacesProps {
 }
@@ -29,64 +27,24 @@ export interface WorkspacesState {
 
 export default function () {
     const location = useLocation();
-    const history = useHistory();
 
     const { teams } = useContext(TeamsContext);
     const team = getCurrentTeam(location, teams);
     const match = useRouteMatch<{ team: string, resource: string }>("/(t/)?:team/:resource");
     const projectSlug = match?.params?.resource !== 'workspaces' ? match?.params?.resource : undefined;
-    const [projects, setProjects] = useState<Project[]>([]);
     const [activeWorkspaces, setActiveWorkspaces] = useState<WorkspaceInfo[]>([]);
     const [inactiveWorkspaces, setInactiveWorkspaces] = useState<WorkspaceInfo[]>([]);
     const [repos, setRepos] = useState<WhitelistedRepository[]>([]);
     const [isTemplateModelOpen, setIsTemplateModelOpen] = useState<boolean>(false);
     const [workspaceModel, setWorkspaceModel] = useState<WorkspaceModel>();
-    const [teamsProjects, setTeamsProjects] = useState<Project[]>([]);
-    const [teamsWorkspaceModel, setTeamsWorkspaceModel] = useState<WorkspaceModel|undefined>();
-    const [teamsActiveWorkspaces, setTeamsActiveWorkspaces] = useState<WorkspaceInfo[]>([]);
-
-    const newProjectUrl = !!team ? `/new?team=${team.slug}` : '/new?user=1';
-    const onNewProject = () => {
-        history.push(newProjectUrl);
-    }
-
-    const fetchTeamsProjects = async () => {
-        const projectsPerTeam = await Promise.all((teams || []).map(t => getGitpodService().server.getTeamProjects(t.id)));
-        const allTeamsProjects = projectsPerTeam.flat(1);
-        setTeamsProjects(allTeamsProjects);
-        return allTeamsProjects;
-    }
 
     useEffect(() => {
         // only show example repos on the global user context
         if (!team && !projectSlug) {
             getGitpodService().server.getFeaturedRepositories().then(setRepos);
         }
         (async () => {
-            const projects = (!!team
-                ? await getGitpodService().server.getTeamProjects(team.id)
-                : await getGitpodService().server.getUserProjects());
-
-            let project: Project | undefined = undefined;
-            if (projectSlug) {
-                project = projects.find(p => p.slug ? p.slug === projectSlug : p.name === projectSlug);
-                if (project) {
-                    setProjects([project]);
-                }
-            } else {
-                setProjects(projects);
-            }
-            let workspaceModel;
-            if (!!project) {
-                workspaceModel = new WorkspaceModel(setActiveWorkspaces, setInactiveWorkspaces, Promise.resolve([project.id]), false);
-            } else if (!!team) {
-                workspaceModel = new WorkspaceModel(setActiveWorkspaces, setInactiveWorkspaces, getGitpodService().server.getTeamProjects(team?.id).then(projects => projects.map(p => p.id)), false);
-            } else {
-                workspaceModel = new WorkspaceModel(setActiveWorkspaces, setInactiveWorkspaces, getGitpodService().server.getUserProjects().then(projects => projects.map(p => p.id)), true);
-                // Don't await
-                const teamsProjectIdsPromise = fetchTeamsProjects().then(tp => tp.map(p => p.id));
-                setTeamsWorkspaceModel(new WorkspaceModel(setTeamsActiveWorkspaces, () => {}, teamsProjectIdsPromise, false));
-            }
+            const workspaceModel = new WorkspaceModel(setActiveWorkspaces, setInactiveWorkspaces);
             setWorkspaceModel(workspaceModel);
         })();
     }, [teams, location]);
@@ -95,16 +53,6 @@ export default function () {
     const hideStartWSModal = () => setIsTemplateModelOpen(false);
 
     const getRecentSuggestions: () => WsStartEntry[] = () => {
-        if (projectSlug || team) {
-            return projects.map(p => {
-                const remoteUrl = toRemoteURL(p.cloneUrl);
-                return {
-                    title: (team ? team.name + '/' : '') + p.name,
-                    description: remoteUrl,
-                    startUrl: gitpodHostUrl.withContext(remoteUrl).toString()
-                };
-            });
-        }
         if (workspaceModel) {
             const all = workspaceModel.getAllFetchedWorkspaces();
             if (all && all.size > 0) {
@@ -169,9 +117,6 @@ export default function () {
                     </div>
                     <ItemsList className="app-container pb-40">
                         <div className="border-t border-gray-200 dark:border-gray-800"></div>
-                        {
-                            teamsWorkspaceModel?.initialized && <ActiveTeamWorkspaces teams={teams} teamProjects={teamsProjects} teamWorkspaces={teamsActiveWorkspaces} />
-                        }
                         {
                             activeWorkspaces.map(e => {
                                 return <WorkspaceEntry key={e.workspace.id} desc={e} model={workspaceModel} stopWorkspace={wsId => getGitpodService().server.stopWorkspace(wsId)} />
@@ -193,23 +138,14 @@ export default function () {
                 :
                 <div className="app-container flex flex-col space-y-2">
                     <div className="px-6 py-3 flex flex-col text-gray-400 border-t border-gray-200 dark:border-gray-800">
-                        {teamsWorkspaceModel?.initialized && <ActiveTeamWorkspaces teams={teams} teamProjects={teamsProjects} teamWorkspaces={teamsActiveWorkspaces} />}
                         <div className="flex flex-col items-center justify-center h-96 w-96 mx-auto">
-                            {!!team && projects.length === 0
-                            ?<>
-                                <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Projects</h3>
-                                <div className="text-center pb-6 text-gray-500">This team doesn't have any projects, yet.</div>
-                                <span>
-                                    <button onClick={onNewProject}>New Project</button>
-                                </span>
-                            </>
-                            :<>
+                            <>
                                 <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Workspaces</h3>
                                 <div className="text-center pb-6 text-gray-500">Prefix any Git repository URL with {window.location.host}/# or create a new workspace for a recently used project. <a className="gp-link" href="https://www.gitpod.io/docs/getting-started/">Learn more</a></div>
                                 <span>
                                     <button onClick={showStartWSModal}>New Workspace</button>
                                 </span>
-                            </>}
+                            </>
                         </div>
                     </div>
                 </div>
@@ -229,25 +165,3 @@ export default function () {
 
 }
 
-function ActiveTeamWorkspaces(props: { teams?: Team[], teamProjects: Project[], teamWorkspaces: WorkspaceInfo[] }) {
-    if (!props.teams || props.teamWorkspaces.length === 0) {
-        return <></>;
-    }
-    return <div className="p-3 text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-xl text-sm flex items-center justify-center space-x-1">
-        <div className="mr-2 rounded-full w-3 h-3 bg-green-500" />
-        <span>There are currently more active workspaces in the following teams:</span>
-        <span>{
-            props.teams
-                .map(t => {
-                    const projects = props.teamProjects.filter(p => p.teamId === t.id);
-                    const count = props.teamWorkspaces.filter(w => projects.some(p => p.id === w.workspace.projectId)).length;
-                    if (count < 1) {
-                        return undefined;
-                    }
-                    return <Link className="gp-link" to={`/t/${t.slug}/workspaces`}>{t.name}</Link>;
-                })
-                .filter(t => !!t)
-                .map((t, i) => <>{i > 0 && <span>, </span>}{t}</>)
-        }</span>
-    </div>;
-}

components/dashboard/src/workspaces/workspace-model.ts

@@ -26,9 +26,7 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
 
     constructor(
             protected setActiveWorkspaces: (ws: WorkspaceInfo[]) => void,
-            protected setInActiveWorkspaces: (ws: WorkspaceInfo[]) => void,
-            protected projectIds: Promise<string[]>,
-            protected includeWithoutProject?: boolean) {
+            protected setInActiveWorkspaces: (ws: WorkspaceInfo[]) => void) {
         this.internalRefetch();
     }
 
@@ -38,14 +36,12 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
         const [infos, pinned] = await Promise.all([
             getGitpodService().server.getWorkspaces({
                 limit: this.internalLimit,
-                projectId: await this.projectIds,
-                includeWithoutProject: !!this.includeWithoutProject
+                includeWithoutProject: true
             }),
             getGitpodService().server.getWorkspaces({
                 limit: this.internalLimit,
                 pinnedOnly: true,
-                projectId: await this.projectIds,
-                includeWithoutProject: !!this.includeWithoutProject
+                includeWithoutProject: true
             })
         ]);
 
@@ -63,14 +59,6 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
         }
     }
 
-    protected async isIncluded(info: WorkspaceInfo): Promise<boolean> {
-        if (info.workspace.projectId) {
-            return (await this.projectIds).some(id => id === info.workspace.projectId);
-        } else {
-            return !!this.includeWithoutProject;
-        }
-    }
-
     dispose(): void {
         this.disposables.dispose();
     }
@@ -87,7 +75,7 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
                 try {
                     this.currentlyFetching.add(instance.workspaceId);
                     const info = await getGitpodService().server.getWorkspace(instance.workspaceId);
-                    if (info.workspace.type === 'regular' && await this.isIncluded(info)) {
+                    if (info.workspace.type === 'regular') {
                         this.workspaces.set(instance.workspaceId, info);
                         this.notifyWorkpaces();
                     }