Performance improvement to dev xp (#9294)

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>

packages/twenty-front/src/pages/object-record/RecordShowPage.tsx

@@ -15,6 +15,7 @@ import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import { RecordShowPageWorkflowHeader } from '@/workflow/components/RecordShowPageWorkflowHeader';
 import { RecordShowPageWorkflowVersionHeader } from '@/workflow/components/RecordShowPageWorkflowVersionHeader';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated/graphql';
 import { RecordShowPageHeader } from '~/pages/object-record/RecordShowPageHeader';
 
 export const RecordShowPage = () => {
@@ -40,7 +41,7 @@ export const RecordShowPage = () => {
   );
 
   const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    'IS_PAGE_HEADER_V2_ENABLED',
+    FeatureFlagKey.IsPageHeaderV2Enabled,
   );
 
   return (

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx

@@ -30,6 +30,7 @@ import {
   UndecoratedLink,
   isDefined,
 } from 'twenty-ui';
+import { FeatureFlagKey } from '~/generated/graphql';
 import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
 import { updatedObjectSlugState } from '~/pages/settings/data-model/states/updatedObjectSlugState';
 
@@ -69,7 +70,7 @@ export const SettingsObjectDetailPage = () => {
 
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
   const isUniqueIndexesEnabled = useIsFeatureEnabled(
-    'IS_UNIQUE_INDEXES_ENABLED',
+    FeatureFlagKey.IsUniqueIndexesEnabled,
   );
 
   useEffect(() => {

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx

@@ -29,7 +29,11 @@ export const WithStandardSelected: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    await canvas.findByText('New Object', undefined, { timeout: 5000 });
+    await canvas.findByRole(
+      'heading',
+      { name: 'New Object', level: 3 },
+      { timeout: 5000 },
+    );
 
     const listingInput = await canvas.findByPlaceholderText('Listing');
     const pluralInput = await canvas.findByPlaceholderText('Listings');

packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx

@@ -37,6 +37,7 @@ import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModa
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlagKey } from '~/generated/graphql';
 import { WEBHOOK_EMPTY_OPERATION } from '~/pages/settings/developers/webhooks/constants/WebhookEmptyOperation';
 import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types/WebhookOperationsType';
 
@@ -114,7 +115,9 @@ export const SettingsDevelopersWebhooksDetail = () => {
     navigate(developerPath);
   };
 
-  const isAnalyticsV2Enabled = useIsFeatureEnabled('IS_ANALYTICS_V2_ENABLED');
+  const isAnalyticsV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsAnalyticsV2Enabled,
+  );
 
   const fieldTypeOptions: SelectOption<string>[] = useMemo(
     () => [

packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx

@@ -11,6 +11,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlagKey } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -30,7 +31,7 @@ const StyledSSOSection = styled(Section)`
 export const SettingsSecurity = () => {
   const isSSOEnabled = useRecoilValue(isSSOEnabledState);
   const isSSOSectionDisplay =
-    useIsFeatureEnabled('IS_SSO_ENABLED') && isSSOEnabled;
+    useIsFeatureEnabled(FeatureFlagKey.IsSsoEnabled) && isSSOEnabled;
 
   return (
     <SubMenuTopBarContainer

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx

@@ -1,4 +1,5 @@
 import { isAnalyticsEnabledState } from '@/client-config/states/isAnalyticsEnabledState';
+import { useTestServerlessFunction } from '@/serverless-functions/hooks/useTestServerlessFunction';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsServerlessFunctionCodeEditorTab } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab';
 import { SettingsServerlessFunctionMonitoringTab } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionMonitoringTab';
@@ -20,10 +21,10 @@ import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { IconCode, IconGauge, IconSettings, IconTestPipe } from 'twenty-ui';
+import { useDebouncedCallback } from 'use-debounce';
+import { FeatureFlagKey } from '~/generated/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { isDefined } from '~/utils/isDefined';
-import { useTestServerlessFunction } from '@/serverless-functions/hooks/useTestServerlessFunction';
-import { useDebouncedCallback } from 'use-debounce';
 
 const TAB_LIST_COMPONENT_ID = 'serverless-function-detail';
 
@@ -122,7 +123,9 @@ export const SettingsServerlessFunctionDetail = () => {
 
   const isAnalyticsEnabled = useRecoilValue(isAnalyticsEnabledState);
 
-  const isAnalyticsV2Enabled = useIsFeatureEnabled('IS_ANALYTICS_V2_ENABLED');
+  const isAnalyticsV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsAnalyticsV2Enabled,
+  );
 
   const tabs = [
     { id: 'editor', title: 'Editor', Icon: IconCode },