-
-
-
-
-
-
-
- {providerFromContext
- ? <>
-
Open a cloud-based developer environment
- for the repository {repoPathname?.slice(1)}
-
- : <>
- Log in{showWelcome ? '' : ' to Gitpod'}
- ALWAYS READY-TO-CODE
- }
-
-
+ ) : null}
+
+
+
+
+
+
+
+
-
- {providerFromContext
- ?
- openLogin(providerFromContext.host)}>
- {iconForAuthProvider(providerFromContext.authProviderType)}
- Continue with {simplifyProviderName(providerFromContext.host)}
-
- :
- authProviders.map(ap =>
- openLogin(ap.host)}>
- {iconForAuthProvider(ap.authProviderType)}
- Continue with {simplifyProviderName(ap.host)}
- )
- }
-
+
+ {providerFromContext ? (
+ <>
+
+ Open a cloud-based developer environment
+
+ for the repository {repoPathname?.slice(1)}
+
+ ) : (
+ <>
+ Log in{showWelcome ? "" : " to Gitpod"}
+ ALWAYS READY-TO-CODE
+
+ )}
+
- {errorMessage && (
-
-
-
-
-
+
+ {providerFromContext ? (
+ openLogin(providerFromContext.host)}
+ >
+ {iconForAuthProvider(providerFromContext.authProviderType)}
+
+ Continue with {simplifyProviderName(providerFromContext.host)}
+
+
+ ) : (
+ authProviders.map((ap) => (
+ openLogin(ap.host)}
+ >
+ {iconForAuthProvider(ap.authProviderType)}
+
+ Continue with {simplifyProviderName(ap.host)}
+
+
+ ))
+ )}
- )}
+ {errorMessage && (
+
+
+
+
+
+
+ )}
+
+
+
-
-
-
-
);
+ );
}
diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 67c585a4f20d10..4453501e0256b3 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -9,14 +9,14 @@ import { useContext, useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useLocation, useRouteMatch } from "react-router";
import { Location } from "history";
-import gitpodIcon from './icons/gitpod.svg';
+import gitpodIcon from "./icons/gitpod.svg";
import CaretDown from "./icons/CaretDown.svg";
import CaretUpDown from "./icons/CaretUpDown.svg";
import { getGitpodService, gitpodHostUrl } from "./service/service";
import { UserContext } from "./user-context";
import { TeamsContext, getCurrentTeam } from "./teams/teams-context";
-import settingsMenu from './settings/settings-menu';
-import { adminMenu } from './admin/admin-menu';
+import settingsMenu from "./settings/settings-menu";
+import { adminMenu } from "./admin/admin-menu";
import ContextMenu from "./components/ContextMenu";
import Separator from "./components/Separator";
import PillMenuItem from "./components/PillMenuItem";
@@ -26,9 +26,9 @@ import { getProjectSettingsMenu } from "./projects/ProjectSettings";
import { ProjectContext } from "./projects/project-context";
interface Entry {
- title: string,
- link: string,
- alternatives?: string[]
+ title: string;
+ link: string;
+ alternatives?: string[];
}
export default function Menu() {
@@ -38,7 +38,9 @@ export default function Menu() {
const team = getCurrentTeam(location, teams);
const { project, setProject } = useContext(ProjectContext);
- const match = useRouteMatch<{ segment1?: string, segment2?: string, segment3?: string }>("/(t/)?:segment1/:segment2?/:segment3?");
+ const match = useRouteMatch<{ segment1?: string; segment2?: string; segment3?: string }>(
+ "/(t/)?:segment1/:segment2?/:segment3?",
+ );
const projectSlug = (() => {
const resource = match?.params?.segment2;
if (resource && !["projects", "members", "users", "workspaces", "settings", "teams"].includes(resource)) {
@@ -47,59 +49,71 @@ export default function Menu() {
})();
const prebuildId = (() => {
const resource = projectSlug && match?.params?.segment3;
- if (resource !== "workspaces" && resource !== "prebuilds" && resource !== "settings" && resource !== "configure" && resource !== "variables") {
+ if (
+ resource !== "workspaces" &&
+ resource !== "prebuilds" &&
+ resource !== "settings" &&
+ resource !== "configure" &&
+ resource !== "variables"
+ ) {
return resource;
}
})();
function isSelected(entry: Entry, location: Location
) {
- const all = [entry.link, ...(entry.alternatives||[])].map(l => l.toLowerCase());
+ const all = [entry.link, ...(entry.alternatives || [])].map((l) => l.toLowerCase());
const path = location.pathname.toLowerCase();
- return all.some(n => n === path || n+'/' === path);
+ return all.some((n) => n === path || n + "/" === path);
}
- const userFullName = user?.fullName || user?.name || '...';
+ const userFullName = user?.fullName || user?.name || "...";
+ // TODO: This one smells like it could be some clever trickery,
+ // so opting for keeping it and disabling linting until
+ // Alex Tugarev chimes-in
+ // eslint-disable-next-line no-lone-blocks
{
// updating last team selection
try {
- localStorage.setItem('team-selection', team ? team.slug : "");
- } catch {
- }
+ localStorage.setItem("team-selection", team ? team.slug : "");
+ } catch {}
}
// Hide most of the top menu when in a full-page form.
- const isMinimalUI = ['/new', '/teams/new', '/open'].includes(location.pathname);
+ const isMinimalUI = ["/new", "/teams/new", "/open"].includes(location.pathname);
- const [ teamMembers, setTeamMembers ] = useState>({});
+ const [teamMembers, setTeamMembers] = useState>({});
useEffect(() => {
if (!teams) {
return;
}
(async () => {
const members: Record = {};
- await Promise.all(teams.map(async (team) => {
- try {
- members[team.id] = await getGitpodService().server.getTeamMembers(team.id);
- } catch (error) {
- console.error('Could not get members of team', team, error);
- }
- }));
+ await Promise.all(
+ teams.map(async (team) => {
+ try {
+ members[team.id] = await getGitpodService().server.getTeamMembers(team.id);
+ } catch (error) {
+ console.error("Could not get members of team", team, error);
+ }
+ }),
+ );
setTeamMembers(members);
})();
- }, [ teams ]);
+ }, [teams]);
useEffect(() => {
if (!teams || !projectSlug) {
return;
}
(async () => {
- const projects = (!!team
+ const projects = !!team
? await getGitpodService().server.getTeamProjects(team.id)
- : await getGitpodService().server.getUserProjects());
+ : await getGitpodService().server.getUserProjects();
// Find project matching with slug, otherwise with name
- const project = projectSlug && projects.find(p => p.slug ? p.slug === projectSlug : p.name === projectSlug);
+ const project =
+ projectSlug && projects.find((p) => (p.slug ? p.slug === projectSlug : p.name === projectSlug));
if (!project) {
return;
}
@@ -107,47 +121,47 @@ export default function Menu() {
})();
}, [projectSlug, setProject, team, teams]);
- const teamOrUserSlug = !!team ? '/t/' + team.slug : '/projects';
+ const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
const leftMenu: Entry[] = (() => {
// Project menu
if (projectSlug) {
return [
{
- title: 'Branches',
+ title: "Branches",
link: `${teamOrUserSlug}/${projectSlug}`,
},
{
- title: 'Prebuilds',
+ title: "Prebuilds",
link: `${teamOrUserSlug}/${projectSlug}/prebuilds`,
},
{
- title: 'Settings',
+ title: "Settings",
link: `${teamOrUserSlug}/${projectSlug}/settings`,
- alternatives: getProjectSettingsMenu({ slug: projectSlug } as Project, team).flatMap(e => e.link),
+ alternatives: getProjectSettingsMenu({ slug: projectSlug } as Project, team).flatMap((e) => e.link),
},
];
}
// Team menu
if (team) {
- const currentUserInTeam = (teamMembers[team.id] || []).find(m => m.userId === user?.id);
+ const currentUserInTeam = (teamMembers[team.id] || []).find((m) => m.userId === user?.id);
const teamSettingsList = [
{
- title: 'Projects',
+ title: "Projects",
link: `/t/${team.slug}/projects`,
- alternatives: ([] as string[])
+ alternatives: [] as string[],
},
{
- title: 'Members',
- link: `/t/${team.slug}/members`
- }
+ title: "Members",
+ link: `/t/${team.slug}/members`,
+ },
];
if (currentUserInTeam?.role === "owner") {
teamSettingsList.push({
- title: 'Settings',
+ title: "Settings",
link: `/t/${team.slug}/settings`,
- alternatives: getTeamSettingsMenu(team).flatMap(e => e.link),
- })
+ alternatives: getTeamSettingsMenu(team).flatMap((e) => e.link),
+ });
}
return teamSettingsList;
@@ -155,148 +169,226 @@ export default function Menu() {
// User menu
return [
{
- title: 'Workspaces',
- link: '/workspaces',
- alternatives: ['/']
+ title: "Workspaces",
+ link: "/workspaces",
+ alternatives: ["/"],
},
{
- title: 'Projects',
- link: '/projects'
+ title: "Projects",
+ link: "/projects",
},
{
- title: 'Settings',
- link: '/settings',
- alternatives: settingsMenu.flatMap(e => e.link)
- }
+ title: "Settings",
+ link: "/settings",
+ alternatives: settingsMenu.flatMap((e) => e.link),
+ },
];
})();
const rightMenu: Entry[] = [
- ...(user?.rolesOrPermissions?.includes('admin') ? [{
- title: 'Admin',
- link: '/admin',
- alternatives: adminMenu.flatMap(e => e.link)
- }] : []),
+ ...(user?.rolesOrPermissions?.includes("admin")
+ ? [
+ {
+ title: "Admin",
+ link: "/admin",
+ alternatives: adminMenu.flatMap((e) => e.link),
+ },
+ ]
+ : []),
{
- title: 'Docs',
- link: 'https://www.gitpod.io/docs/',
+ title: "Docs",
+ link: "https://www.gitpod.io/docs/",
},
{
- title: 'Help',
- link: 'https://www.gitpod.io/support',
- }
+ title: "Help",
+ link: "https://www.gitpod.io/support",
+ },
];
const renderTeamMenu = () => {
return (
- { projectSlug &&
- {team?.name || userFullName}
-
-
}
+ {projectSlug && (
+
+
+ {team?.name || userFullName}
+
+
+
+ )}
-
- {userFullName}
- Personal Account
- ,
- active: !team,
- separator: true,
- link: '/',
- },
- ...(teams || []).map(t => ({
- title: t.name,
- customContent:
- {t.name}
- {!!teamMembers[t.id]
- ? `${teamMembers[t.id].length} member${teamMembers[t.id].length === 1 ? '' : 's'}`
- : '...'
- }
-
,
- active: team && team.id === t.id,
- separator: true,
- link: `/t/${t.slug}`,
- })).sort((a, b) => a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1),
- {
- title: 'Create a new team',
- customContent:
,
- link: '/teams/new',
- }
- ]}>
+
+
+ {userFullName}
+
+ Personal Account
+
+
+ {t.name}
+
+
+ {!!teamMembers[t.id]
+ ? `${teamMembers[t.id].length} member${
+ teamMembers[t.id].length === 1 ? "" : "s"
+ }`
+ : "..."}
+
+
+ ),
+ active: team && team.id === t.id,
+ separator: true,
+ link: `/t/${t.slug}`,
+ }))
+ .sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
+ {
+ title: "Create a new team",
+ customContent: (
+
+ ),
+ link: "/teams/new",
+ },
+ ]}
+ >
- { !projectSlug &&
{team?.name || userFullName} }
-
+ {!projectSlug && (
+
+ {team?.name || userFullName}
+
+ )}
+
- { projectSlug && (
+ {projectSlug && (
)}
- { prebuildId && (
+ {prebuildId && (