[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:
parent
e01e736ffe
commit
0dc0a2a8a8
1 changed files with 128 additions and 124 deletions
|
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue