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

feat(dashboard-v3): patched dashboard copy sec bug
2026-09-22 13:39:35 +00:00 · 2023-09-29 08:21:12 -07:00
parent 66787b1f93 2cf5fd80ca
commit fb3a386aa3
9 changed files with 98 additions and 64 deletions
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/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
          )}
        >
--- a/frontend/src/views/SecretMainPage/SecretMainPage.store.tsx
+++ b/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) => ({
-      ...createSelectedSecretStore(...a)
+    storeRef.current = createStore<CombinedState>((...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);
--- a/frontend/src/views/SecretMainPage/SecretMainPage.tsx
+++ b/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
-              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="mt-3 overflow-y-auto overflow-x-hidden thin-scrollbar bg-mineshaft-800 text-left text-bunker-300 rounded-md text-sm">
              <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>
  );
--- a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
+++ b/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}
--- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/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"
            >
--- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/index.tsx
+++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/index.tsx
@@ -0,0 +1 @@
+export { CreateSecretForm } from "./CreateSecretForm";
--- a/frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx
+++ b/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>
--- a/frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx
+++ b/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>
                  )}
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx
+++ b/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"), []);
				`@@ -0,0 +1 @@`
				`export { CreateSecretForm } from "./CreateSecretForm";`