Bulk edit [INTEG-2847]

apps/bulk-edit/.env.example

@@ -0,0 +1,25 @@
+# Content Management API token
+# Get this from: https://app.contentful.com/spaces/{SPACE_ID}/api/keys
+CONTENTFUL_ACCESS_TOKEN=your_content_management_api_token_here
+
+# Your Contentful Space ID
+# Found in the URL when you're in your Contentful space
+SPACE_ID=your_space_id_here
+
+# Your Contentful Environment ID
+# Usually 'master' for production, or your custom environment name
+ENVIRONMENT_ID=master
+
+# Your Contentful Organization ID
+# Found in the URL when you're in your organization settings
+CONTENTFUL_ORG_ID=your_organization_id_here
+
+# Your Contentful App Definition ID
+# Found under the title from the app definition in contentful
+CONTENTFUL_APP_DEF_ID=yout_app_definition_id
+
+# Set the amount of entries we want create (OPTIONAL)
+AMOUNT_OF_ENTRIES=5
+
+# Set the Content Type name of the entries you want to delete
+DELETE_CONTENT_TYPE_NAME="test-content-type"

apps/bulk-edit/.env.test

@@ -0,0 +1,25 @@
+# Content Management API token
+# Get this from: https://app.contentful.com/spaces/{SPACE_ID}/api/keys
+CONTENTFUL_ACCESS_TOKEN=access_token
+
+# Your Contentful Space ID
+# Found in the URL when you're in your Contentful space
+SPACE_ID=space_id
+
+# Your Contentful Environment ID
+# Usually 'master' for production, or your custom environment name
+ENVIRONMENT_ID=master
+
+# Your Contentful Organization ID
+# Found in the URL when you're in your organization settings
+CONTENTFUL_ORG_ID=org_id
+
+# Your Contentful App Definition ID
+# Found under the title from the app definition in contentful
+CONTENTFUL_APP_DEF_ID=app_deff_id
+
+# Set the amount of entries we want create
+AMOUNT_OF_ENTRIES=5
+
+# Set the Content Type name of the entries you want to delete
+DELETE_CONTENT_TYPE_NAME="test-content-type"

apps/bulk-edit/.gitignore

@@ -23,3 +23,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# dotenv environment variables file
+.env
+.env.*
+!.env*.example
+!.env.test
+

apps/bulk-edit/package.json

@@ -25,7 +25,9 @@
     "create-app-definition": "contentful-app-scripts create-app-definition",
     "add-locations": "contentful-app-scripts add-locations",
     "deploy": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id ${DEFINITIONS_ORG_ID} --definition-id 3bRpNGJb2qXeYUmMkDMAwh --token ${CONTENTFUL_CMA_TOKEN}",
-    "deploy:staging": "contentful-app-scripts upload --ci --bundle-dir ./dist --organization-id ${TEST_ORG_ID} --definition-id 75CMBc0rQykFfUPGGrECFF --token ${TEST_CMA_TOKEN}"
+    "deploy:staging": "contentful-app-scripts upload --ci --bundle-dir ./dist --organization-id ${TEST_ORG_ID} --definition-id 75CMBc0rQykFfUPGGrECFF --token ${TEST_CMA_TOKEN}",
+    "generate-entries": "tsx src/scripts/generateEntries.ts",
+    "delete-entries": "tsx src/scripts/deleteEntries.ts"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -52,6 +54,7 @@
     "@vitejs/plugin-react": "^4.0.3",
     "cross-env": "7.0.3",
     "jsdom": "^26.0.0",
+    "tsx": "^4.7.0",
     "typescript": "4.9.5",
     "vite": "^6.2.2",
     "vitest": "^3.0.9"

apps/bulk-edit/src/locations/Page/components/BulkEditModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, Button, TextInput, Text, Flex, FormControl } from '@contentful/f36-components';
 import type { Entry, ContentTypeField } from '../types';
-import { getEntryFieldValue } from '../utils/entryUtils';
+import { getEntryFieldValue, truncate } from '../utils/entryUtils';
 
 interface BulkEditModalProps {
   isOpen: boolean;
@@ -48,7 +48,7 @@ export const BulkEditModal: React.FC<BulkEditModalProps> = ({
           </Text>
           <Flex>
             <Text>
-              <Text fontWeight="fontWeightDemiBold">{firstValueToUpdate}</Text>{' '}
+              <Text fontWeight="fontWeightDemiBold">{truncate(firstValueToUpdate, 100)}</Text>{' '}
               {entryCount === 1 ? 'selected' : `selected and ${entryCount - 1} more`}
             </Text>
           </Flex>
@@ -71,7 +71,11 @@ export const BulkEditModal: React.FC<BulkEditModalProps> = ({
         </Flex>
       </Modal.Content>
       <Modal.Controls>
-        <Button variant="secondary" onClick={onClose} testId="bulk-edit-cancel">
+        <Button
+          variant="secondary"
+          onClick={onClose}
+          testId="bulk-edit-cancel"
+          isDisabled={isSaving}>
           Cancel
         </Button>
         <Button

apps/bulk-edit/src/locations/Page/components/UndoBulkEditModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Modal, Button, Text, Flex } from '@contentful/f36-components';
+import { truncate } from '../utils/entryUtils';
 
 interface UndoBulkEditModalProps {
   isOpen: boolean;
@@ -28,19 +29,23 @@ export const UndoBulkEditModal: React.FC<UndoBulkEditModalProps> = ({
           <Text>
             {entryCount === 1 ? (
               <>
-                The update for <b>{firstEntryFieldValue}</b> will be reverted.
+                The update for <b>{truncate(firstEntryFieldValue, 100)}</b> will be reverted.
               </>
             ) : (
               <>
-                The update for <b>{firstEntryFieldValue}</b> and <b>{entryCount - 1}</b> more entry
-                fields will be reverted.
+                The update for <b>{truncate(firstEntryFieldValue, 100)}</b> and{' '}
+                <b>{entryCount - 1}</b> more entry fields will be reverted.
               </>
             )}
           </Text>
         </Flex>
       </Modal.Content>
       <Modal.Controls>
-        <Button variant="secondary" onClick={onClose} testId="undo-bulk-cancel">
+        <Button
+          variant="secondary"
+          onClick={onClose}
+          testId="undo-bulk-cancel"
+          isDisabled={isSaving}>
           Cancel
         </Button>
         <Button variant="primary" onClick={onUndo} testId="undo-bulk-confirm" isLoading={isSaving}>