@contentful/field-editor-reference 5.9.0 → 5.10.0

package/dist/esm/common/SingleReferenceEditor.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { LinkEntityActions } from '../components';
+import { useLinkActionsProps } from '../components/LinkActions/LinkEntityActions';
+import { ReferenceEditor } from './ReferenceEditor';
+import { useEditorPermissions } from './useEditorPermissions';
+function Editor(props) {
+    const { setValue , entityType  } = props;
+    const editorPermissions = useEditorPermissions(props);
+    const onCreate = useCallback((id)=>void setValue({
+            sys: {
+                type: 'Link',
+                linkType: entityType,
+                id
+            }
+        }), [
+        setValue,
+        entityType
+    ]);
+    const onLink = useCallback((ids)=>{
+        const [id] = ids;
+        setValue({
+            sys: {
+                type: 'Link',
+                linkType: entityType,
+                id
+            }
+        });
+    }, [
+        setValue,
+        entityType
+    ]);
+    const linkActionsProps = useLinkActionsProps({
+        ...props,
+        canLinkMultiple: false,
+        editorPermissions,
+        onCreate,
+        onLink
+    });
+    const customCardRenderer = useCallback((cardProps, _, renderDefaultCard)=>props.renderCustomCard ? props.renderCustomCard(cardProps, linkActionsProps, renderDefaultCard) : false, [
+        linkActionsProps
+    ]);
+    if (!props.entityId) {
+        return React.createElement(LinkEntityActions, {
+            renderCustomActions: props.renderCustomActions,
+            ...linkActionsProps
+        });
+    }
+    return props.children({
+        ...props,
+        renderCustomCard: props.renderCustomCard && customCardRenderer
+    });
+}
+export function SingleReferenceEditor(props) {
+    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    return React.createElement(ReferenceEditor, props, ({ value , setValue , disabled , externalReset  })=>{
+        return React.createElement(Editor, {
+            ...props,
+            key: `${externalReset}-reference`,
+            entityId: value ? value.sys.id : '',
+            isDisabled: disabled,
+            setValue: setValue,
+            allContentTypes: allContentTypes
+        });
+    });
+}
+SingleReferenceEditor.defaultProps = {
+    hasCardEditActions: true,
+    hasCardRemoveActions: true
+};

package/dist/esm/common/SortableLinkList.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+const styles = {
+    container: css({
+        position: 'relative'
+    }),
+    item: css({
+        marginBottom: tokens.spacingM,
+        zIndex: tokens.zIndexModal
+    })
+};
+const DragHandle = (props)=>{
+    const SortableDragHandle = SortableHandle(()=>props.drag);
+    return React.createElement(SortableDragHandle, null);
+};
+const SortableLink = SortableElement((props)=>React.createElement("div", {
+        className: styles.item
+    }, props.children));
+const SortableLinkListInternal = SortableContainer((props)=>{
+    return React.createElement("div", {
+        className: cx(styles.container, props.className)
+    }, props.items.map((item, index)=>React.createElement(SortableLink, {
+            disabled: props.isDisabled,
+            key: `${item.sys.urn ?? item.sys.id}-${index}`,
+            index: index
+        }, props.children({
+            items: props.items,
+            isDisabled: props.isDisabled,
+            item,
+            index,
+            DragHandle: props.isDisabled ? undefined : DragHandle
+        }))));
+});
+export function SortableLinkList(props) {
+    return React.createElement(SortableLinkListInternal, {
+        distance: 1,
+        ...props
+    }, props.children);
+}

package/dist/esm/common/customCardTypes.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/dist/esm/common/useAccessApi.js

@@ -0,0 +1,9 @@
+const AllowActionsOnContentType = ()=>Promise.resolve(true);
+export function useAccessApi(accessApi) {
+    const canPerformAction = accessApi.can;
+    const canPerformActionOnEntryOfType = accessApi.canPerformActionOnEntryOfType ?? AllowActionsOnContentType;
+    return {
+        canPerformAction,
+        canPerformActionOnEntryOfType
+    };
+}

package/dist/esm/common/useContentTypePermissions.js

@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useAccessApi } from './useAccessApi';
+async function filter(arr, predicate) {
+    const fail = Symbol();
+    const results = await Promise.all(arr.map(async (item)=>await predicate(item) ? item : fail));
+    return results.filter((x)=>x !== fail);
+}
+export function useContentTypePermissions(props) {
+    const availableContentTypes = useMemo(()=>{
+        if (props.entityType === 'Asset') {
+            return [];
+        }
+        if (props.validations.contentTypes) {
+            return props.allContentTypes.filter((ct)=>props.validations.contentTypes?.includes(ct.sys.id));
+        }
+        return props.allContentTypes;
+    }, [
+        props.allContentTypes,
+        props.validations.contentTypes,
+        props.entityType
+    ]);
+    const [creatableContentTypes, setCreatableContentTypes] = useState(availableContentTypes);
+    const [readableContentTypes, setReadableContentTypes] = useState(availableContentTypes);
+    const { canPerformActionOnEntryOfType  } = useAccessApi(props.sdk.access);
+    useEffect(()=>{
+        function getContentTypes(action) {
+            return filter(availableContentTypes, (ct)=>canPerformActionOnEntryOfType(action, ct.sys.id));
+        }
+        async function checkContentTypeAccess() {
+            const creatable = await getContentTypes('create');
+            const readable = await getContentTypes('read');
+            setCreatableContentTypes(creatable);
+            setReadableContentTypes(readable);
+        }
+        void checkContentTypeAccess();
+    }, [
+        availableContentTypes
+    ]);
+    return {
+        creatableContentTypes,
+        readableContentTypes,
+        availableContentTypes
+    };
+}

package/dist/esm/common/useEditorPermissions.js

@@ -0,0 +1,67 @@
+import { useEffect, useMemo, useState } from 'react';
+import { fromFieldValidations } from '../utils/fromFieldValidations';
+import { useAccessApi } from './useAccessApi';
+import { useContentTypePermissions } from './useContentTypePermissions';
+export function useEditorPermissions(props) {
+    const { sdk , entityType , parameters  } = props;
+    const validations = useMemo(()=>fromFieldValidations(props.sdk.field), [
+        props.sdk.field
+    ]);
+    const [canCreateEntity, setCanCreateEntity] = useState(true);
+    const [canLinkEntity, setCanLinkEntity] = useState(true);
+    const { creatableContentTypes , readableContentTypes , availableContentTypes  } = useContentTypePermissions({
+        ...props,
+        validations
+    });
+    const { canPerformAction  } = useAccessApi(sdk.access);
+    useEffect(()=>{
+        if (parameters.instance.showCreateEntityAction === false) {
+            setCanCreateEntity(false);
+            return;
+        }
+        async function checkCreateAccess() {
+            if (entityType === 'Asset') {
+                const canCreate = await canPerformAction('create', 'Asset') || true;
+                setCanCreateEntity(canCreate);
+            }
+            if (entityType === 'Entry') {
+                const canCreate = creatableContentTypes.length > 0 || true;
+                setCanCreateEntity(canCreate);
+            }
+        }
+        void checkCreateAccess();
+    }, [
+        entityType,
+        parameters.instance,
+        creatableContentTypes
+    ]);
+    useEffect(()=>{
+        if (parameters.instance.showLinkEntityAction === false) {
+            setCanLinkEntity(false);
+            return;
+        }
+        async function checkLinkAccess() {
+            if (entityType === 'Asset') {
+                const canRead = await canPerformAction('read', 'Asset') || true;
+                setCanLinkEntity(canRead);
+            }
+            if (entityType === 'Entry') {
+                const canRead = true;
+                setCanLinkEntity(canRead);
+            }
+        }
+        void checkLinkAccess();
+    }, [
+        entityType,
+        parameters.instance,
+        readableContentTypes
+    ]);
+    return {
+        canCreateEntity,
+        canLinkEntity,
+        creatableContentTypes,
+        readableContentTypes,
+        availableContentTypes,
+        validations
+    };
+}

package/dist/esm/common/useEditorPermissions.spec.js

@@ -0,0 +1,201 @@
+import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { renderHook } from '@testing-library/react-hooks';
+import { useEditorPermissions } from './useEditorPermissions';
+describe('useEditorPermissions', ()=>{
+    const makeFieldExtensionSDK = (customizeMock)=>({
+            field: createFakeFieldAPI(customizeMock)[0],
+            access: {
+                can: jest.fn().mockResolvedValue(true),
+                canPerformActionOnEntryOfType: jest.fn().mockResolvedValue(true)
+            }
+        });
+    const makeContentType = (id)=>({
+            sys: {
+                id
+            }
+        });
+    const renderEditorPermissions = async ({ entityType , params ={} , allContentTypes =[] , customizeMock , customizeSdk  })=>{
+        const sdk = makeFieldExtensionSDK(customizeMock);
+        customizeSdk?.(sdk);
+        const renderResult = renderHook(()=>useEditorPermissions({
+                sdk,
+                allContentTypes,
+                entityType,
+                parameters: {
+                    instance: params
+                }
+            }));
+        await renderResult.waitForNextUpdate();
+        return {
+            ...renderResult,
+            sdk
+        };
+    };
+    describe(`behaviour on Asset`, ()=>{
+        it(`wont check access when turned off via instance params`, async ()=>{
+            const { result , sdk  } = await renderEditorPermissions({
+                entityType: 'Asset',
+                params: {
+                    showCreateEntityAction: false,
+                    showLinkEntityAction: false
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(false);
+            expect(result.current.canLinkEntity).toBe(false);
+            expect(sdk.access.can).not.toHaveBeenCalledWith();
+        });
+        it(`checks basic access`, async ()=>{
+            const { sdk  } = await renderEditorPermissions({
+                entityType: 'Asset'
+            });
+            expect(sdk.access.can).toHaveBeenCalledWith('create', 'Asset');
+            expect(sdk.access.can).toHaveBeenCalledWith('read', 'Asset');
+        });
+        it(`defaults link asset action visibility to true`, async ()=>{
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Asset'
+            });
+            expect(result.current.canLinkEntity).toBeTruthy();
+        });
+        it(`returns empty contentTypes`, async ()=>{
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Asset',
+                allContentTypes: [
+                    makeContentType('one')
+                ]
+            });
+            expect(result.current.creatableContentTypes).toEqual([]);
+            expect(result.current.readableContentTypes).toEqual([]);
+        });
+    });
+    describe(`behaviour on Entry`, ()=>{
+        const allowContentTypes = (sdk, allowedAction, ...allowed)=>{
+            sdk.access.canPerformActionOnEntryOfType.mockImplementation(async (action, contentTypeId)=>{
+                if (allowedAction === action && allowed.includes(contentTypeId)) {
+                    return true;
+                }
+                return false;
+            });
+        };
+        it(`wont check access when turned off via instance params`, async ()=>{
+            const { result , sdk  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                params: {
+                    showCreateEntityAction: false,
+                    showLinkEntityAction: false
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(false);
+            expect(result.current.canLinkEntity).toBe(false);
+            expect(sdk.access.can).not.toHaveBeenCalledWith();
+        });
+        it(`only allows creation when one content-type can be created`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'create', 'one');
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(true);
+        });
+        it.skip(`denies creation when no content-type can be created`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'create');
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(false);
+        });
+        it(`only allows linking when one content-type can be read`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'read', 'one');
+                }
+            });
+            expect(result.current.canLinkEntity).toBe(true);
+        });
+        it.skip(`denies creation when no content-type can be read`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'read');
+                }
+            });
+            expect(result.current.canLinkEntity).toBe(false);
+        });
+        it(`returns creatableContentTypes from validations that can be created`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeMock: (field)=>{
+                    field.validations = [
+                        {
+                            linkContentType: [
+                                'two'
+                            ]
+                        }
+                    ];
+                    return field;
+                },
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'create', 'two');
+                }
+            });
+            expect(result.current.creatableContentTypes).toEqual([
+                allContentTypes[1]
+            ]);
+        });
+        it(`returns readableContentTypes from validations that can be read`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeMock: (field)=>{
+                    field.validations = [
+                        {
+                            linkContentType: [
+                                'two'
+                            ]
+                        }
+                    ];
+                    return field;
+                },
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'read', 'two');
+                }
+            });
+            expect(result.current.readableContentTypes).toEqual([
+                allContentTypes[1]
+            ]);
+        });
+    });
+});

package/dist/esm/components/AssetThumbnail/AssetThumbnail.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+const dimensions = {
+    width: 70,
+    height: 70
+};
+export function AssetThumbnail(props) {
+    return React.createElement("img", {
+        alt: props.file.fileName,
+        src: `${props.file.url}?w=${dimensions.width}&h=${dimensions.height}&fit=thumb`,
+        height: dimensions.height,
+        width: dimensions.width
+    });
+}

package/dist/esm/components/CreateEntryLinkButton/CreateEntryLinkButton.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Button } from '@contentful/f36-components';
+import { ChevronDownIcon, PlusIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import get from 'lodash/get';
+import { CreateEntryMenuTrigger } from './CreateEntryMenuTrigger';
+const standardStyles = {
+    spinnerMargin: css({
+        marginRight: tokens.spacingXs
+    }),
+    action: undefined
+};
+const redesignStyles = {
+    ...standardStyles,
+    action: css({
+        textDecoration: 'none',
+        fontWeight: 'bold',
+        maxWidth: '300px'
+    })
+};
+export const CreateEntryLinkButton = ({ contentTypes , onSelect , customDropdownItems , text , testId , hasPlusIcon =false , useExperimentalStyles , suggestedContentTypeId , dropdownSettings , disabled =false  })=>{
+    contentTypes = contentTypes.sort((a, b)=>a.name.localeCompare(b.name));
+    const suggestedContentType = contentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
+    const buttonText = text || `Add ${get(suggestedContentType || (contentTypes.length === 1 ? contentTypes[0] : {}), 'name', 'entry')}`;
+    const hasDropdown = contentTypes.length > 1 || customDropdownItems;
+    const plusIcon = hasPlusIcon ? React.createElement(PlusIcon, null) : undefined;
+    const contentTypesLabel = useExperimentalStyles ? 'New content' : undefined;
+    const styles = useExperimentalStyles ? redesignStyles : standardStyles;
+    return React.createElement(CreateEntryMenuTrigger, {
+        contentTypes: contentTypes,
+        suggestedContentTypeId: suggestedContentTypeId,
+        contentTypesLabel: contentTypesLabel,
+        onSelect: onSelect,
+        testId: testId,
+        dropdownSettings: dropdownSettings,
+        customDropdownItems: customDropdownItems
+    }, ({ isSelecting  })=>React.createElement(Button, {
+            endIcon: hasDropdown ? React.createElement(ChevronDownIcon, null) : undefined,
+            variant: "secondary",
+            className: styles.action,
+            isDisabled: disabled || isSelecting,
+            startIcon: isSelecting ? undefined : plusIcon,
+            size: "small",
+            testId: "create-entry-link-button",
+            isLoading: isSelecting
+        }, buttonText));
+};