admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Performance improvement to dev xp (#9294)

Browse Source 
The DX is not great when you need to do a lot of database
resets/command.

Should we disable Typescript validation to speed things up? With this
and caching database:reset takes 1min instead of 2 on my machine.


See also: https://github.com/typeorm/typeorm/issues/4136

And #9291 / #9293

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Félix Malfait
2025-01-01 17:28:45 +01:00
committed by GitHub
parent 3544a49702
commit 85c04c8931
55 changed files with 255 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/object-record/hooks/__tests__/useRefetchAggregateQueries.test.tsx
View File

@ -12,6 +12,12 @@ jest.mock('@/workspace/hooks/useIsFeatureEnabled', () => ({
useIsFeatureEnabled: jest.fn(),
}));
jest.mock('~/generated/graphql', () => ({
FeatureFlagKey: {
IsAggregateQueryEnabled: 'IsAggregateQueryEnabled',
},
}));
describe('useRefetchAggregateQueries', () => {
const mockRefetchQueries = jest.fn();
const mockApolloClient = {

3
packages/twenty-front/src/modules/object-record/hooks/useRefetchAggregateQueries.ts
View File

@ -1,6 +1,7 @@
import { getAggregateQueryName } from '@/object-record/utils/getAggregateQueryName';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useApolloClient } from '@apollo/client';
import { FeatureFlagKey } from '~/generated/graphql';
export const useRefetchAggregateQueries = ({
objectMetadataNamePlural,
@ -9,7 +10,7 @@ export const useRefetchAggregateQueries = ({
}) => {
const apolloClient = useApolloClient();
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
FeatureFlagKey.IsAggregateQueryEnabled,
);
const refetchAggregateQueries = async () => {
if (isAggregateQueryEnabled) {

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
View File

@ -22,6 +22,7 @@ import { availableFilterDefinitionsComponentState } from '@/views/states/availab
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-ui';
import { FeatureFlagKey } from '~/generated/graphql';
export const StyledInput = styled.input`
background: transparent;
@ -146,7 +147,7 @@ export const ObjectFilterDropdownFilterSelect = ({
useGetCurrentView();
const isAdvancedFiltersEnabled = useIsFeatureEnabled(
'IS_ADVANCED_FILTERS_ENABLED',
FeatureFlagKey.IsAdvancedFiltersEnabled,
);
const shouldShowAdvancedFilterButton =

5
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View File

@ -31,6 +31,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { ViewType } from '@/views/types/ViewType';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { FeatureFlagKey } from '~/generated/graphql';
export const ObjectOptionsDropdownMenuContent = () => {
const {
@ -41,7 +42,9 @@ export const ObjectOptionsDropdownMenuContent = () => {
closeDropdown,
} = useOptionsDropdown();
const isViewGroupEnabled = useIsFeatureEnabled('IS_VIEW_GROUPS_ENABLED');
const isViewGroupEnabled = useIsFeatureEnabled(
FeatureFlagKey.IsViewGroupsEnabled,
);
const { getIcon } = useIcons();
const { currentViewWithCombinedFiltersAndSorts: currentView } =

5
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx
View File

@ -24,9 +24,12 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { FeatureFlagKey } from '~/generated/graphql';
export const ObjectOptionsDropdownRecordGroupsContent = () => {
const isViewGroupEnabled = useIsFeatureEnabled('IS_VIEW_GROUPS_ENABLED');
const isViewGroupEnabled = useIsFeatureEnabled(
FeatureFlagKey.IsViewGroupsEnabled,
);
const { currentContentId, recordIndexId, onContentChange, resetContent } =
useOptionsDropdown();

3
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
View File

@ -14,6 +14,7 @@ import { RecordGroupDefinitionType } from '@/object-record/record-group/types/Re
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { IconDotsVertical, IconPlus, LightIconButton, Tag } from 'twenty-ui';
import { FeatureFlagKey } from '~/generated/graphql';
const StyledHeader = styled.div`
align-items: center;
@ -103,7 +104,7 @@ export const RecordBoardColumnHeader = () => {
);
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
FeatureFlagKey.IsAggregateQueryEnabled,
);
const { isOpportunitiesCompanyFieldDisabled } =

3
packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAggregateRecordsForRecordBoardColumn.ts
View File

@ -12,11 +12,12 @@ import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/s
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { FeatureFlagKey } from '~/generated/graphql';
import { isDefined } from '~/utils/isDefined';
export const useAggregateRecordsForRecordBoardColumn = () => {
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
FeatureFlagKey.IsAggregateQueryEnabled,
);
const { columnDefinition, recordCount } = useContext(

28
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx
View File

@ -24,16 +24,18 @@ export default meta;
type Story = StoryObj<typeof FormDateFieldInput>;
const currentYear = new Date().getFullYear();
export const Default: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Created At');
await canvas.findByDisplayValue('12/09/2024');
await canvas.findByDisplayValue('12/09/' + currentYear);
},
};
@ -67,10 +69,12 @@ export const SetsDateWithInput: Story = {
const dialog = await canvas.findByRole('dialog');
expect(dialog).toBeVisible();
await userEvent.type(input, '12/08/2024{enter}');
await userEvent.type(input, `12/08/${currentYear}{enter}`);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith('2024-12-08T00:00:00.000Z');
expect(args.onPersist).toHaveBeenCalledWith(
`${currentYear}-12-08T00:00:00.000Z`,
);
});
expect(dialog).toBeVisible();
@ -80,7 +84,7 @@ export const SetsDateWithInput: Story = {
export const SetsDateWithDatePicker: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
defaultValue: `2024-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {
@ -95,7 +99,7 @@ export const SetsDateWithDatePicker: Story = {
expect(datePicker).toBeVisible();
const dayToChoose = await within(datePicker).findByRole('option', {
name: 'Choose Saturday, December 7th, 2024',
name: `Choose Saturday, December 7th, 2024`,
});
await Promise.all([
@ -104,11 +108,11 @@ export const SetsDateWithDatePicker: Story = {
waitForElementToBeRemoved(datePicker),
waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect.stringMatching(/^2024-12-07/),
expect.stringMatching(new RegExp(`^2024-12-07`)),
);
}),
waitFor(() => {
expect(canvas.getByDisplayValue('12/07/2024')).toBeVisible();
expect(canvas.getByDisplayValue(`12/07/2024`)).toBeVisible();
}),
]);
},
@ -117,7 +121,7 @@ export const SetsDateWithDatePicker: Story = {
export const ResetsDateByClickingButton: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {
@ -150,7 +154,7 @@ export const ResetsDateByClickingButton: Story = {
export const ResetsDateByErasingInputContent: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {
@ -159,7 +163,7 @@ export const ResetsDateByErasingInputContent: Story = {
const input = await canvas.findByPlaceholderText('mm/dd/yyyy');
expect(input).toBeVisible();
expect(input).toHaveDisplayValue('12/09/2024');
expect(input).toHaveDisplayValue(`12/09/${currentYear}`);
await userEvent.clear(input);
@ -336,7 +340,7 @@ export const SwitchesToStandaloneVariable: Story = {
export const ClickingOutsideDoesNotResetInputState: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {

30
packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateTimeFieldInput.stories.tsx
View File

@ -1,3 +1,4 @@
import { FormDateTimeFieldInput } from '@/object-record/record-field/form-types/components/FormDateTimeFieldInput';
import { MAX_DATE } from '@/ui/input/components/internal/date/constants/MaxDate';
import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate';
import { parseDateToString } from '@/ui/input/components/internal/date/utils/parseDateToString';
@ -11,7 +12,6 @@ import {
within,
} from '@storybook/test';
import { DateTime } from 'luxon';
import { FormDateTimeFieldInput } from '@/object-record/record-field/form-types/components/FormDateTimeFieldInput';
const meta: Meta<typeof FormDateTimeFieldInput> = {
title: 'UI/Data/Field/Form/Input/FormDateTimeFieldInput',
@ -24,16 +24,20 @@ export default meta;
type Story = StoryObj<typeof FormDateTimeFieldInput>;
const currentYear = new Date().getFullYear();
export const Default: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Created At');
await canvas.findByDisplayValue(/12\/09\/2024 \d{2}:20/);
await canvas.findByDisplayValue(
new RegExp(`12/09/${currentYear} \\d{2}:20`),
);
},
};
@ -67,11 +71,11 @@ export const SetsDateTimeWithInput: Story = {
const dialog = await canvas.findByRole('dialog');
expect(dialog).toBeVisible();
await userEvent.type(input, '12/08/2024 12:10{enter}');
await userEvent.type(input, `12/08/${currentYear} 12:10{enter}`);
await waitFor(() => {
expect(args.onPersist).toHaveBeenCalledWith(
expect.stringMatching(/2024-12-08T\d{2}:10:00.000Z/),
expect.stringMatching(new RegExp(`^${currentYear}-12-08`)),
);
});
@ -95,7 +99,7 @@ export const DoesNotSetDateWithoutTime: Story = {
const dialog = await canvas.findByRole('dialog');
expect(dialog).toBeVisible();
await userEvent.type(input, '12/08/2024{enter}');
await userEvent.type(input, `12/08/${currentYear}{enter}`);
expect(args.onPersist).not.toHaveBeenCalled();
expect(dialog).toBeVisible();
@ -105,7 +109,7 @@ export const DoesNotSetDateWithoutTime: Story = {
export const SetsDateTimeWithDatePicker: Story = {
args: {
label: 'Created At',
defaultValue: undefined,
defaultValue: `2024-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {
@ -134,7 +138,7 @@ export const SetsDateTimeWithDatePicker: Story = {
}),
waitFor(() => {
expect(
canvas.getByDisplayValue(/12\/07\/2024 \d{2}:\d{2}/),
canvas.getByDisplayValue(new RegExp(`12/07/2024 \\d{2}:\\d{2}`)),
).toBeVisible();
}),
]);
@ -144,7 +148,7 @@ export const SetsDateTimeWithDatePicker: Story = {
export const ResetsDateByClickingButton: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {
@ -177,7 +181,7 @@ export const ResetsDateByClickingButton: Story = {
export const ResetsDateByErasingInputContent: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {
@ -186,7 +190,9 @@ export const ResetsDateByErasingInputContent: Story = {
const input = await canvas.findByPlaceholderText('mm/dd/yyyy hh:mm');
expect(input).toBeVisible();
expect(input).toHaveDisplayValue(/12\/09\/2024 \d{2}:\d{2}/);
expect(input).toHaveDisplayValue(
new RegExp(`12/09/${currentYear} \\d{2}:\\d{2}`),
);
await userEvent.clear(input);
@ -363,7 +369,7 @@ export const SwitchesToStandaloneVariable: Story = {
export const ClickingOutsideDoesNotResetInputState: Story = {
args: {
label: 'Created At',
defaultValue: '2024-12-09T13:20:19.631Z',
defaultValue: `${currentYear}-12-09T13:20:19.631Z`,
onPersist: fn(),
},
play: async ({ canvasElement, args }) => {

3
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
View File

@ -42,6 +42,7 @@ import { mapViewGroupsToRecordGroupDefinitions } from '@/views/utils/mapViewGrou
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useCallback } from 'react';
import { FeatureFlagKey } from '~/generated/graphql';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
const StyledContainer = styled.div`
@ -162,7 +163,7 @@ export const RecordIndexContainer = () => {
);
const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
FeatureFlagKey.IsPageHeaderV2Enabled,
);
return (

3
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
View File

@ -13,6 +13,7 @@ import { ViewType } from '@/views/types/ViewType';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useRecoilValue } from 'recoil';
import { isDefined, useIcons } from 'twenty-ui';
import { FeatureFlagKey } from '~/generated/graphql';
import { capitalize } from '~/utils/string/capitalize';
export const RecordIndexPageHeader = () => {
@ -36,7 +37,7 @@ export const RecordIndexPageHeader = () => {
);
const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
FeatureFlagKey.IsPageHeaderV2Enabled,
);
const isObjectMetadataItemReadOnly =

9
packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowContainerTabs.ts
View File

@ -17,6 +17,7 @@ import {
IconSettings,
} from 'twenty-ui';
import { FeatureFlag, FieldMetadataType } from '~/generated-metadata/graphql';
import { FeatureFlagKey } from '~/generated/graphql';
export const useRecordShowContainerTabs = (
loading: boolean,
@ -149,7 +150,7 @@ export const useRecordShowContainerTabs = (
ifMobile: false,
ifDesktop: false,
ifInRightDrawer: false,
ifFeaturesDisabled: ['IS_WORKFLOW_ENABLED'],
ifFeaturesDisabled: [FeatureFlagKey.IsWorkflowEnabled],
ifRequiredObjectsInactive: [],
ifRelationsMissing: [],
},
@ -169,7 +170,7 @@ export const useRecordShowContainerTabs = (
ifMobile: false,
ifDesktop: false,
ifInRightDrawer: false,
ifFeaturesDisabled: ['IS_WORKFLOW_ENABLED'],
ifFeaturesDisabled: [FeatureFlagKey.IsWorkflowEnabled],
ifRequiredObjectsInactive: [],
ifRelationsMissing: [],
},
@ -188,7 +189,7 @@ export const useRecordShowContainerTabs = (
ifMobile: false,
ifDesktop: false,
ifInRightDrawer: false,
ifFeaturesDisabled: ['IS_WORKFLOW_ENABLED'],
ifFeaturesDisabled: [FeatureFlagKey.IsWorkflowEnabled],
ifRequiredObjectsInactive: [],
ifRelationsMissing: [],
},
@ -202,7 +203,7 @@ export const useRecordShowContainerTabs = (
ifMobile: false,
ifDesktop: false,
ifInRightDrawer: false,
ifFeaturesDisabled: ['IS_WORKFLOW_ENABLED'],
ifFeaturesDisabled: [FeatureFlagKey.IsWorkflowEnabled],
ifRequiredObjectsInactive: [],
ifRelationsMissing: [],
},

3
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -22,6 +22,7 @@ import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useC
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useRef } from 'react';
import { FeatureFlagKey } from '~/generated/graphql';
const StyledTable = styled.table`
border-radius: ${({ theme }) => theme.border.radius.sm};
@ -36,7 +37,7 @@ export const RecordTable = () => {
const tableBodyRef = useRef<HTMLTableElement>(null);
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
FeatureFlagKey.IsAggregateQueryEnabled,
);
const { toggleClickOutsideListener } = useClickOutsideListener(

3
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody.tsx
View File

@ -12,10 +12,11 @@ import { RecordTableRecordGroupSection } from '@/object-record/record-table/reco
import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { FeatureFlagKey } from '~/generated/graphql';
export const RecordTableRecordGroupsBody = () => {
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
FeatureFlagKey.IsAggregateQueryEnabled,
);
const allRecordIds = useRecoilComponentValueV2(
recordIndexAllRecordIdsComponentSelector,

3
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter.tsx
View File

@ -11,13 +11,14 @@ import { viewFieldAggregateOperationState } from '@/object-record/record-table/r
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { FeatureFlagKey } from '~/generated/graphql';
import { isDefined } from '~/utils/isDefined';
export const useAggregateRecordsForRecordTableColumnFooter = (
fieldMetadataId: string,
) => {
const isAggregateQueryEnabled = useIsFeatureEnabled(
'IS_AGGREGATE_QUERY_ENABLED',
FeatureFlagKey.IsAggregateQueryEnabled,
);
const { objectMetadataItem } = useRecordTableContextOrThrow();
const { recordGroupFilter } = useRecordGroupFilter(objectMetadataItem.fields);