bigbuffet-rw/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
2022-09-11 13:36:01 -05:00

79 lines
2.5 KiB
TypeScript

import React from 'react';
import { FormattedMessage } from 'react-intl';
import Account from 'soapbox/components/account';
import List, { ListItem } from 'soapbox/components/list';
import MissingIndicator from 'soapbox/components/missing_indicator';
import { Button, HStack, Modal, Stack } from 'soapbox/components/ui';
import { useAppSelector, useFeatures } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';
import { isLocal } from 'soapbox/utils/accounts';
import StaffRolePicker from './staff-role-picker';
const getAccount = makeGetAccount();
interface IAccountModerationModal {
/** Action to close the modal. */
onClose: (type: string) => void,
/** ID of the account to moderate. */
accountId: string,
}
/** Moderator actions against accounts. */
const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, accountId }) => {
const features = useFeatures();
const account = useAppSelector(state => getAccount(state, accountId));
const handleClose = () => onClose('ACCOUNT_MODERATION');
if (!account) {
return (
<Modal onClose={handleClose}>
<MissingIndicator />
</Modal>
);
}
const handleAdminFE = () => {
window.open(`/pleroma/admin/#/users/${account.id}/`, '_blank');
};
return (
<Modal
title={<FormattedMessage id='account_moderation_modal.title' defaultMessage='Moderate @{acct}' values={{ acct: account.acct }} />}
onClose={handleClose}
>
<Stack space={4}>
<div className='p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800'>
<Account
account={account}
showProfileHoverCard={false}
withLinkToProfile={false}
hideActions
/>
</div>
{isLocal(account) && (
<List>
<ListItem label={<FormattedMessage id='account_moderation_modal.fields.account_role' defaultMessage='Staff level' />}>
<div className='w-auto'>
<StaffRolePicker account={account} />
</div>
</ListItem>
</List>
)}
{features.adminFE && (
<HStack justifyContent='center'>
<Button icon={require('@tabler/icons/external-link.svg')} size='sm' theme='secondary' onClick={handleAdminFE}>
<FormattedMessage id='account_moderation_modal.admin_fe' defaultMessage='Open in AdminFE' />
</Button>
</HStack>
)}
</Stack>
</Modal>
);
};
export default AccountModerationModal;