@contentful/field-editor-reference 6.2.5 → 6.3.1

package/dist/cjs/common/EntityStore.js

@@ -12,12 +12,18 @@ _export(exports, {
     EntityProvider: function() {
         return EntityProvider;
     },
+    FunctionInvocationError: function() {
+        return FunctionInvocationError;
+    },
     UnsupportedError: function() {
         return UnsupportedError;
     },
     isContentfulResourceInfo: function() {
         return isContentfulResourceInfo;
     },
+    isFunctionInvocationError: function() {
+        return isFunctionInvocationError;
+    },
     isUnsupportedError: function() {
         return isUnsupportedError;
     },
@@ -29,6 +35,9 @@ _export(exports, {
     },
     useResource: function() {
         return useResource;
+    },
+    useResourceProvider: function() {
+        return useResourceProvider;
     }
 });
 const _react = _interop_require_wildcard(require("react"));
@@ -101,6 +110,13 @@ function isContentfulResourceInfo(info) {
 const globalQueue = new _pqueue.default({
     concurrency: 50
 });
+function isFunctionInvocationErrorResponse(response) {
+    const functionInvocationErrorMessages = [
+        'An error occurred while executing the Contentful Function code',
+        'Response payload of the Contentful Function is invalid'
+    ];
+    return response !== null && typeof response === 'object' && 'message' in response && typeof response.message === 'string' && functionInvocationErrorMessages.includes(response.message);
+}
 class UnsupportedError extends Error {
     constructor(message){
         super(message);
@@ -111,6 +127,30 @@ class UnsupportedError extends Error {
 function isUnsupportedError(value) {
     return typeof value === 'object' && value?.isUnsupportedError === true;
 }
+class FunctionInvocationError extends Error {
+    constructor(message, organizationId, appDefinitionId){
+        super(message);
+        _define_property(this, "isFunctionInvocationError", void 0);
+        _define_property(this, "organizationId", void 0);
+        _define_property(this, "appDefinitionId", void 0);
+        this.isFunctionInvocationError = true;
+        this.organizationId = organizationId;
+        this.appDefinitionId = appDefinitionId;
+    }
+}
+function isFunctionInvocationError(value) {
+    return typeof value === 'object' && value?.isFunctionInvocationError === true;
+}
+function handleResourceFetchError(resourceFetchError, resourceTypeEntity) {
+    const parsedError = JSON.parse(resourceFetchError.message);
+    if (isFunctionInvocationErrorResponse(parsedError)) {
+        const organizationId = resourceTypeEntity.sys.organization?.sys.id;
+        const appDefinitionId = resourceTypeEntity.sys.appDefinition?.sys.id;
+        if (!organizationId || !appDefinitionId) throw new Error('Missing resource');
+        throw new FunctionInvocationError(resourceFetchError.message, organizationId, appDefinitionId);
+    }
+    throw resourceFetchError;
+}
 const isEntityQueryKey = (queryKey)=>{
     return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
 };
@@ -178,6 +218,7 @@ async function fetchContentfulEntry({ urn, fetch, options }) {
     };
 }
 async function fetchExternalResource({ urn, fetch, options, spaceId, environmentId, resourceType }) {
+    let resourceFetchError;
     const [resource, resourceTypes] = await Promise.all([
         fetch([
             'resource',
@@ -192,7 +233,12 @@ async function fetchExternalResource({ urn, fetch, options, spaceId, environment
                 query: {
                     'sys.urn[in]': urn
                 }
-            }).then(({ items })=>items[0] ?? null), options),
+            }).then(({ items })=>{
+                return items[0] ?? null;
+            }).catch((e)=>{
+                resourceFetchError = e;
+                return null;
+            }), options),
         fetch([
             'resource-types',
             spaceId,
@@ -207,6 +253,9 @@ async function fetchExternalResource({ urn, fetch, options, spaceId, environment
     if (!resourceTypeEntity) {
         throw new UnsupportedError('Unsupported resource type');
     }
+    if (resourceFetchError instanceof Error) {
+        handleResourceFetchError(resourceFetchError, resourceTypeEntity);
+    }
     if (!resource) {
         throw new Error('Missing resource');
     }
@@ -410,18 +459,35 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = (0,
         getEntity,
         onSlideInNavigation
     ]);
+    const getResourceProvider = (0, _react.useCallback)(function getResourceProvider(organizationId, appDefinitionId) {
+        const queryKey = [
+            'ResourceProvider',
+            organizationId,
+            appDefinitionId
+        ];
+        return fetch(queryKey, async ({ cmaClient })=>{
+            return cmaClient.resourceProvider.get({
+                organizationId,
+                appDefinitionId
+            });
+        });
+    }, [
+        fetch
+    ]);
     return {
         ids: props.sdk.ids,
         cmaClient,
         fetch,
         getResource,
         getEntity,
-        getEntityScheduledActions
+        getEntityScheduledActions,
+        getResourceProvider
     };
-}, ({ fetch })=>fetch, ({ getResource, getEntity, getEntityScheduledActions })=>({
+}, ({ fetch })=>fetch, ({ getResource, getEntity, getEntityScheduledActions, getResourceProvider })=>({
         getResource,
         getEntity,
-        getEntityScheduledActions
+        getEntityScheduledActions,
+        getResourceProvider
     }), ({ ids })=>({
         environment: ids.environmentAlias ?? ids.environment,
         space: ids.space
@@ -459,6 +525,20 @@ function useResource(resourceType, urn, options) {
         error
     };
 }
+function useResourceProvider(organizationId, appDefinitionId) {
+    const queryKey = [
+        'Resource',
+        organizationId,
+        appDefinitionId
+    ];
+    const { getResourceProvider } = useEntityLoader();
+    const { status, data, error } = (0, _queryClient.useQuery)(queryKey, ()=>getResourceProvider(organizationId, appDefinitionId), {});
+    return {
+        status,
+        data,
+        error
+    };
+}
 function EntityProvider({ children, ...props }) {
     return _react.default.createElement(_queryClient.SharedQueryClientProvider, null, _react.default.createElement(InternalServiceProvider, props, children));
 }

package/dist/cjs/components/MissingEntityCard/MissingEntityCard.js

@@ -16,11 +16,10 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function MissingEntityCard(props) {
-    const providerName = props.providerName ?? 'Source';
-    const description = props.customMessage ?? 'Content missing or inaccessible';
+function MissingEntityCard({ as = 'a', providerName = 'Source', customMessage, isDisabled, isSelected, onRemove, testId = 'cf-ui-missing-entity-card', children }) {
+    const description = customMessage ?? 'Content missing or inaccessible';
     function CustomActionButton() {
-        if (props.isDisabled || !props.onRemove) return null;
+        if (isDisabled || !onRemove) return null;
         return _react.default.createElement(_f36components.IconButton, {
             "aria-label": "Actions",
             icon: _react.default.createElement(_f36icons.CloseIcon, {
@@ -29,16 +28,16 @@ function MissingEntityCard(props) {
             size: "small",
             variant: "transparent",
             onClick: ()=>{
-                props.onRemove && props.onRemove();
+                onRemove && onRemove();
             }
         });
     }
     return _react.default.createElement(_f36components.EntryCard, {
-        as: "a",
+        as: as,
         contentType: providerName,
         description: description,
-        isSelected: props.isSelected,
+        isSelected: isSelected,
         customActionButton: _react.default.createElement(CustomActionButton, null),
-        testId: "cf-ui-missing-entity-card"
-    });
+        testId: testId
+    }, children);
 }

package/dist/cjs/components/ResourceEntityErrorCard/FunctionInvocationErrorCard.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FunctionInvocationErrorCard", {
+    enumerable: true,
+    get: function() {
+        return FunctionInvocationErrorCard;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _ = require("..");
+const _f36icons = require("@contentful/f36-icons");
+const _EntityStore = require("../../common/EntityStore");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function FunctionInvocationErrorCard({ providerName = 'Source', organizationId, appDefinitionId, isDisabled, isSelected, onRemove }) {
+    const { status, data } = (0, _EntityStore.useResourceProvider)(organizationId, appDefinitionId);
+    const functionId = data?.function.sys.id;
+    const functionLink = `/account/organizations/${organizationId}/apps/definitions/${appDefinitionId}/functions/${functionId}/logs`;
+    return _react.createElement(_.MissingEntityCard, {
+        as: "div",
+        providerName: providerName,
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        onRemove: onRemove,
+        customMessage: '',
+        testId: "cf-ui-function-invocation-error-card"
+    }, _react.createElement(_f36components.Flex, {
+        justifyContent: "left",
+        alignItems: "center"
+    }, _react.createElement(_f36icons.ErrorCircleOutlineIcon, {
+        variant: "negative"
+    }), _react.createElement(_f36components.Text, {
+        fontColor: "colorNegative"
+    }, " Function invocation error."), status === 'success' && functionId && _react.createElement(_f36components.Text, {
+        fontColor: "colorNegative"
+    }, " For more information, go to ", _react.createElement(_f36components.TextLink, {
+        testId: "cf-ui-function-invocation-log-link",
+        icon: _react.createElement(_f36icons.ExternalLinkIcon, null),
+        target: "_blank",
+        alignIcon: "end",
+        href: functionLink
+    }, "function logs"))));
+}

package/dist/cjs/components/ResourceEntityErrorCard/ResourceEntityErrorCard.js

@@ -12,6 +12,7 @@ const _react = _interop_require_wildcard(require("react"));
 const _EntityStore = require("../../common/EntityStore");
 const _getProviderName = require("../../utils/getProviderName");
 const _MissingEntityCard = require("../MissingEntityCard/MissingEntityCard");
+const _FunctionInvocationErrorCard = require("./FunctionInvocationErrorCard");
 const _UnsupportedEntityCard = require("./UnsupportedEntityCard");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -62,6 +63,16 @@ function ResourceEntityErrorCard(props) {
         });
     }
     const providerName = (0, _getProviderName.getProviderName)(props.linkType);
+    if ((0, _EntityStore.isFunctionInvocationError)(props.error)) {
+        return _react.createElement(_FunctionInvocationErrorCard.FunctionInvocationErrorCard, {
+            isSelected: props.isSelected,
+            isDisabled: props.isDisabled,
+            organizationId: props.error.organizationId,
+            appDefinitionId: props.error.appDefinitionId,
+            onRemove: props.onRemove,
+            providerName: providerName
+        });
+    }
     return _react.createElement(_MissingEntityCard.MissingEntityCard, {
         isDisabled: props.isDisabled,
         isSelected: props.isSelected,

package/dist/cjs/resources/Cards/ResourceCard.spec.js

@@ -72,6 +72,7 @@ const resolvableEntryUrnWithAnotherEnvironment = 'crn:contentful:::content:space
 const unknownEntryUrn = 'crn:contentful:::content:spaces/space-id/entries/unknown-entry-urn';
 const resolvableExternalResourceType = 'External:ResourceType';
 const resolvableExternalEntityUrn = 'external:entity-urn';
+const unresolvableExternalEntityUrn = 'external:unresolvable-entity-urn';
 const sdk = {
     locales: {
         default: 'en-US'
@@ -110,6 +111,12 @@ const sdk = {
                         ]
                     });
                 }
+                if (query['sys.urn[in]'] === unresolvableExternalEntityUrn) {
+                    const badRequestErrorBody = {
+                        message: 'An error occurred while executing the Contentful Function code'
+                    };
+                    return Promise.reject(new Error(JSON.stringify(badRequestErrorBody)));
+                }
                 return Promise.resolve({
                     items: []
                 });
@@ -138,6 +145,17 @@ const sdk = {
         },
         Space: {
             get: jest.fn().mockResolvedValue(_indifferent_spacejson.default)
+        },
+        ResourceProvider: {
+            get: jest.fn().mockImplementation(()=>{
+                return Promise.resolve({
+                    function: {
+                        sys: {
+                            id: 'function-id'
+                        }
+                    }
+                });
+            })
         }
     }),
     space: {
@@ -236,4 +254,12 @@ describe('ResourceCard', ()=>{
         expect(getByText(_resourcejson.default.fields.title)).toBeDefined();
         expect(getByText(`${_resourcetypejson.default.sys.resourceProvider.sys.id} ${_resourcetypejson.default.name}`)).toBeDefined();
     });
+    it('renders function invocation error card when an external resource request fails', async ()=>{
+        const { getByTestId } = renderResourceCard({
+            linkType: resolvableExternalResourceType,
+            entityUrn: unresolvableExternalEntityUrn
+        });
+        await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-function-invocation-error-card')).toBeDefined());
+        await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-function-invocation-log-link')).toBeDefined());
+    });
 });

package/dist/esm/common/EntityStore.js

@@ -22,6 +22,13 @@ export function isContentfulResourceInfo(info) {
 const globalQueue = new PQueue({
     concurrency: 50
 });
+function isFunctionInvocationErrorResponse(response) {
+    const functionInvocationErrorMessages = [
+        'An error occurred while executing the Contentful Function code',
+        'Response payload of the Contentful Function is invalid'
+    ];
+    return response !== null && typeof response === 'object' && 'message' in response && typeof response.message === 'string' && functionInvocationErrorMessages.includes(response.message);
+}
 export class UnsupportedError extends Error {
     constructor(message){
         super(message);
@@ -32,6 +39,30 @@ export class UnsupportedError extends Error {
 export function isUnsupportedError(value) {
     return typeof value === 'object' && value?.isUnsupportedError === true;
 }
+export class FunctionInvocationError extends Error {
+    constructor(message, organizationId, appDefinitionId){
+        super(message);
+        _define_property(this, "isFunctionInvocationError", void 0);
+        _define_property(this, "organizationId", void 0);
+        _define_property(this, "appDefinitionId", void 0);
+        this.isFunctionInvocationError = true;
+        this.organizationId = organizationId;
+        this.appDefinitionId = appDefinitionId;
+    }
+}
+export function isFunctionInvocationError(value) {
+    return typeof value === 'object' && value?.isFunctionInvocationError === true;
+}
+function handleResourceFetchError(resourceFetchError, resourceTypeEntity) {
+    const parsedError = JSON.parse(resourceFetchError.message);
+    if (isFunctionInvocationErrorResponse(parsedError)) {
+        const organizationId = resourceTypeEntity.sys.organization?.sys.id;
+        const appDefinitionId = resourceTypeEntity.sys.appDefinition?.sys.id;
+        if (!organizationId || !appDefinitionId) throw new Error('Missing resource');
+        throw new FunctionInvocationError(resourceFetchError.message, organizationId, appDefinitionId);
+    }
+    throw resourceFetchError;
+}
 const isEntityQueryKey = (queryKey)=>{
     return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
 };
@@ -99,6 +130,7 @@ async function fetchContentfulEntry({ urn, fetch, options }) {
     };
 }
 async function fetchExternalResource({ urn, fetch, options, spaceId, environmentId, resourceType }) {
+    let resourceFetchError;
     const [resource, resourceTypes] = await Promise.all([
         fetch([
             'resource',
@@ -113,7 +145,12 @@ async function fetchExternalResource({ urn, fetch, options, spaceId, environment
                 query: {
                     'sys.urn[in]': urn
                 }
-            }).then(({ items })=>items[0] ?? null), options),
+            }).then(({ items })=>{
+                return items[0] ?? null;
+            }).catch((e)=>{
+                resourceFetchError = e;
+                return null;
+            }), options),
         fetch([
             'resource-types',
             spaceId,
@@ -128,6 +165,9 @@ async function fetchExternalResource({ urn, fetch, options, spaceId, environment
     if (!resourceTypeEntity) {
         throw new UnsupportedError('Unsupported resource type');
     }
+    if (resourceFetchError instanceof Error) {
+        handleResourceFetchError(resourceFetchError, resourceTypeEntity);
+    }
     if (!resource) {
         throw new Error('Missing resource');
     }
@@ -331,18 +371,35 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons
         getEntity,
         onSlideInNavigation
     ]);
+    const getResourceProvider = useCallback(function getResourceProvider(organizationId, appDefinitionId) {
+        const queryKey = [
+            'ResourceProvider',
+            organizationId,
+            appDefinitionId
+        ];
+        return fetch(queryKey, async ({ cmaClient })=>{
+            return cmaClient.resourceProvider.get({
+                organizationId,
+                appDefinitionId
+            });
+        });
+    }, [
+        fetch
+    ]);
     return {
         ids: props.sdk.ids,
         cmaClient,
         fetch,
         getResource,
         getEntity,
-        getEntityScheduledActions
+        getEntityScheduledActions,
+        getResourceProvider
     };
-}, ({ fetch })=>fetch, ({ getResource, getEntity, getEntityScheduledActions })=>({
+}, ({ fetch })=>fetch, ({ getResource, getEntity, getEntityScheduledActions, getResourceProvider })=>({
         getResource,
         getEntity,
-        getEntityScheduledActions
+        getEntityScheduledActions,
+        getResourceProvider
     }), ({ ids })=>({
         environment: ids.environmentAlias ?? ids.environment,
         space: ids.space
@@ -380,6 +437,20 @@ export function useResource(resourceType, urn, options) {
         error
     };
 }
+export function useResourceProvider(organizationId, appDefinitionId) {
+    const queryKey = [
+        'Resource',
+        organizationId,
+        appDefinitionId
+    ];
+    const { getResourceProvider } = useEntityLoader();
+    const { status, data, error } = useQuery(queryKey, ()=>getResourceProvider(organizationId, appDefinitionId), {});
+    return {
+        status,
+        data,
+        error
+    };
+}
 function EntityProvider({ children, ...props }) {
     return React.createElement(SharedQueryClientProvider, null, React.createElement(InternalServiceProvider, props, children));
 }

package/dist/esm/components/MissingEntityCard/MissingEntityCard.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { EntryCard, IconButton } from '@contentful/f36-components';
 import { CloseIcon } from '@contentful/f36-icons';
-export function MissingEntityCard(props) {
-    const providerName = props.providerName ?? 'Source';
-    const description = props.customMessage ?? 'Content missing or inaccessible';
+export function MissingEntityCard({ as = 'a', providerName = 'Source', customMessage, isDisabled, isSelected, onRemove, testId = 'cf-ui-missing-entity-card', children }) {
+    const description = customMessage ?? 'Content missing or inaccessible';
     function CustomActionButton() {
-        if (props.isDisabled || !props.onRemove) return null;
+        if (isDisabled || !onRemove) return null;
         return React.createElement(IconButton, {
             "aria-label": "Actions",
             icon: React.createElement(CloseIcon, {
@@ -14,16 +13,16 @@ export function MissingEntityCard(props) {
             size: "small",
             variant: "transparent",
             onClick: ()=>{
-                props.onRemove && props.onRemove();
+                onRemove && onRemove();
             }
         });
     }
     return React.createElement(EntryCard, {
-        as: "a",
+        as: as,
         contentType: providerName,
         description: description,
-        isSelected: props.isSelected,
+        isSelected: isSelected,
         customActionButton: React.createElement(CustomActionButton, null),
-        testId: "cf-ui-missing-entity-card"
-    });
+        testId: testId
+    }, children);
 }

package/dist/esm/components/ResourceEntityErrorCard/FunctionInvocationErrorCard.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Flex, Text, TextLink } from '@contentful/f36-components';
+import { MissingEntityCard } from '..';
+import { ErrorCircleOutlineIcon, ExternalLinkIcon } from '@contentful/f36-icons';
+import { useResourceProvider } from '../../common/EntityStore';
+export function FunctionInvocationErrorCard({ providerName = 'Source', organizationId, appDefinitionId, isDisabled, isSelected, onRemove }) {
+    const { status, data } = useResourceProvider(organizationId, appDefinitionId);
+    const functionId = data?.function.sys.id;
+    const functionLink = `/account/organizations/${organizationId}/apps/definitions/${appDefinitionId}/functions/${functionId}/logs`;
+    return React.createElement(MissingEntityCard, {
+        as: "div",
+        providerName: providerName,
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        onRemove: onRemove,
+        customMessage: '',
+        testId: "cf-ui-function-invocation-error-card"
+    }, React.createElement(Flex, {
+        justifyContent: "left",
+        alignItems: "center"
+    }, React.createElement(ErrorCircleOutlineIcon, {
+        variant: "negative"
+    }), React.createElement(Text, {
+        fontColor: "colorNegative"
+    }, " Function invocation error."), status === 'success' && functionId && React.createElement(Text, {
+        fontColor: "colorNegative"
+    }, " For more information, go to ", React.createElement(TextLink, {
+        testId: "cf-ui-function-invocation-log-link",
+        icon: React.createElement(ExternalLinkIcon, null),
+        target: "_blank",
+        alignIcon: "end",
+        href: functionLink
+    }, "function logs"))));
+}

package/dist/esm/components/ResourceEntityErrorCard/ResourceEntityErrorCard.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { isUnsupportedError } from '../../common/EntityStore';
+import { isFunctionInvocationError, isUnsupportedError } from '../../common/EntityStore';
 import { getProviderName } from '../../utils/getProviderName';
 import { MissingEntityCard } from '../MissingEntityCard/MissingEntityCard';
+import { FunctionInvocationErrorCard } from './FunctionInvocationErrorCard';
 import { UnsupportedEntityCard } from './UnsupportedEntityCard';
 export function ResourceEntityErrorCard(props) {
     if (isUnsupportedError(props.error)) {
@@ -11,6 +12,16 @@ export function ResourceEntityErrorCard(props) {
         });
     }
     const providerName = getProviderName(props.linkType);
+    if (isFunctionInvocationError(props.error)) {
+        return React.createElement(FunctionInvocationErrorCard, {
+            isSelected: props.isSelected,
+            isDisabled: props.isDisabled,
+            organizationId: props.error.organizationId,
+            appDefinitionId: props.error.appDefinitionId,
+            onRemove: props.onRemove,
+            providerName: providerName
+        });
+    }
     return React.createElement(MissingEntityCard, {
         isDisabled: props.isDisabled,
         isSelected: props.isSelected,

package/dist/esm/resources/Cards/ResourceCard.spec.js

@@ -22,6 +22,7 @@ const resolvableEntryUrnWithAnotherEnvironment = 'crn:contentful:::content:space
 const unknownEntryUrn = 'crn:contentful:::content:spaces/space-id/entries/unknown-entry-urn';
 const resolvableExternalResourceType = 'External:ResourceType';
 const resolvableExternalEntityUrn = 'external:entity-urn';
+const unresolvableExternalEntityUrn = 'external:unresolvable-entity-urn';
 const sdk = {
     locales: {
         default: 'en-US'
@@ -60,6 +61,12 @@ const sdk = {
                         ]
                     });
                 }
+                if (query['sys.urn[in]'] === unresolvableExternalEntityUrn) {
+                    const badRequestErrorBody = {
+                        message: 'An error occurred while executing the Contentful Function code'
+                    };
+                    return Promise.reject(new Error(JSON.stringify(badRequestErrorBody)));
+                }
                 return Promise.resolve({
                     items: []
                 });
@@ -88,6 +95,17 @@ const sdk = {
         },
         Space: {
             get: jest.fn().mockResolvedValue(space)
+        },
+        ResourceProvider: {
+            get: jest.fn().mockImplementation(()=>{
+                return Promise.resolve({
+                    function: {
+                        sys: {
+                            id: 'function-id'
+                        }
+                    }
+                });
+            })
         }
     }),
     space: {
@@ -186,4 +204,12 @@ describe('ResourceCard', ()=>{
         expect(getByText(resource.fields.title)).toBeDefined();
         expect(getByText(`${resourceType.sys.resourceProvider.sys.id} ${resourceType.name}`)).toBeDefined();
     });
+    it('renders function invocation error card when an external resource request fails', async ()=>{
+        const { getByTestId } = renderResourceCard({
+            linkType: resolvableExternalResourceType,
+            entityUrn: unresolvableExternalEntityUrn
+        });
+        await waitFor(()=>expect(getByTestId('cf-ui-function-invocation-error-card')).toBeDefined());
+        await waitFor(()=>expect(getByTestId('cf-ui-function-invocation-log-link')).toBeDefined());
+    });
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseAppSDK } from '@contentful/app-sdk';
+import { ResourceProvider } from 'contentful-management';
 import { Asset, ContentType, Entry, ExternalResource, Resource, ResourceType, ScheduledAction, Space } from '../types';
 export type ContentfulResourceInfo = {
     resource: Entry;
@@ -50,15 +51,33 @@ type UseEntityResult<E> = {
 };
 type FetchableEntityType = 'Entry' | 'Asset';
 type FetchableEntity = Entry | Asset;
+export type FunctionInvocationErrorResponse = {
+    status: number;
+    statusText: string;
+    message: 'Response payload of the Contentful Function is invalid' | 'An error occurred while executing the Contentful Function code';
+    request: {
+        url: string;
+        headers: Record<string, string>;
+        method: string;
+    };
+};
 export declare class UnsupportedError extends Error {
     isUnsupportedError: boolean;
     constructor(message: string);
 }
 export declare function isUnsupportedError(value: unknown): value is UnsupportedError;
+export declare class FunctionInvocationError extends Error {
+    isFunctionInvocationError: boolean;
+    organizationId: string;
+    appDefinitionId: string;
+    constructor(message: string, organizationId: string, appDefinitionId: string);
+}
+export declare function isFunctionInvocationError(value: unknown): value is FunctionInvocationError;
 declare const useEntityLoader: () => {
     getResource: <R extends Resource = Resource>(resourceType: string, urn: string, options?: GetResourceOptions) => QueryResourceResult<R>;
     getEntity: <E extends FetchableEntity>(entityType: FetchableEntityType, entityId: string, options?: GetEntityOptions) => QueryEntityResult<E>;
     getEntityScheduledActions: (entityType: FetchableEntityType, entityId: string, options?: GetEntityOptions) => QueryEntityResult<ScheduledAction[]>;
+    getResourceProvider: (organizationId: string, appDefinitionId: string) => QueryEntityResult<ResourceProvider>;
 };
 export declare function useEntity<E extends FetchableEntity>(entityType: FetchableEntityType, entityId: string, options?: UseEntityOptions): UseEntityResult<E>;
 export declare function useResource<R extends Resource = Resource>(resourceType: string, urn: string, options?: UseResourceOptions): {
@@ -66,5 +85,10 @@ export declare function useResource<R extends Resource = Resource>(resourceType:
     data: ResourceInfo<R> | undefined;
     error: unknown;
 };
+export declare function useResourceProvider(organizationId: string, appDefinitionId: string): {
+    status: "error" | "success" | "loading";
+    data: ResourceProvider | undefined;
+    error: unknown;
+};
 declare function EntityProvider({ children, ...props }: React.PropsWithChildren<EntityStoreProps>): React.JSX.Element;
 export { EntityProvider, useEntityLoader };

package/dist/types/components/MissingEntityCard/MissingEntityCard.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 type MissingEntityCardProps = {
     customMessage?: string;
     isDisabled?: boolean;
     isSelected?: boolean;
     onRemove?: Function;
     providerName?: string;
+    as?: 'a' | 'article' | 'button' | 'div' | 'fieldset';
+    testId?: string;
+    children?: ReactNode;
 };
-export declare function MissingEntityCard(props: MissingEntityCardProps): React.JSX.Element;
+export declare function MissingEntityCard({ as, providerName, customMessage, isDisabled, isSelected, onRemove, testId, children, }: MissingEntityCardProps): React.JSX.Element;
 export {};

package/dist/types/components/ResourceEntityErrorCard/FunctionInvocationErrorCard.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+type FunctionInvocationErrorCardProps = {
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    organizationId: string;
+    appDefinitionId: string;
+    onRemove?: Function;
+    providerName?: string;
+};
+export declare function FunctionInvocationErrorCard({ providerName, organizationId, appDefinitionId, isDisabled, isSelected, onRemove, }: FunctionInvocationErrorCardProps): React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "6.2.5",
+  "version": "6.3.1",
   "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": "5744bed7b566437cb831312e84af7444b9047b69"
+  "gitHead": "44c35849b76f6de924a678f578697989cd0293bf"
 }