296 lines
11 KiB
TypeScript
296 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
|
|
import { Plus, Link as LinkIcon } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { Progress } from '@/components/ui/progress';
|
|
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 { 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 = [
|
|
{
|
|
name: 'GitHub',
|
|
value: 'github',
|
|
image: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
|
|
permission: 'https://github.com/apps/stalin-deploy/installations/new',
|
|
},
|
|
{
|
|
name: 'Registry',
|
|
value: 'registry',
|
|
image: '',
|
|
},
|
|
{
|
|
name: 'Github Registry',
|
|
value: 'github-registry',
|
|
image: 'https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png',
|
|
},
|
|
];
|
|
|
|
export default function CreateApplicationForm() {
|
|
const [steps, setSteps] = useState(1);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const params = useParams();
|
|
|
|
const [repositories, setRepositories] = useState<GithubRepository[]>([]);
|
|
const [branches, setBranches] = useState<string[]>([]);
|
|
|
|
const [newApplication, setNewApplication] = useState<NewApplication>({
|
|
serviceProvider: 'github',
|
|
git: {
|
|
repositoryId: 0,
|
|
repositoryName: '',
|
|
branch: '',
|
|
path: '',
|
|
},
|
|
autodeploy: true,
|
|
env: {},
|
|
name: '',
|
|
});
|
|
|
|
const { data: session } = useSession();
|
|
|
|
useEffect(() => {
|
|
async function fetchRepositories() {
|
|
if (newApplication.serviceProvider == 'github') {
|
|
const repos = await getUserRepository(session?.user.id as string, session?.user.username as string);
|
|
setRepositories(repos);
|
|
}
|
|
}
|
|
|
|
fetchRepositories();
|
|
}, [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 open={open} onOpenChange={() => setOpen((open) => !open)}>
|
|
<SheetTrigger asChild>
|
|
<Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
|
|
<Plus />
|
|
New Application
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent className="min-w-[500px]">
|
|
<SheetHeader>
|
|
<SheetTitle className="text-2xl">New Application</SheetTitle>
|
|
<SheetDescription>Deploy a new application from source</SheetDescription>
|
|
</SheetHeader>
|
|
<div className="flex flex-col">
|
|
<div className="flex flex-col gap-2 my-6">
|
|
<div className="flex flex-row justify-between">
|
|
<p>
|
|
Step: <span className="text-muted-foreground">{(steps == 1 && 'Select Provider') || (steps == 2 && 'Resources') || (steps == 3 && 'Environment Variables') || (steps == 4 && 'Information') || (steps == 5 && 'Review')}</span>
|
|
</p>
|
|
<p>{steps} / 5</p>
|
|
</div>
|
|
<Progress className="bg-gray-300 h-3 " color="red" value={steps * 20} max={100} indicatorColor="bg-[#3A7BFE]" />
|
|
</div>
|
|
<div>
|
|
{steps == 1 && (
|
|
<div>
|
|
<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 == 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" />
|
|
{provider.name}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
<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>
|
|
{repositories?.map((repository) => (
|
|
<SelectItem key={repository.id} value={repository.id.toString()}>
|
|
{repository.full_name}
|
|
</SelectItem>
|
|
))}
|
|
</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>
|
|
{newApplication.serviceProvider == 'github' &&
|
|
(!repositories ? (
|
|
<p className="text-sm">
|
|
<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>
|
|
<div className="flex flex-row justify-between my-6">
|
|
<Button
|
|
variant={'outline'}
|
|
className={cn(steps == 1 && 'opacity-0 pointer-events-none select-none')}
|
|
onClick={() => {
|
|
setSteps((prev) => (prev - 1 < 1 ? 1 : prev - 1));
|
|
}}
|
|
>
|
|
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={() => {
|
|
setSteps((prev) => (prev + 1 > 5 ? 5 : prev + 1));
|
|
console.log(newApplication);
|
|
}}
|
|
>
|
|
Next
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|