feat(studio): datasource managed through the metadata-admin engine, not a bespoke page (#1846)

datasource is a metadata type, so it should be administered by the generic
metadata-admin engine like every other type — not a hand-written System page.

- Register `datasource` as a metadata-admin resource (registry) with a custom
  ListPage that ports the full manager (list / create / edit / delete / test /
  sync objects). It's a *side-effectful* type (secret encryption + connection
  pool + introspection), so writes go through the framework `datasource-admin`
  REST (`/api/v1/datasources/*`), but it now lives inside the engine: engine
  route (`…/component/metadata/resource?type=datasource`), registry slot, shell.
  Form uses the engine's `useMetadataClient`; sync creates objects via it.
- Delete the standalone `DatasourceManagerPage` + `system/datasources` route.
- Add a "Datasources" item to the console admin nav + repoint the System hub
  card to the engine route.
- Fix MetadataRedirect/ObjectRedirect: they left a stray `system/` segment so
  `system/metadata/:type` 404'd — also repairs the existing "Object Manager" link.

Verified live (showcase + setup apps): list, create (eng_demo), and sync
(customers/orders → real object metadata) all work through the engine route.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: 3 people

apps/console/src/AppContent.tsx

@@ -18,7 +18,6 @@ import {
 } from '@object-ui/providers';
 
 const SystemHubPage = lazy(() => import('./pages/system/SystemHubPage').then(m => ({ default: m.SystemHubPage })));
-const DatasourceManagerPage = lazy(() => import('./pages/system/DatasourceManagerPage').then(m => ({ default: m.DatasourceManagerPage })));
 const AppManagementPage = lazy(() => import('./pages/system/AppManagementPage').then(m => ({ default: m.AppManagementPage })));
 const ProfilePage = lazy(() => import('./pages/system/ProfilePage').then(m => ({ default: m.ProfilePage })));
 const ApprovalsInboxPage = lazy(() => import('./pages/system/ApprovalsInboxPage').then(m => ({ default: m.ApprovalsInboxPage })));
@@ -51,7 +50,7 @@ const DocsLayout = lazy(() => import('./pages/DocsLayout'));
 function ObjectRedirect() {
   const { objectName } = useParams<{ objectName?: string }>();
   const location = useLocation();
-  const prefix = location.pathname.replace(/\/objects(\/.*)?$/, '');
+  const prefix = location.pathname.replace(/\/(system\/)?objects(\/.*)?$/, '');
   const target = objectName
     ? `${prefix}/component/metadata/resource/${objectName}?type=object`
     : `${prefix}/component/metadata/resource?type=object`;
@@ -67,7 +66,10 @@ function ObjectRedirect() {
 function MetadataRedirect() {
   const { metadataType, itemName } = useParams<{ metadataType?: string; itemName?: string }>();
   const location = useLocation();
-  const prefix = location.pathname.replace(/\/metadata(\/.*)?$/, '');
+  // Strip an optional leading `system/` too — legacy nav uses
+  // `…/system/metadata/:type`, and the engine route lives at the app root
+  // (`…/component/metadata/resource`), not under `system/`.
+  const prefix = location.pathname.replace(/\/(system\/)?metadata(\/.*)?$/, '');
   const base = `${prefix}/component/metadata/resource`;
   const target = !metadataType
     ? `${prefix}/component/metadata/directory`
@@ -87,7 +89,6 @@ const systemRoutes = (
     <Route path="system/audit-log" element={<Suspense fallback={<LoadingScreen />}><AuditLogPage /></Suspense>} />
     <Route path="system/settings" element={<Suspense fallback={<LoadingScreen />}><SettingsHub /></Suspense>} />
     <Route path="system/settings/:namespace" element={<Suspense fallback={<LoadingScreen />}><SettingsView /></Suspense>} />
-    <Route path="system/datasources" element={<Suspense fallback={<LoadingScreen />}><DatasourceManagerPage /></Suspense>} />
     <Route path="developer" element={<Suspense fallback={<LoadingScreen />}><DeveloperHubPage /></Suspense>} />
     <Route path="developer/api-console" element={<Suspense fallback={<LoadingScreen />}><ApiConsolePage /></Suspense>} />
     <Route path="developer/flow-runs" element={<Suspense fallback={<LoadingScreen />}><FlowRunsPage /></Suspense>} />

apps/console/src/pages/system/DatasourceManagerPage.tsx

@@ -123,7 +123,7 @@ export function SystemHubPage() {
       title: 'Datasources',
       description: 'Connect external databases and sync their tables in as objects',
       icon: Boxes,
-      href: `${basePath}/system/datasources`,
+      href: `${basePath}/component/metadata/resource?type=datasource`,
       countLabel: '',
       count: null,
     },

apps/console/src/pages/system/SystemHubPage.tsx

@@ -286,6 +286,7 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
     }
     items.push(
       { id: 'sys-objects', label: t('layout.systemNav.objectManager', { defaultValue: 'Object Manager' }), type: 'url' as const, url: '/apps/setup/system/metadata/object', icon: 'database' },
+      { id: 'sys-datasources', label: t('layout.systemNav.datasources', { defaultValue: 'Datasources' }), type: 'url' as const, url: '/apps/setup/component/metadata/resource?type=datasource', icon: 'database' },
       { id: 'sys-users', label: t('layout.systemNav.users', { defaultValue: 'Users' }), type: 'url' as const, url: '/apps/setup/system/users', icon: 'users' },
       { id: 'sys-orgs', label: t('layout.systemNav.organizations', { defaultValue: 'Organizations' }), type: 'url' as const, url: '/apps/setup/system/organizations', icon: 'building-2' },
       { id: 'sys-roles', label: t('layout.systemNav.roles', { defaultValue: 'Roles' }), type: 'url' as const, url: '/apps/setup/system/roles', icon: 'shield' },

packages/app-shell/src/layout/AppSidebar.tsx

@@ -237,6 +237,7 @@ export function UnifiedSidebar({ activeAppName }: UnifiedSidebarProps) {
         { id: 'sys-apps', label: t('layout.systemNav.applications', { defaultValue: 'Applications' }), type: 'url' as const, url: '/apps/setup/system/apps', icon: 'layout-grid' },
         { id: 'sys-marketplace', label: t('layout.systemNav.appMarketplace', { defaultValue: 'App Marketplace' }), type: 'url' as const, url: '/apps/setup/system/marketplace', icon: 'store' },
         { id: 'sys-objects', label: t('layout.systemNav.objectManager', { defaultValue: 'Object Manager' }), type: 'url' as const, url: '/apps/setup/system/metadata/object', icon: 'database' },
+        { id: 'sys-datasources', label: t('layout.systemNav.datasources', { defaultValue: 'Datasources' }), type: 'url' as const, url: '/apps/setup/component/metadata/resource?type=datasource', icon: 'database' },
         { id: 'sys-users', label: t('layout.systemNav.users', { defaultValue: 'Users' }), type: 'url' as const, url: '/apps/setup/system/users', icon: 'users' },
         { id: 'sys-orgs', label: t('layout.systemNav.organizations', { defaultValue: 'Organizations' }), type: 'url' as const, url: '/apps/setup/system/organizations', icon: 'building-2' },
         { id: 'sys-roles', label: t('layout.systemNav.roles', { defaultValue: 'Roles' }), type: 'url' as const, url: '/apps/setup/system/roles', icon: 'shield' },