From df54fb164c3a897c4bc6d5a7e777ac99a400a70f Mon Sep 17 00:00:00 2001 From: Fayorg Date: Sun, 24 Mar 2024 03:23:28 +0100 Subject: [PATCH] add: create new app wip --- .../[workspace]/CreateApplicationForm.tsx | 135 +++++++++++++++--- app/(deploy)/[workspace]/page.tsx | 16 --- app/(deploy)/layout.tsx | 4 + components/ui/progress.tsx | 18 +++ components/ui/select.tsx | 78 ++++++++++ 5 files changed, 215 insertions(+), 36 deletions(-) create mode 100644 components/ui/progress.tsx create mode 100644 components/ui/select.tsx diff --git a/app/(deploy)/[workspace]/CreateApplicationForm.tsx b/app/(deploy)/[workspace]/CreateApplicationForm.tsx index cb16e0a..d93dc62 100644 --- a/app/(deploy)/[workspace]/CreateApplicationForm.tsx +++ b/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 } 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('github'); + const [repositories, setRepositories] = useState([]); + + const [newApplication, setNewApplication] = useState({ + 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 ( @@ -40,27 +82,80 @@ export default function CreateApplicationForm() { - New Application + New Application Deploy a new application from source -
-

Select Provider

- - {ServiceProviderList.map((provider) => ( -
- - +
+
+
+

+ Step: {(steps == 1 && 'Select Provider') || (steps == 2 && 'Resources') || (steps == 3 && 'Environment Variables') || (steps == 4 && 'Information') || (steps == 5 && 'Review')} +

+

{steps} / 5

+
+ +
+
+ {steps == 1 && ( +
+ + {ServiceProviderList.map((provider) => ( +
+ + +
+ ))} + +
+ {serviceProvider == 'github' && ( + + )} +
+ {(serviceProvider == 'github' || serviceProvider == 'github-registry') && ( +

+ Not seeing the repositories you expected here? s.value == serviceProvider)?.permission || ''}>Edit Your GitHub Permissions +

+ )}
- ))} - - {(serviceProvider == 'github' || serviceProvider == 'github-registry') && ( -

- Not seeing the repositories you expected here? s.value == serviceProvider)?.permission || ''}>Edit Your GitHub Permissions -

- )} + )} +
+
+ + +
diff --git a/app/(deploy)/[workspace]/page.tsx b/app/(deploy)/[workspace]/page.tsx index 50b4e83..4a0188b 100644 --- a/app/(deploy)/[workspace]/page.tsx +++ b/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 (
diff --git a/app/(deploy)/layout.tsx b/app/(deploy)/layout.tsx index c68d60c..614f135 100644 --- a/app/(deploy)/layout.tsx +++ b/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: { diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx new file mode 100644 index 0000000..fb4dae6 --- /dev/null +++ b/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 { + indicatorColor: string; +} +const Progress = React.forwardRef, CustomProgressProps>(({ className, value, indicatorColor, ...props }, ref) => ( + + + +)); +Progress.displayName = ProgressPrimitive.Root.displayName; + +export { Progress }; diff --git a/components/ui/select.tsx b/components/ui/select.tsx new file mode 100644 index 0000000..f5e2fa9 --- /dev/null +++ b/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.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1', className)} {...props}> + {children} + + + + +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; + +const SelectScrollUpButton = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; + +const SelectScrollDownButton = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName; + +const SelectContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, position = 'popper', ...props }, ref) => ( + + + + {children} + + + +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; + +const SelectLabel = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ); +SelectLabel.displayName = SelectPrimitive.Label.displayName; + +const SelectItem = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; + +const SelectSeparator = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; + +export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton };