Fixed record inline cell fields on activity editor (#2634)

Created a generic useFieldContext hook to wrap RecordInlineCell anywhere in the app easily

front/src/modules/activities/components/ActivityEditor.tsx

@@ -7,7 +7,9 @@ import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdo
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTarget } from '@/activities/types/ActivityTarget';
 import { Comment } from '@/activities/types/Comment';
+import { useFieldContext } from '@/object-record/hooks/useFieldContext';
 import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord';
+import { RecordInlineCell } from '@/ui/object/record-inline-cell/components/RecordInlineCell';
 import { PropertyBox } from '@/ui/object/record-inline-cell/property-box/components/PropertyBox';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
@@ -73,10 +75,6 @@ export const ActivityEditor = ({
   const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
     useState<boolean>(false);
 
-  console.log({
-    activity,
-  });
-
   const [title, setTitle] = useState<string | null>(activity.title ?? '');
   const [completedAt, setCompletedAt] = useState<string | null>(
     activity.completedAt ?? '',
@@ -86,6 +84,21 @@ export const ActivityEditor = ({
     objectNameSingular: 'activity',
   });
 
+  const { FieldContextProvider: DueAtFieldContextProvider } = useFieldContext({
+    objectNameSingular: 'activity',
+    objectRecordId: activity.id,
+    fieldMetadataName: 'dueAt',
+    fieldPosition: 0,
+  });
+
+  const { FieldContextProvider: AssigneeFieldContextProvider } =
+    useFieldContext({
+      objectNameSingular: 'activity',
+      objectRecordId: activity.id,
+      fieldMetadataName: 'assignee',
+      fieldPosition: 1,
+    });
+
   const updateTitle = useCallback(
     (newTitle: string) => {
       updateOneObject?.({
@@ -141,16 +154,18 @@ export const ActivityEditor = ({
             onCompletionChange={handleActivityCompletionChange}
           />
           <PropertyBox>
-            {activity.type === 'Task' && (
+            {activity.type === 'Task' &&
-              <>
+              DueAtFieldContextProvider &&
-                {/* <RecoilScope>
+              AssigneeFieldContextProvider && (
-                  <ActivityEditorDateField activityId={activity.id} />
+                <>
-                </RecoilScope>
+                  <DueAtFieldContextProvider>
-                <RecoilScope>
+                    <RecordInlineCell />
-                  <ActivityAssigneeEditableField activity={activity} />
+                  </DueAtFieldContextProvider>
-                </RecoilScope> */}
+                  <AssigneeFieldContextProvider>
-              </>
+                    <RecordInlineCell />
-            )}
+                  </AssigneeFieldContextProvider>
+                </>
+              )}
             {/* <ActivityRelationEditableField activity={activity} /> */}
           </PropertyBox>
         </StyledTopContainer>

front/src/modules/object-record/hooks/useFieldContext.tsx

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
+import { useUpdateOneObjectRecord } from '@/object-record/hooks/useUpdateOneObjectRecord';
+import { FieldContext } from '@/ui/object/field/contexts/FieldContext';
+import { InlineCellHotkeyScope } from '@/ui/object/record-inline-cell/types/InlineCellHotkeyScope';
+
+export const useFieldContext = ({
+  objectNameSingular,
+  fieldMetadataName,
+  objectRecordId,
+  fieldPosition,
+}: {
+  objectNameSingular: string;
+  objectRecordId: string;
+  fieldMetadataName: string;
+  fieldPosition: number;
+}) => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const fieldMetadataItem = objectMetadataItem?.fields.find(
+    (field) => field.name === fieldMetadataName,
+  );
+
+  const useUpdateOneObjectMutation: () => [(params: any) => any, any] = () => {
+    const { updateOneObject } = useUpdateOneObjectRecord({
+      objectNameSingular,
+    });
+
+    const updateEntity = ({
+      variables,
+    }: {
+      variables: {
+        where: { id: string };
+        data: {
+          [fieldName: string]: any;
+        };
+      };
+    }) => {
+      updateOneObject?.({
+        idToUpdate: variables.where.id,
+        input: variables.data,
+      });
+    };
+
+    return [updateEntity, { loading: false }];
+  };
+
+  const FieldContextProvider =
+    fieldMetadataItem && objectMetadataItem
+      ? ({ children }: { children: ReactNode }) => (
+          <FieldContext.Provider
+            key={objectRecordId + fieldMetadataItem.id}
+            value={{
+              entityId: objectRecordId,
+              recoilScopeId: objectRecordId + fieldMetadataItem.id,
+              isLabelIdentifier: false,
+              fieldDefinition: formatFieldMetadataItemAsColumnDefinition({
+                field: fieldMetadataItem,
+                position: fieldPosition,
+                objectMetadataItem,
+              }),
+              useUpdateEntityMutation: useUpdateOneObjectMutation,
+              hotkeyScope: InlineCellHotkeyScope.InlineCell,
+            }}
+          >
+            {children}
+          </FieldContext.Provider>
+        )
+      : undefined;
+
+  return {
+    FieldContextProvider,
+  };
+};