awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 13:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Scott Wilson
2025-10-13 14:52:38 -07:00
parent 3a999e906c
commit c1ccaaad03
84 changed files with 234 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/locales/en/translations.json
+2 -2
View File
@@ -270,7 +270,7 @@
"description": "This page shows the members of the selected project, and allows you to modify their permissions."
},
"org": {
"title": "Organization Settings",
"title": "Settings",
"description": "Manage members of your organization. These users could afterwards be formed into projects."
},
"personal": {
@@ -290,7 +290,7 @@
}
},
"project": {
"title": "Project Settings",
"title": "Settings",
"description": "These settings only apply to the currently selected Project.",
"danger-zone": "Danger Zone",
"delete-project": "Delete Project",
frontend/src/components/v2/Badge/Badge.tsx
+8 -1
View File
@@ -17,7 +17,14 @@ const badgeVariants = cva(
variant: {
primary: "bg-yellow/20 text-yellow",
danger: "bg-red/20 text-red",
success: "bg-green/20 text-green"
success: "bg-green/20 text-green",
org: "bg-org-v1/20 text-org-v1 [&_svg]:text-org-v1 flex items-center opacity-100 hover:bg-org-v1/10 [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
namespace:
"bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1 w-min whitespace-nowrap",
project:
"bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
instance:
"bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap"
}
}
}
frontend/src/components/v2/Menu/Menu.tsx
+7 -2
View File
@@ -33,16 +33,21 @@ export const MenuItem = <T extends ElementType = "button">({
description,
// wrapping in forward ref with generic component causes the loss of ts definitions on props
inputRef,
variant,
...props
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
}: MenuItemProps<T> &
ComponentPropsWithRef<T> & { variant?: "project" | "namespace" | "org" }): JSX.Element => {
return (
<Item
type="button"
role="menuitem"
className={twMerge(
"group relative mt-0.5 flex w-full cursor-pointer items-center rounded-sm px-2 py-2 font-inter text-sm text-bunker-100 transition-all duration-50 hover:bg-mineshaft-700",
"group relative mt-0.5 box-border flex w-full cursor-pointer items-center rounded-[2px] border-l-2 border-transparent px-2 py-2 font-inter text-sm text-bunker-100 transition-all duration-50 hover:bg-mineshaft-700",
isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
isDisabled && "cursor-not-allowed hover:bg-transparent",
isSelected && variant === "org" && "border-org-v1",
isSelected && variant === "namespace" && "border-namespace-v1",
isSelected && variant === "project" && "border-primary",
className
)}
ref={inputRef}
frontend/src/components/v2/PageHeader/PageHeader.tsx
+22 -3
View File
@@ -1,18 +1,37 @@
import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
import { faCube, faCubes, faGlobe, faServer } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ReactNode } from "@tanstack/react-router";
import { twMerge } from "tailwind-merge";
import { Badge } from "@app/components/v2";
type Props = {
title: ReactNode;
description?: ReactNode;
children?: ReactNode;
className?: string;
scope: "org" | "project" | "namespace" | "instance";
};
export const PageHeader = ({ title, description, children, className }: Props) => (
const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: IconDefinition }> = {
org: { label: "Organization", icon: faGlobe },
project: { label: "Project", icon: faCube },
namespace: { label: "Namespace", icon: faCubes },
instance: { label: "Server", icon: faServer }
};
export const PageHeader = ({ title, description, children, className, scope }: Props) => (
<div className={twMerge("mb-4 w-full", className)}>
<div className="flex w-full justify-between">
<div className="w-full">
<h1 className="mr-4 text-3xl font-medium text-white capitalize">{title}</h1>
<div className="mr-4 flex w-full items-center">
<h1 className="text-3xl font-medium text-white capitalize">{title}</h1>
{scope && (
<Badge variant={scope} className="mt-1 ml-2.5">
<FontAwesomeIcon icon={SCOPE_NAME[scope].icon} />
{SCOPE_NAME[scope].label}
</Badge>
)}
</div>
<div className="flex items-center gap-2">{children}</div>
</div>
frontend/src/components/v2/Tabs/Tabs.tsx
+10 -2
View File
@@ -22,10 +22,18 @@ export const TabList = ({ className, children, ...props }: TabListProps) => (
export type TabProps = TabsPrimitive.TabsTriggerProps;
export const Tab = ({ className, children, ...props }: TabProps) => (
export const Tab = ({
className,
children,
variant = "project",
...props
}: TabProps & { variant?: "project" | "namespace" | "org" }) => (
<TabsPrimitive.Trigger
className={twMerge(
"flex h-10 items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
"flex h-10 items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:text-white",
variant === "project" && "data-[state=active]:border-primary",
variant === "namespace" && "data-[state=active]:border-namespace-v1",
variant === "org" && "data-[state=active]:border-org-v1",
className
)}
{...props}
frontend/src/index.css
+2
View File
@@ -40,6 +40,8 @@
/*legacy color schema */
/* Fonts */
--font-inter: "Inter", sans-serif;
--color-org-v1: #30B3FF;
--color-namespace-v1: #96ff59;
/* Primary */
--color-primary-50: #fffff5;
frontend/src/layouts/KmsLayout/KmsLayout.tsx
+8 -7
View File
@@ -38,7 +38,7 @@ export const KmsLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCube} />
@@ -55,7 +55,7 @@ export const KmsLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faLock} />
@@ -74,12 +74,12 @@ export const KmsLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUsers} />
</div>
Access Management
Project Access
</div>
</MenuItem>
)}
@@ -91,7 +91,7 @@ export const KmsLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBook} />
@@ -108,12 +108,12 @@ export const KmsLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCog} />
</div>
Settings
Project Settings
</div>
</MenuItem>
)}
@@ -125,6 +125,7 @@ export const KmsLayout = () => {
<Menu>
<Link to="/organization/projects">
<MenuItem
variant="project"
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<div className="w-6">
frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+12 -5
View File
@@ -4,11 +4,11 @@ import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-ic
import {
faArrowUpRightFromSquare,
faBook,
faBuilding,
faCaretDown,
faCheck,
faEnvelope,
faExclamationTriangle,
faGlobe,
faInfo,
faInfoCircle,
faServer,
@@ -20,11 +20,13 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useQueryClient } from "@tanstack/react-query";
import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
import { twMerge } from "tailwind-merge";
import { Mfa } from "@app/components/auth/Mfa";
import { createNotification } from "@app/components/notifications";
import SecurityClient from "@app/components/utilities/SecurityClient";
import {
Badge,
BreadcrumbContainer,
Button,
DropdownMenu,
@@ -199,6 +201,8 @@ export const Navbar = () => {
const isServerAdminPanel = location.pathname.startsWith("/admin");
const isOrgScope = breadcrumbs?.length === 1; // TODO: scott/akhil is this adequate?
return (
<div className="z-10 flex min-h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4">
<div>
@@ -230,10 +234,13 @@ export const Navbar = () => {
<DropdownMenu modal={false}>
<Link to="/organization/projects">
<div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
<div>
<FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
</div>
<div className="whitespace-nowrap">{currentOrg?.name}</div>
<Badge
variant="org"
className={twMerge("text-sm", !isOrgScope && "bg-transparent opacity-75")}
>
<FontAwesomeIcon icon={faGlobe} />
{currentOrg?.name}
</Badge>
<div className="mr-1 rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline!">
{getPlan(subscription)}
</div>
frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
+12 -9
View File
@@ -52,31 +52,31 @@ export const OrgSidebar = ({ isHidden }: Props) => {
<MenuGroup title="Overview">
<Link to="/organization/projects">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="org" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faTable} />
</div>
Projects
Overview
</div>
</MenuItem>
)}
</Link>
<Link to="/organization/access-management">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="org" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUsers} />
</div>
Access Control
Organization Access
</div>
</MenuItem>
)}
</Link>
<Link to="/organization/billing">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="org" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faMoneyBill} className="mr-4" />
@@ -88,7 +88,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
</Link>
<Link to="/organization/audit-logs">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="org" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBook} className="mr-4" />
@@ -100,7 +100,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
</Link>
<Link to="/organization/settings">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="org" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCog} className="mr-4" />
@@ -114,7 +114,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
<MenuGroup title="Resources">
<Link to="/organization/app-connections">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="org" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faPlug} className="mr-4" />
@@ -126,7 +126,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
</Link>
<Link to="/organization/networking">
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="org" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faNetworkWired} className="mr-4" />
@@ -145,6 +145,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
!subscription.has_used_trial && (
<Tooltip content="Start Free Pro Trial">
<MenuItem
variant="org"
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<FontAwesomeIcon
@@ -170,6 +171,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
)}
<Link to="/organization/secret-sharing">
<MenuItem
variant="org"
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<div className="w-6">
@@ -183,6 +185,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
{user.superAdmin && (
<Link to="/admin">
<MenuItem
variant="org"
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<div className="w-6">
frontend/src/layouts/PamLayout/PamLayout.tsx
+8 -8
View File
@@ -59,7 +59,7 @@ export const PamLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUser} />
@@ -76,7 +76,7 @@ export const PamLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBoxOpen} />
@@ -93,7 +93,7 @@ export const PamLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faDisplay} />
@@ -112,12 +112,12 @@ export const PamLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUsers} />
</div>
Access Management
Project Access
</div>
</MenuItem>
)}
@@ -129,7 +129,7 @@ export const PamLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBook} />
@@ -146,12 +146,12 @@ export const PamLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCog} />
</div>
Settings
Project Settings
</div>
</MenuItem>
)}
frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
+12 -12
View File
@@ -54,7 +54,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faSitemap} />
@@ -71,7 +71,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faFileLines} />
@@ -88,7 +88,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCertificate} />
@@ -105,7 +105,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faStamp} />
@@ -122,7 +122,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBell} />
@@ -139,7 +139,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faPuzzlePiece} />
@@ -156,7 +156,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faPlug} />
@@ -175,12 +175,12 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUsers} />
</div>
Access Management
Project Access
</div>
</MenuItem>
)}
@@ -192,7 +192,7 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBook} />
@@ -209,12 +209,12 @@ export const PkiManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCog} />
</div>
Settings
Project Settings
</div>
</MenuItem>
)}
frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+11 -8
View File
@@ -3,10 +3,10 @@ import { faStar } from "@fortawesome/free-regular-svg-icons";
import {
faCaretDown,
faCheck,
faCube,
faMagnifyingGlass,
faPlus,
faStar as faSolidStar,
faTable
faStar as faSolidStar
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link, linkOptions } from "@tanstack/react-router";
@@ -16,6 +16,7 @@ import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import { NewProjectModal } from "@app/components/projects";
import {
Badge,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
@@ -106,14 +107,16 @@ export const ProjectSelect = () => {
projectId: currentWorkspace.id
}}
>
<div className="flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary">
<div>
<FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
</div>
<div className="relative flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary">
<Tooltip content={currentWorkspace.name} className="max-w-96 break-words">
<div className="max-w-44 overflow-hidden text-ellipsis whitespace-nowrap">
<Badge
variant="project"
className="max-w-44 overflow-hidden text-sm text-ellipsis whitespace-nowrap"
>
<FontAwesomeIcon icon={faCube} />
{currentWorkspace?.name}
</div>
</Badge>
</Tooltip>
</div>
</Link>
frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
+11 -9
View File
@@ -82,6 +82,7 @@ export const SecretManagerLayout = () => {
>
{({ isActive }) => (
<MenuItem
variant="project"
isSelected={
isActive ||
location.pathname.startsWith(
@@ -105,7 +106,7 @@ export const SecretManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faPuzzlePiece} />
@@ -123,7 +124,7 @@ export const SecretManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faArrowsSpin} />
@@ -141,7 +142,7 @@ export const SecretManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCheckToSlot} />
@@ -166,7 +167,7 @@ export const SecretManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faPlug} />
@@ -185,12 +186,12 @@ export const SecretManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUsers} />
</div>
Access Management
Project Access
</div>
</MenuItem>
)}
@@ -202,7 +203,7 @@ export const SecretManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBook} />
@@ -219,12 +220,12 @@ export const SecretManagerLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCog} />
</div>
Settings
Project Settings
</div>
</MenuItem>
)}
@@ -236,6 +237,7 @@ export const SecretManagerLayout = () => {
<Menu>
<Link to="/organization/projects">
<MenuItem
variant="project"
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<div className="w-6">
frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
+8 -7
View File
@@ -69,7 +69,7 @@ export const SecretScanningLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faDatabase} />
@@ -86,7 +86,7 @@ export const SecretScanningLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex w-full gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faMagnifyingGlass} />
@@ -108,7 +108,7 @@ export const SecretScanningLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faPlug} />
@@ -127,12 +127,12 @@ export const SecretScanningLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUsers} />
</div>
Access Management
Project Access
</div>
</MenuItem>
)}
@@ -144,7 +144,7 @@ export const SecretScanningLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBook} />
@@ -166,7 +166,7 @@ export const SecretScanningLayout = () => {
<div className="w-6">
<FontAwesomeIcon icon={faCog} />
</div>
Settings
Project Settings
</div>
</MenuItem>
)}
@@ -178,6 +178,7 @@ export const SecretScanningLayout = () => {
<Menu>
<Link to="/organization/projects">
<MenuItem
variant="project"
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<div className="w-6">
frontend/src/layouts/SshLayout/SshLayout.tsx
+8 -7
View File
@@ -51,7 +51,7 @@ export const SshLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faServer} />
@@ -74,7 +74,7 @@ export const SshLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faStamp} />
@@ -97,12 +97,12 @@ export const SshLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faUsers} />
</div>
Access Management
Project Access
</div>
</MenuItem>
)}
@@ -114,7 +114,7 @@ export const SshLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faBook} />
@@ -131,12 +131,12 @@ export const SshLayout = () => {
}}
>
{({ isActive }) => (
<MenuItem isSelected={isActive}>
<MenuItem variant="project" isSelected={isActive}>
<div className="mx-1 flex gap-2">
<div className="w-6">
<FontAwesomeIcon icon={faCog} />
</div>
Settings
Project Settings
</div>
</MenuItem>
)}
@@ -148,6 +148,7 @@ export const SshLayout = () => {
<Menu>
<Link to="/organization/projects">
<MenuItem
variant="project"
className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
leftIcon={
<div className="w-6">
frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const AccessManagementPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="instance"
title="Access Control"
description="Manage server admins within your Infisical instance."
/>
frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const AuthenticationPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="instance"
title="Authentication"
description="Manage authentication settings for your Infisical instance."
/>
frontend/src/pages/admin/CachingPage/CachingPage.tsx
+5 -1
View File
@@ -15,7 +15,11 @@ export const CachingPage = () => {
</Helmet>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Caching" description="Manage caching for your Infisical instance." />
<PageHeader
scope="instance"
title="Caching"
description="Manage caching for your Infisical instance."
/>
<CachingPageForm />
</div>
</div>
frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const EncryptionPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="instance"
title="Encryption"
description="Manage encryption settings for your Infisical instance."
/>
frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const EnvironmentPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="instance"
title="Environment Variables"
description="Manage the environment variables for your Infisical instance."
/>
frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
+1
View File
@@ -18,6 +18,7 @@ export const GeneralPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="instance"
title="General"
description="Manage general settings for your Infisical instance."
/>
frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const IntegrationsPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="instance"
title="Integrations"
description="Manage integrations for your Infisical instance."
/>
frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const ResourceOverviewPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="instance"
title="Resource Overview"
description="Manage resources within your Infisical instance."
/>
frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
+1 -1
View File
@@ -153,7 +153,7 @@ const UserPanelTable = ({
icon={adminsOnly && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-2">
<FontAwesomeIcon icon={faUserShield} className="text-yellow-700" />
<span>Server Admins</span>
</div>
frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const AlertingPage = () => {
</Helmet>
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Alerting"
description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
/>
frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.name}>
<PageHeader scope="project" title={data.name}>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
+1
View File
@@ -17,6 +17,7 @@ export const CertificateAuthoritiesPage = () => {
</Helmet>
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Certificate Authorities"
description="Manage certificate authorities for issuing and signing certificates"
/>
frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
+1
View File
@@ -33,6 +33,7 @@ export const CertificatesPage = () => {
</Helmet>
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Certificates"
description="View and track issued certificates, monitor expiration dates, and manage certificate lifecycles."
/>
frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
+1
View File
@@ -45,6 +45,7 @@ export const IntegrationsListPage = () => {
<div className="relative container mx-auto max-w-7xl pb-12 text-white">
<div className="mb-8">
<PageHeader
scope="project"
title="Integrations"
description="Manage integrations with third-party certificate services."
/>
frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const PkiCollectionPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.name}>
<PageHeader scope="project" title={data.name}>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.name}>
<PageHeader scope="project" title={data.name}>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const PkiSubscribersPage = () => {
<div className="container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Subscribers"
description="Manage subscribers that request and receive certificates, including user devices, servers, and services."
/>
frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
+1
View File
@@ -106,6 +106,7 @@ export const PkiTemplateListPage = () => {
<div className="container mx-auto flex flex-col justify-between text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Certificate Templates"
description="Manage certificate template to request and issue dynamic certificates following a strict format."
/>
frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const SettingsPage = () => {
<title>{t("common.head-title", { title: t("settings.project.title") })}</title>
</Helmet>
<div className="w-full max-w-7xl">
<PageHeader title={t("settings.project.title")} />
<PageHeader scope="project" title={t("settings.project.title")} />
<Tabs defaultValue={tabs[0].key}>
<TabList>
{tabs.map((tab) => (
frontend/src/pages/kms/KmipPage/KmipPage.tsx
+1
View File
@@ -18,6 +18,7 @@ export const KmipPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="KMIP"
description="Integrate with Infisical KMS via Key Management Interoperability Protocol."
/>
frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
+2 -1
View File
@@ -18,7 +18,8 @@ export const OverviewPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Overview Page"
scope="project"
title="Overview"
description="Manage keys and perform cryptographic operations."
/>
<ProjectPermissionCan
frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const SettingsPage = () => {
<title>{t("common.head-title", { title: t("settings.project.title") })}</title>
</Helmet>
<div className="w-full max-w-7xl">
<PageHeader title="Settings" />
<PageHeader scope="project" title="Settings" />
<Tabs defaultValue={tabs[0].key}>
<TabList>
{tabs.map((tab) => (
frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
+3 -2
View File
@@ -82,7 +82,8 @@ export const AccessManagementPage = () => {
</Helmet>
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Organization Access Control"
scope="org"
title="Access Control"
description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
/>
{!currentOrg.shouldUseNewPrivilegeSystem && (
@@ -115,7 +116,7 @@ export const AccessManagementPage = () => {
{tabSections
.filter((el) => !el.isHidden)
.map((el) => (
<Tab value={el.key} key={`org-access-tab-${el.key}`}>
<Tab variant="org" value={el.key} key={`org-access-tab-${el.key}`}>
{el.label}
</Tab>
))}
frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
+1
View File
@@ -22,6 +22,7 @@ export const AppConnectionsPage = withPermission(
<div className="flex w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader
scope="org"
className="w-full"
title="App Connections"
description="Manage organization App Connections"
frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
+2 -1
View File
@@ -16,7 +16,8 @@ export const AuditLogsPage = () => {
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader
title="Audit logs"
scope="org"
title="Audit Logs"
description="Audit logs for security and compliance teams to monitor information access."
/>
<LogsSection pageView />
frontend/src/pages/organization/BillingPage/BillingPage.tsx
+2 -1
View File
@@ -18,8 +18,9 @@ export const BillingPage = () => {
<meta property="og:image" content="/images/message.png" />
</Helmet>
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl px-6">
<div className="w-full max-w-7xl">
<PageHeader
scope="org"
title={t("billing.title")}
description="View your billing plan, next billing cycle."
/>
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
+3 -1
View File
@@ -25,7 +25,9 @@ export const BillingTabGroup = withPermission(
<Tabs defaultValue={tabs[0].key}>
<TabList>
{tabsFiltered.map((tab) => (
<Tab value={tab.key}>{tab.name}</Tab>
<Tab variant="org" value={tab.key}>
{tab.name}
</Tab>
))}
</TabList>
<TabPanel value={tabs[0].key}>
frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.group.name}>
<PageHeader scope="org" title={data.group.name}>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.identity.name} />
<PageHeader scope="org" title={data.identity.name} />
<div className="flex">
<div className="mr-4 w-96">
<IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
+1
View File
@@ -14,6 +14,7 @@ export const NetworkingPage = () => {
<div className="flex w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader
scope="org"
title="Networking"
description="Manage gateways and relays to securely access private network resources from Infisical"
/>
frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export const NetworkingTabGroup = () => {
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabList>
{tabs.map((tab) => (
<Tab value={tab.key} key={tab.key}>
<Tab variant="org" value={tab.key} key={tab.key}>
{tab.name}
</Tab>
))}
frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
+2 -1
View File
@@ -65,7 +65,8 @@ export const ProjectsPage = () => {
</Helmet>
<div className="mb-4 flex flex-col items-start justify-start">
<PageHeader
title="Projects"
scope="org"
title="Overview"
description="Your team's complete security toolkit - organized and ready when you need them."
/>
</div>
frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
+1
View File
@@ -81,6 +81,7 @@ export const Page = () => {
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="org"
title={
<div className="flex flex-col">
<div>
frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
+1
View File
@@ -22,6 +22,7 @@ export const SecretSharingPage = () => {
<div className="h-full">
<div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
<PageHeader
scope="org"
title="Secret Sharing"
description="Share secrets securely using a shareable link"
>
frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const SecretSharingSettingsPage = withPermission(
</Helmet>
<div className="flex w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader title="Secret Share Settings" />
<PageHeader scope="org" title="Secret Share Settings" />
<SecretSharingSettingsTabGroup />
</div>
</div>
frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const SettingsPage = () => {
</Helmet>
<div className="flex w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader title={t("settings.org.title")} />
<PageHeader scope="org" title={t("settings.org.title")} />
<OrgTabGroup />
</div>
</div>
frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export const OrgTabGroup = () => {
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabList>
{tabs.map((tab) => (
<Tab value={tab.key} key={tab.key}>
<Tab variant="org" value={tab.key} key={tab.key}>
{tab.name}
</Tab>
))}
frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
+1
View File
@@ -119,6 +119,7 @@ const Page = withPermission(
{membership && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="org"
title={
membership.user.firstName || membership.user.lastName
? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()
frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
+5 -1
View File
@@ -23,7 +23,11 @@ export const PamAccountsPage = () => {
<div className="h-full bg-bunker-800">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Accounts" description="View, access, and manage accounts." />
<PageHeader
scope="project"
title="Accounts"
description="View, access, and manage accounts."
/>
<PamAccountsSection />
</div>
</div>
frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
+1
View File
@@ -24,6 +24,7 @@ export const PamResourcesPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Resources"
description="Manage resources such as servers, databases, and more."
/>
frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
+1
View File
@@ -23,6 +23,7 @@ const Page = () => {
{session && (
<div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
<PageHeader
scope="project"
title={`${session.accountName} Session`}
description={`View details for this ${session.accountName} session.`}
/>
frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
+1
View File
@@ -24,6 +24,7 @@ export const PamSessionPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Sessions"
description="Filter and search through account sessions."
/>
frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export const SettingsPage = () => {
<title>{t("common.head-title", { title: t("settings.project.title") })}</title>
</Helmet>
<div className="w-full max-w-7xl">
<PageHeader title="Settings" description="Configure your PAM project." />
<PageHeader scope="project" title="Settings" description="Configure your PAM project." />
<Tabs defaultValue="tab-project-general">
<TabList>
<Tab value="tab-project-general">General</Tab>
frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+1
View File
@@ -40,6 +40,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Access Control"
description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
/>
frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
+1
View File
@@ -23,6 +23,7 @@ export const AppConnectionsPage = withProjectPermission(
<div className="flex w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader
scope="project"
className="w-full"
title="App Connections"
description="Manage project App Connections"
frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const AuditLogsPage = () => {
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader
scope="project"
title="Audit logs"
description="Audit logs for security and compliance teams to monitor information access."
/>
frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{groupMembership ? (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={groupMembership.group.name} />
<PageHeader scope="project" title={groupMembership.group.name} />
<div className="flex">
<div className="mr-4 w-96">
<GroupDetailsSection groupMembership={groupMembership} />
frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+1
View File
@@ -117,6 +117,7 @@ const Page = () => {
{identityMembershipDetails ? (
<>
<PageHeader
scope="project"
title={identityMembershipDetails?.identity?.name}
description={`Identity joined on ${identityMembershipDetails?.createdAt && formatRelative(new Date(identityMembershipDetails?.createdAt || ""), new Date())}`}
>
frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
+1
View File
@@ -119,6 +119,7 @@ export const Page = () => {
{membershipDetails ? (
<>
<PageHeader
scope="project"
title={
membershipDetails.user.firstName || membershipDetails.user.lastName
? `${membershipDetails.user.firstName} ${membershipDetails.user.lastName}`
frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
+1
View File
@@ -90,6 +90,7 @@ const Page = () => {
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title={
<div className="flex flex-col">
<div>
frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
+1
View File
@@ -260,6 +260,7 @@ export const CommitDetailsTab = ({
Commit History
</Button>
<PageHeader
scope="project"
title={`${parsedCommitDetails.changes?.message}` || "No message"}
description={
<>
frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
+1
View File
@@ -307,6 +307,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
<div className="h-full w-full">
<div>
<PageHeader
scope="project"
title={`Restore folder at commit ${selectedCommitId.substring(0, 8)}`}
description={`Will return all changes in this folder to how they appeared at the point of commit ${selectedCommitId.substring(0, 8)}. Any modifications made after this commit will be undone.`}
/>
frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
+1
View File
@@ -49,6 +49,7 @@ export const CommitsPage = () => {
<div className="mx-auto flex h-full w-full max-w-7xl justify-center bg-bunker-800 py-4 text-white">
<div className="w-full max-w-[75vw]">
<PageHeader
scope="project"
title="Commits"
description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states."
/>
frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
+1
View File
@@ -94,6 +94,7 @@ export const IntegrationDetailsByIDPage = () => {
{integration ? (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title={`${integrationSlugNameMapping[integration.integration]} Integration`}
>
<DropdownMenu>
frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
+1
View File
@@ -48,6 +48,7 @@ export const IntegrationsListPage = () => {
<div className="relative container mx-auto max-w-7xl pb-12 text-white">
<div className="mb-8">
<PageHeader
scope="project"
title="Integrations"
description="Manage integrations with third-party services."
/>
frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+1
View File
@@ -914,6 +914,7 @@ export const OverviewPage = () => {
<div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:scheme-dark">
<div className="flex w-full items-baseline justify-between">
<PageHeader
scope="project"
title="Secrets Overview"
description={
<p className="text-md text-bunker-300">
frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
+1
View File
@@ -40,6 +40,7 @@ export const SecretApprovalsPage = () => {
</Helmet>
<div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
<PageHeader
scope="project"
title="Approval Workflows"
description="Create approval policies for any modifications to secrets in sensitive environments and folders."
/>
frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
+1
View File
@@ -762,6 +762,7 @@ const Page = () => {
return (
<div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:scheme-dark">
<PageHeader
scope="project"
title="Secrets Management"
description={
<p className="text-md text-bunker-300">
frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
+1
View File
@@ -147,6 +147,7 @@ const Page = () => {
return (
<div className="container mx-auto w-full max-w-7xl bg-bunker-800 text-white">
<PageHeader
scope="project"
title="Secret Rotation"
description="Stop manually rotating secrets and automate credential rotation."
>
frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
+1
View File
@@ -42,6 +42,7 @@ export const SettingsPage = () => {
</Helmet>
<div className="w-full max-w-7xl">
<PageHeader
scope="project"
title="Settings"
description="Configure your secret manager's encryption, environments, webhooks and other configurations."
/>
frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
+1
View File
@@ -26,6 +26,7 @@ export const SecretScanningDataSourcesPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Data Sources"
description="Manage your Secret Scanning data sources."
/>
frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
+5 -1
View File
@@ -23,7 +23,11 @@ export const SecretScanningFindingsPage = () => {
<div className="h-full bg-bunker-800">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title="Findings" description="View Secret Leaks across your project." />
<PageHeader
scope="project"
title="Findings"
description="View Secret Leaks across your project."
/>
<SecretScanningFindingsSection />
</div>
</div>
frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
+1
View File
@@ -19,6 +19,7 @@ export const SettingsPage = () => {
</Helmet>
<div className="w-full max-w-7xl">
<PageHeader
scope="project"
title="Settings"
description="Configure your Secret Scanning product's configurations."
/>
frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
+5 -1
View File
@@ -17,7 +17,11 @@ export const SettingsPage = () => {
<title>{t("common.head-title", { title: t("settings.project.title") })}</title>
</Helmet>
<div className="w-full max-w-7xl">
<PageHeader title="Settings" description="Configure your SSH product's configurations." />
<PageHeader
scope="project"
title="Settings"
description="Configure your SSH product's configurations."
/>
<Tabs defaultValue="tab-project-general">
<TabList>
<Tab value="tab-project-general">General</Tab>
frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.friendlyName}>
<PageHeader scope="project" title={data.friendlyName}>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const SshCasPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="SSH Certificate Authorities"
description="Manage the SSH certificate authorities used to sign user and host certificates, including custom and default CAs."
/>
frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const SshCertsPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="SSH Certificates"
description="View and audit all issued SSH certificates, including validity and associated access metadata."
/>
frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ const Page = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.name}>
<PageHeader scope="project" title={data.name}>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
+1
View File
@@ -16,6 +16,7 @@ export const SshHostsPage = () => {
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
scope="project"
title="Hosts"
description="Manage your SSH hosts, configure access policies, and define login behavior for secure connections."
/>