feat: add allow_remove and allow_reorder flags #7573
Conversation
martinjagodic
requested review from
demshy and
Copilot
and removed request for
a team
There was a problem hiding this comment.
Pull Request Overview
This PR adds new configuration flags allow_remove and allow_reorder to list widgets, allowing users to control whether list items can be removed or reordered. The changes implement conditional rendering of UI controls based on these flags.
- Added
allow_removeandallow_reorderboolean properties to list widget schemas - Modified UI components to conditionally render drag handles and remove buttons based on these flags
- Updated TypeScript definitions and test snapshots to reflect the new properties
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/decap-cms-widget-list/src/schema.js | Adds allow_remove and allow_reorder boolean properties to the widget schema |
| packages/decap-cms-widget-list/src/ListControl.js | Passes the new flags from field configuration to the UI component |
| packages/decap-cms-ui-default/src/ListItemTopBar.js | Implements conditional rendering logic for drag handles and remove buttons |
| packages/decap-cms-core/src/types/redux.ts | Adds TypeScript type definitions for the new properties |
| packages/decap-cms-widget-list/src/tests/snapshots/ListControl.spec.js.snap | Updates test snapshots to include the new props |
| {dragHandle && allowReorder ? <DragHandle Wrapper={dragHandle} id={id} /> : <span></span>} | ||
| {onRemove && allowRemove ? ( | ||
| <TopBarButton onClick={onRemove}> | ||
| <Icon type="close" size="small" /> | ||
| </TopBarButton> | ||
| ) : null} | ||
| ) : ( | ||
| <span></span> |
There was a problem hiding this comment.
Using empty <span></span> elements as placeholders creates unnecessary DOM nodes. Consider using null instead for cleaner rendering when elements are not needed.
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
spans are used to keep the number of elements in the top row, to keep the item spacing consistent.
| <TopBarButton onClick={onRemove}> | ||
| <Icon type="close" size="small" /> | ||
| </TopBarButton> | ||
| ) : null} | ||
| ) : ( | ||
| <span></span> |
There was a problem hiding this comment.
Using empty <span></span> elements as placeholders creates unnecessary DOM nodes. Consider using null instead for cleaner rendering when elements are not needed.
| <span></span> | |
| null |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
spans are used to keep the number of elements in the top row, to keep the item spacing consistent.
Fixes #4702