feat(next): version view overhaul (#12027)

#11769 improved the lexical version view diff component. This PR
improves the rest of the version view.

## What changed

- Column layout when selecting a version:
	- Previously: Selected version on the left, latest version on the left
- Now: Previous version on the left, previous version on the right
(mimics behavior of GitHub)
- Locale selector now displayed in pill selector, rather than
react-select
- Smoother, more reliable locale, modifiedOnly and version selection.
Now uses clean event callbacks rather than useEffects
- React-diff-viewer-continued has been replaced with the html differ we
use in lexical
- Updated Design for all field diffs
- Version columns now have a clearly defined separator line
- Fixed collapsibles showing in version view despite having no modified
fields if modifiedOnly is true
- New, redesigned header
	

## Screenshots

### Before

![CleanShot 2025-04-11 at 20 10
03@2x](https://github.com/user-attachments/assets/a93a500a-3cdd-4cf0-84dd-cf5481aac2b3)

![CleanShot 2025-04-11 at 20 10
28@2x](https://github.com/user-attachments/assets/59bc5885-cbaf-49ea-8d1d-8d145463fd80)

### After

![Screenshot 2025-06-09 at 17 43
49@2x](https://github.com/user-attachments/assets/f6ff0369-76c9-4c1c-9aa7-cbd88806ddc1)

![Screenshot 2025-06-09 at 17 44
50@2x](https://github.com/user-attachments/assets/db93a3db-48d6-4e5d-b080-86a34fff5d22)

![Screenshot 2025-06-09 at 17 45
19@2x](https://github.com/user-attachments/assets/27b6c720-05fe-4957-85af-1305d6b65cfd)

![Screenshot 2025-06-09 at 17 45
34@2x](https://github.com/user-attachments/assets/6d42f458-515a-4611-b27a-f4d6bafbf555)
This commit is contained in:
Alessio Gravili
2025-06-16 04:58:03 -07:00
committed by GitHub
parent 9943b3508d
commit 4e2e4d2aed
182 changed files with 4795 additions and 2211 deletions

View File

@@ -122,11 +122,14 @@ describe('Localization', () => {
await page.locator('#action-save').click()
await page.locator('text=Versions').click()
const firstVersion = findTableRow(page, 'Current Published Version')
const firstVersion = findTableRow(page, 'Currently Published')
await firstVersion.locator('a').click()
await expect(page.locator('.select-version-locales__label')).toBeVisible()
await expect(page.locator('.select-version-locales .react-select')).not.toContainText(
await expect(page.locator('.view-version__toggle-locales')).toBeVisible()
await page.locator('.view-version__toggle-locales').click()
await expect(page.locator('.select-version-locales .pill-selector')).toBeVisible()
await expect(page.locator('.select-version-locales .pill-selector')).not.toContainText(
'FILTERED',
)
})