fix: remove validateSlug Query (#8015)

* fix: remove validateSlug Query

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

packages/features/ee/teams/components/CreateANewTeamForm.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -7,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Avatar, Button, Form, ImageUploader, TextField } from "@calcom/ui";
+import { Avatar, Button, Form, ImageUploader, TextField, Alert } from "@calcom/ui";
 import { FiArrowRight } from "@calcom/ui/components/icon";
 
 import type { NewTeamFormValues } from "../lib/types";
@@ -21,6 +22,7 @@ export const CreateANewTeamForm = () => {
   const router = useRouter();
   const telemetry = useTelemetry();
   const returnToParsed = querySchema.safeParse(router.query);
+  const [serverErrorMessage, setServerErrorMessage] = useState<string | null>(null);
 
   const returnToParam =
     (returnToParsed.success ? getSafeRedirectUrl(returnToParsed.data.returnTo) : "/settings/teams") ||
@@ -33,29 +35,32 @@ export const CreateANewTeamForm = () => {
       telemetry.event(telemetryEventTypes.team_created);
       router.push(`/settings/teams/${data.id}/onboard-members`);
     },
+    onError: (err) => {
+      if (err.message === "team_url_taken") {
+        newTeamFormMethods.setError("slug", { type: "custom", message: t("team_url_taken") });
+      } else {
+        setServerErrorMessage(err.message);
+      }
+    },
   });
 
-  const validateTeamSlugQuery = trpc.viewer.teams.validateTeamSlug.useQuery(
-    { slug: newTeamFormMethods.watch("slug") },
-    {
-      enabled: false,
-      refetchOnWindowFocus: false,
-    }
-  );
-
-  const validateTeamSlug = async () => {
-    await validateTeamSlugQuery.refetch();
-    if (validateTeamSlugQuery.isFetched) return validateTeamSlugQuery.data || t("team_url_taken");
-  };
-
   return (
     <>
       <Form
         form={newTeamFormMethods}
         handleSubmit={(v) => {
-          if (!createTeamMutation.isLoading) createTeamMutation.mutate(v);
+          if (!createTeamMutation.isLoading) {
+            setServerErrorMessage(null);
+            createTeamMutation.mutate(v);
+          }
         }}>
         <div className="mb-8">
+          {serverErrorMessage && (
+            <div className="mb-4">
+              <Alert severity="error" message={serverErrorMessage} />
+            </div>
+          )}
+
           <Controller
             name="name"
             control={newTeamFormMethods.control}
@@ -75,7 +80,6 @@ export const CreateANewTeamForm = () => {
                     if (newTeamFormMethods.formState.touchedFields["slug"] === undefined) {
                       newTeamFormMethods.setValue("slug", slugify(e?.target.value));
                     }
-                    createTeamMutation.reset();
                   }}
                   autoComplete="off"
                 />
@@ -88,7 +92,7 @@ export const CreateANewTeamForm = () => {
           <Controller
             name="slug"
             control={newTeamFormMethods.control}
-            rules={{ required: t("team_url_required"), validate: async () => await validateTeamSlug() }}
+            rules={{ required: t("team_url_required") }}
             render={({ field: { value } }) => (
               <TextField
                 className="mt-2"
@@ -103,7 +107,7 @@ export const CreateANewTeamForm = () => {
                   newTeamFormMethods.setValue("slug", slugify(e?.target.value), {
                     shouldTouch: true,
                   });
-                  createTeamMutation.reset();
+                  newTeamFormMethods.clearErrors("slug");
                 }}
               />
             )}
@@ -143,11 +147,7 @@ export const CreateANewTeamForm = () => {
             {t("cancel")}
           </Button>
           <Button
-            disabled={
-              newTeamFormMethods.formState.isSubmitting ||
-              createTeamMutation.isError ||
-              createTeamMutation.isLoading
-            }
+            disabled={newTeamFormMethods.formState.isSubmitting || createTeamMutation.isLoading}
             color="primary"
             EndIcon={FiArrowRight}
             type="submit"
@@ -155,9 +155,6 @@ export const CreateANewTeamForm = () => {
             {t("continue")}
           </Button>
         </div>
-        {createTeamMutation.isError && (
-          <p className="mt-4 text-red-700">{createTeamMutation.error.message}</p>
-        )}
       </Form>
     </>
   );

packages/trpc/server/routers/viewer/teams.tsx

@@ -85,13 +85,13 @@ export const viewerTeamsRouter = router({
     .mutation(async ({ ctx, input }) => {
       const { slug, name, logo } = input;
 
-      const nameCollisions = await ctx.prisma.team.findFirst({
+      const slugCollisions = await ctx.prisma.team.findFirst({
         where: {
           slug: slug,
         },
       });
 
-      if (nameCollisions) throw new TRPCError({ code: "BAD_REQUEST", message: "Team name already taken." });
+      if (slugCollisions) throw new TRPCError({ code: "BAD_REQUEST", message: "team_url_taken" });
 
       // Ensure that the user is not duplicating a requested team
       const duplicatedRequest = await ctx.prisma.team.findFirst({
@@ -587,21 +587,6 @@ export const viewerTeamsRouter = router({
         },
       });
     }),
-  validateTeamSlug: authedProcedure
-    .input(
-      z.object({
-        slug: z.string(),
-      })
-    )
-    .query(async ({ ctx, input }) => {
-      const team = await ctx.prisma.team.findFirst({
-        where: {
-          slug: input.slug,
-        },
-      });
-
-      return !team;
-    }),
   publish: authedProcedure
     .input(
       z.object({