@contentful/field-editor-reference 6.18.0 → 6.19.1-canary.18

package/dist/esm/entries/SingleEntryReferenceEditor.js

@@ -17,6 +17,7 @@ export function SingleEntryReferenceEditor(props) {
             hasCardEditActions: hasCardEditActions,
             hasCardRemoveActions: hasCardRemoveActions,
             activeLocales: activeLocales,
+            addReferenceToRelease: props.addReferenceToRelease,
             onRemove: ()=>{
                 setValue(null);
             }

package/dist/esm/entries/WrappedEntryCard/FetchingWrappedEntryCard.js

@@ -63,6 +63,14 @@ export function FetchingWrappedEntryCard(props) {
             contentTypeId: entry?.sys?.contentType?.sys?.id ?? ''
         });
     };
+    const onAddToRelease = ()=>{
+        if (entry && props.addReferenceToRelease) {
+            void props.addReferenceToRelease(entry, props.sdk.field.locale, {
+                openModalForVersionSelection: true,
+                skipNestedReferencesPrompt: true
+            });
+        }
+    };
     React.useEffect(()=>{
         if (entry) {
             props.onAction?.({
@@ -117,7 +125,8 @@ export function FetchingWrappedEntryCard(props) {
             activeLocales: props.activeLocales,
             releaseStatusMap,
             release: props.sdk.release,
-            releaseEntityStatus
+            releaseEntityStatus,
+            onAddToRelease
         };
         const { hasCardEditActions, hasCardMoveActions, hasCardRemoveActions } = props;
         function renderDefaultCard(props) {

package/dist/esm/entries/WrappedEntryCard/WrappedEntryCard.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { EntryCard, MenuDivider, MenuItem } from '@contentful/f36-components';
+import { PlusIcon } from '@contentful/f36-icons';
 import { entityHelpers, isValidImage } from '@contentful/field-editor-shared';
 import { AssetThumbnail, MissingEntityCard, EntityStatusBadge } from '../../components';
 import { SpaceName } from '../../components/SpaceName/SpaceName';
@@ -10,7 +11,7 @@ const defaultProps = {
     hasCardMoveActions: true,
     hasCardRemoveActions: true
 };
-export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales, localeCode, defaultLocaleCode, localesStatusMap, useLocalizedEntityStatus, size, spaceName, isClickable, isDisabled, isSelected, hasCardMoveActions, hasCardEditActions, hasCardRemoveActions, renderDragHandle, getAsset, getEntityScheduledActions, onClick, onEdit, onRemove, onMoveTop, onMoveBottom, releaseEntityStatus, releaseStatusMap, release }) {
+export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales, localeCode, defaultLocaleCode, localesStatusMap, useLocalizedEntityStatus, size, spaceName, isClickable, isDisabled, isSelected, hasCardMoveActions, hasCardEditActions, hasCardRemoveActions, renderDragHandle, getAsset, getEntityScheduledActions, onClick, onEdit, onRemove, onMoveTop, onMoveBottom, releaseEntityStatus, releaseStatusMap, release, onAddToRelease }) {
     const [file, setFile] = React.useState(null);
     React.useEffect(()=>{
         let mounted = true;
@@ -61,6 +62,7 @@ export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales,
         localeCode,
         defaultLocaleCode
     });
+    const showAddToReleaseAction = releaseEntityStatus === 'notInRelease' && release !== undefined && onAddToRelease !== undefined && !isDisabled;
     return /*#__PURE__*/ React.createElement(EntryCard, {
         as: isClickable && entryUrl ? 'a' : 'article',
         href: isClickable ? entryUrl : undefined,
@@ -91,7 +93,7 @@ export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales,
         dragHandleRender: renderDragHandle,
         withDragHandle: !!renderDragHandle && !isDisabled,
         draggable: !!renderDragHandle && !isDisabled,
-        actions: onEdit || onRemove ? [
+        actions: onEdit || onRemove || showAddToReleaseAction ? [
             hasCardEditActions && onEdit ? /*#__PURE__*/ React.createElement(MenuItem, {
                 key: "edit",
                 testId: "edit",
@@ -106,6 +108,15 @@ export function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales,
                     onRemove && onRemove();
                 }
             }, "Remove") : null,
+            showAddToReleaseAction ? /*#__PURE__*/ React.createElement(MenuItem, {
+                key: "add-to-release",
+                testId: "add-to-release",
+                onClick: ()=>{
+                    onAddToRelease();
+                }
+            }, /*#__PURE__*/ React.createElement(PlusIcon, {
+                size: "tiny"
+            }), "Add to release") : null,
             hasCardMoveActions && (onMoveTop || onMoveBottom) && !isDisabled ? /*#__PURE__*/ React.createElement(MenuDivider, {
                 key: "divider"
             }) : null,

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

@@ -12,9 +12,10 @@ function ResourceCardSkeleton() {
     });
 }
 function ExistingResourceCard(props) {
-    const { resourceLink, inView, index = 0, locale } = props;
+    const { resourceLink, inView, index = 0, locale, referencingEntryId } = props;
     const resourceOptions = {
         locale,
+        referencingEntryId,
         priority: index * -1,
         enabled: inView,
         allowExternal: true

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
+import { SharedQueryClientProvider } from '@contentful/field-editor-shared';
+import { createTestQueryClient } from '@contentful/field-editor-test-utils';
 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';
@@ -167,9 +169,33 @@ describe('ResourceCard', ()=>{
         fireEvent.mouseEnter(getByText(space.name));
         await waitFor(()=>expect(getByText(tooltipContent)).toBeDefined());
     });
-    it('renders skeleton when no data is provided', ()=>{
-        const { getByTestId } = renderResourceCard();
+    it('renders skeleton while data is loading', async ()=>{
+        const queryClient = createTestQueryClient();
+        let resolveEntry;
+        const pendingPromise = new Promise((resolve)=>{
+            resolveEntry = resolve;
+        });
+        sdk.cma.entry.get.mockReturnValueOnce(pendingPromise);
+        const { getByTestId, queryByTestId } = render(/*#__PURE__*/ React.createElement(SharedQueryClientProvider, {
+            client: queryClient
+        }, /*#__PURE__*/ React.createElement(EntityProvider, {
+            sdk: sdk
+        }, /*#__PURE__*/ React.createElement(ResourceCard, {
+            isDisabled: false,
+            getEntryRouteHref: ()=>'',
+            resourceLink: {
+                sys: {
+                    type: 'ResourceLink',
+                    linkType: 'Contentful:Entry',
+                    urn: resolvableEntryUrn
+                }
+            }
+        }))));
         expect(getByTestId('cf-ui-skeleton-form')).toBeDefined();
+        expect(queryByTestId('cf-ui-entry-card')).toBeNull();
+        resolveEntry(publishedEntry);
+        await waitFor(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
+        expect(queryByTestId('cf-ui-skeleton-form')).toBeNull();
     });
     it('renders unsupported entity card when resource type is unknown', async ()=>{
         const { getByText } = renderResourceCard({

package/dist/esm/resources/MultipleResourceReferenceEditor.js

@@ -94,6 +94,7 @@ export function MultipleResourceReferenceEditor(props) {
                         index: index,
                         resourceLink: item,
                         locale: props.sdk.field.locale,
+                        referencingEntryId: props.sdk.ids.entry,
                         isDisabled: isDisabled,
                         renderDragHandle: DragHandle,
                         onMoveTop: onMoveTop,

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

@@ -73,7 +73,8 @@ describe('Multiple resource editor', ()=>{
         const options = dialogFn.mock.calls[0][0];
         expect(options).toEqual({
             allowedResources: fieldDefinition.allowedResources,
-            locale: 'en'
+            locale: 'en',
+            referencingEntryId: 'testEntry'
         });
     });
     it('hides the action button when insufficient permissions', async ()=>{

package/dist/esm/resources/SingleResourceReferenceEditor.js

@@ -20,6 +20,7 @@ export function SingleResourceReferenceEditor(props) {
             onRemove: ()=>props.sdk.field.removeValue(),
             resourceLink: value,
             locale: props.sdk.field.locale,
+            referencingEntryId: props.sdk.ids.entry,
             isDisabled: disabled,
             getEntryRouteHref: props.getEntryRouteHref
         }) : /*#__PURE__*/ React.createElement(CombinedLinkEntityActions, {

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

@@ -69,7 +69,8 @@ describe('Single resource editor', ()=>{
         const options = dialogFn.mock.calls[0][0];
         expect(options).toEqual({
             allowedResources: fieldDefinition.allowedResources,
-            locale: 'en'
+            locale: 'en',
+            referencingEntryId: 'testEntry'
         });
     });
     it('renders no the action button when permissions insufficient', async ()=>{

package/dist/esm/resources/useResourceLinkActions.js

@@ -25,14 +25,18 @@ export function useResourceLinkActions({ parameters, sdk }) {
         field
     ]);
     const multiple = field.type === 'Array';
+    const referencingEntryId = sdk.ids.entry;
+    const allowedResources = field.allowedResources;
     const onLinkExisting = useMemo(()=>{
         const promptSelection = multiple ? async ()=>await dialogs.selectMultipleResourceEntities({
-                allowedResources: field.allowedResources,
-                locale: field.locale
+                allowedResources,
+                locale: field.locale,
+                referencingEntryId
             }) : async ()=>[
                 await dialogs.selectSingleResourceEntity({
-                    allowedResources: field.allowedResources,
-                    locale: field.locale
+                    allowedResources,
+                    locale: field.locale,
+                    referencingEntryId
                 })
             ];
         return async ()=>{
@@ -40,8 +44,9 @@ export function useResourceLinkActions({ parameters, sdk }) {
         };
     }, [
         dialogs,
-        field.allowedResources,
+        allowedResources,
         field.locale,
+        referencingEntryId,
         multiple,
         onLinkedExisting
     ]);

package/dist/types/assets/WrappedAssetCard/AssetCardActions.d.ts

@@ -8,4 +8,5 @@ export declare function renderActions(props: {
     onRemove?: () => void;
     isDisabled: boolean;
     entityFile?: File;
+    onAddToReleaseAction?: () => void;
 }): (React.JSX.Element | null)[];

package/dist/types/assets/WrappedAssetCard/FetchingWrappedAssetCard.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CustomCardRenderer, RenderCustomMissingEntityCard } from '../../common/customCardTypes';
-import { Action, FieldAppSDK, ViewType, RenderDragFn } from '../../types';
+import { Action, Asset, FieldAppSDK, ViewType, RenderDragFn } from '../../types';
 type FetchingWrappedAssetCardProps = {
     assetId: string;
     isDisabled: boolean;
@@ -12,6 +12,10 @@ type FetchingWrappedAssetCardProps = {
     renderDragHandle?: RenderDragFn;
     renderCustomCard?: CustomCardRenderer;
     renderCustomMissingEntityCard?: RenderCustomMissingEntityCard;
+    addReferenceToRelease?: (reference: Asset, localeCode?: string, options?: {
+        openModalForVersionSelection?: boolean;
+        skipNestedReferencesPrompt?: boolean;
+    }) => Promise<void>;
 };
 export declare function FetchingWrappedAssetCard(props: FetchingWrappedAssetCardProps): React.JSX.Element;
 export {};

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

@@ -23,9 +23,10 @@ export interface WrappedAssetCardProps {
     releaseEntityStatus?: ReleaseEntityStatus;
     releaseStatusMap?: ReleaseStatusMap;
     release?: ReleaseV2Props;
+    onAddToRelease?: () => void;
 }
 export declare const WrappedAssetCard: {
-    ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release, }: WrappedAssetCardProps): React.JSX.Element;
+    ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release, onAddToRelease, }: WrappedAssetCardProps): React.JSX.Element;
     defaultProps: {
         isClickable: boolean;
     };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseAppSDK } from '@contentful/app-sdk';
+import { QueryClient } from '@tanstack/react-query';
 import { ResourceProvider } from 'contentful-management';
 import { Asset, ContentType, Entry, ExternalResource, Resource, ResourceType, ScheduledAction, Space } from '../types';
 export type ContentfulResourceInfo = {
@@ -17,6 +18,7 @@ export declare function isContentfulResourceInfo(info: ResourceInfo): info is Co
 type EntityStoreProps = {
     sdk: BaseAppSDK;
     queryConcurrency?: number;
+    queryClient?: QueryClient;
 };
 type GetOptions = {
     priority?: number;
@@ -33,11 +35,11 @@ type QueryEntityResult<E> = Promise<E>;
 type GetResourceOptions = GetOptions & {
     allowExternal?: boolean;
     locale?: string;
+    referencingEntryId?: string;
 };
 type QueryResourceResult<R extends Resource = Resource> = QueryEntityResult<ResourceInfo<R>>;
 type UseResourceOptions = GetResourceOptions & {
     enabled?: boolean;
-    locale?: string;
 };
 type UseEntityResult<E> = {
     status: 'idle';
@@ -87,13 +89,13 @@ declare const useEntityLoader: () => {
     getResourceProvider: (organizationId: string, appDefinitionId: string) => QueryEntityResult<ResourceProvider>;
 };
 export declare function useEntity<E extends FetchableEntity>(entityType: FetchableEntityType, entityId: string, options?: Omit<UseEntityOptions, 'releaseId'>): UseEntityResult<E>;
-export declare function useResource<R extends Resource = Resource>(resourceType: string, urn: string, { locale, ...options }?: UseResourceOptions): {
-    status: "error" | "success" | "loading";
+export declare function useResource<R extends Resource = Resource>(resourceType: string, urn: string, { locale, referencingEntryId, ...options }?: UseResourceOptions): {
+    status: "loading" | "error" | "success";
     data: ResourceInfo<R> | undefined;
     error: unknown;
 };
 export declare function useResourceProvider(organizationId: string, appDefinitionId: string): {
-    status: "error" | "success" | "loading";
+    status: "loading" | "error" | "success";
     data: ResourceProvider | undefined;
     error: unknown;
 };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import type { LinkActionsProps } from '../components';
-import { Action, ActionLabels, FieldAppSDK, ViewType } from '../types';
+import { Action, ActionLabels, FieldAppSDK, ViewType, Entry, Asset } from '../types';
 import { CustomCardRenderer, RenderCustomMissingEntityCard } from './customCardTypes';
 export interface ReferenceEditorProps {
     /**
@@ -33,6 +33,10 @@ export interface ReferenceEditorProps {
         oldIndex: number;
         newIndex: number;
     }) => void;
+    addReferenceToRelease?: (reference: Entry | Asset, localeCode?: string, options?: {
+        openModalForVersionSelection?: boolean;
+        skipNestedReferencesPrompt?: boolean;
+    }) => Promise<void>;
 }
 export type CustomActionProps = LinkActionsProps;
 export declare function ReferenceEditor<T>(props: ReferenceEditorProps & {

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

@@ -35,4 +35,5 @@ export type CustomEntityCardProps = {
     releaseStatusMap?: ReleaseStatusMap;
     releaseAction?: ReleaseAction;
     release?: ReleaseV2Props;
+    onAddToRelease?: () => void;
 } & Partial<WrappedAssetCardProps>;

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

@@ -1,9 +1,5 @@
-import * as React from 'react';
-import { QueryClient, useQuery as useRQ } from '@tanstack/react-query';
-export declare function useQueryClient(): QueryClient;
-export declare const useQuery: typeof useRQ;
 /**
- * Provides access to a query client either by sharing an existing client or
- * creating a new one.
+ * Re-export query client utilities from shared package.
+ * This maintains backwards compatibility while using the shared implementation.
  */
-export declare function SharedQueryClientProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
+export { SharedQueryClientProvider, useQueryClient, useQuery, } from '@contentful/field-editor-shared';

package/dist/types/entries/WrappedEntryCard/FetchingWrappedEntryCard.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RenderCustomMissingEntityCard } from '../../common/customCardTypes';
 import { ReferenceEditorProps } from '../../common/ReferenceEditor';
-import { ContentType, RenderDragFn } from '../../types';
+import { ContentType, Entry, RenderDragFn } from '../../types';
 export type EntryCardReferenceEditorProps = ReferenceEditorProps & {
     entryId: string;
     index?: number;
@@ -17,5 +17,9 @@ export type EntryCardReferenceEditorProps = ReferenceEditorProps & {
     activeLocales?: {
         code: string;
     }[];
+    addReferenceToRelease?: (reference: Entry, localeCode?: string, options?: {
+        openModalForVersionSelection?: boolean;
+        skipNestedReferencesPrompt?: boolean;
+    }) => Promise<void>;
 };
 export declare function FetchingWrappedEntryCard(props: EntryCardReferenceEditorProps): React.JSX.Element;

package/dist/types/entries/WrappedEntryCard/WrappedEntryCard.d.ts

@@ -31,8 +31,9 @@ export interface WrappedEntryCardProps {
     releaseEntityStatus?: ReleaseEntityStatus;
     releaseStatusMap?: ReleaseStatusMap;
     release?: ReleaseV2Props;
+    onAddToRelease?: () => void;
 }
-export declare function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales, localeCode, defaultLocaleCode, localesStatusMap, useLocalizedEntityStatus, size, spaceName, isClickable, isDisabled, isSelected, hasCardMoveActions, hasCardEditActions, hasCardRemoveActions, renderDragHandle, getAsset, getEntityScheduledActions, onClick, onEdit, onRemove, onMoveTop, onMoveBottom, releaseEntityStatus, releaseStatusMap, release, }: WrappedEntryCardProps): React.JSX.Element;
+export declare function WrappedEntryCard({ entry, entryUrl, contentType, activeLocales, localeCode, defaultLocaleCode, localesStatusMap, useLocalizedEntityStatus, size, spaceName, isClickable, isDisabled, isSelected, hasCardMoveActions, hasCardEditActions, hasCardRemoveActions, renderDragHandle, getAsset, getEntityScheduledActions, onClick, onEdit, onRemove, onMoveTop, onMoveBottom, releaseEntityStatus, releaseStatusMap, release, onAddToRelease, }: WrappedEntryCardProps): React.JSX.Element;
 export declare namespace WrappedEntryCard {
     var defaultProps: {
         isClickable: boolean;

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

@@ -5,6 +5,7 @@ type ResourceCardProps = {
     index?: number;
     resourceLink?: ResourceLink<string>;
     locale?: string;
+    referencingEntryId?: string;
     isDisabled: boolean;
     renderDragHandle?: RenderDragFn;
     getEntryRouteHref: (entryRoute: EntryRoute) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-reference",
-  "version": "6.18.0",
+  "version": "6.19.1-canary.18+487fa527",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -39,14 +39,14 @@
     "@contentful/f36-components": "^5.8.1",
     "@contentful/f36-icons": "^5.8.1",
     "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/field-editor-shared": "^2.17.0",
+    "@contentful/field-editor-shared": "^2.17.1-canary.52+487fa527",
     "@contentful/mimetype": "^2.2.29",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-query": "^4.3.9",
     "constate": "^3.3.2",
-    "contentful-management": "^11.45.1",
+    "contentful-management": "^11.66.0",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "moment": "^2.20.0",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@contentful/app-sdk": "^4.42.0",
-    "@contentful/field-editor-test-utils": "^1.7.0",
+    "@contentful/field-editor-test-utils": "^1.7.1-canary.66+487fa527",
     "@lingui/core": "5.3.0",
     "@testing-library/react-hooks": "^8.0.1"
   },
@@ -68,5 +68,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "b25d0af70c82c9e29505335ce636f2e32e6cb927"
+  "gitHead": "487fa527bb8a5afe1cc24547708876ea8e435ef0"
 }