[dashboard] Improve team members page

CHANGELOG.md

@@ -4,12 +4,16 @@ All notable changes to this project will be documented in this file.
 
 ## June 2021
 
+- Add dodo to animals (thanks @a2br!) ([#4589](https://github.com/gitpod-io/gitpod/pull/4589))
+- Implement a new Teams UI in the dashboard (behind a feature flag). ([#4401)](https://github.com/gitpod-io/gitpod/pull/4401), )
 - Breaking Change: Make ports configured in `.gitpod.yml` private by default when no value for `visibility` is given (was public). This change is for security reasons. ([#4548](https://github.com/gitpod-io/gitpod/pull/4548))
 - Fix active workspace list in dashboard (show also older pinned workspaces) ([#4523](https://github.com/gitpod-io/gitpod/pull/4523))
 - Adding `ItemsList` component as a more maintainable and consistent way to render a list of workspaces, git integrations, environment variables, etc. ([#4454](https://github.com/gitpod-io/gitpod/pull/4454))
 - Improve backup stability when pods get evicted ([#4405](https://github.com/gitpod-io/gitpod/pull/4405))
 - Fix text color in workspaces list for dark theme ([#4410](https://github.com/gitpod-io/gitpod/pull/4410))
 - Better reflect incremental prebuilds in prebuilt workspace logs ([#4293](https://github.com/gitpod-io/gitpod/pull/4293))
+- Removing secondary class from the main CTA button to give proper weight (thanks @jordanhailey!) ([#4288](https://github.com/gitpod-io/gitpod/pull/4288)
+- Modify the "New Git Integration" experience to align with provider terminology (thanks @jordanhailey!) ([#4287](https://github.com/gitpod-io/gitpod/pull/4287)
 - Run shellcheck against scripts ([#4280](https://github.com/gitpod-io/gitpod/pull/4280))
 - Implement new Project and Team DB tables and entities ([#4368](https://github.com/gitpod-io/gitpod/pull/4368))
 - On gitpod.io 404 redirect to www.gitpod.io ([#4364](https://github.com/gitpod-io/gitpod/pull/4364))

components/common-go/namegen/workspaceid.go

@@ -199,6 +199,7 @@ var animals = []string{
 	"deer",
 	"dingo",
 	"dinosaur",
+	"dodo",
 	"dog",
 	"dolphin",
 	"donkey",

components/dashboard/src/App.tsx

@@ -159,7 +159,6 @@ function App() {
                 <Route path="/integrations" exact component={Integrations} />
                 <Route path="/notifications" exact component={Notifications} />
                 <Route path="/plans" exact component={Plans} />
-                <Route path="/teams" exact component={Teams} />
                 <Route path="/variables" exact component={EnvironmentVariables} />
                 <Route path="/preferences" exact component={Preferences} />
                 <Route path="/install-github-app" exact component={InstallGitHubApp} />
@@ -189,8 +188,11 @@ function App() {
                         <p className="mt-4 text-lg text-gitpod-red">{decodeURIComponent(getURLHash())}</p>
                     </div>
                 </Route>
-                <Route path="/new-team" exact component={NewTeam} />
-                <Route path="/join-team" exact component={JoinTeam} />
+                <Route path="/teams">
+                    <Route exact path="/teams" component={Teams} />
+                    <Route exact path="/teams/new" component={NewTeam} />
+                    <Route exact path="/teams/join" component={JoinTeam} />
+                </Route>
                 {(teams || []).map(team => <Route path={`/${team.slug}`}>
                     <Route exact path={`/${team.slug}`}>
                         <Redirect to={`/${team.slug}/projects`} />

components/dashboard/src/Menu.tsx

@@ -51,6 +51,9 @@ export default function Menu() {
     const showTeamsUI = user?.rolesOrPermissions?.includes('teams-and-projects') || window.location.hostname.endsWith('gitpod-dev.com') || window.location.hostname.endsWith('gitpod-io-dev.com');
     const team = getCurrentTeam(location, teams);
 
+    // Hide most of the top menu when in a full-page form.
+    const isMinimalUI = ['/new', '/teams/new'].includes(location.pathname);
+
     const [ teamMembers, setTeamMembers ] = useState<Record<string, TeamMemberInfo[]>>({});
     useEffect(() => {
         if (!showTeamsUI || !teams) {
@@ -161,7 +164,7 @@ export default function Menu() {
                                 <span className="flex-1 font-semibold">New Team</span>
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" className="w-3.5"><path fill="currentColor" fill-rule="evenodd" d="M7 0a1 1 0 011 1v5h5a1 1 0 110 2H8v5a1 1 0 11-2 0V8H1a1 1 0 010-2h5V1a1 1 0 011-1z" clip-rule="evenodd" /></svg>
                             </div>,
-                            onClick: () => history.push("/new-team"),
+                            onClick: () => history.push("/teams/new"),
                         }
                     ]}>
                         <div className="flex h-full p-2 mt-0.5">
@@ -179,13 +182,13 @@ export default function Menu() {
     }
 
     return <>
-        <header className="lg:px-28 px-10 flex flex-col pt-4 space-y-4">
-            <div className="flex">
+        <header className={`lg:px-28 px-10 flex flex-col pt-4 space-y-4 ${isMinimalUI ? 'pb-4' : ''}`}>
+            <div className="flex h-10">
                 <div className="flex justify-between items-center pr-3">
                     <Link to="/">
                         <img src={gitpodIcon} className="h-6" />
                     </Link>
-                    <div className="ml-2 text-base">
+                    {!isMinimalUI && <div className="ml-2 text-base">
                         {showTeamsUI
                             ? renderTeamMenu()
                             : <nav className="flex-1">
@@ -197,13 +200,13 @@ export default function Menu() {
                                 </ul>
                             </nav>
                         }
-                    </div>
+                    </div>}
                 </div>
                 <div className="flex flex-1 items-center w-auto" id="menu">
                     <nav className="flex-1">
                         <ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
                             <li className="flex-1"></li>
-                            {rightMenu.map(entry => <li key={entry.title}>
+                            {!isMinimalUI && rightMenu.map(entry => <li key={entry.title}>
                                 <PillMenuItem name={entry.title} selected={isSelected(entry, location)} link={entry.link}/>
                             </li>)}
                         </ul>
@@ -230,7 +233,7 @@ export default function Menu() {
                     </div>
                 </div>
             </div>
-            {showTeamsUI && <div className="flex">
+            {!isMinimalUI && showTeamsUI && <div className="flex">
                 {leftMenu.map(entry => <TabMenuItem name={entry.title} selected={isSelected(entry, location)} link={entry.link}/>)}
             </div>}
         </header>

components/dashboard/src/components/ItemsList.tsx

@@ -22,7 +22,7 @@ export function Item(props: {
 }) {
     const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
     const notHeaderClassName = "rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light";
-    return <div className={`flex flex-grow flex-row w-full px-3 py-3 justify-between transition ease-in-out group ${props.header ? headerClassName : notHeaderClassName} ${props.className || ""}`}>
+    return <div className={`flex flex-grow flex-row w-full px-3 py-3 justify-between transition ease-in-out ${props.header ? headerClassName : notHeaderClassName} ${props.className || ""}`}>
         {props.children}
     </div>;
 }

components/dashboard/src/components/Tooltip.tsx

@@ -20,7 +20,7 @@ function Tooltip(props: TooltipProps) {
                 {props.children}
             </div>
             {expanded ?
-                <div style={{top: '-100%', left: '50%', transform: 'translate(-50%, -100%)'}} className={`mt-2 z-50 py-1 px-2 bg-gray-900 text-gray-100 text-sm absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-md truncated`}>
+                <div style={{top: '-100%', left: '50%', transform: 'translate(-50%, -100%)'}} className={`mt-2 z-50 py-1 px-2 bg-gray-900 text-gray-100 text-sm absolute flex flex-col border border-gray-200 dark:border-gray-800 rounded-md truncated whitespace-nowrap`}>
                     {props.content}
                 </div>
                 :

components/dashboard/src/projects/NewProject.tsx

@@ -305,7 +305,7 @@ export default function NewProject() {
         </>)
     };
 
-    return (<div className="flex flex-col w-96 mt-16 mx-auto items-center">
+    return (<div className="flex flex-col w-96 mt-24 mx-auto items-center">
         <h1>New Project</h1>
         <p className="text-gray-500 text-center text-base">Projects allow you to set up and acess Prebuilds.</p>