fix: Limit API key name length using constant (#22703)

* fix: added maximum length limit to api key name

* fix: use i18n

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>

apps/web/public/static/locales/en/common.json

@@ -3591,5 +3591,6 @@
   "consider_consolidating_multi_team_org": "Consider setting up an organization to unify billing, admin tools, and analytics across your teams.",
   "search_variables": "Search variables",
   "no_variables_found": "No variables found",
+  "api_key_name_too_long": "Name must not exceed {{max}} characters",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx

@@ -5,6 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 import dayjs from "@calcom/dayjs";
 import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
+import { API_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { IS_CALCOM } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -57,6 +58,18 @@ export default function ApiKeyDialogForm({
       neverExpires: defaultValues?.neverExpires || false,
       expiresAt: defaultValues?.expiresAt || dayjs().add(30, "day").toDate(),
     },
+    mode: "onChange",
+    criteriaMode: "all",
+    resolver: (values) => {
+      const errors: { note?: { type: string; message: string } } = {};
+      if (values.note && values.note.length > API_NAME_LENGTH_MAX_LIMIT) {
+        errors.note = {
+          type: "maxLength",
+          message: t("api_key_name_too_long", { max: API_NAME_LENGTH_MAX_LIMIT }),
+        };
+      }
+      return { values, errors };
+    },
   });
   const watchNeverExpires = form.watch("neverExpires");
 
@@ -182,7 +195,7 @@ export default function ApiKeyDialogForm({
           {!defaultValues && (
             <div className="flex flex-col">
               <div className="flex justify-between py-2">
-                <span className="text-default block text-sm font-medium">{t("expire_date")}</span>
+                <span className="text-default flex items-center text-sm font-medium">{t("expire_date")}</span>
                 <Controller
                   name="neverExpires"
                   control={form.control}

packages/lib/constants.ts

@@ -121,6 +121,7 @@ export const IS_TEAM_BILLING_ENABLED_CLIENT =
   !!process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY && HOSTED_CAL_FEATURES;
 
 export const FULL_NAME_LENGTH_MAX_LIMIT = 50;
+export const API_NAME_LENGTH_MAX_LIMIT = 80;
 export const MINUTES_TO_BOOK = process.env.NEXT_PUBLIC_MINUTES_TO_BOOK || "5";
 export const ENABLE_PROFILE_SWITCHER = process.env.NEXT_PUBLIC_ENABLE_PROFILE_SWITCHER === "1";
 // Needed for orgs