fix: edit team page input validation added

apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx

@@ -5,18 +5,27 @@ import { useTeamMutation } from "@/lib/teams/mutateTeams";
 import { useTeam } from "@/lib/teams/teams";
 import { Button, ErrorComponent, Input, Label } from "@formbricks/ui";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
 
 export default function EditTeamName({ environmentId }) {
   const { team, isLoadingTeam, isErrorTeam, mutateTeam } = useTeam(environmentId);
-  const { register, handleSubmit } = useForm();
+  const { register, control, handleSubmit, setValue } = useForm();
   const [teamId, setTeamId] = useState("");
 
+  const teamName = useWatch({
+    control,
+    name: "name",
+  });
+  const isTeamNameInputEmpty = !teamName?.trim();
+  const currentTeamName = teamName?.trim().toLowerCase() ?? "";
+  const previousTeamName = team?.name?.trim().toLowerCase() ?? "";
+
   useEffect(() => {
     if (team && team.id !== "") {
       setTeamId(team.id);
     }
+    setValue("name", team?.name ?? "");
   }, [team]);
 
   const { isMutatingTeam, triggerTeamMutate } = useTeamMutation(teamId);
@@ -32,6 +41,12 @@ export default function EditTeamName({ environmentId }) {
     <form
       className="w-full max-w-sm items-center"
       onSubmit={handleSubmit((data) => {
+        if (isTeamNameInputEmpty) {
+          return toast.error("Team name should not be empty");
+        }
+        if (currentTeamName === previousTeamName) {
+          return toast.error("Please change team name to update");
+        }
         triggerTeamMutate({ ...data })
           .catch((error) => {
             toast.error(`Error: ${error.message}`);
@@ -42,9 +57,20 @@ export default function EditTeamName({ environmentId }) {
           });
       })}>
       <Label htmlFor="teamname">Team Name</Label>
-      <Input type="text" id="teamname" defaultValue={team.name} {...register("name")} />
+      <Input
+        type="text"
+        id="teamname"
+        defaultValue={team?.name ?? ""}
+        {...register("name")}
+        className={isTeamNameInputEmpty ? "border-red-300 focus:border-red-300" : ""}
+      />
 
-      <Button type="submit" className="mt-4" variant="darkCTA" loading={isMutatingTeam}>
+      <Button
+        type="submit"
+        className="mt-4"
+        variant="darkCTA"
+        loading={isMutatingTeam}
+        disabled={isTeamNameInputEmpty || currentTeamName === previousTeamName}>
         Update
       </Button>
     </form>