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

* [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

View file

@ -107,9 +107,8 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
setToast({
type: TOAST_TYPE.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({
eventName: STATE_CREATED,
payload: {
@ -173,15 +172,15 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
return (
<form
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">
<Popover className="relative flex h-full w-full items-center justify-center">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none ${
open ? "text-custom-text-100" : "text-custom-text-200"
className={`group inline-flex items-center text-base font-medium focus:outline-none ${open ? "text-custom-text-100" : "text-custom-text-200"
}`}
>
{watch("color") && watch("color") !== "" && (
@ -193,7 +192,6 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
/>
)}
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
@ -222,6 +220,10 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
name="name"
rules={{
required: true,
maxLength: {
value: 255,
message: "State name should not exceed 255 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
@ -301,6 +303,8 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
>
{data ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Creating" : "Create"}
</Button>
</div>
{errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
</form>
);
});