From c2bd259c1209c51e37328266ace54bcc92a592f7 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Thu, 15 Feb 2024 01:14:05 +0100
Subject: [PATCH] Added secret reminders to sidebar (and formatting)

---
 .../SecretListView/SecretDetaiSidebar.tsx     | 536 ++++++++++--------
 1 file changed, 297 insertions(+), 239 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index 1130c9d14..cf50e44f3 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -5,6 +5,7 @@ import {
   faCheckCircle,
   faCircle,
   faCircleDot,
+  faClock,
   faPlus,
   faTag
 } from "@fortawesome/free-solid-svg-icons";
@@ -33,9 +34,11 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { useToggle } from "@app/hooks";
 import { useGetSecretVersion } from "@app/hooks/api";
 import { DecryptedSecret, UserWsKeyPair, WsTag } from "@app/hooks/api/types";
 
+import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
 type Props = {
@@ -147,262 +150,317 @@ export const SecretDetailSidebar = ({
     await onSaveSecret(secret, { ...secret, ...data }, () => reset());
   };
 
+  const [createReminderFormOpen, setCreateReminderFormOpen] = useToggle(false);
+
+  const secretReminderRepeatDays = watch("reminderRepeatDays");
+  const secretReminderNote = watch("reminderNote");
+
   return (
-    <Drawer
-      onOpenChange={(state) => {
-        if (isOpen && isDirty) {
-          if (
-            // eslint-disable-next-line no-alert
-            window.confirm("You have edited the secret. Are you sure you want to reset the change?")
-          ) {
-            onToggle(false);
-            reset();
-          } else return;
-        }
-        onToggle(state);
-      }}
-      isOpen={isOpen}
-    >
-      <DrawerContent title="Secret">
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="h-full">
-          <div className="flex h-full flex-col">
-            <FormControl label="Key">
-              <Input isDisabled {...register("key")} />
-            </FormControl>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Edit}
-              a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-            >
-              {(isAllowed) => (
-                <Controller
-                  name="value"
-                  key="secret-value"
-                  control={control}
-                  render={({ field }) => (
-                    <FormControl label="Value">
-                      <SecretInput
-                        isReadOnly={isReadOnly}
-                        key="secret-value"
-                        isDisabled={isOverridden || !isAllowed}
-                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
-                        {...field}
-                        autoFocus={false}
-                      />
-                    </FormControl>
-                  )}
-                />
-              )}
-            </ProjectPermissionCan>
-            <div className="mb-2 border-b border-mineshaft-600 pb-4">
+    <>
+      <CreateReminderForm
+        repeatDays={secretReminderRepeatDays}
+        note={secretReminderNote}
+        isOpen={createReminderFormOpen}
+        onOpenChange={(_, data) => {
+          setCreateReminderFormOpen.toggle();
+
+          if (data) {
+            setValue("reminderRepeatDays", data.days, { shouldDirty: true });
+            setValue("reminderNote", data.note, { shouldDirty: true });
+          }
+        }}
+      />
+      <Drawer
+        onOpenChange={(state) => {
+          if (isOpen && isDirty) {
+            if (
+              // eslint-disable-next-line no-alert
+              window.confirm(
+                "You have edited the secret. Are you sure you want to reset the change?"
+              )
+            ) {
+              onToggle(false);
+              reset();
+            } else return;
+          }
+          onToggle(state);
+        }}
+        isOpen={isOpen}
+      >
+        <DrawerContent title="Secret">
+          <form onSubmit={handleSubmit(handleFormSubmit)} className="h-full">
+            <div className="flex h-full flex-col">
+              <FormControl label="Key">
+                <Input isDisabled {...register("key")} />
+              </FormControl>
               <ProjectPermissionCan
                 I={ProjectPermissionActions.Edit}
                 a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
               >
                 {(isAllowed) => (
-                  <Switch
-                    isDisabled={!isAllowed}
-                    id="personal-override"
-                    onCheckedChange={handleOverrideClick}
-                    isChecked={isOverridden}
-                  >
-                    Override with a personal value
-                  </Switch>
+                  <Controller
+                    name="value"
+                    key="secret-value"
+                    control={control}
+                    render={({ field }) => (
+                      <FormControl label="Value">
+                        <SecretInput
+                          isReadOnly={isReadOnly}
+                          key="secret-value"
+                          isDisabled={isOverridden || !isAllowed}
+                          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
+                          {...field}
+                          autoFocus={false}
+                        />
+                      </FormControl>
+                    )}
+                  />
                 )}
               </ProjectPermissionCan>
-            </div>
-            {isOverridden && (
-              <Controller
-                name="valueOverride"
-                control={control}
-                render={({ field }) => (
-                  <FormControl label="Value Override">
-                    <SecretInput
-                      isReadOnly={isReadOnly}
-                      containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
-                      {...field}
-                    />
-                  </FormControl>
-                )}
-              />
-            )}
-            <FormControl label="Tags" className="">
-              <div className="grid auto-cols-min grid-flow-col gap-2 overflow-hidden pt-2">
-                {fields.map(({ tagColor, id: formId, name, id }) => (
-                  <Tag
-                    className="flex w-min items-center space-x-2"
-                    key={formId}
-                    onClose={() => {
-                      if (cannotEditSecret) {
-                        createNotification({ type: "error", text: "Access denied" });
-                        return;
-                      }
-                      const tag = tags?.find(({ id: tagId }) => id === tagId);
-                      if (tag) handleTagSelect(tag);
-                    }}
-                  >
-                    <div
-                      className="h-3 w-3 rounded-full"
-                      style={{ backgroundColor: tagColor || "#bec2c8" }}
-                    />
-                    <div className="text-sm">{name}</div>
-                  </Tag>
-                ))}
-                <DropdownMenu>
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Edit}
-                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                  >
-                    {(isAllowed) => (
-                      <DropdownMenuTrigger asChild>
-                        <IconButton
-                          ariaLabel="add"
-                          variant="outline_bg"
-                          size="xs"
-                          className="rounded-md"
-                          isDisabled={!isAllowed}
-                        >
-                          <FontAwesomeIcon icon={faPlus} />
-                        </IconButton>
-                      </DropdownMenuTrigger>
-                    )}
-                  </ProjectPermissionCan>
-                  <DropdownMenuContent align="end" className="z-[100]">
-                    <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
-                    {tags.map((tag) => {
-                      const { id: tagId, name, color } = tag;
-
-                      const isSelected = selectedTagsGroupById?.[tagId];
-                      return (
-                        <DropdownMenuItem
-                          onClick={() => handleTagSelect(tag)}
-                          key={tagId}
-                          icon={isSelected && <FontAwesomeIcon icon={faCheckCircle} />}
-                          iconPos="right"
-                        >
-                          <div className="flex items-center">
-                            <div
-                              className="mr-2 h-2 w-2 rounded-full"
-                              style={{ background: color || "#bec2c8" }}
-                            />
-                            {name}
-                          </div>
-                        </DropdownMenuItem>
-                      );
-                    })}
-                    <ProjectPermissionCan
-                      I={ProjectPermissionActions.Create}
-                      a={ProjectPermissionSub.Tags}
-                    >
-                      {(isAllowed) => (
-                        <DropdownMenuItem asChild>
-                          <Button
-                            size="xs"
-                            className="w-full"
-                            colorSchema="primary"
-                            variant="outline_bg"
-                            leftIcon={<FontAwesomeIcon icon={faTag} />}
-                            onClick={onCreateTag}
-                            isDisabled={!isAllowed}
-                          >
-                            Create a tag
-                          </Button>
-                        </DropdownMenuItem>
-                      )}
-                    </ProjectPermissionCan>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </FormControl>
-            <FormControl label="Comments & Notes">
-              <TextArea
-                className="border border-mineshaft-600 text-sm"
-                {...register("comment")}
-                readOnly={isReadOnly}
-                rows={5}
-              />
-            </FormControl>
-            <div className="my-2 mb-6 border-b border-mineshaft-600 pb-4">
-              <Controller
-                control={control}
-                name="skipMultilineEncoding"
-                render={({ field: { value, onChange, onBlur } }) => (
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Edit}
-                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                  >
-                    {(isAllowed) => (
-                      <Switch
-                        id="skipmultiencoding-option"
-                        onCheckedChange={(isChecked) => onChange(!isChecked)}
-                        isChecked={!value}
-                        onBlur={onBlur}
-                        isDisabled={!isAllowed}
-                        className="items-center"
-                      >
-                        Enable multi line encoding
-                        <Tooltip
-                          content="Infisical encodes multiline secrets by escaping newlines and wrapping in quotes. To disable, enable this option"
-                          className="z-[100]"
-                        >
-                          <FontAwesomeIcon icon={faCircleQuestion} className="ml-1" size="sm" />
-                        </Tooltip>
-                      </Switch>
-                    )}
-                  </ProjectPermissionCan>
-                )}
-              />
-            </div>
-            <div className="dark mb-4 flex-grow text-sm text-bunker-300">
-              <div className="mb-2">Version History</div>
-              <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
-                {secretVersion?.map(({ createdAt, value, id }, i) => (
-                  <div key={id} className="flex flex-col space-y-1">
-                    <div className="flex items-center space-x-2">
-                      <div>
-                        <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
-                      </div>
-                      <div>{format(new Date(createdAt), "Pp")}</div>
-                    </div>
-                    <div className="ml-1.5 flex items-center space-x-2 border-l border-bunker-300 pl-4">
-                      <div className="self-start rounded-sm bg-primary-500/30 px-1">Value:</div>
-                      <div className="break-all font-mono">{value}</div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="flex flex-col space-y-4">
-              <div className="flex items-center space-x-4">
+              <div className="mb-2 border-b border-mineshaft-600 pb-4">
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Edit}
                   a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
                 >
                   {(isAllowed) => (
-                    <Button
-                      isFullWidth
-                      type="submit"
-                      isDisabled={isSubmitting || !isDirty || !isAllowed}
-                      isLoading={isSubmitting}
+                    <Switch
+                      isDisabled={!isAllowed}
+                      id="personal-override"
+                      onCheckedChange={handleOverrideClick}
+                      isChecked={isOverridden}
                     >
-                      Save Changes
-                    </Button>
-                  )}
-                </ProjectPermissionCan>
-                <ProjectPermissionCan
-                  I={ProjectPermissionActions.Delete}
-                  a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                >
-                  {(isAllowed) => (
-                    <Button colorSchema="danger" isDisabled={!isAllowed} onClick={onDeleteSecret}>
-                      Delete
-                    </Button>
+                      Override with a personal value
+                    </Switch>
                   )}
                 </ProjectPermissionCan>
               </div>
+              {isOverridden && (
+                <Controller
+                  name="valueOverride"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControl label="Value Override">
+                      <SecretInput
+                        isReadOnly={isReadOnly}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
+                        {...field}
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
+              <FormControl label="Tags" className="">
+                <div className="grid auto-cols-min grid-flow-col gap-2 overflow-hidden pt-2">
+                  {fields.map(({ tagColor, id: formId, name, id }) => (
+                    <Tag
+                      className="flex w-min items-center space-x-2"
+                      key={formId}
+                      onClose={() => {
+                        if (cannotEditSecret) {
+                          createNotification({ type: "error", text: "Access denied" });
+                          return;
+                        }
+                        const tag = tags?.find(({ id: tagId }) => id === tagId);
+                        if (tag) handleTagSelect(tag);
+                      }}
+                    >
+                      <div
+                        className="h-3 w-3 rounded-full"
+                        style={{ backgroundColor: tagColor || "#bec2c8" }}
+                      />
+                      <div className="text-sm">{name}</div>
+                    </Tag>
+                  ))}
+                  <DropdownMenu>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuTrigger asChild>
+                          <IconButton
+                            ariaLabel="add"
+                            variant="outline_bg"
+                            size="xs"
+                            className="rounded-md"
+                            isDisabled={!isAllowed}
+                          >
+                            <FontAwesomeIcon icon={faPlus} />
+                          </IconButton>
+                        </DropdownMenuTrigger>
+                      )}
+                    </ProjectPermissionCan>
+                    <DropdownMenuContent align="end" className="z-[100]">
+                      <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
+                      {tags.map((tag) => {
+                        const { id: tagId, name, color } = tag;
+
+                        const isSelected = selectedTagsGroupById?.[tagId];
+                        return (
+                          <DropdownMenuItem
+                            onClick={() => handleTagSelect(tag)}
+                            key={tagId}
+                            icon={isSelected && <FontAwesomeIcon icon={faCheckCircle} />}
+                            iconPos="right"
+                          >
+                            <div className="flex items-center">
+                              <div
+                                className="mr-2 h-2 w-2 rounded-full"
+                                style={{ background: color || "#bec2c8" }}
+                              />
+                              {name}
+                            </div>
+                          </DropdownMenuItem>
+                        );
+                      })}
+                      <ProjectPermissionCan
+                        I={ProjectPermissionActions.Create}
+                        a={ProjectPermissionSub.Tags}
+                      >
+                        {(isAllowed) => (
+                          <DropdownMenuItem asChild>
+                            <Button
+                              size="xs"
+                              className="w-full"
+                              colorSchema="primary"
+                              variant="outline_bg"
+                              leftIcon={<FontAwesomeIcon icon={faTag} />}
+                              onClick={onCreateTag}
+                              isDisabled={!isAllowed}
+                            >
+                              Create a tag
+                            </Button>
+                          </DropdownMenuItem>
+                        )}
+                      </ProjectPermissionCan>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </FormControl>
+              <FormControl label="Reminder">
+                {secretReminderRepeatDays && secretReminderRepeatDays > 0 ? (
+                  <div className="mt-2 ml-1 flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <FontAwesomeIcon className="text-primary-500" icon={faClock} />
+                      <span className="text-sm text-bunker-300">
+                        Reminder every {secretReminderRepeatDays}{" "}
+                        {secretReminderRepeatDays > 1 ? "days" : "day"}
+                      </span>
+                    </div>
+                    <div>
+                      <Button
+                        className="px-2 py-1"
+                        variant="outline_bg"
+                        onClick={() => setCreateReminderFormOpen.on()}
+                      >
+                        Update
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="mt-2 ml-1 flex items-center space-x-2">
+                    <Button
+                      className="px-2 py-1"
+                      variant="outline_bg"
+                      leftIcon={<FontAwesomeIcon icon={faClock} />}
+                      onClick={() => setCreateReminderFormOpen.on()}
+                    >
+                      Create Reminder
+                    </Button>
+                  </div>
+                )}
+              </FormControl>
+              <FormControl label="Comments & Notes">
+                <TextArea
+                  className="border border-mineshaft-600 text-sm"
+                  {...register("comment")}
+                  readOnly={isReadOnly}
+                  rows={5}
+                />
+              </FormControl>
+              <div className="my-2 mb-6 border-b border-mineshaft-600 pb-4">
+                <Controller
+                  control={control}
+                  name="skipMultilineEncoding"
+                  render={({ field: { value, onChange, onBlur } }) => (
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                    >
+                      {(isAllowed) => (
+                        <Switch
+                          id="skipmultiencoding-option"
+                          onCheckedChange={(isChecked) => onChange(!isChecked)}
+                          isChecked={!value}
+                          onBlur={onBlur}
+                          isDisabled={!isAllowed}
+                          className="items-center"
+                        >
+                          Enable multi line encoding
+                          <Tooltip
+                            content="Infisical encodes multiline secrets by escaping newlines and wrapping in quotes. To disable, enable this option"
+                            className="z-[100]"
+                          >
+                            <FontAwesomeIcon icon={faCircleQuestion} className="ml-1" size="sm" />
+                          </Tooltip>
+                        </Switch>
+                      )}
+                    </ProjectPermissionCan>
+                  )}
+                />
+              </div>
+              <div className="dark mb-4 flex-grow text-sm text-bunker-300">
+                <div className="mb-2">Version History</div>
+                <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
+                  {secretVersion?.map(({ createdAt, value, id }, i) => (
+                    <div key={id} className="flex flex-col space-y-1">
+                      <div className="flex items-center space-x-2">
+                        <div>
+                          <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
+                        </div>
+                        <div>{format(new Date(createdAt), "Pp")}</div>
+                      </div>
+                      <div className="ml-1.5 flex items-center space-x-2 border-l border-bunker-300 pl-4">
+                        <div className="self-start rounded-sm bg-primary-500/30 px-1">Value:</div>
+                        <div className="break-all font-mono">{value}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="flex flex-col space-y-4">
+                <div className="flex items-center space-x-4">
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Edit}
+                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        isFullWidth
+                        type="submit"
+                        isDisabled={isSubmitting || !isDirty || !isAllowed}
+                        isLoading={isSubmitting}
+                      >
+                        Save Changes
+                      </Button>
+                    )}
+                  </ProjectPermissionCan>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Delete}
+                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                  >
+                    {(isAllowed) => (
+                      <Button colorSchema="danger" isDisabled={!isAllowed} onClick={onDeleteSecret}>
+                        Delete
+                      </Button>
+                    )}
+                  </ProjectPermissionCan>
+                </div>
+              </div>
             </div>
-          </div>
-        </form>
-      </DrawerContent>
-    </Drawer>
+          </form>
+        </DrawerContent>
+      </Drawer>
+    </>
   );
 };