fix(admin): refetch Inventory when its tab becomes visible (#327)

Two items published from the Review queue did not appear in Inventory. Publishing was never at fault: the items were published, the rows were right, and the API returned them. The Inventory tab was showing a list it had fetched earlier and never refreshed.

antd keeps a tab pane mounted once it has been rendered, and Inventory is the default tab, so its pane mounts at page load whether or not anyone looks at it. Its only fetch runs from an effect depending on the filters, so it fires on mount and when a filter changes and at no other time. Open the admin, switch to the Review queue, publish, switch back, and nothing has re-run — the table still holds the list built before the submissions existed. A browser reload shows them, which is what makes this read as publishing being broken rather than as a stale table.

The tab is controlled now and tells Inventory whether it is the one on screen, and Inventory refetches when that becomes true. Guarded on visibility rather than fetching unconditionally, because the pane lives for the life of the page and would otherwise keep refetching while hidden.

destroyInactiveTabPane on the Tabs would also have fixed it, by remounting, and was rejected: it discards every tab's state on every switch — filters, scroll position, a half-filled form — and refetches all of them repeatedly, which is a much larger behavioural change than this bug is worth.

The existing publish test passes against the broken behaviour, and that is the reason this went unnoticed. It asserts against GET /api/admin/items, and the API was always correct. The new test asserts through the UI and never reloads the page: Inventory is opened before publishing, so its list is fetched while the item still carries its submission-timestamp name, and the assertion afterwards looks for the name given at publish — which a stale list cannot contain. A reload anywhere in it would make it pass against the bug it exists to catch.

AdminPage's comment claimed only the active panel is mounted. It is only the active panel that is visible; the rest stay in the DOM. That mistaken belief is the shape of this bug, so the comment now says which it is and why it matters.

Not fixed here: Categories, Tags, Upload links and Customers are mounted-once children of the same Tabs and are all changeable from elsewhere, so they very likely share this. Recorded on the issue rather than assumed to be fine.

Verified: tsc clean for src and tests, lint 0 errors, production build green. The new test needs CI to run — the e2e suite wants a browser and a database this machine cannot provide.

Closes #327

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
synAdmin
2026-09-09 13:32:32 -05:00
committed by bermudalamb
co-authored by Claude Opus 5
parent 83b5b5e287
commit 4b1ffffc25
3 changed files with 91 additions and 6 deletions
@@ -144,4 +144,53 @@ test.describe('The review queue', () => {
await card.getByRole('button', { name: 'Rotate right' }).click();
expect((await rotated).status()).toBe(204);
});
/**
* The bug reported from QA in #327: two items were published and did not
* appear in Inventory.
*
* The publish itself was never at fault, which is why the test above passes —
* it asserts against `GET /api/admin/items`, and the API was always right.
* What was wrong was the Inventory tab: antd keeps a pane mounted once it has
* been rendered, so a tab opened at page load and returned to later refetches
* nothing and shows the list it built the first time.
*
* So this asserts through the UI and, crucially, **never reloads the page**.
* Opening Inventory before publishing is what arms it: the list is fetched
* while the item still has its submission-timestamp name, and the assertion
* afterwards looks for the name given at publish — which a stale list cannot
* contain. A `page.reload()` anywhere in here would make it pass against the
* broken behaviour.
*/
test('an item published from the queue appears in Inventory without a reload', async ({
page,
admin
}) => {
const note = `Tab staleness ${RUN}`;
const publishedName = `Vase ${RUN}`;
await submitAnItem(page, note);
// Inventory first, so its pane is mounted and its list fetched before the
// publish happens. This is the state a real admin is in: the tab has been
// open since they arrived.
await admin.open('Inventory');
await expect(admin.activeTable).toBeVisible();
await admin.openTab('Review queue');
const card = page.locator('.ant-card').filter({ hasText: note });
await expect(card).toBeVisible();
await card.getByLabel('Name').fill(publishedName);
// Setting a price confirms it, so publishing does not stop on the
// unconfirmed-price dialog the test above covers.
await card.getByLabel('Price').fill('42');
await card.getByRole('button', { name: 'Publish', exact: true }).click();
await expect(card.getByText('you set this price')).toBeVisible();
await admin.openTab('Inventory');
// Sorted by created_at descending and submitted moments ago, so it is on the
// first page rather than somewhere in the accumulated dev database.
await expect(admin.activePanel.getByText(publishedName)).toBeVisible();
});
});