packages/components/containers/forward/IncomingForwardTable.tsx

   1 import { c } from 'ttag';
   2
   3 import Table from '@proton/components/components/table/Table';
   4 import TableBody from '@proton/components/components/table/TableBody';
   5 import TableCell from '@proton/components/components/table/TableCell';
   6 import TableHeader from '@proton/components/components/table/TableHeader';
   7 import TableHeaderCell from '@proton/components/components/table/TableHeaderCell';
   8 import TableRow from '@proton/components/components/table/TableRow';
   9 import type { Address, IncomingAddressForwarding } from '@proton/shared/lib/interfaces';
  10
  11 import ForwardStatus from './ForwardStatus';
  12 import IncomingForwardActions from './IncomingForwardActions';
  13 import WarningChainedForwarding from './WarningChainedForwarding';
  14
  15 interface Props {
  16     addresses: Address[];
  17     loading?: boolean;
  18     forwardings: IncomingAddressForwarding[];
  19     chainedEmails: string[];
  20 }
  21
  22 const IncomingForwardTable = ({ addresses, loading, forwardings, chainedEmails }: Props) => {
  23     return (
  24         <Table responsive="cards" hasActions={!!forwardings.length}>
  25             <TableHeader>
  26                 <TableRow>
  27                     <TableHeaderCell>{c('email_forwarding_2023: Header').t`From`}</TableHeaderCell>
  28                     <TableHeaderCell>{c('email_forwarding_2023: Header').t`To`}</TableHeaderCell>
  29                     <TableHeaderCell className="w-custom" style={{ '--w-custom': '11em' }}>{c(
  30                         'email_forwarding_2023: Header'
  31                     ).t`Status`}</TableHeaderCell>
  32                     <TableHeaderCell className="w-custom" style={{ '--w-custom': '9em' }}>{c(
  33                         'email_forwarding_2023: Header'
  34                     ).t`Actions`}</TableHeaderCell>
  35                 </TableRow>
  36             </TableHeader>
  37             <TableBody loading={loading} colSpan={4}>
  38                 {forwardings.length === 0 && (
  39                     <TableRow>
  40                         <TableCell colSpan={4} className="text-center">{c('email_forwarding_2023: Info')
  41                             .t`No incoming forwarding rules`}</TableCell>
  42                     </TableRow>
  43                 )}
  44                 {forwardings.map((forward) => {
  45                     const from = forward.ForwarderEmail;
  46                     const toAddress = addresses.find(({ ID }) => ID === forward.ForwardeeAddressID);
  47                     if (toAddress === undefined) {
  48                         return null;
  49                     }
  50                     const to = toAddress.Email;
  51                     return (
  52                         <TableRow key={forward.ID}>
  53                             <TableCell label={c('email_forwarding_2023: Header').t`From`}>
  54                                 <div className="text-ellipsis" title={from}>
  55                                     {from}
  56                                 </div>
  57                             </TableCell>
  58                             <TableCell label={c('email_forwarding_2023: Header').t`To`}>
  59                                 <div className="text-ellipsis">
  60                                     <WarningChainedForwarding chainedEmails={chainedEmails} forwardEmail={to} />
  61                                     <span title={to}>{to}</span>
  62                                 </div>
  63                             </TableCell>
  64                             <TableCell label={c('email_forwarding_2023: Header').t`Status`}>
  65                                 <ForwardStatus forward={forward} />
  66                             </TableCell>
  67                             <TableCell>
  68                                 <IncomingForwardActions forward={forward} addresses={addresses} />
  69                             </TableCell>
  70                         </TableRow>
  71                     );
  72                 })}
  73             </TableBody>
  74         </Table>
  75     );
  76 };
  77
  78 export default IncomingForwardTable;