Skip to content

Bulk edit feature [INTEG-2664] #9910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 17 commits into from
Jun 13, 2025
Merged

Bulk edit feature [INTEG-2664] #9910

merged 17 commits into from
Jun 13, 2025

Conversation

JuliRossi
Copy link
Collaborator

@JuliRossi JuliRossi commented Jun 12, 2025 •
edited
Loading

Purpose

  • Bulk update alphanumerical field entries

Out of scope for this PR will be handled in other tickets:

  • Undo
  • In depth type validations for the input modal (Number, Integer, Text and Symbol). Talked with Erin, I need to investigate a bit what they are using in the Entry editor and see if we can use it here as well. For now I just validate the user doesn't enter the incorrect type.

Approach

  • Add editing modal
  • Add update in bulk functionality
  • Error handling
  • Success notification
  • Added new tests

Testing steps

⚠️ Update: Made minor change in success notification to use the oldValue instead of the updated one

Simulate an error:

Grabacion.de.pantalla.2025-06-12.a.la.s.11.59.07.a.m.mov

Update of 15 and 100 batches for strings

Grabacion.de.pantalla.2025-06-12.a.la.s.11.53.10.a.m.mov

Update an integer and decimal and show value is updated in entry

Grabacion.de.pantalla.2025-06-12.a.la.s.12.02.03.p.m.mov

Update with localized field:

Grabacion.de.pantalla.2025-06-12.a.la.s.1.56.53.p.m.mov

@JuliRossi JuliRossi marked this pull request as ready for review June 12, 2025 15:16
@JuliRossi JuliRossi requested a review from a team as a code owner June 12, 2025 15:16
@JuliRossi JuliRossi force-pushed the bulk-edit-feature-INTEG-2664 branch from b19579d to 5fba20c Compare June 12, 2025 15:21
@JuliRossi JuliRossi changed the title Bulk edit feature[ INTEG-2664] Bulk edit feature [INTEG-2664] Jun 12, 2025
JuliRossi added 15 commits June 12, 2025 14:44
@JuliRossi
feat: enhance EntryTable and TableRow components with selection funct…
2eea190 
…ionality and update styles
@JuliRossi
feat: add BulkEditModal component and integrate it into the Page comp…
fbd746f 
…onent with tests
@JuliRossi
fix: adjust text structure in BulkEditModal for improved readability
0957033
@JuliRossi
wip
0e3a5a6
@JuliRossi
feat: update entry fields in BulkEditModal and manage state for updat…
b525bad 
…ed entries
@JuliRossi
feat: implement success notifications for bulk entry updates and hand…
3939edc 
…le failed updates in the Page component
@JuliRossi
update now includes localized fields
34cf563
@JuliRossi
feat: enhance BulkEditModal and Page component to utilize getEntryFie…
aeb4171 
…ldValue for improved field updates and notifications
@JuliRossi
feat: update BulkEditModal to support number input and validation for…
7f4cfb3 
… integer fields, enhance Page component with saving state
@JuliRossi
feat: extend checkbox restrictions in entryUtils to include 'Object' …
49258b6 
…type
@JuliRossi
feat: add 'RichText' type to checkbox restrictions in entryUtils
c115d93
@JuliRossi
move tests
3124a06
@JuliRossi
fix tests
43c1852
@JuliRossi
refactor: remove unused 'fields' prop from BulkEditModal and related …
3be438e 
…tests
@JuliRossi
fix: update success notification to use the first selected entry value
77bf9b7
@ryunsong-contentful
Copy link
Contributor

Sometimes the table just errors out with this

chunk-YQ5BCTVV.js?v=de2c4c5c:19466 Uncaught TypeError: Cannot read properties of undefined (reading 'title')
    at TableRow.tsx:65:64
    at Array.map (<anonymous>)
    at TableRow (TableRow.tsx:61:15)
Screenshot 2025-06-12 at 11 53 21 AM

@ryunsong-contentful
Copy link
Contributor

Small non-blocking issue - Values get carried over form different fields when you bulk edit them
https://github.com/user-attachments/assets/6e2a79b9-8e19-4936-800b-acda9536fa72

@JuliRossi JuliRossi force-pushed the bulk-edit-feature-INTEG-2664 branch from fa133a6 to 55a4303 Compare June 12, 2025 18:15
@JuliRossi
Copy link
Collaborator Author

Sometimes the table just errors out with this

chunk-YQ5BCTVV.js?v=de2c4c5c:19466 Uncaught TypeError: Cannot read properties of undefined (reading 'title')
    at TableRow.tsx:65:64
    at Array.map (<anonymous>)
    at TableRow (TableRow.tsx:61:15)
Screenshot 2025-06-12 at 11 53 21 AM

I created a new test for the whole flow and verify selectedContentType is not empty, but couldn't reproduce the issue

ryunsong-contentful
ryunsong-contentful approved these changes Jun 12, 2025
View reviewed changes
Copy link
Contributor

@ryunsong-contentful ryunsong-contentful left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, everything works as expected. Also kicked off another build since the last one was a flakey error

@JuliRossi JuliRossi merged commit 2582182 into bulk-edit-app Jun 13, 2025
11 checks passed
@JuliRossi JuliRossi deleted the bulk-edit-feature-INTEG-2664 branch June 13, 2025 12:54
@FBanfi FBanfi mentioned this pull request Jun 13, 2025
Merged
JuliRossi added a commit that referenced this pull request Jun 19, 2025
@JuliRossi @joaquincasal
@FBanfi @ryunsong-contentful
Bulk edit app [INTEG-2708] (#9919)
c495e2d 
* General page [INTEG-2662] (#9892)

* refactor: remove unused components and tests from bulk-edit location

* refactor: streamline Page component structure and add constants and types

* chore: add .cursor to .gitignore

* feat: add navigation sidebar with content type selection and loading state

* test: add comprehensive tests for Page component and its features

* feat: enhance Page component with content fetching and display logic, including loading states and status badges

* feat: enhance Page layout with sidebar and main content structure, improve styles for better UI

* feat: enhance Page component to handle Location, Boolean, and JSON fields, update rendering logic and add corresponding tests

* feat: add entry title retrieval logic and update table display, remove unused mock data from tests

* refactor: simplify test cases by removing unnecessary act calls and enhancing mock entry creation

* fix: update table header cells to use isTruncated for better display of long text

* style: update table cell styles for improved layout and consistency

* feat: add external link to entry titles in table for direct access

* feat: enhance entry field handling and improve table display logic

* fix: update LOCALE definition to use sdk.locales.default for better localization support

* feat: enhance test coverage by adding new mock entries and content types for improved page functionality

* refactor: remove unused imports from PageLoading and PageNavBar test files for cleaner code

* feat: update content type handling to use ContentTypeProps and enhance data fetching logic

* feat: update table rendering to include all fields and improve test assertions for display names

* refactor: remove outdated comments from PageNavBar test file for clarity

* feat: enhance layout and styling for better user experience in bulk edit page

* General page part 2 [INTEG-2662] (#9904)

* refactor: remove unused components and tests from bulk-edit location

* refactor: streamline Page component structure and add constants and types

* chore: add .cursor to .gitignore

* feat: add navigation sidebar with content type selection and loading state

* test: add comprehensive tests for Page component and its features

* feat: enhance Page component with content fetching and display logic, including loading states and status badges

* feat: enhance Page layout with sidebar and main content structure, improve styles for better UI

* feat: enhance Page component to handle Location, Boolean, and JSON fields, update rendering logic and add corresponding tests

* feat: add entry title retrieval logic and update table display, remove unused mock data from tests

* refactor: simplify test cases by removing unnecessary act calls and enhancing mock entry creation

* fix: update table header cells to use isTruncated for better display of long text

* style: update table cell styles for improved layout and consistency

* feat: add external link to entry titles in table for direct access

* feat: enhance entry field handling and improve table display logic

* fix: update LOCALE definition to use sdk.locales.default for better localization support

* feat: enhance test coverage by adding new mock entries and content types for improved page functionality

* refactor: remove unused imports from PageLoading and PageNavBar test files for cleaner code

* feat: update content type handling to use ContentTypeProps and enhance data fetching logic

* feat: update table rendering to include all fields and improve test assertions for display names

* feat: implement pagination for entries in Page component with corresponding tests

* wip

* feat: add @phosphor-icons/react dependency to enhance icon usage

* feat: add ContentTypeSidebar, EntryTable, SortMenu, TableHeader, and TableRow components with pagination and sorting functionality

* feat: add tests for ContentTypeSidebar, EntryTable, and Page components; remove obsolete PageNavBar, PagePagination, and PageTable tests

* feat: implement checkbox functionality in EntryTable, TableHeader, and TableRow components; add isCheckboxAllowed utility function; enhance tests for checkbox behavior

* feat: update SortMenu component to use centralized styles; enhance styling for consistency and maintainability

* refactor: simplify checkbox logic in EntryTable; enhance query building in Page component; improve getEntryTitle utility function

* feat: add tooltip for Status column in TableHeader; update icon in SortMenu; render disabled cell values in gray in TableRow; enhance tests for tooltip visibility in EntryTable

* refactor: improve checkbox handling in EntryTable, TableHeader, and TableRow components; enhance variable naming for clarity

* feat: refactor EntryTable, TableHeader, and TableRow components to use column IDs; implement bulk editable checkbox logic; enhance checkbox state management

* Bulk edit localization [INTEG-2764] (#9907)

* Small refactor

* Add localization support

* Minor UI adjustments in table header

* Bulk Edit App: Pagination buttons adjustment [INTEG-2737]  (#9908)

* fixing pagination to be sticky

* changes in pagination container style

* Bulk Edit App: Empty content type and entries handling [INTEG-2728] (#9909)

* empty content type and entries hadling

* refactor to avoid nested conditional if

* Bulk edit feature [INTEG-2664] (#9910)

* feat: enhance EntryTable and TableRow components with selection functionality and update styles

* feat: add BulkEditModal component and integrate it into the Page component with tests

* fix: adjust text structure in BulkEditModal for improved readability

* wip

* feat: update entry fields in BulkEditModal and manage state for updated entries

* feat: implement success notifications for bulk entry updates and handle failed updates in the Page component

* update now includes localized fields

* feat: enhance BulkEditModal and Page component to utilize getEntryFieldValue for improved field updates and notifications

* feat: update BulkEditModal to support number input and validation for integer fields, enhance Page component with saving state

* feat: extend checkbox restrictions in entryUtils to include 'Object' type

* feat: add 'RichText' type to checkbox restrictions in entryUtils

* move tests

* fix tests

* refactor: remove unused 'fields' prop from BulkEditModal and related tests

* fix: update success notification to use the first selected entry value

* fix: update loading condition and improve error handling in Page component

* fix: enhance loading condition and update mock SDK for entry updates in Page component tests

* Bulk Edit App: Fix value carried over when opening modal [INTEG-2799] (#9911)

* fix bug value carried over when opening modal

* changin test name to run the CI again

* Sorting button adjustments (#9913)

* fix condition for showing spinner (#9912)

* Bulk edit undo [INTEG-2708] (#9916)

* feat: enhance EntryTable and TableRow components with selection functionality and update styles

* feat: add BulkEditModal component and integrate it into the Page component with tests

* fix: adjust text structure in BulkEditModal for improved readability

* wip

* feat: update entry fields in BulkEditModal and manage state for updated entries

* feat: implement success notifications for bulk entry updates and handle failed updates in the Page component

* update now includes localized fields

* feat: enhance BulkEditModal and Page component to utilize getEntryFieldValue for improved field updates and notifications

* feat: update BulkEditModal to support number input and validation for integer fields, enhance Page component with saving state

* feat: extend checkbox restrictions in entryUtils to include 'Object' type

* feat: add 'RichText' type to checkbox restrictions in entryUtils

* move tests

* fix tests

* refactor: remove unused 'fields' prop from BulkEditModal and related tests

* fix: update success notification to use the first selected entry value

* fix: update loading condition and improve error handling in Page component

* fix: enhance loading condition and update mock SDK for entry updates in Page component tests

* refactors

* fix: update ErrorNote test to use mock ContentTypeField for selectedField

* wip

* fix test post merge

* making undo more performant

* refactor: improve undo functionality by handling success and failure cases more effectively

* fix: enhance success notification for undo operation by adding title

* test: add undo functionality tests for successful and failed updates

* test: enhance undo functionality tests by verifying success notification

* feat: add UndoBulkEditModal component and integrate undo functionality in Page component

* feat: refactor content type fetching and query building for improved clarity and functionality

* refactor: remove unused Undo functionality tests from Page component

* feat: update buildQuery to handle null displayField and add corresponding tests for table display (#9917)

* feat: improve loading state management for content types in Page component

* Bulk edit: Use display field when showing update errors [INTEG-2801] (#9918)

* Use display field when showing update errors

* Update new test

* Fix no string for success notif and modal issue [INTEG-2708] (#9920)

* Refactor entry field value retrieval and update import statements

* Update getEntryFieldValue to return 'empty field' for undefined values

---------

Co-authored-by: Joaquin <joaquin.casal@external.contentful.com>
Co-authored-by: Franco Banfi <62450599+FBanfi@users.noreply.github.com>
Co-authored-by: ryunsong-contentful <124832189+ryunsong-contentful@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ryunsong-contentful ryunsong-contentful ryunsong-contentful approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@JuliRossi @ryunsong-contentful