Skip to content
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

refactor: apply suggested changes #782

Merged
merged 1 commit into from
Nov 29, 2024
Merged

refactor: apply suggested changes #782

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
47 changes: 20 additions & 27 deletions ...components/dashboard/projects/add-env.tsx → ...dashboard/projects/project-enviroment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,9 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { AlertTriangle, FileIcon, SquarePen } from "lucide-react";
import { FileIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
Expand All @@ -37,9 +35,10 @@ type UpdateProject = z.infer<typeof updateProjectSchema>;

interface Props {
projectId: string;
children?: React.ReactNode;
}

export const AddEnv = ({ projectId }: Props) => {
export const ProjectEnviroment = ({ projectId, children }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const utils = api.useUtils();
const { mutateAsync, error, isError, isLoading } =
Expand All @@ -53,7 +52,6 @@ export const AddEnv = ({ projectId }: Props) => {
},
);

console.log(data);
const form = useForm<UpdateProject>({
defaultValues: {
env: data?.env ?? "",
Expand Down Expand Up @@ -86,34 +84,29 @@ export const AddEnv = ({ projectId }: Props) => {
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<DropdownMenuItem
className="w-full cursor-pointer space-x-3"
onSelect={(e) => e.preventDefault()}
>
<FileIcon className="size-4" />
<span>Add Env</span>
</DropdownMenuItem>
{children ?? (
<DropdownMenuItem
className="w-full cursor-pointer space-x-3"
onSelect={(e) => e.preventDefault()}
>
<FileIcon className="size-4" />
<span>Project Enviroment</span>
</DropdownMenuItem>
)}
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-6xl">
<DialogHeader>
<DialogTitle>Modify Shared Env</DialogTitle>
<DialogDescription>Update the env variables</DialogDescription>
<DialogTitle>Project Enviroment</DialogTitle>
<DialogDescription>
Update the env Environment variables that are accessible to all
services of this project. Use this syntax to reference project-level
variables in your service environments:
</DialogDescription>
</DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
<AlertBlock type="info">
To use a shared env, in one of your services, you need to use like
this: Let's say you have a shared env ENVIROMENT="development" and you
want to use it in your service, you need to use like this:
<ul>
<li>
<code>ENVIRONMENT=${"{{project.ENVIRONMENT}}"}</code>
</li>
<li>
<code>DATABASE_URL=${"{{project.DATABASE_URL}}"}</code>
</li>
</ul>{" "}
This allows the service to inherit and use the shared variables from
the project level, ensuring consistency across services.
Use this syntax to reference project-level variables in your service
environments: <code>DATABASE_URL=${"{{project.DATABASE_URL}}"}</code>
</AlertBlock>
<div className="grid gap-4">
<div className="grid items-center gap-4">
Expand Down
7 changes: 4 additions & 3 deletions apps/dokploy/components/dashboard/projects/show.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import { api } from "@/utils/api";
import {
AlertTriangle,
BookIcon,
CircuitBoard,
ExternalLink,
ExternalLinkIcon,
FolderInput,
Expand All @@ -35,7 +34,7 @@ import {
import Link from "next/link";
import { Fragment } from "react";
import { toast } from "sonner";
import { AddEnv } from "./add-env";
import { ProjectEnviroment } from "./project-enviroment";
import { UpdateProject } from "./update";

export const ShowProjects = () => {
Expand Down Expand Up @@ -192,7 +191,9 @@ export const ShowProjects = () => {
Actions
</DropdownMenuLabel>
<div onClick={(e) => e.stopPropagation()}>
<AddEnv projectId={project.projectId} />
<ProjectEnviroment
projectId={project.projectId}
/>
</div>
<div onClick={(e) => e.stopPropagation()}>
<UpdateProject projectId={project.projectId} />
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const ShowServers = () => {
)
)}
{data && data?.length > 0 && (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-6 overflow-auto">
<Table>
<TableCaption>See all servers</TableCaption>
<TableHeader>
Expand Down
51 changes: 30 additions & 21 deletions apps/dokploy/pages/dashboard/project/[projectId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { AddApplication } from "@/components/dashboard/project/add-application";
import { AddCompose } from "@/components/dashboard/project/add-compose";
import { AddDatabase } from "@/components/dashboard/project/add-database";
import { AddTemplate } from "@/components/dashboard/project/add-template";
import { ProjectEnviroment } from "@/components/dashboard/projects/project-enviroment";
import {
MariadbIcon,
MongodbIcon,
Expand Down Expand Up @@ -198,27 +199,35 @@ const Project = (
</div>

{(auth?.rol === "admin" || user?.canCreateServices) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>
<PlusIcon className="h-4 w-4" />
Create Service
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[200px] space-y-2" align="end">
<DropdownMenuLabel className="text-sm font-normal ">
Actions
</DropdownMenuLabel>
<DropdownMenuSeparator />
<AddApplication
projectId={projectId}
projectName={data?.name}
/>
<AddDatabase projectId={projectId} projectName={data?.name} />
<AddCompose projectId={projectId} projectName={data?.name} />
<AddTemplate projectId={projectId} />
</DropdownMenuContent>
</DropdownMenu>
<div className="flex flex-row gap-4 flex-wrap">
<ProjectEnviroment projectId={projectId}>
<Button variant="outline">Project Enviroment</Button>
</ProjectEnviroment>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>
<PlusIcon className="h-4 w-4" />
Create Service
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-[200px] space-y-2"
align="end"
>
<DropdownMenuLabel className="text-sm font-normal ">
Actions
</DropdownMenuLabel>
<DropdownMenuSeparator />
<AddApplication
projectId={projectId}
projectName={data?.name}
/>
<AddDatabase projectId={projectId} projectName={data?.name} />
<AddCompose projectId={projectId} projectName={data?.name} />
<AddTemplate projectId={projectId} />
</DropdownMenuContent>
</DropdownMenu>
</div>
)}
</header>
</div>
Expand Down