Skip to content

feat: enhance database / app / compose form with app name auto-generation #1562

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

Closed
Alm0stEthical wants to merge 7 commits into from
Closed

feat: enhance database / app / compose form with app name auto-generation #1562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b70c613
feat: enhance database / app / compose form with app name auto-genera…
Alm0stEthical Mar 25, 2025
ca52149
docs: updated logo.png for README.md with new dashboard UI
Alm0stEthical Mar 25, 2025
1ef6762
docs: rounded logo
Alm0stEthical Mar 25, 2025
eb24007
Update add-application.tsx
Siumauricio Mar 29, 2025
0c39285
Update add-application.tsx
Siumauricio Mar 29, 2025
2b172c2
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 29, 2025
6fd5bfa
Revert to old logo.png
Alm0stEthical May 7, 2025
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
112 changes: 82 additions & 30 deletions apps/dokploy/components/dashboard/project/add-application.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";

import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import {
Form,
Expand Down Expand Up @@ -60,7 +61,6 @@ const AddTemplateSchema = z.object({
description: z.string().optional(),
serverId: z.string().optional(),
});

type AddTemplate = z.infer<typeof AddTemplateSchema>;

interface Props {
Expand All @@ -72,6 +72,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
const utils = api.useUtils();
const { data: isCloud } = api.settings.isCloud.useQuery();
const [visible, setVisible] = useState(false);
const [appNameLocked, setAppNameLocked] = useState(true);
const slug = slugify(projectName);
const { data: servers } = api.server.withSSHKey.useQuery();

Expand All @@ -87,6 +88,22 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
resolver: zodResolver(AddTemplateSchema),
});

const generateAppName = (value: string): string => {
if (!value) return `${slug}-`;

const processedValue = value
.trim()
.toLowerCase()
// replace dots, spaces, and special characters with dashes
.replace(/[^\w]+/g, "-")
// remove any consecutive dashes
.replace(/-+/g, "-")
// remove leading/trailing dashes
.replace(/^-+|-+$/g, "");

return `${slug}-${processedValue}`;
};

const onSubmit = async (data: AddTemplate) => {
await mutateAsync({
name: data.name,
Expand Down Expand Up @@ -143,20 +160,73 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
<Input
placeholder="Frontend"
{...field}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
onChange={(e) => {
const val = e.target.value?.trim() || "";
form.setValue(
"appName",
`${slug}-${val.toLowerCase().replaceAll(" ", "-")}`,
);
const val = e.target.value;
field.onChange(val);

if (appNameLocked && val) {
form.setValue("appName", generateAppName(val));
}
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="appName"
render={({ field }) => (
<FormItem>
<FormLabel>App Name</FormLabel>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<div className="relative w-full">
<FormControl>
<Input
placeholder="project-frontend"
{...field}
readOnly={appNameLocked}
className={
appNameLocked
? "cursor-pointer opacity-70 pr-10"
: ""
}
onClick={() => {
if (appNameLocked) {
setAppNameLocked(false);
}
}}
/>
</FormControl>
{appNameLocked && (
<div className="absolute inset-y-0 right-3 flex items-center pointer-events-none">
<HelpCircle className="size-4 text-muted-foreground" />
</div>
)}
</div>
</TooltipTrigger>
<TooltipContent
side="top"
className="z-[999] min-w-[180px] max-w-[250px] p-2 text-xs"
sideOffset={5}
avoidCollisions
>
{appNameLocked
? "App name is auto-generated. Click to edit manually."
: "App name can be edited manually."}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="serverId"
Expand All @@ -174,6 +244,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
className="z-[999] w-[300px]"
align="start"
side="top"
avoidCollisions
>
<span>
If no server is selected, the application will be
Expand All @@ -199,33 +270,16 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
>
<span className="flex items-center gap-2 justify-between w-full">
<span>{server.name}</span>
<span className="text-muted-foreground text-xs self-center">
{server.ipAddress}
</span>
</span>
</SelectItem>
))}
<SelectLabel>Servers ({servers?.length})</SelectLabel>
</SelectGroup>
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="appName"
render={({ field }) => (
<FormItem>
<FormLabel>App Name</FormLabel>
<FormControl>
<Input placeholder="my-app" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
Expand All @@ -239,19 +293,17 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
{...field}
/>
</FormControl>

<FormMessage />
</FormItem>
)}
/>
</form>

<DialogFooter>
<Button isLoading={isLoading} form="hook-form" type="submit">
Create
</Button>
</DialogFooter>
</Form>
<DialogFooter>
<Button isLoading={isLoading} form="hook-form" type="submit">
Create
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
Expand Down
95 changes: 77 additions & 18 deletions apps/dokploy/components/dashboard/project/add-compose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ interface Props {
export const AddCompose = ({ projectId, projectName }: Props) => {
const utils = api.useUtils();
const [visible, setVisible] = useState(false);
const [appNameLocked, setAppNameLocked] = useState(true);
const slug = slugify(projectName);
const { data: isCloud } = api.settings.isCloud.useQuery();
const { data: servers } = api.server.withSSHKey.useQuery();
Expand All @@ -88,6 +89,22 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
resolver: zodResolver(AddComposeSchema),
});

const generateAppName = (value: string): string => {
if (!value) return `${slug}-`;

const processedValue = value
.trim()
.toLowerCase()
// replace dots, spaces, and special characters with dashes
.replace(/[^\w]+/g, "-")
// remove any consecutive dashes
.replace(/-+/g, "-")
// remove leading/trailing dashes
.replace(/^-+|-+$/g, "");

return `${slug}-${processedValue}`;
};

useEffect(() => {
form.reset();
}, [form, form.reset, form.formState.isSubmitSuccessful]);
Expand Down Expand Up @@ -150,13 +167,17 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
<Input
placeholder="Frontend"
{...field}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
onChange={(e) => {
const val = e.target.value?.trim() || "";
form.setValue(
"appName",
`${slug}-${val.toLowerCase()}`,
);
const val = e.target.value;
field.onChange(val);

// Auto-generate App Name if locked
if (appNameLocked && val) {
form.setValue("appName", generateAppName(val));
}
}}
/>
</FormControl>
Expand All @@ -165,6 +186,56 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
)}
/>
</div>
<FormField
control={form.control}
name="appName"
render={({ field }) => (
<FormItem>
<FormLabel>App Name</FormLabel>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<div className="relative w-full">
<FormControl>
<Input
placeholder="project-frontend"
{...field}
readOnly={appNameLocked}
className={
appNameLocked
? "cursor-pointer opacity-70 pr-10"
: ""
}
onClick={() => {
if (appNameLocked) {
setAppNameLocked(false);
}
}}
/>
</FormControl>
{appNameLocked && (
<div className="absolute inset-y-0 right-3 flex items-center pointer-events-none">
<HelpCircle className="size-4 text-muted-foreground" />
</div>
)}
</div>
</TooltipTrigger>
<TooltipContent
side="top"
className="z-[999] min-w-[180px] max-w-[250px] p-2 text-xs"
sideOffset={5}
avoidCollisions
>
{appNameLocked
? "App name is auto-generated. Click to edit manually."
: "App name can be edited manually."}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="serverId"
Expand All @@ -182,6 +253,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
className="z-[999] w-[300px]"
align="start"
side="top"
avoidCollisions
>
<span>
If no server is selected, the application will be
Expand Down Expand Up @@ -221,19 +293,6 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
</FormItem>
)}
/>
<FormField
control={form.control}
name="appName"
render={({ field }) => (
<FormItem>
<FormLabel>App Name</FormLabel>
<FormControl>
<Input placeholder="my-app" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="composeType"
Expand Down
Loading