SEP-1270: Fix MySQL/Archive sidebar links and route the sidebar through shared ROUTES

The React shell sidebar hardcoded `to:` paths that drifted from router.tsx:
- MySQL → /backups/mysql resolved to PlaceholderPage (real UI is
  /plugins/mysql_backups, per the plugin's PLUGIN_BASE_PATH)
- Archive → /archive had no route and fell through to NotFoundPage
  (real UI is /plugins/archives)

Fix:
- navigation.tsx now sources every `to:` from the shared ROUTES map instead
  of hardcoded strings, and documents the URL convention (schema-driven
  plugins under /plugins/<name>, domain-grouped backups under /backups/<db>,
  cross-cutting tools at bare top-level paths).
- shared ROUTES: correct the MySQL/Archive values, rename the misleading
  backupsMysql key to mysqlBackups, add checksums/atw/dipper entries, and
  clarify that router.tsx keeps its own literals (alignment is detected by
  the e2e net, not enforced at compile time).
- router.tsx: remove the now-dead /backups/mysql placeholder route.

Audit of every defaultNavItems entry against router.tsx confirmed the rest
resolve correctly (PostgreSQL now routes to BackupPgPlugin shipped in
SEP-1266); the remaining PlaceholderPage entries are intentional.

Add a Playwright sidebar-navigation spec that clicks each non-placeholder
entry and asserts the URL plus a positive sentinel rendered by the target
plugin before checking the page is not the placeholder/404 — the regression
net that would have caught both bugs at review time.

Author: nachodd

frontend/packages/e2e/tests/sidebar-navigation.spec.ts

@@ -0,0 +1,258 @@
+/**
+ * Copyright (C) 2026 Percona LLC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Sidebar wiring regression net (SEP-1270).
+ *
+ * The per-plugin specs (mysql-backups, archives, …) verify each plugin page in
+ * isolation by navigating directly to its URL. They do NOT exercise the sidebar
+ * itself, which is how two regressions slipped through review: the MySQL entry
+ * pointed at /backups/mysql (PlaceholderPage) and the Archive entry at /archive
+ * (no route → NotFoundPage).
+ *
+ * This spec clicks every non-placeholder sidebar entry the way a user would and
+ * asserts (1) the resulting URL, (2) a positive sentinel rendered by the target
+ * plugin, and only then (3) that neither the "under construction" PlaceholderPage
+ * nor the 404 NotFoundPage is showing. The positive sentinel is essential: pages
+ * are lazy()/Suspense-loaded, so the URL flips synchronously on click while the
+ * chunk is still resolving — asserting placeholder/404 *absence* against that
+ * still-loading DOM would pass even for a regressed route. Waiting for the
+ * target's own element first guarantees the page has actually mounted.
+ *
+ * Entries intentionally excluded (they still route to PlaceholderPage by design):
+ * Alerts/Templates, Schema Change/Alters, Reports, Settings.
+ */
+
+import { test, expect, type Locator, type Page } from '@playwright/test';
+
+// ── Mocks ───────────────────────────────────────────────────────────────────
+// NOTE: this auth+API mock is intentionally close to the one in shell.spec.ts.
+// Per _template.spec.ts, the shared base ought to be extracted to
+// tests/helpers/mock-apis.ts once a consumer needs it; tracked as a fast-follow
+// so this ticket stays scoped to the sidebar fix.
+
+const MOCK_TOKEN = { access_token: 'smoke-test-token', expires_in: 3600 };
+
+const MOCK_USER = {
+  id: '00000000-0000-0000-0000-000000000001',
+  username: 'smoke',
+  email: 'smoke@percona.com',
+  firstName: 'Smoke',
+  lastName: 'Test',
+  isAdmin: false,
+};
+
+// Heading served for schema-driven plugins whose display name we don't assert
+// individually (the URL already identifies them). Schema-driven pages render
+// `schema.display_name` as their h4, so this is a deterministic sentinel.
+const GENERIC_PLUGIN_HEADING = 'SEP Plugin';
+
+// Plugins whose display-name heading we assert explicitly (keyed by the
+// `<name>` in /api/plugins/<name>/schema). These are the schema-driven entries
+// this ticket is about — including the two that regressed.
+const SCHEMA_DISPLAY_NAMES: Record<string, string> = {
+  checksums: 'Checksums',
+  mysql_backups: 'MySQL Backups',
+  archives: 'Archives',
+};
+
+async function mockAuthenticatedApis(page: Page): Promise<void> {
+  await page.route('**/api/**', (route) => {
+    const { pathname } = new URL(route.request().url());
+
+    // Pass through Vite's internal module-serving paths (e.g. /@fs/...)
+    if (!pathname.startsWith('/api/')) {
+      return route.continue();
+    }
+
+    if (pathname.includes('/oauth/refresh')) {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_TOKEN),
+      });
+    }
+
+    if (pathname.includes('/users/me')) {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_USER),
+      });
+    }
+
+    const schemaMatch = pathname.match(/\/api\/plugins\/(.+)\/schema$/);
+    if (schemaMatch) {
+      const name = schemaMatch[1];
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name,
+          display_name: SCHEMA_DISPLAY_NAMES[name] ?? GENERIC_PLUGIN_HEADING,
+          capabilities: { chaining: false, alert_on_fail: false, scheduling: false, stats: false },
+          forms: [],
+          list_view: { columns: [] },
+        }),
+      });
+    }
+
+    if (pathname.endsWith('/sep/dashboard/')) {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ nodes: 0, tasks: 0, snippets: 0, targets: 0 }),
+      });
+    }
+
+    if (pathname.includes('/tasks/history/')) {
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ items: [], total: 0, offset: 0, limit: 5 }),
+      });
+    }
+
+    // Default: empty success for plugin task lists and anything else
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: '[]',
+    });
+  });
+}
+
+// ── Sidebar map ───────────────────────────────────────────────────────────────
+// One entry per non-placeholder leaf in shell/src/contexts/navigation.tsx.
+// `group`      — collapsible parent that must be expanded before the child shows.
+// `urlPattern` — matched against the post-navigation URL (plugins may redirect
+//                to a default sub-route, e.g. /backups/mongodb → /backups/mongodb/backups).
+// `sentinel`   — positive locator the target page renders; asserted before the
+//                placeholder/404 negative checks so we never assert against a
+//                still-loading DOM.
+interface SidebarTarget {
+  label: string;
+  group?: string;
+  urlPattern: RegExp;
+  sentinel: (page: Page) => Locator;
+}
+
+const heading = (name: string) => (page: Page) => page.getByRole('heading', { name }).first();
+
+const TARGETS: SidebarTarget[] = [
+  {
+    label: 'Inventory',
+    urlPattern: /\/inventory(\/|$)/,
+    sentinel: heading(GENERIC_PLUGIN_HEADING),
+  },
+  { label: 'Tasks', urlPattern: /\/tasks(\/|$)/, sentinel: heading(GENERIC_PLUGIN_HEADING) },
+  { label: 'Snippets', urlPattern: /\/snippets(\/|$)/, sentinel: heading('Snippet Manager') },
+  {
+    label: 'Collect Diagnostic Data',
+    urlPattern: /\/atw(\/|$)/,
+    sentinel: heading('Collect Diagnostic Data'),
+  },
+  { label: 'Checksums', urlPattern: /\/plugins\/checksums(\/|$)/, sentinel: heading('Checksums') },
+  {
+    label: 'Troubleshooting',
+    group: 'Alerts',
+    urlPattern: /\/alerts\/troubleshooting(\/|$)/,
+    // Empty-state page renders no heading — assert its empty-state copy instead.
+    sentinel: (page) => page.getByText(/No alerts found/i),
+  },
+  {
+    label: 'MySQL',
+    group: 'Backups',
+    urlPattern: /\/plugins\/mysql_backups(\/|$)/,
+    sentinel: heading('MySQL Backups'),
+  },
+  {
+    label: 'MongoDB',
+    group: 'Backups',
+    urlPattern: /\/backups\/mongodb(\/|$)/,
+    sentinel: heading(GENERIC_PLUGIN_HEADING),
+  },
+  {
+    label: 'PostgreSQL',
+    group: 'Backups',
+    urlPattern: /\/backups\/postgresql(\/|$)/,
+    sentinel: heading(GENERIC_PLUGIN_HEADING),
+  },
+  { label: 'Archive', urlPattern: /\/plugins\/archives(\/|$)/, sentinel: heading('Archives') },
+  {
+    label: 'Dipper Data Collection',
+    urlPattern: /\/dipper(\/|$)/,
+    sentinel: heading(GENERIC_PLUGIN_HEADING),
+  },
+];
+
+// PlaceholderPage / NotFoundPage sentinel copy — their presence means the
+// sidebar landed on a broken (unmigrated / unrouted) destination.
+const PLACEHOLDER_TEXT = /implemented during the frontend migration/i;
+const NOT_FOUND_TEXT = /Page not found/i;
+
+const LAZY_TIMEOUT = 30_000;
+
+test.describe('sidebar navigation wiring', () => {
+  test.beforeEach(async ({ page }) => {
+    await mockAuthenticatedApis(page);
+    await page.goto('/');
+    // Wait for the authenticated shell (sidebar) before clicking around.
+    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible({
+      timeout: LAZY_TIMEOUT,
+    });
+  });
+
+  for (const target of TARGETS) {
+    test(`sidebar → ${target.group ? `${target.group} / ` : ''}${target.label} mounts its plugin`, async ({
+      page,
+    }) => {
+      // Expand the parent group so its children render (Collapse uses unmountOnExit).
+      if (target.group) {
+        const child = page.getByRole('button', { name: target.label });
+        if (!(await child.isVisible().catch(() => false))) {
+          await page.getByRole('button', { name: target.group }).click();
+        }
+      }
+
+      await page.getByRole('button', { name: target.label }).click();
+
+      // URL resolves to the target plugin's route (not a placeholder / 404 path).
+      await expect(page).toHaveURL(target.urlPattern, { timeout: LAZY_TIMEOUT });
+
+      // Positive sentinel: wait until the target page has actually mounted. This
+      // must come BEFORE the negative checks below, otherwise they race the
+      // lazy chunk and pass against a still-loading DOM.
+      await expect(target.sentinel(page)).toBeVisible({ timeout: LAZY_TIMEOUT });
+
+      // Negative sentinels: the broken destinations render these, the real ones never do.
+      await expect(page.getByText(PLACEHOLDER_TEXT)).toHaveCount(0);
+      await expect(page.getByText(NOT_FOUND_TEXT)).toHaveCount(0);
+    });
+  }
+
+  test('sidebar → Dashboard returns home', async ({ page }) => {
+    // Leave the dashboard first so the click is a real navigation.
+    await page.getByRole('button', { name: 'Inventory' }).click();
+    await expect(page).toHaveURL(/\/inventory(\/|$)/, { timeout: LAZY_TIMEOUT });
+
+    await page.getByRole('button', { name: 'Dashboard' }).click();
+    await expect(page).toHaveURL(/\/$/);
+    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
+    await expect(page.getByText(NOT_FOUND_TEXT)).toHaveCount(0);
+  });
+});

frontend/packages/shared/src/index.ts

@@ -26,22 +26,38 @@
  * shared across all packages (e.g., route paths, feature flags).
  */
 
-// ── Route paths (single source of truth for navigation + router) ──────
+// ── Route paths (single source of truth for the sidebar) ──────────────
+//
+// navigation.tsx (the sidebar) reads every `to:` from this map. router.tsx
+// still declares its own `path` literals (it is NOT wired to this map), so
+// each value here SHOULD match the corresponding router path and, for
+// schema-driven plugins, that plugin's `PLUGIN_BASE_PATH`. Nothing enforces
+// that at compile time — the `sidebar-navigation` e2e spec is the safety net
+// that DETECTS drift (it cannot prevent it). When migrating a plugin, update
+// the router route and the entry here together (see SEP-1270). Convention:
+//   • schema-driven plugins live under /plugins/<name>  (checksums, mysql_backups, archives)
+//   • domain-grouped backups keep /backups/<db>          (mongodb, postgresql)
+//   • cross-cutting tools stay at bare top-level paths   (inventory, tasks, …)
+// `schema*` entries below are legacy /schema-change/* aliases that router.tsx
+// still routes; they have no sidebar consumer but are kept intentionally.
 export const ROUTES = {
   dashboard: '/',
   login: '/login',
   inventory: '/inventory',
   tasks: '/tasks',
   snippets: '/snippets',
+  atw: '/atw',
   alertTemplates: '/alerts/templates',
   alertTroubleshooting: '/alerts/troubleshooting',
   schemaAlters: '/schema-change/alters',
   schemaChecksums: '/schema-change/checksums',
   schemaInventory: '/schema-change/inventory',
-  backupsMysql: '/backups/mysql',
+  checksums: '/plugins/checksums',
+  mysqlBackups: '/plugins/mysql_backups',
   backupsMongodb: '/backups/mongodb',
   backupsPostgresql: '/backups/postgresql',
-  archive: '/archive',
+  archive: '/plugins/archives',
+  dipper: '/dipper',
   reports: '/reports',
   settings: '/settings',
 } as const;

frontend/packages/shell/src/contexts/navigation.tsx

@@ -32,6 +32,7 @@ import BarChartIcon from '@mui/icons-material/BarChart';
 import SupportAgentIcon from '@mui/icons-material/SupportAgent';
 import ScienceIcon from '@mui/icons-material/Science';
 import { MySqlIcon, MongoIcon, PostgreSqlIcon } from '@percona/percona-ui';
+import { ROUTES } from '@sep/shared';
 import type { SvgIconComponent } from '@mui/icons-material';
 import type { SvgIconProps } from '@mui/material';
 
@@ -44,38 +45,49 @@ export interface NavItem {
 
 // Navigation matching SEP's plugin-based sidebar.
 // Backup sub-items use percona-ui's database-specific icons.
+//
+// URL convention (see SEP-1270): every `to:` here is sourced from the shared
+// `ROUTES` map. router.tsx keeps its own `path` literals and is not wired to
+// ROUTES, so when a plugin is migrated to React update BOTH the router route
+// and the matching ROUTES entry together — never hardcode a path string here.
+// Drift between the two is what made the sidebar point at PlaceholderPage /
+// NotFoundPage (the regression this ticket fixed for MySQL & Archive); the
+// `sidebar-navigation` e2e spec now guards against it. Paths follow three families:
+//   • /plugins/<name>  — schema-driven plugins (checksums, mysql_backups, archives)
+//   • /backups/<db>    — domain-grouped backup plugins (mongodb, postgresql)
+//   • bare top-level   — cross-cutting tools (inventory, tasks, snippets, atw, dipper)
 const defaultNavItems: NavItem[] = [
-  { title: 'Dashboard', icon: DashboardIcon, to: '/' },
-  { title: 'Inventory', icon: DnsIcon, to: '/inventory' },
-  { title: 'Tasks', icon: AssignmentIcon, to: '/tasks' },
-  { title: 'Snippets', icon: CodeIcon, to: '/snippets' },
-  { title: 'Collect Diagnostic Data', icon: SupportAgentIcon, to: '/atw' },
+  { title: 'Dashboard', icon: DashboardIcon, to: ROUTES.dashboard },
+  { title: 'Inventory', icon: DnsIcon, to: ROUTES.inventory },
+  { title: 'Tasks', icon: AssignmentIcon, to: ROUTES.tasks },
+  { title: 'Snippets', icon: CodeIcon, to: ROUTES.snippets },
+  { title: 'Collect Diagnostic Data', icon: SupportAgentIcon, to: ROUTES.atw },
   {
     title: 'Alerts',
     icon: NotificationsActiveIcon,
     children: [
-      { title: 'Templates', icon: DescriptionIcon, to: '/alerts/templates' },
-      { title: 'Troubleshooting', icon: TroubleshootIcon, to: '/alerts/troubleshooting' },
+      { title: 'Templates', icon: DescriptionIcon, to: ROUTES.alertTemplates },
+      { title: 'Troubleshooting', icon: TroubleshootIcon, to: ROUTES.alertTroubleshooting },
     ],
   },
   {
     title: 'Schema Change',
     icon: StorageIcon,
-    children: [{ title: 'Alters', icon: TableChartIcon, to: '/schema-change/alters' }],
+    children: [{ title: 'Alters', icon: TableChartIcon, to: ROUTES.schemaAlters }],
   },
-  { title: 'Checksums', icon: CheckCircleIcon, to: '/plugins/checksums' },
+  { title: 'Checksums', icon: CheckCircleIcon, to: ROUTES.checksums },
   {
     title: 'Backups',
     icon: BackupIcon,
     children: [
-      { title: 'MySQL', icon: MySqlIcon, to: '/backups/mysql' },
-      { title: 'MongoDB', icon: MongoIcon, to: '/backups/mongodb' },
-      { title: 'PostgreSQL', icon: PostgreSqlIcon, to: '/backups/postgresql' },
+      { title: 'MySQL', icon: MySqlIcon, to: ROUTES.mysqlBackups },
+      { title: 'MongoDB', icon: MongoIcon, to: ROUTES.backupsMongodb },
+      { title: 'PostgreSQL', icon: PostgreSqlIcon, to: ROUTES.backupsPostgresql },
     ],
   },
-  { title: 'Archive', icon: ArchiveIcon, to: '/archive' },
-  { title: 'Dipper Data Collection', icon: ScienceIcon, to: '/dipper' },
-  { title: 'Reports', icon: BarChartIcon, to: '/reports' },
+  { title: 'Archive', icon: ArchiveIcon, to: ROUTES.archive },
+  { title: 'Dipper Data Collection', icon: ScienceIcon, to: ROUTES.dipper },
+  { title: 'Reports', icon: BarChartIcon, to: ROUTES.reports },
 ];
 
 interface NavigationState {

frontend/packages/shell/src/router.tsx

@@ -97,7 +97,9 @@ export const router = createBrowserRouter([
           { path: 'schema-change/checksums/*', element: <ChecksumsPlugin /> },
           { path: 'plugins/mysql_backups/*', element: <MysqlBackupsPlugin /> },
           { path: 'schema-change/inventory/*', element: <InventoryPlugin /> },
-          { path: 'backups/mysql', element: <PlaceholderPage /> },
+          // NOTE: MySQL Backups lives at /plugins/mysql_backups (above), matching
+          // its PLUGIN_BASE_PATH. The old /backups/mysql placeholder route was
+          // removed in SEP-1270 — the sidebar now points at the real plugin.
           { path: 'backups/mongodb/*', element: <BackupMongoPlugin /> },
           { path: 'backups/postgresql/*', element: <BackupPgPlugin /> },
           { path: 'plugins/archives/*', element: <ArchivesPlugin /> },