Merge branch 'master' into google-docs-document-outline

Author: harikakondur

apps/google-docs/src/locations/Page/Page.tsx

@@ -54,7 +54,11 @@ const Page = () => {
     <>
       <Layout withBoxShadow={true} offsetTop={10}>
         {previewPayload ? (
-          <PreviewPageView payload={previewPayload} onLeavePreview={handleReturnToMainPage} />
+          <PreviewPageView
+            payload={previewPayload}
+            oauthToken={oauthToken}
+            onLeavePreview={handleReturnToMainPage}
+          />
         ) : (
           <MainPageView
             oauthToken={oauthToken}

apps/google-docs/src/locations/Page/components/mainpage/MainPageView.tsx

@@ -60,7 +60,7 @@ export const MainPageView = ({
             <Flex flexDirection="column" alignItems="flex-start">
               <Heading marginBottom="spacingS">Select your file</Heading>
               <Paragraph>
-                Create entries using existing content types from a Drive Integration file.
+                Create entries using existing content types from a Google Drive file.
                 <br />
                 Get started by selecting the file you would like to use.
               </Paragraph>

apps/google-docs/src/locations/Page/components/mainpage/PreviewPageView.tsx

@@ -12,10 +12,11 @@ import { PageAppSDK } from '@contentful/app-sdk';
 
 interface PreviewPageViewProps {
   payload: PreviewPayload;
+  oauthToken: string;
   onLeavePreview: () => void;
 }
 
-export const PreviewPageView = ({ payload, onLeavePreview }: PreviewPageViewProps) => {
+export const PreviewPageView = ({ payload, oauthToken, onLeavePreview }: PreviewPageViewProps) => {
   const sdk = useSDK<PageAppSDK>();
   const [isConfirmCancelModalOpen, setIsConfirmCancelModalOpen] = useState(false);
   const fixture = loadGoogleDocsReviewFixture();
@@ -47,6 +48,8 @@ export const PreviewPageView = ({ payload, onLeavePreview }: PreviewPageViewProp
           <OverviewSection
             sdk={sdk}
             payload={payload || fixture}
+            payload={payload}
+            oauthToken={oauthToken}
             onReturnToMainPage={onLeavePreview}
           />
           <Heading as="h2" marginBottom="none">

apps/google-docs/src/locations/Page/components/overview/OverviewSection.tsx

@@ -18,10 +18,16 @@ import { SummaryModal } from '../modals/SummaryModal';
 interface OverviewSectionProps {
   sdk: PageAppSDK;
   payload: PreviewPayload;
+  oauthToken: string;
   onReturnToMainPage: () => void;
 }
 
-const OverviewSection = ({ sdk, payload, onReturnToMainPage }: OverviewSectionProps) => {
+const OverviewSection = ({
+  sdk,
+  payload,
+  oauthToken,
+  onReturnToMainPage,
+}: OverviewSectionProps) => {
   const [contentTypeDisplayInfoMap, setContentTypeDisplayInfoMap] = useState<
     ContentTypeDisplayInfoMap | undefined
   >();
@@ -77,7 +83,12 @@ const OverviewSection = ({ sdk, payload, onReturnToMainPage }: OverviewSectionPr
     }
     setIsCreating(true);
     try {
-      const result = await createEntriesFromPreviewPayload(sdk, payload, selectedEntryTempIds);
+      const result = await createEntriesFromPreviewPayload(
+        sdk,
+        payload,
+        selectedEntryTempIds,
+        oauthToken
+      );
       if (result.errors.length > 0) {
         sdk.notifier.error('Failed to create entries');
       } else {

apps/google-docs/src/services/entryService.ts

@@ -20,51 +20,89 @@ export interface EntryCreationResult {
   }>;
 }
 
-async function createAssetFromUrlFast(
+interface AssetFileInput {
+  fileName: string;
+  contentType: string;
+  upload?: string;
+  uploadFrom?: Record<string, unknown>;
+}
+
+async function createAssetFromUrl(
   cma: PageAppSDK['cma'] | ConfigAppSDK['cma'],
   spaceId: string,
   environmentId: string,
   url: string,
   defaultLocale: string,
-  metadata?: { title?: string; altText?: string; fileName?: string; contentType?: string }
+  metadata?: { title?: string; altText?: string; fileName?: string; contentType?: string },
+  oauthToken?: string
 ) {
   const fileName = metadata?.fileName || 'image.jpg';
   const contentType = metadata?.contentType || 'image/jpeg';
   const title = metadata?.title || metadata?.altText || 'Image';
 
+  let fileField: AssetFileInput;
+
+  if (oauthToken) {
+    // Google content URLs are signed (the ?key= param is the credential) so no
+    // Authorization header is needed or permitted cross-origin. Fetch the binary
+    // directly here in the browser so Contentful's servers don't have to reach an
+    // expiring signed URL, then upload the bytes via the CMA upload endpoint.
+    const imageResponse = await fetch(url);
+    if (!imageResponse.ok) {
+      throw new Error(`Failed to fetch image (HTTP ${imageResponse.status})`);
+    }
+    const arrayBuffer = await imageResponse.arrayBuffer();
+    const upload = await cma.upload.create({ spaceId, environmentId }, { file: arrayBuffer });
+    fileField = {
+      contentType,
+      fileName,
+      uploadFrom: { sys: { type: 'Link', linkType: 'Upload', id: upload.sys.id } },
+    };
+  } else {
+    fileField = { contentType, fileName, upload: url };
+  }
+
   const asset = await cma.asset.create(
     { spaceId, environmentId },
     {
       fields: {
         title: { [defaultLocale]: title },
-        file: {
-          [defaultLocale]: {
-            contentType,
-            fileName,
-            upload: url,
-          },
-        },
+        file: { [defaultLocale]: fileField },
       },
     }
   );
 
-  try {
-    await cma.asset.processForAllLocales({ spaceId, environmentId }, asset);
-  } catch (error) {
-    console.error(`Failed to process asset for URL: ${url}`, error);
-  }
+  await cma.asset.processForAllLocales({ spaceId, environmentId }, asset);
 
   return asset;
 }
 
-async function transformFieldsForContentType(
+function resolveAssetPlaceholder(value: unknown, urlToAssetId: Record<string, string>): unknown {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return value;
+  const v = value as Record<string, unknown>;
+  const sys = v.sys;
+  if (sys === null || typeof sys !== 'object' || Array.isArray(sys)) return value;
+  const s = sys as Record<string, unknown>;
+  if (s.type !== 'Link' || s.linkType !== 'Asset' || typeof s.id !== 'string') return value;
+  const resolvedId = urlToAssetId[s.id];
+  if (!resolvedId) {
+    // Placeholder not found — asset creation likely failed. Return undefined so
+    // the caller can omit this field rather than writing a dangling reference.
+    console.warn('[asset] unresolved asset placeholder:', s.id);
+    return undefined;
+  }
+  return { sys: { type: 'Link', linkType: 'Asset', id: resolvedId } };
+}
+
+function transformFieldsForContentType(
   fields: Record<string, Record<string, unknown>>,
   contentType: ContentTypeProps | undefined,
   urlToAssetId?: Record<string, string>
 ) {
   if (!contentType) return fields;
 
   const fieldDefs = new Map(contentType.fields.map((f) => [f.id, f]));
+  const assetMap = urlToAssetId && Object.keys(urlToAssetId).length > 0 ? urlToAssetId : undefined;
   const transformed: Record<string, Record<string, unknown>> = {};
 
   for (const [fieldId, localizedValue] of Object.entries(fields)) {
@@ -77,9 +115,24 @@ async function transformFieldsForContentType(
     const perLocale: Record<string, unknown> = {};
     for (const [locale, value] of Object.entries(localizedValue)) {
       if (def.type === 'RichText') {
-        const assetMap =
-          urlToAssetId && Object.keys(urlToAssetId).length > 0 ? urlToAssetId : undefined;
         perLocale[locale] = normalizeAgentRichTextJson(value, assetMap);
+      } else if (assetMap && def.type === 'Link' && def.linkType === 'Asset') {
+        const resolved = resolveAssetPlaceholder(value, assetMap);
+        if (resolved !== undefined) {
+          perLocale[locale] = resolved;
+        }
+      } else if (
+        assetMap &&
+        def.type === 'Array' &&
+        def.items?.linkType === 'Asset' &&
+        Array.isArray(value)
+      ) {
+        const resolved = value
+          .map((item) => resolveAssetPlaceholder(item, assetMap))
+          .filter((item): item is NonNullable<typeof item> => item !== undefined);
+        if (resolved.length > 0) {
+          perLocale[locale] = resolved;
+        }
       } else {
         perLocale[locale] = value;
       }
@@ -96,7 +149,8 @@ async function createAssetsFromAgentOutput(
   spaceId: string,
   environmentId: string,
   defaultLocale: string,
-  assets: AssetToCreate[]
+  assets: AssetToCreate[],
+  oauthToken?: string
 ): Promise<Record<string, string>> {
   const urlToAssetId: Record<string, string> = {};
 
@@ -106,7 +160,7 @@ async function createAssetsFromAgentOutput(
 
   const assetCreationPromises = assets.map(async (asset) => {
     try {
-      const createdAsset = await createAssetFromUrlFast(
+      const createdAsset = await createAssetFromUrl(
         cma,
         spaceId,
         environmentId,
@@ -117,7 +171,8 @@ async function createAssetsFromAgentOutput(
           altText: asset.altText,
           fileName: asset.fileName,
           contentType: asset.contentType,
-        }
+        },
+        oauthToken
       );
 
       const normalizedUrl = asset.url.replace(/\s+/g, '');
@@ -141,12 +196,19 @@ async function createAssetsFromAgentOutput(
     if (!result) continue;
 
     const { normalizedUrl, altText, assetId } = result;
+    const rawUrl = assets[i]?.url;
     const placeholderId = assets[i]?.placeholderId;
 
     if (placeholderId) {
       urlToAssetId[placeholderId] = assetId;
     }
 
+    // Store both the raw URL and the whitespace-normalised form so the lookup
+    // in resolveAssetPlaceholder succeeds regardless of how the agent encoded
+    // the URL in the entry field.
+    if (rawUrl && rawUrl !== normalizedUrl) {
+      urlToAssetId[rawUrl] = assetId;
+    }
     urlToAssetId[normalizedUrl] = assetId;
 
     const compositeKey = `${normalizedUrl}::${altText || 'image'}`;
@@ -163,7 +225,8 @@ async function createAssetsFromAgentOutput(
 export async function createEntriesFromPreviewPayload(
   sdk: PageAppSDK | ConfigAppSDK,
   payload: PreviewPayload,
-  selectedEntryTempIds?: Set<string>
+  selectedEntryTempIds?: Set<string>,
+  oauthToken?: string
 ): Promise<EntryCreationResult> {
   const effectivePayload =
     selectedEntryTempIds !== undefined
@@ -184,20 +247,23 @@ export async function createEntriesFromPreviewPayload(
     sdk,
     entriesForSpaceLocale,
     contentTypeIds,
-    effectivePayload.assets
+    effectivePayload.assets,
+    oauthToken
   );
 }
 
 /**
  * Creates entries in two passes: without reference fields, then patches references
- * (including Rich Text entry links). Assets from `assets` are created first; Rich Text
- * asset placeholders use the resulting id map in both passes.
+ * (including Rich Text entry links). Assets are created first; the resulting
+ * placeholder→id map is used to resolve asset references in RichText fields,
+ * standalone Media fields, and arrays of Media fields across both passes.
  */
 export async function createEntriesFromPreview(
   sdk: PageAppSDK | ConfigAppSDK,
   entries: EntryToCreate[],
   contentTypeIds: string[],
-  assets: AssetToCreate[] = []
+  assets: AssetToCreate[] = [],
+  oauthToken?: string
 ): Promise<EntryCreationResult> {
   const spaceId = sdk.ids.space;
   const environmentId = sdk.ids.environment;
@@ -236,7 +302,8 @@ export async function createEntriesFromPreview(
     spaceId,
     environmentId,
     defaultLocale,
-    assets
+    assets,
+    oauthToken
   );
 
   // PASS 1: Create all entries WITHOUT reference fields

apps/mux/frontend/src/index.test.tsx

@@ -19,6 +19,11 @@ vi.mock('contentful-management', () => ({
   })),
 }));
 
+// Mock MuxPlayer to avoid Web Component errors in jsdom
+vi.mock('@mux/mux-player-react', () => ({
+  default: vi.fn(() => null),
+}));
+
 // Mock the API client
 vi.mock('./util/apiClient', () => ({
   default: vi.fn().mockImplementation(() => ({