awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-20 22:17:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/multipleApprovalEnvs

Browse Source
This commit is contained in:
Carlos Monastyrski
2025-07-25 16:29:04 -03:00
parent 99e8bdef58 929822514e
commit 608979efa7
74 changed files with 2315 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+57 -63
View File
@@ -10,13 +10,12 @@ import {
faArrowRight,
faArrowRightToBracket,
faArrowUp,
faFileImport,
faFilter,
faFingerprint,
faFolder,
faFolderBlank,
faFolderPlus,
faKey,
faList,
faPlus,
faRotate
} from "@fortawesome/free-solid-svg-icons";
@@ -96,7 +95,12 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
import { SecretType, SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
import {
SecretType,
SecretV3RawSanitized,
TSecretFolder,
WorkspaceEnv
} from "@app/hooks/api/types";
import { ProjectVersion } from "@app/hooks/api/workspace/types";
import {
useDynamicSecretOverview,
@@ -135,7 +139,6 @@ enum RowType {
Folder = "folder",
DynamicSecret = "dynamic",
Secret = "secret",
Import = "import",
SecretRotation = "rotation"
}
@@ -144,11 +147,10 @@ type Filter = {
};
const DEFAULT_FILTER_STATE = {
[RowType.Folder]: true,
[RowType.DynamicSecret]: true,
[RowType.Secret]: true,
[RowType.Import]: true,
[RowType.SecretRotation]: true
[RowType.Folder]: false,
[RowType.DynamicSecret]: false,
[RowType.Secret]: false,
[RowType.SecretRotation]: false
};
const DEFAULT_COLLAPSED_HEADER_HEIGHT = 120;
@@ -265,11 +267,8 @@ export const OverviewPage = () => {
)
);
const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
useEffect(() => {
setVisibleEnvs(userAvailableEnvs);
}, [userAvailableEnvs]);
const [filteredEnvs, setFilteredEnvs] = useState<WorkspaceEnv[]>([]);
const visibleEnvs = filteredEnvs.length ? filteredEnvs : userAvailableEnvs;
const {
secretImports,
@@ -282,6 +281,7 @@ export const OverviewPage = () => {
environments: (userAvailableEnvs || []).map(({ slug }) => slug)
});
const isFilteredByResources = Object.values(filter).some(Boolean);
const { isPending: isOverviewLoading, data: overview } = useGetProjectSecretsOverview(
{
projectId: workspaceId,
@@ -289,11 +289,11 @@ export const OverviewPage = () => {
secretPath,
orderDirection,
orderBy,
includeFolders: filter.folder,
includeDynamicSecrets: filter.dynamic,
includeSecrets: filter.secret,
includeImports: filter.import,
includeSecretRotations: filter.rotation,
includeFolders: isFilteredByResources ? filter.folder : true,
includeDynamicSecrets: isFilteredByResources ? filter.dynamic : true,
includeSecrets: isFilteredByResources ? filter.secret : true,
includeImports: true,
includeSecretRotations: isFilteredByResources ? filter.rotation : true,
search: debouncedSearchFilter,
limit,
offset
@@ -529,10 +529,10 @@ export const OverviewPage = () => {
};
const handleEnvSelect = (envId: string) => {
if (visibleEnvs.map((env) => env.id).includes(envId)) {
setVisibleEnvs(visibleEnvs.filter((env) => env.id !== envId));
if (filteredEnvs.map((env) => env.id).includes(envId)) {
setFilteredEnvs(filteredEnvs.filter((env) => env.id !== envId));
} else {
setVisibleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
setFilteredEnvs(filteredEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
}
};
@@ -792,11 +792,11 @@ export const OverviewPage = () => {
envNames: string[],
envs: { environment: string; importedBy: ProjectSecretsImportedBy[] }[]
): ProjectSecretsImportedBy[] => {
const filteredEnvs = envs.filter((env) => envNames.includes(env.environment));
const environments = envs.filter((env) => envNames.includes(env.environment));
if (filteredEnvs.length === 0) return [];
if (environments.length === 0) return [];
const allImportedBy = filteredEnvs.flatMap((env) => env.importedBy);
const allImportedBy = environments.flatMap((env) => env.importedBy);
const groupedBySlug: Record<string, ProjectSecretsImportedBy[]> = {};
allImportedBy.forEach((item) => {
@@ -902,9 +902,7 @@ export const OverviewPage = () => {
const isTableEmpty = totalCount === 0;
const isTableFiltered =
Boolean(Object.values(filter).filter((enabled) => !enabled).length) ||
userAvailableEnvs.length !== visibleEnvs.length;
const isTableFiltered = isFilteredByResources || filteredEnvs.length > 0;
if (!isProjectV3)
return (
@@ -969,26 +967,42 @@ export const OverviewPage = () => {
<div className="mt-4 flex items-center justify-between">
<FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
<div className="flex flex-row items-center justify-center space-x-2">
{isTableFiltered && (
<Button
variant="plain"
colorSchema="secondary"
onClick={() => {
setFilteredEnvs([]);
setFilter(DEFAULT_FILTER_STATE);
}}
>
Clear Filters
</Button>
)}
{userAvailableEnvs.length > 0 && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
ariaLabel="Environments"
variant="plain"
<Button
size="sm"
variant="outline_bg"
className={twMerge(
"flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
isTableFiltered && "border-primary/50 text-primary"
"flex h-[2.5rem]",
isTableFiltered && "border-primary/40 bg-primary/10"
)}
leftIcon={
<FontAwesomeIcon
icon={faFilter}
className={isTableFiltered ? "text-primary/80" : undefined}
/>
}
>
<Tooltip content="Choose visible environments" className="mb-2">
<FontAwesomeIcon icon={faList} />
</Tooltip>
</IconButton>
Filters
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="thin-scrollbar max-h-[70vh] overflow-y-auto"
align="end"
sideOffset={2}
>
{/* <DropdownMenuItem className="px-1.5" asChild>
<Button
@@ -1002,20 +1016,8 @@ export const OverviewPage = () => {
Create an environment
</Button>
</DropdownMenuItem> */}
<DropdownMenuLabel>Filter project resources</DropdownMenuLabel>
<DropdownMenuItem
onClick={(e) => {
e.preventDefault();
handleToggleRowType(RowType.Import);
}}
icon={filter[RowType.Import] && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
<div className="flex items-center gap-2">
<FontAwesomeIcon icon={faFileImport} className="text-green-700" />
<span>Imports</span>
</div>
</DropdownMenuItem>
<DropdownMenuLabel>Filter by Resource</DropdownMenuLabel>
<DropdownMenuItem
onClick={(e) => {
e.preventDefault();
@@ -1070,11 +1072,11 @@ export const OverviewPage = () => {
<span>Secrets</span>
</div>
</DropdownMenuItem>
<DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
<DropdownMenuLabel>Filter by Environment</DropdownMenuLabel>
{userAvailableEnvs.map((availableEnv) => {
const { id: envId, name } = availableEnv;
const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
const isEnvSelected = filteredEnvs.map((env) => env.id).includes(envId);
return (
<DropdownMenuItem
onClick={(e) => {
@@ -1082,7 +1084,6 @@ export const OverviewPage = () => {
handleEnvSelect(envId);
}}
key={envId}
disabled={visibleEnvs?.length === 1}
icon={isEnvSelected && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
@@ -1405,13 +1406,6 @@ export const OverviewPage = () => {
className="bg-mineshaft-700"
/>
)}
{userAvailableEnvs.length > 0 && visibleEnvs.length === 0 && (
<Tr>
<Td colSpan={visibleEnvs.length + 1}>
<EmptyState title="You have no visible environments" iconSize="3x" />
</Td>
</Tr>
)}
{userAvailableEnvs.length === 0 && (
<Tr>
<Td colSpan={visibleEnvs.length + 1}>
@@ -1444,8 +1438,8 @@ export const OverviewPage = () => {
<Td colSpan={visibleEnvs.length + 1}>
<EmptyState
title={
debouncedSearchFilter
? "No secret found for your search, add one now"
isTableFiltered || debouncedSearchFilter
? "No secrets found for your search, add one now"
: "Let's add some secrets"
}
icon={faFolderBlank}
frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
+67 -24
View File
@@ -1,5 +1,5 @@
/* eslint-disable no-case-declarations */
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Helmet } from "react-helmet";
import { useTranslation } from "react-i18next";
import { subject } from "@casl/ability";
@@ -53,6 +53,7 @@ import { PendingAction } from "@app/hooks/api/secretFolders/types";
import { useCreateCommit } from "@app/hooks/api/secrets/mutations";
import { SecretV3RawSanitized } from "@app/hooks/api/types";
import { usePathAccessPolicies } from "@app/hooks/usePathAccessPolicies";
import { useResizableColWidth } from "@app/hooks/useResizableColWidth";
import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
import { RequestAccessModal } from "@app/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal";
import { SecretRotationListView } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView";
@@ -104,6 +105,8 @@ const Page = () => {
const { permission } = useProjectPermission();
const { mutateAsync: createCommit } = useCreateCommit();
const tableRef = useRef<HTMLDivElement>(null);
const [isVisible, setIsVisible] = useState(false);
const { isBatchMode, pendingChanges } = useBatchMode();
const { loadPendingChanges, setExistingKeys } = useBatchModeActions();
@@ -212,11 +215,11 @@ const Page = () => {
searchFilter: (routerQueryParams.search as string) || "",
// these should always be on by default for the UI, they will be disabled for the query below based off permissions
include: {
[RowType.Folder]: true,
[RowType.Import]: true,
[RowType.DynamicSecret]: true,
[RowType.Secret]: true,
[RowType.SecretRotation]: true
[RowType.Folder]: false,
[RowType.Import]: false,
[RowType.DynamicSecret]: false,
[RowType.Secret]: false,
[RowType.SecretRotation]: false
}
};
@@ -242,6 +245,7 @@ const Page = () => {
}
}, [currentWorkspace, environment]);
const isResourceTypeFiltered = Object.values(filter.include).some(Boolean);
const {
data,
isPending: isDetailsLoading,
@@ -255,12 +259,14 @@ const Page = () => {
orderBy,
search: debouncedSearchFilter,
orderDirection,
includeImports: canReadSecretImports && filter.include.import,
includeFolders: filter.include.folder,
includeImports: canReadSecretImports && (isResourceTypeFiltered ? filter.include.import : true),
includeFolders: isResourceTypeFiltered ? filter.include.folder : true,
viewSecretValue: canReadSecretValue,
includeDynamicSecrets: canReadDynamicSecret && filter.include.dynamic,
includeSecrets: canReadSecret && filter.include.secret,
includeSecretRotations: canReadSecretRotations && filter.include.rotation,
includeDynamicSecrets:
canReadDynamicSecret && (isResourceTypeFiltered ? filter.include.dynamic : true),
includeSecrets: canReadSecret && (isResourceTypeFiltered ? filter.include.secret : true),
includeSecretRotations:
canReadSecretRotations && (isResourceTypeFiltered ? filter.include.rotation : true),
tags: filter.tags
});
@@ -480,6 +486,14 @@ const Page = () => {
handlePopUpClose("snapshots");
}, []);
const { handleMouseDown, isResizing, colWidth } = useResizableColWidth({
initialWidth: 320,
minWidth: 100,
maxWidth: tableRef.current
? tableRef.current.clientWidth - 148 // ensure value column can't collapse completely
: 800
});
useEffect(() => {
// restore filters for path if set
const restore = filterHistory.get(secretPath);
@@ -769,8 +783,22 @@ const Page = () => {
isPITEnabled={isPITEnabled}
hasPathPolicies={hasPathPolicies}
onRequestAccess={(params) => handlePopUpOpen("requestAccess", params)}
onClearFilters={() =>
setFilter((prev) => ({
...prev,
tags: {},
include: {
secret: false,
import: false,
dynamic: false,
rotation: false,
folder: false
}
}))
}
/>
<div
ref={tableRef}
className={twMerge(
"thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300",
isNotEmpty && "rounded-b-none"
@@ -804,20 +832,34 @@ const Page = () => {
/>
</div>
</Tooltip>
<div
className="flex w-80 flex-shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
role="button"
tabIndex={0}
onClick={handleSortToggle}
onKeyDown={(evt) => {
if (evt.key === "Enter") handleSortToggle();
}}
>
Key
<FontAwesomeIcon
icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
className="ml-2"
<div className="relative">
<div
tabIndex={-1}
role="button"
className={`absolute -right-[0.05rem] z-40 h-full w-0.5 cursor-ew-resize hover:bg-blue-400/20 ${
isResizing ? "bg-blue-400/75" : "bg-transparent"
}`}
onMouseDown={handleMouseDown}
/>
<div className="pointer-events-none absolute -right-[0.04rem] top-2 z-30">
<div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
</div>
<div
className="flex flex-shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
style={{ width: colWidth }}
role="button"
tabIndex={0}
onClick={handleSortToggle}
onKeyDown={(evt) => {
if (evt.key === "Enter") handleSortToggle();
}}
>
Key
<FontAwesomeIcon
icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
className="ml-2"
/>
</div>
</div>
<div className="flex-grow px-4 py-2">Value</div>
</div>
@@ -911,6 +953,7 @@ const Page = () => {
)}
{canReadSecret && Boolean(mergedSecrets?.length) && (
<SecretListView
colWidth={colWidth}
secrets={mergedSecrets}
tags={tags}
isVisible={isVisible}
frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx
+63 -43
View File
@@ -136,6 +136,7 @@ type Props = {
isPITEnabled: boolean;
onRequestAccess: (actions: ProjectPermissionActions[]) => void;
hasPathPolicies: boolean;
onClearFilters: () => void;
};
export const ActionBar = ({
@@ -159,7 +160,8 @@ export const ActionBar = ({
isPITEnabled = false,
usedBySecretSyncs,
onRequestAccess,
hasPathPolicies
hasPathPolicies,
onClearFilters
}: Props) => {
const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
"addFolder",
@@ -661,6 +663,9 @@ export const ActionBar = ({
}
};
const isTableFiltered =
Object.values(filter.tags).some(Boolean) || Object.values(filter.include).some(Boolean);
return (
<>
<div className="mt-4 flex items-center space-x-2">
@@ -676,18 +681,22 @@ export const ActionBar = ({
<div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
<Button
size="sm"
variant="outline_bg"
ariaLabel="Download"
className={twMerge(
"transition-all",
(Object.keys(filter.tags).length ||
Object.values(filter.include).filter((include) => !include).length) &&
"border-primary/50 text-primary"
"flex h-[2.5rem]",
isTableFiltered && "border-primary/40 bg-primary/10"
)}
leftIcon={
<FontAwesomeIcon
icon={faFilter}
className={isTableFiltered ? "text-primary/80" : undefined}
/>
}
>
<FontAwesomeIcon icon={faFilter} />
</IconButton>
Filters
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="p-0">
<DropdownMenuGroup>Filter By</DropdownMenuGroup>
@@ -762,51 +771,62 @@ export const ActionBar = ({
<span>Secrets</span>
</div>
</DropdownMenuItem>
<DropdownSubMenu>
<DropdownSubMenuTrigger
iconPos="right"
icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
>
Tags
</DropdownSubMenuTrigger>
<DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
<DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
Apply Tags to Filter Secrets
</DropdownMenuLabel>
{tags.map(({ id, slug, color }) => (
<DropdownMenuItem
onClick={(evt) => {
evt.preventDefault();
onToggleTagFilter(slug);
}}
key={id}
icon={filter?.tags[slug] && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
<div className="flex items-center">
<div
className="mr-2 h-2 w-2 rounded-full"
style={{ background: color || "#bec2c8" }}
/>
{slug}
</div>
</DropdownMenuItem>
))}
</DropdownSubMenuContent>
</DropdownSubMenu>
{Boolean(tags.length) && (
<DropdownSubMenu>
<DropdownSubMenuTrigger
iconPos="right"
icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
>
Tags
</DropdownSubMenuTrigger>
<DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
<DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
Apply Tags to Filter Secrets
</DropdownMenuLabel>
{tags.map(({ id, slug, color }) => (
<DropdownMenuItem
onClick={(evt) => {
evt.preventDefault();
onToggleTagFilter(slug);
}}
key={id}
icon={filter?.tags[slug] && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
<div className="flex items-center">
<div
className="mr-2 h-2 w-2 rounded-full"
style={{ background: color || "#bec2c8" }}
/>
{slug}
</div>
</DropdownMenuItem>
))}
</DropdownSubMenuContent>
</DropdownSubMenu>
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
{isTableFiltered && (
<Button variant="plain" colorSchema="secondary" onClick={onClearFilters}>
Clear Filters
</Button>
)}
<div className="flex-grow" />
<div>
{isProtectedBranch && (
<Tooltip content={`Protected by policy ${protectedBranchPolicyName}`}>
<IconButton variant="outline_bg" ariaLabel="protected">
<IconButton
variant="outline_bg"
className="border-primary/40 bg-primary/10"
ariaLabel="protected"
>
<FontAwesomeIcon icon={faLock} className="text-primary" />
</IconButton>
</Tooltip>
)}
</div>
<div className="flex-grow" />
<div>
<IconButton variant="outline_bg" ariaLabel="Download" onClick={handleSecretDownload}>
<FontAwesomeIcon icon={faDownload} />
frontend/src/pages/secret-manager/SecretDashboardPage/components/FolderListView/FolderListView.tsx
+1 -1
View File
@@ -235,7 +235,7 @@ export const FolderListView = ({
)}
</div>
{isPending ? (
<div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
<div className="flex w-16 items-center justify-between border-l border-mineshaft-600 px-3 py-3">
<IconButton
ariaLabel="edit-folder"
variant="plain"
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+7 -2
View File
@@ -90,6 +90,7 @@ type Props = {
}[];
isPending?: boolean;
pendingAction?: PendingAction;
colWidth: number;
};
export const SecretItem = memo(
@@ -108,7 +109,8 @@ export const SecretItem = memo(
handleSecretShare,
importedBy,
isPending,
pendingAction
pendingAction,
colWidth
}: Props) => {
const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
"editSecret"
@@ -383,7 +385,10 @@ export const SecretItem = memo(
</>
)}
</div>
<div className="flex h-11 w-80 flex-shrink-0 items-center px-4 py-2">
<div
className="flex h-11 flex-shrink-0 items-center px-4 py-2"
style={{ width: colWidth }}
>
<Controller
name="key"
control={control}
frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx
+4 -1
View File
@@ -51,6 +51,7 @@ type Props = {
isImported: boolean;
}[];
}[];
colWidth: number;
};
export const SecretListView = ({
@@ -62,7 +63,8 @@ export const SecretListView = ({
isVisible,
isProtectedBranch = false,
usedBySecretSyncs,
importedBy
importedBy,
colWidth
}: Props) => {
const queryClient = useQueryClient();
const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -554,6 +556,7 @@ export const SecretListView = ({
))}
{secrets.map((secret) => (
<SecretItem
colWidth={colWidth}
environment={environment}
secretPath={secretPath}
tags={wsTags}