@contentful/field-editor-reference 5.9.0 → 5.10.0

package/dist/esm/resources/SingleResourceReferenceEditor.spec.js

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useResource } from '../common/EntityStore';
+import { SingleResourceReferenceEditor } from './SingleResourceReferenceEditor';
+import { createFakeEntryResource, mockSdkForField } from './testHelpers/resourceEditorHelpers';
+const mockedResources = {};
+jest.mock('../common/EntityStore', ()=>{
+    const module = jest.requireActual('../common/EntityStore');
+    return {
+        ...module,
+        useResource: jest.fn((linkType, urn)=>({
+                data: mockedResources[`${linkType}.${urn}`],
+                status: 'success'
+            }))
+    };
+});
+jest.mock('react-intersection-observer', ()=>{
+    const module = jest.requireActual('react-intersection-observer');
+    return {
+        ...module,
+        useInView: ()=>({
+                inView: true
+            })
+    };
+});
+const fieldDefinition = {
+    type: 'ResourceLink',
+    id: 'foo',
+    name: 'Foo',
+    allowedResources: [
+        {
+            source: 'foo',
+            contentTypes: [
+                'bar'
+            ]
+        }
+    ],
+    required: true,
+    validations: []
+};
+describe('Single resource editor', ()=>{
+    it('renders the action button when no value is set', async ()=>{
+        const sdk = mockSdkForField(fieldDefinition);
+        render(React.createElement(SingleResourceReferenceEditor, {
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {}
+        }));
+        const button = await screen.findByText('Add existing content');
+        expect(button).toBeDefined();
+        fireEvent.click(button);
+        const dialogFn = sdk.dialogs.selectSingleResourceEntry;
+        expect(dialogFn).toHaveBeenCalledTimes(1);
+        const options = dialogFn.mock.calls[0][0];
+        expect(options).toEqual({
+            allowedResources: fieldDefinition.allowedResources
+        });
+    });
+    it('renders custom actions when passed', async ()=>{
+        const sdk = mockSdkForField(fieldDefinition);
+        render(React.createElement(SingleResourceReferenceEditor, {
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {},
+            renderCustomActions: ()=>React.createElement("div", {
+                    "data-testid": "custom-actions"
+                })
+        }));
+        const customActions = await screen.findByTestId('custom-actions');
+        expect(customActions).toBeDefined();
+    });
+    it('renders the card button when the value is set', async ()=>{
+        const sdk = mockSdkForField(fieldDefinition, {
+            sys: {
+                type: 'Link',
+                linkType: 'Contentful:Entry',
+                urn: 'crn:test:::content:spaces/x-space/entries/linkedEntryId'
+            }
+        });
+        const info = createFakeEntryResource({
+            title: 'Title of linked entry',
+            id: 'linkedEntryId',
+            space: {
+                id: 'x-space',
+                name: 'X Space'
+            }
+        });
+        mockedResources[`Contentful:Entry.crn:test:::content:spaces/x-space/entries/linkedEntryId`] = info;
+        render(React.createElement(SingleResourceReferenceEditor, {
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            apiUrl: "test-contentful",
+            getEntryRouteHref: jest.fn(),
+            parameters: {}
+        }));
+        expect(useResource).toHaveBeenCalled();
+        const title = await screen.findByText('Title of linked entry');
+        await screen.findByText('X Space');
+        const theCard = title.closest('[data-test-id="cf-ui-entry-card"]');
+        const actionsBtn = theCard?.querySelector('[data-test-id="cf-ui-card-actions"]');
+        expect(actionsBtn).toBeDefined();
+        fireEvent.click(actionsBtn);
+        const removeBtn = await screen.findByText('Remove', {
+            selector: '[role="menuitem"]'
+        });
+        fireEvent.click(removeBtn);
+        expect(sdk.field.removeValue).toHaveBeenCalledWith();
+        const linkExistingBtn = screen.queryByText('Add existing content');
+        expect(linkExistingBtn).not.toBeInTheDocument();
+    });
+});

package/dist/esm/resources/index.js

@@ -0,0 +1,2 @@
+export * from './MultipleResourceReferenceEditor';
+export * from './SingleResourceReferenceEditor';

package/dist/esm/resources/testHelpers/resourceEditorHelpers.js

@@ -0,0 +1,103 @@
+export function mockSdkForField(fieldDefinition, fieldValue) {
+    return {
+        field: {
+            getValue: jest.fn(()=>fieldValue),
+            setValue: jest.fn(()=>Promise.resolve(undefined)),
+            removeValue: jest.fn(),
+            onSchemaErrorsChanged: ()=>{},
+            onIsDisabledChanged: ()=>{},
+            onValueChanged: ()=>{},
+            ...fieldDefinition,
+            locale: 'en'
+        },
+        dialogs: {
+            selectSingleResourceEntry: jest.fn().mockResolvedValue({
+                sys: {
+                    type: 'Entry',
+                    id: 'linkedEntryId',
+                    space: {
+                        sys: {
+                            type: 'Link',
+                            linkType: 'Space',
+                            id: 'x-space'
+                        }
+                    }
+                }
+            }),
+            selectMultipleResourceEntries: jest.fn().mockResolvedValue([
+                {
+                    sys: {
+                        type: 'Entry',
+                        id: 'linkedEntryId',
+                        space: {
+                            sys: {
+                                type: 'Link',
+                                linkType: 'Space',
+                                id: 'x-space'
+                            }
+                        }
+                    }
+                }
+            ])
+        },
+        ids: {
+            space: 'myTestSpace',
+            environment: 'master',
+            organization: 'acme',
+            user: 'norris_chuck',
+            field: fieldDefinition.id,
+            entry: 'testEntry',
+            contentType: 'testCT'
+        },
+        space: {
+            onEntityChanged: ()=>{}
+        },
+        navigator: {
+            onSlideInNavigation: ()=>()=>({})
+        }
+    };
+}
+export const createFakeEntryResource = ({ title , id , space  })=>{
+    const { id: spaceId , name: spaceName  } = space;
+    return {
+        resource: {
+            sys: {
+                id,
+                type: 'Entry',
+                space: {
+                    sys: {
+                        id: spaceId
+                    }
+                },
+                environment: {
+                    sys: {
+                        id: `${spaceId}-environment`
+                    }
+                }
+            },
+            fields: {
+                title: {
+                    en: title
+                }
+            }
+        },
+        contentType: {
+            sys: {
+                id: 'xTestCT'
+            },
+            displayField: 'title',
+            fields: [
+                {
+                    type: 'Symbol',
+                    id: 'title',
+                    name: 'The title'
+                }
+            ]
+        },
+        localeCode: 'en',
+        defaultLocaleCode: 'en',
+        space: {
+            name: spaceName
+        }
+    };
+};

package/dist/esm/resources/useResourceLinkActions.js

@@ -0,0 +1,78 @@
+import { useCallback, useMemo } from 'react';
+const toLinkItem = (entry, apiUrl)=>({
+        sys: {
+            type: 'ResourceLink',
+            linkType: 'Contentful:Entry',
+            urn: entry.sys.urn ?? `crn:${apiUrl}:::content:spaces/${entry.sys.space.sys.id}/entries/${entry.sys.id}`
+        }
+    });
+const getUpdatedValue = (field, entries, apiUrl)=>{
+    const multiple = field.type === 'Array';
+    if (multiple) {
+        const linkItems = entries.map((entry)=>toLinkItem(entry, apiUrl));
+        const prevValue = field.getValue() || [];
+        return [
+            ...prevValue,
+            ...linkItems
+        ];
+    } else {
+        return toLinkItem(entries[0], apiUrl);
+    }
+};
+export function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl  }) {
+    const handleAfterLink = useCallback((entries)=>{
+        if (!onAfterLink) {
+            return;
+        }
+        entries.forEach(onAfterLink);
+    }, [
+        onAfterLink
+    ]);
+    const onLinkedExisting = useMemo(()=>{
+        return (entries)=>{
+            const updatedValue = getUpdatedValue(field, entries, apiUrl);
+            field.setValue(updatedValue);
+            handleAfterLink(entries);
+        };
+    }, [
+        field,
+        handleAfterLink,
+        apiUrl
+    ]);
+    const multiple = field.type === 'Array';
+    const onLinkExisting = useMemo(()=>{
+        const promptSelection = multiple ? async ()=>await dialogs.selectMultipleResourceEntries({
+                allowedResources: field.allowedResources
+            }) : async ()=>[
+                await dialogs.selectSingleResourceEntry({
+                    allowedResources: field.allowedResources
+                })
+            ];
+        return async ()=>{
+            const res = await promptSelection();
+            if (!res) {
+                return;
+            }
+            onLinkedExisting(res);
+        };
+    }, [
+        dialogs,
+        field.allowedResources,
+        multiple,
+        onLinkedExisting
+    ]);
+    return {
+        onLinkExisting,
+        onLinkedExisting,
+        entityType: 'Entry',
+        contentTypes: [],
+        canCreateEntity: false,
+        canLinkMultiple: multiple,
+        canLinkEntity: true,
+        isDisabled: false,
+        isEmpty: false,
+        isFull: false,
+        onCreate: async ()=>{},
+        onCreated: ()=>{}
+    };
+}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export { Entry, File, Asset } from '@contentful/field-editor-shared';

package/dist/esm/utils/fromFieldValidations.js

@@ -0,0 +1,39 @@
+import isNumber from 'lodash/isNumber';
+export function fromFieldValidations(field) {
+    const validations = [
+        ...field.validations,
+        ...field.items?.validations ?? []
+    ];
+    const linkContentTypeValidations = validations.find((v)=>'linkContentType' in v);
+    const linkMimetypeGroupValidations = validations.find((v)=>'linkMimetypeGroup' in v);
+    const sizeValidations = validations.find((v)=>'size' in v);
+    const size = sizeValidations && sizeValidations.size || {};
+    const min = size.min;
+    const max = size.max;
+    let numberOfLinks = undefined;
+    if (isNumber(min) && isNumber(max)) {
+        numberOfLinks = {
+            type: 'min-max',
+            min,
+            max
+        };
+    } else if (isNumber(min)) {
+        numberOfLinks = {
+            type: 'min',
+            min,
+            max: undefined
+        };
+    } else if (isNumber(max)) {
+        numberOfLinks = {
+            type: 'max',
+            max,
+            min: undefined
+        };
+    }
+    const result = {
+        contentTypes: linkContentTypeValidations?.linkContentType ?? undefined,
+        mimetypeGroups: linkMimetypeGroupValidations?.linkMimetypeGroup ?? undefined,
+        numberOfLinks
+    };
+    return result;
+}

package/dist/{__fixtures__ → types/__fixtures__}/FakeSdk.d.ts

@@ -1,8 +1,8 @@
-import { FieldExtensionSDK } from '@contentful/app-sdk';
-import { Emitter } from 'mitt';
-export declare type ReferenceEditorSdkProps = {
-    initialValue?: any;
-    validations?: any;
-    fetchDelay?: number;
-};
-export declare function newReferenceEditorFakeSdk(props?: ReferenceEditorSdkProps): [FieldExtensionSDK, Emitter];
+import { FieldExtensionSDK } from '@contentful/app-sdk';
+import { Emitter } from 'mitt';
+export type ReferenceEditorSdkProps = {
+    initialValue?: any;
+    validations?: any;
+    fetchDelay?: number;
+};
+export declare function newReferenceEditorFakeSdk(props?: ReferenceEditorSdkProps): [FieldExtensionSDK, Emitter];

package/dist/{__fixtures__ → types/__fixtures__}/asset/index.d.ts

@@ -1,6 +1,6 @@
-import changed from './changed_asset.json';
-import created from './created_asset.json';
-import empty from './empty_asset.json';
-import invalid from './invalid_asset.json';
-import published from './published_asset.json';
-export { changed, empty, published, invalid, created };
+import changed from './changed_asset.json';
+import created from './created_asset.json';
+import empty from './empty_asset.json';
+import invalid from './invalid_asset.json';
+import published from './published_asset.json';
+export { changed, empty, published, invalid, created };

package/dist/{__fixtures__ → types/__fixtures__}/content-type/index.d.ts

@@ -1,2 +1,2 @@
-import published from './published_content_type.json';
-export { published };
+import published from './published_content_type.json';
+export { published };

package/dist/{__fixtures__ → types/__fixtures__}/entry/index.d.ts

@@ -1,5 +1,5 @@
-import changed from './changed_entry.json';
-import empty from './empty_entry.json';
-import invalid from './invalid_entry.json';
-import published from './published_entry.json';
-export { changed, empty, published, invalid };
+import changed from './changed_entry.json';
+import empty from './empty_entry.json';
+import invalid from './invalid_entry.json';
+import published from './published_entry.json';
+export { changed, empty, published, invalid };

package/dist/{__fixtures__ → types/__fixtures__}/fixtures.d.ts

@@ -1,6 +1,6 @@
-import * as assets from './asset';
-import * as contentTypes from './content-type';
-import * as entries from './entry';
-import * as locales from './locale';
-import * as spaces from './space';
-export { assets, contentTypes, entries, locales, spaces };
+import * as assets from './asset';
+import * as contentTypes from './content-type';
+import * as entries from './entry';
+import * as locales from './locale';
+import * as spaces from './space';
+export { assets, contentTypes, entries, locales, spaces };

package/dist/{__fixtures__ → types/__fixtures__}/locale/index.d.ts

@@ -1,42 +1,42 @@
-import englishDefault from './english_default_locale.json';
-import german from './german_locale.json';
-declare const list: {
-    sys: {
-        type: string;
-    };
-    total: number;
-    skip: number;
-    limit: number;
-    items: {
-        sys: {
-            id: string;
-            type: string;
-            createdAt: string;
-            updatedAt: string;
-            version: number;
-            space: {
-                sys: {
-                    type: string;
-                    linkType: string;
-                    id: string;
-                };
-            };
-            environment: {
-                sys: {
-                    id: string;
-                    type: string;
-                    linkType: string;
-                };
-            };
-        };
-        name: string;
-        code: string;
-        internal_code: string;
-        fallbackCode: null;
-        contentDeliveryApi: boolean;
-        contentManagementApi: boolean;
-        default: boolean;
-        optional: boolean;
-    }[];
-};
-export { englishDefault, german, list };
+import englishDefault from './english_default_locale.json';
+import german from './german_locale.json';
+declare const list: {
+    sys: {
+        type: string;
+    };
+    total: number;
+    skip: number;
+    limit: number;
+    items: {
+        sys: {
+            id: string;
+            type: string;
+            createdAt: string;
+            updatedAt: string;
+            version: number;
+            space: {
+                sys: {
+                    type: string;
+                    linkType: string;
+                    id: string;
+                };
+            };
+            environment: {
+                sys: {
+                    id: string;
+                    type: string;
+                    linkType: string;
+                };
+            };
+        };
+        name: string;
+        code: string;
+        internal_code: string;
+        fallbackCode: null;
+        contentDeliveryApi: boolean;
+        contentManagementApi: boolean;
+        default: boolean;
+        optional: boolean;
+    }[];
+};
+export { englishDefault, german, list };

package/dist/{__fixtures__ → types/__fixtures__}/space/index.d.ts

@@ -1,2 +1,2 @@
-import indifferent from './indifferent_space.json';
-export { indifferent };
+import indifferent from './indifferent_space.json';
+export { indifferent };

package/dist/{assets → types/assets}/MultipleMediaEditor.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { ReferenceEditorProps } from '../common/ReferenceEditor';
-declare type EditorProps = Pick<ReferenceEditorProps, Exclude<keyof ReferenceEditorProps, 'hasCardEditActions'>>;
-export declare function MultipleMediaEditor(props: EditorProps): JSX.Element;
-export declare namespace MultipleMediaEditor {
-    var defaultProps: {
-        isInitiallyDisabled: boolean;
-    };
-}
-export {};
+import * as React from 'react';
+import { ReferenceEditorProps } from '../common/ReferenceEditor';
+type EditorProps = Pick<ReferenceEditorProps, Exclude<keyof ReferenceEditorProps, 'hasCardEditActions'>>;
+export declare function MultipleMediaEditor(props: EditorProps): React.JSX.Element;
+export declare namespace MultipleMediaEditor {
+    var defaultProps: {
+        isInitiallyDisabled: boolean;
+    };
+}
+export {};

package/dist/types/assets/SingleMediaEditor.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ReferenceEditorProps } from '../common/ReferenceEditor';
+type EditorProps = Pick<ReferenceEditorProps, Exclude<keyof ReferenceEditorProps, 'hasCardEditActions'>>;
+export declare function SingleMediaEditor(props: EditorProps): React.JSX.Element;
+export declare namespace SingleMediaEditor {
+    var defaultProps: {
+        isInitiallyDisabled: boolean;
+    };
+}
+export {};

package/dist/{assets → types/assets}/WrappedAssetCard/AssetCardActions.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { File } from '../../types';
-export declare function renderAssetInfo(props: {
-    entityFile: File;
-}): any[];
-export declare function renderActions(props: {
-    onEdit?: () => void;
-    onRemove?: () => void;
-    isDisabled: boolean;
-    entityFile?: File;
-}): (JSX.Element | null)[];
+import * as React from 'react';
+import { File } from '../../types';
+export declare function renderAssetInfo(props: {
+    entityFile: File;
+}): any[];
+export declare function renderActions(props: {
+    onEdit?: () => void;
+    onRemove?: () => void;
+    isDisabled: boolean;
+    entityFile?: File;
+}): (React.JSX.Element | null)[];

package/dist/{assets → types/assets}/WrappedAssetCard/FetchingWrappedAssetCard.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { CustomCardRenderer, RenderCustomMissingEntityCard } from '../../common/customCardTypes';
-import { Action, FieldExtensionSDK, ViewType, RenderDragFn } from '../../types';
-declare type FetchingWrappedAssetCardProps = {
-    assetId: string;
-    isDisabled: boolean;
-    sdk: FieldExtensionSDK;
-    viewType: ViewType | 'big_card';
-    onRemove: () => void;
-    getEntityUrl?: (id: string) => string;
-    onAction?: (action: Action) => void;
-    renderDragHandle?: RenderDragFn;
-    renderCustomCard?: CustomCardRenderer;
-    renderCustomMissingEntityCard?: RenderCustomMissingEntityCard;
-};
-export declare function FetchingWrappedAssetCard(props: FetchingWrappedAssetCardProps): JSX.Element;
-export {};
+import * as React from 'react';
+import { CustomCardRenderer, RenderCustomMissingEntityCard } from '../../common/customCardTypes';
+import { Action, FieldExtensionSDK, ViewType, RenderDragFn } from '../../types';
+type FetchingWrappedAssetCardProps = {
+    assetId: string;
+    isDisabled: boolean;
+    sdk: FieldExtensionSDK;
+    viewType: ViewType | 'big_card';
+    onRemove: () => void;
+    getEntityUrl?: (id: string) => string;
+    onAction?: (action: Action) => void;
+    renderDragHandle?: RenderDragFn;
+    renderCustomCard?: CustomCardRenderer;
+    renderCustomMissingEntityCard?: RenderCustomMissingEntityCard;
+};
+export declare function FetchingWrappedAssetCard(props: FetchingWrappedAssetCardProps): React.JSX.Element;
+export {};

package/dist/{assets → types/assets}/WrappedAssetCard/WrappedAssetCard.d.ts

@@ -1,24 +1,24 @@
-/// <reference types="react" />
-import { SpaceAPI } from '@contentful/app-sdk';
-import { Asset, RenderDragFn } from '../../types';
-export interface WrappedAssetCardProps {
-    getEntityScheduledActions: SpaceAPI['getEntityScheduledActions'];
-    asset: Asset;
-    localeCode: string;
-    defaultLocaleCode: string;
-    getAssetUrl?: (assetId: string) => string;
-    className?: string;
-    isSelected?: boolean;
-    isDisabled: boolean;
-    onEdit?: () => void;
-    onRemove?: () => void;
-    size: 'default' | 'small';
-    renderDragHandle?: RenderDragFn;
-    isClickable: boolean;
-}
-export declare const WrappedAssetCard: {
-    (props: WrappedAssetCardProps): JSX.Element;
-    defaultProps: {
-        isClickable: boolean;
-    };
-};
+import * as React from 'react';
+import { SpaceAPI } from '@contentful/app-sdk';
+import { Asset, RenderDragFn } from '../../types';
+export interface WrappedAssetCardProps {
+    getEntityScheduledActions: SpaceAPI['getEntityScheduledActions'];
+    asset: Asset;
+    localeCode: string;
+    defaultLocaleCode: string;
+    getAssetUrl?: (assetId: string) => string;
+    className?: string;
+    isSelected?: boolean;
+    isDisabled: boolean;
+    onEdit?: () => void;
+    onRemove?: () => void;
+    size: 'default' | 'small';
+    renderDragHandle?: RenderDragFn;
+    isClickable: boolean;
+}
+export declare const WrappedAssetCard: {
+    (props: WrappedAssetCardProps): React.JSX.Element;
+    defaultProps: {
+        isClickable: boolean;
+    };
+};