Merge pull request #1034 from akhilmhdh/feat/patch-dashboardv3

feat(dashboard-v3): patched dashboard copy sec bug

frontend/src/components/v2/Modal/Modal.tsx

@@ -29,7 +29,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "fixed top-1/2 left-1/2 z-30 dark:[color-scheme:dark] max-h-screen overflow-y-auto thin-scrollbar max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
+            "fixed top-1/2 left-1/2 z-30 dark:[color-scheme:dark] max-h-screen thin-scrollbar max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
             className
           )}
         >

frontend/src/views/SecretMainPage/SecretMainPage.store.tsx

@@ -28,13 +28,39 @@ const createSelectedSecretStore: StateCreator<SelectedSecretState> = (set) => ({
   }
 });
 
-const StoreContext = createContext<StoreApi<SelectedSecretState> | null>(null);
+export enum PopUpNames {
+  CreateSecretForm = "create-secret-form"
+}
+type PopUpState = {
+  popUp: Record<string, { isOpen: boolean; data?: any }>;
+  popUpActions: {
+    togglePopUp: (id: PopUpNames, isOpen?: boolean) => void;
+    closePopUp: (id: PopUpNames) => void;
+    openPopUp: (id: PopUpNames, data?: any) => void;
+  };
+};
+const createPopUpStore: StateCreator<PopUpState> = (set) => ({
+  popUp: {},
+  popUpActions: {
+    closePopUp: (id) => set((state) => ({ popUp: { ...state.popUp, [id]: { isOpen: false } } })),
+    openPopUp: (id, data) =>
+      set((state) => ({ popUp: { ...state.popUp, [id]: { isOpen: true, data } } })),
+    togglePopUp: (id, isOpen) =>
+      set((state) => ({
+        popUp: { ...state.popUp, [id]: { isOpen: isOpen ?? !state.popUp[id].isOpen } }
+      }))
+  }
+});
+
+type CombinedState = SelectedSecretState & PopUpState;
+const StoreContext = createContext<StoreApi<CombinedState> | null>(null);
 export const StoreProvider = ({ children }: { children: ReactNode }) => {
-  const storeRef = useRef<StoreApi<SelectedSecretState>>();
+  const storeRef = useRef<StoreApi<CombinedState>>();
   const router = useRouter();
   if (!storeRef.current) {
-    storeRef.current = createStore<SelectedSecretState>((...a) => ({
+    storeRef.current = createStore<CombinedState>((...a) => ({
-      ...createSelectedSecretStore(...a)
+      ...createSelectedSecretStore(...a),
+      ...createPopUpStore(...a)
     }));
   }
 
@@ -53,7 +79,7 @@ export const StoreProvider = ({ children }: { children: ReactNode }) => {
   return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
 };
 
-const useStoreContext = <T extends unknown>(selector: (state: SelectedSecretState) => T): T => {
+const useStoreContext = <T extends unknown>(selector: (state: CombinedState) => T): T => {
   const ctx = useContext(StoreContext);
   if (!ctx) throw new Error("Missing ");
   return useStore(ctx, selector);
@@ -62,3 +88,8 @@ const useStoreContext = <T extends unknown>(selector: (state: SelectedSecretStat
 // selected secret context
 export const useSelectedSecrets = () => useStoreContext((state) => state.selectedSecret);
 export const useSelectedSecretActions = () => useStoreContext((state) => state.action);
+
+// popup context
+export const usePopUpState = (id: PopUpNames) =>
+  useStoreContext((state) => state.popUp?.[id] || { isOpen: false });
+export const usePopUpAction = () => useStoreContext((state) => state.popUpActions);

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -4,7 +4,6 @@ import { useRouter } from "next/router";
 import { subject } from "@casl/ability";
 import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import NavHeader from "@app/components/navigation/NavHeader";
 import { PermissionDeniedBanner } from "@app/components/permissions";
@@ -28,6 +27,7 @@ import {
 } from "@app/hooks/api";
 
 import { ActionBar } from "./components/ActionBar";
+import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderListView } from "./components/FolderListView";
 import { PitDrawer } from "./components/PitDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
@@ -218,7 +218,6 @@ export const SecretMainPage = () => {
               workspaceId={workspaceId}
               secretPath={secretPath}
               isVisible={isVisible}
-              decryptFileKey={decryptFileKey!}
               filter={filter}
               tags={tags}
               onVisiblilityToggle={handleToggleVisibility}
@@ -226,15 +225,10 @@ export const SecretMainPage = () => {
               onSearchChange={handleSearchChange}
               onToggleTagFilter={handleTagToggle}
               snapshotCount={snapshotCount || 0}
-              autoCapitalization={currentWorkspace?.autoCapitalization}
               isSnapshotCountLoading={isSnapshotCountLoading}
               onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
             />
-            <div
+            <div className="mt-3 overflow-y-auto overflow-x-hidden thin-scrollbar bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm">
-              className={twMerge(
-                "mt-3 overflow-auto thin-scrollbar bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm border border-mineshaft-600"
-              )}
-            >
               <div className="flex flex-col ">
                 {isNotEmtpy && (
                   <div className="flex font-medium border-b border-mineshaft-600">
@@ -292,6 +286,13 @@ export const SecretMainPage = () => {
                 {!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
               </div>
             </div>
+            <CreateSecretForm
+              environment={environment}
+              workspaceId={workspaceId}
+              decryptFileKey={decryptFileKey!}
+              secretPath={secretPath}
+              autoCapitalize={currentWorkspace?.autoCapitalization}
+            />
             <SecretDropzone
               secrets={secrets}
               environment={environment}
@@ -301,6 +302,16 @@ export const SecretMainPage = () => {
               isSmaller={isNotEmtpy}
               environments={currentWorkspace?.environments}
             />
+            <PitDrawer
+              secretSnaphots={snapshotList}
+              snapshotId={snapshotId}
+              isDrawerOpen={popUp.snapshots.isOpen}
+              onOpenChange={(isOpen) => handlePopUpToggle("snapshots", isOpen)}
+              hasNextPage={hasNextSnapshotListPage}
+              fetchNextPage={fetchNextSnapshotList}
+              onSelectSnapshot={handleSelectSnapshot}
+              isFetchingNextPage={isFetchingNextSnapshotList}
+            />
           </>
         ) : (
           <SnapshotView
@@ -316,16 +327,6 @@ export const SecretMainPage = () => {
             onClickListSnapshot={() => handlePopUpToggle("snapshots", true)}
           />
         )}
-        <PitDrawer
-          secretSnaphots={snapshotList}
-          snapshotId={snapshotId}
-          isDrawerOpen={popUp.snapshots.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("snapshots", isOpen)}
-          hasNextPage={hasNextSnapshotListPage}
-          fetchNextPage={fetchNextSnapshotList}
-          onSelectSnapshot={handleSelectSnapshot}
-          isFetchingNextPage={isFetchingNextSnapshotList}
-        />
       </div>
     </StoreProvider>
   );

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();
@@ -235,7 +235,10 @@ export const ActionBar = ({
                   <DropdownMenuLabel>Apply tags to filter secrets</DropdownMenuLabel>
                   {tags.map(({ _id, name, tagColor }) => (
                     <DropdownMenuItem
-                      onClick={() => onToggleTagFilter(_id)}
+                      onClick={(evt) => {
+                        evt.preventDefault();
+                        onToggleTagFilter(_id);
+                      }}
                       key={_id}
                       icon={filter?.tags[_id] && <FontAwesomeIcon icon={faCheckCircle} />}
                       iconPos="right"
@@ -300,7 +303,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 +410,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"), []);