Pass locale property to resource dialog and fetch method

packages/reference/src/common/EntityStore.tsx

@@ -60,11 +60,11 @@ type UseEntityOptions = GetEntityOptions & { enabled?: boolean };
 
 type QueryEntityResult<E> = Promise<E>;
 
-type GetResourceOptions = GetOptions & { allowExternal?: boolean };
+type GetResourceOptions = GetOptions & { allowExternal?: boolean; locale?: string };
 
 type QueryResourceResult<R extends Resource = Resource> = QueryEntityResult<ResourceInfo<R>>;
 
-type UseResourceOptions = GetResourceOptions & { enabled?: boolean };
+type UseResourceOptions = GetResourceOptions & { enabled?: boolean; locale?: string };
 
 // all types of the union share the data property to ease destructuring downstream
 type UseEntityResult<E> =
@@ -188,7 +188,12 @@ const isEntityQueryKey = (queryKey: QueryKey): queryKey is EntityQueryKey => {
   );
 };
 
-type ResourceQueryKey = [ident: 'Resource', resourceType: string, urn: string];
+type ResourceQueryKey = [
+  ident: 'Resource',
+  resourceType: string,
+  urn: string,
+  locale: string | undefined
+];
 
 async function fetchContentfulEntry({
   urn,
@@ -262,9 +267,13 @@ async function fetchExternalResource({
   spaceId,
   environmentId,
   resourceType,
-}: FetchParams & { spaceId: string; environmentId: string; resourceType: string }): Promise<
-  ResourceInfo<ExternalResource>
-> {
+  locale,
+}: FetchParams & {
+  spaceId: string;
+  environmentId: string;
+  resourceType: string;
+  locale?: string;
+}): Promise<ResourceInfo<ExternalResource>> {
   let resourceFetchError: unknown;
   const [resource, resourceTypes] = await Promise.all([
     fetch(
@@ -275,7 +284,7 @@ async function fetchExternalResource({
             spaceId,
             environmentId,
             resourceTypeId: resourceType,
-            query: { 'sys.urn[in]': urn },
+            query: { 'sys.urn[in]': urn, locale },
           })
           .then(({ items }) => {
             return items[0] ?? null;
@@ -452,7 +461,7 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons
         urn: string,
         options?: GetResourceOptions
       ): QueryResourceResult<R> {
-        const queryKey: ResourceQueryKey = ['Resource', resourceType, urn];
+        const queryKey: ResourceQueryKey = ['Resource', resourceType, urn, locale];
         return fetch(
           queryKey,
           (): Promise<ResourceInfo> => {
@@ -471,6 +480,7 @@ const [InternalServiceProvider, useFetch, useEntityLoader, useCurrentIds] = cons
             return fetchExternalResource({
               fetch,
               urn,
+              locale: options?.locale,
               options,
               resourceType,
               spaceId: currentSpaceId,
@@ -629,13 +639,16 @@ export function useEntity<E extends FetchableEntity>(
 export function useResource<R extends Resource = Resource>(
   resourceType: string,
   urn: string,
-  options?: UseResourceOptions
+  { locale, ...options }: UseResourceOptions = {}
 ) {
-  const queryKey: ResourceQueryKey = ['Resource', resourceType, urn];
+  if (resourceType.startsWith('Contentful:')) {
+    locale = undefined;
+  }
+  const queryKey: ResourceQueryKey = ['Resource', resourceType, urn, locale];
   const { getResource } = useEntityLoader();
   const { status, data, error } = useQuery(
     queryKey,
-    () => getResource<R>(resourceType, urn, options),
+    () => getResource<R>(resourceType, urn, { ...options, locale }),
     {
       enabled: options?.enabled,
     }

packages/reference/src/resources/Cards/ResourceCard.tsx

@@ -13,6 +13,7 @@ import { ExternalEntryCard } from './ExternalEntryCard';
 type ResourceCardProps = {
   index?: number;
   resourceLink?: ResourceLink<string>;
+  locale?: string;
   isDisabled: boolean;
   renderDragHandle?: RenderDragFn;
   getEntryRouteHref: (entryRoute: EntryRoute) => string;
@@ -27,8 +28,9 @@ function ExistingResourceCard(
     inView: boolean;
   }
 ) {
-  const { resourceLink, inView, index = 0 } = props;
+  const { resourceLink, inView, index = 0, locale } = props;
   const resourceOptions = {
+    locale,
     priority: index * -1,
     enabled: inView,
     allowExternal: true,

packages/reference/src/resources/SingleResourceReferenceEditor.tsx

@@ -33,6 +33,7 @@ export function SingleResourceReferenceEditor(
             <ResourceCard
               onRemove={() => props.sdk.field.removeValue()}
               resourceLink={value}
+              locale={props.sdk.field.locale}
               isDisabled={disabled}
               getEntryRouteHref={props.getEntryRouteHref}
             />

packages/reference/src/resources/useResourceLinkActions.ts

@@ -46,20 +46,22 @@ export function useResourceLinkActions({
           await dialogs.selectMultipleResourceEntities({
             // @ts-expect-error wait for update of app-sdk version
             allowedResources: field.allowedResources,
+            locale: field.locale,
           })
       : async (): Promise<[ResourceLink<'Contentful:Entry'> | null]> => [
           // @ts-expect-error wait for update of app-sdk version
           await dialogs.selectSingleResourceEntity({
             // @ts-expect-error wait for update of app-sdk version
             allowedResources: field.allowedResources,
+            locale: field.locale,
           }),
         ];
 
     return async () => {
       onLinkedExisting(await promptSelection());
     };
     // @ts-expect-error wait for update of app-sdk version
-  }, [dialogs, field.allowedResources, multiple, onLinkedExisting]);
+  }, [dialogs, field.allowedResources, field.locale, multiple, onLinkedExisting]);
 
   const { canLinkEntity } = useEditorPermissions({
     entityType: 'Entry',

packages/rich-text/src/helpers/config.ts

@@ -53,5 +53,6 @@ function getEntityTypeFromRichTextNode(nodeType): 'Entry' | 'Asset' | never {
 export const newResourceEntitySelectorConfigFromRichTextField = (field, nodeType) => {
   return {
     allowedResources: getAllowedResourcesForNodeType(field, nodeType),
+    locale: field.locale,
   };
 };

packages/rich-text/src/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.tsx

@@ -21,8 +21,10 @@ interface FetchingWrappedResourceInlineCardProps {
 }
 
 export function FetchingWrappedResourceInlineCard(props: FetchingWrappedResourceInlineCardProps) {
-  const { link, onEntityFetchComplete } = props;
-  const { data, status: requestStatus } = useResource(link.linkType, link.urn);
+  const { link, onEntityFetchComplete, sdk } = props;
+  const { data, status: requestStatus } = useResource(link.linkType, link.urn, {
+    locale: sdk.field.locale,
+  });
 
   React.useEffect(() => {
     if (requestStatus === 'success') {

packages/rich-text/src/plugins/Hyperlink/HyperlinkModal.tsx

@@ -143,6 +143,7 @@ export function HyperlinkModal(props: HyperlinkModalProps) {
   async function selectResourceEntry() {
     const options = {
       allowedResources: getAllowedResourcesForNodeType(props.sdk.field, INLINES.RESOURCE_HYPERLINK),
+      locale: props.sdk.field.locale,
     };
     // @ts-expect-error wait for update of app-sdk version
     const entityLink = await props.sdk.dialogs.selectSingleResourceEntity(options);
@@ -195,7 +196,8 @@ export function HyperlinkModal(props: HyperlinkModalProps) {
                     setLinkType(event.target.value)
                   }
                   testId="link-type-input"
-                  isDisabled={props.readonly}>
+                  isDisabled={props.readonly}
+                >
                   {enabledLinkTypes.map((nodeType) => (
                     <Select.Option key={nodeType} value={nodeType}>
                       {LINK_TYPE_SELECTION_VALUES[nodeType]}
@@ -237,7 +239,8 @@ export function HyperlinkModal(props: HyperlinkModalProps) {
                       <TextLink
                         testId="entity-selection-link"
                         onClick={resetLinkEntity}
-                        className={styles.removeSelectionLabel}>
+                        className={styles.removeSelectionLabel}
+                      >
                         Remove selection
                       </TextLink>
                     )}
@@ -299,7 +302,8 @@ export function HyperlinkModal(props: HyperlinkModalProps) {
             onClick={() => props.onClose(null)}
             variant="secondary"
             testId="cancel-cta"
-            size="small">
+            size="small"
+          >
             Cancel
           </Button>
           <Button
@@ -308,7 +312,8 @@ export function HyperlinkModal(props: HyperlinkModalProps) {
             size="small"
             isDisabled={props.readonly || !isLinkComplete()}
             onClick={handleOnSubmit}
-            testId="confirm-cta">
+            testId="confirm-cta"
+          >
             {props.linkType ? 'Update' : 'Insert'}
           </Button>
         </ModalControls>

packages/rich-text/src/plugins/shared/FetchingWrappedResourceCard.tsx

@@ -61,8 +61,10 @@ interface FetchingWrappedResourceCardProps {
 }
 
 export const FetchingWrappedResourceCard = (props: FetchingWrappedResourceCardProps) => {
-  const { link, onEntityFetchComplete } = props;
-  const { data, status, error } = useResource(link.linkType, link.urn);
+  const { link, onEntityFetchComplete, sdk } = props;
+  const { data, status, error } = useResource(link.linkType, link.urn, {
+    locale: sdk.field.locale,
+  });
 
   React.useEffect(() => {
     if (status === 'success') {