diff --git a/ui/src/app/dashboard/view/ActionsTab.js b/ui/src/app/dashboard/view/ActionsTab.js index b28e954e7..030f870a1 100644 --- a/ui/src/app/dashboard/view/ActionsTab.js +++ b/ui/src/app/dashboard/view/ActionsTab.js @@ -21,16 +21,34 @@ import { useGetDisabledRegistrationsQuery, useGetUnapprovedRegistrationsQuery } from '../../store/dynamic-registration/DynamicRegistrationSlice'; +import { useIsAdmin, useIsApprover } from '../../core/user/UserContext'; export function ActionsTab() { const { path, url } = useRouteMatch(); - const {data: users = [], isFetching: loadingUsers} = useGetNewUsersQuery(); - const {data: disabledSources = [], isFetching: loadingSources} = useGetDisabledSourcesQuery(); - const {data: unApprovedSources = [], isFetching: loadingApprovals} = useGetUnapprovedSourcesQuery(); - const {data: unApprovedRegistrations = []} = useGetUnapprovedRegistrationsQuery(); - const {data: disabledRegistrations = []} = useGetDisabledRegistrationsQuery(); + const {data: users, isFetching: loadingUsers, isError: usersError} = useGetNewUsersQuery(); + const {data: disabledSources, isFetching: loadingSources, isError: enableSourcesError} = useGetDisabledSourcesQuery(); + const {data: unApprovedSources, isFetching: loadingApprovals, isError: approveSourcesError} = useGetUnapprovedSourcesQuery(); + const {data: unApprovedRegistrations, isError: approveRegistrationsError } = useGetUnapprovedRegistrationsQuery(); + const {data: disabledRegistrations, isError: enableRegistrationsError } = useGetDisabledRegistrationsQuery(); + + const isAdmin = useIsAdmin(); + const isApprover = useIsApprover(); + + React.useEffect(() => setState((s) => ({ ...s, users: users && !usersError })), [users, usersError]); + React.useEffect(() => setState((s) => ({ ...s, enableSources: disabledSources && !enableSourcesError })), [disabledSources, enableSourcesError]); + React.useEffect(() => setState((s) => ({ ...s, enableRegistrations: disabledRegistrations && !enableRegistrationsError })), [disabledRegistrations, enableRegistrationsError]); + React.useEffect(() => setState((s) => ({ ...s, approveSources: unApprovedSources && !approveSourcesError })), [unApprovedSources, approveSourcesError]); + React.useEffect(() => setState((s) => ({ ...s, approveRegistrations: unApprovedRegistrations && !approveRegistrationsError })), [unApprovedRegistrations, approveRegistrationsError]); + + const [state, setState] = React.useState({ + users: false, + enableSources: false, + enableRegistrations: false, + approveSources: false, + approveRegistrations: false + }); return ( <> @@ -50,39 +68,43 @@ export function ActionsTab() { activeKey="/home" className="flex-column" > - {disabledSources !== null && + {state.enableSources && Enable Metadata Sources - { disabledSources.length ? {disabledSources.length} : '' } + { disabledSources?.length ? {disabledSources?.length} : '' } } + {isApprover && state.approveSources && Approve Metadata Sources - { unApprovedSources.length ? {unApprovedSources.length} : '' } + { unApprovedSources?.length ? {unApprovedSources?.length} : '' } - {disabledRegistrations && + } + {state.enableRegistrations && Enable Dynamic Registrations - { disabledRegistrations.length ? {disabledRegistrations.length} : '' } + { disabledRegistrations?.length ? {disabledRegistrations?.length} : '' } } + {isApprover && state.approveRegistrations && Approve Dynamic Registrations - { unApprovedRegistrations.length ? {unApprovedRegistrations.length} : '' } + { unApprovedRegistrations?.length ? {unApprovedRegistrations?.length} : '' } - {users !== null && + } + {isAdmin && state.users && User Access Request - { users?.length ? {users.length} : '' } + { users?.length ? {users?.length} : '' } } @@ -105,17 +127,15 @@ export function ActionsTab() { } /> - - - {({approve}) => - approve({id, approved})}> - {loadingSources &&
} -
- } -
-
+ + {({approve}) => + approve({id, approved})}> + {loadingSources &&
} +
+ } +
} />