github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/auth/users/user/effectivePolicies.jsx (about) 1 import React, {useEffect, useState} from "react"; 2 import {useOutletContext} from "react-router-dom"; 3 4 import {UserHeaderWithContext} from "./userHeaderWithContext"; 5 import {useAPIWithPagination} from "../../../../lib/hooks/api"; 6 import {auth} from "../../../../lib/api"; 7 import {Paginator} from "../../../../lib/components/pagination"; 8 import { 9 ActionGroup, 10 ActionsBar, 11 DataTable, 12 FormattedDate, 13 Loading, 14 AlertError, 15 RefreshButton 16 } from "../../../../lib/components/controls"; 17 import {Link} from "../../../../lib/components/nav"; 18 import {useRouter} from "../../../../lib/hooks/router"; 19 20 21 const UserEffectivePoliciesList = ({ userId, after, onPaginate }) => { 22 23 const [refresh, setRefresh] = useState(false); 24 25 const {results, loading, error, nextPage} = useAPIWithPagination(() => { 26 return auth.listUserPolicies(userId, true, after); 27 }, [userId, after, refresh]); 28 29 let content; 30 if (loading) content = <Loading/>; 31 else if (error) content= <AlertError error={error}/>; 32 else content = ( 33 <> 34 <DataTable 35 keyFn={policy => policy.id} 36 rowFn={policy => [ 37 <Link href={{pathname: '/auth/policies/:policyId', params: {policyId: policy.id}}}>{policy.id}</Link>, 38 <FormattedDate dateValue={policy.creation_date}/> 39 ]} 40 headers={['Policy ID', 'Created At']} 41 results={results} 42 emptyState={'No policies found'} 43 /> 44 45 <Paginator onPaginate={onPaginate} after={after} nextPage={nextPage}/> 46 </> 47 ); 48 49 return ( 50 <> 51 <UserHeaderWithContext userId={userId} page={'effectivePolicies'}/> 52 53 <ActionsBar> 54 <ActionGroup orientation="left"> 55 <p> 56 <small> 57 <strong> 58 All policies attached to this user, through direct attachment or via group memberships 59 </strong> 60 </small> 61 </p> 62 </ActionGroup> 63 64 <ActionGroup orientation="right"> 65 <RefreshButton onClick={() => setRefresh(!refresh)}/> 66 </ActionGroup> 67 </ActionsBar> 68 69 <div className="mt-2"> 70 {content} 71 </div> 72 </> 73 ); 74 }; 75 76 const UserEffectivePoliciesContainer = () => { 77 const router = useRouter(); 78 const { after } = router.query; 79 const { userId } = router.params; 80 return (!userId) ? <></> : <UserEffectivePoliciesList 81 userId={userId} 82 after={(after) ? after : ""} 83 onPaginate={after => router.push({pathname: '/auth/users/:userId/policies/effective', params: {userId}, query: {after}})} 84 />; 85 }; 86 87 const UserEffectivePoliciesPage = () => { 88 const {setActiveTab} = useOutletContext(); 89 useEffect(() => setActiveTab("users"), [setActiveTab]); 90 return <UserEffectivePoliciesContainer/>; 91 }; 92 93 export default UserEffectivePoliciesPage;