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

misc: addressed comments

Browse Source
This commit is contained in:
Sheen Capadngan
2025-03-26 23:28:49 +08:00
parent 6ebc766308
commit 67a0e5ae68
4 changed files with 101 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
return ( return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}> <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<ModalContent title="Privilege Management System Upgrade"> <ModalContent title="Privilege Management System Upgrade" className="max-w-2xl">
<div className="mb-4"> <div className="mb-4">
<h4 className="mb-2 text-lg font-semibold"> <h4 className="mb-2 text-lg font-semibold">
Introducing Permission-Based Privilege Management Introducing Permission-Based Privilege Management
frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+56 -63
View File
@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
import { useNavigate, useSearch } from "@tanstack/react-router"; import { useNavigate, useSearch } from "@tanstack/react-router";
import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2"; import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context"; import { useWorkspace } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { ProjectType } from "@app/hooks/api/workspace/types"; import { ProjectType } from "@app/hooks/api/workspace/types";
import { ProjectAccessControlTabs } from "@app/types/project"; import { ProjectAccessControlTabs } from "@app/types/project";
@@ -16,73 +15,67 @@ import {
ServiceTokenTab ServiceTokenTab
} from "./components"; } from "./components";
const Page = withProjectPermission( const Page = () => {
() => { const navigate = useNavigate();
const navigate = useNavigate(); const { currentWorkspace } = useWorkspace();
const { currentWorkspace } = useWorkspace(); const selectedTab = useSearch({
const selectedTab = useSearch({ strict: false,
strict: false, select: (el) => el.selectedTab
select: (el) => el.selectedTab });
const updateSelectedTab = (tab: string) => {
navigate({
to: `/${currentWorkspace.type}/$projectId/access-management` as const,
search: (prev) => ({ ...prev, selectedTab: tab }),
params: {
projectId: currentWorkspace.id
}
}); });
};
const updateSelectedTab = (tab: string) => { return (
navigate({ <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
to: `/${currentWorkspace.type}/$projectId/access-management` as const, <div className="mx-auto mb-6 w-full max-w-7xl">
search: (prev) => ({ ...prev, selectedTab: tab }), <PageHeader
params: { title="Access Control"
projectId: currentWorkspace.id description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
} />
}); <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
}; <TabList>
<Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
return ( <Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white"> <Tab value={ProjectAccessControlTabs.Identities}>
<div className="mx-auto mb-6 w-full max-w-7xl"> <div className="flex items-center">
<PageHeader <p>Machine Identities</p>
title="Access Control" </div>
description="Manage fine-grained access for users, groups, roles, and identities within your project resources." </Tab>
/>
<Tabs value={selectedTab} onValueChange={updateSelectedTab}>
<TabList>
<Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
<Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
<Tab value={ProjectAccessControlTabs.Identities}>
<div className="flex items-center">
<p>Machine Identities</p>
</div>
</Tab>
{currentWorkspace?.type === ProjectType.SecretManager && (
<Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
)}
<Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
</TabList>
<TabPanel value={ProjectAccessControlTabs.Member}>
<MembersTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Groups}>
<GroupsTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Identities}>
<IdentityTab />
</TabPanel>
{currentWorkspace?.type === ProjectType.SecretManager && ( {currentWorkspace?.type === ProjectType.SecretManager && (
<TabPanel value={ProjectAccessControlTabs.ServiceTokens}> <Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
<ServiceTokenTab />
</TabPanel>
)} )}
<TabPanel value={ProjectAccessControlTabs.Roles}> <Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
<ProjectRoleListTab /> </TabList>
<TabPanel value={ProjectAccessControlTabs.Member}>
<MembersTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Groups}>
<GroupsTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Identities}>
<IdentityTab />
</TabPanel>
{currentWorkspace?.type === ProjectType.SecretManager && (
<TabPanel value={ProjectAccessControlTabs.ServiceTokens}>
<ServiceTokenTab />
</TabPanel> </TabPanel>
</Tabs> )}
</div> <TabPanel value={ProjectAccessControlTabs.Roles}>
<ProjectRoleListTab />
</TabPanel>
</Tabs>
</div> </div>
); </div>
}, );
{ };
action: ProjectPermissionActions.Read,
subject: ProjectPermissionSub.Member
}
);
export const AccessControlPage = () => { export const AccessControlPage = () => {
const { t } = useTranslation(); const { t } = useTranslation();
frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx
+22 -13
View File
@@ -1,17 +1,26 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { GroupsSection } from "./components"; import { GroupsSection } from "./components";
export const GroupsTab = () => { export const GroupsTab = withProjectPermission(
return ( () => {
<motion.div return (
key="panel-groups" <motion.div
transition={{ duration: 0.15 }} key="panel-groups"
initial={{ opacity: 0, translateX: 30 }} transition={{ duration: 0.15 }}
animate={{ opacity: 1, translateX: 0 }} initial={{ opacity: 0, translateX: 30 }}
exit={{ opacity: 0, translateX: 30 }} animate={{ opacity: 1, translateX: 0 }}
> exit={{ opacity: 0, translateX: 30 }}
<GroupsSection /> >
</motion.div> <GroupsSection />
); </motion.div>
}; );
},
{
action: ProjectPermissionActions.Read,
subject: ProjectPermissionSub.Groups
}
);
frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx
+22 -13
View File
@@ -1,17 +1,26 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { MembersSection } from "./components"; import { MembersSection } from "./components";
export const MembersTab = () => { export const MembersTab = withProjectPermission(
return ( () => {
<motion.div return (
key="panel-project-members" <motion.div
transition={{ duration: 0.15 }} key="panel-project-members"
initial={{ opacity: 0, translateX: 30 }} transition={{ duration: 0.15 }}
animate={{ opacity: 1, translateX: 0 }} initial={{ opacity: 0, translateX: 30 }}
exit={{ opacity: 0, translateX: 30 }} animate={{ opacity: 1, translateX: 0 }}
> exit={{ opacity: 0, translateX: 30 }}
<MembersSection /> >
</motion.div> <MembersSection />
); </motion.div>
}; );
},
{
action: ProjectPermissionActions.Read,
subject: ProjectPermissionSub.Member
}
);