deploy/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

add: create new app wip

Browse Source
This commit is contained in:
Elie Baier
2024-03-24 03:23:28 +01:00
parent 5b1d5266f8
commit df54fb164c
5 changed files with 215 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
app/(deploy)/[workspace]/CreateApplicationForm.tsx
View File

@@ -2,11 +2,15 @@
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Plus } from 'lucide-react';
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 { getUserRepository, GithubRepository } from '@/actions/github/repository';
import { signOut, useSession } from 'next-auth/react';
export const ServiceProviderList = [
{
@@ -27,8 +31,46 @@ 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 [serviceProvider, setServiceProvider] = useState<string>('github');
const [repositories, setRepositories] = useState<GithubRepository[]>([]);
const [newApplication, setNewApplication] = useState<NewApplication>({
serviceProvider: '',
git: {
repositoryId: 0,
repositoryName: '',
},
env: {},
});
const { data: session } = useSession();
console.log('user', session);
useEffect(() => {
async function fetchRepositories() {
if (serviceProvider == 'github') {
const repos = await getUserRepository(session?.user.id as string, session?.user.username as string);
console.log(session?.user.username as string, repos);
setRepositories(repos);
}
}
fetchRepositories();
}, [serviceProvider, session]);
return (
<Sheet>
@@ -40,27 +82,80 @@ export default function CreateApplicationForm() {
</SheetTrigger>
<SheetContent className="min-w-[500px]">
<SheetHeader>
<SheetTitle>New Application</SheetTitle>
<SheetTitle className="text-2xl">New Application</SheetTitle>
<SheetDescription>Deploy a new application from source</SheetDescription>
</SheetHeader>
<div>
<h3>Select Provider</h3>
<RadioGroup defaultValue="github" className="flex flex-col gap-4" onValueChange={setServiceProvider}>
{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')}>
<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 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="github" className="flex flex-col gap-2 mb-4" onValueChange={setServiceProvider}>
{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')}>
<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">
{serviceProvider == 'github' && (
<Select onValueChange={(e) => setNewApplication((prev) => ({ ...prev, git: { repositoryId: parseInt(e), repositoryName: repositories.find((w) => w.id == parseInt(e))?.full_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}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
)}
</div>
{(serviceProvider == 'github' || serviceProvider == 'github-registry') && (
<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>
</p>
)}
</div>
))}
</RadioGroup>
{(serviceProvider == 'github' || serviceProvider == 'github-registry') && (
<p>
Not seeing the repositories you expected here? <Link href={ServiceProviderList.find((s) => s.value == serviceProvider)?.permission || ''}>Edit Your GitHub Permissions</Link>
</p>
)}
)}
</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>
<Button
className="bg-[#3A7BFE]"
onClick={() => {
setSteps((prev) => (prev + 1 > 5 ? 5 : prev + 1));
console.log(newApplication);
}}
>
{steps == 5 ? 'Deploy' : 'Next'}
</Button>
</div>
</div>
</SheetContent>
</Sheet>

16
app/(deploy)/[workspace]/page.tsx
View File

@@ -2,7 +2,6 @@ import { Button } from '@/components/ui/button';
import prisma from '@/lib/prisma';
import { PackagePlus, Plus } from 'lucide-react';
import CreateApplicationForm from './CreateApplicationForm';
import { getSession } from 'next-auth/react';
export default async function Workspace({ params }: { params: { workspace: string } }) {
const applications = await prisma.application.findMany({
@@ -13,21 +12,6 @@ export default async function Workspace({ params }: { params: { workspace: strin
},
});
const session = await getSession();
const account = await prisma.account.findFirst({
where: {
userId: session?.user.id as string,
},
});
fetch('https://api.github.com/users/fayorg/repos', {
headers: {
Authorization: `Bearer ${account?.access_token}`,
},
})
.then((res) => res.json())
.then(console.log);
if (applications.length == 0) {
return (
<div className="mt-12">

4
app/(deploy)/layout.tsx
View File

@@ -5,6 +5,7 @@ import { redirect } from 'next/navigation';
import { getServerSession } from 'next-auth';
import prisma from '@/lib/prisma';
import WorkspaceNavigation from './WorkspaceNavigation';
import { signOut } from 'next-auth/react';
export default async function DashboardLayout({ children }: Readonly<{ children: React.ReactNode }>) {
const session = await getServerSession();
@@ -12,6 +13,9 @@ export default async function DashboardLayout({ children }: Readonly<{ children:
if (!session) {
redirect('/sign-in');
}
if (session.error == 'RefreshAccessTokenError') {
signOut();
}
const workspaces = await prisma.workspace.findMany({
where: {