Merge branch 'main' into feat/delete-many-batch-front

This commit is contained in:
Lucas Bordeau 2024-07-05 17:25:23 +02:00
commit 2f4d75e5eb
27 changed files with 590 additions and 375 deletions

View File

@ -55,7 +55,6 @@ import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
import { SettingsAccountsCalendars } from '~/pages/settings/accounts/SettingsAccountsCalendars'; import { SettingsAccountsCalendars } from '~/pages/settings/accounts/SettingsAccountsCalendars';
import { SettingsAccountsCalendarsSettings } from '~/pages/settings/accounts/SettingsAccountsCalendarsSettings'; import { SettingsAccountsCalendarsSettings } from '~/pages/settings/accounts/SettingsAccountsCalendarsSettings';
import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails'; import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails';
import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings';
import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount'; import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount';
import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject'; import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail'; import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
@ -188,10 +187,6 @@ const createRouter = (isBillingEnabled?: boolean) =>
path={SettingsPath.AccountsEmails} path={SettingsPath.AccountsEmails}
element={<SettingsAccountsEmails />} element={<SettingsAccountsEmails />}
/> />
<Route
path={SettingsPath.AccountsEmailsInboxSettings}
element={<SettingsAccountsEmailsInboxSettings />}
/>
<Route <Route
path={SettingsPath.Billing} path={SettingsPath.Billing}
element={<SettingsBilling />} element={<SettingsBilling />}

View File

@ -18,6 +18,8 @@ export const formatFieldMetadataItemsAsSortDefinitions = ({
FieldMetadataType.Boolean, FieldMetadataType.Boolean,
FieldMetadataType.Select, FieldMetadataType.Select,
FieldMetadataType.Phone, FieldMetadataType.Phone,
FieldMetadataType.Email,
FieldMetadataType.FullName,
].includes(field.type) ].includes(field.type)
) { ) {
return acc; return acc;

View File

@ -2,7 +2,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { OrderBy } from '@/object-metadata/types/OrderBy'; import { OrderBy } from '@/object-metadata/types/OrderBy';
import { hasPositionField } from '@/object-metadata/utils/hasPositionField'; import { hasPositionField } from '@/object-metadata/utils/hasPositionField';
import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy'; import { RecordGqlOperationOrderBy } from '@/object-record/graphql/types/RecordGqlOperationOrderBy';
import { Field } from '~/generated/graphql'; import { Field, FieldMetadataType } from '~/generated/graphql';
import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
import { isDefined } from '~/utils/isDefined'; import { isDefined } from '~/utils/isDefined';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -13,7 +13,8 @@ export const turnSortsIntoOrderBy = (
objectMetadataItem: ObjectMetadataItem, objectMetadataItem: ObjectMetadataItem,
sorts: Sort[], sorts: Sort[],
): RecordGqlOperationOrderBy => { ): RecordGqlOperationOrderBy => {
const fields: Pick<Field, 'id' | 'name'>[] = objectMetadataItem?.fields ?? []; const fields: Pick<Field, 'id' | 'name' | 'type'>[] =
objectMetadataItem?.fields ?? [];
const fieldsById = mapArrayToObject(fields, ({ id }) => id); const fieldsById = mapArrayToObject(fields, ({ id }) => id);
const sortsOrderBy = sorts const sortsOrderBy = sorts
.map((sort) => { .map((sort) => {
@ -26,7 +27,7 @@ export const turnSortsIntoOrderBy = (
const direction: OrderBy = const direction: OrderBy =
sort.direction === 'asc' ? 'AscNullsFirst' : 'DescNullsLast'; sort.direction === 'asc' ? 'AscNullsFirst' : 'DescNullsLast';
return { [correspondingField.name]: direction }; return getOrderByForFieldMetadataType(correspondingField, direction);
}) })
.filter(isDefined); .filter(isDefined);
@ -36,3 +37,21 @@ export const turnSortsIntoOrderBy = (
return sortsOrderBy; return sortsOrderBy;
}; };
const getOrderByForFieldMetadataType = (
field: Pick<Field, 'id' | 'name' | 'type'>,
direction: OrderBy,
) => {
switch (field.type) {
case FieldMetadataType.FullName:
return {
[field.name]: {
firstName: direction,
lastName: direction,
},
};
default:
return { [field.name]: direction };
}
};

View File

@ -33,12 +33,13 @@ export const RecordTableColumnDropdownMenu = ({
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
const secondVisibleColumn = visibleTableColumns[1]; const secondVisibleColumn = visibleTableColumns[1];
const canMove = column.isLabelIdentifier !== true;
const canMoveLeft = const canMoveLeft =
column.fieldMetadataId !== secondVisibleColumn?.fieldMetadataId; column.fieldMetadataId !== secondVisibleColumn?.fieldMetadataId && canMove;
const lastVisibleColumn = visibleTableColumns[visibleTableColumns.length - 1]; const lastVisibleColumn = visibleTableColumns[visibleTableColumns.length - 1];
const canMoveRight = const canMoveRight =
column.fieldMetadataId !== lastVisibleColumn?.fieldMetadataId; column.fieldMetadataId !== lastVisibleColumn?.fieldMetadataId && canMove;
const { handleColumnVisibilityChange, handleMoveTableColumn } = const { handleColumnVisibilityChange, handleMoveTableColumn } =
useTableColumns(); useTableColumns();
@ -83,7 +84,9 @@ export const RecordTableColumnDropdownMenu = ({
const isSortable = column.isSortable === true; const isSortable = column.isSortable === true;
const isFilterable = column.isFilterable === true; const isFilterable = column.isFilterable === true;
const showSeparator = isFilterable || isSortable; const showSeparator =
(isFilterable || isSortable) && column.isLabelIdentifier !== true;
const canHide = column.isLabelIdentifier !== true;
return ( return (
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer>
@ -116,11 +119,13 @@ export const RecordTableColumnDropdownMenu = ({
text="Move right" text="Move right"
/> />
)} )}
{canHide && (
<MenuItem <MenuItem
LeftIcon={IconEyeOff} LeftIcon={IconEyeOff}
onClick={handleColumnVisibility} onClick={handleColumnVisibility}
text="Hide" text="Hide"
/> />
)}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
); );
}; };

View File

@ -4,7 +4,6 @@ import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
import { IconPlus } from 'twenty-ui'; import { IconPlus } from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { ColumnHead } from '@/object-record/record-table/components/ColumnHead';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns'; import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
@ -186,11 +185,7 @@ export const RecordTableHeaderCell = ({
onMouseLeave={() => setIconVisibility(false)} onMouseLeave={() => setIconVisibility(false)}
> >
<StyledColumnHeadContainer> <StyledColumnHeadContainer>
{column.isLabelIdentifier ? (
<ColumnHead column={column} />
) : (
<ColumnHeadWithDropdown column={column} /> <ColumnHeadWithDropdown column={column} />
)}
{(useIsMobile() || iconVisibility) && !!column.isLabelIdentifier && ( {(useIsMobile() || iconVisibility) && !!column.isLabelIdentifier && (
<StyledHeaderIcon> <StyledHeaderIcon>
<LightIconButton <LightIconButton

View File

@ -19,7 +19,7 @@ const StyledLinkContainer = styled.div`
margin-right: ${({ theme }) => theme.spacing(2)}; margin-right: ${({ theme }) => theme.spacing(2)};
`; `;
type SettingsAccountsEmailsBlocklistInputProps = { type SettingsAccountsBlocklistInputProps = {
updateBlockedEmailList: (email: string) => void; updateBlockedEmailList: (email: string) => void;
blockedEmailOrDomainList: string[]; blockedEmailOrDomainList: string[];
}; };
@ -50,10 +50,10 @@ type FormInput = {
emailOrDomain: string; emailOrDomain: string;
}; };
export const SettingsAccountsEmailsBlocklistInput = ({ export const SettingsAccountsBlocklistInput = ({
updateBlockedEmailList, updateBlockedEmailList,
blockedEmailOrDomainList, blockedEmailOrDomainList,
}: SettingsAccountsEmailsBlocklistInputProps) => { }: SettingsAccountsBlocklistInputProps) => {
const { reset, handleSubmit, control, formState } = useForm<FormInput>({ const { reset, handleSubmit, control, formState } = useForm<FormInput>({
mode: 'onSubmit', mode: 'onSubmit',
resolver: zodResolver(validationSchema(blockedEmailOrDomainList)), resolver: zodResolver(validationSchema(blockedEmailOrDomainList)),

View File

@ -7,11 +7,11 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput'; import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable'; import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
import { Section } from '@/ui/layout/section/components/Section'; import { Section } from '@/ui/layout/section/components/Section';
export const SettingsAccountsEmailsBlocklistSection = () => { export const SettingsAccountsBlocklistSection = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { records: blocklist } = useFindManyRecords<BlocklistItem>({ const { records: blocklist } = useFindManyRecords<BlocklistItem>({
@ -44,11 +44,11 @@ export const SettingsAccountsEmailsBlocklistSection = () => {
title="Blocklist" title="Blocklist"
description="Exclude the following people and domains from my email sync" description="Exclude the following people and domains from my email sync"
/> />
<SettingsAccountsEmailsBlocklistInput <SettingsAccountsBlocklistInput
blockedEmailOrDomainList={blocklist.map((item) => item.handle)} blockedEmailOrDomainList={blocklist.map((item) => item.handle)}
updateBlockedEmailList={updateBlockedEmailList} updateBlockedEmailList={updateBlockedEmailList}
/> />
<SettingsAccountsEmailsBlocklistTable <SettingsAccountsBlocklistTable
blocklist={blocklist} blocklist={blocklist}
handleBlockedEmailRemove={handleBlockedEmailRemove} handleBlockedEmailRemove={handleBlockedEmailRemove}
/> />

View File

@ -1,13 +1,13 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { BlocklistItem } from '@/accounts/types/BlocklistItem'; import { BlocklistItem } from '@/accounts/types/BlocklistItem';
import { SettingsAccountsEmailsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow'; import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
import { Table } from '@/ui/layout/table/components/Table'; import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody'; import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader'; import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableRow } from '@/ui/layout/table/components/TableRow';
type SettingsAccountsEmailsBlocklistTableProps = { type SettingsAccountsBlocklistTableProps = {
blocklist: BlocklistItem[]; blocklist: BlocklistItem[];
handleBlockedEmailRemove: (id: string) => void; handleBlockedEmailRemove: (id: string) => void;
}; };
@ -20,10 +20,10 @@ const StyledTableBody = styled(TableBody)`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
`; `;
export const SettingsAccountsEmailsBlocklistTable = ({ export const SettingsAccountsBlocklistTable = ({
blocklist, blocklist,
handleBlockedEmailRemove, handleBlockedEmailRemove,
}: SettingsAccountsEmailsBlocklistTableProps) => { }: SettingsAccountsBlocklistTableProps) => {
return ( return (
<> <>
{blocklist.length > 0 && ( {blocklist.length > 0 && (
@ -35,7 +35,7 @@ export const SettingsAccountsEmailsBlocklistTable = ({
</TableRow> </TableRow>
<StyledTableBody> <StyledTableBody>
{blocklist.map((blocklistItem) => ( {blocklist.map((blocklistItem) => (
<SettingsAccountsEmailsBlocklistTableRow <SettingsAccountsBlocklistTableRow
key={blocklistItem.id} key={blocklistItem.id}
blocklistItem={blocklistItem} blocklistItem={blocklistItem}
onRemove={handleBlockedEmailRemove} onRemove={handleBlockedEmailRemove}

View File

@ -6,15 +6,15 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableRow } from '@/ui/layout/table/components/TableRow';
import { formatToHumanReadableDate } from '~/utils/date-utils'; import { formatToHumanReadableDate } from '~/utils/date-utils';
type SettingsAccountsEmailsBlocklistTableRowProps = { type SettingsAccountsBlocklistTableRowProps = {
blocklistItem: BlocklistItem; blocklistItem: BlocklistItem;
onRemove: (id: string) => void; onRemove: (id: string) => void;
}; };
export const SettingsAccountsEmailsBlocklistTableRow = ({ export const SettingsAccountsBlocklistTableRow = ({
blocklistItem, blocklistItem,
onRemove, onRemove,
}: SettingsAccountsEmailsBlocklistTableRowProps) => { }: SettingsAccountsBlocklistTableRowProps) => {
return ( return (
<TableRow key={blocklistItem.id}> <TableRow key={blocklistItem.id}>
<TableCell>{blocklistItem.handle}</TableCell> <TableCell>{blocklistItem.handle}</TableCell>

View File

@ -0,0 +1,116 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { H2Title, IconRefresh, IconUser } from 'twenty-ui';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { SettingsAccountsInboxVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
import { Section } from '@/ui/layout/section/components/Section';
import { MessageChannelVisibility } from '~/generated-metadata/graphql';
type SettingsAccountsMessageChannelDetailsProps = {
messageChannel: Pick<
MessageChannel,
'id' | 'visibility' | 'isContactAutoCreationEnabled' | 'isSyncEnabled'
>;
};
const StyledDetailsContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)};
padding-top: ${({ theme }) => theme.spacing(6)};
`;
export const SettingsAccountsMessageChannelDetails = ({
messageChannel,
}: SettingsAccountsMessageChannelDetailsProps) => {
const theme = useTheme();
const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
objectNameSingular: CoreObjectNameSingular.MessageChannel,
});
const handleVisibilityChange = (value: MessageChannelVisibility) => {
updateOneRecord({
idToUpdate: messageChannel.id,
updateOneRecordInput: {
visibility: value,
},
});
};
const handleContactAutoCreationToggle = (value: boolean) => {
updateOneRecord({
idToUpdate: messageChannel.id,
updateOneRecordInput: {
isContactAutoCreationEnabled: value,
},
});
};
const handleIsSyncEnabledToggle = (value: boolean) => {
updateOneRecord({
idToUpdate: messageChannel.id,
updateOneRecordInput: {
isSyncEnabled: value,
},
});
};
return (
<StyledDetailsContainer>
<Section>
<H2Title
title="Visibility"
description="Define what will be visible to other users in your workspace"
/>
<SettingsAccountsInboxVisibilitySettingsCard
value={messageChannel.visibility}
onChange={handleVisibilityChange}
/>
</Section>
<Section>
<H2Title
title="Contact auto-creation"
description="Automatically create contacts for people youve sent emails to"
/>
<SettingsAccountsToggleSettingCard
cardMedia={
<SettingsAccountsCardMedia>
<IconUser
size={theme.icon.size.sm}
stroke={theme.icon.stroke.lg}
/>
</SettingsAccountsCardMedia>
}
title="Auto-creation"
value={!!messageChannel.isContactAutoCreationEnabled}
onToggle={handleContactAutoCreationToggle}
/>
</Section>
<Section>
<H2Title
title="Synchronization"
description="Past and future emails will automatically be synced to this workspace"
/>
<SettingsAccountsToggleSettingCard
cardMedia={
<SettingsAccountsCardMedia>
<IconRefresh
size={theme.icon.size.sm}
stroke={theme.icon.stroke.lg}
/>
</SettingsAccountsCardMedia>
}
title="Sync emails"
value={!!messageChannel.isSyncEnabled}
onToggle={handleIsSyncEnabledToggle}
/>
</Section>
</StyledDetailsContainer>
);
};

View File

@ -0,0 +1,71 @@
import { useRecoilValue } from 'recoil';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
import { SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountMessageChannelsTabListComponentId';
import { TabList } from '@/ui/layout/tab/components/TabList';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
export const SettingsAccountsMessageChannelsContainer = () => {
const { activeTabIdState } = useTabList(
SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID,
);
const activeTabId = useRecoilValue(activeTabIdState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { records: accounts } = useFindManyRecords<ConnectedAccount>({
objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
filter: {
accountOwnerId: {
eq: currentWorkspaceMember?.id,
},
},
});
const { records: messageChannels } = useFindManyRecords<
MessageChannel & {
connectedAccount: ConnectedAccount;
}
>({
objectNameSingular: CoreObjectNameSingular.MessageChannel,
filter: {
connectedAccountId: {
in: accounts.map((account) => account.id),
},
},
});
const tabs = [
...messageChannels.map((messageChannel) => ({
id: messageChannel.id,
title: messageChannel.handle,
})),
];
if (!messageChannels.length) {
return <SettingsAccountsListEmptyStateCard />;
}
return (
<>
<TabList
tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
tabs={tabs}
/>
{messageChannels.map((messageChannel) => (
<>
{messageChannel.id === activeTabId && (
<SettingsAccountsMessageChannelDetails
messageChannel={messageChannel}
/>
)}
</>
))}
</>
);
};

View File

@ -1,86 +0,0 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconChevronRight, IconGmail } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import {
SettingsAccountsSynchronizationStatus,
SettingsAccountsSynchronizationStatusProps,
} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
const StyledRowRightContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsAccountsMessageChannelsListCard = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const navigate = useNavigate();
const { records: accounts, loading: accountsLoading } =
useFindManyRecords<ConnectedAccount>({
objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
filter: {
accountOwnerId: {
eq: currentWorkspaceMember?.id,
},
},
});
const { records: messageChannels, loading: messageChannelsLoading } =
useFindManyRecords<
MessageChannel & {
connectedAccount: ConnectedAccount;
}
>({
objectNameSingular: CoreObjectNameSingular.MessageChannel,
filter: {
connectedAccountId: {
in: accounts.map((account) => account.id),
},
},
});
const messageChannelsWithSyncedEmails: (MessageChannel & {
connectedAccount: ConnectedAccount;
} & SettingsAccountsSynchronizationStatusProps)[] = messageChannels.map(
(messageChannel) => ({
...messageChannel,
syncStatus: messageChannel.syncStatus,
}),
);
if (!messageChannelsWithSyncedEmails.length) {
return <SettingsAccountsListEmptyStateCard />;
}
return (
<SettingsListCard
items={messageChannelsWithSyncedEmails}
getItemLabel={(messageChannel) => messageChannel.handle}
isLoading={accountsLoading || messageChannelsLoading}
onRowClick={(messageChannel) =>
navigate(`/settings/accounts/emails/${messageChannel.id}`)
}
RowIcon={IconGmail}
RowRightComponent={({ item: messageChannel }) => (
<StyledRowRightContainer>
<SettingsAccountsSynchronizationStatus
syncStatus={messageChannel.syncStatus}
isSyncEnabled={messageChannel.isSyncEnabled}
/>
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
/>
);
};

View File

@ -2,7 +2,7 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test'; import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from 'twenty-ui'; import { ComponentDecorator } from 'twenty-ui';
import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput'; import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
const updateBlockedEmailListJestFn = fn(); const updateBlockedEmailListJestFn = fn();
@ -13,10 +13,9 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
return <Story />; return <Story />;
}; };
const meta: Meta<typeof SettingsAccountsEmailsBlocklistInput> = { const meta: Meta<typeof SettingsAccountsBlocklistInput> = {
title: title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistInput',
'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistInput', component: SettingsAccountsBlocklistInput,
component: SettingsAccountsEmailsBlocklistInput,
decorators: [ComponentDecorator, ClearMocksDecorator], decorators: [ComponentDecorator, ClearMocksDecorator],
args: { args: {
updateBlockedEmailList: updateBlockedEmailListJestFn, updateBlockedEmailList: updateBlockedEmailListJestFn,
@ -31,7 +30,7 @@ const meta: Meta<typeof SettingsAccountsEmailsBlocklistInput> = {
}; };
export default meta; export default meta;
type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistInput>; type Story = StoryObj<typeof SettingsAccountsBlocklistInput>;
export const Default: Story = {}; export const Default: Story = {};

View File

@ -0,0 +1,16 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsBlocklistSection';
const meta: Meta<typeof SettingsAccountsBlocklistSection> = {
title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistSection',
component: SettingsAccountsBlocklistInput,
decorators: [ComponentDecorator],
};
export default meta;
type Story = StoryObj<typeof SettingsAccountsBlocklistSection>;
export const Default: Story = {};

View File

@ -3,7 +3,7 @@ import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from 'twenty-ui'; import { ComponentDecorator } from 'twenty-ui';
import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist'; import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable'; import { SettingsAccountsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsBlocklistTable';
import { formatToHumanReadableDate } from '~/utils/date-utils'; import { formatToHumanReadableDate } from '~/utils/date-utils';
const handleBlockedEmailRemoveJestFn = fn(); const handleBlockedEmailRemoveJestFn = fn();
@ -15,10 +15,9 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
return <Story />; return <Story />;
}; };
const meta: Meta<typeof SettingsAccountsEmailsBlocklistTable> = { const meta: Meta<typeof SettingsAccountsBlocklistTable> = {
title: title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistTable',
'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistTable', component: SettingsAccountsBlocklistTable,
component: SettingsAccountsEmailsBlocklistTable,
decorators: [ComponentDecorator, ClearMocksDecorator], decorators: [ComponentDecorator, ClearMocksDecorator],
args: { args: {
blocklist: mockedBlocklist, blocklist: mockedBlocklist,
@ -34,7 +33,7 @@ const meta: Meta<typeof SettingsAccountsEmailsBlocklistTable> = {
}; };
export default meta; export default meta;
type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistTable>; type Story = StoryObj<typeof SettingsAccountsBlocklistTable>;
export const Default: Story = { export const Default: Story = {
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {

View File

@ -3,7 +3,7 @@ import { expect, fn, userEvent, within } from '@storybook/test';
import { ComponentDecorator } from 'twenty-ui'; import { ComponentDecorator } from 'twenty-ui';
import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist'; import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist';
import { SettingsAccountsEmailsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow'; import { SettingsAccountsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsBlocklistTableRow';
import { formatToHumanReadableDate } from '~/utils/date-utils'; import { formatToHumanReadableDate } from '~/utils/date-utils';
const onRemoveJestFn = fn(); const onRemoveJestFn = fn();
@ -15,10 +15,10 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
return <Story />; return <Story />;
}; };
const meta: Meta<typeof SettingsAccountsEmailsBlocklistTableRow> = { const meta: Meta<typeof SettingsAccountsBlocklistTableRow> = {
title: title:
'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistTableRow', 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistTableRow',
component: SettingsAccountsEmailsBlocklistTableRow, component: SettingsAccountsBlocklistTableRow,
decorators: [ComponentDecorator, ClearMocksDecorator], decorators: [ComponentDecorator, ClearMocksDecorator],
args: { args: {
blocklistItem: mockedBlocklist[0], blocklistItem: mockedBlocklist[0],
@ -34,7 +34,7 @@ const meta: Meta<typeof SettingsAccountsEmailsBlocklistTableRow> = {
}; };
export default meta; export default meta;
type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistTableRow>; type Story = StoryObj<typeof SettingsAccountsBlocklistTableRow>;
export const Default: Story = { export const Default: Story = {
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {

View File

@ -1,17 +0,0 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput';
import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
const meta: Meta<typeof SettingsAccountsEmailsBlocklistSection> = {
title:
'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistSection',
component: SettingsAccountsEmailsBlocklistInput,
decorators: [ComponentDecorator],
};
export default meta;
type Story = StoryObj<typeof SettingsAccountsEmailsBlocklistSection>;
export const Default: Story = {};

View File

@ -0,0 +1,30 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails';
import { MessageChannelVisibility } from '~/generated/graphql';
const meta: Meta<typeof SettingsAccountsMessageChannelDetails> = {
title:
'Modules/Settings/Accounts/MessageChannels/SettingsAccountsMessageChannelDetails',
component: SettingsAccountsMessageChannelDetails,
decorators: [ComponentDecorator],
args: {
messageChannel: {
id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6a',
isContactAutoCreationEnabled: true,
isSyncEnabled: true,
visibility: MessageChannelVisibility.ShareEverything,
},
},
argTypes: {
messageChannel: { control: false },
},
};
export default meta;
type Story = StoryObj<typeof SettingsAccountsMessageChannelDetails>;
export const Default: Story = {
play: async () => {},
};

View File

@ -0,0 +1,2 @@
export const SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID =
'settings-account-message-channels-tab-list';

View File

@ -8,8 +8,8 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields'; import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader'; import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsBlocklistSection';
import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard'; import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard';
import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection'; import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@ -55,7 +55,7 @@ export const SettingsAccounts = () => {
loading={loading} loading={loading}
/> />
</Section> </Section>
{isBlocklistEnabled && <SettingsAccountsEmailsBlocklistSection />} {isBlocklistEnabled && <SettingsAccountsBlocklistSection />}
<SettingsAccountsSettingsSection /> <SettingsAccountsSettingsSection />
</> </>
)} )}

View File

@ -1,6 +1,6 @@
import { H2Title, IconSettings } from 'twenty-ui'; import { IconSettings } from 'twenty-ui';
import { SettingsAccountsMessageChannelsListCard } from '@/settings/accounts/components/SettingsAccountsMessageChannelsListCard'; import { SettingsAccountsMessageChannelsContainer } from '@/settings/accounts/components/SettingsAccountsMessageChannelsContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section'; import { Section } from '@/ui/layout/section/components/Section';
@ -16,11 +16,7 @@ export const SettingsAccountsEmails = () => (
]} ]}
/> />
<Section> <Section>
<H2Title <SettingsAccountsMessageChannelsContainer />
title="Emails sync"
description="Sync your inboxes and set your privacy settings"
/>
<SettingsAccountsMessageChannelsListCard />
</Section> </Section>
</SettingsPageContainer> </SettingsPageContainer>
</SubMenuTopBarContainer> </SubMenuTopBarContainer>

View File

@ -1,128 +0,0 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { H2Title, IconRefresh, IconSettings, IconUser } from 'twenty-ui';
import { MessageChannel } from '@/accounts/types/MessageChannel';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
import { SettingsAccountsInboxVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsInboxVisibilitySettingsCard';
import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { AppPath } from '@/types/AppPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { MessageChannelVisibility } from '~/generated/graphql';
export const SettingsAccountsEmailsInboxSettings = () => {
const theme = useTheme();
const navigate = useNavigate();
const { accountUuid: messageChannelId = '' } = useParams();
const { record: messageChannel, loading } = useFindOneRecord<MessageChannel>({
objectNameSingular: CoreObjectNameSingular.MessageChannel,
objectRecordId: messageChannelId,
});
const { updateOneRecord } = useUpdateOneRecord<MessageChannel>({
objectNameSingular: CoreObjectNameSingular.MessageChannel,
});
const handleVisibilityChange = (value: MessageChannelVisibility) => {
updateOneRecord({
idToUpdate: messageChannelId,
updateOneRecordInput: {
visibility: value,
},
});
};
const handleContactAutoCreationToggle = (value: boolean) => {
updateOneRecord({
idToUpdate: messageChannelId,
updateOneRecordInput: {
isContactAutoCreationEnabled: value,
},
});
};
const handleIsSyncEnabledToggle = (value: boolean) => {
updateOneRecord({
idToUpdate: messageChannelId,
updateOneRecordInput: {
isSyncEnabled: value,
},
});
};
useEffect(() => {
if (!loading && !messageChannel) navigate(AppPath.NotFound);
}, [loading, messageChannel, navigate]);
if (!messageChannel) return null;
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Accounts', href: '/settings/accounts' },
{ children: 'Emails', href: '/settings/accounts/emails' },
{ children: messageChannel.handle || '' },
]}
/>
<Section>
<H2Title
title="Email visibility"
description="Define what will be visible to other users in your workspace"
/>
<SettingsAccountsInboxVisibilitySettingsCard
value={messageChannel.visibility}
onChange={handleVisibilityChange}
/>
</Section>
<Section>
<H2Title
title="Contact auto-creation"
description="Automatically create contacts for people youve sent emails to"
/>
<SettingsAccountsToggleSettingCard
cardMedia={
<SettingsAccountsCardMedia>
<IconUser
size={theme.icon.size.sm}
stroke={theme.icon.stroke.lg}
/>
</SettingsAccountsCardMedia>
}
title="Auto-creation"
value={!!messageChannel.isContactAutoCreationEnabled}
onToggle={handleContactAutoCreationToggle}
/>
</Section>
<Section>
<H2Title
title="Synchronization"
description="Past and future emails will automatically be synced to this workspace"
/>
<SettingsAccountsToggleSettingCard
cardMedia={
<SettingsAccountsCardMedia>
<IconRefresh
size={theme.icon.size.sm}
stroke={theme.icon.stroke.lg}
/>
</SettingsAccountsCardMedia>
}
title="Sync emails"
value={!!messageChannel.isSyncEnabled}
onToggle={handleIsSyncEnabledToggle}
/>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react'; import { Meta, StoryObj } from '@storybook/react';
import { graphql, HttpResponse } from 'msw';
import { import {
PageDecorator, PageDecorator,
@ -25,4 +26,120 @@ export default meta;
export type Story = StoryObj<typeof SettingsAccountsEmails>; export type Story = StoryObj<typeof SettingsAccountsEmails>;
export const Default: Story = {}; export const NoConnectedAccount: Story = {};
export const TwoConnectedAccounts: Story = {
parameters: {
msw: {
handlers: [
...graphqlMocks.handlers,
graphql.query('FindManyConnectedAccounts', () => {
return HttpResponse.json({
data: {
connectedAccounts: {
__typename: 'ConnectedAccountConnection',
totalCount: 1,
pageInfo: {
__typename: 'PageInfo',
hasNextPage: false,
startCursor: '',
endCursor: '',
},
edges: [
{
__typename: 'ConnectedAccountEdge',
cursor: '',
node: {
__typename: 'ConnectedAccount',
accessToken: '',
refreshToken: '',
updatedAt: '2024-07-03T20:03:35.064Z',
createdAt: '2024-07-03T20:03:35.064Z',
id: '20202020-954c-4d76-9a87-e5f072d4b7ef',
provider: 'google',
accountOwnerId: '20202020-03f2-4d83-b0d5-2ec2bcee72d4',
lastSyncHistoryId: '',
emailAliases: '',
handle: 'test.test@gmail.com',
authFailedAt: null,
},
},
],
},
},
});
}),
graphql.query('FindManyMessageChannels', () => {
return HttpResponse.json({
data: {
messageChannels: {
__typename: 'MessageChannelConnection',
totalCount: 2,
pageInfo: {
__typename: 'PageInfo',
hasNextPage: false,
startCursor: '',
endCursor: '',
},
edges: [
{
__typename: 'MessageChannelEdge',
cursor: '',
node: {
__typename: 'MessageChannel',
handle: 'test.test@gmail.com',
excludeNonProfessionalEmails: true,
syncStageStartedAt: null,
id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6f',
updatedAt: '2024-07-03T20:03:11.903Z',
createdAt: '2024-07-03T20:03:11.903Z',
connectedAccountId:
'20202020-954c-4d76-9a87-e5f072d4b7ef',
contactAutoCreationPolicy: 'SENT',
syncStage: 'PARTIAL_MESSAGE_LIST_FETCH_PENDING',
type: 'email',
isContactAutoCreationEnabled: true,
syncCursor: '1562764',
excludeGroupEmails: true,
throttleFailureCount: 0,
isSyncEnabled: true,
visibility: 'SHARE_EVERYTHING',
syncStatus: 'COMPLETED',
syncedAt: '2024-07-04T16:25:04.960Z',
},
},
{
__typename: 'MessageChannelEdge',
cursor: '',
node: {
__typename: 'MessageChannel',
handle: 'test.test2@gmail.com',
excludeNonProfessionalEmails: true,
syncStageStartedAt: null,
id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6a',
updatedAt: '2024-07-03T20:03:11.903Z',
createdAt: '2024-07-03T20:03:11.903Z',
connectedAccountId:
'20202020-954c-4d76-9a87-e5f072d4b7ef',
contactAutoCreationPolicy: 'SENT',
syncStage: 'PARTIAL_MESSAGE_LIST_FETCH_PENDING',
type: 'email',
isContactAutoCreationEnabled: true,
syncCursor: '1562764',
excludeGroupEmails: true,
throttleFailureCount: 0,
isSyncEnabled: true,
visibility: 'SHARE_EVERYTHING',
syncStatus: 'COMPLETED',
syncedAt: '2024-07-04T16:25:04.960Z',
},
},
],
},
},
});
}),
],
},
},
};

View File

@ -1,79 +0,0 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import { MessageChannelVisibility } from '~/generated/graphql';
import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Accounts/SettingsAccountsEmailsInboxSettings',
component: SettingsAccountsEmailsInboxSettings,
decorators: [PageDecorator],
args: {
routePath: '/settings/accounts/emails/:accountUuid',
routeParams: { ':accountUuid': '123' },
},
parameters: {
layout: 'fullscreen',
msw: {
handlers: [
graphql.query('FindOneMessageChannel', () => {
return HttpResponse.json({
data: {
messageChannel: {
id: '1',
visibility: MessageChannelVisibility.ShareEverything,
messageThreads: { edges: [] },
createdAt: '2021-08-27T12:00:00Z',
type: 'email',
updatedAt: '2021-08-27T12:00:00Z',
targetUrl: 'https://example.com/webhook',
connectedAccountId: '1',
handle: 'handle',
connectedAccount: {
id: '1',
handle: 'handle',
updatedAt: '2021-08-27T12:00:00Z',
accessToken: 'accessToken',
messageChannels: { edges: [] },
refreshToken: 'refreshToken',
__typename: 'ConnectedAccount',
accountOwner: { id: '1', __typename: 'WorkspaceMember' },
provider: 'provider',
createdAt: '2021-08-27T12:00:00Z',
accountOwnerId: '1',
},
__typename: 'MessageChannel',
},
},
});
}),
graphqlMocks.handlers,
],
},
},
};
export default meta;
export type Story = StoryObj<typeof SettingsAccountsEmailsInboxSettings>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Email visibility');
await canvas.findByText(
'Define what will be visible to other users in your workspace',
);
await canvas.findByText('Contact auto-creation');
await canvas.findByText(
'Automatically create contacts for people youve sent emails to',
);
},
};

View File

@ -0,0 +1,159 @@
import { InjectDataSource, InjectRepository } from '@nestjs/typeorm';
import { Logger } from '@nestjs/common';
import { Command, CommandRunner, Option } from 'nest-commander';
import { Repository, IsNull, DataSource } from 'typeorm';
import chalk from 'chalk';
import { DataSourceService } from 'src/engine/metadata-modules/data-source/data-source.service';
import { Workspace } from 'src/engine/core-modules/workspace/workspace.entity';
import { TypeORMService } from 'src/database/typeorm/typeorm.service';
import {
FieldMetadataEntity,
FieldMetadataType,
} from 'src/engine/metadata-modules/field-metadata/field-metadata.entity';
import { WorkspaceCacheVersionService } from 'src/engine/metadata-modules/workspace-cache-version/workspace-cache-version.service';
import { computeObjectTargetTable } from 'src/engine/utils/compute-object-target-table.util';
interface UpdateBooleanFieldsNullDefaultValuesAndNullValuesCommandOptions {
workspaceId?: string;
}
@Command({
name: 'migrate-0.22:update-boolean-field-null-default-values-and-null-values',
description:
'Update boolean fields null default values and null values to false',
})
export class UpdateBooleanFieldsNullDefaultValuesAndNullValuesCommand extends CommandRunner {
private readonly logger = new Logger(
UpdateBooleanFieldsNullDefaultValuesAndNullValuesCommand.name,
);
constructor(
@InjectRepository(Workspace, 'core')
private readonly workspaceRepository: Repository<Workspace>,
private readonly typeORMService: TypeORMService,
private readonly dataSourceService: DataSourceService,
private readonly workspaceCacheVersionService: WorkspaceCacheVersionService,
@InjectDataSource('metadata')
private readonly metadataDataSource: DataSource,
) {
super();
}
@Option({
flags: '-w, --workspace-id [workspace_id]',
description: 'workspace id. Command runs on all workspaces if not provided',
required: false,
})
parseWorkspaceId(value: string): string {
return value;
}
async run(
_passedParam: string[],
options: UpdateBooleanFieldsNullDefaultValuesAndNullValuesCommandOptions,
): Promise<void> {
const workspaceIds = options.workspaceId
? [options.workspaceId]
: (await this.workspaceRepository.find()).map(
(workspace) => workspace.id,
);
if (!workspaceIds.length) {
this.logger.log(chalk.yellow('No workspace found'));
return;
}
this.logger.log(
chalk.green(`Running command on ${workspaceIds.length} workspaces`),
);
for (const workspaceId of workspaceIds) {
const dataSourceMetadata =
await this.dataSourceService.getLastDataSourceMetadataFromWorkspaceId(
workspaceId,
);
if (!dataSourceMetadata) {
throw new Error(
`Could not find dataSourceMetadata for workspace ${workspaceId}`,
);
}
const workspaceDataSource =
await this.typeORMService.connectToDataSource(dataSourceMetadata);
if (!workspaceDataSource) {
throw new Error(
`Could not connect to dataSource for workspace ${workspaceId}`,
);
}
const workspaceQueryRunner = workspaceDataSource.createQueryRunner();
const metadataQueryRunner = this.metadataDataSource.createQueryRunner();
await workspaceQueryRunner.connect();
await metadataQueryRunner.connect();
await workspaceQueryRunner.startTransaction();
await metadataQueryRunner.startTransaction();
try {
const fieldMetadataRepository =
metadataQueryRunner.manager.getRepository(FieldMetadataEntity);
const booleanFieldsWithoutDefaultValue =
await fieldMetadataRepository.find({
where: {
workspaceId,
type: FieldMetadataType.BOOLEAN,
defaultValue: IsNull(),
},
relations: ['object'],
});
for (const booleanField of booleanFieldsWithoutDefaultValue) {
if (!booleanField.object) {
throw new Error(
`Could not find objectMetadataItem for field ${booleanField.id}`,
);
}
// Could be done via a batch update but it's safer in this context to run it sequentially with the ALTER TABLE
await fieldMetadataRepository.update(booleanField.id, {
defaultValue: false,
});
const fieldName = booleanField.name;
const tableName = computeObjectTargetTable(booleanField.object);
await workspaceQueryRunner.query(
`ALTER TABLE "${dataSourceMetadata.schema}"."${tableName}" ALTER COLUMN "${fieldName}" SET DEFAULT false;`,
);
}
await workspaceQueryRunner.commitTransaction();
await metadataQueryRunner.commitTransaction();
} catch (error) {
await workspaceQueryRunner.rollbackTransaction();
await metadataQueryRunner.rollbackTransaction();
this.logger.log(
chalk.red(`Running command on workspace ${workspaceId} failed`),
);
throw error;
} finally {
await workspaceQueryRunner.release();
await metadataQueryRunner.release();
}
await this.workspaceCacheVersionService.incrementVersion(workspaceId);
this.logger.log(
chalk.green(`Running command on workspace ${workspaceId} done`),
);
}
this.logger.log(chalk.green(`Command completed!`));
}
}

View File

@ -21,6 +21,7 @@ import { FieldMetadataEntity } from 'src/engine/metadata-modules/field-metadata/
import { WorkspaceCacheVersionModule } from 'src/engine/metadata-modules/workspace-cache-version/workspace-cache-version.module'; import { WorkspaceCacheVersionModule } from 'src/engine/metadata-modules/workspace-cache-version/workspace-cache-version.module';
import { UpdateMessageChannelSyncStatusEnumCommand } from 'src/database/commands/0-20-update-message-channel-sync-status-enum.command'; import { UpdateMessageChannelSyncStatusEnumCommand } from 'src/database/commands/0-20-update-message-channel-sync-status-enum.command';
import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadata/object-metadata.entity'; import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadata/object-metadata.entity';
import { UpdateBooleanFieldsNullDefaultValuesAndNullValuesCommand } from 'src/database/commands/0-22-update-boolean-fields-null-default-values-and-null-values.command';
@Module({ @Module({
imports: [ imports: [
@ -48,6 +49,7 @@ import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadat
StopDataSeedDemoWorkspaceCronCommand, StopDataSeedDemoWorkspaceCronCommand,
UpdateMessageChannelVisibilityEnumCommand, UpdateMessageChannelVisibilityEnumCommand,
UpdateMessageChannelSyncStatusEnumCommand, UpdateMessageChannelSyncStatusEnumCommand,
UpdateBooleanFieldsNullDefaultValuesAndNullValuesCommand,
], ],
}) })
export class DatabaseCommandModule {} export class DatabaseCommandModule {}

View File

@ -44,6 +44,7 @@ export class CalendarEventWorkspaceEntity extends BaseWorkspaceEntity {
label: 'Is canceled', label: 'Is canceled',
description: 'Is canceled', description: 'Is canceled',
icon: 'IconCalendarCancel', icon: 'IconCalendarCancel',
defaultValue: false,
}) })
isCanceled: boolean; isCanceled: boolean;
@ -53,6 +54,7 @@ export class CalendarEventWorkspaceEntity extends BaseWorkspaceEntity {
label: 'Is Full Day', label: 'Is Full Day',
description: 'Is Full Day', description: 'Is Full Day',
icon: 'Icon24Hours', icon: 'Icon24Hours',
defaultValue: false,
}) })
isFullDay: boolean; isFullDay: boolean;