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/ActionBar/CreateSecretForm.tsx

@@ -1,132 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-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";
-
-const typeSchema = z.object({
-  key: z.string(),
-  value: z.string().optional()
-});
-
-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;
-};
-
-export const CreateSecretForm = ({
-  environment,
-  workspaceId,
-  decryptFileKey,
-  secretPath = "/",
-  isOpen,
-  onClose,
-  onTogglePopUp,
-  autoCapitalize = true
-}: Props) => {
-  const {
-    register,
-    handleSubmit,
-    control,
-    reset,
-    formState: { errors, isSubmitting }
-  } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
-
-  const { createNotification } = useNotificationContext();
-
-  const { mutateAsync: createSecretV3 } = useCreateSecretV3();
-
-  const handleFormSubmit = async ({ key, value }: TFormSchema) => {
-    try {
-      await createSecretV3({
-        environment,
-        workspaceId,
-        secretPath,
-        secretName: key,
-        secretValue: value || "",
-        secretComment: "",
-        type: "shared",
-        latestFileKey: decryptFileKey
-      });
-      onClose();
-      reset();
-      createNotification({
-        type: "success",
-        text: "Successfully created secret"
-      });
-    } catch (error) {
-      console.log(error);
-      createNotification({
-        type: "error",
-        text: "Failed to create secret"
-      });
-    }
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onTogglePopUp}>
-      <ModalContent
-        title="Create secret"
-        subTitle="Add a secret to the particular environment and folder"
-      >
-        <form onSubmit={handleSubmit(handleFormSubmit)}>
-          <FormControl label="Key" isError={Boolean(errors?.key)} errorText={errors?.key?.message}>
-            <Input
-              {...register("key")}
-              placeholder="Type your secret name"
-              autoCapitalization={autoCapitalize}
-            />
-          </FormControl>
-          <Controller
-            control={control}
-            name="value"
-            render={({ field }) => (
-              <FormControl
-                label="Value"
-                isError={Boolean(errors?.value)}
-                errorText={errors?.value?.message}
-              >
-                <SecretInput
-                  {...field}
-                  containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900  px-2 py-1.5"
-                />
-              </FormControl>
-            )}
-          />
-          <div className="mt-7 flex items-center">
-            <Button
-              isDisabled={isSubmitting}
-              isLoading={isSubmitting}
-              key="layout-create-project-submit"
-              className="mr-4"
-              type="submit"
-            >
-              Create Secret
-            </Button>
-            <Button
-              key="layout-cancel-create-project"
-              onClick={onClose}
-              variant="plain"
-              colorSchema="secondary"
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </ModalContent>
-    </Modal>
-  );
-};