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

Merge pull request #4668 from Infisical/scope-differentiation

Browse Source 
frontend(UI): Scope Differentiation UI Improvements
This commit is contained in:
Scott Wilson
2025-10-13 15:57:32 -07:00
committed by GitHub
parent 3a999e906c c1ccaaad03
commit 43d569262f
84 changed files with 234 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/public/locales/en/translations.json
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",

9
frontend/src/components/v2/Badge/Badge.tsx
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"
}
}
}

9
frontend/src/components/v2/Menu/Menu.tsx
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}

25
frontend/src/components/v2/PageHeader/PageHeader.tsx
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>

12
frontend/src/components/v2/Tabs/Tabs.tsx
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}

2
frontend/src/index.css
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;

15
frontend/src/layouts/KmsLayout/KmsLayout.tsx
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">

17
frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
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>

21
frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
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">

16
frontend/src/layouts/PamLayout/PamLayout.tsx
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>
)}

24
frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
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>
)}

19
frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
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>

20
frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
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">

15
frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
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">

15
frontend/src/layouts/SshLayout/SshLayout.tsx
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">

1
frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
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."
/>

1
frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
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."
/>

6
frontend/src/pages/admin/CachingPage/CachingPage.tsx
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>

1
frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
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."
/>

1
frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
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."
/>

1
frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
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."
/>

1
frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
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."
/>

1
frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
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."
/>

2
frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
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>

1
frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
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."
/>

2
frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
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">

1
frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
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"
/>

1
frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
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."
/>

1
frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
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."
/>

2
frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
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">

2
frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
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">

1
frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
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."
/>

1
frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
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."
/>

2
frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
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) => (

1
frontend/src/pages/kms/KmipPage/KmipPage.tsx
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."
/>

3
frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
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

2
frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
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) => (

5
frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
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>
))}

1
frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
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"

3
frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
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 />

3
frontend/src/pages/organization/BillingPage/BillingPage.tsx
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."
/>

4
frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
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}>

2
frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
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">

2
frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
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} />

1
frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
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"
/>

2
frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx
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>
))}

3
frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
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>

1
frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
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>

1
frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
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"
>

2
frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
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>

2
frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
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>

2
frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
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>
))}

1
frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
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()

6
frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
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>

1
frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
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."
/>

1
frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
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.`}
/>

1
frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
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."
/>

2
frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
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>

1
frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
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."
/>

1
frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
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"

1
frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
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."
/>

2
frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
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} />

1
frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
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())}`}
>

1
frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
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}`

1
frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
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>

1
frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
View File

@@ -260,6 +260,7 @@ export const CommitDetailsTab = ({
Commit History
</Button>
<PageHeader
scope="project"
title={`${parsedCommitDetails.changes?.message}` || "No message"}
description={
<>

1
frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
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.`}
/>

1
frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
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."
/>

1
frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
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>

1
frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
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."
/>

1
frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
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">

1
frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
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."
/>

1
frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
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">

1
frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
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."
>

1
frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
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."
/>

1
frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
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."
/>

6
frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
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>

1
frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
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."
/>

6
frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
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>

2
frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
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">

1
frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
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."
/>

1
frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
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."
/>

2
frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
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">

1
frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
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."
/>