feat(dashboard-v3): patched dashboard copy sec bug and add secret in empty state

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -43,11 +43,15 @@ import {
 import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useCreateFolder, useDeleteSecretBatch } from "@app/hooks/api";
-import { DecryptedSecret, TImportedSecrets, UserWsKeyPair, WsTag } from "@app/hooks/api/types";
+import { DecryptedSecret, TImportedSecrets, WsTag } from "@app/hooks/api/types";
 
-import { useSelectedSecretActions, useSelectedSecrets } from "../../SecretMainPage.store";
+import {
+  PopUpNames,
+  usePopUpAction,
+  useSelectedSecretActions,
+  useSelectedSecrets
+} from "../../SecretMainPage.store";
 import { Filter, GroupBy } from "../../SecretMainPage.types";
-import { CreateSecretForm } from "./CreateSecretForm";
 import { CreateSecretImportForm } from "./CreateSecretImportForm";
 import { FolderForm } from "./FolderForm";
 
@@ -58,13 +62,11 @@ type Props = {
   environment: string;
   workspaceId: string;
   secretPath?: string;
-  decryptFileKey: UserWsKeyPair;
   filter: Filter;
   tags?: WsTag[];
   isVisible?: boolean;
   snapshotCount: number;
   isSnapshotCountLoading?: boolean;
-  autoCapitalization?: boolean;
   onGroupByChange: (opt?: GroupBy) => void;
   onSearchChange: (term: string) => void;
   onToggleTagFilter: (tagId: string) => void;
@@ -77,14 +79,12 @@ export const ActionBar = ({
   importedSecrets = [],
   environment,
   workspaceId,
-  decryptFileKey,
   secretPath = "/",
   filter,
   tags = [],
   isVisible,
   snapshotCount,
   isSnapshotCountLoading,
-  autoCapitalization,
   onSearchChange,
   onToggleTagFilter,
   onGroupByChange,
@@ -92,7 +92,6 @@ export const ActionBar = ({
   onClickRollbackMode
 }: Props) => {
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
-    "addSecret",
     "addFolder",
     "addSecretImport",
     "bulkDeleteSecrets",
@@ -101,6 +100,7 @@ export const ActionBar = ({
   ] as const);
   const { subscription } = useSubscription();
   const { createNotification } = useNotificationContext();
+  const { openPopUp } = usePopUpAction();
 
   const { mutateAsync: createFolder } = useCreateFolder();
   const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
@@ -300,7 +300,7 @@ export const ActionBar = ({
               <Button
                 variant="outline_bg"
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => handlePopUpOpen("addSecret")}
+                onClick={() => openPopUp(PopUpNames.CreateSecretForm)}
                 className="rounded-r-none h-10"
                 isDisabled={!isAllowed}
               >
@@ -407,17 +407,6 @@ export const ActionBar = ({
         </div>
       </div>
       {/* all the side triggers from actions like modals etc */}
-      <CreateSecretForm
-        secrets={secrets}
-        environment={environment}
-        workspaceId={workspaceId}
-        autoCapitalize={autoCapitalization}
-        secretPath={secretPath}
-        decryptFileKey={decryptFileKey!}
-        isOpen={popUp.addSecret.isOpen}
-        onClose={() => handlePopUpClose("addSecret")}
-        onTogglePopUp={(isOpen) => handlePopUpToggle("addSecret", isOpen)}
-      />
       <CreateSecretImportForm
         environment={environment}
         workspaceId={workspaceId}

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -5,7 +5,9 @@ import { z } from "zod";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input, Modal, ModalContent, SecretInput } from "@app/components/v2";
 import { useCreateSecretV3 } from "@app/hooks/api";
-import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
+import { UserWsKeyPair } from "@app/hooks/api/types";
+
+import { PopUpNames, usePopUpAction, usePopUpState } from "../../SecretMainPage.store";
 
 const typeSchema = z.object({
   key: z.string(),
@@ -15,15 +17,11 @@ const typeSchema = z.object({
 type TFormSchema = z.infer<typeof typeSchema>;
 
 type Props = {
-  secrets?: DecryptedSecret[];
   environment: string;
   workspaceId: string;
   decryptFileKey: UserWsKeyPair;
   secretPath?: string;
   // modal props
-  isOpen?: boolean;
-  onClose: () => void;
-  onTogglePopUp: (isOpen: boolean) => void;
   autoCapitalize?: boolean;
 };
 
@@ -32,9 +30,6 @@ export const CreateSecretForm = ({
   workspaceId,
   decryptFileKey,
   secretPath = "/",
-  isOpen,
-  onClose,
-  onTogglePopUp,
   autoCapitalize = true
 }: Props) => {
   const {
@@ -44,6 +39,8 @@ export const CreateSecretForm = ({
     reset,
     formState: { errors, isSubmitting }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
+  const { isOpen } = usePopUpState(PopUpNames.CreateSecretForm);
+  const { closePopUp, togglePopUp } = usePopUpAction();
 
   const { createNotification } = useNotificationContext();
 
@@ -61,7 +58,7 @@ export const CreateSecretForm = ({
         type: "shared",
         latestFileKey: decryptFileKey
       });
-      onClose();
+      closePopUp(PopUpNames.CreateSecretForm);
       reset();
       createNotification({
         type: "success",
@@ -77,7 +74,10 @@ export const CreateSecretForm = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onOpenChange={onTogglePopUp}>
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(state) => togglePopUp(PopUpNames.CreateSecretForm, state)}
+    >
       <ModalContent
         title="Create secret"
         subTitle="Add a secret to the particular environment and folder"
@@ -118,7 +118,7 @@ export const CreateSecretForm = ({
             </Button>
             <Button
               key="layout-cancel-create-project"
-              onClick={onClose}
+              onClick={() => closePopUp(PopUpNames.CreateSecretForm)}
               variant="plain"
               colorSchema="secondary"
             >

frontend/src/views/SecretMainPage/components/CreateSecretForm/index.tsx

@@ -0,0 +1 @@
+export { CreateSecretForm } from "./CreateSecretForm";

frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx

@@ -41,13 +41,14 @@ const formSchema = z.object({
     .transform((val) =>
       typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
     ),
-  secrets: z.record(z.string())
+  secrets: z.record(z.string().optional().nullable())
 });
 
 type TFormSchema = z.infer<typeof formSchema>;
 
 type Props = {
   isOpen?: boolean;
+  isSmaller?: boolean;
   onToggle: (isOpen: boolean) => void;
   onParsedEnv: (env: Record<string, { value: string; comments: string[] }>) => void;
   environments?: { name: string; slug: string }[];
@@ -64,6 +65,7 @@ export const CopySecretsFromBoard = ({
   environment,
   secretPath,
   isOpen,
+  isSmaller,
   onToggle,
   onParsedEnv
 }: Props) => {
@@ -151,7 +153,7 @@ export const CopySecretsFromBoard = ({
                 onClick={() => onToggle(true)}
                 isDisabled={!isAllowed}
                 variant="star"
-                size="xs"
+                size={isSmaller ? "xs" : "sm"}
               >
                 Copy Secrets From An Environment
               </Button>
@@ -264,7 +266,7 @@ export const CopySecretsFromBoard = ({
                 Include secret values
               </Checkbox>
             </div>
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center space-x-4">
               <Button
                 leftIcon={<FontAwesomeIcon icon={faClone} />}
                 type="submit"
@@ -272,7 +274,7 @@ export const CopySecretsFromBoard = ({
               >
                 Paste Secrets
               </Button>
-              <Button variant="plain" colorSchema="secondary">
+              <Button variant="plain" colorSchema="secondary" onClick={() => onToggle(false)}>
                 Cancel
               </Button>
             </div>

frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx

@@ -17,6 +17,7 @@ import { useCreateSecretBatch, useUpdateSecretBatch } from "@app/hooks/api";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
 import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
 
+import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
 import { CopySecretsFromBoard } from "./CopySecretsFromBoard";
 
 const parseJson = (src: ArrayBuffer) => {
@@ -62,6 +63,7 @@ export const SecretDropzone = ({
     "overlapKeyWarning"
   ] as const);
   const queryClient = useQueryClient();
+  const { openPopUp } = usePopUpAction();
 
   const { mutateAsync: updateSecretBatch, isLoading: isUpdatingSecrets } = useUpdateSecretBatch({
     options: { onSuccess: undefined }
@@ -274,6 +276,7 @@ export const SecretDropzone = ({
                 workspaceId={workspaceId}
                 decryptFileKey={decryptFileKey}
                 secretPath={secretPath}
+                isSmaller={isSmaller}
               />
               {!isSmaller && (
                 <ProjectPermissionCan
@@ -281,7 +284,11 @@ export const SecretDropzone = ({
                   a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
                 >
                   {(isAllowed) => (
-                    <Button variant="star" isDisabled={!isAllowed}>
+                    <Button
+                      onClick={() => openPopUp(PopUpNames.CreateSecretForm)}
+                      variant="star"
+                      isDisabled={!isAllowed}
+                    >
                       Add a new secret
                     </Button>
                   )}

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

@@ -207,7 +207,7 @@ export const SecretListView = ({
         // personal secret change
         if (overrideAction === "deleted") {
           await handleSecretOperation("delete", "personal", key);
-        } else if (overrideAction && idOverride){
+        } else if (overrideAction && idOverride) {
           await handleSecretOperation("update", "personal", oldKey, {
             value: valueOverride,
             newKey: hasKeyChanged ? key : undefined,
@@ -239,7 +239,7 @@ export const SecretListView = ({
         });
       }
     },
-    []
+    [environment, secretPath]
   );
 
   const handleSecretDelete = useCallback(async () => {
@@ -268,7 +268,7 @@ export const SecretListView = ({
         text: "Failed to delete secret"
       });
     }
-  }, [(popUp.deleteSecret?.data as DecryptedSecret)?.key]);
+  }, [(popUp.deleteSecret?.data as DecryptedSecret)?.key, environment, secretPath]);
 
   // for optimization on minimise re-rendering of secret items
   const onCreateTag = useCallback(() => handlePopUpOpen("createTag"), []);