add: deployment form wip

app/(deploy)/[workspace]/CreateApplicationForm.tsx

@@ -9,8 +9,12 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { cn } from '@/lib/utils';
 import Link from 'next/link';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { getUserRepository, GithubRepository } from '@/actions/github/repository';
+import { getRepositoryBranches, getUserRepository, GithubRepository } from '@/actions/github/repository';
 import { signOut, useSession } from 'next-auth/react';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { createApplication, NewApplication } from '@/actions/deploy/application';
+import { useParams, useRouter } from 'next/navigation';
 
 export const ServiceProviderList = [
 	{
@@ -31,47 +35,53 @@ export const ServiceProviderList = [
 	},
 ];
 
-export type NewApplication = {
-	serviceProvider: string;
-	git: {
-		repositoryId: number;
-		repositoryName: string;
-	};
-	env: {
-		[key: string]: string;
-	};
-};
-
 export default function CreateApplicationForm() {
 	const [steps, setSteps] = useState(1);
+	const [open, setOpen] = useState(false);
+
+	const params = useParams();
 
-	const [serviceProvider, setServiceProvider] = useState<string>('github');
 	const [repositories, setRepositories] = useState<GithubRepository[]>([]);
+	const [branches, setBranches] = useState<string[]>([]);
 
 	const [newApplication, setNewApplication] = useState<NewApplication>({
-		serviceProvider: '',
+		serviceProvider: 'github',
 		git: {
 			repositoryId: 0,
 			repositoryName: '',
+			branch: '',
+			path: '',
 		},
+		autodeploy: true,
 		env: {},
+		name: '',
 	});
 
 	const { data: session } = useSession();
 
 	useEffect(() => {
 		async function fetchRepositories() {
-			if (serviceProvider == 'github') {
+			if (newApplication.serviceProvider == 'github') {
 				const repos = await getUserRepository(session?.user.id as string, session?.user.username as string);
 				setRepositories(repos);
 			}
 		}
 
 		fetchRepositories();
-	}, [serviceProvider, session]);
+	}, [newApplication.serviceProvider, session]);
+
+	useEffect(() => {
+		async function fetchBranches() {
+			if (newApplication.serviceProvider == 'github' && newApplication.git.repositoryId != 0) {
+				const branches = await getRepositoryBranches(session?.user.id as string, session?.user.username as string, newApplication.git.repositoryName);
+				setBranches(branches);
+			}
+		}
+		fetchBranches();
+	}, [newApplication.serviceProvider, newApplication.git.repositoryId, newApplication.git.repositoryName, session]);
 
 	return (
-		<Sheet>
+		<Sheet open={open} onOpenChange={() => setOpen((open) => !open)}>
 			<SheetTrigger asChild>
 				<Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
 					<Plus />
@@ -96,9 +106,9 @@ export default function CreateApplicationForm() {
 					<div>
 						{steps == 1 && (
 							<div>
-								<RadioGroup defaultValue="github" className="flex flex-col gap-2 mb-4" onValueChange={setServiceProvider}>
+								<RadioGroup defaultValue={newApplication.serviceProvider || 'github'} className="flex flex-col gap-2 mb-4" onValueChange={(e) => setNewApplication((prev) => ({ ...prev, serviceProvider: e }))}>
 									{ServiceProviderList.map((provider) => (
-										<div key={provider.value} className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', provider.value == serviceProvider ? 'border-[#3A7BFE]' : 'border-gray-300')}>
+										<div key={provider.value} className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', provider.value == newApplication.serviceProvider ? 'border-[#3A7BFE]' : 'border-gray-300')}>
 											<RadioGroupItem value={provider.value} id={provider.value} />
 											<label htmlFor={provider.value} className="flex flex-row items-center gap-4">
 												<img src={provider.image} alt={provider.name} className="w-8 h-8 rounded-full" />
@@ -107,15 +117,16 @@ export default function CreateApplicationForm() {
 										</div>
 									))}
 								</RadioGroup>
-								<div className="my-2">
-									{serviceProvider == 'github' && (
-										<Select onValueChange={(e) => setNewApplication((prev) => ({ ...prev, git: { repositoryId: parseInt(e), repositoryName: repositories.find((w) => w.id == parseInt(e))?.full_name as string } }))}>
+								<div className="my-2 flex flex-col gap-2">
+									{newApplication.serviceProvider == 'github' && !!repositories && (
+										<div>
+											<p className="text-muted-foreground text-sm">Repository</p>
+											<Select defaultValue={newApplication.git.repositoryId.toString() || ''} onValueChange={(e) => setNewApplication((prev) => ({ ...prev, git: { ...prev.git, repositoryId: parseInt(e), repositoryName: repositories.find((w) => w.id == parseInt(e))?.name as string } }))}>
 												<SelectTrigger className="w-full">
 													<SelectValue placeholder="Select a repository" />
 												</SelectTrigger>
 												<SelectContent>
 													<SelectGroup>
-													{/* <SelectItem value="1">Repository 1</SelectItem> */}
 														{repositories?.map((repository) => (
 															<SelectItem key={repository.id} value={repository.id.toString()}>
 																{repository.full_name}
@@ -124,13 +135,111 @@ export default function CreateApplicationForm() {
 													</SelectGroup>
 												</SelectContent>
 											</Select>
+										</div>
+									)}
+									{newApplication.serviceProvider == 'github' && newApplication.git.repositoryId != 0 && (
+										<>
+											<div>
+												<p className="text-muted-foreground text-sm">Branch</p>
+												<Select onValueChange={(e) => setNewApplication((prev) => ({ ...prev, git: { ...prev.git, branch: e } }))} defaultValue={newApplication.git.branch}>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a branch" />
+													</SelectTrigger>
+													<SelectContent>
+														{branches.map((branch) => (
+															<SelectItem key={branch} value={branch}>
+																{branch}
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+											</div>
+											<div>
+												<p className="text-muted-foreground text-sm">Path</p>
+												<Input placeholder="Path" value={newApplication.git.path} onChange={(e) => setNewApplication((prev) => ({ ...prev, git: { ...prev.git, path: e.target.value } }))} />
+											</div>
+											<div>
+												<div className={cn('flex flex-row items-center gap-4 border-[1px] rounded-lg py-2 px-4', newApplication.autodeploy ? 'border-[#3A7BFE]' : 'border-gray-300')} onClick={() => setNewApplication((prev) => ({ ...prev, autodeploy: !prev.autodeploy }))}>
+													<Checkbox
+														checked={newApplication.autodeploy}
+														onChange={(e) => {
+															console.log(e);
+														}}
+														id={'autodeploy'}
+														color="bg-[#3A7BFE]"
+													/>
+													<div>
+														<label htmlFor="autodeploy" className="text-sm">
+															Auto Deploy
+														</label>
+														<p className="text-xs text-muted-foreground">Every time an update is made to this branch, your application will be re-deployed.</p>
+													</div>
+												</div>
+											</div>
+										</>
 									)}
 								</div>
-								{(serviceProvider == 'github' || serviceProvider == 'github-registry') && (
+								{newApplication.serviceProvider == 'github' &&
+									(!repositories ? (
 										<p className="text-sm">
-										<span className="text-muted-foreground">Not seeing the repositories you expected here?</span> <Link href={ServiceProviderList.find((s) => s.value == serviceProvider)?.permission || ''}>Edit Your GitHub Permissions</Link>
+											<span className="text-muted-foreground">We don't have access to your repositories.</span> <Link href={ServiceProviderList.find((s) => s.value == newApplication.serviceProvider)?.permission || ''}>Link your GitHub account</Link>
 										</p>
+									) : (
+										<p className="text-sm">
+											<span className="text-muted-foreground">Not seeing the repositories you expected here?</span> <Link href={ServiceProviderList.find((s) => s.value == newApplication.serviceProvider)?.permission || ''}>Edit Your GitHub Permissions</Link>
+										</p>
+									))}
+							</div>
 						)}
+
+						{steps == 2 && (
+							<div>
+								<p>Resources WIP</p>
+								<p>For now 1 vCPU & 1024Mb RAM</p>
+							</div>
+						)}
+
+						{steps == 3 && (
+							<div>
+								<p>Environment Variables WIP</p>
+							</div>
+						)}
+
+						{steps == 4 && (
+							<div>
+								<p className="text-muted-foreground text-sm">Application Name</p>
+								<Input placeholder="App Name" value={newApplication.name} onChange={(e) => setNewApplication((prev) => ({ ...prev, name: e.target.value }))} />
+							</div>
+						)}
+
+						{steps == 5 && (
+							<div>
+								<div className="flex flex-col gap-2">
+									<div>
+										<p className="text-muted-foreground text-sm">Service Provider</p>
+										<p>{newApplication.serviceProvider}</p>
+									</div>
+									<div>
+										<p className="text-muted-foreground text-sm">Repository</p>
+										<p>{newApplication.git.repositoryName}</p>
+									</div>
+									<div>
+										<p className="text-muted-foreground text-sm">Branch</p>
+										<p>{newApplication.git.branch}</p>
+									</div>
+									<div>
+										<p className="text-muted-foreground text-sm">Path</p>
+										<p>{newApplication.git.path}</p>
+									</div>
+									<div>
+										<p className="text-muted-foreground text-sm">Auto Deploy</p>
+										<p>{newApplication.autodeploy ? 'Enabled' : 'Disabled'}</p>
+									</div>
+									<div>
+										<p className="text-muted-foreground text-sm">Application Name</p>
+										<p>{newApplication.name}</p>
+									</div>
+								</div>
 							</div>
 						)}
 					</div>
@@ -144,6 +253,30 @@ export default function CreateApplicationForm() {
 						>
 							Back
 						</Button>
+						{steps == 5 ? (
+							<Button
+								className="bg-[#3A7BFE]"
+								onClick={async () => {
+									const app = await createApplication(newApplication, params.workspace as string);
+									console.log(app);
+									setOpen(false);
+									setNewApplication({
+										serviceProvider: 'github',
+										git: {
+											repositoryId: 0,
+											repositoryName: '',
+											branch: '',
+											path: '',
+										},
+										autodeploy: true,
+										env: {},
+										name: '',
+									});
+								}}
+							>
+								Deploy
+							</Button>
+						) : (
 							<Button
 								className="bg-[#3A7BFE]"
 								onClick={() => {
@@ -151,8 +284,9 @@ export default function CreateApplicationForm() {
 									console.log(newApplication);
 								}}
 							>
-							{steps == 5 ? 'Deploy' : 'Next'}
+								Next
 							</Button>
+						)}
 					</div>
 				</div>
 			</SheetContent>

components/ui/checkbox.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root ref={ref} className={cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className)} {...props}>
+		<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+			<Check className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }