Copy field value from source to target locales

Author: joaquincasal

apps/field-populator/package.json

@@ -20,6 +20,7 @@
     "start": "vite",
     "build": "tsc && vite build",
     "test": "vitest",
+    "test:ci": "vitest run",
     "create-app-definition": "contentful-app-scripts create-app-definition",
     "add-locations": "contentful-app-scripts add-locations",
     "upload": "contentful-app-scripts upload --bundle-dir ./build",

apps/field-populator/src/locations/Dialog.tsx

@@ -28,9 +28,10 @@ const Dialog = () => {
       return;
     }
 
-    // todo : copy and paste logic to populate fields
-
-    sdk.close();
+    sdk.close({
+      sourceLocale: selectedSourceLocale,
+      targetLocales: selectedTargetLocales.map((locale) => locale.code),
+    });
   };
 
   return (

apps/field-populator/src/locations/Sidebar.tsx

@@ -9,11 +9,28 @@ const Sidebar = () => {
   useAutoResizer();
 
   const openDialog = async () => {
-    return sdk.dialogs.openCurrentApp({
+    const result = await sdk.dialogs.openCurrentApp({
       title: APP_NAME,
       width: 'large',
       minHeight: '340px',
     });
+    if (!result) {
+      return;
+    }
+    const { sourceLocale, targetLocales } = result as {
+      sourceLocale: string;
+      targetLocales: string[];
+    };
+    updateFields(sourceLocale, targetLocales);
+  };
+
+  const updateFields = (sourceLocale: string, targetLocales: string[]) => {
+    for (const fieldId of Object.keys(sdk.entry.fields)) {
+      const newValue = sdk.entry.fields[fieldId].getValue(sourceLocale);
+      for (const targetLocale of targetLocales) {
+        sdk.entry.fields[fieldId].setValue(newValue, targetLocale);
+      }
+    }
   };
 
   return (

apps/field-populator/test/Dialog.spec.tsx

@@ -1,12 +1,11 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { mockCma, mockSdk } from './mocks';
+import { mockSdk } from './mocks';
 import Dialog from '../src/locations/Dialog';
 
 vi.mock('@contentful/react-apps-toolkit', () => ({
   useSDK: () => mockSdk,
-  useCMA: () => mockCma,
   useAutoResizer: () => {},
 }));
 

apps/field-populator/test/Sidebar.spec.tsx

@@ -1,13 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { mockCma, mockSdk } from './mocks';
+import { mockSdk } from './mocks';
 import Sidebar from '../src/locations/Sidebar';
 import userEvent from '@testing-library/user-event';
 import { APP_NAME } from '../src/utils/consts';
 
 vi.mock('@contentful/react-apps-toolkit', () => ({
   useSDK: () => mockSdk,
-  useCMA: () => mockCma,
   useAutoResizer: () => {},
 }));
 
@@ -33,4 +32,39 @@ describe('Sidebar component', () => {
 
     expect(mockSdk.dialogs.openCurrentApp).toHaveBeenCalledOnce();
   });
+
+  it('should copy field values from source locale to target locales', async () => {
+    const user = userEvent.setup();
+    const titleGetValue = vi.fn().mockReturnValue('Hello');
+    const titleSetValue = vi.fn();
+    const bodyGetValue = vi.fn().mockReturnValue('World');
+    const bodySetValue = vi.fn();
+
+    mockSdk.entry = {
+      fields: {
+        title: {
+          getValue: titleGetValue,
+          setValue: titleSetValue,
+        },
+        body: {
+          getValue: bodyGetValue,
+          setValue: bodySetValue,
+        },
+      },
+    };
+
+    mockSdk.dialogs.openCurrentApp.mockResolvedValue({
+      sourceLocale: 'en-US',
+      targetLocales: ['de', 'fr'],
+    });
+
+    render(<Sidebar />);
+
+    await user.click(screen.getByRole('button', { name: APP_NAME }));
+
+    expect(titleSetValue).toHaveBeenCalledWith('Hello', 'de');
+    expect(titleSetValue).toHaveBeenCalledWith('Hello', 'fr');
+    expect(bodySetValue).toHaveBeenCalledWith('World', 'de');
+    expect(bodySetValue).toHaveBeenCalledWith('World', 'fr');
+  });
 });