123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
import moment from 'moment'
|
|
import { type Dispatch, type SetStateAction } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { User } from '../../../../../../types/group-management/user'
|
|
import type { GroupUserAlert } from '../../utils/types'
|
|
import ManagedUserStatus from './managed-user-status'
|
|
import SSOStatus from './sso-status'
|
|
import DropdownButton from './dropdown-button'
|
|
import SelectUserCheckbox from './select-user-checkbox'
|
|
import getMeta from '@/utils/meta'
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
import OLTag from '@/features/ui/components/ol/ol-tag'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import classnames from 'classnames'
|
|
|
|
type ManagedUserRowProps = {
|
|
user: User
|
|
openOffboardingModalForUser: (user: User) => void
|
|
openUnlinkUserModal: (user: User) => void
|
|
groupId: string
|
|
setGroupUserAlert: Dispatch<SetStateAction<GroupUserAlert>>
|
|
}
|
|
|
|
export default function MemberRow({
|
|
user,
|
|
openOffboardingModalForUser,
|
|
openUnlinkUserModal,
|
|
setGroupUserAlert,
|
|
groupId,
|
|
}: ManagedUserRowProps) {
|
|
const { t } = useTranslation()
|
|
const managedUsersActive = getMeta('ol-managedUsersActive')
|
|
const groupSSOActive = getMeta('ol-groupSSOActive')
|
|
|
|
return (
|
|
<tr className="managed-entity-row">
|
|
<SelectUserCheckbox user={user} />
|
|
<td
|
|
className={classnames('cell-email', {
|
|
'text-muted': user.invite,
|
|
})}
|
|
>
|
|
<span>
|
|
{user.email}
|
|
{user.invite && (
|
|
<>
|
|
|
|
<OLTooltip
|
|
id={`pending-invite-symbol-${user.email}`}
|
|
description={t('pending_invite')}
|
|
>
|
|
<OLTag data-testid="badge-pending-invite">
|
|
{t('pending_invite')}
|
|
</OLTag>
|
|
</OLTooltip>
|
|
</>
|
|
)}
|
|
{user.isEntityAdmin && (
|
|
<>
|
|
|
|
<OLTooltip
|
|
id={`group-admin-symbol-${user.email}`}
|
|
description={t('group_admin')}
|
|
>
|
|
<span data-testid="group-admin-symbol">
|
|
<MaterialIcon
|
|
type="account_circle"
|
|
accessibilityLabel={t('group_admin')}
|
|
className="align-middle"
|
|
/>
|
|
</span>
|
|
</OLTooltip>
|
|
</>
|
|
)}
|
|
</span>
|
|
</td>
|
|
<td
|
|
className={classnames('cell-name', {
|
|
'text-muted': user.invite,
|
|
})}
|
|
>
|
|
{user.first_name} {user.last_name}
|
|
</td>
|
|
<td
|
|
className={classnames('cell-last-active', {
|
|
'text-muted': user.invite,
|
|
})}
|
|
>
|
|
{user.last_active_at
|
|
? moment(user.last_active_at).format('Do MMM YYYY')
|
|
: 'N/A'}
|
|
</td>
|
|
{groupSSOActive && (
|
|
<td
|
|
className={classnames('cell-security', {
|
|
'text-muted': user.invite,
|
|
})}
|
|
>
|
|
<div className="managed-user-security">
|
|
<SSOStatus user={user} />
|
|
</div>
|
|
</td>
|
|
)}
|
|
{managedUsersActive && (
|
|
<td className="cell-managed">
|
|
<div className="managed-user-security">
|
|
<ManagedUserStatus user={user} />
|
|
</div>
|
|
</td>
|
|
)}
|
|
<td className="cell-dropdown">
|
|
<DropdownButton
|
|
user={user}
|
|
openOffboardingModalForUser={openOffboardingModalForUser}
|
|
openUnlinkUserModal={openUnlinkUserModal}
|
|
setGroupUserAlert={setGroupUserAlert}
|
|
groupId={groupId}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|