binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1612] chore: add length validation for state name. (#4837)

Browse source 
* [WEB-1612] chore: add length validation for state name.

* style: update error message padding.
This commit is contained in:
Prateek Shourya 2024-06-17 17:03:26 +05:30 • committed by GitHub
parent e01e736ffe
commit 0dc0a2a8a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 128 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/core/components/states/create-update-state-inline.tsx
View file

@ -107,9 +107,8 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
setToast({ setToast({
type: TOAST_TYPE.ERROR, type: TOAST_TYPE.ERROR,
title: "Error!", title: "Error!",
message: "State could not be created. Please try again.", message: error.data.error ?? "State could not be created. Please try again.",
}); });
captureProjectStateEvent({ captureProjectStateEvent({
eventName: STATE_CREATED, eventName: STATE_CREATED,
payload: { payload: {
@ -173,15 +172,15 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
return ( return (
<form <form
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className="flex items-center gap-x-2 rounded-[10px] bg-custom-background-100 py-5" className="flex flex-col w-full rounded-[10px] bg-custom-background-100 py-5"
> >
<div className="flex items-center gap-x-2 ">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Popover className="relative flex h-full w-full items-center justify-center"> <Popover className="relative flex h-full w-full items-center justify-center">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none ${ className={`group inline-flex items-center text-base font-medium focus:outline-none ${open ? "text-custom-text-100" : "text-custom-text-200"
open ? "text-custom-text-100" : "text-custom-text-200"
}`} }`}
> >
{watch("color") && watch("color") !== "" && ( {watch("color") && watch("color") !== "" && (
@ -193,7 +192,6 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
/> />
)} )}
</Popover.Button> </Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
@ -222,6 +220,10 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
name="name" name="name"
rules={{ rules={{
required: true, required: true,
maxLength: {
value: 255,
message: "State name should not exceed 255 characters",
},
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<Input <Input
@ -301,6 +303,8 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
> >
{data ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Creating" : "Create"} {data ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Creating" : "Create"}
</Button> </Button>
</div>
{errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
</form> </form>
); );
}); });