Add back pickers on all pages, fix command menu (#2662)

* Add back pickers on all pages, fix command menu

* Fix lint

front/src/modules/object-record/components/RecordShowPage.tsx

@@ -8,6 +8,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
 import { filterAvailableFieldMetadataItem } from '@/object-record/utils/filterAvailableFieldMetadataItem';
 import { IconBuildingSkyscraper } from '@/ui/display/icon';
+import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
 import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { PageFavoriteButton } from '@/ui/layout/page/PageFavoriteButton';
@@ -40,6 +41,8 @@ export const RecordShowPage = () => {
     objectNameSingular,
   });
 
+  const { identifiersMapper } = useRelationPicker();
+
   const { favorites, createFavorite, deleteFavorite } = useFavorites({
     objectNamePlural: objectMetadataItem?.namePlural,
   });
@@ -118,6 +121,11 @@ export const RecordShowPage = () => {
       ? object.name.firstName + ' ' + object.name.lastName
       : object.name;
 
+  const recordIdentifiers = identifiersMapper?.(
+    object,
+    objectMetadataItem?.nameSingular ?? '',
+  );
+
   return (
     <PageContainer>
       <PageTitle title={pageName} />
@@ -144,8 +152,8 @@ export const RecordShowPage = () => {
             <ShowPageLeftContainer>
               <ShowPageSummaryCard
                 id={object.id}
-                logoOrAvatar={''}
-                title={object.name ?? 'No name'}
+                logoOrAvatar={recordIdentifiers?.avatarUrl}
+                title={recordIdentifiers?.name ?? 'No name'}
                 date={object.createdAt ?? ''}
                 renderTitleEditComponent={() => <></>}
                 avatarType="squared"

front/src/modules/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition.ts

@@ -34,6 +34,7 @@ export const getRecordOptimisticEffectDefinition = ({
             },
           };
         }
+
         draft.edges.unshift({ node: newData, cursor: '' });
       });
 

front/src/modules/object-record/hooks/useFindManyObjectRecords.ts

@@ -30,24 +30,29 @@ export const useFindManyObjectRecords = <
   objectNamePlural,
   filter,
   orderBy,
+  limit,
   onCompleted,
   skip,
 }: Pick<ObjectMetadataItemIdentifier, 'objectNamePlural'> & {
   filter?: any;
   orderBy?: any;
+  limit?: number;
   onCompleted?: (data: PaginatedObjectTypeResults<ObjectType>) => void;
   skip?: boolean;
 }) => {
+  const findManyQueryStateIdentifier =
+    objectNamePlural + JSON.stringify(filter);
+
   const [lastCursor, setLastCursor] = useRecoilState(
-    cursorFamilyState(objectNamePlural),
+    cursorFamilyState(findManyQueryStateIdentifier),
   );
 
   const [hasNextPage, setHasNextPage] = useRecoilState(
-    hasNextPageFamilyState(objectNamePlural),
+    hasNextPageFamilyState(findManyQueryStateIdentifier),
   );
 
   const [, setIsFetchingMoreObjects] = useRecoilState(
-    isFetchingMoreObjectsFamilyState(objectNamePlural),
+    isFetchingMoreObjectsFamilyState(findManyQueryStateIdentifier),
   );
 
   const { objectMetadataItem, objectNotFoundInMetadata, findManyQuery } =
@@ -68,6 +73,7 @@ export const useFindManyObjectRecords = <
     variables: {
       filter: filter ?? {},
       orderBy: orderBy ?? {},
+      limit: limit ?? 30,
     },
     onCompleted: (data) => {
       if (objectMetadataItem) {

front/src/modules/object-record/hooks/useObjectRecordTable.ts

@@ -2,8 +2,8 @@ import { useRecoilValue } from 'recoil';
 
 import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2';
-import { turnSortsIntoOrderByV2 } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2';
+import { turnFiltersIntoWhereClause } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClause';
+import { turnSortsIntoOrderBy } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { useRecordTableScopedStates } from '@/ui/object/record-table/hooks/internal/useRecordTableScopedStates';
 import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 
@@ -31,11 +31,11 @@ export const useObjectRecordTable = () => {
   const tableFilters = useRecoilValue(tableFiltersState);
   const tableSorts = useRecoilValue(tableSortsState);
 
-  const filter = turnFiltersIntoWhereClauseV2(
+  const filter = turnFiltersIntoWhereClause(
     tableFilters,
     foundObjectMetadataItem?.fields ?? [],
   );
-  const orderBy = turnSortsIntoOrderByV2(
+  const orderBy = turnSortsIntoOrderBy(
     tableSorts,
     foundObjectMetadataItem?.fields ?? [],
   );

front/src/modules/object-record/hooks/useUpdateOneObjectRecord.ts

@@ -1,4 +1,4 @@
-import { useMutation } from '@apollo/client';
+import { useApolloClient, useMutation } from '@apollo/client';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
@@ -11,10 +11,13 @@ export const useUpdateOneObjectRecord = <T>({
     objectMetadataItem: foundObjectMetadataItem,
     objectNotFoundInMetadata,
     updateOneMutation,
+    cacheFragment,
   } = useObjectMetadataItem({
     objectNameSingular,
   });
 
+  const { cache } = useApolloClient();
+
   // TODO: type this with a minimal type at least with Record<string, any>
   const [mutate] = useMutation(updateOneMutation);
 
@@ -29,6 +32,15 @@ export const useUpdateOneObjectRecord = <T>({
       return null;
     }
 
+    const cachedRecordId = cache.identify({
+      __typename: capitalize(foundObjectMetadataItem?.nameSingular ?? ''),
+      id: idToUpdate,
+    });
+    const cachedRecord = cache.readFragment({
+      id: cachedRecordId,
+      fragment: cacheFragment,
+    });
+
     const updatedObject = await mutate({
       variables: {
         idToUpdate: idToUpdate,
@@ -38,7 +50,7 @@ export const useUpdateOneObjectRecord = <T>({
       },
       optimisticResponse: {
         [`update${capitalize(objectNameSingular)}`]: {
-          id: idToUpdate,
+          ...(cachedRecord ?? {}),
           ...input,
         },
       },

front/src/modules/object-record/utils/useGenerateCacheFragment.ts

@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client';
+
+import { useMapFieldMetadataToGraphQLQuery } from '@/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery';
+import { EMPTY_MUTATION } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useGenerateCacheFragment = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem | undefined | null;
+}) => {
+  const mapFieldMetadataToGraphQLQuery = useMapFieldMetadataToGraphQLQuery();
+
+  if (!objectMetadataItem) {
+    return EMPTY_MUTATION;
+  }
+
+  const capitalizedObjectName = capitalize(objectMetadataItem.nameSingular);
+
+  return gql`
+  fragment ${capitalizedObjectName}Fragment on ${capitalizedObjectName} {
+    id
+    ${objectMetadataItem.fields
+      .map((field) => mapFieldMetadataToGraphQLQuery(field))
+      .join('\n')}
+  }
+`;
+};