mirror of
https://github.com/Dokploy/dokploy
synced 2025-06-26 18:27:59 +00:00
style: enhance template selection UI and add view modes toggle (#1094)
* feat: enhance template selection UI and add view modes toggle * fix: show template tags only in detailed view mode * refactor: set detailed --------- Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
This commit is contained in:
Vishal kadam
GitHub
@@ -35,6 +35,7 @@ import {
|
|||||||
PopoverContent,
|
PopoverContent,
|
||||||
PopoverTrigger,
|
PopoverTrigger,
|
||||||
} from "@/components/ui/popover";
|
} from "@/components/ui/popover";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
@@ -52,7 +53,6 @@ import {
|
|||||||
} from "@/components/ui/tooltip";
|
} from "@/components/ui/tooltip";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { api } from "@/utils/api";
|
import { api } from "@/utils/api";
|
||||||
import { ScrollArea } from "@radix-ui/react-scroll-area";
|
|
||||||
import {
|
import {
|
||||||
BookText,
|
BookText,
|
||||||
CheckIcon,
|
CheckIcon,
|
||||||
@@ -61,12 +61,15 @@ import {
|
|||||||
Github,
|
Github,
|
||||||
Globe,
|
Globe,
|
||||||
HelpCircle,
|
HelpCircle,
|
||||||
|
LayoutGrid,
|
||||||
|
List,
|
||||||
PuzzleIcon,
|
PuzzleIcon,
|
||||||
SearchIcon,
|
SearchIcon,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
projectId: string;
|
projectId: string;
|
||||||
}
|
}
|
||||||
@@ -74,8 +77,9 @@ interface Props {
|
|||||||
export const AddTemplate = ({ projectId }: Props) => {
|
export const AddTemplate = ({ projectId }: Props) => {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const { data } = api.compose.templates.useQuery();
|
const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
|
||||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||||
|
const { data } = api.compose.templates.useQuery();
|
||||||
const { data: servers } = api.server.withSSHKey.useQuery();
|
const { data: servers } = api.server.withSSHKey.useQuery();
|
||||||
const { data: tags, isLoading: isLoadingTags } =
|
const { data: tags, isLoading: isLoadingTags } =
|
||||||
api.compose.getTags.useQuery();
|
api.compose.getTags.useQuery();
|
||||||
@@ -108,279 +112,340 @@ export const AddTemplate = ({ projectId }: Props) => {
|
|||||||
<span>Template</span>
|
<span>Template</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-7xl p-0">
|
<DialogContent className="max-h-screen sm:max-w-[90vw] p-0">
|
||||||
<div className="sticky top-0 z-10 flex flex-col gap-4 bg-background p-6 border-b">
|
<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
|
||||||
<DialogHeader>
|
<div className="flex flex-col space-y-4">
|
||||||
<DialogTitle>Create from Template</DialogTitle>
|
<div className="flex items-center justify-between">
|
||||||
<DialogDescription>
|
<div>
|
||||||
Create an open source application from a template
|
<DialogTitle>Create from Template</DialogTitle>
|
||||||
</DialogDescription>
|
<DialogDescription>
|
||||||
</DialogHeader>
|
Create an open source application from a template
|
||||||
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
</DialogDescription>
|
||||||
<div className="flex flex-col md:flex-row gap-2">
|
</div>
|
||||||
<Input
|
<div className="flex items-center gap-4">
|
||||||
placeholder="Search Template"
|
<Input
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
placeholder="Search Template"
|
||||||
className="w-full"
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
value={query}
|
className="w-[200px]"
|
||||||
/>
|
value={query}
|
||||||
<Popover modal={true}>
|
/>
|
||||||
<PopoverTrigger asChild>
|
<Popover modal={true}>
|
||||||
<Button
|
<PopoverTrigger asChild>
|
||||||
variant="outline"
|
<Button
|
||||||
className={cn(
|
variant="outline"
|
||||||
"md:max-w-[15rem] w-full justify-between !bg-input",
|
className={cn("w-[200px] justify-between !bg-input")}
|
||||||
)}
|
>
|
||||||
>
|
{isLoadingTags
|
||||||
{isLoadingTags
|
? "Loading...."
|
||||||
? "Loading...."
|
: selectedTags.length > 0
|
||||||
: selectedTags.length > 0
|
? `Selected ${selectedTags.length} tags`
|
||||||
? `Selected ${selectedTags.length} tags`
|
: "Select tag"}
|
||||||
: "Select tag"}
|
|
||||||
|
|
||||||
<ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="p-0" align="start">
|
<PopoverContent className="p-0" align="start">
|
||||||
<Command>
|
<Command>
|
||||||
<CommandInput placeholder="Search tag..." className="h-9" />
|
<CommandInput
|
||||||
{isLoadingTags && (
|
placeholder="Search tag..."
|
||||||
<span className="py-6 text-center text-sm">
|
className="h-9"
|
||||||
Loading Tags....
|
/>
|
||||||
</span>
|
{isLoadingTags && (
|
||||||
|
<span className="py-6 text-center text-sm">
|
||||||
|
Loading Tags....
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<CommandEmpty>No tags found.</CommandEmpty>
|
||||||
|
<ScrollArea className="h-96">
|
||||||
|
<CommandGroup>
|
||||||
|
{tags?.map((tag) => (
|
||||||
|
<CommandItem
|
||||||
|
value={tag}
|
||||||
|
key={tag}
|
||||||
|
onSelect={() => {
|
||||||
|
if (selectedTags.includes(tag)) {
|
||||||
|
setSelectedTags(
|
||||||
|
selectedTags.filter((t) => t !== tag),
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSelectedTags([...selectedTags, tag]);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
<CheckIcon
|
||||||
|
className={cn(
|
||||||
|
"ml-auto h-4 w-4",
|
||||||
|
selectedTags.includes(tag)
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</ScrollArea>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
onClick={() =>
|
||||||
|
setViewMode(viewMode === "detailed" ? "icon" : "detailed")
|
||||||
|
}
|
||||||
|
className="h-9 w-9"
|
||||||
|
>
|
||||||
|
{viewMode === "detailed" ? (
|
||||||
|
<LayoutGrid className="size-4" />
|
||||||
|
) : (
|
||||||
|
<List className="size-4" />
|
||||||
)}
|
)}
|
||||||
<CommandEmpty>No tags found.</CommandEmpty>
|
</Button>
|
||||||
<ScrollArea className="h-96 overflow-y-auto">
|
|
||||||
<CommandGroup>
|
|
||||||
{tags?.map((tag) => {
|
|
||||||
return (
|
|
||||||
<CommandItem
|
|
||||||
value={tag}
|
|
||||||
key={tag}
|
|
||||||
onSelect={() => {
|
|
||||||
if (selectedTags.includes(tag)) {
|
|
||||||
setSelectedTags(
|
|
||||||
selectedTags.filter((t) => t !== tag),
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setSelectedTags([...selectedTags, tag]);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tag}
|
|
||||||
<CheckIcon
|
|
||||||
className={cn(
|
|
||||||
"ml-auto h-4 w-4",
|
|
||||||
selectedTags.includes(tag)
|
|
||||||
? "opacity-100"
|
|
||||||
: "opacity-0",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</CommandItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</CommandGroup>
|
|
||||||
</ScrollArea>
|
|
||||||
</Command>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="p-6 w-full">
|
|
||||||
{templates.length === 0 ? (
|
|
||||||
<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
|
|
||||||
<SearchIcon className="text-muted-foreground size-6" />
|
|
||||||
<div className="text-xl font-medium text-muted-foreground">
|
|
||||||
No templates found
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
{selectedTags.length > 0 && (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 w-full gap-4">
|
<div className="flex flex-wrap justify-end gap-2">
|
||||||
{templates?.map((template, index) => (
|
{selectedTags.map((tag) => (
|
||||||
<div key={`template-${index}`}>
|
<Badge
|
||||||
<div
|
key={tag}
|
||||||
key={template.id}
|
variant="secondary"
|
||||||
className="flex flex-col gap-4 border p-6 rounded-lg h-full"
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setSelectedTags(selectedTags.filter((t) => t !== tag))
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-4">
|
{tag} ×
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<ScrollArea className="h-[calc(98vh-8rem)]">
|
||||||
|
<div className="p-6">
|
||||||
|
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
|
||||||
|
|
||||||
|
{templates.length === 0 ? (
|
||||||
|
<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
|
||||||
|
<SearchIcon className="text-muted-foreground size-6" />
|
||||||
|
<div className="text-xl font-medium text-muted-foreground">
|
||||||
|
No templates found
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"grid gap-6",
|
||||||
|
viewMode === "detailed"
|
||||||
|
? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6"
|
||||||
|
: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-8",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{templates?.map((template, index) => (
|
||||||
|
<div
|
||||||
|
key={`template-${index}`}
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col border rounded-lg overflow-hidden relative",
|
||||||
|
viewMode === "icon" && "h-[200px]",
|
||||||
|
viewMode === "detailed" && "h-[400px]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Badge className="absolute top-2 right-2" variant="blue">
|
||||||
|
{template.version}
|
||||||
|
</Badge>
|
||||||
|
{/* Template Header */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex-none p-6 pb-3 flex flex-col items-center gap-4 bg-muted/30",
|
||||||
|
viewMode === "detailed" && "border-b",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={`/templates/${template.logo}`}
|
||||||
|
className={cn(
|
||||||
|
"object-contain",
|
||||||
|
viewMode === "detailed" ? "size-24" : "size-16",
|
||||||
|
)}
|
||||||
|
alt={template.name}
|
||||||
|
/>
|
||||||
<div className="flex flex-col items-center gap-2">
|
<div className="flex flex-col items-center gap-2">
|
||||||
<img
|
<span className="text-sm font-medium line-clamp-1">
|
||||||
src={`/templates/${template.logo}`}
|
{template.name}
|
||||||
className="size-28 object-contain"
|
</span>
|
||||||
alt=""
|
{viewMode === "detailed" &&
|
||||||
/>
|
template.tags.length > 0 && (
|
||||||
</div>
|
<div className="flex flex-wrap justify-center gap-1.5">
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<div className="flex flex-col gap-2 justify-center items-center">
|
|
||||||
<div className="flex flex-col gap-2 items-center justify-center">
|
|
||||||
<div className="flex flex-row gap-2 flex-wrap">
|
|
||||||
<span className="text-sm font-medium">
|
|
||||||
{template.name}
|
|
||||||
</span>
|
|
||||||
<Badge>{template.version}</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-row gap-0">
|
|
||||||
<Link
|
|
||||||
href={template.links.github}
|
|
||||||
target="_blank"
|
|
||||||
className={
|
|
||||||
"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Github className="size-4 text-muted-foreground" />
|
|
||||||
</Link>
|
|
||||||
{template.links.website && (
|
|
||||||
<Link
|
|
||||||
href={template.links.website}
|
|
||||||
target="_blank"
|
|
||||||
className={
|
|
||||||
"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Globe className="size-4 text-muted-foreground" />
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{template.links.docs && (
|
|
||||||
<Link
|
|
||||||
href={template.links.docs}
|
|
||||||
target="_blank"
|
|
||||||
className={
|
|
||||||
"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<BookText className="size-4 text-muted-foreground" />
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<Link
|
|
||||||
href={`https://github.com/Dokploy/dokploy/tree/canary/apps/dokploy/templates/${template.id}`}
|
|
||||||
target="_blank"
|
|
||||||
className={
|
|
||||||
"text-sm text-muted-foreground p-3 rounded-full hover:bg-border items-center flex transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Code className="size-4 text-muted-foreground" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-row gap-2 flex-wrap justify-center">
|
|
||||||
{template.tags.map((tag) => (
|
{template.tags.map((tag) => (
|
||||||
<Badge variant="secondary" key={tag}>
|
<Badge
|
||||||
|
key={tag}
|
||||||
|
variant="green"
|
||||||
|
className="text-[10px] px-2 py-0"
|
||||||
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</Badge>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
<AlertDialog>
|
|
||||||
<AlertDialogTrigger asChild>
|
|
||||||
<Button onSelect={(e) => e.preventDefault()}>
|
|
||||||
Create
|
|
||||||
</Button>
|
|
||||||
</AlertDialogTrigger>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>
|
|
||||||
Are you absolutely sure?
|
|
||||||
</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
This will create an application from the{" "}
|
|
||||||
{template.name} template and add it to your
|
|
||||||
project.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<TooltipProvider delayDuration={0}>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
|
|
||||||
Select a Server (Optional)
|
|
||||||
<HelpCircle className="size-4 text-muted-foreground" />
|
|
||||||
</Label>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent
|
|
||||||
className="z-[999] w-[300px]"
|
|
||||||
align="start"
|
|
||||||
side="top"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
If ot server is selected, the
|
|
||||||
application will be deployed on the
|
|
||||||
server where the user is logged in.
|
|
||||||
</span>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
onValueChange={(e) => {
|
|
||||||
setServerId(e);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select a Server" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
{servers?.map((server) => (
|
|
||||||
<SelectItem
|
|
||||||
key={server.serverId}
|
|
||||||
value={server.serverId}
|
|
||||||
>
|
|
||||||
{server.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
<SelectLabel>
|
|
||||||
Servers ({servers?.length})
|
|
||||||
</SelectLabel>
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
disabled={isLoading}
|
|
||||||
onClick={async () => {
|
|
||||||
const promise = mutateAsync({
|
|
||||||
projectId,
|
|
||||||
serverId: serverId || undefined,
|
|
||||||
id: template.id,
|
|
||||||
});
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Setting up...",
|
|
||||||
success: (data) => {
|
|
||||||
utils.project.one.invalidate({
|
|
||||||
projectId,
|
|
||||||
});
|
|
||||||
setOpen(false);
|
|
||||||
return `${template.name} template created successfully`;
|
|
||||||
},
|
|
||||||
error: (err) => {
|
|
||||||
return `An error ocurred deploying ${template.name} template`;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Confirm
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-sm text-muted-foreground line-clamp-3">
|
|
||||||
{template.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Template Content */}
|
||||||
|
{viewMode === "detailed" && (
|
||||||
|
<ScrollArea className="flex-1 p-6">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{template.description}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Create Button */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex-none px-6 pb-6 pt-3 mt-auto",
|
||||||
|
viewMode === "detailed"
|
||||||
|
? "flex items-center justify-between bg-muted/30 border-t"
|
||||||
|
: "flex justify-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{viewMode === "detailed" && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Link
|
||||||
|
href={template.links.github}
|
||||||
|
target="_blank"
|
||||||
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
<Github className="size-5" />
|
||||||
|
</Link>
|
||||||
|
{template.links.website && (
|
||||||
|
<Link
|
||||||
|
href={template.links.website}
|
||||||
|
target="_blank"
|
||||||
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
<Globe className="size-5" />
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{template.links.docs && (
|
||||||
|
<Link
|
||||||
|
href={template.links.docs}
|
||||||
|
target="_blank"
|
||||||
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
<BookText className="size-5" />
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className={cn(
|
||||||
|
"w-auto",
|
||||||
|
viewMode === "detailed" && "w-auto",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Create
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>
|
||||||
|
Are you absolutely sure?
|
||||||
|
</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This will create an application from the{" "}
|
||||||
|
{template.name} template and add it to your
|
||||||
|
project.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<TooltipProvider delayDuration={0}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
|
||||||
|
Select a Server (Optional)
|
||||||
|
<HelpCircle className="size-4 text-muted-foreground" />
|
||||||
|
</Label>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent
|
||||||
|
className="z-[999] w-[300px]"
|
||||||
|
align="start"
|
||||||
|
side="top"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
If ot server is selected, the application
|
||||||
|
will be deployed on the server where the
|
||||||
|
user is logged in.
|
||||||
|
</span>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
onValueChange={(e) => {
|
||||||
|
setServerId(e);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select a Server" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectGroup>
|
||||||
|
{servers?.map((server) => (
|
||||||
|
<SelectItem
|
||||||
|
key={server.serverId}
|
||||||
|
value={server.serverId}
|
||||||
|
>
|
||||||
|
{server.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
<SelectLabel>
|
||||||
|
Servers ({servers?.length})
|
||||||
|
</SelectLabel>
|
||||||
|
</SelectGroup>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
disabled={isLoading}
|
||||||
|
onClick={async () => {
|
||||||
|
const promise = mutateAsync({
|
||||||
|
projectId,
|
||||||
|
serverId: serverId || undefined,
|
||||||
|
id: template.id,
|
||||||
|
});
|
||||||
|
toast.promise(promise, {
|
||||||
|
loading: "Setting up...",
|
||||||
|
success: (data) => {
|
||||||
|
utils.project.one.invalidate({
|
||||||
|
projectId,
|
||||||
|
});
|
||||||
|
setOpen(false);
|
||||||
|
return `${template.name} template created successfully`;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
return `An error ocurred deploying ${template.name} template`;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</ScrollArea>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user