diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx index 4025ecc17..6be963e2b 100644 --- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx +++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx @@ -16,15 +16,19 @@ import { faSignOut, faToolbox, faUser, + faUserCog, + faUserPlus, faUsers } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router"; +import { UserPlusIcon } from "lucide-react"; import { twMerge } from "tailwind-merge"; import { Mfa } from "@app/components/auth/Mfa"; import { createNotification } from "@app/components/notifications"; +import { OrgPermissionCan } from "@app/components/permissions"; import SecurityClient from "@app/components/utilities/SecurityClient"; import { BreadcrumbContainer, @@ -44,7 +48,13 @@ import { } from "@app/components/v2"; import { Badge, InstanceIcon, OrgIcon, SubOrgIcon } from "@app/components/v3"; import { envConfig } from "@app/config/env"; -import { useOrganization, useSubscription, useUser } from "@app/context"; +import { + OrgPermissionActions, + OrgPermissionSubjects, + useOrganization, + useSubscription, + useUser +} from "@app/context"; import { isInfisicalCloud } from "@app/helpers/platform"; import { useToggle } from "@app/hooks"; import { @@ -567,15 +577,36 @@ export const Navbar = () => { )} - {user.superAdmin && !location.pathname.startsWith("/admin") && ( - - - Server Console - - )} + {/* eslint-disable-next-line no-nested-ternary */} + {!location.pathname.startsWith("/admin") ? ( + user.superAdmin ? ( + + + Server Console + + ) : ( + + {(isAllowed) => + isAllowed ? ( + + + Invite Members + + ) : null + } + + ) + ) : null}
@@ -657,8 +688,27 @@ export const Navbar = () => {
- Personal Settings + }> + Personal Settings + + + {(isAllowed) => + isAllowed ? ( + + }> + Invite Members + + + ) : null + } + { const { subscription } = useSubscription(); const { currentOrg, isSubOrganization } = useOrganization(); + const navigate = useNavigate(); const orgId = currentOrg?.id ?? ""; const { user } = useUser(); const userId = user?.id || ""; @@ -55,6 +58,22 @@ export const OrgMembersSection = () => { const [selectedMemberIds, setSelectedMemberIds] = useState([]); + const urlAction = useSearch({ + from: ROUTE_PATHS.Organization.AccessControlPage.id, + select: (el) => el.action, + structuralSharing: true + }); + + useEffect(() => { + if (urlAction === "invite-members") { + handlePopUpOpen("addMember"); + navigate({ + to: ".", + search: ({ action, ...search }) => search + }); + } + }, [urlAction]); + const { mutateAsync: deleteMutateAsync } = useDeleteOrgMembership(); const { mutateAsync: deleteBatchMutateAsync } = useDeleteOrgMembershipBatch(); const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership(); @@ -194,13 +213,13 @@ export const OrgMembersSection = () => { )}