diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 689950a01..f97070490 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1,5 +1,5 @@ { - "name": "frontend", + "name": "npm-proj-1695919945735-0.225773463026700768rr1Oh", "lockfileVersion": 2, "requires": true, "packages": { @@ -84,7 +84,7 @@ "react-table": "^7.8.0", "sanitize-html": "^2.11.0", "set-cookie-parser": "^2.5.1", - "sharp": "^0.32.0", + "sharp": "^0.32.6", "styled-components": "^5.3.7", "tailwind-merge": "^1.8.1", "tweetnacl": "^1.0.3", @@ -9687,6 +9687,11 @@ "deep-equal": "^2.0.5" } }, + "node_modules/b4a": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz", + "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==" + }, "node_modules/babel-core": { "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", @@ -11692,9 +11697,9 @@ } }, "node_modules/detect-libc": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz", - "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz", + "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==", "engines": { "node": ">=8" } @@ -13357,6 +13362,11 @@ "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", "dev": true }, + "node_modules/fast-fifo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", + "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==" + }, "node_modules/fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -19389,6 +19399,11 @@ } ] }, + "node_modules/queue-tick": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz", + "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==" + }, "node_modules/quick-lru": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", @@ -21028,18 +21043,18 @@ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" }, "node_modules/sharp": { - "version": "0.32.1", - "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz", - "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==", + "version": "0.32.6", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz", + "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==", "hasInstallScript": true, "dependencies": { "color": "^4.2.3", - "detect-libc": "^2.0.1", + "detect-libc": "^2.0.2", "node-addon-api": "^6.1.0", "prebuild-install": "^7.1.1", - "semver": "^7.5.0", + "semver": "^7.5.4", "simple-get": "^4.0.1", - "tar-fs": "^2.1.1", + "tar-fs": "^3.0.4", "tunnel-agent": "^0.6.0" }, "engines": { @@ -21061,9 +21076,9 @@ } }, "node_modules/sharp/node_modules/semver": { - "version": "7.5.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", - "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dependencies": { "lru-cache": "^6.0.0" }, @@ -21074,6 +21089,26 @@ "node": ">=10" } }, + "node_modules/sharp/node_modules/tar-fs": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz", + "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==", + "dependencies": { + "mkdirp-classic": "^0.5.2", + "pump": "^3.0.0", + "tar-stream": "^3.1.5" + } + }, + "node_modules/sharp/node_modules/tar-stream": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz", + "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==", + "dependencies": { + "b4a": "^1.6.4", + "fast-fifo": "^1.2.0", + "streamx": "^2.15.0" + } + }, "node_modules/sharp/node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -21505,6 +21540,15 @@ "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", "dev": true }, + "node_modules/streamx": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz", + "integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==", + "dependencies": { + "fast-fifo": "^1.1.0", + "queue-tick": "^1.0.1" + } + }, "node_modules/strict-uri-encode": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", @@ -30477,6 +30521,11 @@ "deep-equal": "^2.0.5" } }, + "b4a": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz", + "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==" + }, "babel-core": { "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", @@ -32009,9 +32058,9 @@ "dev": true }, "detect-libc": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz", - "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==" + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz", + "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==" }, "detect-node-es": { "version": "1.1.0", @@ -33316,6 +33365,11 @@ "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", "dev": true }, + "fast-fifo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", + "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==" + }, "fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -37676,6 +37730,11 @@ "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", "dev": true }, + "queue-tick": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz", + "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==" + }, "quick-lru": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", @@ -38875,17 +38934,17 @@ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" }, "sharp": { - "version": "0.32.1", - "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz", - "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==", + "version": "0.32.6", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz", + "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==", "requires": { "color": "^4.2.3", - "detect-libc": "^2.0.1", + "detect-libc": "^2.0.2", "node-addon-api": "^6.1.0", "prebuild-install": "^7.1.1", - "semver": "^7.5.0", + "semver": "^7.5.4", "simple-get": "^4.0.1", - "tar-fs": "^2.1.1", + "tar-fs": "^3.0.4", "tunnel-agent": "^0.6.0" }, "dependencies": { @@ -38898,13 +38957,33 @@ } }, "semver": { - "version": "7.5.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", - "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "requires": { "lru-cache": "^6.0.0" } }, + "tar-fs": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz", + "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==", + "requires": { + "mkdirp-classic": "^0.5.2", + "pump": "^3.0.0", + "tar-stream": "^3.1.5" + } + }, + "tar-stream": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz", + "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==", + "requires": { + "b4a": "^1.6.4", + "fast-fifo": "^1.2.0", + "streamx": "^2.15.0" + } + }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -39241,6 +39320,15 @@ "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", "dev": true }, + "streamx": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz", + "integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==", + "requires": { + "fast-fifo": "^1.1.0", + "queue-tick": "^1.0.1" + } + }, "strict-uri-encode": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index f71e92302..3fe6b617a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -92,7 +92,7 @@ "react-table": "^7.8.0", "sanitize-html": "^2.11.0", "set-cookie-parser": "^2.5.1", - "sharp": "^0.32.0", + "sharp": "^0.32.6", "styled-components": "^5.3.7", "tailwind-merge": "^1.8.1", "tweetnacl": "^1.0.3", diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx index ce3b3d12f..98a4ad71a 100644 --- a/frontend/src/components/v2/Modal/Modal.tsx +++ b/frontend/src/components/v2/Modal/Modal.tsx @@ -29,7 +29,7 @@ export const ModalContent = forwardRef( diff --git a/frontend/src/views/SecretMainPage/SecretMainPage.store.tsx b/frontend/src/views/SecretMainPage/SecretMainPage.store.tsx index 99f4e135f..a92960b31 100644 --- a/frontend/src/views/SecretMainPage/SecretMainPage.store.tsx +++ b/frontend/src/views/SecretMainPage/SecretMainPage.store.tsx @@ -28,13 +28,39 @@ const createSelectedSecretStore: StateCreator = (set) => ({ } }); -const StoreContext = createContext | null>(null); +export enum PopUpNames { + CreateSecretForm = "create-secret-form" +} +type PopUpState = { + popUp: Record; + popUpActions: { + togglePopUp: (id: PopUpNames, isOpen?: boolean) => void; + closePopUp: (id: PopUpNames) => void; + openPopUp: (id: PopUpNames, data?: any) => void; + }; +}; +const createPopUpStore: StateCreator = (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 | null>(null); export const StoreProvider = ({ children }: { children: ReactNode }) => { - const storeRef = useRef>(); + const storeRef = useRef>(); const router = useRouter(); if (!storeRef.current) { - storeRef.current = createStore((...a) => ({ - ...createSelectedSecretStore(...a) + storeRef.current = createStore((...a) => ({ + ...createSelectedSecretStore(...a), + ...createPopUpStore(...a) })); } @@ -53,7 +79,7 @@ export const StoreProvider = ({ children }: { children: ReactNode }) => { return {children}; }; -const useStoreContext = (selector: (state: SelectedSecretState) => T): T => { +const useStoreContext = (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 = (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); diff --git a/frontend/src/views/SecretMainPage/SecretMainPage.tsx b/frontend/src/views/SecretMainPage/SecretMainPage.tsx index e41543990..60fe31dce 100644 --- 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)} /> -
+
{isNotEmtpy && (
@@ -292,6 +286,13 @@ export const SecretMainPage = () => { {!canReadSecret && folders?.length === 0 && }
+ { isSmaller={isNotEmtpy} environments={currentWorkspace?.environments} /> + handlePopUpToggle("snapshots", isOpen)} + hasNextPage={hasNextSnapshotListPage} + fetchNextPage={fetchNextSnapshotList} + onSelectSnapshot={handleSelectSnapshot} + isFetchingNextPage={isFetchingNextSnapshotList} + /> ) : ( { onClickListSnapshot={() => handlePopUpToggle("snapshots", true)} /> )} - handlePopUpToggle("snapshots", isOpen)} - hasNextPage={hasNextSnapshotListPage} - fetchNextPage={fetchNextSnapshotList} - onSelectSnapshot={handleSelectSnapshot} - isFetchingNextPage={isFetchingNextSnapshotList} - />
); diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx index 5240c242f..0c3f3b03e 100644 --- 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 = ({ Apply tags to filter secrets {tags.map(({ _id, name, tagColor }) => ( onToggleTagFilter(_id)} + onClick={(evt) => { + evt.preventDefault(); + onToggleTagFilter(_id); + }} key={_id} icon={filter?.tags[_id] && } iconPos="right" @@ -300,7 +303,7 @@ export const ActionBar = ({
{/* all the side triggers from actions like modals etc */} - handlePopUpClose("addSecret")} - onTogglePopUp={(isOpen) => handlePopUpToggle("addSecret", isOpen)} - /> ; 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({ 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 ( - + togglePopUp(PopUpNames.CreateSecretForm, state)} + > @@ -264,7 +266,7 @@ export const CopySecretsFromBoard = ({ Include secret values -
+
-
diff --git a/frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx b/frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx index aeb97e772..838a5f0fb 100644 --- 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 && ( {(isAllowed) => ( - )} diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx index fb98bef98..050480456 100644 --- 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"), []);