feat: media duplicate purge, part 3 of 3: the SPA (Settings "Media cleanup" card, PurgeDuplicatesDialog, Media Duplicates toolbar button)
This commit is contained in:
fsylvain committed
1 parent
1a55a39425
commit
2303b12377
26 files changed
+3856
-83
No files matched your search
+356
-1
@@ -2246,6 +2246,336 @@ const apiKeysStates: Record<string, VisualState> = {
|
||||
},
|
||||
}
|
||||
|
||||
const purgeSettingsPath = 'GET /v1/media/purge-settings'
|
||||
const purgePatchPath = 'PATCH /v1/media/purge-settings'
|
||||
const purgePreviewPath = 'GET /v1/media/purge-preview'
|
||||
const purgeRunPath = 'POST /v1/media/purge'
|
||||
const purgeStaleCopy =
|
||||
'The library changed, so nothing was purged. Check the new summary and try again.'
|
||||
|
||||
function purgeSettingsBody(overrides: Record<string, unknown> = {}) {
|
||||
return {
|
||||
auto_purge_enabled: false,
|
||||
auto_purge_interval_days: 30,
|
||||
last_purge_at: null,
|
||||
last_purge_merged: 0,
|
||||
last_purge_articles_updated: 0,
|
||||
enabled_at: null,
|
||||
next_purge_at: null,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
const purgeLastRun = {
|
||||
last_purge_at: '2026-06-14T09:00:00Z',
|
||||
last_purge_merged: 3,
|
||||
last_purge_articles_updated: 5,
|
||||
}
|
||||
|
||||
const purgeOnBody = purgeSettingsBody({
|
||||
...purgeLastRun,
|
||||
auto_purge_enabled: true,
|
||||
enabled_at: '2026-06-14T09:00:00Z',
|
||||
next_purge_at: '2026-07-14T09:00:00Z',
|
||||
})
|
||||
|
||||
const purgeDoneLast = {
|
||||
last_purge_at: '2026-10-05T09:00:00Z',
|
||||
last_purge_merged: 9,
|
||||
last_purge_articles_updated: 12,
|
||||
}
|
||||
|
||||
const purgeGroups = [
|
||||
{
|
||||
keep_id: 12,
|
||||
filename: 'floorboards.jpg',
|
||||
url: '/media/floorboards.jpg',
|
||||
used_in: 4,
|
||||
merged: 2,
|
||||
},
|
||||
{ keep_id: 7, filename: 'IMG_4471.jpg', url: '/media/IMG_4471.jpg', used_in: 2, merged: 1 },
|
||||
{
|
||||
keep_id: 2,
|
||||
filename: 'kitchen-after.webp',
|
||||
url: '/media/kitchen-after.webp',
|
||||
used_in: 3,
|
||||
merged: 3,
|
||||
},
|
||||
{ keep_id: 4, filename: 'logo-renew.svg', url: '/media/logo-renew.svg', used_in: 5, merged: 3 },
|
||||
{
|
||||
keep_id: 11,
|
||||
filename: 'lime-plaster.jpg',
|
||||
url: '/media/lime-plaster.jpg',
|
||||
used_in: 2,
|
||||
merged: 1,
|
||||
},
|
||||
]
|
||||
|
||||
function purgePreviewBody(overrides: Record<string, unknown> = {}) {
|
||||
return {
|
||||
groups: 4,
|
||||
copies: 9,
|
||||
articles: 12,
|
||||
list: purgeGroups.slice(0, 4),
|
||||
more: 0,
|
||||
fingerprint: 'ab12',
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
const purgePreviewMany = purgePreviewBody({
|
||||
groups: 8,
|
||||
copies: 15,
|
||||
articles: 24,
|
||||
list: purgeGroups,
|
||||
more: 3,
|
||||
})
|
||||
const purgePreviewOne = purgePreviewBody({
|
||||
groups: 1,
|
||||
copies: 1,
|
||||
articles: 2,
|
||||
list: [purgeGroups[1]],
|
||||
fingerprint: 'one',
|
||||
})
|
||||
const purgePreviewThree = purgePreviewBody({
|
||||
groups: 3,
|
||||
copies: 7,
|
||||
articles: 10,
|
||||
list: [purgeGroups[0], purgeGroups[2], purgeGroups[3]],
|
||||
fingerprint: 'cd34',
|
||||
})
|
||||
const purgePreviewNone = purgePreviewBody({
|
||||
groups: 0,
|
||||
copies: 0,
|
||||
articles: 0,
|
||||
list: [],
|
||||
fingerprint: 'none',
|
||||
})
|
||||
|
||||
const purgeRunPartial = {
|
||||
groups_total: 4,
|
||||
groups_purged: 3,
|
||||
merged: 8,
|
||||
articles_updated: 10,
|
||||
failed_groups: 1,
|
||||
}
|
||||
const purgeRunDone = {
|
||||
groups_total: 4,
|
||||
groups_purged: 4,
|
||||
merged: 9,
|
||||
articles_updated: 12,
|
||||
failed_groups: 0,
|
||||
}
|
||||
|
||||
function sessionWithRole(role: string): ApiMock {
|
||||
return { status: 200, body: { ...(verifiedSession.body as object), role } }
|
||||
}
|
||||
|
||||
function cleanupApi(
|
||||
settings: ApiMock,
|
||||
overrides: Record<string, ApiMock> = {},
|
||||
role = 'owner',
|
||||
): Record<string, ApiMock> {
|
||||
return {
|
||||
'GET /v1/auth/me': sessionWithRole(role),
|
||||
'GET /v1/settings/': { status: 200, body: { version: updateRunningVersion } },
|
||||
'GET /v1/system/update': { status: 200, hang: true },
|
||||
[purgeSettingsPath]: settings,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function settingsBody(body: unknown): ApiMock {
|
||||
return { status: 200, body }
|
||||
}
|
||||
|
||||
function cleanupState(
|
||||
api: Record<string, ApiMock>,
|
||||
steps?: (page: Page) => Promise<void>,
|
||||
): VisualState {
|
||||
return { path: '/settings', api, steps }
|
||||
}
|
||||
|
||||
async function openCleanupDialog(page: Page) {
|
||||
await page.getByRole('button', { name: 'Purge duplicates', exact: true }).click()
|
||||
await page.getByRole('alertdialog').waitFor()
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
|
||||
function confirmCleanupDialog(label: string, wait?: string) {
|
||||
return async (page: Page) => {
|
||||
await openCleanupDialog(page)
|
||||
await page
|
||||
.getByRole('alertdialog')
|
||||
.getByRole('button', { name: label, exact: true })
|
||||
.click()
|
||||
if (wait) {
|
||||
await page.getByText(wait, { exact: true }).first().waitFor()
|
||||
}
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
async function typeDays(page: Page, value: string) {
|
||||
const field = page.locator('#auto-purge-days')
|
||||
await field.fill(value)
|
||||
await field.press('Enter')
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
|
||||
function afterFirst(first: unknown, later: unknown): ApiMock {
|
||||
return { status: 200, bodyFor: (_url, call) => (call === 1 ? first : later) }
|
||||
}
|
||||
|
||||
function cleanupDialogApi(overrides: Record<string, ApiMock> = {}) {
|
||||
return cleanupApi(settingsBody(purgeSettingsBody()), {
|
||||
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
|
||||
...overrides,
|
||||
})
|
||||
}
|
||||
|
||||
async function holdToast(page: Page) {
|
||||
await page.getByText('Duplicates purged', { exact: true }).hover()
|
||||
}
|
||||
|
||||
function successState(settings: ApiMock) {
|
||||
return cleanupState(
|
||||
cleanupApi(settings, {
|
||||
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
|
||||
[purgeRunPath]: settingsBody(purgeRunDone),
|
||||
}),
|
||||
async (page) => {
|
||||
await confirmCleanupDialog('Purge 4 groups', 'Duplicates purged')(page)
|
||||
await holdToast(page)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const cleanupStates: Record<string, VisualState> = {
|
||||
'Default: off, never run': cleanupState(cleanupApi(settingsBody(purgeSettingsBody()))),
|
||||
'On: 30 days, last run': cleanupState(cleanupApi(settingsBody(purgeOnBody))),
|
||||
Saving: cleanupState(
|
||||
cleanupApi(settingsBody(purgeSettingsBody(purgeLastRun)), {
|
||||
[purgePatchPath]: { status: 200, hang: true },
|
||||
}),
|
||||
async (page) => {
|
||||
await page.getByRole('switch').click()
|
||||
await page.locator('#auto-purge-days').focus()
|
||||
await page.mouse.move(0, 0)
|
||||
},
|
||||
),
|
||||
Saved: cleanupState(
|
||||
cleanupApi(settingsBody(purgeSettingsBody(purgeLastRun)), {
|
||||
[purgePatchPath]: settingsBody(purgeOnBody),
|
||||
}),
|
||||
async (page) => {
|
||||
await page.getByRole('switch').click()
|
||||
await page.getByText('Saved', { exact: true }).waitFor()
|
||||
await page.mouse.move(0, 0)
|
||||
},
|
||||
),
|
||||
'Save failed': cleanupState(
|
||||
cleanupApi(settingsBody(purgeOnBody), { [purgePatchPath]: { status: 500 } }),
|
||||
async (page) => {
|
||||
await typeDays(page, '45')
|
||||
await page.getByText("Couldn't save. Try again in a moment.").waitFor()
|
||||
},
|
||||
),
|
||||
'Validation error': cleanupState(cleanupApi(settingsBody(purgeOnBody)), async (page) => {
|
||||
await typeDays(page, '400')
|
||||
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 })),
|
||||
Offline: cleanupState(cleanupApi(settingsBody(purgeOnBody)), goOffline),
|
||||
'Loading preview': cleanupState(
|
||||
cleanupDialogApi({ [purgePreviewPath]: { status: 200, hang: true } }),
|
||||
openCleanupDialog,
|
||||
),
|
||||
Confirm: cleanupState(cleanupDialogApi(), openCleanupDialog),
|
||||
'Confirm: many groups': cleanupState(
|
||||
cleanupDialogApi({ [purgePreviewPath]: { status: 200, body: purgePreviewMany } }),
|
||||
openCleanupDialog,
|
||||
),
|
||||
'In progress': cleanupState(
|
||||
cleanupDialogApi({ [purgeRunPath]: { status: 200, hang: true } }),
|
||||
confirmCleanupDialog('Purge 4 groups'),
|
||||
),
|
||||
'Nothing to purge': cleanupState(
|
||||
cleanupDialogApi({ [purgePreviewPath]: { status: 200, body: purgePreviewNone } }),
|
||||
openCleanupDialog,
|
||||
),
|
||||
Error: cleanupState(
|
||||
cleanupDialogApi({ [purgeRunPath]: { status: 500 } }),
|
||||
confirmCleanupDialog(
|
||||
'Purge 4 groups',
|
||||
"Couldn't purge the duplicates. Nothing was changed. Try again in a moment.",
|
||||
),
|
||||
),
|
||||
'Partial failure': cleanupState(
|
||||
cleanupDialogApi({
|
||||
[purgePreviewPath]: afterFirst(purgePreviewBody(), purgePreviewOne),
|
||||
[purgeRunPath]: settingsBody(purgeRunPartial),
|
||||
}),
|
||||
confirmCleanupDialog(
|
||||
'Purge 4 groups',
|
||||
"Some groups couldn't be merged. 3 of 4 groups were purged. Try again to finish.",
|
||||
),
|
||||
),
|
||||
'Conflict (409)': cleanupState(
|
||||
cleanupDialogApi({
|
||||
[purgePreviewPath]: afterFirst(purgePreviewBody(), purgePreviewThree),
|
||||
[purgeRunPath]: { status: 409, body: purgeStaleCopy },
|
||||
}),
|
||||
confirmCleanupDialog('Purge 4 groups', purgeStaleCopy),
|
||||
),
|
||||
Success: successState(afterFirst(purgeSettingsBody(), purgeSettingsBody(purgeDoneLast))),
|
||||
'Success, automatic purge on': successState(
|
||||
afterFirst(
|
||||
purgeOnBody,
|
||||
purgeSettingsBody({
|
||||
...purgeDoneLast,
|
||||
auto_purge_enabled: true,
|
||||
next_purge_at: '2026-11-04T09:00:00Z',
|
||||
}),
|
||||
),
|
||||
),
|
||||
}
|
||||
|
||||
async function openMediaPurgeDialog(page: Page) {
|
||||
await page.getByRole('button', { name: 'Purge duplicates', exact: true }).click()
|
||||
await page.getByRole('alertdialog').waitFor()
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
|
||||
const mediaPurgeStates: Record<string, VisualState> = {
|
||||
'Duplicates: purge all': mediaState(
|
||||
mediaDuplicatesApi(undefined, {
|
||||
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
|
||||
}),
|
||||
openMediaPurgeDialog,
|
||||
mediaDuplicatesPath,
|
||||
),
|
||||
'Duplicates tab with the button': mediaState(
|
||||
mediaDuplicatesApi(),
|
||||
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),
|
||||
}
|
||||
|
||||
export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
profile: {
|
||||
'Account menu': {
|
||||
@@ -2391,6 +2721,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
'Invite sent': { path: '/users', skip: 'clock-sensitive' },
|
||||
},
|
||||
settings: {
|
||||
...cleanupStates,
|
||||
'Up to date': { path: '/settings', skip: 'clock-sensitive' },
|
||||
Checking: {
|
||||
path: '/settings',
|
||||
@@ -3364,6 +3695,30 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
steps: submitAcceptInvite('lea', 'limewash2026'),
|
||||
},
|
||||
},
|
||||
media: mediaStates,
|
||||
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)
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user