fix: Improve continue button on org-add-team and validations [CAL-2015] (#10122)
* Improve continue button on team add and validations * Fix server validations for orgs create team * Remove unused prop form input * add comment for context * Fix duplicatedSlugs not working properly * Fix continue button disabled state, added more examples for team names * Fix initial state for inputValues on addTeamForm * Don't allow whitespaces only inputs on create teams * Use rhf instead of react useState --------- Co-authored-by: Leo Giovanetti <hello@leog.me>
This commit is contained in:
alannnc
co-authored by
Leo Giovanetti
Leo Giovanetti
parent
c26efcabe4
commit
dad4fd17fb
@@ -1942,5 +1942,12 @@
|
||||
"insights_user_filter": "User: {{userName}}",
|
||||
"insights_subtitle": "View booking insights across your events",
|
||||
"custom_plan": "Custom Plan",
|
||||
"org_team_names_example": "e.g. Marketing Team",
|
||||
"org_team_names_example_1": "e.g. Marketing Team",
|
||||
"org_team_names_example_2": "e.g. Sales Team",
|
||||
"org_team_names_example_3": "e.g. Design Team",
|
||||
"org_team_names_example_4": "e.g. Engineering Team",
|
||||
"org_team_names_example_5": "e.g. Data Analytics Team",
|
||||
"org_max_team_warnings": "You will be able to add more teams later on.",
|
||||
"ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
|
||||
}
|
||||
|
||||
@@ -1,40 +1,67 @@
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
import { useForm, useFieldArray } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Button, showToast, TextField } from "@calcom/ui";
|
||||
import { Plus, X } from "@calcom/ui/components/icon";
|
||||
import { Plus, X, ArrowRight } from "@calcom/ui/components/icon";
|
||||
|
||||
const querySchema = z.object({
|
||||
id: z.string().transform((val) => parseInt(val)),
|
||||
});
|
||||
|
||||
const schema = z.object({
|
||||
teams: z
|
||||
.array(
|
||||
z.object({
|
||||
name: z.string().min(2, "org_team_name_min_2_chars").trim(),
|
||||
})
|
||||
)
|
||||
.min(1, "At least one team is required"),
|
||||
});
|
||||
|
||||
export const AddNewTeamsForm = () => {
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const { id: orgId } = querySchema.parse(router.query);
|
||||
const [counter, setCounter] = useState(1);
|
||||
|
||||
const [inputValues, setInputValues] = useState<string[]>([""]);
|
||||
const { register, control, handleSubmit, formState, trigger, setValue, getValues } = useForm({
|
||||
defaultValues: { teams: [{ name: "" }] }, // Set initial values
|
||||
resolver: async (data) => {
|
||||
try {
|
||||
const validatedData = await schema.parseAsync(data);
|
||||
return { values: validatedData, errors: {} };
|
||||
} catch (error) {
|
||||
if (error instanceof z.ZodError) {
|
||||
return {
|
||||
values: {
|
||||
teams: [],
|
||||
},
|
||||
errors: error.formErrors.fieldErrors,
|
||||
};
|
||||
}
|
||||
return { values: {}, errors: { teams: { message: "Error validating input" } } };
|
||||
}
|
||||
},
|
||||
});
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: "teams",
|
||||
});
|
||||
|
||||
const handleCounterIncrease = () => {
|
||||
setCounter((prevCounter) => prevCounter + 1);
|
||||
setInputValues((prevInputValues) => [...prevInputValues, ""]);
|
||||
};
|
||||
|
||||
const handleInputChange = (index: number, value: string) => {
|
||||
const newInputValues = [...inputValues];
|
||||
newInputValues[index] = value;
|
||||
setInputValues(newInputValues);
|
||||
if (counter >= 0 && counter < 5) {
|
||||
setCounter((prevCounter) => prevCounter + 1);
|
||||
append({ name: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveInput = (index: number) => {
|
||||
const newInputValues = [...inputValues];
|
||||
newInputValues.splice(index, 1);
|
||||
setInputValues(newInputValues);
|
||||
remove(index);
|
||||
setCounter((prevCounter) => prevCounter - 1);
|
||||
};
|
||||
|
||||
@@ -42,6 +69,8 @@ export const AddNewTeamsForm = () => {
|
||||
async onSuccess(data) {
|
||||
if (data.duplicatedSlugs.length) {
|
||||
showToast(t("duplicated_slugs_warning", { slugs: data.duplicatedSlugs.join(", ") }), "warning");
|
||||
// Server will return array of duplicated slugs, so we need to wait for user to read the warning
|
||||
// before pushing to next page
|
||||
setTimeout(() => {
|
||||
router.push(`/event-types`);
|
||||
}, 3000);
|
||||
@@ -54,54 +83,69 @@ export const AddNewTeamsForm = () => {
|
||||
},
|
||||
});
|
||||
|
||||
const handleInputChange = (index: number, event: any) => {
|
||||
const { name, value } = event.target;
|
||||
setValue(`teams.${index}.name`, value);
|
||||
trigger(`teams.${index}.name`);
|
||||
};
|
||||
|
||||
const handleFormSubmit = () => {
|
||||
if (formState.isValid) {
|
||||
const fields = getValues("teams");
|
||||
createTeamsMutation.mutate({ orgId, teamNames: fields.map((field) => field.name) });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: counter }, (_, index) => (
|
||||
<div className="relative" key={index}>
|
||||
<TextField
|
||||
key={index}
|
||||
value={inputValues[index]}
|
||||
onChange={(e) => handleInputChange(index, e.target.value)}
|
||||
addOnClassname="bg-transparent p-0 border-l-0"
|
||||
addOnSuffix={
|
||||
index > 0 && (
|
||||
<Button
|
||||
color="minimal"
|
||||
className="group/remove mx-2 px-0 hover:bg-transparent"
|
||||
onClick={() => handleRemoveInput(index)}>
|
||||
<X className="bg-subtle text group-hover/remove:text-inverted group-hover/remove:bg-inverted h-5 w-5 rounded-full p-1" />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
StartIcon={Plus}
|
||||
color="secondary"
|
||||
disabled={createTeamsMutation.isLoading}
|
||||
onClick={handleCounterIncrease}>
|
||||
{t("add_a_team")}
|
||||
</Button>
|
||||
<Button
|
||||
EndIcon={ArrowRight}
|
||||
color="primary"
|
||||
className="mt-6 w-full justify-center"
|
||||
disabled={createTeamsMutation.isLoading}
|
||||
onClick={() => {
|
||||
if (inputValues.includes("")) {
|
||||
showToast(t("team_names_empty"), "error");
|
||||
} else {
|
||||
const duplicates = inputValues.filter((item, index) => inputValues.indexOf(item) !== index);
|
||||
if (duplicates.length) {
|
||||
showToast("team_names_repeated", "error");
|
||||
} else {
|
||||
createTeamsMutation.mutate({ orgId, teamNames: inputValues });
|
||||
}
|
||||
}
|
||||
}}>
|
||||
{t("continue")}
|
||||
</Button>
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
{fields.map((field, index) => (
|
||||
<div className={classNames("relative", index > 0 ? "mb-2" : "")} key={field.id}>
|
||||
<TextField
|
||||
key={field.id}
|
||||
{...register(`teams.${index}.name`)}
|
||||
label=""
|
||||
onChange={(e) => handleInputChange(index, e)}
|
||||
addOnClassname="bg-transparent p-0 border-l-0"
|
||||
className={index > 0 ? "mb-2" : ""}
|
||||
placeholder={t(`org_team_names_example_${index + 1}`) || t("org_team_names_example")}
|
||||
addOnSuffix={
|
||||
index > 0 && (
|
||||
<Button
|
||||
color="minimal"
|
||||
className="group/remove mx-2 px-0 hover:bg-transparent"
|
||||
onClick={() => handleRemoveInput(index)}
|
||||
aria-label="Remove Team">
|
||||
<X className="bg-subtle text group-hover/remove:text-inverted group-hover/remove:bg-inverted h-5 w-5 rounded-full p-1" />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
minLength={2}
|
||||
maxLength={63}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{counter === 5 && <p className="text-subtle my-2 text-sm">{t("org_max_team_warnings")}</p>}
|
||||
{counter < 5 && (
|
||||
<Button
|
||||
StartIcon={Plus}
|
||||
color="secondary"
|
||||
disabled={createTeamsMutation.isLoading}
|
||||
onClick={handleCounterIncrease}
|
||||
aria-label={t("add_a_team")}
|
||||
className="my-1">
|
||||
{t("add_a_team")}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
EndIcon={ArrowRight}
|
||||
color="primary"
|
||||
className="mt-6 w-full justify-center"
|
||||
disabled={!formState.isValid || createTeamsMutation.isLoading || createTeamsMutation.isSuccess}
|
||||
onClick={handleFormSubmit}>
|
||||
{t("continue")}
|
||||
</Button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -16,31 +16,57 @@ type CreateTeamsOptions = {
|
||||
};
|
||||
|
||||
export const createTeamsHandler = async ({ ctx, input }: CreateTeamsOptions) => {
|
||||
// Get User From context
|
||||
const user = ctx.user;
|
||||
|
||||
if (!user) {
|
||||
throw new NoUserError();
|
||||
}
|
||||
|
||||
const { teamNames, orgId } = input;
|
||||
|
||||
if (orgId !== user.organizationId) {
|
||||
throw new NotAuthorizedError();
|
||||
}
|
||||
|
||||
// Validate user membership role
|
||||
const userMembershipRole = await prisma.membership.findFirst({
|
||||
where: {
|
||||
userId: user.id,
|
||||
teamId: orgId,
|
||||
role: {
|
||||
in: ["OWNER", "ADMIN"],
|
||||
},
|
||||
// @TODO: not sure if this already setup earlier
|
||||
// accepted: true,
|
||||
},
|
||||
select: {
|
||||
role: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!userMembershipRole) {
|
||||
throw new NotAuthorizedError();
|
||||
}
|
||||
|
||||
const organization = await prisma.team.findFirst({
|
||||
where: { id: orgId },
|
||||
select: { slug: true, metadata: true },
|
||||
});
|
||||
const metadata = teamMetadataSchema.parse(organization?.metadata);
|
||||
|
||||
if (!metadata?.requestedSlug && !organization?.slug)
|
||||
throw new TRPCError({ code: "BAD_REQUEST", message: "no_organization_slug" });
|
||||
if (!organization) throw new NoOrganizationError();
|
||||
|
||||
const userMembership = await prisma.membership.findFirst({
|
||||
where: {
|
||||
userId: ctx.user.id,
|
||||
teamId: orgId,
|
||||
},
|
||||
select: {
|
||||
userId: true,
|
||||
role: true,
|
||||
},
|
||||
});
|
||||
const parseTeams = teamMetadataSchema.safeParse(organization?.metadata);
|
||||
|
||||
// TODO test this check works
|
||||
if (!userMembership || userMembership.role !== MembershipRole.OWNER)
|
||||
throw new TRPCError({ code: "BAD_REQUEST", message: "not_authorized" });
|
||||
if (!parseTeams.success) {
|
||||
throw new InvalidMetadataError();
|
||||
}
|
||||
|
||||
const metadata = parseTeams.success ? parseTeams.data : undefined;
|
||||
|
||||
if (!metadata?.requestedSlug && !organization?.slug) {
|
||||
throw new NoOrganizationSlugError();
|
||||
}
|
||||
|
||||
const [teamSlugs, userSlugs] = await prisma.$transaction([
|
||||
prisma.team.findMany({ where: { parentId: orgId }, select: { slug: true } }),
|
||||
@@ -51,11 +77,16 @@ export const createTeamsHandler = async ({ ctx, input }: CreateTeamsOptions) =>
|
||||
.flatMap((ts) => ts.slug ?? [])
|
||||
.concat(userSlugs.flatMap((us) => us.username ?? []));
|
||||
|
||||
const duplicatedSlugs = existingSlugs.filter((slug) => teamNames.includes(slug));
|
||||
const duplicatedSlugs = existingSlugs.filter((slug) =>
|
||||
teamNames.map((item) => slugify(item)).includes(slug)
|
||||
);
|
||||
|
||||
if (duplicatedSlugs.length === teamNames.length) {
|
||||
return { duplicatedSlugs };
|
||||
}
|
||||
await prisma.$transaction(
|
||||
teamNames.flatMap((name) => {
|
||||
if (!duplicatedSlugs.includes(name)) {
|
||||
if (!duplicatedSlugs.includes(slugify(name))) {
|
||||
return prisma.team.create({
|
||||
data: {
|
||||
name,
|
||||
@@ -74,3 +105,33 @@ export const createTeamsHandler = async ({ ctx, input }: CreateTeamsOptions) =>
|
||||
|
||||
return { duplicatedSlugs };
|
||||
};
|
||||
|
||||
class NoUserError extends TRPCError {
|
||||
constructor() {
|
||||
super({ code: "BAD_REQUEST", message: "no_user" });
|
||||
}
|
||||
}
|
||||
|
||||
class NotAuthorizedError extends TRPCError {
|
||||
constructor() {
|
||||
super({ code: "FORBIDDEN", message: "not_authorized" });
|
||||
}
|
||||
}
|
||||
|
||||
class InvalidMetadataError extends TRPCError {
|
||||
constructor() {
|
||||
super({ code: "BAD_REQUEST", message: "invalid_organization_metadata" });
|
||||
}
|
||||
}
|
||||
|
||||
class NoOrganizationError extends TRPCError {
|
||||
constructor() {
|
||||
super({ code: "BAD_REQUEST", message: "no_organization_found" });
|
||||
}
|
||||
}
|
||||
|
||||
class NoOrganizationSlugError extends TRPCError {
|
||||
constructor() {
|
||||
super({ code: "BAD_REQUEST", message: "no_organization_slug" });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ import { Eye, EyeOff, X, Search } from "../../icon";
|
||||
import { HintsOrErrors } from "./HintOrErrors";
|
||||
import { Label } from "./Label";
|
||||
|
||||
type InputProps = JSX.IntrinsicElements["input"] & { isFullWidth?: boolean; isStandaloneField?: boolean };
|
||||
type InputProps = JSX.IntrinsicElements["input"] & { isFullWidth?: boolean };
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
||||
{ isFullWidth = true, ...props },
|
||||
@@ -140,7 +140,6 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
isFullWidth={inputIsFullWidth}
|
||||
isStandaloneField={false}
|
||||
className={classNames(
|
||||
className,
|
||||
"disabled:bg-subtle disabled:hover:border-subtle disabled:cursor-not-allowed",
|
||||
|
||||
Reference in New Issue
Block a user