Merge pull request #3270 from Bima42/3165-add-environment-switch-dropdown

feat: being able to switch environments from breadcrumbs

Author: Siumauricio

apps/dokploy/components/shared/breadcrumb-sidebar.tsx

@@ -1,22 +1,36 @@
 import Link from "next/link";
 import { Fragment } from "react";
+import { ChevronDown } from "lucide-react";
 import {
 	Breadcrumb,
 	BreadcrumbItem,
 	BreadcrumbLink,
 	BreadcrumbList,
 	BreadcrumbSeparator,
+	BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 
-interface Props {
-	list: {
+interface BreadcrumbEntry {
+	name: string;
+	href?: string;
+	dropdownItems?: {
 		name: string;
-		href?: string;
+		href: string;
 	}[];
 }
 
+interface Props {
+	list: BreadcrumbEntry[];
+}
+
 export const BreadcrumbSidebar = ({ list }: Props) => {
 	return (
 		<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
@@ -29,13 +43,29 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 							{list.map((item, index) => (
 								<Fragment key={item.name}>
 									<BreadcrumbItem className="block">
-										<BreadcrumbLink href={item?.href} asChild={!!item?.href}>
-											{item.href ? (
-												<Link href={item?.href}>{item?.name}</Link>
-											) : (
-												item?.name
-											)}
-										</BreadcrumbLink>
+										{item.dropdownItems && item.dropdownItems.length > 0 ? (
+											<DropdownMenu>
+												<DropdownMenuTrigger className="flex items-center gap-1 hover:text-foreground transition-colors outline-none">
+													{item.name}
+													<ChevronDown className="h-4 w-4 opacity-50" />
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="start">
+													{item.dropdownItems.map((subItem) => (
+														<DropdownMenuItem key={subItem.href} asChild>
+															<Link href={subItem.href}>{subItem.name}</Link>
+														</DropdownMenuItem>
+													))}
+												</DropdownMenuContent>
+											</DropdownMenu>
+										) : (
+											<BreadcrumbLink href={item?.href} asChild={!!item?.href}>
+												{item.href ? (
+													<Link href={item?.href}>{item?.name}</Link>
+												) : (
+													<BreadcrumbPage>{item?.name}</BreadcrumbPage>
+												)}
+											</BreadcrumbLink>
+										)}
 									</BreadcrumbItem>
 									{index + 1 < list.length && (
 										<BreadcrumbSeparator className="block" />

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx

@@ -279,6 +279,16 @@ const EnvironmentPage = (
 	const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
 	const { projectId, environmentId } = props;
 	const { data: auth } = api.user.get.useQuery();
+
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: projectId,
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
+
 	const [sortBy, setSortBy] = useState<string>(() => {
 		if (typeof window !== "undefined") {
 			return localStorage.getItem("servicesSort") || "lastDeploy-desc";
@@ -863,6 +873,7 @@ const EnvironmentPage = (
 					},
 					{
 						name: currentEnvironment.name,
+						dropdownItems: environmentDropdownItems,
 					},
 				]}
 			/>

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx

@@ -91,18 +91,27 @@ const Service = (
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: auth } = api.user.get.useQuery();
 
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: data?.environment?.project?.projectId || "",
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
+
 	return (
 		<div className="pb-10">
 			<UseKeyboardNav forPage="application" />
 			<BreadcrumbSidebar
 				list={[
 					{ name: "Projects", href: "/dashboard/projects" },
 					{
-						name: data?.environment.project.name || "",
+						name: data?.environment?.project?.name || "",
 					},
 					{
 						name: data?.environment?.name || "",
-						href: `/dashboard/project/${projectId}/environment/${environmentId}`,
+						dropdownItems: environmentDropdownItems,
 					},
 					{
 						name: data?.name || "",

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx

@@ -80,6 +80,14 @@ const Service = (
 
 	const { data: auth } = api.user.get.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: data?.environment?.projectId || "",
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
 
 	return (
 		<div className="pb-10">
@@ -92,7 +100,7 @@ const Service = (
 					},
 					{
 						name: data?.environment?.name || "",
-						href: `/dashboard/project/${projectId}/environment/${environmentId}`,
+						dropdownItems: environmentDropdownItems,
 					},
 					{
 						name: data?.name || "",

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx

@@ -62,6 +62,15 @@ const Mariadb = (
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: data?.environment?.projectId || "",
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
+
 	return (
 		<div className="pb-10">
 			<UseKeyboardNav forPage="mariadb" />
@@ -73,7 +82,7 @@ const Mariadb = (
 					},
 					{
 						name: data?.environment?.name || "",
-						href: `/dashboard/project/${projectId}/environment/${environmentId}`,
+						dropdownItems: environmentDropdownItems,
 					},
 					{
 						name: data?.name || "",

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx

@@ -61,6 +61,14 @@ const Mongo = (
 	const { data: auth } = api.user.get.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: data?.environment?.projectId || "",
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
 
 	return (
 		<div className="pb-10">
@@ -73,7 +81,7 @@ const Mongo = (
 					},
 					{
 						name: data?.environment?.name || "",
-						href: `/dashboard/project/${projectId}/environment/${environmentId}`,
+						dropdownItems: environmentDropdownItems,
 					},
 					{
 						name: data?.name || "",

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx

@@ -60,6 +60,14 @@ const MySql = (
 	const { data: auth } = api.user.get.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: data?.environment?.projectId || "",
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
 
 	return (
 		<div className="pb-10">
@@ -72,7 +80,7 @@ const MySql = (
 					},
 					{
 						name: data?.environment?.name || "",
-						href: `/dashboard/project/${projectId}/environment/${environmentId}`,
+						dropdownItems: environmentDropdownItems,
 					},
 					{
 						name: data?.name || "",

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx

@@ -60,6 +60,14 @@ const Postgresql = (
 	const { data: auth } = api.user.get.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: data?.environment?.projectId || "",
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
 
 	return (
 		<div className="pb-10">
@@ -72,7 +80,7 @@ const Postgresql = (
 					},
 					{
 						name: data?.environment?.name || "",
-						href: `/dashboard/project/${projectId}/environment/${environmentId}`,
+						dropdownItems: environmentDropdownItems,
 					},
 					{
 						name: data?.name || "",

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx

@@ -60,6 +60,14 @@ const Redis = (
 	const { data: auth } = api.user.get.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: environments } = api.environment.byProjectId.useQuery({
+		projectId: data?.environment?.projectId || "",
+	});
+	const environmentDropdownItems =
+		environments?.map((env) => ({
+			name: env.name,
+			href: `/dashboard/project/${projectId}/environment/${env.environmentId}`,
+		})) || [];
 
 	return (
 		<div className="pb-10">
@@ -72,7 +80,7 @@ const Redis = (
 					},
 					{
 						name: data?.environment?.name || "",
-						href: `/dashboard/project/${projectId}/environment/${environmentId}`,
+						dropdownItems: environmentDropdownItems,
 					},
 					{
 						name: data?.name || "",