Merge pull request #8899 from marmelab/fix-reference-field-link-function

Fix ReferenceField link function is called with referencing record

Author: slax57

packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx

@@ -572,6 +572,47 @@ describe('<ReferenceField />', () => {
         expect(screen.queryAllByRole('link')).toHaveLength(0);
     });
 
+    it('should call the link function with the referenced record', async () => {
+        const dataProvider = testDataProvider({
+            getMany: jest.fn().mockResolvedValue({
+                data: [{ id: 123, title: 'foo' }],
+            }),
+        });
+        const link = jest.fn().mockReturnValue('/posts/123');
+
+        render(
+            <ThemeProvider theme={theme}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <ResourceDefinitionContextProvider
+                        definitions={{
+                            posts: {
+                                hasEdit: true,
+                            },
+                        }}
+                    >
+                        <ReferenceField
+                            record={record}
+                            resource="comments"
+                            source="postId"
+                            reference="posts"
+                            link={link}
+                        >
+                            <TextField source="title" />
+                        </ReferenceField>
+                    </ResourceDefinitionContextProvider>
+                </CoreAdminContext>
+            </ThemeProvider>
+        );
+        await waitFor(() =>
+            expect(dataProvider.getMany).toHaveBeenCalledTimes(1)
+        );
+        expect(screen.queryByRole('link')?.getAttribute('href')).toBe(
+            '#/posts/123'
+        );
+
+        expect(link).toHaveBeenCalledWith({ id: 123, title: 'foo' }, 'posts');
+    });
+
     it('should accept multiple children', async () => {
         render(<Children />);
         expect(screen.findByText('9780393966473')).not.toBeNull();

packages/ra-ui-materialui/src/field/ReferenceField.tsx

@@ -120,24 +120,7 @@ export interface ReferenceFieldProps<RecordType extends RaRecord = any>
  */
 export const NonEmptyReferenceField: FC<
     Omit<ReferenceFieldProps, 'source'> & { id: Identifier }
-> = ({ children, id, record, reference, link, ...props }) => {
-    const createPath = useCreatePath();
-    const resourceDefinition = useResourceDefinition({ resource: reference });
-
-    const resourceLinkPath =
-        link === false ||
-        (link === 'edit' && !resourceDefinition.hasEdit) ||
-        (link === 'show' && !resourceDefinition.hasShow)
-            ? false
-            : createPath({
-                  resource: reference,
-                  id,
-                  type:
-                      typeof link === 'function'
-                          ? link(record, reference)
-                          : link,
-              });
-
+> = ({ children, id, record, reference, ...props }) => {
     return (
         <ResourceContextProvider value={reference}>
             <PureReferenceFieldView
@@ -147,7 +130,6 @@ export const NonEmptyReferenceField: FC<
                     reference,
                     id,
                 })}
-                resourceLinkPath={resourceLinkPath}
             >
                 {children}
             </PureReferenceFieldView>
@@ -167,11 +149,13 @@ export const ReferenceFieldView: FC<ReferenceFieldViewProps> = props => {
         isLoading,
         reference,
         referenceRecord,
-        resourceLinkPath,
+        link,
         sx,
     } = props;
     const getRecordRepresentation = useGetRecordRepresentation(reference);
     const translate = useTranslate();
+    const createPath = useCreatePath();
+    const resourceDefinition = useResourceDefinition({ resource: reference });
 
     if (error) {
         return (
@@ -194,6 +178,20 @@ export const ReferenceFieldView: FC<ReferenceFieldViewProps> = props => {
         ) : null;
     }
 
+    const resourceLinkPath =
+        link === false ||
+        (link === 'edit' && !resourceDefinition.hasEdit) ||
+        (link === 'show' && !resourceDefinition.hasShow)
+            ? false
+            : createPath({
+                  resource: reference,
+                  id: referenceRecord.id,
+                  type:
+                      typeof link === 'function'
+                          ? link(referenceRecord, reference)
+                          : link,
+              });
+
     let child = children || (
         <Typography component="span" variant="body2">
             {getRecordRepresentation(referenceRecord)}
@@ -227,10 +225,12 @@ ReferenceFieldView.propTypes = {
     reference: PropTypes.string,
     referenceRecord: PropTypes.any,
     resource: PropTypes.string,
-    resourceLinkPath: PropTypes.oneOfType([
+    // @ts-ignore
+    link: PropTypes.oneOfType([
         PropTypes.string,
-        PropTypes.oneOf([false]),
-    ]) as React.Validator<string | false>,
+        PropTypes.bool,
+        PropTypes.func,
+    ]),
     source: PropTypes.string,
     translateChoice: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
 };
@@ -242,7 +242,7 @@ export interface ReferenceFieldViewProps
     reference: string;
     resource?: string;
     translateChoice?: Function | boolean;
-    resourceLinkPath?: string | false;
+    link?: LinkToType;
     children?: ReactNode;
     sx?: SxProps;
 }

packages/ra-ui-materialui/src/field/ReferenceOneField.tsx

@@ -84,7 +84,7 @@ export const ReferenceOneField = <RecordType extends RaRecord = any>(
                 isLoading={isLoading}
                 isFetching={isFetching}
                 referenceRecord={referenceRecord}
-                resourceLinkPath={resourceLinkPath}
+                link={resourceLinkPath}
                 reference={reference}
                 refetch={refetch}
                 error={error}