working
This commit is contained in:
Your Name
parent
ace6f04064
commit
7cb0a0048b
@ -1,15 +1,15 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { X } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useOnboarding } from '@/components/onboarding/store'
|
||||
import { ConnectStep } from '@/components/onboarding/connect-step/connect-step'
|
||||
import { LaconicMark } from '@/components/assets/laconic-mark'
|
||||
import { ConfigureStep } from '@/components/onboarding/configure-step/configure-step'
|
||||
import { ConnectStep } from '@/components/onboarding/connect-step/connect-step'
|
||||
import { DeployStep } from '@/components/onboarding/deploy-step/deploy-step'
|
||||
import { SuccessStep } from '@/components/onboarding/success-step/success-step'
|
||||
import { LaconicMark } from '@/components/assets/laconic-mark'
|
||||
import { useOnboarding } from '@/components/onboarding/useOnboarding'
|
||||
import { X } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
/**
|
||||
* Parent component for the onboarding flow
|
||||
@ -55,13 +55,21 @@ export default function CreateProjectFlow() {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
|
||||
{/* Fixed dimensions modal container */}
|
||||
<div className={`${isDarkMode ? 'bg-black' : 'bg-white'} rounded-xl overflow-hidden flex shadow-2xl w-[1000px] h-[620px]`}>
|
||||
<div
|
||||
className={`${isDarkMode ? 'bg-black' : 'bg-white'} rounded-xl overflow-hidden flex shadow-2xl w-[1000px] h-[620px]`}
|
||||
>
|
||||
{/* Left sidebar with fixed width */}
|
||||
<div className={`w-[280px] min-w-[280px] ${isDarkMode ? 'bg-zinc-900' : 'bg-zinc-50'} p-8 relative overflow-hidden border-r ${isDarkMode ? 'border-zinc-800' : 'border-zinc-200'}`}>
|
||||
<div
|
||||
className={`w-[280px] min-w-[280px] ${isDarkMode ? 'bg-zinc-900' : 'bg-zinc-50'} p-8 relative overflow-hidden border-r ${isDarkMode ? 'border-zinc-800' : 'border-zinc-200'}`}
|
||||
>
|
||||
{/* Laconic logo */}
|
||||
<div className="flex items-center gap-2 mb-12">
|
||||
<LaconicMark className="h-8 w-8" />
|
||||
<span className={`${isDarkMode ? 'text-white' : 'text-zinc-900'} text-xl font-bold`}>LACONIC</span>
|
||||
<span
|
||||
className={`${isDarkMode ? 'text-white' : 'text-zinc-900'} text-xl font-bold`}
|
||||
>
|
||||
LACONIC
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Steps - clickable */}
|
||||
@ -72,29 +80,71 @@ export default function CreateProjectFlow() {
|
||||
onClick={() => navigateToStep('connect')}
|
||||
>
|
||||
<div className="mr-4">
|
||||
<div className={`w-10 h-10 rounded-lg ${currentStep === 'connect'
|
||||
? (isDarkMode ? 'bg-white' : 'bg-black')
|
||||
: (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200')
|
||||
} flex items-center justify-center`}>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={currentStep === 'connect'
|
||||
? (isDarkMode ? 'text-black' : 'text-white')
|
||||
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
|
||||
}>
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg ${
|
||||
currentStep === 'connect'
|
||||
? isDarkMode
|
||||
? 'bg-white'
|
||||
: 'bg-black'
|
||||
: isDarkMode
|
||||
? 'bg-zinc-800'
|
||||
: 'bg-zinc-200'
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={
|
||||
currentStep === 'connect'
|
||||
? isDarkMode
|
||||
? 'text-black'
|
||||
: 'text-white'
|
||||
: isDarkMode
|
||||
? 'text-zinc-400'
|
||||
: 'text-zinc-600'
|
||||
}
|
||||
>
|
||||
<path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path>
|
||||
<line x1="8" y1="12" x2="16" y2="12"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}></div>
|
||||
<div
|
||||
className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}
|
||||
></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className={`font-medium text-base ${currentStep === 'connect'
|
||||
? (isDarkMode ? 'text-white' : 'text-zinc-900')
|
||||
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
|
||||
}`}>Connect</h3>
|
||||
<p className={`text-sm ${currentStep === 'connect'
|
||||
? (isDarkMode ? 'text-zinc-300' : 'text-zinc-700')
|
||||
: (isDarkMode ? 'text-zinc-500' : 'text-zinc-500')
|
||||
}`}>Connect and import a GitHub repo</p>
|
||||
<h3
|
||||
className={`font-medium text-base ${
|
||||
currentStep === 'connect'
|
||||
? isDarkMode
|
||||
? 'text-white'
|
||||
: 'text-zinc-900'
|
||||
: isDarkMode
|
||||
? 'text-zinc-400'
|
||||
: 'text-zinc-600'
|
||||
}`}
|
||||
>
|
||||
Connect
|
||||
</h3>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
currentStep === 'connect'
|
||||
? isDarkMode
|
||||
? 'text-zinc-300'
|
||||
: 'text-zinc-700'
|
||||
: isDarkMode
|
||||
? 'text-zinc-500'
|
||||
: 'text-zinc-500'
|
||||
}`}
|
||||
>
|
||||
Connect and import a GitHub repo
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@ -104,29 +154,71 @@ export default function CreateProjectFlow() {
|
||||
onClick={() => navigateToStep('configure')}
|
||||
>
|
||||
<div className="mr-4">
|
||||
<div className={`w-10 h-10 rounded-lg ${currentStep === 'configure'
|
||||
? (isDarkMode ? 'bg-white' : 'bg-black')
|
||||
: (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200')
|
||||
} flex items-center justify-center`}>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={currentStep === 'configure'
|
||||
? (isDarkMode ? 'text-black' : 'text-white')
|
||||
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
|
||||
}>
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg ${
|
||||
currentStep === 'configure'
|
||||
? isDarkMode
|
||||
? 'bg-white'
|
||||
: 'bg-black'
|
||||
: isDarkMode
|
||||
? 'bg-zinc-800'
|
||||
: 'bg-zinc-200'
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={
|
||||
currentStep === 'configure'
|
||||
? isDarkMode
|
||||
? 'text-black'
|
||||
: 'text-white'
|
||||
: isDarkMode
|
||||
? 'text-zinc-400'
|
||||
: 'text-zinc-600'
|
||||
}
|
||||
>
|
||||
<path d="M12 20h9"></path>
|
||||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}></div>
|
||||
<div
|
||||
className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}
|
||||
></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className={`font-medium text-base ${currentStep === 'configure'
|
||||
? (isDarkMode ? 'text-white' : 'text-zinc-900')
|
||||
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
|
||||
}`}>Configure</h3>
|
||||
<p className={`text-sm ${currentStep === 'configure'
|
||||
? (isDarkMode ? 'text-zinc-300' : 'text-zinc-700')
|
||||
: (isDarkMode ? 'text-zinc-500' : 'text-zinc-500')
|
||||
}`}>Define the deployment type</p>
|
||||
<h3
|
||||
className={`font-medium text-base ${
|
||||
currentStep === 'configure'
|
||||
? isDarkMode
|
||||
? 'text-white'
|
||||
: 'text-zinc-900'
|
||||
: isDarkMode
|
||||
? 'text-zinc-400'
|
||||
: 'text-zinc-600'
|
||||
}`}
|
||||
>
|
||||
Configure
|
||||
</h3>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
currentStep === 'configure'
|
||||
? isDarkMode
|
||||
? 'text-zinc-300'
|
||||
: 'text-zinc-700'
|
||||
: isDarkMode
|
||||
? 'text-zinc-500'
|
||||
: 'text-zinc-500'
|
||||
}`}
|
||||
>
|
||||
Define the deployment type
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@ -136,14 +228,36 @@ export default function CreateProjectFlow() {
|
||||
onClick={() => navigateToStep('deploy')}
|
||||
>
|
||||
<div className="mr-4">
|
||||
<div className={`w-10 h-10 rounded-lg ${currentStep === 'deploy' || currentStep === 'success'
|
||||
? (isDarkMode ? 'bg-white' : 'bg-black')
|
||||
: (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200')
|
||||
} flex items-center justify-center`}>
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={currentStep === 'deploy' || currentStep === 'success'
|
||||
? (isDarkMode ? 'text-black' : 'text-white')
|
||||
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
|
||||
}>
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg ${
|
||||
currentStep === 'deploy' || currentStep === 'success'
|
||||
? isDarkMode
|
||||
? 'bg-white'
|
||||
: 'bg-black'
|
||||
: isDarkMode
|
||||
? 'bg-zinc-800'
|
||||
: 'bg-zinc-200'
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={
|
||||
currentStep === 'deploy' || currentStep === 'success'
|
||||
? isDarkMode
|
||||
? 'text-black'
|
||||
: 'text-white'
|
||||
: isDarkMode
|
||||
? 'text-zinc-400'
|
||||
: 'text-zinc-600'
|
||||
}
|
||||
>
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
||||
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
|
||||
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
|
||||
@ -154,26 +268,48 @@ export default function CreateProjectFlow() {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className={`font-medium text-base ${currentStep === 'deploy' || currentStep === 'success'
|
||||
? (isDarkMode ? 'text-white' : 'text-zinc-900')
|
||||
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
|
||||
}`}>Deploy</h3>
|
||||
<p className={`text-sm ${currentStep === 'deploy' || currentStep === 'success'
|
||||
? (isDarkMode ? 'text-zinc-300' : 'text-zinc-700')
|
||||
: (isDarkMode ? 'text-zinc-500' : 'text-zinc-500')
|
||||
}`}>Review and confirm deployment</p>
|
||||
<h3
|
||||
className={`font-medium text-base ${
|
||||
currentStep === 'deploy' || currentStep === 'success'
|
||||
? isDarkMode
|
||||
? 'text-white'
|
||||
: 'text-zinc-900'
|
||||
: isDarkMode
|
||||
? 'text-zinc-400'
|
||||
: 'text-zinc-600'
|
||||
}`}
|
||||
>
|
||||
Deploy
|
||||
</h3>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
currentStep === 'deploy' || currentStep === 'success'
|
||||
? isDarkMode
|
||||
? 'text-zinc-300'
|
||||
: 'text-zinc-700'
|
||||
: isDarkMode
|
||||
? 'text-zinc-500'
|
||||
: 'text-zinc-500'
|
||||
}`}
|
||||
>
|
||||
Review and confirm deployment
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Laconic mark (larger, bottom left) */}
|
||||
<div className="absolute -bottom-2 -left-2 opacity-10">
|
||||
<LaconicMark className={`w-40 h-40 ${isDarkMode ? 'text-zinc-300' : 'text-zinc-700'}`} />
|
||||
<LaconicMark
|
||||
className={`w-40 h-40 ${isDarkMode ? 'text-zinc-300' : 'text-zinc-700'}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content with fixed dimensions and scrolling */}
|
||||
<div className={`flex-1 ${isDarkMode ? 'bg-black' : 'bg-white'} relative`}>
|
||||
<div
|
||||
className={`flex-1 ${isDarkMode ? 'bg-black' : 'bg-white'} relative`}
|
||||
>
|
||||
{/* Close button */}
|
||||
<button
|
||||
className={`absolute top-4 right-4 ${isDarkMode ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'} z-10`}
|
||||
@ -192,9 +328,15 @@ export default function CreateProjectFlow() {
|
||||
|
||||
{/* Progress indicator */}
|
||||
<div className="absolute bottom-6 left-0 right-0 flex justify-center gap-3">
|
||||
<div className={`w-12 h-1 rounded-full ${currentStep === 'connect' ? 'bg-blue-600' : (isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300')}`}></div>
|
||||
<div className={`w-12 h-1 rounded-full ${currentStep === 'configure' ? 'bg-blue-600' : (isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300')}`}></div>
|
||||
<div className={`w-12 h-1 rounded-full ${currentStep === 'deploy' || currentStep === 'success' ? 'bg-blue-600' : (isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300')}`}></div>
|
||||
<div
|
||||
className={`w-12 h-1 rounded-full ${currentStep === 'connect' ? 'bg-blue-600' : isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300'}`}
|
||||
></div>
|
||||
<div
|
||||
className={`w-12 h-1 rounded-full ${currentStep === 'configure' ? 'bg-blue-600' : isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300'}`}
|
||||
></div>
|
||||
<div
|
||||
className={`w-12 h-1 rounded-full ${currentStep === 'deploy' || currentStep === 'success' ? 'bg-blue-600' : isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300'}`}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Providers } from '@/components/providers'
|
||||
import { ClerkProvider } from '@clerk/nextjs'
|
||||
import '@workspace/ui/globals.css'
|
||||
import { AutoSignInIFrameModal } from '@/components/iframe/auto-sign-in'
|
||||
import { CheckBalanceWrapper } from '@/components/iframe/check-balance-iframe/CheckBalanceWrapper'
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import { CheckBalanceWrapper } from '@/components/iframe/check-balance-iframe/CheckBalanceWrapper'
|
||||
import { AutoSignInIFrameModal } from '@/components/iframe/auto-sign-in'
|
||||
|
||||
// Add root metadata with template pattern
|
||||
export const metadata: Metadata = {
|
||||
@ -25,7 +25,10 @@ export default function RootLayout({
|
||||
children
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<ClerkProvider signInFallbackRedirectUrl="/home">
|
||||
<ClerkProvider
|
||||
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
|
||||
signInFallbackRedirectUrl="/home"
|
||||
>
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${inter.className} `} suppressHydrationWarning>
|
||||
<main>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
import { ConfigureStep } from '@/components/onboarding/configure-step'
|
||||
import { ConnectStep } from '@/components/onboarding/connect-step'
|
||||
import { DeployStep } from '@/components/onboarding/deploy-step'
|
||||
import { useOnboarding } from '@/components/onboarding/store'
|
||||
import { useOnboarding } from '@/components/onboarding/useOnboarding'
|
||||
import { ScrollArea } from '@workspace/ui/components/scroll-area'
|
||||
import { SidebarNav } from './sidebar'
|
||||
|
||||
|
||||
@ -1,22 +1,33 @@
|
||||
// src/components/onboarding/configure-step/configure-step.tsx
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { PlusCircle, Loader2, AlertTriangle, Info } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useOnboarding } from '@/components/onboarding/store'
|
||||
import { useOnboarding } from '@/components/onboarding/useOnboarding'
|
||||
import { useGQLClient } from '@/context'
|
||||
import { useWallet } from '@/context/WalletContext'
|
||||
import { Button } from '@workspace/ui/components/button'
|
||||
import { Input } from '@workspace/ui/components/input'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@workspace/ui/components/select'
|
||||
import { Checkbox } from '@workspace/ui/components/checkbox'
|
||||
import { Label } from '@workspace/ui/components/label'
|
||||
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card'
|
||||
import { Badge } from '@workspace/ui/components/badge'
|
||||
import { Button } from '@workspace/ui/components/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from '@workspace/ui/components/card'
|
||||
import { Checkbox } from '@workspace/ui/components/checkbox'
|
||||
import { Input } from '@workspace/ui/components/input'
|
||||
import { Label } from '@workspace/ui/components/label'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@workspace/ui/components/select'
|
||||
import { AlertTriangle, Info, Loader2, PlusCircle } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { adaptDeployers } from '../../../utils/typeAdapters';
|
||||
import { adaptDeployers } from '../../../utils/typeAdapters'
|
||||
|
||||
interface Deployer {
|
||||
deployerLrn: string
|
||||
@ -44,23 +55,21 @@ export function ConfigureStep() {
|
||||
|
||||
// Form state
|
||||
const [deployOption, setDeployOption] = useState<'auction' | 'lrn'>(
|
||||
formData.deploymentType as ('auction' | 'lrn') || 'lrn' // Default to LRN for simplicity
|
||||
(formData.deploymentType as 'auction' | 'lrn') || 'lrn' // Default to LRN for simplicity
|
||||
)
|
||||
const [numberOfDeployers, setNumberOfDeployers] = useState<string>(
|
||||
formData.deployerCount || "1"
|
||||
)
|
||||
const [maxPrice, setMaxPrice] = useState<string>(
|
||||
formData.maxPrice || "1000"
|
||||
formData.deployerCount || '1'
|
||||
)
|
||||
const [maxPrice, setMaxPrice] = useState<string>(formData.maxPrice || '1000')
|
||||
const [selectedLrn, setSelectedLrn] = useState<string>(
|
||||
formData.selectedLrn || ""
|
||||
formData.selectedLrn || ''
|
||||
)
|
||||
const [selectedOrg, setSelectedOrg] = useState<string>(
|
||||
formData.selectedOrg || ""
|
||||
formData.selectedOrg || ''
|
||||
)
|
||||
const [envVars, setEnvVars] = useState<{ key: string; value: string; environments: string[] }[]>([
|
||||
{ key: '', value: '', environments: ['Production'] }
|
||||
])
|
||||
const [envVars, setEnvVars] = useState<
|
||||
{ key: string; value: string; environments: string[] }[]
|
||||
>([{ key: '', value: '', environments: ['Production'] }])
|
||||
|
||||
// Contexts
|
||||
const gqlClient = useGQLClient()
|
||||
@ -81,10 +90,15 @@ export function ConfigureStep() {
|
||||
|
||||
// Initialize environment variables from formData if available
|
||||
useEffect(() => {
|
||||
if (formData.environmentVariables && Array.isArray(formData.environmentVariables)) {
|
||||
setEnvVars(formData.environmentVariables.length > 0 ? formData.environmentVariables : [
|
||||
{ key: '', value: '', environments: ['Production'] }
|
||||
])
|
||||
if (
|
||||
formData.environmentVariables &&
|
||||
Array.isArray(formData.environmentVariables)
|
||||
) {
|
||||
setEnvVars(
|
||||
formData.environmentVariables.length > 0
|
||||
? formData.environmentVariables
|
||||
: [{ key: '', value: '', environments: ['Production'] }]
|
||||
)
|
||||
}
|
||||
}, [formData.environmentVariables])
|
||||
|
||||
@ -94,10 +108,14 @@ export function ConfigureStep() {
|
||||
setIsLoadingDeployers(true)
|
||||
const deployersData = await gqlClient.getDeployers()
|
||||
console.log('Available deployers:', deployersData)
|
||||
setDeployers(adaptDeployers(deployersData.deployers || []));
|
||||
setDeployers(adaptDeployers(deployersData.deployers || []))
|
||||
|
||||
// Auto-select first deployer if available and none selected
|
||||
if (deployersData.deployers && deployersData.deployers.length > 0 && !selectedLrn) {
|
||||
if (
|
||||
deployersData.deployers &&
|
||||
deployersData.deployers.length > 0 &&
|
||||
!selectedLrn
|
||||
) {
|
||||
setSelectedLrn(deployersData.deployers[0]!.deployerLrn)
|
||||
}
|
||||
} catch (error) {
|
||||
@ -117,7 +135,11 @@ export function ConfigureStep() {
|
||||
setOrganizations(orgsData.organizations || [])
|
||||
|
||||
// Auto-select first organization if available and none selected
|
||||
if (orgsData.organizations && orgsData.organizations.length > 0 && !selectedOrg) {
|
||||
if (
|
||||
orgsData.organizations &&
|
||||
orgsData.organizations.length > 0 &&
|
||||
!selectedOrg
|
||||
) {
|
||||
setSelectedOrg(orgsData.organizations[0]!.slug)
|
||||
}
|
||||
} catch (error) {
|
||||
@ -130,7 +152,10 @@ export function ConfigureStep() {
|
||||
|
||||
// Add an empty environment variable row
|
||||
const addEnvVar = () => {
|
||||
setEnvVars([...envVars, { key: '', value: '', environments: ['Production'] }])
|
||||
setEnvVars([
|
||||
...envVars,
|
||||
{ key: '', value: '', environments: ['Production'] }
|
||||
])
|
||||
}
|
||||
|
||||
// Remove environment variable row
|
||||
@ -141,7 +166,11 @@ export function ConfigureStep() {
|
||||
}
|
||||
|
||||
// Update environment variable
|
||||
const updateEnvVar = (index: number, field: 'key' | 'value', value: string) => {
|
||||
const updateEnvVar = (
|
||||
index: number,
|
||||
field: 'key' | 'value',
|
||||
value: string
|
||||
) => {
|
||||
const newEnvVars = [...envVars]
|
||||
if (newEnvVars[index]) {
|
||||
newEnvVars[index][field] = value
|
||||
@ -155,9 +184,10 @@ export function ConfigureStep() {
|
||||
if (newEnvVars[index]?.environments) {
|
||||
const currentEnvs = newEnvVars[index].environments
|
||||
|
||||
|
||||
if (currentEnvs.includes(environment)) {
|
||||
newEnvVars[index].environments = currentEnvs.filter(env => env !== environment)
|
||||
newEnvVars[index].environments = currentEnvs.filter(
|
||||
(env) => env !== environment
|
||||
)
|
||||
} else {
|
||||
newEnvVars[index].environments = [...currentEnvs, environment]
|
||||
}
|
||||
@ -177,7 +207,7 @@ export function ConfigureStep() {
|
||||
}
|
||||
|
||||
// Get selected deployer details
|
||||
const selectedDeployer = deployers.find(d => d.deployerLrn === selectedLrn)
|
||||
const selectedDeployer = deployers.find((d) => d.deployerLrn === selectedLrn)
|
||||
|
||||
// Validate form
|
||||
const canProceed = () => {
|
||||
@ -195,7 +225,9 @@ export function ConfigureStep() {
|
||||
}
|
||||
|
||||
// Filter out empty environment variables
|
||||
const validEnvVars = envVars.filter(env => env.key.trim() && env.value.trim())
|
||||
const validEnvVars = envVars.filter(
|
||||
(env) => env.key.trim() && env.value.trim()
|
||||
)
|
||||
|
||||
// Save configuration to form data
|
||||
setFormData({
|
||||
@ -221,19 +253,44 @@ export function ConfigureStep() {
|
||||
|
||||
// Get deployment mode info
|
||||
const isTemplateMode = formData.deploymentMode === 'template'
|
||||
const selectedItem = isTemplateMode ? formData.template?.name : formData.githubRepo
|
||||
const selectedItem = isTemplateMode
|
||||
? formData.template?.name
|
||||
: formData.githubRepo
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col p-8 overflow-y-auto">
|
||||
{/* Configure icon and header */}
|
||||
<div className="flex flex-col items-center justify-center mb-8">
|
||||
<div className="mb-4">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={isDarkMode ? "text-white" : "text-black"}>
|
||||
<path d="M12 20h9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<svg
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={isDarkMode ? 'text-white' : 'text-black'}
|
||||
>
|
||||
<path
|
||||
d="M12 20h9"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className={`text-2xl font-medium text-center mb-2 ${isDarkMode ? "text-white" : "text-zinc-900"}`}>Configure</h2>
|
||||
<h2
|
||||
className={`text-2xl font-medium text-center mb-2 ${isDarkMode ? 'text-white' : 'text-zinc-900'}`}
|
||||
>
|
||||
Configure
|
||||
</h2>
|
||||
<p className={`text-center text-zinc-500 max-w-md`}>
|
||||
Define the deployment type
|
||||
</p>
|
||||
@ -252,7 +309,9 @@ export function ConfigureStep() {
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Type:</span>
|
||||
<Badge variant="secondary">{isTemplateMode ? 'Template' : 'Repository'}</Badge>
|
||||
<Badge variant="secondary">
|
||||
{isTemplateMode ? 'Template' : 'Repository'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Source:</span>
|
||||
@ -268,24 +327,33 @@ export function ConfigureStep() {
|
||||
|
||||
{/* Organization Selection */}
|
||||
<div className="mb-6">
|
||||
<Label htmlFor="organization" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
|
||||
<Label
|
||||
htmlFor="organization"
|
||||
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
|
||||
>
|
||||
Organization *
|
||||
</Label>
|
||||
{isLoadingOrgs ? (
|
||||
<div className="flex items-center justify-center p-3 border rounded-md">
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
<span className="text-sm text-muted-foreground">Loading organizations...</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Loading organizations...
|
||||
</span>
|
||||
</div>
|
||||
) : organizations.length === 0 ? (
|
||||
<Alert>
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
No organizations found. You need to be part of at least one organization.
|
||||
No organizations found. You need to be part of at least one
|
||||
organization.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : (
|
||||
<Select value={selectedOrg} onValueChange={setSelectedOrg}>
|
||||
<SelectTrigger id="organization" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
|
||||
<SelectTrigger
|
||||
id="organization"
|
||||
className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}
|
||||
>
|
||||
<SelectValue placeholder="Select organization" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -301,24 +369,38 @@ export function ConfigureStep() {
|
||||
|
||||
{/* Deployment options */}
|
||||
<div className="mb-6">
|
||||
<Label className={`text-sm mb-3 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
|
||||
<Label
|
||||
className={`text-sm mb-3 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
|
||||
>
|
||||
Deployment Type
|
||||
</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
variant={deployOption === 'lrn' ? "default" : "outline"}
|
||||
className={`py-3 ${deployOption === 'lrn'
|
||||
? (isDarkMode ? 'bg-zinc-800 text-white' : 'bg-zinc-800 text-white')
|
||||
: (isDarkMode ? 'bg-transparent border-zinc-700 text-zinc-400' : 'bg-transparent border-zinc-300 text-zinc-600')}`}
|
||||
variant={deployOption === 'lrn' ? 'default' : 'outline'}
|
||||
className={`py-3 ${
|
||||
deployOption === 'lrn'
|
||||
? isDarkMode
|
||||
? 'bg-zinc-800 text-white'
|
||||
: 'bg-zinc-800 text-white'
|
||||
: isDarkMode
|
||||
? 'bg-transparent border-zinc-700 text-zinc-400'
|
||||
: 'bg-transparent border-zinc-300 text-zinc-600'
|
||||
}`}
|
||||
onClick={() => toggleDeployOption('lrn')}
|
||||
>
|
||||
Deployer LRN
|
||||
</Button>
|
||||
<Button
|
||||
variant={deployOption === 'auction' ? "default" : "outline"}
|
||||
className={`py-3 ${deployOption === 'auction'
|
||||
? (isDarkMode ? 'bg-zinc-800 text-white' : 'bg-zinc-800 text-white')
|
||||
: (isDarkMode ? 'bg-transparent border-zinc-700 text-zinc-400' : 'bg-transparent border-zinc-300 text-zinc-600')}`}
|
||||
variant={deployOption === 'auction' ? 'default' : 'outline'}
|
||||
className={`py-3 ${
|
||||
deployOption === 'auction'
|
||||
? isDarkMode
|
||||
? 'bg-zinc-800 text-white'
|
||||
: 'bg-zinc-800 text-white'
|
||||
: isDarkMode
|
||||
? 'bg-transparent border-zinc-700 text-zinc-400'
|
||||
: 'bg-transparent border-zinc-300 text-zinc-600'
|
||||
}`}
|
||||
onClick={() => toggleDeployOption('auction')}
|
||||
>
|
||||
Create Auction
|
||||
@ -329,13 +411,18 @@ export function ConfigureStep() {
|
||||
{deployOption === 'lrn' ? (
|
||||
/* LRN Deployment Settings */
|
||||
<div className="mb-6">
|
||||
<Label htmlFor="lrn" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
|
||||
<Label
|
||||
htmlFor="lrn"
|
||||
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
|
||||
>
|
||||
Select Deployer LRN *
|
||||
</Label>
|
||||
{isLoadingDeployers ? (
|
||||
<div className="flex items-center justify-center p-3 border rounded-md">
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
<span className="text-sm text-muted-foreground">Loading deployers...</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Loading deployers...
|
||||
</span>
|
||||
</div>
|
||||
) : deployers.length === 0 ? (
|
||||
<Alert>
|
||||
@ -347,12 +434,20 @@ export function ConfigureStep() {
|
||||
) : (
|
||||
<>
|
||||
<Select value={selectedLrn} onValueChange={setSelectedLrn}>
|
||||
<SelectTrigger id="lrn" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
|
||||
<SelectTrigger
|
||||
id="lrn"
|
||||
className={
|
||||
isDarkMode ? 'border-zinc-700' : 'border-zinc-300'
|
||||
}
|
||||
>
|
||||
<SelectValue placeholder="Select a deployer" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{deployers.map((deployer) => (
|
||||
<SelectItem key={deployer.deployerLrn} value={deployer.deployerLrn}>
|
||||
<SelectItem
|
||||
key={deployer.deployerLrn}
|
||||
value={deployer.deployerLrn}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span>{deployer.deployerLrn}</span>
|
||||
{deployer.minimumPayment && (
|
||||
@ -370,10 +465,19 @@ export function ConfigureStep() {
|
||||
{selectedDeployer && (
|
||||
<div className="mt-3 p-3 bg-muted rounded-md">
|
||||
<div className="text-sm space-y-1">
|
||||
<div><strong>API URL:</strong> {selectedDeployer.deployerApiUrl}</div>
|
||||
<div><strong>Base Domain:</strong> {selectedDeployer.baseDomain}</div>
|
||||
<div>
|
||||
<strong>API URL:</strong>{' '}
|
||||
{selectedDeployer.deployerApiUrl}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Base Domain:</strong>{' '}
|
||||
{selectedDeployer.baseDomain}
|
||||
</div>
|
||||
{selectedDeployer.minimumPayment && (
|
||||
<div><strong>Minimum Payment:</strong> {selectedDeployer.minimumPayment}</div>
|
||||
<div>
|
||||
<strong>Minimum Payment:</strong>{' '}
|
||||
{selectedDeployer.minimumPayment}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -385,11 +489,20 @@ export function ConfigureStep() {
|
||||
/* Auction Settings */
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div>
|
||||
<Label htmlFor="deployers" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
|
||||
<Label
|
||||
htmlFor="deployers"
|
||||
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
|
||||
>
|
||||
Number of Deployers
|
||||
</Label>
|
||||
<Select value={numberOfDeployers} onValueChange={setNumberOfDeployers}>
|
||||
<SelectTrigger id="deployers" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
|
||||
<Select
|
||||
value={numberOfDeployers}
|
||||
onValueChange={setNumberOfDeployers}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="deployers"
|
||||
className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}
|
||||
>
|
||||
<SelectValue placeholder="Select number" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -402,11 +515,17 @@ export function ConfigureStep() {
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="maxPrice" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
|
||||
<Label
|
||||
htmlFor="maxPrice"
|
||||
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
|
||||
>
|
||||
Maximum Price (aint)
|
||||
</Label>
|
||||
<Select value={maxPrice} onValueChange={setMaxPrice}>
|
||||
<SelectTrigger id="maxPrice" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
|
||||
<SelectTrigger
|
||||
id="maxPrice"
|
||||
className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}
|
||||
>
|
||||
<SelectValue placeholder="Select price" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -422,10 +541,14 @@ export function ConfigureStep() {
|
||||
|
||||
{/* Payment Address */}
|
||||
<div className="mb-6">
|
||||
<Label className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
|
||||
<Label
|
||||
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
|
||||
>
|
||||
Payment Address
|
||||
</Label>
|
||||
<div className={`p-3 border rounded-md bg-muted ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}>
|
||||
<div
|
||||
className={`p-3 border rounded-md bg-muted ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}
|
||||
>
|
||||
<div className="text-sm font-mono break-all">
|
||||
{wallet?.address || 'No wallet connected'}
|
||||
</div>
|
||||
@ -434,12 +557,19 @@ export function ConfigureStep() {
|
||||
|
||||
{/* Environment Variables */}
|
||||
<div className="mb-6">
|
||||
<Label className={`text-sm font-medium mb-2 block ${isDarkMode ? 'text-white' : 'text-zinc-900'}`}>
|
||||
<Label
|
||||
className={`text-sm font-medium mb-2 block ${isDarkMode ? 'text-white' : 'text-zinc-900'}`}
|
||||
>
|
||||
Environment Variables
|
||||
</Label>
|
||||
<div className={`border rounded-md p-4 ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}>
|
||||
<div
|
||||
className={`border rounded-md p-4 ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}
|
||||
>
|
||||
{envVars.map((envVar, index) => (
|
||||
<div key={index} className="space-y-2 mb-4 pb-4 border-b border-muted last:border-b-0 last:mb-0 last:pb-0">
|
||||
<div
|
||||
key={index}
|
||||
className="space-y-2 mb-4 pb-4 border-b border-muted last:border-b-0 last:mb-0 last:pb-0"
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Input
|
||||
placeholder="KEY"
|
||||
@ -450,12 +580,16 @@ export function ConfigureStep() {
|
||||
<Input
|
||||
placeholder="VALUE"
|
||||
value={envVar.value}
|
||||
onChange={(e) => updateEnvVar(index, 'value', e.target.value)}
|
||||
onChange={(e) =>
|
||||
updateEnvVar(index, 'value', e.target.value)
|
||||
}
|
||||
className={`bg-transparent ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-xs text-muted-foreground">Environments:</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Environments:
|
||||
</span>
|
||||
{['Production', 'Preview', 'Development'].map((env) => (
|
||||
<div key={env} className="flex items-center gap-1">
|
||||
<Checkbox
|
||||
|
||||
@ -1,24 +1,36 @@
|
||||
// src/components/onboarding/connect-step/connect-step.tsx
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Github, Wallet, CheckCircle2, AlertTriangle, Loader2, ExternalLink, ChevronDown } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { SignIn } from '@clerk/nextjs'
|
||||
import { useOnboarding } from '@/components/onboarding/store'
|
||||
import { GitHubBackendAuth } from '@/components/GitHubBackendAuth'
|
||||
import { useOnboarding } from '@/components/onboarding/useOnboarding'
|
||||
import { AVAILABLE_TEMPLATES, type TemplateDetail } from '@/constants/templates'
|
||||
import { useAuthStatus } from '@/hooks/useAuthStatus'
|
||||
import { useRepoData } from '@/hooks/useRepoData'
|
||||
import type { Template } from '@/types/onboarding'
|
||||
import { adaptOptionalTemplate } from '@/utils/typeAdapters'
|
||||
import { SignIn } from '@clerk/nextjs'
|
||||
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
|
||||
import { Button } from '@workspace/ui/components/button'
|
||||
import { Card, CardContent } from '@workspace/ui/components/card'
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger
|
||||
} from '@workspace/ui/components/collapsible'
|
||||
import { Input } from '@workspace/ui/components/input'
|
||||
import { Label } from '@workspace/ui/components/label'
|
||||
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@workspace/ui/components/collapsible'
|
||||
import {
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ExternalLink,
|
||||
Github,
|
||||
Loader2,
|
||||
Wallet
|
||||
} from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { GitHubBackendAuth } from '@/components/GitHubBackendAuth'
|
||||
import { AVAILABLE_TEMPLATES, type TemplateDetail } from '@/constants/templates'
|
||||
import { Template } from '@/types/onboarding'
|
||||
import { adaptOptionalTemplate } from '@/utils/typeAdapters'
|
||||
|
||||
interface Repository {
|
||||
id: string | number
|
||||
@ -33,11 +45,15 @@ export function ConnectStep() {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
// Repository vs Template selection
|
||||
const [selectedRepo, setSelectedRepo] = useState<string>(formData.githubRepo || '')
|
||||
const [selectedRepo, setSelectedRepo] = useState<string>(
|
||||
formData.githubRepo || ''
|
||||
)
|
||||
const [selectedTemplate, setSelectedTemplate] = useState(
|
||||
adaptOptionalTemplate(formData.template)
|
||||
)
|
||||
const [projectName, setProjectName] = useState<string>(formData.projectName || '')
|
||||
const [projectName, setProjectName] = useState<string>(
|
||||
formData.projectName || ''
|
||||
)
|
||||
const [isImportMode, setIsImportMode] = useState(true)
|
||||
|
||||
// Auth status and warning display
|
||||
@ -94,7 +110,9 @@ export function ConnectStep() {
|
||||
template: template,
|
||||
githubRepo: '',
|
||||
deploymentMode: 'template',
|
||||
projectName: projectName || `my-${template.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`
|
||||
projectName:
|
||||
projectName ||
|
||||
`my-${template.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`
|
||||
})
|
||||
}
|
||||
|
||||
@ -163,7 +181,8 @@ export function ConnectStep() {
|
||||
}
|
||||
|
||||
// For repository import, project name is optional but we'll use repo name as fallback
|
||||
const finalProjectName = projectName.trim() || (isImportMode ? selectedRepo.split('/')[1] : '')
|
||||
const finalProjectName =
|
||||
projectName.trim() || (isImportMode ? selectedRepo.split('/')[1] : '')
|
||||
|
||||
// Set final form data and proceed
|
||||
setFormData({
|
||||
@ -182,7 +201,9 @@ export function ConnectStep() {
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
|
||||
<p className="text-sm text-zinc-500">Loading authentication status...</p>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Loading authentication status...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -196,7 +217,9 @@ export function ConnectStep() {
|
||||
<div className="max-w-2xl w-full mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h2 className={`text-2xl font-medium ${isDarkMode ? "text-white" : "text-zinc-900"} mb-2`}>
|
||||
<h2
|
||||
className={`text-2xl font-medium ${isDarkMode ? 'text-white' : 'text-zinc-900'} mb-2`}
|
||||
>
|
||||
Connect
|
||||
</h2>
|
||||
<p className="text-zinc-500 mb-6">
|
||||
@ -204,12 +227,15 @@ export function ConnectStep() {
|
||||
</p>
|
||||
|
||||
{/* GitHub Account Selector - Only show if multiple accounts */}
|
||||
{clerk.user?.externalAccounts && clerk.user.externalAccounts.length > 1 && (
|
||||
{clerk.user?.externalAccounts &&
|
||||
clerk.user.externalAccounts.length > 1 && (
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-md cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700">
|
||||
<Github className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">
|
||||
{clerk.user?.externalAccounts?.find((acc: any) => acc.provider === 'github')?.username || 'git-account'}
|
||||
{clerk.user?.externalAccounts?.find(
|
||||
(acc: any) => acc.provider === 'github'
|
||||
)?.username || 'git-account'}
|
||||
</span>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</div>
|
||||
@ -224,7 +250,10 @@ export function ConnectStep() {
|
||||
<Alert className="mb-6 cursor-pointer hover:bg-amber-50 dark:hover:bg-amber-950/20">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription className="flex items-center justify-between w-full">
|
||||
<span>Authentication required to continue ({progress.completed}/{progress.total} complete)</span>
|
||||
<span>
|
||||
Authentication required to continue ({progress.completed}/
|
||||
{progress.total} complete)
|
||||
</span>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
@ -236,7 +265,9 @@ export function ConnectStep() {
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<Github className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">Sign in with Clerk</span>
|
||||
<span className="text-sm font-medium">
|
||||
Sign in with Clerk
|
||||
</span>
|
||||
</div>
|
||||
<div className="scale-90 origin-top-left">
|
||||
<SignIn routing="hash" />
|
||||
@ -250,9 +281,15 @@ export function ConnectStep() {
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<Github className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">Connect GitHub Account</span>
|
||||
<span className="text-sm font-medium">
|
||||
Connect GitHub Account
|
||||
</span>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => window.open('/user-profile', '_blank')}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => window.open('/user-profile', '_blank')}
|
||||
>
|
||||
<ExternalLink className="h-3 w-3 mr-2" />
|
||||
Connect GitHub
|
||||
</Button>
|
||||
@ -265,7 +302,9 @@ export function ConnectStep() {
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<Wallet className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">Connect Wallet</span>
|
||||
<span className="text-sm font-medium">
|
||||
Connect Wallet
|
||||
</span>
|
||||
</div>
|
||||
<Button size="sm" onClick={handleConnectWallet}>
|
||||
Connect Wallet
|
||||
@ -274,14 +313,20 @@ export function ConnectStep() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{missing.githubBackendSync && !missing.walletConnection && !missing.clerkGithub && (
|
||||
{missing.githubBackendSync &&
|
||||
!missing.walletConnection &&
|
||||
!missing.clerkGithub && (
|
||||
<Card className="border-amber-200 bg-amber-50/50 dark:bg-amber-950/20">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<Github className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">Sync GitHub Access</span>
|
||||
<span className="text-sm font-medium">
|
||||
Sync GitHub Access
|
||||
</span>
|
||||
</div>
|
||||
<GitHubBackendAuth onAuthStatusChange={handleGithubAuthChange} />
|
||||
<GitHubBackendAuth
|
||||
onAuthStatusChange={handleGithubAuthChange}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
@ -292,8 +337,9 @@ export function ConnectStep() {
|
||||
{/* Mode Selection Tabs */}
|
||||
<div className="grid grid-cols-2 gap-1 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-lg mb-6">
|
||||
<Button
|
||||
variant={isImportMode ? "default" : "ghost"}
|
||||
className={`${isImportMode
|
||||
variant={isImportMode ? 'default' : 'ghost'}
|
||||
className={`${
|
||||
isImportMode
|
||||
? 'bg-white dark:bg-zinc-700 shadow-sm'
|
||||
: 'bg-transparent hover:bg-white/50 dark:hover:bg-zinc-700/50'
|
||||
}`}
|
||||
@ -302,8 +348,9 @@ export function ConnectStep() {
|
||||
Import a repository
|
||||
</Button>
|
||||
<Button
|
||||
variant={!isImportMode ? "default" : "ghost"}
|
||||
className={`${!isImportMode
|
||||
variant={!isImportMode ? 'default' : 'ghost'}
|
||||
className={`${
|
||||
!isImportMode
|
||||
? 'bg-white dark:bg-zinc-700 shadow-sm'
|
||||
: 'bg-transparent hover:bg-white/50 dark:hover:bg-zinc-700/50'
|
||||
}`}
|
||||
@ -327,7 +374,8 @@ export function ConnectStep() {
|
||||
<Alert>
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
No repositories found. Make sure your GitHub account has repositories.
|
||||
No repositories found. Make sure your GitHub account has
|
||||
repositories.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
@ -346,9 +394,13 @@ export function ConnectStep() {
|
||||
>
|
||||
<Github className="h-5 w-5 mr-3 text-zinc-500 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm">{repo.full_name}</div>
|
||||
<div className="font-medium text-sm">
|
||||
{repo.full_name}
|
||||
</div>
|
||||
{repo.description && (
|
||||
<div className="text-xs text-zinc-500 truncate">{repo.description}</div>
|
||||
<div className="text-xs text-zinc-500 truncate">
|
||||
{repo.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{selectedRepo === repo.full_name && (
|
||||
@ -361,7 +413,10 @@ export function ConnectStep() {
|
||||
{/* Project Name Input for Repository Import */}
|
||||
{selectedRepo && (
|
||||
<div className="mt-6 space-y-2">
|
||||
<Label htmlFor="projectName" className="text-sm font-medium">
|
||||
<Label
|
||||
htmlFor="projectName"
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
Project Name
|
||||
</Label>
|
||||
<Input
|
||||
@ -382,7 +437,8 @@ export function ConnectStep() {
|
||||
) : (
|
||||
/* Template Selection */
|
||||
<div className="space-y-4">
|
||||
{AVAILABLE_TEMPLATES.filter(t => !t.isComingSoon).map((template) => (
|
||||
{AVAILABLE_TEMPLATES.filter((t) => !t.isComingSoon).map(
|
||||
(template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className={`flex items-center p-4 rounded-lg border cursor-pointer transition-all ${
|
||||
@ -395,13 +451,19 @@ export function ConnectStep() {
|
||||
{/* Template Icon */}
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-zinc-100 dark:bg-zinc-800 mr-4">
|
||||
<div className="w-6 h-6 bg-zinc-600 dark:bg-zinc-400 rounded flex items-center justify-center text-xs font-bold text-white">
|
||||
{template.icon === 'web' ? 'PWA' : template.icon === 'nextjs' ? 'N' : 'IMG'}
|
||||
{template.icon === 'web'
|
||||
? 'PWA'
|
||||
: template.icon === 'nextjs'
|
||||
? 'N'
|
||||
: 'IMG'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Template Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm mb-1">{template.name}</div>
|
||||
<div className="font-medium text-sm mb-1">
|
||||
{template.name}
|
||||
</div>
|
||||
<div className="flex items-center text-xs text-zinc-500">
|
||||
<Github className="h-3 w-3 mr-1" />
|
||||
{template.repoFullName}
|
||||
@ -413,7 +475,8 @@ export function ConnectStep() {
|
||||
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
|
||||
{/* Project Name Input for Templates */}
|
||||
{selectedTemplate && (
|
||||
@ -443,7 +506,12 @@ export function ConnectStep() {
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
disabled={!isFullyAuthenticated || (isImportMode ? !selectedRepo : (!selectedTemplate || !projectName.trim()))}
|
||||
disabled={
|
||||
!isFullyAuthenticated ||
|
||||
(isImportMode
|
||||
? !selectedRepo
|
||||
: !selectedTemplate || !projectName.trim())
|
||||
}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
|
||||
@ -1,19 +1,30 @@
|
||||
// src/components/onboarding/deploy-step/deploy-step.tsx
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { Github, Loader2, AlertTriangle, CheckCircle2 } from 'lucide-react'
|
||||
import { useOnboarding } from '@/components/onboarding/store'
|
||||
import { useOnboarding } from '@/components/onboarding/useOnboarding'
|
||||
import { useWallet } from '@/context/WalletContext'
|
||||
import { useDeployment } from '@/hooks/useDeployment'
|
||||
import { useTemplateDeployment } from '@/hooks/useTemplate'
|
||||
import { Button } from '@workspace/ui/components/button'
|
||||
import { Progress } from '@workspace/ui/components/progress'
|
||||
import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogFooter } from '@workspace/ui/components/dialog'
|
||||
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card'
|
||||
import { Badge } from '@workspace/ui/components/badge'
|
||||
import { Button } from '@workspace/ui/components/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from '@workspace/ui/components/card'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogTitle
|
||||
} from '@workspace/ui/components/dialog'
|
||||
import { Progress } from '@workspace/ui/components/progress'
|
||||
import { AlertTriangle, CheckCircle2, Github, Loader2 } from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function DeployStep() {
|
||||
@ -29,7 +40,8 @@ export function DeployStep() {
|
||||
// Contexts and hooks
|
||||
const { wallet } = useWallet()
|
||||
const { deployRepository, isDeploying: isRepoDeploying } = useDeployment()
|
||||
const { deployTemplate, isDeploying: isTemplateDeploying } = useTemplateDeployment()
|
||||
const { deployTemplate, isDeploying: isTemplateDeploying } =
|
||||
useTemplateDeployment()
|
||||
|
||||
// Determine deployment type and get the right deploying state
|
||||
const isTemplateMode = formData.deploymentMode === 'template'
|
||||
@ -53,7 +65,10 @@ export function DeployStep() {
|
||||
return {
|
||||
name: formData.githubRepo?.split('/').pop() || 'Repository',
|
||||
source: formData.githubRepo || 'Unknown Repository',
|
||||
projectName: formData.projectName || formData.githubRepo?.split('/').pop() || 'New Project',
|
||||
projectName:
|
||||
formData.projectName ||
|
||||
formData.githubRepo?.split('/').pop() ||
|
||||
'New Project',
|
||||
type: 'Repository'
|
||||
}
|
||||
}
|
||||
@ -105,7 +120,9 @@ export function DeployStep() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Deployment failed:', error)
|
||||
setDeploymentError(error instanceof Error ? error.message : 'Deployment failed')
|
||||
setDeploymentError(
|
||||
error instanceof Error ? error.message : 'Deployment failed'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,8 +142,8 @@ export function DeployStep() {
|
||||
organizationSlug: formData.selectedOrg,
|
||||
environmentVariables: formData.environmentVariables || [],
|
||||
deployerLrn: formData.selectedLrn
|
||||
};
|
||||
const result = await deployTemplate(config);
|
||||
}
|
||||
const result = await deployTemplate(config)
|
||||
|
||||
// Save deployment results
|
||||
setFormData({
|
||||
@ -156,7 +173,10 @@ export function DeployStep() {
|
||||
organizationSlug: formData.selectedOrg,
|
||||
repository: formData.githubRepo,
|
||||
branch: 'main', // Default branch
|
||||
name: formData.projectName || formData.githubRepo.split('/').pop() || 'New Project',
|
||||
name:
|
||||
formData.projectName ||
|
||||
formData.githubRepo.split('/').pop() ||
|
||||
'New Project',
|
||||
environmentVariables: formData.environmentVariables || []
|
||||
}
|
||||
|
||||
@ -194,18 +214,66 @@ export function DeployStep() {
|
||||
<div className="max-w-md w-full mx-auto">
|
||||
{/* Deploy icon */}
|
||||
<div className="mx-auto mb-6 flex justify-center">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={isDarkMode ? "text-white" : "text-black"}>
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<polyline points="7.5 4.21 12 6.81 16.5 4.21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<polyline points="7.5 19.79 7.5 14.6 3 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<polyline points="21 12 16.5 14.6 16.5 19.79" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<line x1="12" y1="22.08" x2="12" y2="12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={isDarkMode ? 'text-white' : 'text-black'}
|
||||
>
|
||||
<path
|
||||
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<polyline
|
||||
points="7.5 4.21 12 6.81 16.5 4.21"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<polyline
|
||||
points="7.5 19.79 7.5 14.6 3 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<polyline
|
||||
points="21 12 16.5 14.6 16.5 19.79"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<polyline
|
||||
points="3.27 6.96 12 12.01 20.73 6.96"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<line
|
||||
x1="12"
|
||||
y1="22.08"
|
||||
x2="12"
|
||||
y2="12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Deploy header */}
|
||||
<h2 className={`text-2xl font-medium ${isDarkMode ? "text-white" : "text-zinc-900"} text-center mb-2`}>
|
||||
<h2
|
||||
className={`text-2xl font-medium ${isDarkMode ? 'text-white' : 'text-zinc-900'} text-center mb-2`}
|
||||
>
|
||||
{isDeploying ? 'Deploying...' : 'Deploy'}
|
||||
</h2>
|
||||
<p className="text-center text-zinc-500 mb-8">
|
||||
@ -226,7 +294,9 @@ export function DeployStep() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Github className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm">{deploymentInfo.projectName}</div>
|
||||
<div className="font-medium text-sm">
|
||||
{deploymentInfo.projectName}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground font-mono">
|
||||
{deploymentInfo.source}
|
||||
</div>
|
||||
@ -240,15 +310,22 @@ export function DeployStep() {
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-muted-foreground">Deployer</div>
|
||||
<div className="font-medium">{formData.selectedLrn ? 'LRN' : 'Auction'}</div>
|
||||
<div className="font-medium">
|
||||
{formData.selectedLrn ? 'LRN' : 'Auction'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.environmentVariables && formData.environmentVariables.length > 0 && (
|
||||
{formData.environmentVariables &&
|
||||
formData.environmentVariables.length > 0 && (
|
||||
<div className="pt-2">
|
||||
<div className="text-xs text-muted-foreground mb-1">Environment Variables</div>
|
||||
<div className="text-xs text-muted-foreground mb-1">
|
||||
Environment Variables
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
{formData.environmentVariables.length} variable{formData.environmentVariables.length !== 1 ? 's' : ''} configured
|
||||
{formData.environmentVariables.length} variable
|
||||
{formData.environmentVariables.length !== 1 ? 's' : ''}{' '}
|
||||
configured
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -273,7 +350,8 @@ export function DeployStep() {
|
||||
<AlertDescription>
|
||||
<div className="font-medium">Deployment Successful!</div>
|
||||
<div className="text-sm mt-1">
|
||||
Your project has been deployed successfully. You'll be redirected to the project dashboard.
|
||||
Your project has been deployed successfully. You'll be
|
||||
redirected to the project dashboard.
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
@ -283,13 +361,21 @@ export function DeployStep() {
|
||||
{isDeploying && (
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<div className={`${isDarkMode ? "text-white" : "text-zinc-900"} text-sm`}>
|
||||
{isTemplateMode ? 'Creating repository from template...' : 'Deploying repository...'}
|
||||
<div
|
||||
className={`${isDarkMode ? 'text-white' : 'text-zinc-900'} text-sm`}
|
||||
>
|
||||
{isTemplateMode
|
||||
? 'Creating repository from template...'
|
||||
: 'Deploying repository...'}
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={undefined} className={`h-2 ${isDarkMode ? "bg-zinc-800" : "bg-zinc-200"}`} />
|
||||
<Progress
|
||||
value={undefined}
|
||||
className={`h-2 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'}`}
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground mt-2">
|
||||
This process may take several minutes. Please do not close this window.
|
||||
This process may take several minutes. Please do not close this
|
||||
window.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -298,7 +384,7 @@ export function DeployStep() {
|
||||
<div className="flex justify-between items-center mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className={`${isDarkMode ? "text-zinc-400 border-zinc-700" : "text-zinc-600 border-zinc-300"} bg-transparent`}
|
||||
className={`${isDarkMode ? 'text-zinc-400 border-zinc-700' : 'text-zinc-600 border-zinc-300'} bg-transparent`}
|
||||
onClick={previousStep}
|
||||
disabled={isDeploying || deploymentSuccess}
|
||||
>
|
||||
@ -315,7 +401,7 @@ export function DeployStep() {
|
||||
</Button>
|
||||
) : isDeploying ? (
|
||||
<Button
|
||||
className={`${isDarkMode ? "bg-zinc-700 text-zinc-300" : "bg-zinc-300 text-zinc-600"}`}
|
||||
className={`${isDarkMode ? 'bg-zinc-700 text-zinc-300' : 'bg-zinc-300 text-zinc-600'}`}
|
||||
disabled
|
||||
>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
@ -327,9 +413,22 @@ export function DeployStep() {
|
||||
onClick={handlePayAndDeploy}
|
||||
disabled={deploymentError !== null}
|
||||
>
|
||||
{formData.deploymentType === 'auction' ? 'Pay and Deploy' : 'Deploy'}
|
||||
<svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
{formData.deploymentType === 'auction'
|
||||
? 'Pay and Deploy'
|
||||
: 'Deploy'}
|
||||
<svg
|
||||
className="ml-2 h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 12H19M19 12L13 6M19 12L13 18"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
)}
|
||||
@ -360,7 +459,9 @@ export function DeployStep() {
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Source:</span>
|
||||
<span className="font-mono text-xs">{deploymentInfo.source}</span>
|
||||
<span className="font-mono text-xs">
|
||||
{deploymentInfo.source}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -378,7 +479,9 @@ export function DeployStep() {
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium">Deployer</h3>
|
||||
<div className="text-sm">
|
||||
<div className="font-mono text-xs">{formData.selectedLrn}</div>
|
||||
<div className="font-mono text-xs">
|
||||
{formData.selectedLrn}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -402,17 +505,10 @@ export function DeployStep() {
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex justify-end space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancelConfirm}
|
||||
>
|
||||
<Button variant="outline" onClick={handleCancelConfirm}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleConfirmDeploy}
|
||||
>
|
||||
Confirm Deployment
|
||||
</Button>
|
||||
<Button onClick={handleConfirmDeploy}>Confirm Deployment</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -10,9 +10,7 @@
|
||||
|
||||
// Main component
|
||||
export { default as Onboarding } from './Onboarding'
|
||||
export {
|
||||
default as OnboardingDialog,
|
||||
} from './OnboardingDialog'
|
||||
export { default as OnboardingDialog } from './OnboardingDialog'
|
||||
|
||||
// Step components
|
||||
export { ConfigureStep } from './configure-step'
|
||||
@ -27,7 +25,7 @@ export * from './common'
|
||||
export * from './sidebar'
|
||||
|
||||
// Store and hooks
|
||||
export { useOnboarding } from './store'
|
||||
export { useOnboarding } from './useOnboarding'
|
||||
|
||||
// Types
|
||||
export * from './types'
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
/**
|
||||
* Available steps in the onboarding flow
|
||||
*/
|
||||
export type Step = 'connect' | 'configure' | 'deploy'
|
||||
export type Step = 'connect' | 'configure' | 'deploy' | 'success'
|
||||
|
||||
/**
|
||||
* Form data collected during the onboarding process
|
||||
|
||||
50
pnpm-lock.yaml
generated
50
pnpm-lock.yaml
generated
@ -127,8 +127,8 @@ importers:
|
||||
specifier: ^10.9.2
|
||||
version: 10.9.2(@types/node@20.17.23)(typescript@5.8.2)
|
||||
typeorm:
|
||||
specifier: ^0.3.19
|
||||
version: 0.3.21(better-sqlite3@9.6.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2))
|
||||
specifier: ^0.3.26
|
||||
version: 0.3.26(better-sqlite3@12.2.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2))
|
||||
typescript:
|
||||
specifier: ^5.3.3
|
||||
version: 5.8.2
|
||||
@ -152,8 +152,8 @@ importers:
|
||||
specifier: ^11.0.4
|
||||
version: 11.0.4
|
||||
better-sqlite3:
|
||||
specifier: ^9.2.2
|
||||
version: 9.6.0
|
||||
specifier: ^12.2.0
|
||||
version: 12.2.0
|
||||
copyfiles:
|
||||
specifier: ^2.4.1
|
||||
version: 2.4.1
|
||||
@ -2892,8 +2892,9 @@ packages:
|
||||
before-after-hook@3.0.2:
|
||||
resolution: {integrity: sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==}
|
||||
|
||||
better-sqlite3@9.6.0:
|
||||
resolution: {integrity: sha512-yR5HATnqeYNVnkaUTf4bOP2dJSnyhP4puJN/QPRyx4YkBEEUxib422n2XzPqDEHjQQqazoYoADdAm5vE15+dAQ==}
|
||||
better-sqlite3@12.2.0:
|
||||
resolution: {integrity: sha512-eGbYq2CT+tos1fBwLQ/tkBt9J5M3JEHjku4hbvQUePCckkvVf14xWj+1m7dGoK81M/fOjFT7yM9UMeKT/+vFLQ==}
|
||||
engines: {node: 20.x || 22.x || 23.x || 24.x}
|
||||
|
||||
big-integer@1.6.36:
|
||||
resolution: {integrity: sha512-t70bfa7HYEA1D9idDbmuv7YbsbVkQ+Hp+8KFSul4aE5e/i1bjCNIRYJZlA8Q8p0r9T8cF/RVvwUgRA//FydEyg==}
|
||||
@ -3323,6 +3324,14 @@ packages:
|
||||
resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
dedent@1.6.0:
|
||||
resolution: {integrity: sha512-F1Z+5UCFpmQUzJa11agbyPVMbpgT/qA3/SKyJ1jyBgm7dUcUEa8v9JwDkerSQXfakBwFljIxhOJqGkjUwZ9FSA==}
|
||||
peerDependencies:
|
||||
babel-plugin-macros: ^3.1.0
|
||||
peerDependenciesMeta:
|
||||
babel-plugin-macros:
|
||||
optional: true
|
||||
|
||||
deep-extend@0.6.0:
|
||||
resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
|
||||
engines: {node: '>=4.0.0'}
|
||||
@ -5374,29 +5383,28 @@ packages:
|
||||
typeforce@1.18.0:
|
||||
resolution: {integrity: sha512-7uc1O8h1M1g0rArakJdf0uLRSSgFcYexrVoKo+bzJd32gd4gDy2L/Z+8/FjPnU9ydY3pEnVPtr9FyscYY60K1g==}
|
||||
|
||||
typeorm@0.3.21:
|
||||
resolution: {integrity: sha512-lh4rUWl1liZGjyPTWpwcK8RNI5x4ekln+/JJOox1wCd7xbucYDOXWD+1cSzTN3L0wbTGxxOtloM5JlxbOxEufA==}
|
||||
typeorm@0.3.26:
|
||||
resolution: {integrity: sha512-o2RrBNn3lczx1qv4j+JliVMmtkPSqEGpG0UuZkt9tCfWkoXKu8MZnjvp2GjWPll1SehwemQw6xrbVRhmOglj8Q==}
|
||||
engines: {node: '>=16.13.0'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
'@google-cloud/spanner': ^5.18.0
|
||||
'@sap/hana-client': ^2.12.25
|
||||
better-sqlite3: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0
|
||||
hdb-pool: ^0.1.6
|
||||
'@google-cloud/spanner': ^5.18.0 || ^6.0.0 || ^7.0.0
|
||||
'@sap/hana-client': ^2.14.22
|
||||
better-sqlite3: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0
|
||||
ioredis: ^5.0.4
|
||||
mongodb: ^5.8.0
|
||||
mongodb: ^5.8.0 || ^6.0.0
|
||||
mssql: ^9.1.1 || ^10.0.1 || ^11.0.1
|
||||
mysql2: ^2.2.5 || ^3.0.1
|
||||
oracledb: ^6.3.0
|
||||
pg: ^8.5.1
|
||||
pg-native: ^3.0.0
|
||||
pg-query-stream: ^4.0.0
|
||||
redis: ^3.1.1 || ^4.0.0
|
||||
redis: ^3.1.1 || ^4.0.0 || ^5.0.14
|
||||
reflect-metadata: ^0.1.14 || ^0.2.0
|
||||
sql.js: ^1.4.0
|
||||
sqlite3: ^5.0.3
|
||||
ts-node: ^10.7.0
|
||||
typeorm-aurora-data-api-driver: ^2.0.0
|
||||
typeorm-aurora-data-api-driver: ^2.0.0 || ^3.0.0
|
||||
peerDependenciesMeta:
|
||||
'@google-cloud/spanner':
|
||||
optional: true
|
||||
@ -5404,8 +5412,6 @@ packages:
|
||||
optional: true
|
||||
better-sqlite3:
|
||||
optional: true
|
||||
hdb-pool:
|
||||
optional: true
|
||||
ioredis:
|
||||
optional: true
|
||||
mongodb:
|
||||
@ -8454,7 +8460,7 @@ snapshots:
|
||||
|
||||
before-after-hook@3.0.2: {}
|
||||
|
||||
better-sqlite3@9.6.0:
|
||||
better-sqlite3@12.2.0:
|
||||
dependencies:
|
||||
bindings: 1.5.0
|
||||
prebuild-install: 7.1.3
|
||||
@ -8925,6 +8931,8 @@ snapshots:
|
||||
dependencies:
|
||||
mimic-response: 3.1.0
|
||||
|
||||
dedent@1.6.0: {}
|
||||
|
||||
deep-extend@0.6.0: {}
|
||||
|
||||
defaults@1.0.4:
|
||||
@ -11206,7 +11214,7 @@ snapshots:
|
||||
|
||||
typeforce@1.18.0: {}
|
||||
|
||||
typeorm@0.3.21(better-sqlite3@9.6.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2)):
|
||||
typeorm@0.3.26(better-sqlite3@12.2.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2)):
|
||||
dependencies:
|
||||
'@sqltools/formatter': 1.2.5
|
||||
ansis: 3.17.0
|
||||
@ -11214,6 +11222,7 @@ snapshots:
|
||||
buffer: 6.0.3
|
||||
dayjs: 1.11.13
|
||||
debug: 4.4.0
|
||||
dedent: 1.6.0
|
||||
dotenv: 16.4.7
|
||||
glob: 10.4.5
|
||||
reflect-metadata: 0.2.2
|
||||
@ -11223,9 +11232,10 @@ snapshots:
|
||||
uuid: 11.1.0
|
||||
yargs: 17.7.2
|
||||
optionalDependencies:
|
||||
better-sqlite3: 9.6.0
|
||||
better-sqlite3: 12.2.0
|
||||
ts-node: 10.9.2(@types/node@20.17.23)(typescript@5.8.2)
|
||||
transitivePeerDependencies:
|
||||
- babel-plugin-macros
|
||||
- supports-color
|
||||
|
||||
typescript@5.8.2: {}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user