From 57dc24bcb1193e22cc1eba52f5cbe53fdf6f8305 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 6 Sep 2025 14:30:59 -0600
Subject: [PATCH] feat(search-command): enhance service extraction and project
 navigation

- Introduced a new function `extractAllServicesFromProject` to aggregate services from all environments within a project, including environment details.
- Updated the project selection logic to navigate to the production environment of a project.
- Modified the display of services to include the environment name alongside the service name in the search results.
---
 .../components/dashboard/search-command.tsx   | 78 ++++++++++++++-----
 1 file changed, 58 insertions(+), 20 deletions(-)

diff --git a/apps/dokploy/components/dashboard/search-command.tsx b/apps/dokploy/components/dashboard/search-command.tsx
index 511ca00ab..42430b6d0 100644
--- a/apps/dokploy/components/dashboard/search-command.tsx
+++ b/apps/dokploy/components/dashboard/search-command.tsx
@@ -3,6 +3,10 @@
 import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import React from "react";
+import {
+	extractServices,
+	type Services,
+} from "@/components/dashboard/settings/users/add-permissions";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -20,13 +24,34 @@ import {
 	CommandSeparator,
 } from "@/components/ui/command";
 import { authClient } from "@/lib/auth-client";
-// import {
-// 	extractServices,
-// 	type Services,
-// } from "@/pages/dashboard/project/[projectId]";
 import { api } from "@/utils/api";
 import { StatusTooltip } from "../shared/status-tooltip";
 
+// Extended Services type to include environmentId and environmentName for search navigation
+type SearchServices = Services & {
+	environmentId: string;
+	environmentName: string;
+};
+
+const extractAllServicesFromProject = (project: any): SearchServices[] => {
+	const allServices: SearchServices[] = [];
+
+	// Iterate through all environments in the project
+	project.environments?.forEach((environment: any) => {
+		const environmentServices = extractServices(environment);
+		const servicesWithEnvironmentId: SearchServices[] = environmentServices.map(
+			(service) => ({
+				...service,
+				environmentId: environment.environmentId,
+				environmentName: environment.name,
+			}),
+		);
+		allServices.push(...servicesWithEnvironmentId);
+	});
+
+	return allServices;
+};
+
 export const SearchCommand = () => {
 	const router = useRouter();
 	const [open, setOpen] = React.useState(false);
@@ -51,7 +76,7 @@ export const SearchCommand = () => {
 
 	return (
 		<div>
-			{/* <CommandDialog open={open} onOpenChange={setOpen}>
+			<CommandDialog open={open} onOpenChange={setOpen}>
 				<CommandInput
 					placeholder={"Search projects or settings"}
 					value={search}
@@ -63,25 +88,37 @@ export const SearchCommand = () => {
 					</CommandEmpty>
 					<CommandGroup heading={"Projects"}>
 						<CommandList>
-							{data?.map((project) => (
-								<CommandItem
-									key={project.projectId}
-									onSelect={() => {
-										router.push(`/dashboard/project/${project.projectId}`);
-										setOpen(false);
-									}}
-								>
-									<BookIcon className="size-4 text-muted-foreground mr-2" />
-									{project.name}
-								</CommandItem>
-							))}
+							{data?.map((project) => {
+								console.log("project", project);
+								const productionEnvironment = project.environments.find(
+									(environment) => environment.name === "production",
+								);
+
+								if (!productionEnvironment) return null;
+
+								return (
+									<CommandItem
+										key={project.projectId}
+										onSelect={() => {
+											router.push(
+												`/dashboard/project/${project.projectId}/environment/${productionEnvironment!.environmentId}`,
+											);
+											setOpen(false);
+										}}
+									>
+										<BookIcon className="size-4 text-muted-foreground mr-2" />
+										{project.name} / {productionEnvironment!.name}
+									</CommandItem>
+								);
+							})}
 						</CommandList>
 					</CommandGroup>
 					<CommandSeparator />
 					<CommandGroup heading={"Services"}>
 						<CommandList>
 							{data?.map((project) => {
-								const applications: Services[] = extractServices(project);
+								const applications: SearchServices[] =
+									extractAllServicesFromProject(project);
 								return applications.map((application) => (
 									<CommandItem
 										key={application.id}
@@ -114,7 +151,8 @@ export const SearchCommand = () => {
 											<CircuitBoard className="h-6 w-6 mr-2" />
 										)}
 										<span className="flex-grow">
-											{project.name} / {application.name}{" "}
+											{project.name} / {application.environmentName} /{" "}
+											{application.name}{" "}
 											<div style={{ display: "none" }}>{application.id}</div>
 										</span>
 										<div>
@@ -181,7 +219,7 @@ export const SearchCommand = () => {
 						</CommandItem>
 					</CommandGroup>
 				</CommandList>
-			</CommandDialog> */}
+			</CommandDialog>
 		</div>
 	);
 };