Skip to content

Commit

Permalink
[dashboard] deprecate individual account
Browse files Browse the repository at this point in the history
  • Loading branch information
@svenefftinge
svenefftinge committed Sep 28, 2022
1 parent 69b7b2a commit c159871
Showing 1 changed file with 76 additions and 77 deletions.
153 changes: 76 additions & 77 deletions components/dashboard/src/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { UserContext } from "./user-context";
import { TeamsContext, getCurrentTeam, getSelectedTeamSlug } from "./teams/teams-context";
import getSettingsMenu from "./settings/settings-menu";
import { getAdminMenu } from "./admin/admin-menu";
import ContextMenu from "./components/ContextMenu";
import ContextMenu, { ContextMenuEntry } from "./components/ContextMenu";
import Separator from "./components/Separator";
import PillMenuItem from "./components/PillMenuItem";
import TabMenuItem from "./components/TabMenuItem";
Expand Down Expand Up @@ -90,8 +90,6 @@ export default function Menu() {
return all.some((n) => n === path || n + "/" === path);
}

const userFullName = user?.fullName || user?.name || "...";

// Hide most of the top menu when in a full-page form.
const isMinimalUI = inResource(location.pathname, ["new", "teams/new", "open"]);
const isWorkspacesUI = inResource(location.pathname, ["workspaces"]);
Expand Down Expand Up @@ -160,7 +158,7 @@ export default function Menu() {
}, [teams]);

const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
const leftMenu: Entry[] = (() => {
const secondLevelMenu: Entry[] = (() => {
// Project menu
if (projectSlug) {
return [
Expand Down Expand Up @@ -229,6 +227,13 @@ export default function Menu() {
});
return userMenu;
})();
const leftMenu: Entry[] = [
{
title: "Workspaces",
link: "/workspaces",
alternatives: ["/"],
},
];
const rightMenu: Entry[] = [
...(user?.rolesOrPermissions?.includes("admin")
? [
Expand All @@ -239,11 +244,6 @@ export default function Menu() {
},
]
: []),
{
title: "Workspaces",
link: "/workspaces",
alternatives: ["/"],
},
];

const handleFeedbackFormClick = () => {
Expand All @@ -255,84 +255,68 @@ export default function Menu() {
};
const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isAdminUI && teamOrUserSlug;
const renderTeamMenu = () => {
if (!teams || teams.length === 0) {
return (
<div className="pl-2">
<PillMenuItem name="New team" link="/teams/new" />
</div>
);
}
const entries: (ContextMenuEntry & { slug: string })[] = [
...(teams || [])
.map((t) => ({
slug: t.slug,
title: t.name,
customContent: (
<div className="w-full text-gray-400 flex flex-col">
<span className="text-gray-800 dark:text-gray-300 text-base font-semibold">{t.name}</span>
<span className="">
{!!teamMembers[t.id]
? `${teamMembers[t.id].length} member${teamMembers[t.id].length === 1 ? "" : "s"}`
: "..."}
</span>
</div>
),
active: getSelectedTeamSlug() === t.slug,
separator: true,
link: `/t/${t.slug}`,
}))
.sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
{
slug: "",
title: "Create a new team",
customContent: (
<div className="w-full text-gray-400 flex items-center">
<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"
fillRule="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"
clipRule="evenodd"
/>
</svg>
</div>
),
link: "/teams/new",
},
];
const classes =
"flex h-full text-base py-0 " +
(isTeamLevelActive
? "text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 border-gray-700 dark:border-gray-200"
: "text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700");
return (
<div className="flex p-1 pl-3">
<Link to={getSelectedTeamSlug() ? `/t/${getSelectedTeamSlug()}/projects` : `/projects`}>
<div className="flex p-1 pl-2">
<Link to={entries.find((e) => e.slug === getSelectedTeamSlug())?.link!}>
<span
className={`${classes} rounded-tl-2xl rounded-bl-2xl border-r pl-3 pr-2 py-1 bg-gray-50 font-semibold`}
>
{teams?.find((t) => t.slug === getSelectedTeamSlug())?.name || userFullName}
{entries.find((e) => e.slug === getSelectedTeamSlug())?.title!}
</span>
</Link>
<div className={`${classes} rounded-tr-2xl rounded-br-2xl px-1`}>
<ContextMenu
customClasses="w-64 left-0"
menuEntries={[
{
title: userFullName,
customContent: (
<div className="w-full text-gray-500 flex flex-col">
<span className="text-gray-800 dark:text-gray-100 text-base font-semibold">
{userFullName}
</span>
<span className="">Personal Account</span>
</div>
),
active: getSelectedTeamSlug() === "",
separator: true,
link: "/projects",
},
...(teams || [])
.map((t) => ({
title: t.name,
customContent: (
<div className="w-full text-gray-400 flex flex-col">
<span className="text-gray-800 dark:text-gray-300 text-base font-semibold">
{t.name}
</span>
<span className="">
{!!teamMembers[t.id]
? `${teamMembers[t.id].length} member${
teamMembers[t.id].length === 1 ? "" : "s"
}`
: "..."}
</span>
</div>
),
active: getSelectedTeamSlug() === t.slug,
separator: true,
link: `/t/${t.slug}`,
}))
.sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
{
title: "Create a new team",
customContent: (
<div className="w-full text-gray-400 flex items-center">
<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"
fillRule="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"
clipRule="evenodd"
/>
</svg>
</div>
),
link: "/teams/new",
},
]}
>
<ContextMenu customClasses="w-64 left-0" menuEntries={entries}>
<div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
Expand Down Expand Up @@ -391,7 +375,22 @@ export default function Menu() {
<Link to="/">
<img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
</Link>
{!isMinimalUI && <div className="ml-2 text-base">{renderTeamMenu()}</div>}
{!isMinimalUI && (
<>
<div className="pl-3 text-base flex">
{leftMenu.map((entry) => (
<div className="p-1" key={entry.title}>
<PillMenuItem
name={entry.title}
selected={isSelected(entry, location)}
link={entry.link}
/>
</div>
))}
</div>
{renderTeamMenu()}
</>
)}
</div>
<div className="flex flex-1 items-center w-auto" id="menu">
<nav className="flex-1">
Expand Down Expand Up @@ -456,7 +455,7 @@ export default function Menu() {
</div>
{!isMinimalUI && !prebuildId && !isWorkspacesUI && !isAdminUI && (
<nav className="flex">
{leftMenu.map((entry: Entry) => (
{secondLevelMenu.map((entry: Entry) => (
<TabMenuItem
key={entry.title}
name={entry.title}
Expand Down

0 comments on commit c159871

Please sign in to comment.