Fix object metadata view creation issue (#9875)

Fixes https://github.com/twentyhq/core-team-issues/issues/26
Fixes https://github.com/twentyhq/twenty/issues/9350

packages/twenty-front/src/modules/favorites/components/WorkspaceFavorites.tsx

@@ -1,11 +1,10 @@
-import { useFilteredObjectMetadataItemsForWorkspaceFavorites } from '@/navigation/hooks/useObjectMetadataItemsInWorkspaceFavorites';
+import { useWorkspaceFavorites } from '@/favorites/hooks/useWorkspaceFavorites';
 import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
 import { NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader';
 import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
 
 export const WorkspaceFavorites = () => {
-  const { activeObjectMetadataItems: objectMetadataItemsToDisplay } =
+  const { workspaceFavoritesObjectMetadataItems } = useWorkspaceFavorites();
-    useFilteredObjectMetadataItemsForWorkspaceFavorites();
 
   const loading = useIsPrefetchLoading();
 
@@ -16,7 +15,7 @@ export const WorkspaceFavorites = () => {
   return (
     <NavigationDrawerSectionForObjectMetadataItems
       sectionTitle={'Workspace'}
-      objectMetadataItems={objectMetadataItemsToDisplay}
+      objectMetadataItems={workspaceFavoritesObjectMetadataItems}
       isRemote={false}
     />
   );

packages/twenty-front/src/modules/favorites/hooks/useWorkspaceFavorites.ts

@@ -1,4 +1,5 @@
 import { sortFavorites } from '@/favorites/utils/sortFavorites';
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useGetObjectRecordIdentifierByNameSingular } from '@/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -13,6 +14,7 @@ import { usePrefetchedFavoritesData } from './usePrefetchedFavoritesData';
 
 export const useWorkspaceFavorites = () => {
   const { workspaceFavorites } = usePrefetchedFavoritesData();
+
   const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
   const { objectMetadataItem: favoriteObjectMetadataItem } =
@@ -52,5 +54,29 @@ export const useWorkspaceFavorites = () => {
     ],
   );
 
-  return { sortedWorkspaceFavorites };
+  const workspaceFavoriteIds = new Set(
+    sortedWorkspaceFavorites.map((favorite) => favorite.recordId),
+  );
+
+  const favoriteViewObjectMetadataIds = new Set(
+    views.reduce<string[]>((acc, view) => {
+      if (workspaceFavoriteIds.has(view.id)) {
+        acc.push(view.objectMetadataId);
+      }
+      return acc;
+    }, []),
+  );
+
+  const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
+
+  const activeObjectMetadataItemsInWorkspaceFavorites =
+    activeObjectMetadataItems.filter((item) =>
+      favoriteViewObjectMetadataIds.has(item.id),
+    );
+
+  return {
+    workspaceFavorites: sortedWorkspaceFavorites,
+    workspaceFavoritesObjectMetadataItems:
+      activeObjectMetadataItemsInWorkspaceFavorites,
+  };
 };

packages/twenty-front/src/modules/navigation/hooks/useObjectMetadataItemsInWorkspaceFavorites.ts

@@ -1,36 +0,0 @@
-import { useWorkspaceFavorites } from '@/favorites/hooks/useWorkspaceFavorites';
-import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
-import { View } from '@/views/types/View';
-
-export const useFilteredObjectMetadataItemsForWorkspaceFavorites = () => {
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
-
-  const { sortedWorkspaceFavorites: workspaceFavorites } =
-    useWorkspaceFavorites();
-
-  const workspaceFavoriteIds = new Set(
-    workspaceFavorites.map((favorite) => favorite.recordId),
-  );
-
-  const favoriteViewObjectMetadataIds = new Set(
-    views.reduce<string[]>((acc, view) => {
-      if (workspaceFavoriteIds.has(view.id)) {
-        acc.push(view.objectMetadataId);
-      }
-      return acc;
-    }, []),
-  );
-
-  const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
-
-  const activeObjectMetadataItemsInWorkspaceFavorites =
-    activeObjectMetadataItems.filter((item) =>
-      favoriteViewObjectMetadataIds.has(item.id),
-    );
-
-  return {
-    activeObjectMetadataItems: activeObjectMetadataItemsInWorkspaceFavorites,
-  };
-};

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerOpenedSection.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
 
-import { useFilteredObjectMetadataItemsForWorkspaceFavorites } from '@/navigation/hooks/useObjectMetadataItemsInWorkspaceFavorites';
+import { useWorkspaceFavorites } from '@/favorites/hooks/useWorkspaceFavorites';
 import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
 import { NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -14,8 +14,7 @@ export const NavigationDrawerOpenedSection = () => {
 
   const loading = useIsPrefetchLoading();
 
-  const { activeObjectMetadataItems: workspaceFavoritesObjectMetadataItems } =
+  const { workspaceFavoritesObjectMetadataItems } = useWorkspaceFavorites();
-    useFilteredObjectMetadataItemsForWorkspaceFavorites();
 
   const {
     objectNamePlural: currentObjectNamePlural,

packages/twenty-front/src/modules/object-metadata/hooks/useCreateOneObjectMetadataItem.ts

@@ -1,7 +1,5 @@
-import { useApolloClient, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
 import {
   CreateObjectInput,
   CreateOneObjectMetadataItemMutation,
@@ -15,14 +13,9 @@ import { useApolloMetadataClient } from './useApolloMetadataClient';
 
 export const useCreateOneObjectMetadataItem = () => {
   const apolloMetadataClient = useApolloMetadataClient();
-  const apolloClient = useApolloClient();
   const { refreshObjectMetadataItems } =
     useRefreshObjectMetadataItems('network-only');
 
-  const { findManyRecordsQuery } = useFindManyRecordsQuery({
-    objectNameSingular: CoreObjectNameSingular.View,
-  });
-
   const [mutate] = useMutation<
     CreateOneObjectMetadataItemMutation,
     CreateOneObjectMetadataItemMutationVariables
@@ -42,15 +35,7 @@ export const useCreateOneObjectMetadataItem = () => {
     return createdObjectMetadata;
   };
 
-  const findManyRecordsCache = async () => {
-    await apolloClient.query({
-      query: findManyRecordsQuery,
-      fetchPolicy: 'network-only',
-    });
-  };
-
   return {
     createOneObjectMetadataItem,
-    findManyRecordsCache,
   };
 };

packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts

@@ -72,10 +72,14 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
     useQuery<RecordGqlOperationFindManyResult>(findManyRecordsQuery, {
       skip: skip || !objectMetadataItem,
       variables: {
-        filter: {
+        ...(filter || withSoftDeleted
-          ...filter,
+          ? {
-          ...(withSoftDeleted ? withSoftDeleterFilter : {}),
+              filter: {
-        },
+                ...filter,
+                ...(withSoftDeleted ? withSoftDeleterFilter : {}),
+              },
+            }
+          : {}),
         orderBy,
         lastCursor: cursorFilter?.cursor ?? undefined,
         limit: cursorFilter?.limit ?? limit,

packages/twenty-front/src/modules/prefetch/hooks/internal/useUpsertRecordsInCacheForPrefetchKey.ts

@@ -34,6 +34,7 @@ export const useUpsertRecordsInCacheForPrefetchKey = <T extends ObjectRecord>({
 
   const upsertRecordsInCache = (records: T[]) => {
     setPrefetchDataIsLoaded(false);
+
     upsertFindManyRecordsQueryInCache({
       queryVariables: operationSignature.variables,
       recordGqlFields: operationSignature.fields,

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -59,7 +59,7 @@ const StyledInput = styled.input<
   padding: ${({ theme, sizeVariant }) =>
     sizeVariant === 'sm' ? `${theme.spacing(2)} 0` : theme.spacing(2)};
   padding-left: ${({ theme, LeftIcon }) =>
-    LeftIcon ? `px` : theme.spacing(2)};
+    LeftIcon ? `calc(${theme.spacing(4)} + 16px)` : theme.spacing(2)};
   width: ${({ theme, width }) =>
     width ? `calc(${width}px + ${theme.spacing(5)})` : '100%'};
 

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

@@ -28,8 +28,7 @@ export const SettingsNewObject = () => {
   const navigate = useNavigateSettings();
   const { enqueueSnackBar } = useSnackBar();
 
-  const { createOneObjectMetadataItem, findManyRecordsCache } =
+  const { createOneObjectMetadataItem } = useCreateOneObjectMetadataItem();
-    useCreateOneObjectMetadataItem();
 
   const formConfig = useForm<SettingsDataModelNewObjectFormValues>({
     mode: 'onTouched',
@@ -53,8 +52,6 @@ export const SettingsNewObject = () => {
           ? { objectNamePlural: response.createOneObject.namePlural }
           : undefined,
       );
-
-      await findManyRecordsCache();
     } catch (error) {
       enqueueSnackBar((error as Error).message, {
         variant: SnackBarVariant.Error,

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

@@ -137,6 +137,10 @@ export const SettingsObjectNewFieldConfigure = () => {
     formValues: SettingsDataModelNewFieldFormValues,
   ) => {
     try {
+      navigate(SettingsPath.ObjectDetail, {
+        objectNamePlural,
+      });
+
       if (
         formValues.type === FieldMetadataType.RELATION &&
         'relation' in formValues
@@ -172,10 +176,6 @@ export const SettingsObjectNewFieldConfigure = () => {
         });
       }
 
-      navigate(SettingsPath.ObjectDetail, {
-        objectNamePlural,
-      });
-
       // TODO: fix optimistic update logic
       // Forcing a refetch for now but it's not ideal
       await apolloClient.refetchQueries({