fix: add separator and sorting for unpublished entries #7624
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements proper sorting and visual separation for unpublished entries in collections when editorial workflow is enabled, addressing issue #7542.
- Adds visual separation between published and unpublished entries with a dedicated "Unpublished Entries" section heading
- Implements consistent sorting for unpublished entries using the same criteria as published entries
- Passes sortFields through the component chain to enable proper sorting functionality
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/decap-cms-locales/src/en/index.js | Adds translation key for "Unpublished Entries" header |
| packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js | Main implementation with sorting logic and visual separator components |
| packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js | Passes sortFields prop from state to child components |
| packages/decap-cms-core/src/components/Collection/Entries/Entries.js | Forwards sortFields prop to EntryListing component |
| packages/decap-cms-core/src/components/Collection/Entries/tests/snapshots/EntriesCollection.spec.js.snap | Updates test snapshots for new sortfields prop |
| .claude/settings.local.json | Adds Claude AI configuration file |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js
Show resolved
Hide resolved
| return [ | ||
| ...publishedCards.toArray(), | ||
| <SectionSeparator key="separator"> | ||
| <SectionHeading>{t('collection.entries.unpublishedHeader')}</SectionHeading> | ||
| </SectionSeparator>, | ||
| ...unpublishedCards.toArray(), | ||
| ]; |
There was a problem hiding this comment.
[nitpick] Mixing array spread operations with JSX elements creates a complex return structure. Consider using React.Fragment or a wrapper component for better readability and maintainability.
| return [ | |
| ...publishedCards.toArray(), | |
| <SectionSeparator key="separator"> | |
| <SectionHeading>{t('collection.entries.unpublishedHeader')}</SectionHeading> | |
| </SectionSeparator>, | |
| ...unpublishedCards.toArray(), | |
| ]; | |
| return ( | |
| <React.Fragment> | |
| {publishedCards.toArray()} | |
| <SectionSeparator key="separator"> | |
| <SectionHeading>{t('collection.entries.unpublishedHeader')}</SectionHeading> | |
| </SectionSeparator> | |
| {unpublishedCards.toArray()} | |
| </React.Fragment> | |
| ); |
Copilot uses AI. Check for mistakes.
packages/decap-cms-core/src/components/Collection/Entries/EntryListing.js
Show resolved
Hide resolved
| return [ | ||
| ...publishedCards.toArray(), | ||
| <SectionSeparator key="separator"> | ||
| <SectionHeading>{t('collection.entries.unpublishedHeader')}</SectionHeading> | ||
| </SectionSeparator>, | ||
| ...unpublishedCards.toArray(), | ||
| ]; |
ascender1729
force-pushed
the
7542-sort-unpublished-entries
branch
from
4dee1bd to
d00ae9b
Compare
Implements proper sorting and visual separation for unpublished entries in collections when editorial workflow is enabled. Changes: - Add visual separator with "Unpublished Entries" heading - Implement sorting for unpublished entries using collection sort config - Extract unpublished entries logic into separate method - Add translation key for internationalization support - Pass sortFields through component chain Technical implementation: - Modify EntryListing to render published/unpublished separately - Create sortEntries() method for applying sort configuration - Add styled components for visual separation - Enhance component props to include sortFields Fixes decaporg#7542
- Add .claude/settings.local.json to .gitignore - Refactor EntryListing to use React.Fragment instead of array spread for better readability
ascender1729
force-pushed
the
7542-sort-unpublished-entries
branch
from
d00ae9b to
7edb37f
Compare
There was a problem hiding this comment.
I added this to a test repo and after I publish an entry, I get this error on the collection view:
TypeError: r.toArray is not a function at eS.sortEntries (/decap-cms.js:33:76838) at eS.getUnpublishedEntriesList (/decap-cms.js:33:77329) at eS.renderCardsForSingleCollection (/decap-cms.js:33:77684) at eS.render (/decap-cms.js:33:78581) at js (/decap-cms.js:5:725468) at Xs (/decap-cms.js:5:731984) at Xu (/decap-cms.js:5:769131) at Ku (/decap-cms.js:5:769060) at Gu (/decap-cms.js:5:768902) at ju (/decap-cms.js:5:765711)
Do you have a test repo where you tested this? It'a bit cumbersome to test anything with EW...
| currentEntries: '%{smart_count} entry |||| %{smart_count} entries', | ||
| }, | ||
| collection: { | ||
| sidebar: { |
There was a problem hiding this comment.
We already have collection object above in the file, please don't duplicate it.
2 participants
Summary
Fixes #7542
This PR implements proper sorting and visual separation for unpublished entries in collections when editorial workflow is enabled.
Changes
.claude/settings.local.jsonto.gitignoreTechnical Implementation
EntryListingcomponent to render published and unpublished entries separately using React.FragmentsortEntries()method that applies the collection's sort configuration to unpublished entriesSectionSeparatorandSectionHeading) for visual separationBefore
Unpublished entries were appended to the bottom of the list without sorting or visual separation, making the UI unpredictable.
After
Test Plan
Testing Completed
Review Feedback Addressed
.claude/settings.local.jsonto.gitignore(per @martinjagodic feedback)