diff --git a/frontend/src/component/accessOverview/AccessOverview.tsx b/frontend/src/component/accessOverview/AccessOverview.tsx new file mode 100644 index 0000000000..c058f3df9e --- /dev/null +++ b/frontend/src/component/accessOverview/AccessOverview.tsx @@ -0,0 +1,17 @@ +import { ADMIN } from 'component/providers/AccessProvider/permissions'; +import { PermissionGuard } from 'component/common/PermissionGuard/PermissionGuard'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature'; +import { IconButton } from '@mui/material'; +import { Download } from '@mui/icons-material'; +import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi'; + +export const AccessOverview = () => { + const { downloadCSV } = useAccessOverviewApi(); + + return ( + + + + ); +}; diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index 9589027085..027b107e81 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -6,6 +6,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded'; import { useUsers } from 'hooks/api/getters/useUsers/useUsers'; import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi'; +import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi'; import { IUser } from 'interfaces/user'; import { IRole } from 'interfaces/role'; import useToast from 'hooks/useToast'; @@ -13,7 +14,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { useUsersPlan } from 'hooks/useUsersPlan'; import { PageContent } from 'component/common/PageContent/PageContent'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; -import { Button, useMediaQuery } from '@mui/material'; +import { Button, IconButton, Tooltip, useMediaQuery } from '@mui/material'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; import { UserTypeCell } from './UserTypeCell/UserTypeCell'; import { useFlexLayout, useSortBy, useTable } from 'react-table'; @@ -31,12 +32,15 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum import { UserLimitWarning } from './UserLimitWarning/UserLimitWarning'; import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell'; import { useSearch } from 'hooks/useSearch'; +import { Download } from '@mui/icons-material'; +import { useUiFlag } from 'hooks/useUiFlag'; const UsersList = () => { const navigate = useNavigate(); const { users, roles, refetch, loading } = useUsers(); const { setToastData, setToastApiError } = useToast(); const { removeUser, userLoading, userApiErrors } = useAdminUsersApi(); + const { downloadCSV } = useAccessOverviewApi(); const [pwDialog, setPwDialog] = useState<{ open: boolean; user?: IUser }>({ open: false, }); @@ -47,6 +51,8 @@ const UsersList = () => { const [delUser, setDelUser] = useState(); const { planUsers, isBillingUsers } = useUsersPlan(users); + const accessOverviewEnabled = useUiFlag('accessOverview'); + const [searchValue, setSearchValue] = useState(''); const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); @@ -263,6 +269,23 @@ const UsersList = () => { onChange={setSearchValue} /> + + ( + <> + + + + + + + )} + />