Cleanup

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<typeof ReminderFormSchema>;
+export type TReminderFormSchema = z.infer<typeof ReminderFormSchema>;
 
-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 (
-    <Modal
-      isOpen={isOpen}
-      onOpenChange={(state) =>  !state && onClose()}
-    >
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
-
         title="Create secret reminder"
         // ? QUESTION: Should this specifically say its for secret rotation?
         // ? Or should we be call it something more generic?
         subTitle={
           <div>
-            Set up a reminder for when this secret should be rotated.
-            <div>
-                Format is in{" "}
-                {/* eslint-disable-next-line react/jsx-no-target-blank */}
-                <a target='_blank' href="https://crontab.guru/every-month">
-                  <span className="text-primary-400 hover:text-primary-500 cursor-pointer">
-                    cron format.
-                  </span>
-                </a>
+            Set up a reminder for when this secret should be rotated. Everyone in the workspace will
+            be notified when the reminder is triggered.
+            <div className="mt-1">
+              {/* eslint-disable-next-line react/jsx-no-target-blank */}
+              <a target="_blank" href="https://crontab.guru/every-month">
+                <span className="cursor-pointer text-primary-400 hover:text-primary-500">
+                  Learn more about cron expressions
+                </span>
+              </a>
             </div>
           </div>
         }
@@ -65,15 +58,17 @@ export const CreateReminderForm = ({isOpen, onClose}: ReminderFormProps) => {
         <form onSubmit={handleSubmit(handleFormSubmit)}>
           <div className="space-y-4">
             <div>
-              <FormControl className="mb-0" label="How often" isError={Boolean(errors?.cron)} errorText={errors?.cron?.message}>
-                <Input
-                  {...register("cron")}
-                  placeholder="0 0 1 * *"
-                  />
+              <FormControl
+                className="mb-0"
+                label="How often"
+                isError={Boolean(errors?.cron)}
+                errorText={errors?.cron?.message}
+              >
+                <Input {...register("cron")} placeholder="0 0 1 * *" />
               </FormControl>
               {!!cronWatch && isValidCron(cronWatch) && (
-                <div className="text-xs opacity-60 mt-2 ml-1">{cronstrue.toString(cronWatch)}</div>
-                )}
+                <div className="mt-2 ml-1 text-xs opacity-60">{cronstrue.toString(cronWatch)}</div>
+              )}
             </div>
 
             <FormControl label="Note" className="mb-0">
@@ -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={<FontAwesomeIcon icon={faClock}/>}
+              leftIcon={<FontAwesomeIcon icon={faClock} />}
               type="submit"
             >
               Create reminder
             </Button>
             <Button
               key="layout-cancel-create-project"
-              onClick={() => onClose()}
+              onClick={() => onOpenChange(false)}
               variant="plain"
               colorSchema="secondary"
             >
@@ -111,4 +106,4 @@ export const CreateReminderForm = ({isOpen, onClose}: ReminderFormProps) => {
       </ModalContent>
     </Modal>
   );
-}
+};

frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx

@@ -188,12 +188,14 @@ export const SecretItem = memo(
       <>
         <CreateReminderForm
           isOpen={createReminderFormOpen}
-          onClose={(data) => {
+          onOpenChange={(isOpen, data) => {
+            setCreateReminderFormOpen.toggle();
+
             if (data) {
+              console.log(data);
               setValue("reminderCron", data.cron, { shouldDirty: true });
               setValue("reminderNote", data.note, { shouldDirty: true });
             }
-            setCreateReminderFormOpen.off();
           }}
         />