[t&p] add workspaces to teams

fixes #4921
gitpod-io · Sep 23, 2021 · 7a1b41c · 7a1b41c
1 parent 1a91123
commit 7a1b41c
Show file tree

Hide file tree

Showing 13 changed files with 324 additions and 189 deletions.
diff --git a/components/dashboard/src/App.tsx b/components/dashboard/src/App.tsx
@@ -214,6 +214,9 @@ function App() {
                         if (resourceOrPrebuild === "configure") {
                             return <ConfigureProject />;
                         }
+                        if (resourceOrPrebuild === "workspaces") {
+                            return <Workspaces />;
+                        }
                         if (resourceOrPrebuild === "prebuilds") {
                             return <Prebuilds />;
                         }
@@ -225,21 +228,28 @@ function App() {
                     <Route exact path="/teams/new" component={NewTeam} />
                     <Route exact path="/teams/join" component={JoinTeam} />
                 </Route>
-                {(teams || []).map(team => <Route 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 />;
                         }

diff --git a/components/dashboard/src/Menu.tsx b/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;
         }
     })();
@@ -85,6 +85,10 @@ export default function Menu() {
                     title: 'Branches',
                     link: `${teamOrUserSlug}/${projectName}`
                 },
+                {
+                    title: 'Workspaces',
+                    link: `${teamOrUserSlug}/${projectName}/workspaces`
+                },
                 {
                     title: 'Prebuilds',
                     link: `${teamOrUserSlug}/${projectName}/prebuilds`
@@ -101,7 +105,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',
@@ -261,7 +269,7 @@ export default function Menu() {
                 </div>
             </div>
             {!isMinimalUI && showTeamsUI && !prebuildId && <div className="flex">
-                {leftMenu.map((entry: Entry) => <TabMenuItem name={entry.title} selected={isSelected(entry, location)} link={entry.link}/>)}
+                {leftMenu.map((entry: Entry) => <TabMenuItem key={entry.title} name={entry.title} selected={isSelected(entry, location)} link={entry.link}/>)}
             </div>}
         </header>
         {showTeamsUI && <Separator />}

diff --git a/components/dashboard/src/components/Header.tsx b/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}

diff --git a/components/dashboard/src/index.css b/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 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-500;
     }
 
     input[type=text], input[type=search], input[type=password], select {

diff --git a/components/dashboard/src/workspaces/StartWorkspaceModal.tsx b/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">