11'use client' ;
22
33import { ConnectIntegrationDialog } from '@/components/integrations/ConnectIntegrationDialog' ;
4- import { useApi } from '@/hooks/use-api' ;
54import { Card , CardContent , CardDescription , CardHeader , CardTitle } from '@comp/ui/card' ;
65import { Input } from '@comp/ui/input' ;
6+ import { Label } from '@comp/ui/label' ;
77import MultipleSelector from '@comp/ui/multiple-selector' ;
88import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from '@comp/ui/select' ;
9- import {
10- Button ,
11- Label ,
12- PageHeader ,
13- PageLayout ,
14- Spinner ,
15- } from '@trycompai/design-system' ;
9+ import { Button , PageHeader , PageLayout , Spinner } from '@trycompai/design-system' ;
1610import { ArrowLeft , CheckmarkFilled , Launch } from '@trycompai/design-system/icons' ;
1711import { useEffect , useState } from 'react' ;
1812import { toast } from 'sonner' ;
13+ import { connectCloudAction } from '../actions/connect-cloud' ;
14+ import { validateAwsCredentialsAction } from '../actions/validate-aws-credentials' ;
1915
2016type CloudProvider = 'aws' | 'gcp' | 'azure' | null ;
2117type Step = 'choose' | 'connect' | 'validate-aws' | 'success' ;
@@ -146,27 +142,33 @@ export function EmptyState({
146142 onConnected,
147143 initialProvider = null ,
148144} : EmptyStateProps ) {
149- const api = useApi ( ) ;
150- const initialIsAws = initialProvider === 'aws' ;
151- const [ step , setStep ] = useState < Step > ( initialProvider && ! initialIsAws ? 'connect' : 'choose' ) ;
145+ const initialUsesDialog = initialProvider === 'aws' || initialProvider === 'azure' ;
146+ const [ step , setStep ] = useState < Step > (
147+ initialProvider && ! initialUsesDialog ? 'connect' : 'choose' ,
148+ ) ;
152149 const [ selectedProvider , setSelectedProvider ] = useState < CloudProvider > (
153- initialProvider && ! initialIsAws ? initialProvider : null ,
150+ initialProvider && ! initialUsesDialog ? initialProvider : null ,
151+ ) ;
152+ const [ showConnectDialog , setShowConnectDialog ] = useState ( initialUsesDialog ) ;
153+ const [ connectDialogProvider , setConnectDialogProvider ] = useState < 'aws' | 'azure' > (
154+ initialProvider === 'azure' ? 'azure' : 'aws' ,
154155 ) ;
155- const [ showConnectDialog , setShowConnectDialog ] = useState ( initialIsAws ) ;
156156 const [ credentials , setCredentials ] = useState < Record < string , string | string [ ] > > ( { } ) ;
157157 const [ errors , setErrors ] = useState < Record < string , string > > ( { } ) ;
158158 const [ isConnecting , setIsConnecting ] = useState ( false ) ;
159159 const [ awsRegions , setAwsRegions ] = useState < { value : string ; label : string } [ ] > ( [ ] ) ;
160160 const [ awsAccountId , setAwsAccountId ] = useState < string > ( '' ) ;
161161
162162 useEffect ( ( ) => {
163- if ( initialProvider === 'aws' ) {
163+ if ( initialProvider === 'aws' || initialProvider === 'azure' ) {
164+ setConnectDialogProvider ( initialProvider ) ;
164165 setShowConnectDialog ( true ) ;
165166 }
166167 } , [ initialProvider ] ) ;
167168
168169 const handleProviderSelect = ( providerId : CloudProvider ) => {
169- if ( providerId === 'aws' ) {
170+ if ( providerId === 'aws' || providerId === 'azure' ) {
171+ setConnectDialogProvider ( providerId ) ;
170172 setShowConnectDialog ( true ) ;
171173 return ;
172174 }
@@ -235,11 +237,7 @@ export function EmptyState({
235237
236238 try {
237239 setIsConnecting ( true ) ;
238- const result = await api . post < {
239- success : boolean ;
240- accountId ?: string ;
241- regions ?: { value : string ; label : string } [ ] ;
242- } > ( '/v1/cloud-security/legacy/validate-aws' , {
240+ const result = await validateAwsCredentialsAction ( {
243241 accessKeyId : credentials . access_key_id ,
244242 secretAccessKey : credentials . secret_access_key ,
245243 } ) ;
@@ -255,7 +253,7 @@ export function EmptyState({
255253 setStep ( 'validate-aws' ) ;
256254 toast . success ( 'Credentials validated! Now select your regions.' ) ;
257255 } else {
258- toast . error ( result ?. error || 'Failed to validate credentials' ) ;
256+ toast . error ( result ?. data ?. error || 'Failed to validate credentials' ) ;
259257 }
260258 } catch ( error ) {
261259 console . error ( 'Validation error:' , error ) ;
@@ -280,25 +278,26 @@ export function EmptyState({
280278
281279 try {
282280 setIsConnecting ( true ) ;
283- const result = await api . post < {
284- success : boolean ;
285- integrationId ?: string ;
286- error ?: string ;
287- } > ( '/v1/cloud-security/legacy/connect' , {
288- provider : selectedProvider ,
281+ const result = await connectCloudAction ( {
282+ cloudProvider : selectedProvider ,
289283 credentials,
290284 } ) ;
291285
292286 if ( result ?. data ?. success ) {
293287 setStep ( 'success' ) ;
294- onConnected ?.( ) ;
288+ if ( result . data ?. trigger ) {
289+ onConnected ?.( result . data . trigger ) ;
290+ }
291+ if ( result . data ?. runErrors && result . data . runErrors . length > 0 ) {
292+ toast . error ( result . data . runErrors [ 0 ] || 'Initial scan reported an issue' ) ;
293+ }
295294 if ( onBack ) {
296295 setTimeout ( ( ) => {
297296 onBack ( ) ;
298297 } , 2000 ) ;
299298 }
300299 } else {
301- toast . error ( result ?. error || 'Failed to connect cloud provider' ) ;
300+ toast . error ( result ?. data ?. error || 'Failed to connect cloud provider' ) ;
302301 }
303302 } catch ( error ) {
304303 console . error ( 'Connection error:' , error ) ;
@@ -347,7 +346,7 @@ export function EmptyState({
347346
348347 < CardContent className = "space-y-5" >
349348 < div className = "space-y-2" >
350- < Label htmlFor = "region" >
349+ < Label htmlFor = "region" className = "text-sm font-medium" >
351350 Regions
352351 </ Label >
353352 < MultipleSelector
@@ -422,9 +421,15 @@ export function EmptyState({
422421 < ConnectIntegrationDialog
423422 open = { showConnectDialog }
424423 onOpenChange = { ( open ) => setShowConnectDialog ( open ) }
425- integrationId = "aws"
426- integrationName = "Amazon Web Services"
427- integrationLogoUrl = "https://img.logo.dev/aws.amazon.com?token=pk_AZatYxV5QDSfWpRDaBxzRQ"
424+ integrationId = { connectDialogProvider }
425+ integrationName = {
426+ connectDialogProvider === 'azure' ? 'Microsoft Azure' : 'Amazon Web Services'
427+ }
428+ integrationLogoUrl = {
429+ connectDialogProvider === 'azure'
430+ ? 'https://img.logo.dev/azure.microsoft.com?token=pk_AZatYxV5QDSfWpRDaBxzRQ'
431+ : 'https://img.logo.dev/aws.amazon.com?token=pk_AZatYxV5QDSfWpRDaBxzRQ'
432+ }
428433 onConnected = { ( ) => {
429434 setShowConnectDialog ( false ) ;
430435 onConnected ?.( ) ;
@@ -434,7 +439,8 @@ export function EmptyState({
434439
435440 < div className = "grid w-full gap-4 md:grid-cols-3" >
436441 { CLOUD_PROVIDERS . filter (
437- ( cp ) => cp . id === 'aws' || ! connectedProviders . includes ( cp . id ) ,
442+ ( cp ) =>
443+ cp . id === 'aws' || cp . id === 'azure' || ! connectedProviders . includes ( cp . id ) ,
438444 ) . map ( ( cloudProvider ) => (
439445 < Card
440446 key = { cloudProvider . id }
@@ -523,7 +529,7 @@ export function EmptyState({
523529
524530 return (
525531 < div key = { field . id } className = "space-y-2" >
526- < Label htmlFor = { field . id } >
532+ < Label htmlFor = { field . id } className = "text-sm font-medium" >
527533 { field . label }
528534 </ Label >
529535 { field . type === 'select' && options . length > 0 ? (
0 commit comments