3815 blocklist connect frontend (#3930)
* wip * wip * move blocklist to connectedAccount * wip * format date * fix styling * renaming * fix imports * fix imports * Rename BlockListItem.ts to BlocklistItem.ts * Add IS_BLOCKLIST_ENABLED feature flag and remove IS_MESSAGING_ENABLED gate at model creation * hide blocklist if feature flag is disabled
This commit is contained in:
bosiraphael
@ -1,5 +0,0 @@
|
||||
export type BlockedEmail = {
|
||||
id: string;
|
||||
email: string;
|
||||
blocked_at: string;
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
export type BlocklistItem = {
|
||||
id: string;
|
||||
handle: string;
|
||||
workspaceMemberId: string;
|
||||
createdAt: string;
|
||||
};
|
||||
@ -3,6 +3,7 @@ export enum CoreObjectNameSingular {
|
||||
ActivityTarget = 'activityTarget',
|
||||
ApiKey = 'apiKey',
|
||||
Attachment = 'attachment',
|
||||
Blocklist = 'blocklist',
|
||||
Comment = 'comment',
|
||||
Company = 'company',
|
||||
ConenctedAccount = 'conenctedAccount',
|
||||
|
||||
@ -8,7 +8,6 @@ import { TextInput } from '@/ui/input/components/TextInput';
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const StyledLinkContainer = styled.div`
|
||||
|
||||
@ -1,32 +1,43 @@
|
||||
import { useState } from 'react';
|
||||
import { v4 } from 'uuid';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { BlocklistItem } from '@/accounts/types/BlocklistItem';
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
|
||||
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
||||
import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput';
|
||||
import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { Section } from '@/ui/layout/section/components/Section';
|
||||
import { mockedBlockedEmailList } from '~/testing/mock-data/accounts';
|
||||
import { formatDate } from '~/utils/date-utils';
|
||||
|
||||
export const SettingsAccountsEmailsBlocklistSection = () => {
|
||||
const [blockedEmailList, setBlockedEmailList] = useState(
|
||||
mockedBlockedEmailList,
|
||||
);
|
||||
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
|
||||
|
||||
const handleBlockedEmailRemove = (id: string) =>
|
||||
setBlockedEmailList((previousBlockedEmailList) =>
|
||||
previousBlockedEmailList.filter((blockedEmail) => blockedEmail.id !== id),
|
||||
);
|
||||
const { records: blocklist } = useFindManyRecords<BlocklistItem>({
|
||||
objectNameSingular: CoreObjectNameSingular.Blocklist,
|
||||
});
|
||||
|
||||
const { createOneRecord: createBlocklistItem } =
|
||||
useCreateOneRecord<BlocklistItem>({
|
||||
objectNameSingular: CoreObjectNameSingular.Blocklist,
|
||||
});
|
||||
|
||||
const { deleteOneRecord: deleteBlocklistItem } = useDeleteOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.Blocklist,
|
||||
});
|
||||
|
||||
const handleBlockedEmailRemove = (id: string) => {
|
||||
deleteBlocklistItem(id);
|
||||
};
|
||||
|
||||
const updateBlockedEmailList = (handle: string) => {
|
||||
createBlocklistItem({
|
||||
handle,
|
||||
workspaceMemberId: currentWorkspaceMember?.id,
|
||||
});
|
||||
};
|
||||
|
||||
const updateBlockedEmailList = (email: string) =>
|
||||
setBlockedEmailList((prevState) => [
|
||||
...prevState,
|
||||
{
|
||||
id: v4(),
|
||||
email: email,
|
||||
blocked_at: formatDate(new Date(), 'dd/LL/yyyy'),
|
||||
},
|
||||
]);
|
||||
return (
|
||||
<Section>
|
||||
<H2Title
|
||||
@ -37,7 +48,7 @@ export const SettingsAccountsEmailsBlocklistSection = () => {
|
||||
updateBlockedEmailList={updateBlockedEmailList}
|
||||
/>
|
||||
<SettingsAccountsEmailsBlocklistTable
|
||||
blockedEmailList={blockedEmailList}
|
||||
blocklist={blocklist}
|
||||
handleBlockedEmailRemove={handleBlockedEmailRemove}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { BlockedEmail } from '@/accounts/types/BlockedEmail';
|
||||
import { BlocklistItem } from '@/accounts/types/BlocklistItem';
|
||||
import { SettingsAccountsEmailsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow';
|
||||
import { Table } from '@/ui/layout/table/components/Table';
|
||||
import { TableBody } from '@/ui/layout/table/components/TableBody';
|
||||
@ -8,33 +8,42 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
|
||||
type SettingsAccountsEmailsBlocklistTableProps = {
|
||||
blockedEmailList: BlockedEmail[];
|
||||
blocklist: BlocklistItem[];
|
||||
handleBlockedEmailRemove: (id: string) => void;
|
||||
};
|
||||
|
||||
const StyledTable = styled(Table)`
|
||||
margin-top: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const StyledTableBody = styled(TableBody)`
|
||||
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
`;
|
||||
|
||||
export const SettingsAccountsEmailsBlocklistTable = ({
|
||||
blockedEmailList,
|
||||
blocklist,
|
||||
handleBlockedEmailRemove,
|
||||
}: SettingsAccountsEmailsBlocklistTableProps) => {
|
||||
return (
|
||||
<Table>
|
||||
<TableRow>
|
||||
<TableHeader>Email/Domain</TableHeader>
|
||||
<TableHeader>Added to blocklist</TableHeader>
|
||||
<TableHeader></TableHeader>
|
||||
</TableRow>
|
||||
<StyledTableBody>
|
||||
{blockedEmailList.map((blockedEmail) => (
|
||||
<SettingsAccountsEmailsBlocklistTableRow
|
||||
key={blockedEmail.id}
|
||||
blockedEmail={blockedEmail}
|
||||
onRemove={handleBlockedEmailRemove}
|
||||
/>
|
||||
))}
|
||||
</StyledTableBody>
|
||||
</Table>
|
||||
<>
|
||||
{blocklist.length > 0 && (
|
||||
<StyledTable>
|
||||
<TableRow>
|
||||
<TableHeader>Email/Domain</TableHeader>
|
||||
<TableHeader>Added to blocklist</TableHeader>
|
||||
<TableHeader></TableHeader>
|
||||
</TableRow>
|
||||
<StyledTableBody>
|
||||
{blocklist.map((blocklistItem) => (
|
||||
<SettingsAccountsEmailsBlocklistTableRow
|
||||
key={blocklistItem.id}
|
||||
blocklistItem={blocklistItem}
|
||||
onRemove={handleBlockedEmailRemove}
|
||||
/>
|
||||
))}
|
||||
</StyledTableBody>
|
||||
</StyledTable>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,26 +1,29 @@
|
||||
import { BlockedEmail } from '@/accounts/types/BlockedEmail';
|
||||
import { BlocklistItem } from '@/accounts/types/BlocklistItem';
|
||||
import { IconX } from '@/ui/display/icon';
|
||||
import { IconButton } from '@/ui/input/button/components/IconButton';
|
||||
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
import { formatToHumanReadableDate } from '~/utils';
|
||||
|
||||
type SettingsAccountsEmailsBlocklistTableRowProps = {
|
||||
blockedEmail: BlockedEmail;
|
||||
blocklistItem: BlocklistItem;
|
||||
onRemove: (id: string) => void;
|
||||
};
|
||||
|
||||
export const SettingsAccountsEmailsBlocklistTableRow = ({
|
||||
blockedEmail,
|
||||
blocklistItem,
|
||||
onRemove,
|
||||
}: SettingsAccountsEmailsBlocklistTableRowProps) => {
|
||||
return (
|
||||
<TableRow key={blockedEmail.id}>
|
||||
<TableCell>{blockedEmail.email}</TableCell>
|
||||
<TableCell>{blockedEmail.blocked_at}</TableCell>
|
||||
<TableRow key={blocklistItem.id}>
|
||||
<TableCell>{blocklistItem.handle}</TableCell>
|
||||
<TableCell>
|
||||
{formatToHumanReadableDate(blocklistItem.createdAt)}
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
onRemove(blockedEmail.id);
|
||||
onRemove(blocklistItem.id);
|
||||
}}
|
||||
variant="tertiary"
|
||||
size="small"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export type FeatureFlagKey =
|
||||
| 'IS_MESSAGING_ENABLED'
|
||||
| 'IS_BLOCKLIST_ENABLED'
|
||||
| 'IS_INTEGRATIONS_ENABLED'
|
||||
| 'IS_QUICK_ACTIONS_ENABLED'
|
||||
| 'IS_NEW_RECORD_BOARD_ENABLED';
|
||||
|
||||
Reference in New Issue
Block a user