fix: api date picker to drop down (#9810)

* fix: api date picker to drop down

* fix: api key , date picker to drop down

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

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

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

@@ -975,6 +975,7 @@
   "confirm_delete_api_key": "Revoke this API key",
   "revoke_api_key": "Revoke API key",
   "api_key_copied": "API key copied!",
+  "api_key_expires_on":"The API key will expire on",
   "delete_api_key_confirm_title": "Permanently remove this API key from your account?",
   "copy": "Copy",
   "expire_date": "Expiration date",
@@ -1829,6 +1830,8 @@
   "one_day": "1 day",
   "seven_days": "7 days",
   "thirty_days": "30 days",
+  "three_months": "3 months",
+  "one_year": "1 year",
   "team_invite_received": "You have been invited to join {{teamName}}",
   "currency_string": "{{amount, currency}}",
   "charge_card_dialog_body": "You are about to charge the attendee {{amount, currency}}. Are you sure you want to continue?",

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

@@ -6,7 +6,18 @@ import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, DatePicker, DialogFooter, Form, showToast, Switch, TextField, Tooltip } from "@calcom/ui";
+import {
+  Button,
+  DatePicker,
+  DialogFooter,
+  Form,
+  Select,
+  showToast,
+  Switch,
+  TextField,
+  Tooltip,
+  SelectField,
+} from "@calcom/ui";
 import { Clipboard } from "@calcom/ui/components/icon";
 
 export default function ApiKeyDialogForm({
@@ -29,8 +40,9 @@ export default function ApiKeyDialogForm({
       showToast(t("api_key_update_failed"), "error");
     },
   });
-
+  type Option = { value: Date | null | undefined; label: string };
   const [apiKey, setApiKey] = useState("");
+  const [expiryDate,setExpiryDate]=useState<Date|null|undefined>(()=>(defaultValues?.expiresAt || dayjs().add(30, "day").toDate()))
   const [successfulNewApiKeyModal, setSuccessfulNewApiKeyModal] = useState(false);
   const [apiKeyDetails, setApiKeyDetails] = useState({
     expiresAt: null as Date | null,
@@ -42,11 +54,30 @@ export default function ApiKeyDialogForm({
     defaultValues: {
       note: defaultValues?.note || "",
       neverExpires: defaultValues?.neverExpires || false,
-      expiresAt: defaultValues?.expiresAt || dayjs().add(1, "month").toDate(),
+      expiresAt: defaultValues?.expiresAt || dayjs().add(30, "day").toDate(),
     },
   });
   const watchNeverExpires = form.watch("neverExpires");
 
+  let expiresAtOptions: Option[] = [
+    {
+      label: t("seven_days"),
+      value: dayjs().add(7, "day").toDate(),
+    },
+    {
+      label: t("thirty_days"),
+      value: dayjs().add(30, "day").toDate(),
+    },
+    {
+      label: t("three_months"),
+      value: dayjs().add(3, "month").toDate(),
+    },
+    {
+      label: t("one_year"),
+      value: dayjs().add(1, "year").toDate(),
+    },
+  ];
+
   return (
     <LicenseRequired>
       {successfulNewApiKeyModal ? (
@@ -150,15 +181,36 @@ export default function ApiKeyDialogForm({
               </div>
               <Controller
                 name="expiresAt"
-                render={({ field: { onChange, value } }) => (
-                  <DatePicker
-                    disabled={watchNeverExpires || !!defaultValues}
-                    minDate={new Date()}
-                    date={value}
-                    onDatesChange={onChange}
+                render={({ field: { onChange, value } }) => {
+                  const defaultValue = expiresAtOptions[1]
+                  
+                  return(
+                  <SelectField
+                    styles={{
+                      singleValue: (baseStyles) => ({
+                        ...baseStyles,
+                        fontSize: "14px",
+                      }),
+                      option: (baseStyles) => ({
+                        ...baseStyles,
+                        fontSize: "14px",
+                      }),
+                    }}
+                    isDisabled={watchNeverExpires || !!defaultValues}
+                    containerClassName="data-testid-field-type"
+                    options={expiresAtOptions}
+                    onChange={(option) => {
+                      if (!option) {
+                        return;
+                      }
+                      onChange(option.value);
+                      setExpiryDate(option.value)
+                    }}
+                    defaultValue={defaultValue}
                   />
-                )}
+                )}}
               />
+              <span className="text-subtle text-xs mt-2">{t("api_key_expires_on") }<span className="font-bold"> {dayjs(expiryDate).format('DD-MM-YYYY')}</span></span>
             </div>
           )}