@contentful/field-editor-reference 6.3.3 → 6.4.2

package/dist/cjs/common/useContentTypePermissions.js

@@ -9,39 +9,45 @@ Object.defineProperty(exports, "useContentTypePermissions", {
     }
 });
 const _react = require("react");
+const _lodash = require("lodash");
 const _useAccessApi = require("./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);
 }
-function useContentTypePermissions(props) {
+function useContentTypePermissions({ entityType, validations, sdk, allContentTypes }) {
     const availableContentTypes = (0, _react.useMemo)(()=>{
-        if (props.entityType === 'Asset') {
+        if (entityType === 'Asset') {
             return [];
         }
-        if (props.validations.contentTypes) {
-            return props.allContentTypes.filter((ct)=>props.validations.contentTypes?.includes(ct.sys.id));
+        if (validations.contentTypes) {
+            return allContentTypes.filter((ct)=>validations.contentTypes?.includes(ct.sys.id));
         }
-        return props.allContentTypes;
+        return allContentTypes;
     }, [
-        props.allContentTypes,
-        props.validations.contentTypes,
-        props.entityType
+        allContentTypes,
+        validations.contentTypes,
+        entityType
     ]);
     const [creatableContentTypes, setCreatableContentTypes] = (0, _react.useState)(availableContentTypes);
-    const { canPerformActionOnEntryOfType } = (0, _useAccessApi.useAccessApi)(props.sdk.access);
+    const { canPerformActionOnEntryOfType } = (0, _useAccessApi.useAccessApi)(sdk.access);
     (0, _react.useEffect)(()=>{
         function getContentTypes(action) {
             return filter(availableContentTypes, (ct)=>canPerformActionOnEntryOfType(action, ct.sys.id));
         }
         async function checkContentTypeAccess() {
             const creatable = await getContentTypes('create');
-            setCreatableContentTypes(creatable);
+            if (!(0, _lodash.isEqual)(creatable, creatableContentTypes)) {
+                setCreatableContentTypes(creatable);
+            }
+        }
+        if (availableContentTypes.length > 0) {
+            void checkContentTypeAccess();
         }
-        void checkContentTypeAccess();
     }, [
-        availableContentTypes
+        availableContentTypes,
+        creatableContentTypes
     ]);
     return {
         creatableContentTypes,

package/dist/cjs/common/useEditorPermissions.js

@@ -12,16 +12,18 @@ const _react = require("react");
 const _fromFieldValidations = require("../utils/fromFieldValidations");
 const _useAccessApi = require("./useAccessApi");
 const _useContentTypePermissions = require("./useContentTypePermissions");
-function useEditorPermissions(props) {
-    const { sdk, entityType, parameters } = props;
-    const validations = (0, _react.useMemo)(()=>(0, _fromFieldValidations.fromFieldValidations)(props.sdk.field), [
-        props.sdk.field
+function useEditorPermissions({ sdk, entityType, parameters, allContentTypes }) {
+    const validations = (0, _react.useMemo)(()=>(0, _fromFieldValidations.fromFieldValidations)(sdk.field), [
+        sdk.field
     ]);
     const [canCreateEntity, setCanCreateEntity] = (0, _react.useState)(true);
     const [canLinkEntity, setCanLinkEntity] = (0, _react.useState)(true);
     const { creatableContentTypes, availableContentTypes } = (0, _useContentTypePermissions.useContentTypePermissions)({
-        ...props,
-        validations
+        entityType,
+        validations,
+        sdk,
+        allContentTypes,
+        parameters
     });
     const { canPerformAction } = (0, _useAccessApi.useAccessApi)(sdk.access);
     (0, _react.useEffect)(()=>{

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

@@ -18,7 +18,7 @@ describe('useEditorPermissions', ()=>{
                 id
             }
         });
-    const renderEditorPermissions = async ({ entityType, params = {}, allContentTypes = [], customizeMock, customizeSdk })=>{
+    const renderEditorPermissions = async ({ entityType, params = {}, allContentTypes = [], customizeMock, customizeSdk, waitForUpdate = false })=>{
         const sdk = makeFieldAppSDK(customizeMock);
         customizeSdk?.(sdk);
         const renderResult = (0, _reacthooks.renderHook)(()=>(0, _useEditorPermissions.useEditorPermissions)({
@@ -29,7 +29,9 @@ describe('useEditorPermissions', ()=>{
                     instance: params
                 }
             }));
-        await renderResult.waitForNextUpdate();
+        if (waitForUpdate) {
+            await renderResult.waitForNextUpdate();
+        }
         return {
             ...renderResult,
             sdk
@@ -102,7 +104,8 @@ describe('useEditorPermissions', ()=>{
                 allContentTypes,
                 customizeSdk: (sdk)=>{
                     allowContentTypes(sdk, 'create', 'one');
-                }
+                },
+                waitForUpdate: true
             });
             expect(result.current.canCreateEntity).toBe(true);
         });
@@ -130,7 +133,8 @@ describe('useEditorPermissions', ()=>{
                 allContentTypes,
                 customizeSdk: (sdk)=>{
                     allowContentTypes(sdk, 'read', 'one');
-                }
+                },
+                waitForUpdate: true
             });
             expect(result.current.canLinkEntity).toBe(true);
         });

package/dist/cjs/resources/MultipleResourceReferenceEditor.js

@@ -64,7 +64,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 function ResourceEditor(props) {
-    const { setValue, items, apiUrl } = props;
+    const { setValue, items } = props;
     const onSortStart = ()=>(0, _noop.default)();
     const onSortEnd = (0, _react.useCallback)(({ oldIndex, newIndex })=>{
         const newItems = (0, _sortable.arrayMove)(items, oldIndex, newIndex);
@@ -86,11 +86,9 @@ function ResourceEditor(props) {
         items,
         setValue
     ]);
-    const { dialogs, field } = props.sdk;
     const linkActionsProps = (0, _useResourceLinkActions.useResourceLinkActions)({
-        dialogs,
-        field,
-        apiUrl
+        sdk: props.sdk,
+        parameters: props.parameters
     });
     return _react.createElement(_react.Fragment, null, props.children({
         ...props,

package/dist/cjs/resources/MultipleResourceReferenceEditor.spec.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = _interop_require_wildcard(require("react"));
 require("@testing-library/jest-dom/extend-expect");
-const _react1 = require("@testing-library/react");
+const _react = require("@testing-library/react");
+const _react1 = _interop_require_wildcard(require("react"));
 const _EntityStore = require("../common/EntityStore");
+const _useEditorPermissions = require("../common/useEditorPermissions");
 const _MultipleResourceReferenceEditor = require("./MultipleResourceReferenceEditor");
 const _resourceEditorHelpers = require("./testHelpers/resourceEditorHelpers");
 function _getRequireWildcardCache(nodeInterop) {
@@ -61,6 +62,11 @@ jest.mock('../common/EntityStore', ()=>{
             }))
     };
 });
+jest.mock('../common/useEditorPermissions', ()=>{
+    return {
+        useEditorPermissions: jest.fn()
+    };
+});
 jest.mock('react-intersection-observer', ()=>{
     const module = jest.requireActual('react-intersection-observer');
     return {
@@ -88,19 +94,25 @@ const fieldDefinition = {
     required: true,
     validations: []
 };
+const mockedUseEditorPermissions = _useEditorPermissions.useEditorPermissions;
+beforeEach(()=>{
+    mockedUseEditorPermissions.mockImplementation(()=>({
+            canLinkEntity: true
+        }));
+});
 describe('Multiple resource editor', ()=>{
     it('renders the action button when no value is set', async ()=>{
         const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
-        (0, _react1.render)(_react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+        (0, _react.render)(_react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
             parameters: {}
         }));
-        const button = await _react1.screen.findByText('Add existing content');
+        const button = await _react.screen.findByText('Add existing content');
         expect(button).toBeDefined();
-        _react1.fireEvent.click(button);
+        _react.fireEvent.click(button);
         const dialogFn = sdk.dialogs.selectMultipleResourceEntities;
         expect(dialogFn).toHaveBeenCalledTimes(1);
         const options = dialogFn.mock.calls[0][0];
@@ -108,19 +120,35 @@ describe('Multiple resource editor', ()=>{
             allowedResources: fieldDefinition.allowedResources
         });
     });
+    it('hides the action button when insufficient permissions', async ()=>{
+        mockedUseEditorPermissions.mockImplementation(()=>({
+                canLinkEntity: false
+            }));
+        const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
+        (0, _react.render)(_react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+            getEntryRouteHref: ()=>'',
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {}
+        }));
+        const noPermission = await _react.screen.findByText(/You don't have permission to view this content/);
+        expect(noPermission).toBeDefined();
+    });
     it('renders custom actions when passed', async ()=>{
         const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
-        (0, _react1.render)(_react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+        (0, _react.render)(_react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
             isInitiallyDisabled: false,
             sdk: sdk,
             hasCardEditActions: true,
             viewType: "card",
             parameters: {},
-            renderCustomActions: ()=>_react.createElement("div", {
+            renderCustomActions: ()=>_react1.createElement("div", {
                     "data-testid": "custom-actions"
                 })
         }));
-        const customActions = await _react1.screen.findByTestId('custom-actions');
+        const customActions = await _react.screen.findByTestId('custom-actions');
         expect(customActions).toBeDefined();
     });
     describe('with value', ()=>{
@@ -131,7 +159,7 @@ describe('Multiple resource editor', ()=>{
                 mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
             }
             const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-            (0, _react1.render)(_react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+            (0, _react.render)(_react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                 isInitiallyDisabled: false,
                 sdk: sdk,
                 hasCardEditActions: true,
@@ -158,7 +186,7 @@ describe('Multiple resource editor', ()=>{
                     mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
                 }
                 const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-                (0, _react1.render)(_react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+                (0, _react.render)(_react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
@@ -167,7 +195,7 @@ describe('Multiple resource editor', ()=>{
                     getEntryRouteHref: ()=>'',
                     parameters: {}
                 }));
-                const linkExistingBtn = _react1.screen.queryByText('Add existing content');
+                const linkExistingBtn = _react.screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
                 const entriesArray = Object.values(entryInfos);
                 const firstItem = entriesArray[0];
@@ -184,7 +212,7 @@ describe('Multiple resource editor', ()=>{
                     mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
                 }
                 const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-                (0, _react1.render)(_react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+                (0, _react.render)(_react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
@@ -193,7 +221,7 @@ describe('Multiple resource editor', ()=>{
                     getEntryRouteHref: ()=>'',
                     parameters: {}
                 }));
-                const linkExistingBtn = _react1.screen.queryByText('Add existing content');
+                const linkExistingBtn = _react.screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
                 const entriesArray = Object.values(entryInfos);
                 const lastItem = entriesArray[entriesArray.length - 1];
@@ -210,7 +238,7 @@ describe('Multiple resource editor', ()=>{
                     mockedResources[`${link.sys.linkType}.${link.sys.urn}`] = entryInfos[spaceId];
                 }
                 const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition, Object.values(entryLinks));
-                (0, _react1.render)(_react.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
+                (0, _react.render)(_react1.createElement(_MultipleResourceReferenceEditor.MultipleResourceReferenceEditor, {
                     isInitiallyDisabled: false,
                     sdk: sdk,
                     hasCardEditActions: true,
@@ -219,15 +247,15 @@ describe('Multiple resource editor', ()=>{
                     getEntryRouteHref: ()=>'',
                     parameters: {}
                 }));
-                const linkExistingBtn = _react1.screen.queryByText('Add existing content');
+                const linkExistingBtn = _react.screen.queryByText('Add existing content');
                 expect(linkExistingBtn).toBeInTheDocument();
                 const entriesArray = Object.values(entryInfos);
                 for (const info of entriesArray){
                     await clickCardActionsButton(info);
-                    const removeBtn = await _react1.screen.findByText('Remove', {
+                    const removeBtn = await _react.screen.findByText('Remove', {
                         selector: '[role="menuitem"]'
                     });
-                    _react1.fireEvent.click(removeBtn);
+                    _react.fireEvent.click(removeBtn);
                 }
                 expect(sdk.field.setValue).toHaveBeenCalledTimes(3);
                 expect(sdk.field.setValue).toHaveBeenCalledWith([]);
@@ -237,28 +265,28 @@ describe('Multiple resource editor', ()=>{
 });
 async function expectToHaveMoveButton(info, buttonString) {
     await clickCardActionsButton(info);
-    await _react1.screen.findByText(buttonString, {
+    await _react.screen.findByText(buttonString, {
         selector: '[role="menuitem"]'
     });
 }
 async function expectToNotHaveMoveButton(info, buttonString) {
     await clickCardActionsButton(info);
-    expect(_react1.screen.queryByText(buttonString, {
+    expect(_react.screen.queryByText(buttonString, {
         selector: '[role="menuitem"]'
     })).toBeNull();
 }
 async function clickCardActionsButton(info) {
-    _react1.fireEvent.click(document.body);
+    _react.fireEvent.click(document.body);
     const entryTitle = info.resource.fields.title[info.defaultLocaleCode];
     const spaceName = info.space.name;
     const card = await expectEntryCard(entryTitle, spaceName);
     const actionsBtn = card.querySelector('[data-test-id="cf-ui-card-actions"]');
     expect(actionsBtn).toBeInTheDocument();
-    _react1.fireEvent.click(actionsBtn);
+    _react.fireEvent.click(actionsBtn);
 }
 async function expectEntryCard(entryTitle, spaceName) {
-    const title = await _react1.screen.findByText(entryTitle);
-    await _react1.screen.findByText(spaceName);
+    const title = await _react.screen.findByText(entryTitle);
+    await _react.screen.findByText(spaceName);
     const theCard = title.closest('[data-test-id="cf-ui-entry-card"]');
     expect(theCard).toBeDefined();
     const actionsBtn = theCard?.querySelector('[data-test-id="cf-ui-card-actions"]');

package/dist/cjs/resources/SingleResourceReferenceEditor.js

@@ -56,11 +56,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 function SingleResourceReferenceEditor(props) {
-    const { dialogs, field } = props.sdk;
     const linkActionsProps = (0, _useResourceLinkActions.useResourceLinkActions)({
-        dialogs,
-        field,
-        apiUrl: props.apiUrl
+        sdk: props.sdk,
+        parameters: props.parameters
     });
     return _react.createElement(_EntityStore.EntityProvider, {
         sdk: props.sdk

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

@@ -6,6 +6,7 @@ const _react = _interop_require_wildcard(require("react"));
 require("@testing-library/jest-dom/extend-expect");
 const _react1 = require("@testing-library/react");
 const _EntityStore = require("../common/EntityStore");
+const _useEditorPermissions = require("../common/useEditorPermissions");
 const _SingleResourceReferenceEditor = require("./SingleResourceReferenceEditor");
 const _resourceEditorHelpers = require("./testHelpers/resourceEditorHelpers");
 function _getRequireWildcardCache(nodeInterop) {
@@ -69,6 +70,11 @@ jest.mock('react-intersection-observer', ()=>{
             })
     };
 });
+jest.mock('../common/useEditorPermissions', ()=>{
+    return {
+        useEditorPermissions: jest.fn()
+    };
+});
 const fieldDefinition = {
     type: 'ResourceLink',
     id: 'foo',
@@ -84,6 +90,12 @@ const fieldDefinition = {
     required: true,
     validations: []
 };
+const mockedUseEditorPermissions = _useEditorPermissions.useEditorPermissions;
+beforeEach(()=>{
+    mockedUseEditorPermissions.mockImplementation(()=>({
+            canLinkEntity: true
+        }));
+});
 describe('Single resource editor', ()=>{
     it('renders the action button when no value is set', async ()=>{
         const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
@@ -104,6 +116,21 @@ describe('Single resource editor', ()=>{
             allowedResources: fieldDefinition.allowedResources
         });
     });
+    it('renders no the action button when permissions insufficient', async ()=>{
+        mockedUseEditorPermissions.mockImplementation(()=>({
+                canLinkEntity: false
+            }));
+        const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
+        (0, _react1.render)(_react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {}
+        }));
+        const noPermission = await _react1.screen.findByText(/You don't have permission to view this content/);
+        expect(noPermission).toBeDefined();
+    });
     it('renders custom actions when passed', async ()=>{
         const sdk = (0, _resourceEditorHelpers.mockSdkForField)(fieldDefinition);
         (0, _react1.render)(_react.createElement(_SingleResourceReferenceEditor.SingleResourceReferenceEditor, {

package/dist/cjs/resources/useResourceLinkActions.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "useResourceLinkActions", {
     }
 });
 const _react = require("react");
+const _useEditorPermissions = require("../common/useEditorPermissions");
 const getUpdatedValue = (field, linkItems)=>{
     const multiple = field.type === 'Array';
     if (multiple) {
@@ -21,7 +22,8 @@ const getUpdatedValue = (field, linkItems)=>{
         return linkItems[0];
     }
 };
-function useResourceLinkActions({ dialogs, field }) {
+function useResourceLinkActions({ parameters, sdk }) {
+    const { field, dialogs } = sdk;
     const onLinkedExisting = (0, _react.useMemo)(()=>{
         return (links)=>{
             const updatedValue = getUpdatedValue(field, links);
@@ -50,6 +52,12 @@ function useResourceLinkActions({ dialogs, field }) {
         multiple,
         onLinkedExisting
     ]);
+    const { canLinkEntity } = (0, _useEditorPermissions.useEditorPermissions)({
+        entityType: 'Entry',
+        allContentTypes: [],
+        sdk,
+        parameters
+    });
     return {
         onLinkExisting,
         onLinkedExisting,
@@ -57,7 +65,7 @@ function useResourceLinkActions({ dialogs, field }) {
         contentTypes: [],
         canCreateEntity: false,
         canLinkMultiple: multiple,
-        canLinkEntity: true,
+        canLinkEntity,
         isDisabled: false,
         isEmpty: false,
         isFull: false,

package/dist/esm/common/useContentTypePermissions.js

@@ -1,37 +1,43 @@
 import { useEffect, useMemo, useState } from 'react';
+import { isEqual } from 'lodash';
 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) {
+export function useContentTypePermissions({ entityType, validations, sdk, allContentTypes }) {
     const availableContentTypes = useMemo(()=>{
-        if (props.entityType === 'Asset') {
+        if (entityType === 'Asset') {
             return [];
         }
-        if (props.validations.contentTypes) {
-            return props.allContentTypes.filter((ct)=>props.validations.contentTypes?.includes(ct.sys.id));
+        if (validations.contentTypes) {
+            return allContentTypes.filter((ct)=>validations.contentTypes?.includes(ct.sys.id));
         }
-        return props.allContentTypes;
+        return allContentTypes;
     }, [
-        props.allContentTypes,
-        props.validations.contentTypes,
-        props.entityType
+        allContentTypes,
+        validations.contentTypes,
+        entityType
     ]);
     const [creatableContentTypes, setCreatableContentTypes] = useState(availableContentTypes);
-    const { canPerformActionOnEntryOfType } = useAccessApi(props.sdk.access);
+    const { canPerformActionOnEntryOfType } = useAccessApi(sdk.access);
     useEffect(()=>{
         function getContentTypes(action) {
             return filter(availableContentTypes, (ct)=>canPerformActionOnEntryOfType(action, ct.sys.id));
         }
         async function checkContentTypeAccess() {
             const creatable = await getContentTypes('create');
-            setCreatableContentTypes(creatable);
+            if (!isEqual(creatable, creatableContentTypes)) {
+                setCreatableContentTypes(creatable);
+            }
+        }
+        if (availableContentTypes.length > 0) {
+            void checkContentTypeAccess();
         }
-        void checkContentTypeAccess();
     }, [
-        availableContentTypes
+        availableContentTypes,
+        creatableContentTypes
     ]);
     return {
         creatableContentTypes,

package/dist/esm/common/useEditorPermissions.js

@@ -2,16 +2,18 @@ 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
+export function useEditorPermissions({ sdk, entityType, parameters, allContentTypes }) {
+    const validations = useMemo(()=>fromFieldValidations(sdk.field), [
+        sdk.field
     ]);
     const [canCreateEntity, setCanCreateEntity] = useState(true);
     const [canLinkEntity, setCanLinkEntity] = useState(true);
     const { creatableContentTypes, availableContentTypes } = useContentTypePermissions({
-        ...props,
-        validations
+        entityType,
+        validations,
+        sdk,
+        allContentTypes,
+        parameters
     });
     const { canPerformAction } = useAccessApi(sdk.access);
     useEffect(()=>{

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

@@ -14,7 +14,7 @@ describe('useEditorPermissions', ()=>{
                 id
             }
         });
-    const renderEditorPermissions = async ({ entityType, params = {}, allContentTypes = [], customizeMock, customizeSdk })=>{
+    const renderEditorPermissions = async ({ entityType, params = {}, allContentTypes = [], customizeMock, customizeSdk, waitForUpdate = false })=>{
         const sdk = makeFieldAppSDK(customizeMock);
         customizeSdk?.(sdk);
         const renderResult = renderHook(()=>useEditorPermissions({
@@ -25,7 +25,9 @@ describe('useEditorPermissions', ()=>{
                     instance: params
                 }
             }));
-        await renderResult.waitForNextUpdate();
+        if (waitForUpdate) {
+            await renderResult.waitForNextUpdate();
+        }
         return {
             ...renderResult,
             sdk
@@ -98,7 +100,8 @@ describe('useEditorPermissions', ()=>{
                 allContentTypes,
                 customizeSdk: (sdk)=>{
                     allowContentTypes(sdk, 'create', 'one');
-                }
+                },
+                waitForUpdate: true
             });
             expect(result.current.canCreateEntity).toBe(true);
         });
@@ -126,7 +129,8 @@ describe('useEditorPermissions', ()=>{
                 allContentTypes,
                 customizeSdk: (sdk)=>{
                     allowContentTypes(sdk, 'read', 'one');
-                }
+                },
+                waitForUpdate: true
             });
             expect(result.current.canLinkEntity).toBe(true);
         });

package/dist/esm/resources/MultipleResourceReferenceEditor.js

@@ -9,7 +9,7 @@ import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityA
 import { ResourceCard } from './Cards/ResourceCard';
 import { useResourceLinkActions } from './useResourceLinkActions';
 function ResourceEditor(props) {
-    const { setValue, items, apiUrl } = props;
+    const { setValue, items } = props;
     const onSortStart = ()=>noop();
     const onSortEnd = useCallback(({ oldIndex, newIndex })=>{
         const newItems = arrayMove(items, oldIndex, newIndex);
@@ -31,11 +31,9 @@ function ResourceEditor(props) {
         items,
         setValue
     ]);
-    const { dialogs, field } = props.sdk;
     const linkActionsProps = useResourceLinkActions({
-        dialogs,
-        field,
-        apiUrl
+        sdk: props.sdk,
+        parameters: props.parameters
     });
     return React.createElement(React.Fragment, null, props.children({
         ...props,

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

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
 import { useResource } from '../common/EntityStore';
+import { useEditorPermissions } from '../common/useEditorPermissions';
 import { MultipleResourceReferenceEditor } from './MultipleResourceReferenceEditor';
 import { createFakeEntryResource, mockSdkForField } from './testHelpers/resourceEditorHelpers';
 let mockedResources = {};
@@ -16,6 +17,11 @@ jest.mock('../common/EntityStore', ()=>{
             }))
     };
 });
+jest.mock('../common/useEditorPermissions', ()=>{
+    return {
+        useEditorPermissions: jest.fn()
+    };
+});
 jest.mock('react-intersection-observer', ()=>{
     const module = jest.requireActual('react-intersection-observer');
     return {
@@ -43,6 +49,12 @@ const fieldDefinition = {
     required: true,
     validations: []
 };
+const mockedUseEditorPermissions = useEditorPermissions;
+beforeEach(()=>{
+    mockedUseEditorPermissions.mockImplementation(()=>({
+            canLinkEntity: true
+        }));
+});
 describe('Multiple resource editor', ()=>{
     it('renders the action button when no value is set', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
@@ -63,6 +75,22 @@ describe('Multiple resource editor', ()=>{
             allowedResources: fieldDefinition.allowedResources
         });
     });
+    it('hides the action button when insufficient permissions', async ()=>{
+        mockedUseEditorPermissions.mockImplementation(()=>({
+                canLinkEntity: false
+            }));
+        const sdk = mockSdkForField(fieldDefinition);
+        render(React.createElement(MultipleResourceReferenceEditor, {
+            getEntryRouteHref: ()=>'',
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {}
+        }));
+        const noPermission = await screen.findByText(/You don't have permission to view this content/);
+        expect(noPermission).toBeDefined();
+    });
     it('renders custom actions when passed', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
         render(React.createElement(MultipleResourceReferenceEditor, {

package/dist/esm/resources/SingleResourceReferenceEditor.js

@@ -5,11 +5,9 @@ import { CombinedLinkEntityActions } from '../components/LinkActions/LinkEntityA
 import { ResourceCard } from './Cards/ResourceCard';
 import { useResourceLinkActions } from './useResourceLinkActions';
 export function SingleResourceReferenceEditor(props) {
-    const { dialogs, field } = props.sdk;
     const linkActionsProps = useResourceLinkActions({
-        dialogs,
-        field,
-        apiUrl: props.apiUrl
+        sdk: props.sdk,
+        parameters: props.parameters
     });
     return React.createElement(EntityProvider, {
         sdk: props.sdk

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

@@ -2,6 +2,7 @@ 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 { useEditorPermissions } from '../common/useEditorPermissions';
 import { SingleResourceReferenceEditor } from './SingleResourceReferenceEditor';
 import { createFakeEntryResource, mockSdkForField } from './testHelpers/resourceEditorHelpers';
 const mockedResources = {};
@@ -24,6 +25,11 @@ jest.mock('react-intersection-observer', ()=>{
             })
     };
 });
+jest.mock('../common/useEditorPermissions', ()=>{
+    return {
+        useEditorPermissions: jest.fn()
+    };
+});
 const fieldDefinition = {
     type: 'ResourceLink',
     id: 'foo',
@@ -39,6 +45,12 @@ const fieldDefinition = {
     required: true,
     validations: []
 };
+const mockedUseEditorPermissions = useEditorPermissions;
+beforeEach(()=>{
+    mockedUseEditorPermissions.mockImplementation(()=>({
+            canLinkEntity: true
+        }));
+});
 describe('Single resource editor', ()=>{
     it('renders the action button when no value is set', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
@@ -59,6 +71,21 @@ describe('Single resource editor', ()=>{
             allowedResources: fieldDefinition.allowedResources
         });
     });
+    it('renders no the action button when permissions insufficient', async ()=>{
+        mockedUseEditorPermissions.mockImplementation(()=>({
+                canLinkEntity: false
+            }));
+        const sdk = mockSdkForField(fieldDefinition);
+        render(React.createElement(SingleResourceReferenceEditor, {
+            isInitiallyDisabled: false,
+            sdk: sdk,
+            hasCardEditActions: true,
+            viewType: "card",
+            parameters: {}
+        }));
+        const noPermission = await screen.findByText(/You don't have permission to view this content/);
+        expect(noPermission).toBeDefined();
+    });
     it('renders custom actions when passed', async ()=>{
         const sdk = mockSdkForField(fieldDefinition);
         render(React.createElement(SingleResourceReferenceEditor, {

package/dist/esm/resources/useResourceLinkActions.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useEditorPermissions } from '../common/useEditorPermissions';
 const getUpdatedValue = (field, linkItems)=>{
     const multiple = field.type === 'Array';
     if (multiple) {
@@ -11,7 +12,8 @@ const getUpdatedValue = (field, linkItems)=>{
         return linkItems[0];
     }
 };
-export function useResourceLinkActions({ dialogs, field }) {
+export function useResourceLinkActions({ parameters, sdk }) {
+    const { field, dialogs } = sdk;
     const onLinkedExisting = useMemo(()=>{
         return (links)=>{
             const updatedValue = getUpdatedValue(field, links);
@@ -40,6 +42,12 @@ export function useResourceLinkActions({ dialogs, field }) {
         multiple,
         onLinkedExisting
     ]);
+    const { canLinkEntity } = useEditorPermissions({
+        entityType: 'Entry',
+        allContentTypes: [],
+        sdk,
+        parameters
+    });
     return {
         onLinkExisting,
         onLinkedExisting,
@@ -47,7 +55,7 @@ export function useResourceLinkActions({ dialogs, field }) {
         contentTypes: [],
         canCreateEntity: false,
         canLinkMultiple: multiple,
-        canLinkEntity: true,
+        canLinkEntity,
         isDisabled: false,
         isEmpty: false,
         isFull: false,

package/dist/types/common/useContentTypePermissions.d.ts

@@ -12,5 +12,5 @@ type ContentTypePermissions = {
     creatableContentTypes: ContentType[];
     availableContentTypes: ContentType[];
 };
-export declare function useContentTypePermissions(props: ContentTypePermissionsProps): ContentTypePermissions;
+export declare function useContentTypePermissions({ entityType, validations, sdk, allContentTypes, }: ContentTypePermissionsProps): ContentTypePermissions;
 export {};

package/dist/types/common/useEditorPermissions.d.ts

@@ -6,7 +6,7 @@ export type EditorPermissionsProps = {
     parameters: ReferenceEditorProps['parameters'];
     allContentTypes: ContentType[];
 };
-export declare function useEditorPermissions(props: EditorPermissionsProps): {
+export declare function useEditorPermissions({ sdk, entityType, parameters, allContentTypes, }: EditorPermissionsProps): {
     canCreateEntity: boolean;
     canLinkEntity: boolean;
     creatableContentTypes: ContentType[];

package/dist/types/resources/useResourceLinkActions.d.ts

@@ -1,5 +1,5 @@
-import type { FieldAppSDK } from '@contentful/app-sdk';
+import { EditorPermissionsProps } from '../common/useEditorPermissions';
 import { LinkActionsProps } from '../components';
-export declare function useResourceLinkActions({ dialogs, field, }: Pick<FieldAppSDK, 'field' | 'dialogs'> & {
-    apiUrl: string;
-}): LinkActionsProps;
+type ResourceLinkActionProps = Pick<EditorPermissionsProps, 'parameters' | 'sdk'>;
+export declare function useResourceLinkActions({ parameters, sdk, }: ResourceLinkActionProps): LinkActionsProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "6.3.3",
+  "version": "6.4.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -64,5 +64,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "bf46c70f90d83e11e01091e8f0f50dfa27258bdf"
+  "gitHead": "6eb05bdb86788fa95e73f9ac8ee846fae69876a1"
 }