fix: design harmonization on last features

2026-10-07 18:20:18 +02:00
1 parent 953be7342d
commit 70c8492f4f
@@ -26,14 +26,13 @@ interface Screen {
 	sources: Source[]
 }

-const cleanupBoard = 'RenewCMS Screens Media cleanup.dc.html'
-const activityBoard = 'RenewCMS Screens Activity.dc.html'
+const officeBoard = 'RenewCMS Screens Back-office.dc.html'

 const extraSources: Record<string, Source[]> = {
 	activity: [
 		{
-			board: activityBoard,
-			group: 'Details slide-over',
+			board: officeBoard,
+			group: 'Activity details',
 			states: [
 				'Edit with a diff',
 				'Settings diff, long text',
@@ -45,7 +44,7 @@ const extraSources: Record<string, Source[]> = {
 			alias: {},
 		},
 		{
-			board: activityBoard,
+			board: officeBoard,
 			group: 'My activity',
 			states: ['Default', 'Empty', 'Details'],
 			alias: {},
@@ -53,8 +52,8 @@ const extraSources: Record<string, Source[]> = {
 	],
 	settings: [
 		{
-			board: cleanupBoard,
-			group: 'Settings',
+			board: officeBoard,
+			group: 'Settings: Media cleanup',
 			states: [
 				'Default: off, never run',
 				'On: 30 days, last run',
@@ -69,8 +68,8 @@ const extraSources: Record<string, Source[]> = {
 			alias: {},
 		},
 		{
-			board: cleanupBoard,
-			group: 'Dialog',
+			board: officeBoard,
+			group: 'Purge dialog',
 			states: [
 				'Loading preview',
 				'Confirm',
@@ -84,23 +83,18 @@ const extraSources: Record<string, Source[]> = {
 			alias: {},
 		},
 		{
-			board: cleanupBoard,
-			group: 'Results',
+			board: officeBoard,
+			group: 'Purge results',
 			states: ['Success', 'Success, automatic purge on'],
 			alias: {},
 		},
 	],
 	media: [
 		{
-			board: cleanupBoard,
-			group: 'Media',
-			states: [
-				'Duplicates tab with the button',
-				'Dialog from Media',
-				'Member: button hidden',
-				'Offline: button disabled',
-			],
-			alias: { 'Offline: button disabled': 'Offline' },
+			board: officeBoard,
+			group: 'Media duplicates entry',
+			states: ['Duplicates tab with the button', 'Duplicates tab: offline'],
+			alias: {},
 		},
 	],
 }
@@ -165,11 +165,6 @@ const verifiedSession: ApiMock = {
 }

 const updateRunningVersion = 'v2.2.0-beta'
-const newCardAbsentReason = 'new card absent from board frame (dashed placeholder)'
-const homeActivityMock: ApiMock = {
-	status: 200,
-	body: { items: [], total: 0, page: 1, size: 5 },
-}
 const workspaceSettingsBody = {
 	version: updateRunningVersion,
 	activity_retention_days: 90,
@@ -304,6 +299,7 @@ function updateApi(
 	return {
 		'GET /v1/auth/me': role === 'owner' ? verifiedSession : adminSession,
 		'GET /v1/settings/': { status: 200, body: workspaceSettingsBody },
+		[purgeSettingsPath]: settingsBody(purgeSettingsBody()),
 		'GET /v1/system/update': { status: 200, body: status },
 		'POST /v1/system/update/check': check,
 	}
@@ -2392,7 +2388,10 @@ function cleanupApi(
 	return {
 		'GET /v1/auth/me': sessionWithRole(role),
 		'GET /v1/settings/': { status: 200, body: workspaceSettingsBody },
-		'GET /v1/system/update': { status: 200, hang: true },
+		'GET /v1/system/update': {
+			status: 200,
+			body: updateStatusBody({ checked_at: '2026-09-10T09:41:00Z', can_apply: true }),
+		},
 		[purgeSettingsPath]: settings,
 		...overrides,
 	}
@@ -2402,12 +2401,47 @@ function settingsBody(body: unknown): ApiMock {
 	return { status: 200, body }
 }

+async function scrollSettingsToCleanup(page: Page) {
+	const top = (page.viewportSize()?.width ?? 1440) < 768 ? 480 : 300
+	await page.evaluate((top) => {
+		const card = document.querySelector<HTMLElement>('[data-testid="settings-card"]')
+		if (card?.parentElement && !card.parentElement.querySelector('[data-scroll-room]')) {
+			const room = document.createElement('div')
+			room.setAttribute('data-scroll-room', '')
+			room.style.cssText = 'flex-shrink:0;height:1200px'
+			card.parentElement.append(room)
+		}
+		let node: HTMLElement | null = card
+		while (node) {
+			if (
+				node.scrollHeight > node.clientHeight &&
+				/auto|scroll/.test(getComputedStyle(node).overflowY)
+			) {
+				node.scrollTop = top
+				return
+			}
+			node = node.parentElement
+		}
+		window.scrollTo(0, top)
+	}, top)
+}
+
 function cleanupState(
 	api: Record<string, ApiMock>,
 	steps?: (page: Page) => Promise<void>,
 	exception?: DiffException,
 ): VisualState {
-	return { path: '/settings', api, steps, exception }
+	return {
+		path: '/settings',
+		now: boardNow,
+		api,
+		exception,
+		steps: async (page) => {
+			await scrollSettingsToCleanup(page)
+			await steps?.(page)
+			await scrollSettingsToCleanup(page)
+		},
+	}
 }

 async function openCleanupDialog(page: Page) {
@@ -2500,11 +2534,7 @@ const cleanupStates: Record<string, VisualState> = {
 		await page.getByText('Enter a whole number of days between 1 and 365.').waitFor()
 	}),
 	'Read-only (non-admin)': cleanupState(cleanupApi(settingsBody(purgeOnBody), {}, 'member')),
-	'Loading skeleton': cleanupState(cleanupApi({ status: 200, hang: true }), undefined, {
-		maxPercent: 17.5,
-		reason: newCardAbsentReason,
-		approvedBy: 'fallen',
-	}),
+	'Loading skeleton': cleanupState(cleanupApi({ status: 200, hang: true })),
 	Offline: cleanupState(cleanupApi(settingsBody(purgeOnBody)), goOffline),
 	'Loading preview': cleanupState(
 		cleanupDialogApi({ [purgePreviewPath]: { status: 200, hang: true } }),
@@ -2579,19 +2609,7 @@ const mediaPurgeStates: Record<string, VisualState> = {
 		undefined,
 		mediaDuplicatesPath,
 	),
-	'Dialog from Media': mediaState(
-		mediaDuplicatesApi(undefined, {
-			[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
-		}),
-		openMediaPurgeDialog,
-		mediaDuplicatesPath,
-	),
-	'Member: button hidden': mediaState(
-		mediaDuplicatesApi(undefined, { 'GET /v1/auth/me': sessionWithRole('member') }),
-		undefined,
-		mediaDuplicatesPath,
-	),
-	'Offline: button disabled': mediaState(mediaDuplicatesApi(), goOffline, mediaDuplicatesPath),
+	'Duplicates tab: offline': mediaState(mediaDuplicatesApi(), goOffline, mediaDuplicatesPath),
 }

 const activityOwnerSession: ApiMock = {
@@ -2869,6 +2887,25 @@ const activityBoardEvents = [
 	),
 ]

+const homeActivityTimes = [
+	'2026-09-10T08:58:00Z',
+	'2026-09-10T08:31:00Z',
+	'2026-09-10T07:55:00Z',
+	'2026-09-10T06:55:00Z',
+	'2026-09-10T02:00:00Z',
+]
+const homeActivityMock: ApiMock = {
+	status: 200,
+	body: {
+		items: activityBoardEvents
+			.slice(0, 5)
+			.map((event, index) => ({ ...event, created_at: homeActivityTimes[index] })),
+		total: 5,
+		page: 1,
+		size: 5,
+	},
+}
+
 function activityPage(items: unknown[], total: number) {
 	return { items, total, page: 1, size: 25 }
 }
@@ -3121,11 +3158,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		'Up to date': { path: '/settings', skip: 'clock-sensitive' },
 		Checking: {
 			path: '/settings',
-			exception: {
-				maxPercent: 11.3,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			api: updateApi('owner', updateNeverChecked(), updateCheckHangs),
 		},
 		'Check failed': { path: '/settings', skip: 'clock-sensitive' },
@@ -3134,20 +3166,10 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		Downloading: {
 			path: '/settings',
 			api: updateApi('owner', updateDownloading()),
-			exception: {
-				maxPercent: 10.6,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 		},
 		Verifying: {
 			path: '/settings',
 			api: updateApi('owner', updateJob('verifying')),
-			exception: {
-				maxPercent: 10.8,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 		},
 		'Ready to install': { path: '/settings', api: updateApi('owner', updateJob('ready')) },
 		'Restart: confirm': {
@@ -3188,29 +3210,14 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		},
 		'Download failed': {
 			path: '/settings',
-			exception: {
-				maxPercent: 10.9,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			api: updateApi('owner', updateJob('failed', { error: 'download' })),
 		},
 		'Verification failed': {
 			path: '/settings',
-			exception: {
-				maxPercent: 10.5,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			api: updateApi('owner', updateJob('failed', { error: 'verification' })),
 		},
 		'Too many requests (429)': {
 			path: '/settings',
-			exception: {
-				maxPercent: 11.3,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			api: updateApi('owner', updateNeverChecked(), {
 				status: 429,
 				headers: { 'Retry-After': '42' },
@@ -3218,22 +3225,14 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		},
 		'Not prepared': {
 			path: '/settings',
-			exception: {
-				maxPercent: 11.9,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
-			api: updateApi('owner', updateAvailable()),
+			now: boardNow,
+			api: updateApi('owner', { ...updateAvailable(), checked_at: '2026-09-10T09:41:00Z' }),
 		},
 		'Not prepared: command copied': {
 			path: '/settings',
-			exception: {
-				maxPercent: 11.9,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			origin: integrationOrigin,
-			api: updateApi('owner', updateAvailable()),
+			now: boardNow,
+			api: updateApi('owner', { ...updateAvailable(), checked_at: '2026-09-10T09:41:00Z' }),
 			steps: async (page) => {
 				await page.getByRole('button', { name: 'Copy', exact: true }).click()
 				await page.mouse.move(0, 0)
@@ -3556,11 +3555,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 	home: {
 		Default: {
 			path: '/home',
-			exception: {
-				maxPercent: 13.5,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			now: boardNow,
 			api: {
 				'GET /v1/auth/me': verifiedSession,
@@ -3571,26 +3565,16 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		},
 		Loading: {
 			path: '/home',
-			exception: {
-				maxPercent: 18.6,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			now: boardNow,
 			api: {
 				'GET /v1/auth/me': verifiedSession,
-				'GET /v1/activity': homeActivityMock,
+				'GET /v1/activity': { ...homeActivityMock, hang: true },
 				'GET /v1/system/update': { status: 200, body: updateStatusBody() },
 				'GET /v1/article/': { status: 200, body: sixArticlesFixture, hang: true },
 			},
 		},
 		'Empty, first run': {
 			path: '/home',
-			exception: {
-				maxPercent: 11.4,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			now: boardNow,
 			api: {
 				'GET /v1/auth/me': verifiedSession,
@@ -3601,11 +3585,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		},
 		Error: {
 			path: '/home',
-			exception: {
-				maxPercent: 25.3,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
 			now: boardNow,
 			api: {
 				'GET /v1/auth/me': verifiedSession,
@@ -3616,11 +3595,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		},
 		'Update available (owner)': {
 			path: '/home',
-			exception: {
-				maxPercent: 11.9,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
+			now: boardNow,
 			api: {
 				'GET /v1/auth/me': verifiedSession,
 				'GET /v1/activity': homeActivityMock,
@@ -3630,11 +3605,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		},
 		'Update ready to install (owner)': {
 			path: '/home',
-			exception: {
-				maxPercent: 11.9,
-				reason: newCardAbsentReason,
-				approvedBy: 'fallen',
-			},
+			now: boardNow,
 			api: {
 				'GET /v1/auth/me': verifiedSession,
 				'GET /v1/activity': homeActivityMock,
@@ -4176,27 +4147,3 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 	media: { ...mediaStates, ...mediaPurgeStates },
 	'media-picker': pickerStates,
 }
-
-const hideCleanupCard = '[data-testid="media-cleanup-card"] { display: none !important }'
-
-function withoutCleanupCard(state: VisualState): VisualState {
-	if (state.skip) {
-		return state
-	}
-	return {
-		...state,
-		api: { ...state.api, [purgeSettingsPath]: { status: 200, hang: true } },
-		steps: async (page) => {
-			await page.addStyleTag({ content: hideCleanupCard })
-			await state.steps?.(page)
-			await page.addStyleTag({ content: hideCleanupCard })
-			await page.mouse.move(0, 0)
-		},
-	}
-}
-
-for (const [name, state] of Object.entries(visualStates.settings!)) {
-	if (!(name in cleanupStates)) {
-		visualStates.settings![name] = withoutCleanupCard(state)
-	}
-}