diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx index 2fc2dc592..b069d0951 100644 --- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx +++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx @@ -14,6 +14,7 @@ import { faFingerprint, faFolder, faFolderPlus, + faInfoCircle, faKey, faLock, faPaste, @@ -32,6 +33,7 @@ import { createNotification } from "@app/components/notifications"; import { ProjectPermissionCan } from "@app/components/permissions"; import { CreateSecretRotationV2Modal } from "@app/components/secret-rotations-v2"; import { + Badge, Button, DeleteActionModal, DropdownMenu, @@ -70,10 +72,7 @@ import { useMoveSecrets, useUpdateSecretBatch } from "@app/hooks/api"; -import { - dashboardKeys, - fetchDashboardProjectSecretsByKeys -} from "@app/hooks/api/dashboard/queries"; +import { dashboardKeys, fetchDashboardProjectSecretsByKeys } from "@app/hooks/api/dashboard/queries"; import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types"; import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries"; import { PendingAction } from "@app/hooks/api/secretFolders/types"; @@ -665,6 +664,8 @@ export const ActionBar = ({ const isTableFiltered = Object.values(filter.tags).some(Boolean) || Object.values(filter.include).some(Boolean); + const filteredTags = Object.values(filter?.tags ?? {}).filter(Boolean).length; + return ( <>
@@ -697,7 +698,7 @@ export const ActionBar = ({ Filters - + Filter By { @@ -776,11 +777,19 @@ export const ActionBar = ({ iconPos="right" icon={} > - Tags +
+ Tags + {Boolean(filteredTags) && {filteredTags} Applied} +
- Apply Tags to Filter Secrets +
+ Filter by Secret Tags + + + +
{tags.map(({ id, slug, color }) => (