github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/lib/components/auth/nav.jsx (about) 1 import React from "react"; 2 3 import Nav from "react-bootstrap/Nav"; 4 import Breadcrumb from "react-bootstrap/Breadcrumb"; 5 import {BreadcrumbItem} from "react-bootstrap"; 6 import {useLoginConfigContext} from "../../hooks/conf"; 7 8 import {Link, NavItem} from "../nav"; 9 10 11 export const UserNav = ({ userId, page = 'groups' }) => { 12 const {RBAC: rbac} = useLoginConfigContext(); 13 return ( 14 <Nav justify variant="tabs"> 15 <Link component={NavItem} active={page === 'groups'} href={{pathname: '/auth/users/:userId/groups', params: {userId}}}> 16 Group Memberships 17 </Link> 18 { 19 rbac !== 'simplified' && ( 20 <> 21 <Link component={NavItem} active={page === 'policies'} href={{pathname: '/auth/users/:userId/policies', params: {userId}}}> 22 Directly Attached Policies 23 </Link> 24 <Link component={NavItem} active={page === 'effectivePolicies'} href={{pathname: '/auth/users/:userId/policies/effective', params: {userId}}}> 25 Effective Attached Policies 26 </Link> 27 </> 28 ) 29 30 } 31 32 <Link component={NavItem} active={page === 'credentials'} href={{pathname: '/auth/users/:userId/credentials', params: {userId}}}> 33 Access Credentials 34 </Link> 35 </Nav> 36 ); 37 }; 38 39 40 export const GroupNav = ({ groupId, page = 'groups' }) => { 41 const {RBAC: rbac} = useLoginConfigContext(); 42 return ( 43 <> 44 {rbac === 'simplified' ? 45 <Link component={NavItem} active={page === 'members'} href={{pathname: '/auth/groups/:groupId/members', params: {groupId}}}> 46 Group Memberships 47 </Link> : 48 <Nav justify variant="tabs"> 49 <Link component={NavItem} active={page === 'members'} href={{pathname: '/auth/groups/:groupId/members', params: {groupId}}}> 50 Group Memberships 51 </Link> 52 <Link component={NavItem} active={page === 'policies'} href={{pathname: '/auth/groups/:groupId/policies', params: {groupId}}}> 53 Attached Policies 54 </Link> 55 </Nav>} 56 </> 57 ); 58 }; 59 60 export const UserHeader = ({ userEmail, userId, page }) => { 61 return ( 62 <div className="mb-4"> 63 <Breadcrumb> 64 <Link component={BreadcrumbItem} href='/auth/users'> 65 Users 66 </Link> 67 <Link component={BreadcrumbItem} href={{pathname: '/auth/users/:userId', params: {userId}}}> 68 {userEmail} 69 </Link> 70 </Breadcrumb> 71 72 <UserNav userId={userId} page={page}/> 73 </div> 74 ); 75 }; 76 77 export const GroupHeader = ({ groupId, page }) => { 78 return ( 79 <div className="mb-4"> 80 <Breadcrumb> 81 <Link component={BreadcrumbItem} href='/auth/groups'> 82 Groups 83 </Link> 84 <Link component={BreadcrumbItem} href={{pathname: '/auth/groups/:groupId', params: {groupId}}}> 85 {groupId} 86 </Link> 87 </Breadcrumb> 88 89 <GroupNav groupId={groupId} page={page}/> 90 </div> 91 ); 92 }; 93 94 export const PolicyHeader = ({ policyId }) => { 95 return ( 96 <div className="mb-4"> 97 <Breadcrumb> 98 <Link component={BreadcrumbItem} href='/auth/policies'> 99 Policies 100 </Link> 101 <Link component={BreadcrumbItem} href={{pathname: '/auth/policies/:policyId', params: {policyId}}}> 102 {policyId} 103 </Link> 104 </Breadcrumb> 105 </div> 106 ); 107 };