diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx index 797651bc4..426e9d6e6 100644 --- a/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx +++ b/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx @@ -8,21 +8,19 @@ import { z } from "zod"; import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2"; -interface ReminderFormProps { - isOpen: boolean; - onClose: (data?: {cron: string, note?: string}) => void; -} - - const ReminderFormSchema = z.object({ note: z.string().optional(), - cron: z.string().refine(isValidCron, {message: "Invalid cron expression"}) + cron: z.string().refine(isValidCron, { message: "Invalid cron expression" }) }); -type TReminderFormSchema = z.infer; +export type TReminderFormSchema = z.infer; -export const CreateReminderForm = ({isOpen, onClose}: ReminderFormProps) => { +interface ReminderFormProps { + isOpen: boolean; + onOpenChange: (isOpen: boolean, data?: TReminderFormSchema) => void; +} +export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps) => { const { register, watch, @@ -32,32 +30,27 @@ export const CreateReminderForm = ({isOpen, onClose}: ReminderFormProps) => { const cronWatch = watch("cron"); - const handleFormSubmit = async (data: TReminderFormSchema) => { - return onClose(data); - } + onOpenChange(false, data); + }; return ( - !state && onClose()} - > + - Set up a reminder for when this secret should be rotated. -
- Format is in{" "} - {/* eslint-disable-next-line react/jsx-no-target-blank */} - - - cron format. - - + Set up a reminder for when this secret should be rotated. Everyone in the workspace will + be notified when the reminder is triggered. +
+ {/* eslint-disable-next-line react/jsx-no-target-blank */} + + + Learn more about cron expressions + +
} @@ -65,15 +58,17 @@ export const CreateReminderForm = ({isOpen, onClose}: ReminderFormProps) => {
- - + + {!!cronWatch && isValidCron(cronWatch) && ( -
{cronstrue.toString(cronWatch)}
- )} +
{cronstrue.toString(cronWatch)}
+ )}
@@ -81,7 +76,7 @@ export const CreateReminderForm = ({isOpen, onClose}: ReminderFormProps) => { placeholder="Remember to rotate the AWS secret every month." className="border border-mineshaft-600 text-sm" rows={8} - reSize='none' + reSize="none" cols={30} {...register("note")} /> @@ -93,14 +88,14 @@ export const CreateReminderForm = ({isOpen, onClose}: ReminderFormProps) => { isLoading={isSubmitting} key="layout-create-project-submit" className="mr-4" - leftIcon={} + leftIcon={} type="submit" > Create reminder