overleaf/services/web/frontend/js/features/group-management/components/managed-users/managed-users-select-all-checkbox.tsx

51 lines
1.4 KiB
TypeScript
Raw Normal View History

import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useGroupMembersContext } from '../../context/group-members-context'
import getMeta from '@/utils/meta'
export default function ManagedUsersSelectAllCheckbox() {
const { t } = useTranslation()
const groupSSOActive = getMeta('ol-groupSSOActive')
const { selectedUsers, users, selectAllNonManagedUsers, unselectAllUsers } =
useGroupMembersContext()
const handleSelectAllNonManagedClick = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) {
selectAllNonManagedUsers()
} else {
unselectAllUsers()
}
},
[selectAllNonManagedUsers, unselectAllUsers]
)
// Pending: user.enrollment will be `undefined`
// Not managed: user.enrollment will be an empty object
const nonManagedUsers = users.filter(user => !user.enrollment?.managedBy)
if (nonManagedUsers.length === 0) {
return null
}
return (
<td
className={
groupSSOActive ? 'cell-checkbox-with-sso-col ' : 'cell-checkbox'
}
>
<label htmlFor="select-all" className="sr-only">
{t('select_all')}
</label>
<input
className="select-all"
id="select-all"
type="checkbox"
onChange={handleSelectAllNonManagedClick}
checked={selectedUsers.length === nonManagedUsers.length}
/>
</td>
)
}