Add toggle to allow comparing revision to previous revision#26480
Add toggle to allow comparing revision to previous revision#26480AlexGaillard merged 48 commits intomainfrom
Conversation
…78-add-mode-toggle-in-revisions-comparison
…s to load dependencies
…78-add-mode-toggle-in-revisions-comparison
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #26480 +/- ##
==========================================
+ Coverage 63.24% 63.28% +0.04%
==========================================
Files 2113 2114 +1
Lines 137230 137399 +169
Branches 9025 9057 +32
==========================================
+ Hits 86788 86959 +171
+ Misses 50442 50440 -2
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds a comparison toggle feature that allows users to compare a revision to either the previous revision or the latest version. The implementation includes a new ComparisonToggle component, enhances the comparison composable to support both modes, handles edge cases for the first revision, and removes the "Updated" badge from comparison fields.
Changes:
- Added toggle UI to switch between "Previous" and "Latest" comparison modes
- Enhanced comparison logic to fetch and display previous revision data
- Added edge case handling for first revision and automatic mode switching
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| use-comparison.ts | Added compareToOption parameter, findPreviousRevision and fetchRevisionData functions, and logic to build comparisons against previous revisions |
| use-comparison.test.ts | Added comprehensive test coverage for both "Previous" and "Latest" comparison modes |
| comparison-toggle.vue | New component providing toggle UI between "Previous" and "Latest" modes |
| comparison-modal.vue | Integrated toggle component, added watchers for mode changes, and conditional rendering for Apply button and checkboxes |
| form-field-label.vue | Removed "Updated" badge and adjusted checkbox visibility logic |
| types.ts | Added previousRevision field to ComparisonData and comparingTo/mode to ComparisonContext |
| en-US.yaml | Added new translation keys and removed unused ones |
| input-rich-text-html.vue | Added comparisonEditorInitialized flag to prevent premature content updates |
| .changeset/eighty-zoos-tie.md | Added changeset entry for the feature |
app/src/views/private/components/comparison/comparison-modal.vue
Outdated
Show resolved
Hide resolved
app/src/views/private/components/comparison/comparison-toggle.vue
Outdated
Show resolved
Hide resolved
app/src/views/private/components/comparison/comparison-toggle.vue
Outdated
Show resolved
Hide resolved
app/src/views/private/components/comparison/comparison-modal.vue
Outdated
Show resolved
Hide resolved
AlexGaillard
left a comment
There was a problem hiding this comment.
Alrighty, thanks for this. Just some simple thoughts and changes here.
app/src/views/private/components/comparison/comparison-toggle.vue
Outdated
Show resolved
Hide resolved
app/src/views/private/components/comparison/comparison-toggle.vue
Outdated
Show resolved
Hide resolved
app/src/views/private/components/comparison/comparison-modal.vue
Outdated
Show resolved
Hide resolved
app/src/views/private/components/comparison/comparison-modal.vue
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Thank you @robluton ❤️
- The bug mentioned here still occurs: #26480 (review)
- The Apply button tooltip currently says “Compare to latest to consider restoring this revision.” When Latest is selected and the revision dropdown also selects the latest version, the Apply button is also disabled because the comparison is already against the latest revision. Let’s add a separate tooltip for this case, e.g. “Select an earlier revision to consider restoring this one.”
app/src/views/private/components/comparison/comparison-toggle.vue
Outdated
Show resolved
Hide resolved
app/src/views/private/components/comparison/comparison-toggle.vue
Outdated
Show resolved
Hide resolved
…revision to base version
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
app/src/views/private/components/comparison/comparison-modal.vue
Outdated
Show resolved
Hide resolved
Co-authored-by: Florian C. Wachmann <[email protected]>
Co-authored-by: Florian C. Wachmann <[email protected]>
This PR contains the following updates: | Package | Update | Change | |---|---|---| | [directus/directus](https://github.com/directus/directus) | minor | `11.14.1` → `11.15.0` | --- ### Release Notes <details> <summary>directus/directus (directus/directus)</summary> ### [`v11.15.0`](https://github.com/directus/directus/releases/tag/v11.15.0) [Compare Source](directus/directus@v11.14.1...v11.15.0) #####⚠️ Potential Breaking Changes **Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie))** To use this feature, update [@​directus/visual-editing](https://github.com/directus/visual-editing) to v1.2.0+ on your website. ##### ✨ New Features & Improvements - **[@​directus/app](https://github.com/directus/app)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added toggle to allow comparing revision to previous revision ([#​26480](directus/directus#26480) by [@​robluton](https://github.com/robluton)) - Added relational field support on x-axis of bar chart ([#​26489](directus/directus#26489) by [@​JamesW1](https://github.com/JamesW1)) - Added visual editing support to the live preview split pane, including display options menu, full-width mode with drag-to-expand, and quick access to the Visual Editor module. ([#​26463](directus/directus#26463) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Changed permission-blocked fields from disabled to non-editable appearance ([#​26572](directus/directus#26572) by [@​HZooly](https://github.com/HZooly)) - **[@​directus/api](https://github.com/directus/api)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/sdk](https://github.com/directus/sdk)** - Fixed race condition and allow accessing the connected state ([#​26511](directus/directus#26511) by [@​Nitwel](https://github.com/Nitwel)) - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - **[@​directus/system-data](https://github.com/directus/system-data)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - **[@​directus/types](https://github.com/directus/types)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/errors](https://github.com/directus/errors)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - **[@​directus/env](https://github.com/directus/env)** - Added deployment module for triggering deployments from Directus with Vercel as first supported provider ([#​26473](directus/directus#26473) by [@​gaetansenn](https://github.com/gaetansenn)) - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - **[@​directus/utils](https://github.com/directus/utils)** - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - **[@​directus/ai](https://github.com/directus/ai)** - Attached prompts, content items, and visual editor elements to AI Assistant Context ([#​26512](directus/directus#26512) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/memory](https://github.com/directus/memory)** - Added distributed locking ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) ##### 🐛 Bug Fixes & Optimizations - **[@​directus/app](https://github.com/directus/app)** - Replaced deprecated `ldapjs` with `ldapts` ([#​26363](directus/directus#26363) by [@​dstockton](https://github.com/dstockton)) - Fixed an issue where the caret would jump to the end of the input in `v-template-input` when typing or updating content. ([#​26520](directus/directus#26520) by [@​mustafaazad03](https://github.com/mustafaazad03)) - Fixed back button navigation on related items ([#​26553](directus/directus#26553) by [@​robluton](https://github.com/robluton)) - Fixed table options menu clipping in markdown editor ([#​26487](directus/directus#26487) by [@​DamnItAzriel](https://github.com/DamnItAzriel)) - Hide AI settings page when MCP and AI features are disabled through ENV ([#​26504](directus/directus#26504) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Updated dependency ([#​26518](directus/directus#26518) by [@​rijkvanzanten](https://github.com/rijkvanzanten)) - Fixed inconsistent disabled state across interfaces ([#​26470](directus/directus#26470) by [@​formfcw](https://github.com/formfcw)) - Fixed an issue where custom CSS classes applied to PrivateView were not rendered ([#​26523](directus/directus#26523) by [@​u12206050](https://github.com/u12206050)) - Fixed WYSIWYG interface not rendering when field is named "tooltip" ([#​26581](directus/directus#26581) by [@​robluton](https://github.com/robluton)) - Fixed issue preventing sidebar details from being fetched when navigating back ([#​26542](directus/directus#26542) by [@​robluton](https://github.com/robluton)) - Fixed Vue warning by passing required prop to interfaces ([#​26506](directus/directus#26506) by [@​formfcw](https://github.com/formfcw)) - Fixed hardcoded "Loading..." text in field tree by using translation key ([#​26526](directus/directus#26526) by [@​sinan-yildiz-marsus](https://github.com/sinan-yildiz-marsus)) - Renamed AI Chat to AI Assistant ([#​26517](directus/directus#26517) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/api](https://github.com/directus/api)** - Improved error message for system field updates that are not schema.is\_indexed ([#​26548](directus/directus#26548) by [@​JamesW1](https://github.com/JamesW1)) - Replaced deprecated `ldapjs` with `ldapts` ([#​26363](directus/directus#26363) by [@​dstockton](https://github.com/dstockton)) - Changed users.last\_access display mode to absolute ([#​26548](directus/directus#26548) by [@​JamesW1](https://github.com/JamesW1)) - **[@​directus/system-data](https://github.com/directus/system-data)** - Added collaborative editing ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) - Added multi-provider AI support with Google and OpenAI-compatible providers. Extracted shared AI types into new `@directus/ai` package. ([#​26481](directus/directus#26481) by [@​bryantgillespie](https://github.com/bryantgillespie)) - Changed users.last\_access display mode to absolute ([#​26548](directus/directus#26548) by [@​JamesW1](https://github.com/JamesW1)) - Renamed AI Chat to AI Assistant ([#​26517](directus/directus#26517) by [@​bryantgillespie](https://github.com/bryantgillespie)) - **[@​directus/env](https://github.com/directus/env)** - Fixed LDAP DN properties casted as arrays ([#​26579](directus/directus#26579) by [@​ComfortablyCoding](https://github.com/ComfortablyCoding)) - **[@​directus/memory](https://github.com/directus/memory)** - Handled empty buffers to prevent errors during race conditions or disconnects ([#​26172](directus/directus#26172) by [@​Nitwel](https://github.com/Nitwel)) ##### 📦 Published Versions - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/storage-driver-s3@​12.1.1` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` - `@directus/[email protected]` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4zLjYiLCJ1cGRhdGVkSW5WZXIiOiI0My4zLjYiLCJ0YXJnZXRCcmFuY2giOiJtYWluIiwibGFiZWxzIjpbImltYWdlIl19--> Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3752 Co-authored-by: Renovate Bot <[email protected]> Co-committed-by: Renovate Bot <[email protected]>
* create comparison toggle component and wire up basic functionality * previous revision flow * handle case when there are no previous revisions * change header to reflect previous revision * add "Compare to" label * change default option * add tooltip to Apply btn for Previous mode * remove "Updated" badge from comparison modal form fields * test coverage * fix use-comparison tests * remove new comparison modal integration tests - taking several seconds to load dependencies * prevent Previous mode from interfering with version promotion * wait for editor to initialize * changeset * prevent compare call when currentVersion has value but mode is revision * test cases for Previous and Latest compareTo option * feedback from Alex * Format * extract commmon watcher logic * Update app/src/views/private/components/comparison/use-comparison.ts Co-authored-by: Florian C. Wachmann <[email protected]> * remove translation key for updated_in_revision * Show latest for base date when not comparing Previous in revision mode * fix broken tests * style tweaks * make sure toggle shows on small devices * save state of selected compareTo option * only save compareTo when revision selector is used * utilize active prop for list items * button position tweak * fix issue causing base to show main item values when comparing first revision to base version * cleanup revision sorting and add tooltip for lastest revision case * add test cases for first and last revisions * Update app/src/views/private/components/comparison/comparison-toggle.vue Co-authored-by: Florian C. Wachmann <[email protected]> * Update app/src/views/private/components/comparison/comparison-modal.vue Co-authored-by: Florian C. Wachmann <[email protected]> * Update app/src/views/private/components/comparison/comparison-toggle.vue Co-authored-by: Florian C. Wachmann <[email protected]> * remove comparingTo and mode from ComparisonContext * restore buttons to previous size on large devices * another fix for latest revision against version * Update app/src/lang/translations/en-US.yaml Co-authored-by: Florian C. Wachmann <[email protected]> * Update app/src/components/v-form/components/form-field-label.vue Co-authored-by: Florian C. Wachmann <[email protected]> * move tooltip logic to computed * use versionComparison.main as base for incoming --------- Co-authored-by: Alex Gaillard <[email protected]> Co-authored-by: Florian C. Wachmann <[email protected]>
Scope
What's changed:
ComparisonTogglecomponent (app/src/views/private/components/comparison/comparison-toggle.vue) to allowusers to switch between comparing to "Previous" or "Latest" revision
use-comparison.tscomposable to supportcompareToOptionparameter for both "Previous" and "Latest"comparison modes
disables "Previous" option for the first revision
Potential Risks / Drawbacks
feedback
Tested Scenarios
disabled)
Review Notes / Questions
Checklist
Fixes CMS-1676