[t&p] add workspaces to teams

fixes #4921

Author: svenefftinge

components/dashboard/src/App.tsx

@@ -265,6 +265,9 @@ function App() {
                         if (resourceOrPrebuild === "configure") {
                             return <ConfigureProject />;
                         }
+                        if (resourceOrPrebuild === "workspaces") {
+                            return <Workspaces />;
+                        }
                         if (resourceOrPrebuild === "prebuilds") {
                             return <Prebuilds />;
                         }
@@ -276,21 +279,28 @@ function App() {
                     <Route exact path="/teams/new" component={NewTeam} />
                     <Route exact path="/teams/join" component={JoinTeam} />
                 </Route>
-                {(teams || []).map(team => <Route key={`route-for-team-${team.slug}`} path={`/t/${team.slug}`}>
+                {(teams || []).map(team =>
+                <Route path={`/t/${team.slug}`} key={team.slug}>
                     <Route exact path={`/t/${team.slug}`}>
-                        <Redirect to={`/t/${team.slug}/projects`} />
+                        <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 />;
                         }

components/dashboard/src/Menu.tsx

@@ -43,7 +43,7 @@ export default function Menu() {
     })();
     const prebuildId = (() => {
         const resource = projectName && match?.params?.segment3;
-        if (resource !== "prebuilds" && resource !== "settings" && resource !== "configure") {
+        if (resource !== "workspaces" && resource !== "prebuilds" && resource !== "settings" && resource !== "configure") {
             return resource;
         }
     })();
@@ -93,6 +93,10 @@ export default function Menu() {
                     title: 'Branches',
                     link: `${teamOrUserSlug}/${projectName}`
                 },
+                {
+                    title: 'Workspaces',
+                    link: `${teamOrUserSlug}/${projectName}/workspaces`
+                },
                 {
                     title: 'Prebuilds',
                     link: `${teamOrUserSlug}/${projectName}/prebuilds`
@@ -109,7 +113,11 @@ export default function Menu() {
                 {
                     title: 'Projects',
                     link: `/t/${team.slug}/projects`,
-                    alternatives: [`/${team.slug}`]
+                },
+                {
+                    title: 'Workspaces',
+                    link: `/t/${team.slug}/workspaces`,
+                    alternatives: [`/t/${team.slug}`]
                 },
                 {
                     title: 'Members',

components/dashboard/src/components/Header.tsx

@@ -20,7 +20,7 @@ export default function Header(p: HeaderProps) {
         document.title = `${p.title} — Gitpod`;
     }, []);
     return <div className="lg:px-28 px-10 border-gray-200 dark:border-gray-800">
-        <div className="flex pb-8 pt-6">
+        <div className="flex py-10">
             <div className="">
                 {typeof p.title === "string" ? (<h1 className="tracking-tight">{p.title}</h1>) : p.title}
                 {typeof p.subtitle === "string" ? (<h2 className="tracking-wide">{p.subtitle}</h2>) : p.subtitle}

components/dashboard/src/index.css

@@ -59,7 +59,7 @@
     }
 
     a.gp-link {
-        @apply underline underline-thickness-thin underline-offset-small text-gray-400 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-500;
+        @apply text-blue-500 hover:text-blue-600  dark:text-blue-400 dark:hover:text-blue-500;
     }
 
     input[type=text], input[type=search], input[type=password], select {

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

@@ -43,7 +43,7 @@ export function StartWorkspaceModal(p: StartWorkspaceModalProps) {
         <div className="border-t border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 pt-2">
             <div className="flex">
                 <TabMenuItem name='Recent' selected={selection === 'Recent'} onClick={() => setSelection('Recent')} />
-                <TabMenuItem name='Examples' selected={selection === 'Examples'} onClick={() => setSelection('Examples')} />
+                {p.examples.length>0 && <TabMenuItem name='Examples' selected={selection === 'Examples'} onClick={() => setSelection('Examples')} />}
             </div>
         </div>
         <div className="border-t border-gray-200 dark:border-gray-800 -mx-6 px-6 py-2">