contentful
diff --git a/‎apps/bulk-edit/package-lock.json‎
Lines changed: 11638 additions & 185 deletions b/‎apps/bulk-edit/package-lock.json‎
Lines changed: 11638 additions & 185 deletions
diff --git a/‎apps/bulk-edit/package.json‎
Lines changed: 12 additions & 1 deletion b/‎apps/bulk-edit/package.json‎
Lines changed: 12 additions & 1 deletion
diff --git a/‎apps/bulk-edit/src/App.tsx‎
Lines changed: 12 additions & 1 deletion b/‎apps/bulk-edit/src/App.tsx‎
Lines changed: 12 additions & 1 deletion
diff --git a/‎apps/bulk-edit/src/locations/Page/components/BulkEditModal.tsx‎
Lines changed: 34 additions & 42 deletions b/‎apps/bulk-edit/src/locations/Page/components/BulkEditModal.tsx‎
Lines changed: 34 additions & 42 deletions
diff --git a/‎apps/bulk-edit/src/locations/Page/components/EntryTable.tsx‎
Lines changed: 5 additions & 5 deletions b/‎apps/bulk-edit/src/locations/Page/components/EntryTable.tsx‎
Lines changed: 5 additions & 5 deletions
diff --git a/‎apps/bulk-edit/src/locations/Page/components/FieldEditor.tsx‎
Lines changed: 112 additions & 0 deletions b/‎apps/bulk-edit/src/locations/Page/components/FieldEditor.tsx‎
Lines changed: 112 additions & 0 deletions
diff --git a/‎apps/bulk-edit/src/locations/Page/components/FieldValidation.tsx‎
Lines changed: 52 additions & 0 deletions b/‎apps/bulk-edit/src/locations/Page/components/FieldValidation.tsx‎
Lines changed: 52 additions & 0 deletions
diff --git a/‎apps/bulk-edit/src/locations/Page/components/SearchBar.tsx‎
Lines changed: 2 additions & 2 deletions b/‎apps/bulk-edit/src/locations/Page/components/SearchBar.tsx‎
Lines changed: 2 additions & 2 deletions
@@ -5,10 +5,21 @@
   "dependencies": {
     "@contentful/app-sdk": "^4.29.1",
     "@contentful/f36-components": "4.79.1",
+    "@contentful/f36-icons": "^5.6.0",
     "@contentful/f36-multiselect": "^4.81.1",
     "@contentful/f36-navlist": "^4.1.0-alpha.1",
     "@contentful/f36-tokens": "4.2.0",
-    "@contentful/field-editor-json": "^3.3.38",
+    "@contentful/field-editor-boolean": "^1.7.16",
+    "@contentful/field-editor-checkbox": "^1.7.0",
+    "@contentful/field-editor-date": "^1.9.16",
+    "@contentful/field-editor-dropdown": "^1.8.19",
+    "@contentful/field-editor-json": "^3.5.16",
+    "@contentful/field-editor-list": "^1.7.0",
+    "@contentful/field-editor-multiple-line": "^1.3.9",
+    "@contentful/field-editor-number": "^1.5.16",
+    "@contentful/field-editor-radio": "^1.8.0",
+    "@contentful/field-editor-single-line": "^1.3.9",
+    "@contentful/field-editor-tags": "^1.7.16",
     "@contentful/react-apps-toolkit": "1.2.16",
     "@contentful/rich-text-html-renderer": "^17.1.0",
     "@phosphor-icons/react": "^2.1.10",
 
@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { locations, AppExtensionSDK } from '@contentful/app-sdk';
 import Page from './locations/Page';
 import { useSDK } from '@contentful/react-apps-toolkit';
+import { i18n } from '@lingui/core';
 
 const ComponentLocationSettings = {
   [locations.LOCATION_PAGE]: Page,
@@ -10,6 +11,16 @@ const ComponentLocationSettings = {
 const App = () => {
   const sdk = useSDK<AppExtensionSDK>();
 
+  // Initialize Lingui i18n for field editors that require it
+  useEffect(() => {
+    const defaultLocale = sdk.locales.default;
+    if (!i18n.locale) {
+      // Initialize with a default locale - field editors will use their own locales
+      i18n.load(defaultLocale, {});
+      i18n.activate(defaultLocale);
+    }
+  }, []);
+
   const Component = useMemo(() => {
     for (const [location, component] of Object.entries(ComponentLocationSettings)) {
       if (sdk.location.is(location)) {
 
@@ -1,24 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import {
-  Modal,
-  Button,
-  TextInput,
-  Text,
-  Flex,
-  FormControl,
-  Note,
-} from '@contentful/f36-components';
-import type { Entry, ContentTypeField } from '../types';
-import { getEntryFieldValue, truncate } from '../utils/entryUtils';
+import { Button, Flex, FormControl, Modal, Note, Text } from '@contentful/f36-components';
+import type { ContentTypeField, Entry } from '../types';
+import { getEntryFieldValue, getFieldDisplayValue } from '../utils/entryUtils';
 import { ClockIcon } from '@contentful/f36-icons';
+import { FieldEditor } from './FieldEditor';
+import { FieldValidation } from './FieldValidation';
+import type { LocalesAPI } from '@contentful/field-editor-shared';
 
 interface BulkEditModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSave: (newValue: string | number) => void;
   selectedEntries: Entry[];
   selectedField: ContentTypeField | null;
-  defaultLocale: string;
+  locales: LocalesAPI;
   isSaving: boolean;
   totalUpdateCount: number;
   editionCount: number;
@@ -30,25 +25,24 @@ export const BulkEditModal: React.FC<BulkEditModalProps> = ({
   onSave,
   selectedEntries,
   selectedField,
-  defaultLocale,
+  locales,
   isSaving,
   totalUpdateCount,
   editionCount,
 }) => {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState<any>('');
+  const [hasValidationErrors, setHasValidationErrors] = useState(false);
   const entryCount = selectedEntries.length;
   const firstEntry = selectedEntries[0];
   const firstValueToUpdate =
-    firstEntry && selectedField && defaultLocale
-      ? getEntryFieldValue(firstEntry, selectedField, defaultLocale)
+    firstEntry && selectedField && locales.default
+      ? getEntryFieldValue(firstEntry, selectedField, locales.default)
       : '';
   const title = entryCount === 1 ? 'Edit' : 'Bulk edit';
 
-  const isNumber = selectedField?.type === 'Number' || selectedField?.type === 'Integer';
-  const isInvalid = selectedField?.type === 'Integer' && !Number.isInteger(Number(value));
-
   useEffect(() => {
     setValue('');
+    setHasValidationErrors(false);
   }, [isOpen]);
 
   return (
@@ -66,26 +60,28 @@ export const BulkEditModal: React.FC<BulkEditModalProps> = ({
           </Text>
           <Flex>
             <Text>
-              <Text fontWeight="fontWeightDemiBold">{truncate(firstValueToUpdate, 100)}</Text>{' '}
+              <Text fontWeight="fontWeightDemiBold">
+                {getFieldDisplayValue(selectedField, firstValueToUpdate, 30)}
+              </Text>{' '}
               {entryCount === 1 ? 'selected' : `selected and ${entryCount - 1} more`}
             </Text>
           </Flex>
-          <FormControl isInvalid={isInvalid}>
-            <TextInput
-              name="bulk-edit-value"
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              placeholder="Enter your new value"
-              type={isNumber ? 'number' : 'text'}
-              isInvalid={isInvalid}
-              autoFocus
-            />
-            {isInvalid && (
-              <FormControl.ValidationMessage>
-                Integer field does not allow decimal
-              </FormControl.ValidationMessage>
-            )}
-          </FormControl>
+          {selectedField && (
+            <>
+              <FieldEditor
+                field={selectedField}
+                value={value}
+                onChange={setValue}
+                locales={locales}
+                datatest-id="field-editor"
+              />
+              <FieldValidation
+                field={selectedField}
+                value={value}
+                onValidationChange={setHasValidationErrors}
+              />
+            </>
+          )}
         </Flex>
         {totalUpdateCount > 0 && isSaving && (
           <Note title="Updating entries" variant="neutral" icon={<ClockIcon variant="muted" />}>
@@ -103,12 +99,8 @@ export const BulkEditModal: React.FC<BulkEditModalProps> = ({
         </Button>
         <Button
           variant="primary"
-          onClick={() => {
-            if (isInvalid) return;
-            const finalValue = isNumber ? Number(value) : value;
-            onSave(finalValue);
-          }}
-          isDisabled={!value || isInvalid}
+          onClick={() => onSave(value)}
+          isDisabled={hasValidationErrors || isSaving}
           testId="bulk-edit-save"
           isLoading={isSaving}>
           Save
 
@@ -1,20 +1,20 @@
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
-import { Table, Box, Pagination } from '@contentful/f36-components';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Pagination, Table } from '@contentful/f36-components';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Entry, ContentTypeField } from '../types';
+import { ContentTypeField, Entry } from '../types';
 import { ContentTypeProps } from 'contentful-management';
 import { styles } from '../styles';
 import { TableHeader } from './TableHeader';
 import { TableRow } from './TableRow';
-import { isCheckboxAllowed as isBulkEditable, getEntryUrl } from '../utils/entryUtils';
+import { getEntryUrl, isCheckboxAllowed as isBulkEditable } from '../utils/entryUtils';
 import {
   DISPLAY_NAME_COLUMN,
   DISPLAY_NAME_INDEX,
   ENTRY_STATUS_COLUMN,
   ESTIMATED_ROW_HEIGHT,
   HEADERS_ROW,
 } from '../utils/constants';
-import { useKeyboardNavigation, FocusPosition } from '../hooks/useKeyboardNavigation';
+import { FocusPosition, useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
 import { tableStyles } from './EntryTable.styles';
 
 interface EntryTableProps {
 
@@ -0,0 +1,112 @@
+import React, { useMemo, useState } from 'react';
+import { SingleLineEditor } from '@contentful/field-editor-single-line';
+import { MultipleLineEditor } from '@contentful/field-editor-multiple-line';
+import { NumberEditor } from '@contentful/field-editor-number';
+import { DateEditor } from '@contentful/field-editor-date';
+import { TagsEditor } from '@contentful/field-editor-tags';
+import { BooleanEditor } from '@contentful/field-editor-boolean';
+import { JsonEditor } from '@contentful/field-editor-json';
+import { DropdownEditor } from '@contentful/field-editor-dropdown';
+import { RadioEditor } from '@contentful/field-editor-radio';
+import { ListEditor } from '@contentful/field-editor-list';
+import { CheckboxEditor } from '@contentful/field-editor-checkbox';
+import type { ContentTypeField } from '../types';
+import { Note } from '@contentful/f36-components';
+import {
+  createFieldAPI,
+  getCustomBooleanLabels,
+  getBooleanEditorParameters,
+} from '../utils/fieldEditorUtils';
+import type { LocalesAPI } from '@contentful/field-editor-shared';
+
+interface FieldEditorProps {
+  field: ContentTypeField;
+  value: string;
+  onChange: (value: string) => void;
+  locales: LocalesAPI;
+}
+
+const ERROR_MESSAGE = 'Failed to initialize field editor. Please try again.';
+export const FieldEditor: React.FC<FieldEditorProps> = ({ field, value, onChange, locales }) => {
+  const [error, setError] = useState('');
+  const locale = field.locale ? field.locale : locales.default;
+
+  const fieldApi = useMemo(() => {
+    return createFieldAPI(field, value, onChange, locale);
+  }, [field, value, onChange, locale]);
+
+  const renderEditor = () => {
+    try {
+      switch (field.fieldControl?.widgetId) {
+        case 'singleLine':
+          return (
+            <SingleLineEditor
+              isInitiallyDisabled={false}
+              withCharValidation={true}
+              field={fieldApi}
+              locales={locales}
+            />
+          );
+        case 'dropdown':
+          return (
+            <DropdownEditor
+              isInitiallyDisabled={false}
+              field={fieldApi}
+              locales={locales}></DropdownEditor>
+          );
+        case 'radio':
+          return (
+            <RadioEditor
+              isInitiallyDisabled={false}
+              field={fieldApi}
+              locales={locales}></RadioEditor>
+          );
+        case 'multipleLine':
+          return (
+            <MultipleLineEditor field={fieldApi} locales={locales} isInitiallyDisabled={false} />
+          );
+        case 'numberEditor':
+          return <NumberEditor field={fieldApi} isInitiallyDisabled={false} />;
+        case 'datePicker':
+          return <DateEditor field={fieldApi} isInitiallyDisabled={false} />;
+        case 'listInput':
+          return (
+            <ListEditor field={fieldApi} locales={locales} isInitiallyDisabled={false}></ListEditor>
+          );
+        case 'checkbox':
+          return (
+            <CheckboxEditor
+              field={fieldApi}
+              locales={locales}
+              isInitiallyDisabled={false}></CheckboxEditor>
+          );
+        case 'tagEditor':
+          return <TagsEditor field={fieldApi} isInitiallyDisabled={false} />;
+        case 'boolean':
+          const { trueLabel, falseLabel } = getCustomBooleanLabels(field.fieldControl);
+
+          return (
+            <BooleanEditor
+              field={fieldApi}
+              isInitiallyDisabled={false}
+              parameters={getBooleanEditorParameters(trueLabel, falseLabel)}
+            />
+          );
+
+        case 'objectEditor':
+          return <JsonEditor field={fieldApi} isInitiallyDisabled={false} />;
+        default:
+          return <Note variant="negative">{ERROR_MESSAGE}</Note>;
+      }
+    } catch (error) {
+      setError(ERROR_MESSAGE);
+      console.error('Error: ', error);
+    }
+  };
+
+  if (error) {
+    return <Note variant="negative">{error}</Note>;
+  }
+
+  return <>{renderEditor()}</>;
+};
@@ -0,0 +1,52 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Flex, Text, Icon } from '@contentful/f36-components';
+import { ValidationExecutor } from '../../../validations';
+import type { ContentTypeField } from '../types';
+import { WarningOctagonIcon } from '@contentful/f36-icons';
+
+interface FieldValidationProps {
+  field: ContentTypeField;
+  value: any;
+  onValidationChange?: (hasErrors: boolean) => void;
+}
+
+export const FieldValidation: React.FC<FieldValidationProps> = ({
+  field,
+  value,
+  onValidationChange,
+}) => {
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+
+  const validationExecutor = useMemo(() => {
+    return new ValidationExecutor(field);
+  }, [field]);
+
+  useEffect(() => {
+    const result = validationExecutor.validate(value);
+    const errorMessages = result.errors.map((err) => err.message);
+    setValidationErrors(errorMessages);
+
+    const hasErrors = result.errors.length > 0;
+
+    if (onValidationChange) {
+      onValidationChange(hasErrors);
+    }
+  }, [value, validationExecutor, onValidationChange]);
+
+  if (validationErrors.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {validationErrors.map((error, index) => (
+        <Flex key={index} alignItems="center" gap="spacingXs">
+          <Icon as={WarningOctagonIcon} variant="negative" size="tiny"></Icon>
+          <Text as="p" fontColor="red600">
+            {error}
+          </Text>
+        </Flex>
+      ))}
+    </>
+  );
+};
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Flex, Text, TextInput } from '@contentful/f36-components';
-import { SearchIcon } from '@contentful/f36-icons';
+import { MagnifyingGlassIcon } from '@contentful/f36-icons';
 import { useDebounce } from 'use-debounce';
 import { styles } from './SearchBar.styles';
 
@@ -41,7 +41,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         placeholder="Search"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
-        icon={<SearchIcon />}
+        icon={<MagnifyingGlassIcon />}
         isDisabled={isDisabled}
       />
     </Flex>