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

252
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,134 +172,139 @@ 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-shrink-0"> <div className="flex items-center gap-x-2 ">
<Popover className="relative flex h-full w-full items-center justify-center"> <div className="flex-shrink-0">
{({ open }) => ( <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 ${ <Popover.Button
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") !== "" && (
<span
className="h-5 w-5 rounded"
style={{
backgroundColor: watch("color") ?? "black",
}}
/>
)}
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
<Controller
name="color"
control={control}
render={({ field: { value, onChange } }) => (
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
)}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<Controller
control={control}
name="name"
rules={{
required: true,
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="name"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Name"
className="w-full"
autoFocus
/>
)}
/>
{data && (
<Controller
name="group"
control={control}
render={({ field: { value, onChange } }) => (
<Tooltip
tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
isMobile={isMobile}
>
<div>
<CustomSelect
disabled={groupLength === 1}
value={value}
onChange={onChange}
label={
Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
: "Select group"
}
input
> >
{Object.keys(GROUP_CHOICES).map((key) => ( {watch("color") && watch("color") !== "" && (
<CustomSelect.Option key={key} value={key}> <span
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]} className="h-5 w-5 rounded"
</CustomSelect.Option> style={{
))} backgroundColor: watch("color") ?? "black",
</CustomSelect> }}
</div> />
</Tooltip> )}
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
<Controller
name="color"
control={control}
render={({ field: { value, onChange } }) => (
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
)}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<Controller
control={control}
name="name"
rules={{
required: true,
maxLength: {
value: 255,
message: "State name should not exceed 255 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="name"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Name"
className="w-full"
autoFocus
/>
)} )}
/> />
)} {data && (
<Controller <Controller
control={control} name="group"
name="description" control={control}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange } }) => (
<Input <Tooltip
id="description" tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
name="description" isMobile={isMobile}
type="text" >
value={value} <div>
onChange={onChange} <CustomSelect
ref={ref} disabled={groupLength === 1}
hasError={Boolean(errors.description)} value={value}
placeholder="Description" onChange={onChange}
className="w-full" label={
Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
: "Select group"
}
input
>
{Object.keys(GROUP_CHOICES).map((key) => (
<CustomSelect.Option key={key} value={key}>
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
</CustomSelect.Option>
))}
</CustomSelect>
</div>
</Tooltip>
)}
/> />
)} )}
/> <Controller
<Button variant="neutral-primary" onClick={handleClose} size="sm"> control={control}
Cancel name="description"
</Button> render={({ field: { value, onChange, ref } }) => (
<Button <Input
variant="primary" id="description"
type="submit" name="description"
loading={isSubmitting} type="text"
onClick={() => { value={value}
setTrackElement("PROJECT_SETTINGS_STATE_PAGE"); onChange={onChange}
}} ref={ref}
size="sm" hasError={Boolean(errors.description)}
> placeholder="Description"
{data ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Creating" : "Create"} className="w-full"
</Button> />
)}
/>
<Button variant="neutral-primary" onClick={handleClose} size="sm">
Cancel
</Button>
<Button
variant="primary"
type="submit"
loading={isSubmitting}
onClick={() => {
setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
}}
size="sm"
>
{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> </form>
); );
}); });