Skip to content

Commit f646008

Browse files
malinskibeniaminmalinskibeniamin
committed
frontend: WIP update create agent form validation
1 parent 1720c10 commit f646008

File tree

2 files changed

+306
-316
lines changed

2 files changed

+306
-316
lines changed

‎frontend/src/components/pages/agents/create/agent-create.tsx

+84-46
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
Button,
44
Flex,
55
FormControl,
6+
FormErrorMessage,
67
FormLabel,
78
HStack,
89
Heading,
@@ -38,14 +39,6 @@ import {
3839
normalizeSecretName,
3940
} from './secret-create-modal';
4041

41-
/**
42-
* Schema for agent form validation
43-
*/
44-
const agentFormSchema = z.object({
45-
name: z.string().min(1, 'Agent name is required'),
46-
description: z.string().min(1, 'Description is required'),
47-
});
48-
4942
/**
5043
* Finds all secret placeholders in a YAML string in the format ${secrets.SECRET_NAME} or ${SECRET_NAME}
5144
* @param yamlStr - The YAML string to parse
@@ -404,9 +397,8 @@ export const AgentCreatePage = () => {
404397
defaultValues: {
405398
name: 'Redpanda Knowledge',
406399
description: 'Can answer any questions about Redpanda based on the internal knowledge',
407-
},
408-
validators: {
409-
onChange: agentFormSchema,
400+
selectedConnector: 'fancy-agent',
401+
secretSelections: {},
410402
},
411403
onSubmit: async ({ value }) => {
412404
console.log('form value: ', value);
@@ -454,6 +446,7 @@ export const AgentCreatePage = () => {
454446
*/
455447
const handleConnectorSelect = (id: string): void => {
456448
setSelectedConnector(id);
449+
form.setFieldValue('selectedConnector', id);
457450
};
458451

459452
/**
@@ -476,6 +469,13 @@ export const AgentCreatePage = () => {
476469
[key]: secret,
477470
}));
478471

472+
// Update the form value for selected secrets
473+
const currentSecretSelections = form.getFieldValue('secretSelections') || {};
474+
form.setFieldValue('secretSelections', {
475+
...currentSecretSelections,
476+
[key]: secret?.id,
477+
});
478+
479479
// If this is a newly created secret, check if it's a match for auto-detection
480480
if (isNewlyCreated && secret?.id && isSecretMatch(secret.id, key)) {
481481
setAutoDetectedSecrets((prev) => ({
@@ -530,8 +530,12 @@ export const AgentCreatePage = () => {
530530
<form.Field
531531
name="name"
532532
validators={{
533-
onChange: agentFormSchema.shape.name,
534-
onBlur: agentFormSchema.shape.name,
533+
onChange: (value) => {
534+
if (!value || value.length === 0) {
535+
return 'Agent name is required';
536+
}
537+
return undefined;
538+
},
535539
}}
536540
>
537541
{(field) => (
@@ -550,15 +554,22 @@ export const AgentCreatePage = () => {
550554
height="34px"
551555
fontSize="14px"
552556
/>
557+
{field.state.meta.errors?.length > 0 && (
558+
<FormErrorMessage>{String(field.state.meta.errors[0])}</FormErrorMessage>
559+
)}
553560
</FormControl>
554561
)}
555562
</form.Field>
556563

557564
<form.Field
558565
name="description"
559566
validators={{
560-
onChange: agentFormSchema.shape.description,
561-
onBlur: agentFormSchema.shape.description,
567+
onChange: (value) => {
568+
if (!value || value.length === 0) {
569+
return 'Description is required';
570+
}
571+
return undefined;
572+
},
562573
}}
563574
>
564575
{(field) => (
@@ -577,6 +588,9 @@ export const AgentCreatePage = () => {
577588
height="34px"
578589
fontSize="14px"
579590
/>
591+
{field.state.meta.errors?.length > 0 && (
592+
<FormErrorMessage>{String(field.state.meta.errors[0])}</FormErrorMessage>
593+
)}
580594
</FormControl>
581595
)}
582596
</form.Field>
@@ -589,37 +603,59 @@ export const AgentCreatePage = () => {
589603
Agent
590604
</Heading>
591605

592-
<Flex flexWrap="wrap" gap={5} mb={6}>
593-
<AgentTemplateCard
594-
id="fancy-agent"
595-
title="New message received"
596-
subtitle="Fancy Agent Name"
597-
description="This is a description this could be as long as three lines but then it keeps going until it gets truncate..."
598-
icon={<Icon as={MdChat} boxSize={6} />}
599-
isSelected={selectedConnector === 'fancy-agent'}
600-
onClick={handleConnectorSelect}
601-
/>
602-
<AgentTemplateCard
603-
id="rest-api"
604-
title="New HTTP request"
605-
subtitle="REST API"
606-
description="This is a description this could be as long as three lines but then it keeps going until it gets truncate..."
607-
icon={<Icon as={MdNewspaper} boxSize={6} />}
608-
isSelected={selectedConnector === 'rest-api'}
609-
isDisabled
610-
onClick={handleConnectorSelect}
611-
/>
612-
<AgentTemplateCard
613-
id="slack-bot"
614-
title="New event in slack"
615-
subtitle="Slack Bot"
616-
description="This is a description this could be as long as three lines but then it keeps going until it gets truncate..."
617-
icon={<Icon as={FaSlack} boxSize={6} />}
618-
isSelected={selectedConnector === 'slack-bot'}
619-
isDisabled
620-
onClick={handleConnectorSelect}
621-
/>
622-
</Flex>
606+
<form.Field
607+
name="selectedConnector"
608+
validators={{
609+
onChange: (value) => {
610+
if (!value || value.length === 0) {
611+
return 'You must select a connector';
612+
}
613+
return undefined;
614+
},
615+
}}
616+
>
617+
{(field) => (
618+
<FormControl isInvalid={!!field.state.meta.errors?.length}>
619+
<Flex flexWrap="wrap" gap={5} mb={6}>
620+
<AgentTemplateCard
621+
id="fancy-agent"
622+
title="New message received"
623+
subtitle="Fancy Agent Name"
624+
description="This is a description this could be as long as three lines but then it keeps going until it gets truncate..."
625+
icon={<Icon as={MdChat} boxSize={6} />}
626+
isSelected={selectedConnector === 'fancy-agent'}
627+
onClick={(id) => {
628+
handleConnectorSelect(id);
629+
field.handleChange(id);
630+
}}
631+
/>
632+
<AgentTemplateCard
633+
id="rest-api"
634+
title="New HTTP request"
635+
subtitle="REST API"
636+
description="This is a description this could be as long as three lines but then it keeps going until it gets truncate..."
637+
icon={<Icon as={MdNewspaper} boxSize={6} />}
638+
isSelected={selectedConnector === 'rest-api'}
639+
isDisabled
640+
onClick={handleConnectorSelect}
641+
/>
642+
<AgentTemplateCard
643+
id="slack-bot"
644+
title="New event in slack"
645+
subtitle="Slack Bot"
646+
description="This is a description this could be as long as three lines but then it keeps going until it gets truncate..."
647+
icon={<Icon as={FaSlack} boxSize={6} />}
648+
isSelected={selectedConnector === 'slack-bot'}
649+
isDisabled
650+
onClick={handleConnectorSelect}
651+
/>
652+
</Flex>
653+
{field.state.meta.errors?.length > 0 && (
654+
<FormErrorMessage>{String(field.state.meta.errors[0])}</FormErrorMessage>
655+
)}
656+
</FormControl>
657+
)}
658+
</form.Field>
623659
</Box>
624660

625661
{/* Configurations Section */}
@@ -671,6 +707,8 @@ export const AgentCreatePage = () => {
671707
onChange={(val) => {
672708
if (val && isSingleValue(val) && val.value) {
673709
handleSecretSelect(placeholder.name, val.value, false);
710+
} else {
711+
handleSecretSelect(placeholder.name, undefined, false);
674712
}
675713
}}
676714
options={availableSecrets}

0 commit comments

Comments
 (0)