@contentful/field-editor-reference 5.22.6 → 5.23.0

package/dist/cjs/common/EntityStore.js

@@ -15,6 +15,9 @@ _export(exports, {
     UnsupportedError: function() {
         return UnsupportedError;
     },
+    isContentfulResourceInfo: function() {
+        return isContentfulResourceInfo;
+    },
     isUnsupportedError: function() {
         return isUnsupportedError;
     },
@@ -92,6 +95,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+function isContentfulResourceInfo(info) {
+    return info.resource.sys.type === 'Entry';
+}
 const globalQueue = new _pqueue.default({
     concurrency: 50
 });
@@ -108,8 +114,7 @@ function isUnsupportedError(value) {
 const isEntityQueryKey = (queryKey)=>{
     return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
 };
-async function fetchContentfulEntry(params) {
-    const { urn, fetch, options } = params;
+async function fetchContentfulEntry({ urn, fetch, options }) {
     const resourceId = urn.split(':', 6)[5];
     const ENTITY_RESOURCE_ID_REGEX = RegExp("^spaces\\/(?<spaceId>[^/]+)(?:\\/environments\\/(?<environmentId>[^/]+))?\\/entries\\/(?<entityId>[^/]+)$");
     const resourceIdMatch = resourceId.match(ENTITY_RESOURCE_ID_REGEX);
@@ -172,6 +177,37 @@ async function fetchContentfulEntry(params) {
         contentType: contentType
     };
 }
+async function fetchExternalResource({ urn, fetch, options, spaceId, environmentId, resourceType }) {
+    const [resource, resourceTypes] = await Promise.all([
+        fetch([
+            'resource',
+            spaceId,
+            environmentId,
+            resourceType,
+            urn
+        ], ({ cmaClient })=>cmaClient.raw.get(`/spaces/${spaceId}/environments/${environmentId}/resource_types/${resourceType}/resources`, {
+                params: {
+                    'sys.urn[in]': urn
+                }
+            }).then(({ items })=>items[0] ?? null), options),
+        fetch([
+            'resource-types',
+            spaceId,
+            environmentId
+        ], ({ cmaClient })=>cmaClient.raw.get(`/spaces/${spaceId}/environments/${environmentId}/resource_types`).then(({ items })=>items))
+    ]);
+    const resourceTypeEntity = resourceTypes.find((rt)=>rt.sys.id === resourceType);
+    if (!resourceTypeEntity) {
+        throw new UnsupportedError('Unsupported resource type');
+    }
+    if (!resource) {
+        throw new Error('Missing resource');
+    }
+    return {
+        resource,
+        resourceType: resourceTypeEntity
+    };
+}
 const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = (0, _constate.default)(function useInitServices(props) {
     const currentSpaceId = props.sdk.ids.space;
     const currentEnvironmentId = props.sdk.ids.environmentAlias ?? props.sdk.ids.environment;
@@ -288,9 +324,21 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = (0,
                     options
                 });
             }
-            throw new UnsupportedError('Unsupported resource type');
+            if (!options?.allowExternal) {
+                throw new UnsupportedError('Unsupported resource type');
+            }
+            return fetchExternalResource({
+                fetch,
+                urn,
+                options,
+                resourceType,
+                spaceId: currentSpaceId,
+                environmentId: currentEnvironmentId
+            });
         }, options);
     }, [
+        currentEnvironmentId,
+        currentSpaceId,
         fetch
     ]);
     const isSameSpaceEntityQueryKey = (0, _react.useCallback)((queryKey)=>{

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

@@ -13,6 +13,7 @@ const _reactintersectionobserver = require("react-intersection-observer");
 const _f36components = require("@contentful/f36-components");
 const _EntityStore = require("../../common/EntityStore");
 const _components = require("../../components");
+const _ExternalResourceCard = require("../ExternalResourceCard/ExternalResourceCard");
 const _ContentfulEntryCard = require("./ContentfulEntryCard");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -65,23 +66,30 @@ function ExistingResourceCard(props) {
     const { resourceLink, inView, index = 0 } = props;
     const resourceOptions = {
         priority: index * -1,
-        enabled: inView
+        enabled: inView,
+        allowExternal: true
     };
-    const { data, error } = (0, _EntityStore.useResource)(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions);
-    if (!data && !error) {
+    const { data: info, error } = (0, _EntityStore.useResource)(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions);
+    if (!info && !error) {
         return _react.createElement(ResourceCardSkeleton, null);
     }
-    if (data) {
+    if (!info) {
+        return _react.createElement(_components.ResourceEntityErrorCard, {
+            linkType: resourceLink.sys.linkType,
+            error: error,
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    if ((0, _EntityStore.isContentfulResourceInfo)(info)) {
         return _react.createElement(_ContentfulEntryCard.ContentfulEntryCard, {
-            info: data,
+            info: info,
             ...props
         });
     }
-    return _react.createElement(_components.ResourceEntityErrorCard, {
-        linkType: resourceLink.sys.linkType,
-        error: error,
-        isDisabled: props.isDisabled,
-        onRemove: props.onRemove
+    return _react.createElement(_ExternalResourceCard.ExternalResourceCard, {
+        info: info,
+        ...props
     });
 }
 function ResourceCardWrapper(props) {

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

@@ -9,6 +9,8 @@ const _react1 = require("@testing-library/react");
 const _published_content_typejson = _interop_require_default(require("../../__fixtures__/content-type/published_content_type.json"));
 const _published_entry_non_masterjson = _interop_require_default(require("../../__fixtures__/entry/published_entry_non_master.json"));
 const _published_entryjson = _interop_require_default(require("../../__fixtures__/entry/published_entry.json"));
+const _resourcetypejson = _interop_require_default(require("../../__fixtures__/resource-type/resource-type.json"));
+const _resourcejson = _interop_require_default(require("../../__fixtures__/resource/resource.json"));
 const _indifferent_spacejson = _interop_require_default(require("../../__fixtures__/space/indifferent_space.json"));
 const _EntityStore = require("../../common/EntityStore");
 const _ResourceCard = require("./ResourceCard");
@@ -68,6 +70,8 @@ const resolvableEntryUrn = 'crn:contentful:::content:spaces/space-id/entries/lin
 const resolvableEntryUrnWithExplicitMaster = 'crn:contentful:::content:spaces/space-id/environments/master/entries/linked-entry-urn';
 const resolvableEntryUrnWithAnotherEnvironment = 'crn:contentful:::content:spaces/space-id/environments/my-test-environment/entries/linked-entry-urn';
 const unknownEntryUrn = 'crn:contentful:::content:spaces/space-id/entries/unknown-entry-urn';
+const resolvableExternalResourceType = 'External:ResourceType';
+const resolvableExternalEntityUrn = 'external:entity-urn';
 const sdk = {
     locales: {
         default: 'en-US'
@@ -87,6 +91,27 @@ const sdk = {
                 return Promise.reject(new Error());
             })
         },
+        Http: {
+            get: jest.fn().mockImplementation(({ url, config })=>{
+                if (url === '/spaces/space-id/environments/environment-id/resource_types') {
+                    return Promise.resolve({
+                        items: [
+                            _resourcetypejson.default
+                        ]
+                    });
+                }
+                if (url === `/spaces/space-id/environments/environment-id/resource_types/${resolvableExternalResourceType}/resources` && config.params['sys.urn[in]'] === resolvableExternalEntityUrn) {
+                    return Promise.resolve({
+                        items: [
+                            _resourcejson.default
+                        ]
+                    });
+                }
+                return Promise.resolve({
+                    items: []
+                });
+            })
+        },
         Locale: {
             getMany: jest.fn().mockResolvedValue({
                 items: [
@@ -116,7 +141,7 @@ const sdk = {
         environment: 'environment-id'
     }
 };
-function renderResourceCard({ linkType = 'Contentful:Entry', entryUrn = resolvableEntryUrn } = {}) {
+function renderResourceCard({ linkType = 'Contentful:Entry', entityUrn = resolvableEntryUrn } = {}) {
     return (0, _react1.render)(_react.createElement(_EntityStore.EntityProvider, {
         sdk: sdk
     }, _react.createElement(_ResourceCard.ResourceCard, {
@@ -126,7 +151,7 @@ function renderResourceCard({ linkType = 'Contentful:Entry', entryUrn = resolvab
             sys: {
                 type: 'ResourceLink',
                 linkType: linkType,
-                urn: entryUrn
+                urn: entityUrn
             }
         }
     })));
@@ -143,7 +168,7 @@ describe('ResourceCard', ()=>{
     });
     it('renders entry card with explicit master crn', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
-            entryUrn: resolvableEntryUrnWithExplicitMaster
+            entityUrn: resolvableEntryUrnWithExplicitMaster
         });
         const tooltipContent = `Space: ${_indifferent_spacejson.default.name} (Env.: ${_published_entryjson.default.sys.environment.sys.id})`;
         await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
@@ -154,7 +179,7 @@ describe('ResourceCard', ()=>{
     });
     it('renders entry card with a non master environment', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
-            entryUrn: resolvableEntryUrnWithAnotherEnvironment
+            entityUrn: resolvableEntryUrnWithAnotherEnvironment
         });
         await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         const tooltipContent = `Space: ${_indifferent_spacejson.default.name} (Env.: ${_published_entry_non_masterjson.default.sys.environment.sys.id})`;
@@ -167,7 +192,7 @@ describe('ResourceCard', ()=>{
         const { getByTestId } = renderResourceCard();
         expect(getByTestId('cf-ui-skeleton-form')).toBeDefined();
     });
-    it('renders unsupported entity card when unsupported link is passed', async ()=>{
+    it('renders unsupported entity card when resource type is unknown', async ()=>{
         const { getByText } = renderResourceCard({
             linkType: 'Contentful:UnsupportedLink'
         });
@@ -175,14 +200,30 @@ describe('ResourceCard', ()=>{
     });
     it('renders missing entity card when unknown error is returned', async ()=>{
         const { getByTestId } = renderResourceCard({
-            entryUrn: unknownEntryUrn
+            entityUrn: unknownEntryUrn
         });
         await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined());
     });
     it('renders missing entity card when crn is invalid', async ()=>{
         const { getByTestId } = renderResourceCard({
-            entryUrn: ''
+            entityUrn: ''
+        });
+        await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined());
+    });
+    it('renders missing entity card when external urn is invalid', async ()=>{
+        const { getByTestId } = renderResourceCard({
+            linkType: resolvableExternalResourceType,
+            entityUrn: ''
         });
         await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined());
     });
+    it('renders entry card for external resource', async ()=>{
+        const { getByTestId, getByText } = renderResourceCard({
+            linkType: resolvableExternalResourceType,
+            entityUrn: resolvableExternalEntityUrn
+        });
+        await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
+        expect(getByText(_resourcejson.default.fields.title)).toBeDefined();
+        expect(getByText(_resourcetypejson.default.name)).toBeDefined();
+    });
 });

package/dist/cjs/resources/ExternalResourceCard/ExternalResourceCard.js

@@ -53,40 +53,32 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const defaultProps = {
     isClickable: true,
-    hasCardEditActions: true,
     hasCardMoveActions: true,
     hasCardRemoveActions: true
 };
-const statusMap = {
-    active: 'positive',
-    draft: 'warning',
-    archived: 'negative',
-    suspended: 'negative'
-};
-function ExternalEntityBadge(entityStatus) {
-    const variant = statusMap[entityStatus];
-    return _react.createElement(_f36components.Badge, {
-        variant: variant
-    }, entityStatus);
+function ExternalEntityBadge(badge) {
+    return badge ? _react.createElement(_f36components.Badge, {
+        variant: badge.variant
+    }, badge.label) : null;
 }
-function ExternalResourceCard({ entity, resourceType, size, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick }) {
-    const status = entity.fields.additionalData.status;
-    const badge = status ? ExternalEntityBadge(status) : null;
+function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick }) {
+    const { resource: entity, resourceType } = info;
+    const badge = ExternalEntityBadge(entity.fields.badge);
     return _react.createElement(_f36components.EntryCard, {
         as: entity.fields.externalUrl ? 'a' : 'article',
         href: entity.fields.externalUrl,
         title: entity.fields.title,
         description: entity.fields.description,
-        contentType: resourceType,
-        size: size,
-        thumbnailElement: entity.fields.image && entity.fields.image.url ? _react.createElement("img", {
-            alt: entity.fields.image.description,
+        contentType: resourceType.name,
+        size: 'auto',
+        thumbnailElement: entity.fields.image?.url ? _react.createElement("img", {
+            alt: entity.fields.image.altText,
             src: entity.fields.image.url
         }) : undefined,
         dragHandleRender: renderDragHandle,
         withDragHandle: !!renderDragHandle,
         badge: badge,
-        actions: onEdit || onRemove ? [
+        actions: [
             hasCardEditActions && onEdit ? _react.createElement(_f36components.MenuItem, {
                 key: "edit",
                 testId: "edit",
@@ -101,7 +93,7 @@ function ExternalResourceCard({ entity, resourceType, size, isClickable, onEdit,
                     onRemove && onRemove();
                 }
             }, "Remove") : null,
-            hasCardMoveActions && (onMoveTop || onMoveBottom) ? _react.createElement(_f36components.MenuDivider, {
+            hasCardMoveActions && (onEdit || onRemove) && (onMoveTop || onMoveBottom) ? _react.createElement(_f36components.MenuDivider, {
                 key: "divider"
             }) : null,
             hasCardMoveActions && onMoveTop ? _react.createElement(_f36components.MenuItem, {
@@ -114,7 +106,7 @@ function ExternalResourceCard({ entity, resourceType, size, isClickable, onEdit,
                 onClick: ()=>onMoveBottom && onMoveBottom(),
                 testId: "move-bottom"
             }, "Move to bottom") : null
-        ].filter((item)=>item) : [],
+        ].filter((item)=>item),
         onClick: isClickable ? (e)=>{
             e.preventDefault();
             if (onClick) return onClick(e);

package/dist/esm/common/EntityStore.js

@@ -16,6 +16,9 @@ import constate from 'constate';
 import { createClient } from 'contentful-management';
 import PQueue from 'p-queue';
 import { SharedQueryClientProvider, useQuery, useQueryClient } from './queryClient';
+export function isContentfulResourceInfo(info) {
+    return info.resource.sys.type === 'Entry';
+}
 const globalQueue = new PQueue({
     concurrency: 50
 });
@@ -32,8 +35,7 @@ export function isUnsupportedError(value) {
 const isEntityQueryKey = (queryKey)=>{
     return Array.isArray(queryKey) && (queryKey[0] === 'Entry' || queryKey[0] === 'Asset') && queryKey.length === 4;
 };
-async function fetchContentfulEntry(params) {
-    const { urn, fetch, options } = params;
+async function fetchContentfulEntry({ urn, fetch, options }) {
     const resourceId = urn.split(':', 6)[5];
     const ENTITY_RESOURCE_ID_REGEX = RegExp("^spaces\\/(?<spaceId>[^/]+)(?:\\/environments\\/(?<environmentId>[^/]+))?\\/entries\\/(?<entityId>[^/]+)$");
     const resourceIdMatch = resourceId.match(ENTITY_RESOURCE_ID_REGEX);
@@ -96,6 +98,37 @@ async function fetchContentfulEntry(params) {
         contentType: contentType
     };
 }
+async function fetchExternalResource({ urn, fetch, options, spaceId, environmentId, resourceType }) {
+    const [resource, resourceTypes] = await Promise.all([
+        fetch([
+            'resource',
+            spaceId,
+            environmentId,
+            resourceType,
+            urn
+        ], ({ cmaClient })=>cmaClient.raw.get(`/spaces/${spaceId}/environments/${environmentId}/resource_types/${resourceType}/resources`, {
+                params: {
+                    'sys.urn[in]': urn
+                }
+            }).then(({ items })=>items[0] ?? null), options),
+        fetch([
+            'resource-types',
+            spaceId,
+            environmentId
+        ], ({ cmaClient })=>cmaClient.raw.get(`/spaces/${spaceId}/environments/${environmentId}/resource_types`).then(({ items })=>items))
+    ]);
+    const resourceTypeEntity = resourceTypes.find((rt)=>rt.sys.id === resourceType);
+    if (!resourceTypeEntity) {
+        throw new UnsupportedError('Unsupported resource type');
+    }
+    if (!resource) {
+        throw new Error('Missing resource');
+    }
+    return {
+        resource,
+        resourceType: resourceTypeEntity
+    };
+}
 const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = constate(function useInitServices(props) {
     const currentSpaceId = props.sdk.ids.space;
     const currentEnvironmentId = props.sdk.ids.environmentAlias ?? props.sdk.ids.environment;
@@ -212,9 +245,21 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons
                     options
                 });
             }
-            throw new UnsupportedError('Unsupported resource type');
+            if (!options?.allowExternal) {
+                throw new UnsupportedError('Unsupported resource type');
+            }
+            return fetchExternalResource({
+                fetch,
+                urn,
+                options,
+                resourceType,
+                spaceId: currentSpaceId,
+                environmentId: currentEnvironmentId
+            });
         }, options);
     }, [
+        currentEnvironmentId,
+        currentSpaceId,
         fetch
     ]);
     const isSameSpaceEntityQueryKey = useCallback((queryKey)=>{

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useInView } from 'react-intersection-observer';
 import { EntryCard } from '@contentful/f36-components';
-import { useResource } from '../../common/EntityStore';
+import { isContentfulResourceInfo, useResource } from '../../common/EntityStore';
 import { ResourceEntityErrorCard } from '../../components';
+import { ExternalResourceCard } from '../ExternalResourceCard/ExternalResourceCard';
 import { ContentfulEntryCard } from './ContentfulEntryCard';
 function ResourceCardSkeleton() {
     return React.createElement(EntryCard, {
@@ -14,23 +15,30 @@ function ExistingResourceCard(props) {
     const { resourceLink, inView, index = 0 } = props;
     const resourceOptions = {
         priority: index * -1,
-        enabled: inView
+        enabled: inView,
+        allowExternal: true
     };
-    const { data, error } = useResource(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions);
-    if (!data && !error) {
+    const { data: info, error } = useResource(resourceLink.sys.linkType, resourceLink.sys.urn, resourceOptions);
+    if (!info && !error) {
         return React.createElement(ResourceCardSkeleton, null);
     }
-    if (data) {
+    if (!info) {
+        return React.createElement(ResourceEntityErrorCard, {
+            linkType: resourceLink.sys.linkType,
+            error: error,
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    if (isContentfulResourceInfo(info)) {
         return React.createElement(ContentfulEntryCard, {
-            info: data,
+            info: info,
             ...props
         });
     }
-    return React.createElement(ResourceEntityErrorCard, {
-        linkType: resourceLink.sys.linkType,
-        error: error,
-        isDisabled: props.isDisabled,
-        onRemove: props.onRemove
+    return React.createElement(ExternalResourceCard, {
+        info: info,
+        ...props
     });
 }
 function ResourceCardWrapper(props) {

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

@@ -5,6 +5,8 @@ import { configure, fireEvent, render, waitFor } from '@testing-library/react';
 import publishedCT from '../../__fixtures__/content-type/published_content_type.json';
 import publishedEntryNonMasterEnvironment from '../../__fixtures__/entry/published_entry_non_master.json';
 import publishedEntry from '../../__fixtures__/entry/published_entry.json';
+import resourceType from '../../__fixtures__/resource-type/resource-type.json';
+import resource from '../../__fixtures__/resource/resource.json';
 import space from '../../__fixtures__/space/indifferent_space.json';
 import { EntityProvider } from '../../common/EntityStore';
 import { ResourceCard } from './ResourceCard';
@@ -18,6 +20,8 @@ const resolvableEntryUrn = 'crn:contentful:::content:spaces/space-id/entries/lin
 const resolvableEntryUrnWithExplicitMaster = 'crn:contentful:::content:spaces/space-id/environments/master/entries/linked-entry-urn';
 const resolvableEntryUrnWithAnotherEnvironment = 'crn:contentful:::content:spaces/space-id/environments/my-test-environment/entries/linked-entry-urn';
 const unknownEntryUrn = 'crn:contentful:::content:spaces/space-id/entries/unknown-entry-urn';
+const resolvableExternalResourceType = 'External:ResourceType';
+const resolvableExternalEntityUrn = 'external:entity-urn';
 const sdk = {
     locales: {
         default: 'en-US'
@@ -37,6 +41,27 @@ const sdk = {
                 return Promise.reject(new Error());
             })
         },
+        Http: {
+            get: jest.fn().mockImplementation(({ url, config })=>{
+                if (url === '/spaces/space-id/environments/environment-id/resource_types') {
+                    return Promise.resolve({
+                        items: [
+                            resourceType
+                        ]
+                    });
+                }
+                if (url === `/spaces/space-id/environments/environment-id/resource_types/${resolvableExternalResourceType}/resources` && config.params['sys.urn[in]'] === resolvableExternalEntityUrn) {
+                    return Promise.resolve({
+                        items: [
+                            resource
+                        ]
+                    });
+                }
+                return Promise.resolve({
+                    items: []
+                });
+            })
+        },
         Locale: {
             getMany: jest.fn().mockResolvedValue({
                 items: [
@@ -66,7 +91,7 @@ const sdk = {
         environment: 'environment-id'
     }
 };
-function renderResourceCard({ linkType = 'Contentful:Entry', entryUrn = resolvableEntryUrn } = {}) {
+function renderResourceCard({ linkType = 'Contentful:Entry', entityUrn = resolvableEntryUrn } = {}) {
     return render(React.createElement(EntityProvider, {
         sdk: sdk
     }, React.createElement(ResourceCard, {
@@ -76,7 +101,7 @@ function renderResourceCard({ linkType = 'Contentful:Entry', entryUrn = resolvab
             sys: {
                 type: 'ResourceLink',
                 linkType: linkType,
-                urn: entryUrn
+                urn: entityUrn
             }
         }
     })));
@@ -93,7 +118,7 @@ describe('ResourceCard', ()=>{
     });
     it('renders entry card with explicit master crn', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
-            entryUrn: resolvableEntryUrnWithExplicitMaster
+            entityUrn: resolvableEntryUrnWithExplicitMaster
         });
         const tooltipContent = `Space: ${space.name} (Env.: ${publishedEntry.sys.environment.sys.id})`;
         await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
@@ -104,7 +129,7 @@ describe('ResourceCard', ()=>{
     });
     it('renders entry card with a non master environment', async ()=>{
         const { getByTestId, getByText } = renderResourceCard({
-            entryUrn: resolvableEntryUrnWithAnotherEnvironment
+            entityUrn: resolvableEntryUrnWithAnotherEnvironment
         });
         await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
         const tooltipContent = `Space: ${space.name} (Env.: ${publishedEntryNonMasterEnvironment.sys.environment.sys.id})`;
@@ -117,7 +142,7 @@ describe('ResourceCard', ()=>{
         const { getByTestId } = renderResourceCard();
         expect(getByTestId('cf-ui-skeleton-form')).toBeDefined();
     });
-    it('renders unsupported entity card when unsupported link is passed', async ()=>{
+    it('renders unsupported entity card when resource type is unknown', async ()=>{
         const { getByText } = renderResourceCard({
             linkType: 'Contentful:UnsupportedLink'
         });
@@ -125,14 +150,30 @@ describe('ResourceCard', ()=>{
     });
     it('renders missing entity card when unknown error is returned', async ()=>{
         const { getByTestId } = renderResourceCard({
-            entryUrn: unknownEntryUrn
+            entityUrn: unknownEntryUrn
         });
         await waitFor(()=>expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined());
     });
     it('renders missing entity card when crn is invalid', async ()=>{
         const { getByTestId } = renderResourceCard({
-            entryUrn: ''
+            entityUrn: ''
+        });
+        await waitFor(()=>expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined());
+    });
+    it('renders missing entity card when external urn is invalid', async ()=>{
+        const { getByTestId } = renderResourceCard({
+            linkType: resolvableExternalResourceType,
+            entityUrn: ''
         });
         await waitFor(()=>expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined());
     });
+    it('renders entry card for external resource', async ()=>{
+        const { getByTestId, getByText } = renderResourceCard({
+            linkType: resolvableExternalResourceType,
+            entityUrn: resolvableExternalEntityUrn
+        });
+        await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
+        expect(getByText(resource.fields.title)).toBeDefined();
+        expect(getByText(resourceType.name)).toBeDefined();
+    });
 });

package/dist/esm/resources/ExternalResourceCard/ExternalResourceCard.js

@@ -2,40 +2,32 @@ import * as React from 'react';
 import { Badge, EntryCard, MenuItem, MenuDivider } from '@contentful/f36-components';
 const defaultProps = {
     isClickable: true,
-    hasCardEditActions: true,
     hasCardMoveActions: true,
     hasCardRemoveActions: true
 };
-const statusMap = {
-    active: 'positive',
-    draft: 'warning',
-    archived: 'negative',
-    suspended: 'negative'
-};
-function ExternalEntityBadge(entityStatus) {
-    const variant = statusMap[entityStatus];
-    return React.createElement(Badge, {
-        variant: variant
-    }, entityStatus);
+function ExternalEntityBadge(badge) {
+    return badge ? React.createElement(Badge, {
+        variant: badge.variant
+    }, badge.label) : null;
 }
-export function ExternalResourceCard({ entity, resourceType, size, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick }) {
-    const status = entity.fields.additionalData.status;
-    const badge = status ? ExternalEntityBadge(status) : null;
+export function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick }) {
+    const { resource: entity, resourceType } = info;
+    const badge = ExternalEntityBadge(entity.fields.badge);
     return React.createElement(EntryCard, {
         as: entity.fields.externalUrl ? 'a' : 'article',
         href: entity.fields.externalUrl,
         title: entity.fields.title,
         description: entity.fields.description,
-        contentType: resourceType,
-        size: size,
-        thumbnailElement: entity.fields.image && entity.fields.image.url ? React.createElement("img", {
-            alt: entity.fields.image.description,
+        contentType: resourceType.name,
+        size: 'auto',
+        thumbnailElement: entity.fields.image?.url ? React.createElement("img", {
+            alt: entity.fields.image.altText,
             src: entity.fields.image.url
         }) : undefined,
         dragHandleRender: renderDragHandle,
         withDragHandle: !!renderDragHandle,
         badge: badge,
-        actions: onEdit || onRemove ? [
+        actions: [
             hasCardEditActions && onEdit ? React.createElement(MenuItem, {
                 key: "edit",
                 testId: "edit",
@@ -50,7 +42,7 @@ export function ExternalResourceCard({ entity, resourceType, size, isClickable,
                     onRemove && onRemove();
                 }
             }, "Remove") : null,
-            hasCardMoveActions && (onMoveTop || onMoveBottom) ? React.createElement(MenuDivider, {
+            hasCardMoveActions && (onEdit || onRemove) && (onMoveTop || onMoveBottom) ? React.createElement(MenuDivider, {
                 key: "divider"
             }) : null,
             hasCardMoveActions && onMoveTop ? React.createElement(MenuItem, {
@@ -63,7 +55,7 @@ export function ExternalResourceCard({ entity, resourceType, size, isClickable,
                 onClick: ()=>onMoveBottom && onMoveBottom(),
                 testId: "move-bottom"
             }, "Move to bottom") : null
-        ].filter((item)=>item) : [],
+        ].filter((item)=>item),
         onClick: isClickable ? (e)=>{
             e.preventDefault();
             if (onClick) return onClick(e);

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

@@ -1,12 +1,18 @@
 import React from 'react';
 import { BaseAppSDK } from '@contentful/app-sdk';
-import { Asset, ContentType, Entry, Resource, ResourceType, ScheduledAction, Space } from '../types';
-export type ResourceInfo<R extends Resource = Resource> = {
-    resource: R;
+import { Asset, ContentType, Entry, ExternalResource, Resource, ResourceType, ScheduledAction, Space } from '../types';
+export type ContentfulResourceInfo = {
+    resource: Entry;
     defaultLocaleCode: string;
     contentType: ContentType;
     space: Space;
 };
+export type ExternalResourceInfo = {
+    resource: ExternalResource;
+    resourceType: ResourceType;
+};
+export type ResourceInfo<R extends Resource = Resource> = R extends Entry ? ContentfulResourceInfo : ExternalResourceInfo;
+export declare function isContentfulResourceInfo(info: ResourceInfo): info is ContentfulResourceInfo;
 type EntityStoreProps = {
     sdk: BaseAppSDK;
     queryConcurrency?: number;
@@ -22,7 +28,9 @@ type UseEntityOptions = GetEntityOptions & {
     enabled?: boolean;
 };
 type QueryEntityResult<E> = Promise<E>;
-type GetResourceOptions = GetOptions;
+type GetResourceOptions = GetOptions & {
+    allowExternal?: boolean;
+};
 type QueryResourceResult<R extends Resource = Resource> = QueryEntityResult<ResourceInfo<R>>;
 type UseResourceOptions = GetResourceOptions & {
     enabled?: boolean;
@@ -48,14 +56,14 @@ export declare class UnsupportedError extends Error {
 }
 export declare function isUnsupportedError(value: unknown): value is UnsupportedError;
 declare const useEntityLoader: () => {
-    getResource: <R extends Resource = Resource>(resourceType: ResourceType, urn: string, options?: GetResourceOptions) => QueryResourceResult<R>;
+    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[]>;
 };
 export declare function useEntity<E extends FetchableEntity>(entityType: FetchableEntityType, entityId: string, options?: UseEntityOptions): UseEntityResult<E>;
-export declare function useResource(resourceType: ResourceType, urn: string, options?: UseResourceOptions): {
+export declare function useResource<R extends Resource = Resource>(resourceType: string, urn: string, options?: UseResourceOptions): {
     status: "error" | "success" | "loading";
-    data: ResourceInfo<Resource> | undefined;
+    data: ResourceInfo<R> | undefined;
     error: unknown;
 };
 declare function EntityProvider({ children, ...props }: React.PropsWithChildren<EntityStoreProps>): JSX.Element;

package/dist/types/resources/Cards/ResourceCard.d.ts

@@ -3,7 +3,7 @@ import { RenderDragFn, ResourceLink } from '../../types';
 import { CardActionsHandlers, EntryRoute } from './ContentfulEntryCard';
 type ResourceCardProps = {
     index?: number;
-    resourceLink?: ResourceLink;
+    resourceLink?: ResourceLink<string>;
     isDisabled: boolean;
     renderDragHandle?: RenderDragFn;
     getEntryRouteHref: (entryRoute: EntryRoute) => string;

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

@@ -1,35 +1,9 @@
 import * as React from 'react';
+import { ExternalResourceInfo } from '../../common/EntityStore';
 import { RenderDragFn } from '../../types';
-type SysExternalResource<T extends string> = {
-    sys: {
-        type: 'Link';
-        linkType: T;
-        id: string;
-    };
-};
-interface ExternalResource {
-    sys: {
-        type: string;
-        id: string;
-        resourceProvider: SysExternalResource<'ResourceProvider'>;
-        resourceType: SysExternalResource<'ResourceType'>;
-    };
-    fields: {
-        title: string;
-        description?: string;
-        externalUrl?: string;
-        image?: {
-            url?: string;
-            description?: string;
-        };
-        additionalData: any;
-    };
-}
 export interface ExternalResourceCardProps {
-    entity: ExternalResource;
-    resourceType: string;
+    info: ExternalResourceInfo;
     isDisabled: boolean;
-    size: 'small' | 'default' | 'auto';
     isSelected?: boolean;
     onRemove?: () => void;
     onEdit?: () => void;
@@ -38,17 +12,15 @@ export interface ExternalResourceCardProps {
     isClickable?: boolean;
     onMoveTop?: () => void;
     onMoveBottom?: () => void;
-    hasCardEditActions: boolean;
+    hasCardEditActions?: boolean;
     hasCardMoveActions?: boolean;
     hasCardRemoveActions?: boolean;
 }
-export declare function ExternalResourceCard({ entity, resourceType, size, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick, }: ExternalResourceCardProps): JSX.Element;
+export declare function ExternalResourceCard({ info, isClickable, onEdit, onRemove, onMoveTop, onMoveBottom, hasCardEditActions, hasCardMoveActions, hasCardRemoveActions, renderDragHandle, onClick, }: ExternalResourceCardProps): JSX.Element;
 export declare namespace ExternalResourceCard {
     var defaultProps: {
         isClickable: boolean;
-        hasCardEditActions: boolean;
         hasCardMoveActions: boolean;
         hasCardRemoveActions: boolean;
     };
 }
-export {};

package/dist/types/types.d.ts

@@ -2,7 +2,7 @@
 import { NavigatorSlideInfo, ContentEntityType } from '@contentful/app-sdk';
 import { Entry, Asset } from '@contentful/field-editor-shared';
 export type { BaseAppSDK, FieldAppSDK, ContentType, ContentTypeField, Link, ContentEntityType, NavigatorSlideInfo, ScheduledAction, } from '@contentful/app-sdk';
-export type { SpaceProps as Space } from 'contentful-management';
+export type { SpaceProps as Space, ResourceLink } from 'contentful-management';
 export { Entry, File, Asset } from '@contentful/field-editor-shared';
 export type { ResourceInfo } from './common/EntityStore';
 export type Entity = Entry | Asset;
@@ -21,9 +21,45 @@ export type AssetLink = {
     };
 };
 export type EntityLink = EntryLink | AssetLink;
-export type ResourceType = 'Contentful:Entry';
-export type Resource = Entry | Asset;
-export type EntityType = 'Entry' | 'Asset' | ResourceType;
+type SysExternalResource<T extends string> = {
+    sys: {
+        type: 'Link';
+        linkType: T;
+        id: string;
+    };
+};
+export type ResourceType = {
+    sys: {
+        type: 'ResourceType';
+        id: string;
+        resourceProvider: SysExternalResource<'ResourceProvider'>;
+    };
+    name: string;
+};
+export interface ExternalResource {
+    sys: {
+        type: 'Resource';
+        id: string;
+        resourceProvider: SysExternalResource<'ResourceProvider'>;
+        resourceType: SysExternalResource<'ResourceType'>;
+    };
+    fields: {
+        title: string;
+        subtitle?: string;
+        description?: string;
+        externalUrl?: string;
+        badge?: {
+            label: string;
+            variant: 'negative' | 'positive' | 'primary' | 'secondary' | 'warning';
+        };
+        image?: {
+            url: string;
+            altText?: string;
+        };
+    };
+}
+export type Resource = Entry | ExternalResource;
+export type EntityType = 'Entry' | 'Asset' | string;
 export type SysResourceLink<T extends string> = {
     sys: {
         type: 'ResourceLink';
@@ -32,7 +68,6 @@ export type SysResourceLink<T extends string> = {
     };
 };
 export type ContentfulEntryLink = SysResourceLink<'Contentful:Entry'>;
-export type ResourceLink = ContentfulEntryLink;
 /**
  * @deprecated use `EntityLink` type
  */

package/dist/types/utils/useSortIDs.d.ts

@@ -1,5 +1,5 @@
 import { ReferenceValue, ResourceLink } from '../types';
-type Items = (ResourceLink | ReferenceValue)[];
+type Items = (ResourceLink<string> | ReferenceValue)[];
 export declare const useSortIDs: (items: Items) => {
     sortIDs: {
         id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "5.22.6",
+  "version": "5.23.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "f251d113bc64fc7941017981bfb24975ccaa4c18"
+  "gitHead": "7018fb86df27fcb2e0d4bdb475549367fe6ee87d"
 }