Feat/error boundaries (#2779)

* - Changed to objectNameSingular always defined
- Added ErrorCatchAll

* - Added mock mode for companies logged out
- Added a proper ErrorBoundary component

* Removed react-error-boundary

* Implemented proper ErrorBoundary

* Fixes

* Change strategy about mocks

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/input/components/internal/relation-picker/components/RelationPicker.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { IconForbid } from '@/ui/display/icon';
 import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
@@ -49,6 +50,12 @@ export const RelationPicker = ({
 
   const { identifiersMapper, searchQuery } = useRelationPicker();
 
+  const { objectNameSingular: relationObjectNameSingular } =
+    useObjectNameSingularFromPlural({
+      objectNamePlural:
+        fieldDefinition.metadata.relationObjectMetadataNamePlural,
+    });
+
   const records = useFilteredSearchEntityQuery({
     queryHook: useFindManyQuery,
     filters: [
@@ -68,7 +75,7 @@ export const RelationPicker = ({
       ),
     selectedIds: recordId ? [recordId] : [],
     excludeEntityIds: excludeRecordIds,
-    objectNamePlural: fieldDefinition.metadata.relationObjectMetadataNamePlural,
+    objectNameSingular: relationObjectNameSingular,
   });
 
   const handleEntitySelected = async (selectedUser: any | null | undefined) => {

front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -6,6 +6,7 @@ import { AuthModal } from '@/auth/components/Modal';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
+import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
 import { NavbarAnimatedContainer } from '@/ui/navigation/navbar/components/NavbarAnimatedContainer';
@@ -74,7 +75,7 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
             </AnimatePresence>
           </>
         ) : (
-          <>{children}</>
+          <AppErrorBoundary>{children}</AppErrorBoundary>
         )}
       </StyledMainContainer>
     </StyledLayout>

front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySelect.tsx

@@ -16,9 +16,6 @@ export const ObjectFilterDropdownEntitySelect = () => {
   const objectMetadataNameSingular =
     filterDefinitionUsedInDropdown?.relationObjectMetadataNameSingular ?? '';
 
-  const objectMetadataNamePlural =
-    filterDefinitionUsedInDropdown?.relationObjectMetadataNamePlural ?? '';
-
   // TODO: refactor useFilteredSearchEntityQuery
   const { findManyRecordsQuery } = useObjectMetadataItem({
     objectNameSingular: objectMetadataNameSingular,
@@ -44,7 +41,7 @@ export const ObjectFilterDropdownEntitySelect = () => {
       : [],
     mappingFunction: (record: any) =>
       identifiersMapper?.(record, objectMetadataNameSingular),
-    objectNamePlural: objectMetadataNamePlural,
+    objectNameSingular: objectMetadataNameSingular,
   });
 
   if (filterDefinitionUsedInDropdown?.type !== 'RELATION') {

front/src/modules/ui/object/record-table/components/RecordTableBody.tsx

@@ -3,6 +3,7 @@ import { useInView } from 'react-intersection-observer';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
 import { isDefined } from '~/utils/isDefined';
@@ -22,9 +23,13 @@ export const RecordTableBody = () => {
 
   const { scopeId: objectNamePlural } = useRecordTable();
 
+  const { objectNameSingular } = useObjectNameSingularFromPlural({
+    objectNamePlural,
+  });
+
   const { objectMetadataItem: foundObjectMetadataItem } = useObjectMetadataItem(
     {
-      objectNamePlural,
+      objectNameSingular,
     },
   );
 

front/src/modules/ui/theme/components/AppThemeProvider.tsx

@@ -16,6 +16,7 @@ export const AppThemeProvider = ({ children }: AppThemeProviderProps) => {
 
   const computedColorScheme =
     colorScheme === 'System' ? systemColorScheme : colorScheme;
+
   const theme = computedColorScheme === 'Dark' ? darkTheme : lightTheme;
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;