From 741085466bae9300bc69425d7cbb6fdeec41d50a Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Tue, 2 Sep 2025 00:25:09 -0600 Subject: [PATCH] refactor: remove projectId references from service components, streamlining navigation and enhancing clarity in environment context --- .../pages/dashboard/project/[projectId].tsx | 303 ------------------ .../environment/[environmentId].tsx | 1 - .../services/application/[applicationId].tsx | 1 - .../services/compose/[composeId].tsx | 1 - .../services/mariadb/[mariadbId].tsx | 1 - .../services/mongo/[mongoId].tsx | 1 - .../services/mysql/[mysqlId].tsx | 1 - .../services/postgres/[postgresId].tsx | 1 - .../services/redis/[redisId].tsx | 1 - 9 files changed, 311 deletions(-) delete mode 100644 apps/dokploy/pages/dashboard/project/[projectId].tsx diff --git a/apps/dokploy/pages/dashboard/project/[projectId].tsx b/apps/dokploy/pages/dashboard/project/[projectId].tsx deleted file mode 100644 index 22b9588fe..000000000 --- a/apps/dokploy/pages/dashboard/project/[projectId].tsx +++ /dev/null @@ -1,303 +0,0 @@ -import type { findEnvironmentById, findProjectById } from "@dokploy/server"; -import { validateRequest } from "@dokploy/server/lib/auth"; -import { createServerSideHelpers } from "@trpc/react-query/server"; -import { FolderInput, Loader2, PlusIcon } from "lucide-react"; -import type { - GetServerSidePropsContext, - InferGetServerSidePropsType, -} from "next"; -import Head from "next/head"; -import { useRouter } from "next/router"; -import { type ReactElement, useEffect } from "react"; -import superjson from "superjson"; -import { ProjectEnvironment } from "@/components/dashboard/projects/project-environment"; -import { DashboardLayout } from "@/components/layouts/dashboard-layout"; -import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar"; - -import { Button } from "@/components/ui/button"; -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; - -import { appRouter } from "@/server/api/root"; -import { api } from "@/utils/api"; - -type Project = Awaited>; - -type Environment = Omit< - Awaited>, - "project" ->; - -export type Services = { - appName: string; - serverId?: string | null; - name: string; - type: - | "mariadb" - | "application" - | "postgres" - | "mysql" - | "mongo" - | "redis" - | "compose"; - description?: string | null; - id: string; - createdAt: string; - status?: "idle" | "running" | "done" | "error"; -}; - -export const extractServices = (data: Environment | undefined) => { - const applications: Services[] = - data?.applications.map((item) => ({ - appName: item.appName, - name: item.name, - type: "application", - id: item.applicationId, - createdAt: item.createdAt, - status: item.applicationStatus, - description: item.description, - serverId: item.serverId, - })) || []; - - const mariadb: Services[] = - data?.mariadb.map((item) => ({ - appName: item.appName, - name: item.name, - type: "mariadb", - id: item.mariadbId, - createdAt: item.createdAt, - status: item.applicationStatus, - description: item.description, - serverId: item.serverId, - })) || []; - - const postgres: Services[] = - data?.postgres.map((item) => ({ - appName: item.appName, - name: item.name, - type: "postgres", - id: item.postgresId, - createdAt: item.createdAt, - status: item.applicationStatus, - description: item.description, - serverId: item.serverId, - })) || []; - - const mongo: Services[] = - data?.mongo.map((item) => ({ - appName: item.appName, - name: item.name, - type: "mongo", - id: item.mongoId, - createdAt: item.createdAt, - status: item.applicationStatus, - description: item.description, - serverId: item.serverId, - })) || []; - - const redis: Services[] = - data?.redis.map((item) => ({ - appName: item.appName, - name: item.name, - type: "redis", - id: item.redisId, - createdAt: item.createdAt, - status: item.applicationStatus, - description: item.description, - serverId: item.serverId, - })) || []; - - const mysql: Services[] = - data?.mysql.map((item) => ({ - appName: item.appName, - name: item.name, - type: "mysql", - id: item.mysqlId, - createdAt: item.createdAt, - status: item.applicationStatus, - description: item.description, - serverId: item.serverId, - })) || []; - - const compose: Services[] = - data?.compose.map((item) => ({ - appName: item.appName, - name: item.name, - type: "compose", - id: item.composeId, - createdAt: item.createdAt, - status: item.composeStatus, - description: item.description, - serverId: item.serverId, - })) || []; - - applications.push( - ...mysql, - ...redis, - ...mongo, - ...postgres, - ...mariadb, - ...compose, - ); - - applications.sort((a, b) => { - return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(); - }); - - return applications; -}; - -const Project = ( - props: InferGetServerSidePropsType, -) => { - const { projectId } = props; - const { data, isLoading } = api.project.one.useQuery({ projectId }); - const router = useRouter(); - - // Redirigir automáticamente al ambiente de producción por defecto - useEffect(() => { - if (data?.environments && data.environments.length > 0) { - const productionEnv = data.environments.find( - (env) => env.name === "production", - ); - const defaultEnv = productionEnv || data.environments[0]; - - // Redirigir al ambiente por defecto - if (defaultEnv) { - router.push( - `/dashboard/project/${projectId}/environment/${defaultEnv.environmentId}`, - ); - } - } - }, [data?.environments, projectId, router]); - - const emptyEnvironments = - !data?.environments || data.environments.length === 0; - - return ( -
- - - Project: {data?.name} | Dokploy - -
- -
-
- - - - {data?.name} - - {data?.description} - -
-
- - - -
-
-
- - {isLoading ? ( -
- Loading... - -
- ) : emptyEnvironments ? ( -
- - - No environments created yet. Click on Environments to create - one. - -
- ) : ( -
- - - Redirecting to environment... - -
- )} - -
- -
-
- ); -}; - -export default Project; -Project.getLayout = (page: ReactElement) => { - return {page}; -}; - -export async function getServerSideProps( - ctx: GetServerSidePropsContext<{ projectId: string }>, -) { - const { params } = ctx; - - const { req, res } = ctx; - const { user, session } = await validateRequest(req); - if (!user) { - return { - redirect: { - permanent: true, - destination: "/", - }, - }; - } - // Fetch data from external API - const helpers = createServerSideHelpers({ - router: appRouter, - ctx: { - req: req as any, - res: res as any, - db: null as any, - session: session as any, - user: user as any, - }, - transformer: superjson, - }); - - // Valid project, if not return to initial homepage.... - if (typeof params?.projectId === "string") { - try { - await helpers.project.one.fetch({ - projectId: params?.projectId, - }); - return { - props: { - trpcState: helpers.dehydrate(), - projectId: params?.projectId, - }, - }; - } catch { - return { - redirect: { - permanent: false, - destination: "/", - }, - }; - } - } - - return { - redirect: { - permanent: false, - destination: "/", - }, - }; -} diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx index 8bc28e09e..b7b919c42 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId].tsx @@ -754,7 +754,6 @@ const EnvironmentPage = ( { name: "Projects", href: "/dashboard/projects" }, { name: projectData?.name || "", - href: `/dashboard/project/${projectId}`, }, { name: currentEnvironment.name, diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx index b88f1ad3e..592172a3d 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx @@ -98,7 +98,6 @@ const Service = ( { name: "Projects", href: "/dashboard/projects" }, { name: data?.environment.project.name || "", - href: `/dashboard/project/${projectId}`, }, { name: data?.environment?.name || "", diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx index 23ddb34e4..df7cb9a9c 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/compose/[composeId].tsx @@ -89,7 +89,6 @@ const Service = ( { name: "Projects", href: "/dashboard/projects" }, { name: data?.environment?.project?.name || "", - href: `/dashboard/project/${projectId}`, }, { name: data?.environment?.name || "", diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx index 11b11d026..e5133a9bb 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mariadb/[mariadbId].tsx @@ -70,7 +70,6 @@ const Mariadb = ( { name: "Projects", href: "/dashboard/projects" }, { name: data?.environment?.project?.name || "", - href: `/dashboard/project/${projectId}`, }, { name: data?.environment?.name || "", diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx index 02c863cce..2de7350b7 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mongo/[mongoId].tsx @@ -70,7 +70,6 @@ const Mongo = ( { name: "Projects", href: "/dashboard/projects" }, { name: data?.environment?.project?.name || "", - href: `/dashboard/project/${projectId}`, }, { name: data?.environment?.name || "", diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx index 93a6416f4..23227f385 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/mysql/[mysqlId].tsx @@ -69,7 +69,6 @@ const MySql = ( { name: "Projects", href: "/dashboard/projects" }, { name: data?.environment?.project?.name || "", - href: `/dashboard/project/${projectId}`, }, { name: data?.environment?.name || "", diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx index c586a78d3..8fe7742e3 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/postgres/[postgresId].tsx @@ -69,7 +69,6 @@ const Postgresql = ( { name: "Projects", href: "/dashboard/projects" }, { name: data?.environment?.project?.name || "", - href: `/dashboard/project/${projectId}`, }, { name: data?.environment?.name || "", diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx index b2e5b4240..14c873094 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/redis/[redisId].tsx @@ -69,7 +69,6 @@ const Redis = ( { name: "Projects", href: "/dashboard/projects" }, { name: data?.environment?.project?.name || "", - href: `/dashboard/project/${projectId}`, }, { name: data?.environment?.name || "",