add: create new app wip
This commit is contained in:
parent
5b1d5266f8
commit
df54fb164c
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
@ -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 };
|
||||
Loading…
Reference in New Issue