awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add multi-select in secret overview

Browse Source
This commit is contained in:
Sheen Capadngan
2024-05-07 13:52:42 +08:00
parent fdd67c89b3
commit a3552d00d1
6 changed files with 211 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/pages/project/[id]/secrets/overview.tsx
View File

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
import Head from "next/head";
import { SecretOverviewPage } from "@app/views/SecretOverviewPage";
import { StoreProvider } from "@app/views/SecretOverviewPage/SecretOverviewPage.store";
const Dashboard = () => {
const { t } = useTranslation();
@@ -16,7 +17,9 @@ const Dashboard = () => {
<meta name="og:description" content={String(t("dashboard.og-description"))} />
</Head>
<div className="h-full">
<SecretOverviewPage />
<StoreProvider>
<SecretOverviewPage />
</StoreProvider>
</div>
</>
);

78
frontend/src/views/SecretOverviewPage/SecretOverviewPage.store.tsx Normal file
View File

@@ -0,0 +1,78 @@
import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
import { useRouter } from "next/router";
import { createStore, StateCreator, StoreApi, useStore } from "zustand";
export enum EntryType {
FOLDER = "folder",
SECRET = "secret"
}
type SelectedEntriesState = {
selectedEntries: {
[EntryType.FOLDER]: Record<string, boolean>;
[EntryType.SECRET]: Record<string, boolean>;
};
action: {
toggle: (type: EntryType, key: string) => void;
reset: () => void;
};
};
const createSelectedSecretStore: StateCreator<SelectedEntriesState> = (set) => ({
selectedEntries: {
[EntryType.FOLDER]: {},
[EntryType.SECRET]: {}
},
action: {
toggle: (type: EntryType, key: string) =>
set((state) => {
const isChecked = Boolean(state.selectedEntries[type]?.[key]);
const newChecks = { ...state.selectedEntries };
// remove selection if its present else add it
if (isChecked) delete newChecks[type][key];
else newChecks[type][key] = true;
return { selectedEntries: newChecks };
}),
reset: () =>
set({
selectedEntries: {
[EntryType.FOLDER]: {},
[EntryType.SECRET]: {}
}
})
}
});
const StoreContext = createContext<StoreApi<SelectedEntriesState> | null>(null);
export const StoreProvider = ({ children }: { children: ReactNode }) => {
const storeRef = useRef<StoreApi<SelectedEntriesState>>();
const router = useRouter();
if (!storeRef.current) {
storeRef.current = createStore<SelectedEntriesState>((...a) => ({
...createSelectedSecretStore(...a)
}));
}
useEffect(() => {
const onRouteChangeStart = () => {
const state = storeRef.current?.getState();
state?.action.reset();
};
router.events.on("routeChangeStart", onRouteChangeStart);
return () => {
router.events.off("routeChangeStart", onRouteChangeStart);
};
}, []);
return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
};
const useStoreContext = <T extends unknown>(selector: (state: SelectedEntriesState) => T): T => {
const ctx = useContext(StoreContext);
if (!ctx) throw new Error("Missing ");
return useStore(ctx, selector);
};
export const useSelectedEntries = () => useStoreContext((state) => state.selectedEntries);
export const useSelectedEntryActions = () => useStoreContext((state) => state.action);

10
frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
View File

@@ -70,6 +70,8 @@ import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSect
import { SecretOverviewDynamicSecretRow } from "./components/SecretOverviewDynamicSecretRow";
import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
import { SelectionPanel } from "./components/SelectionPanel/SelectionPanel";
import { EntryType, useSelectedEntries, useSelectedEntryActions } from "./SecretOverviewPage.store";
export const SecretOverviewPage = () => {
const { t } = useTranslation();
@@ -105,6 +107,9 @@ export const SecretOverviewPage = () => {
const [searchFilter, setSearchFilter] = useState("");
const secretPath = (router.query?.secretPath as string) || "/";
const selectedEntries = useSelectedEntries();
const { toggle: toggleSelectedEntry } = useSelectedEntryActions();
useEffect(() => {
if (!isWorkspaceLoading && !workspaceId && router.isReady) {
router.push(`/org/${currentOrg?.id}/overview`);
@@ -543,6 +548,7 @@ export const SecretOverviewPage = () => {
</div>
</div>
</div>
<SelectionPanel secretPath={secretPath} />
<div className="thin-scrollbar mt-4" ref={parentTableRef}>
<TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
<Table>
@@ -666,6 +672,8 @@ export const SecretOverviewPage = () => {
<SecretOverviewFolderRow
folderName={folderName}
isFolderPresentInEnv={isFolderPresentInEnv}
isSelected={selectedEntries.folder[folderName]}
onToggleFolderSelect={() => toggleSelectedEntry(EntryType.FOLDER, folderName)}
environments={visibleEnvs}
key={`overview-${folderName}-${index + 1}`}
onClick={handleFolderClick}
@@ -684,6 +692,8 @@ export const SecretOverviewPage = () => {
visibleEnvs?.length > 0 &&
filteredSecretNames.map((key, index) => (
<SecretOverviewTableRow
isSelected={selectedEntries.secret[key]}
onToggleSecretSelect={() => toggleSelectedEntry(EntryType.SECRET, key)}
secretPath={secretPath}
isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
onSecretCreate={handleSecretCreate}

23
frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
View File

@@ -2,20 +2,23 @@ import { faCheck, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { Td, Tr } from "@app/components/v2";
import { Checkbox, Td, Tr } from "@app/components/v2";
type Props = {
folderName: string;
environments: { name: string; slug: string }[];
isFolderPresentInEnv: (name: string, env: string) => boolean;
onClick: (path: string) => void;
isSelected: boolean;
onToggleFolderSelect: (folderName: string) => void;
};
export const SecretOverviewFolderRow = ({
folderName,
environments = [],
isFolderPresentInEnv,
isSelected,
onToggleFolderSelect,
onClick
}: Props) => {
return (
@@ -23,7 +26,21 @@ export const SecretOverviewFolderRow = ({
<Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
<div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
<div className="text-yellow-700">
<FontAwesomeIcon icon={faFolder} />
<Checkbox
id={`checkbox-${folderName}`}
isChecked={isSelected}
onCheckedChange={() => {
onToggleFolderSelect(folderName);
}}
onClick={(e) => {
e.stopPropagation();
}}
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/>
<FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
icon={faFolder}
/>
</div>
<div>{folderName}</div>
</div>

24
frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
View File

@@ -11,7 +11,7 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { Button, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
import { useToggle } from "@app/hooks";
import { DecryptedSecret } from "@app/hooks/api/secrets/types";
@@ -23,6 +23,8 @@ type Props = {
secretPath: string;
environments: { name: string; slug: string }[];
expandableColWidth: number;
isSelected: boolean;
onToggleSecretSelect: (key: string) => void;
getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
@@ -39,7 +41,9 @@ export const SecretOverviewTableRow = ({
onSecretCreate,
onSecretDelete,
isImportedSecretPresentInEnv,
expandableColWidth
expandableColWidth,
onToggleSecretSelect,
isSelected
}: Props) => {
const [isFormExpanded, setIsFormExpanded] = useToggle();
const totalCols = environments.length + 1; // secret key row
@@ -56,7 +60,21 @@ export const SecretOverviewTableRow = ({
<div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
<div className="flex items-center space-x-5">
<div className="text-blue-300/70">
<FontAwesomeIcon icon={isFormExpanded ? faAngleDown : faKey} />
<Checkbox
id={`checkbox-${secretKey}`}
isChecked={isSelected}
onCheckedChange={() => {
onToggleSecretSelect(secretKey);
}}
onClick={(e) => {
e.stopPropagation();
}}
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/>
<FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
icon={isFormExpanded ? faAngleDown : faKey}
/>
</div>
<div title={secretKey}>{secretKey}</div>
</div>

78
frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx Normal file
View File

@@ -0,0 +1,78 @@
import { subject } from "@casl/ability";
import { faMinusSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { Button, DeleteActionModal, IconButton, Tooltip } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useSelectedEntries, useSelectedEntryActions } from "../../SecretOverviewPage.store";
type Props = {
secretPath: string;
};
export const SelectionPanel = ({ secretPath }: Props) => {
const { permission } = useProjectPermission();
const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
"bulkDeleteEntries"
] as const);
const selectedEntries = useSelectedEntries();
const { reset: resetSelectedEntries } = useSelectedEntryActions();
const selectedCount =
Object.keys(selectedEntries.folder).length + Object.keys(selectedEntries.secret).length;
const isMultiSelectActive = selectedCount > 0;
// TODO: REVISIT RBAC
const shouldShowDelete = permission.can(
ProjectPermissionActions.Delete,
subject(ProjectPermissionSub.Secrets, { environment: "", secretPath })
);
const handleBulkDelete = async () => {
handlePopUpClose("bulkDeleteEntries");
};
return (
<>
<div
className={twMerge(
"h-0 flex-shrink-0 overflow-hidden transition-all",
isMultiSelectActive && "h-16"
)}
>
<div className="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-bunker-300">
<Tooltip content="Clear">
<IconButton variant="plain" ariaLabel="clear-selection" onClick={resetSelectedEntries}>
<FontAwesomeIcon icon={faMinusSquare} size="lg" />
</IconButton>
</Tooltip>
<div className="ml-4 flex-grow px-2 text-sm">{selectedCount} Selected</div>
{shouldShowDelete && (
<Button
variant="outline_bg"
colorSchema="danger"
leftIcon={<FontAwesomeIcon icon={faTrash} />}
className="ml-4"
onClick={() => handlePopUpOpen("bulkDeleteEntries")}
size="xs"
>
Delete
</Button>
)}
</div>
</div>
<DeleteActionModal
isOpen={popUp.bulkDeleteEntries.isOpen}
deleteKey="delete"
title="Do you want to delete the selected secrets and folders across envs?"
onChange={(isOpen) => handlePopUpToggle("bulkDeleteEntries", isOpen)}
onDeleteApproved={handleBulkDelete}
/>
</>
);
};