Skip to content

[Dashboard] Deslugging #16070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 31, 2023
Merged

[Dashboard] Deslugging #16070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/dashboard/src/AppNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function AppNotifications() {
if (notifications.length === 1) {
href = `${gitpodHostUrl}billing`;
} else if (notifications.length === 2) {
href = `${gitpodHostUrl}t/${notifications[notifications.length - 1]}/billing`;
href = `${gitpodHostUrl}/org-billing`;
}
return (
<span>
Expand Down
60 changes: 25 additions & 35 deletions components/dashboard/src/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { countries } from "countries-list";
import gitpodIcon from "./icons/gitpod.svg";
import { getGitpodService, gitpodHostUrl } from "./service/service";
import { UserContext } from "./user-context";
import { TeamsContext, getCurrentTeam, getSelectedTeamSlug } from "./teams/teams-context";
import { useCurrentTeam, useTeams } from "./teams/teams-context";
import { getAdminMenu } from "./admin/admin-menu";
import ContextMenu, { ContextMenuEntry } from "./components/ContextMenu";
import Separator from "./components/Separator";
Expand All @@ -39,9 +39,9 @@ interface Entry {
export default function Menu() {
const { user } = useContext(UserContext);
const { showUsageView, oidcServiceEnabled } = useContext(FeatureFlagContext);
const { teams } = useContext(TeamsContext);
const teams = useTeams();
const location = useLocation();
const team = getCurrentTeam(location, teams);
const team = useCurrentTeam();
const { setCurrency, setIsStudent, setIsChargebeeCustomer } = useContext(PaymentContext);
const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
const [userBillingMode, setUserBillingMode] = useState<BillingMode | undefined>(undefined);
Expand All @@ -57,17 +57,12 @@ export default function Menu() {
getGitpodService().server.getBillingModeForUser().then(setUserBillingMode);
}, []);

const teamRouteMatch = useRouteMatch<{ segment1?: string; segment2?: string; segment3?: string }>(
"/t/:segment1/:segment2?/:segment3?",
);

// TODO: Remove it after remove projects under personal accounts
const projectsRouteMatch = useRouteMatch<{ segment1?: string; segment2?: string }>(
"/projects/:segment1?/:segment2?",
);

const projectSlug = (() => {
const resource = teamRouteMatch?.params?.segment2 || projectsRouteMatch?.params.segment1;
const resource = projectsRouteMatch?.params.segment1;
if (
resource &&
![
Expand All @@ -89,7 +84,7 @@ export default function Menu() {
}
})();
const prebuildId = (() => {
const resource = projectSlug && (teamRouteMatch?.params?.segment3 || projectsRouteMatch?.params.segment2);
const resource = projectSlug && projectsRouteMatch?.params.segment2;
if (
resource &&
![
Expand All @@ -110,7 +105,7 @@ export default function Menu() {
}

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

// 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) => Project.slug(p) === projectSlug);
if (!project) {
return;
}
Expand All @@ -191,22 +185,21 @@ export default function Menu() {
}
}, [team]);

const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
const secondLevelMenu: Entry[] = (() => {
// Project menu
if (projectSlug) {
return [
{
title: "Branches",
link: `${teamOrUserSlug}/${projectSlug}`,
link: `/projects/${projectSlug}`,
},
{
title: "Prebuilds",
link: `${teamOrUserSlug}/${projectSlug}/prebuilds`,
link: `/projects/${projectSlug}/prebuilds`,
},
{
title: "Settings",
link: `${teamOrUserSlug}/${projectSlug}/settings`,
link: `/projects/${projectSlug}/settings`,
alternatives: getProjectSettingsMenu({ slug: projectSlug } as Project, team).flatMap((e) => e.link),
},
];
Expand All @@ -220,12 +213,12 @@ export default function Menu() {
const teamSettingsList = [
{
title: "Projects",
link: `/t/${team.slug}/projects`,
link: `/projects`,
alternatives: [] as string[],
},
{
title: "Members",
link: `/t/${team.slug}/members`,
link: `/members`,
},
];
if (
Expand All @@ -234,13 +227,13 @@ export default function Menu() {
) {
teamSettingsList.push({
title: "Usage",
link: `/t/${team.slug}/usage`,
link: `/org-usage`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can align usage and org-usage in follow-up steps, same for billing/org-billing

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good - the /org-usage path here felt weird to me since nothing else is prefixed by /org-. Do you mean it'll be easier to change after this PR to something like that?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's just fewer changes. the PR is already quite big.

});
}
if (currentUserInTeam?.role === "owner") {
teamSettingsList.push({
title: "Settings",
link: `/t/${team.slug}/settings`,
link: `/org-settings`,
alternatives: getTeamSettingsMenu({
team,
billingMode: teamBillingMode,
Expand Down Expand Up @@ -277,7 +270,7 @@ export default function Menu() {
const onFeedbackFormClose = () => {
setFeedbackFormVisible(false);
};
const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isPersonalSettingsUI && !isAdminUI && teamOrUserSlug;
const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isPersonalSettingsUI && !isAdminUI;
const renderTeamMenu = () => {
if (!hasIndividualProjects && (!teams || teams.length === 0)) {
return (
Expand All @@ -291,8 +284,8 @@ export default function Menu() {
);
}
const userFullName = user?.fullName || user?.name || "...";
const entries: (ContextMenuEntry & { slug: string })[] = [
...(hasIndividualProjects
const entries: ContextMenuEntry[] = [
...(!user?.additionalData?.isMigratedToTeamOnlyAttribution
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with this change I'm adding the previously deprecated "personal account" entry back in the drop-down menu unless you have been migrated (in preview env everyone is migrated, so you don't see this) If you want to test the behavior you need to change the config cat value and delete/recreate your user.

? [
{
title: userFullName,
Expand All @@ -304,16 +297,14 @@ export default function Menu() {
<span className="">Personal Account</span>
</div>
),
active: getSelectedTeamSlug() === "",
active: team === undefined,
separator: true,
slug: "",
link: "/projects",
link: `${location.pathname}?org=0`,
},
]
: []),
...(teams || [])
.map((t) => ({
slug: t.slug,
title: t.name,
customContent: (
<div className="w-full text-gray-400 flex flex-col">
Expand All @@ -325,13 +316,12 @@ export default function Menu() {
</span>
</div>
),
active: getSelectedTeamSlug() === t.slug,
active: team?.id === t.id,
separator: true,
link: `/t/${t.slug}`,
link: `/projects/?org=${t.id}`,
}))
.sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
{
slug: "new",
title: "Create a new organization",
customContent: (
<div className="w-full text-gray-400 flex items-center">
Expand All @@ -354,7 +344,7 @@ export default function Menu() {
(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");
const selectedEntry = entries.find((e) => e.slug === getSelectedTeamSlug()) || entries[0];
const selectedEntry = entries.find((e) => e.active) || entries[0];
return (
<div className="flex p-1">
<Link to={selectedEntry.link!}>
Expand All @@ -378,14 +368,14 @@ export default function Menu() {
</ContextMenu>
</div>
{projectSlug && !prebuildId && !isAdminUI && (
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
<Link to={`/projects/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
<span className=" flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
{project?.name}
</span>
</Link>
)}
{prebuildId && (
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
<Link to={`/projects/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
<span className=" flex h-full text-base text-gray-500 bg-gray-50 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
{project?.name}
</span>
Expand All @@ -403,7 +393,7 @@ export default function Menu() {
/>
</svg>
</div>
<Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
<Link to={`/projects/${projectSlug}/${prebuildId}`}>
<span className="flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold px-3 py-1 rounded-2xl border-gray-100">
{prebuildId.substring(0, 8).trimEnd()}
</span>
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/admin/ProjectDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@ export default function ProjectDetail(props: { project: Project; owner: string |
<>
<Link
className="text-blue-400 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-400 truncate"
to={"/admin/teams/" + props.project.teamId}
to={"/admin/orgs/" + props.project.teamId}
>
{props.owner}
</Link>
<span className="text-gray-400 dark:text-gray-500"> (Team)</span>
<span className="text-gray-400 dark:text-gray-500"> (Organization)</span>
</>
</Property>
)}
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/admin/TeamDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default function TeamDetail(props: { team: Team }) {
</span>
)}
</div>
<span className="mb-6 text-gray-400">/t/{team.slug}</span>
<span className="mb-6 text-gray-400">{team.id}</span>
<span className="text-gray-400"> · </span>
<span className="text-gray-400">Created on {dayjs(team.creationTime).format("MMM D, YYYY")}</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/admin/admin-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function getAdminMenu() {
link: ["/admin/projects"],
},
{
title: "Organizationss",
title: "Organizations",
link: ["/admin/orgs"],
},
{
Expand Down
Loading