add: create new app wip

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

@@ -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, Link as LinkIcon } from 'lucide-react';
-import { Plus } 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>
+				<div className="flex flex-col">
-					<h3>Select Provider</h3>
+					<div className="flex flex-col gap-2 my-6">
-					<RadioGroup defaultValue="github" className="flex flex-col gap-4" onValueChange={setServiceProvider}>
+						<div className="flex flex-row justify-between">
-						{ServiceProviderList.map((provider) => (
+							<p>
-							<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')}>
+								Step: <span className="text-muted-foreground">{(steps == 1 && 'Select Provider') || (steps == 2 && 'Resources') || (steps == 3 && 'Environment Variables') || (steps == 4 && 'Information') || (steps == 5 && 'Review')}</span>
-								<RadioGroupItem value={provider.value} id={provider.value} />
+							</p>
-								<label htmlFor={provider.value} className="flex flex-row items-center gap-4">
+							<p>{steps} / 5</p>
-									<img src={provider.image} alt={provider.name} className="w-8 h-8 rounded-full" />
+						</div>
-									{provider.name}
+						<Progress className="bg-gray-300 h-3 " color="red" value={steps * 20} max={100} indicatorColor="bg-[#3A7BFE]" />
-								</label>
+					</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>
+					</div>
-					{(serviceProvider == 'github' || serviceProvider == 'github-registry') && (
+					<div className="flex flex-row justify-between my-6">
-						<p>
+						<Button
-							Not seeing the repositories you expected here? <Link href={ServiceProviderList.find((s) => s.value == serviceProvider)?.permission || ''}>Edit Your GitHub Permissions</Link>
+							variant={'outline'}
-						</p>
+							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>

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

@@ -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">

app/(deploy)/layout.tsx

@@ -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: {

components/ui/progress.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '@/lib/utils';
+
+interface CustomProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+	indicatorColor: string;
+}
+const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, CustomProgressProps>(({ className, value, indicatorColor, ...props }, ref) => (
+	<ProgressPrimitive.Root ref={ref} className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)} {...props}>
+		<ProgressPrimitive.Indicator className={`h-full w-full flex-1 transition-all ${indicatorColor}`} style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
+	</ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

components/ui/select.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger ref={ref} className={cn('flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 [&>span]:line-clamp-1', className)} {...props}>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton ref={ref} className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton ref={ref} className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Content>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>>(({ className, children, position = 'popper', ...props }, ref) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+				className
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport className={cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')}>{children}</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Label>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>>(({ className, ...props }, ref) => <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />);
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Item ref={ref} className={cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground', className)} {...props}>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>>(({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />);
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton };