diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 5c97f37253..00eb2b2c10 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/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?", diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx index 24868148cb..58069f2da8 100644 --- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx +++ b/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(()=>(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 ( {successfulNewApiKeyModal ? ( @@ -150,15 +181,36 @@ export default function ApiKeyDialogForm({ ( - { + const defaultValue = expiresAtOptions[1] + + return( + ({ + ...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} /> - )} + )}} /> + {t("api_key_expires_on") } {dayjs(expiryDate).format('DD-MM-YYYY')} )}