cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI for configure deployment step

Browse Source
This commit is contained in:
IshaVenikar 2024-10-08 18:57:07 +05:30 committed by Nabarun
parent 1374a28fe6
commit 1dc8dcabb1
1 changed files with 77 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
packages/frontend/src/components/projects/create/Configure.tsx
View File

@ -75,14 +75,14 @@ const Configure = () => {
); );
data.option === 'Auction' data.option === 'Auction'
? navigate( ? navigate(
`/${orgSlug}/projects/create/success/${addProjectFromTemplate.id}`, `/${orgSlug}/projects/create/success/${addProjectFromTemplate.id}`,
{ {
state: { state: {
isAuction: true isAuction: true
} }
}) })
: navigate(`/${orgSlug}/projects/create/template/deploy?projectId=${addProjectFromTemplate.id}&templateId=${templateId}`); : navigate(`/${orgSlug}/projects/create/template/deploy?projectId=${addProjectFromTemplate.id}&templateId=${templateId}`);
} catch (error) { } catch (error) {
console.error('Error creating project:', error); console.error('Error creating project:', error);
toast({ toast({
@ -105,87 +105,96 @@ const Configure = () => {
<Heading as="h4" className="md:text-lg font-medium"> <Heading as="h4" className="md:text-lg font-medium">
Configure deployment Configure deployment
</Heading> </Heading>
<Heading as="h5" className="text-sm font-sans text-elements-low-em">
The app can be deployed by setting the deployer LRN for a single deployment or by creating a deployer auction for multiple deployments
</Heading>
</div> </div>
</div> </div>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col gap-4 lg:gap-7 w-full"> <div className="flex flex-col gap-4 lg:gap-7 w-full">
<div className="flex flex-col justify-start gap-3">
<span className="text-sm text-elements-high-em">Choose an option</span>
<Controller
name="option"
control={control}
render={({ field: { value, onChange } }) => (
<Select
value={{ value } as SelectOption}
onChange={(value) =>
onChange((value as SelectOption).value)
}
options={[
{ value: 'LRN', label: 'Set LRN' },
{ value: 'Auction', label: 'Create Auction' },
]}
/>
)}
/>
</div>
{selectedOption === 'LRN' && (
<div className="flex flex-col justify-start gap-3"> <div className="flex flex-col justify-start gap-3">
<span className="text-sm text-elements-high-em">Enter LRN</span>
<Controller <Controller
name="lrn" name="option"
control={control} control={control}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Input value={value} onChange={onChange} /> <Select
label='Configuration Options'
value={{ value: value || 'LRN', label: value === 'Auction' ? 'Create Auction' : 'Deployer LRN' } as SelectOption}
onChange={(value) =>
onChange((value as SelectOption).value)
}
options={[
{ value: 'LRN', label: 'Deployer LRN' },
{ value: 'Auction', label: 'Create Auction' },
]}
/>
)} )}
/> />
</div> </div>
)}
{selectedOption === 'Auction' && ( {selectedOption === 'LRN' && (
<>
<div className="flex flex-col justify-start gap-3"> <div className="flex flex-col justify-start gap-3">
<span className="text-sm text-elements-high-em">Num Providers</span> <Heading as="h5" className="text-sm font-sans text-elements-low-em">
The app will be deployed by the configured deployer
</Heading>
<span className="text-sm text-elements-high-em">Enter LRN for deployer</span>
<Controller <Controller
name="numProviders" name="lrn"
control={control} control={control}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} /> <Input value={value} onChange={onChange} />
)} )}
/> />
</div> </div>
<div className="flex flex-col justify-start gap-3"> )}
<span className="text-sm text-elements-high-em">Max Price</span>
<Controller
name="maxPrice"
control={control}
render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} />
)}
/>
</div>
</>
)}
<div> {selectedOption === 'Auction' && (
<Button <>
{...buttonSize} <div className="flex flex-col justify-start gap-3">
type="submit" <Heading as="h5" className="text-sm font-sans text-elements-low-em">
disabled={isLoading} Set the number of deployers and maximum price for each deployment
rightIcon={ </Heading>
isLoading ? ( <span className="text-sm text-elements-high-em">Number of Deployers</span>
<LoadingIcon className="animate-spin" /> <Controller
) : ( name="numProviders"
<ArrowRightCircleFilledIcon /> control={control}
) render={({ field: { value, onChange } }) => (
} <Input type="number" value={value} onChange={onChange} />
> )}
{isLoading? 'Deploying' : 'Deploy' } />
</Button> </div>
<div className="flex flex-col justify-start gap-3">
<span className="text-sm text-elements-high-em">Maximum Price (alnt)</span>
<Controller
name="maxPrice"
control={control}
render={({ field: { value, onChange } }) => (
<Input type="number" value={value} onChange={onChange} />
)}
/>
</div>
</>
)}
<div>
<Button
{...buttonSize}
type="submit"
disabled={isLoading}
rightIcon={
isLoading ? (
<LoadingIcon className="animate-spin" />
) : (
<ArrowRightCircleFilledIcon />
)
}
>
{isLoading ? 'Deploying' : 'Deploy'}
</Button>
</div>
</div> </div>
</div> </form>
</form>
</div> </div>
); );
}; };