Merge pull request #1193 from objectstack-ai/copilot/refactor-object-manager-details

Author: hotlong

CHANGELOG.md

@@ -15,8 +15,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - **Console app** (`@object-ui/console`): Fixed unused import warnings (`MetadataFormFieldDef`, `MetadataActionDef`, `toast`) and a `defaultValue` type mismatch (`unknown` → `string | undefined`) in `MetadataService.ts`.
 
+### Changed
+
+- **Object detail page migrated to PageSchema-driven rendering** (`@object-ui/console`): The object detail page (both at `/system/objects/:objectName` and `/system/metadata/object/:objectName`) is now rendered via `SchemaRenderer` using a `PageSchema` built by `buildObjectDetailPageSchema()`. Each section (properties, relationships, keys, data experience, data preview, field designer) is a self-contained SchemaNode widget registered in the ComponentRegistry. This replaces the monolithic `ObjectDetailView` component with a composable, metadata-driven architecture.
+
+- **MetadataDetailPage unified PageSchema support** (`@object-ui/console`): `MetadataDetailPage` now supports three rendering modes in priority order: (1) PageSchema-driven via `pageSchemaFactory` in the registry config, (2) custom `detailComponent`, (3) default card layout. The `hasCustomPage` + `<Navigate>` redirect hack has been removed — all metadata detail pages are rendered directly by `MetadataDetailPage`.
+
+- **MetadataTypeConfig refactored** (`@object-ui/console`): Replaced `hasCustomPage` boolean flag with the more expressive `pageSchemaFactory` function and kept `customRoute` for hub card linking. The `getGenericMetadataTypes()` helper now filters by `customRoute` instead of `hasCustomPage`.
+
+- **SchemaErrorBoundary for detail pages** (`@object-ui/console`): Added `SchemaErrorBoundary` class component to both `MetadataDetailPage` and `ObjectManagerPage` to gracefully catch and display rendering errors when a PageSchema or its widgets fail to render.
+
 ### Added
 
+- **Object detail schema widgets** (`@object-ui/console`): Six self-contained SchemaNode widget components for the object detail page, registered in ComponentRegistry: `object-properties`, `object-relationships`, `object-keys`, `object-data-experience`, `object-data-preview`, `object-field-designer`. Each widget resolves its data from React context (`useMetadata`, `useMetadataService`) making them fully composable via PageSchema.
+
+- **Object detail PageSchema factory** (`@object-ui/console`): `buildObjectDetailPageSchema(objectName, item?)` generates a `PageSchema` for object detail pages. The schema defines the page structure as an array of widget nodes, enabling server-driven UI customization of the object detail page layout.
+
+- **`pageSchemaFactory` on MetadataTypeConfig** (`@object-ui/console`): New optional factory function on the registry config that generates a `PageSchema` for detail page rendering via `SchemaRenderer`. When defined, `MetadataDetailPage` uses schema rendering instead of the default card layout.
+
 - **Grid list mode for MetadataManagerPage** (`@object-ui/console`): MetadataManagerPage now supports `listMode: 'grid' | 'table'` configuration via the metadata type registry. When set, items are rendered in a professional table layout with column headers, sortable rows, and inline action buttons — matching the Power Apps table listing UX. The `report` type is configured to use grid mode by default.
 
 - **Enhanced Object Detail View (Power Apps alignment)** (`@object-ui/console`): ObjectDetailView now includes dedicated sections beyond the existing Object Properties and Fields:
@@ -28,7 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - **Reusable MetadataGrid component** (`@object-ui/console`): Extracted the grid/table rendering logic from MetadataManagerPage into a standalone `MetadataGrid` component (`components/MetadataGrid.tsx`). Supports configurable columns, action buttons, row click handlers, and delete confirmation state. Can be reused by any metadata type list page.
 
-- **MetadataDetailPage redirect for custom types** (`@object-ui/console`): MetadataDetailPage now automatically redirects to the dedicated detail page for metadata types with `hasCustomPage: true`. For example, navigating to `/system/metadata/object/account` redirects to `/system/objects/account`.
+- **MetadataDetailPage unified schema rendering** (`@object-ui/console`): MetadataDetailPage now renders object detail pages via PageSchema (using `pageSchemaFactory`) instead of redirecting to `/system/objects/:name`. The redirect-based approach (`hasCustomPage` + `<Navigate>`) has been replaced with direct schema rendering.
 
 - **MetadataProvider dynamic type access** (`@object-ui/console`): Added `getItemsByType(type)` method to `MetadataContextValue`, allowing pages to access cached metadata items for any known type without hardcoding property names.
 

apps/console/src/__tests__/MetadataDetailPage.test.tsx

@@ -2,13 +2,17 @@
  * MetadataDetailPage Tests
  *
  * Tests for the generic, registry-driven metadata detail page that shows
- * a single metadata item and supports editing via the MetadataFormDialog.
+ * a single metadata item. Supports three rendering modes:
+ *   1. PageSchema-driven (via pageSchemaFactory + SchemaRenderer)
+ *   2. Custom component (via detailComponent)
+ *   3. Default card layout
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { ComponentRegistry } from '@object-ui/core';
 
 // --- Mock MetadataService ---
 const mockGetItems = vi.fn().mockResolvedValue([]);
@@ -25,7 +29,20 @@ const mockRefresh = vi.fn().mockResolvedValue(undefined);
 vi.mock('../context/MetadataProvider', () => ({
   useMetadata: () => ({
     apps: [],
-    objects: [],
+    objects: [
+      {
+        name: 'account',
+        label: 'Accounts',
+        icon: 'Building',
+        description: 'Customer accounts',
+        enabled: true,
+        fields: [
+          { name: 'id', type: 'text', label: 'ID', readonly: true },
+          { name: 'name', type: 'text', label: 'Account Name', required: true },
+        ],
+        relationships: [],
+      },
+    ],
     dashboards: [],
     reports: [],
     pages: [],
@@ -52,6 +69,22 @@ vi.mock('react-router-dom', async () => {
   };
 });
 
+// Register mock widget components for PageSchema rendering in tests
+beforeEach(() => {
+  const mockWidget = (name: string) => (props: any) => (
+    <div data-testid={`mock-${name}`} data-object-name={props?.schema?.objectName || props?.objectName}>
+      {name}
+    </div>
+  );
+
+  ComponentRegistry.register('object-properties', mockWidget('object-properties'));
+  ComponentRegistry.register('object-relationships', mockWidget('object-relationships'));
+  ComponentRegistry.register('object-keys', mockWidget('object-keys'));
+  ComponentRegistry.register('object-data-experience', mockWidget('object-data-experience'));
+  ComponentRegistry.register('object-data-preview', mockWidget('object-data-preview'));
+  ComponentRegistry.register('object-field-designer', mockWidget('object-field-designer'));
+});
+
 // Import after mocks
 import { MetadataDetailPage } from '../pages/system/MetadataDetailPage';
 
@@ -155,25 +188,66 @@ describe('MetadataDetailPage', () => {
     });
   });
 
-  describe('redirect for custom page types', () => {
-    it('should redirect object type to /system/objects/:name', () => {
-      const { container } = render(
+  describe('PageSchema rendering for object type', () => {
+    it('should render object detail via PageSchema instead of redirecting', () => {
+      mockGetItems.mockResolvedValue([
+        { name: 'account', label: 'Accounts', description: 'Customer accounts' },
+      ]);
+      render(
+        <MemoryRouter initialEntries={['/system/metadata/object/account']}>
+          <Routes>
+            <Route
+              path="/system/metadata/:metadataType/:itemName"
+              element={<MetadataDetailPage />}
+            />
+          </Routes>
+        </MemoryRouter>,
+      );
+      // Should render the metadata detail page (not redirect)
+      expect(screen.getByTestId('metadata-detail-page')).toBeInTheDocument();
+      // Should render schema-driven content via mock widgets
+      expect(screen.getByTestId('schema-detail-content')).toBeInTheDocument();
+    });
+
+    it('should render all object detail widget sections', () => {
+      mockGetItems.mockResolvedValue([
+        { name: 'account', label: 'Accounts', description: 'Customer accounts' },
+      ]);
+      render(
         <MemoryRouter initialEntries={['/system/metadata/object/account']}>
           <Routes>
             <Route
               path="/system/metadata/:metadataType/:itemName"
               element={<MetadataDetailPage />}
             />
+          </Routes>
+        </MemoryRouter>,
+      );
+      // All widget sections should be rendered via SchemaRenderer
+      expect(screen.getByTestId('mock-object-properties')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-object-relationships')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-object-keys')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-object-data-experience')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-object-data-preview')).toBeInTheDocument();
+      expect(screen.getByTestId('mock-object-field-designer')).toBeInTheDocument();
+    });
+
+    it('should navigate back to object list route when back button is clicked', () => {
+      mockGetItems.mockResolvedValue([
+        { name: 'account', label: 'Accounts', description: 'Customer accounts' },
+      ]);
+      render(
+        <MemoryRouter initialEntries={['/system/metadata/object/account']}>
+          <Routes>
             <Route
-              path="/system/objects/:objectName"
-              element={<div data-testid="object-detail-redirect-target">Redirected</div>}
+              path="/system/metadata/:metadataType/:itemName"
+              element={<MetadataDetailPage />}
             />
           </Routes>
         </MemoryRouter>,
       );
-      // The Navigate component should redirect to the object detail route
-      expect(screen.getByTestId('object-detail-redirect-target')).toBeInTheDocument();
-      expect(screen.getByText('Redirected')).toBeInTheDocument();
+      fireEvent.click(screen.getByTestId('back-to-list-btn'));
+      expect(mockNavigate).toHaveBeenCalledWith('/system/objects');
     });
   });
 });

apps/console/src/__tests__/ObjectManagerPage.test.tsx

@@ -2,14 +2,16 @@
  * ObjectManagerPage tests
  *
  * Tests for the system administration Object Manager page that integrates
- * ObjectManager and FieldDesigner from @object-ui/plugin-designer.
- * Covers list view, detail view with URL-based navigation, field management,
+ * ObjectManager from @object-ui/plugin-designer for the list view, and
+ * PageSchema-driven SchemaRenderer for the detail view.
+ * Covers list view, detail view with URL-based navigation, schema rendering,
  * and API integration via MetadataService.
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { ComponentRegistry } from '@object-ui/core';
 import { ObjectManagerPage } from '../pages/system/ObjectManagerPage';
 
 // ---------------------------------------------------------------------------
@@ -102,6 +104,20 @@ function renderPage(route = '/system/objects') {
 describe('ObjectManagerPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+
+    // Register mock widget components for PageSchema rendering in tests
+    const mockWidget = (name: string) => (props: any) => (
+      <div data-testid={name} data-object-name={props?.schema?.objectName || props?.objectName}>
+        {name}
+      </div>
+    );
+
+    ComponentRegistry.register('object-properties', mockWidget('object-properties'));
+    ComponentRegistry.register('object-relationships', mockWidget('relationships-section'));
+    ComponentRegistry.register('object-keys', mockWidget('keys-section'));
+    ComponentRegistry.register('object-data-experience', mockWidget('data-experience-section'));
+    ComponentRegistry.register('object-data-preview', mockWidget('data-preview-section'));
+    ComponentRegistry.register('object-field-designer', mockWidget('field-management-section'));
   });
 
   describe('List View', () => {
@@ -140,17 +156,14 @@ describe('ObjectManagerPage', () => {
       expect(titles.length).toBeGreaterThanOrEqual(1);
     });
 
-    it('should show object properties section', () => {
+    it('should show object properties section via schema widget', () => {
       renderPage('/system/objects/account');
       expect(screen.getByTestId('object-properties')).toBeDefined();
-      expect(screen.getByText('API Name')).toBeDefined();
-      expect(screen.getByText('account')).toBeDefined();
     });
 
-    it('should show field management section with FieldDesigner', () => {
+    it('should show field management section via schema widget', () => {
       renderPage('/system/objects/account');
       expect(screen.getByTestId('field-management-section')).toBeDefined();
-      expect(screen.getByTestId('field-designer')).toBeDefined();
     });
 
     it('should show back button to return to object list', () => {
@@ -167,47 +180,29 @@ describe('ObjectManagerPage', () => {
       });
     });
 
-    it('should show relationships if the object has them', () => {
+    it('should show relationships section via schema widget', () => {
       renderPage('/system/objects/account');
-      expect(screen.getByText('Relationships')).toBeDefined();
       expect(screen.getByTestId('relationships-section')).toBeDefined();
-      expect(screen.getByText('one-to-many')).toBeDefined();
-      expect(screen.getByText(/contacts/)).toBeDefined();
     });
 
-    it('should show keys section', () => {
+    it('should show keys section via schema widget', () => {
       renderPage('/system/objects/account');
       expect(screen.getByTestId('keys-section')).toBeDefined();
-      expect(screen.getByText('Keys')).toBeDefined();
     });
 
-    it('should show data experience section with placeholders', () => {
+    it('should show data experience section via schema widget', () => {
       renderPage('/system/objects/account');
       expect(screen.getByTestId('data-experience-section')).toBeDefined();
-      expect(screen.getByText('Data Experience')).toBeDefined();
-      expect(screen.getByTestId('data-experience-forms')).toBeDefined();
-      expect(screen.getByTestId('data-experience-views')).toBeDefined();
-      expect(screen.getByTestId('data-experience-dashboards')).toBeDefined();
     });
 
-    it('should show empty relationships message for objects without them', () => {
-      renderPage('/system/objects/contact');
-      expect(screen.getByTestId('relationships-section')).toBeDefined();
-      expect(screen.getByText('No relationships defined for this object.')).toBeDefined();
-    });
-
-    it('should show inline data preview placeholder', () => {
+    it('should show data preview section via schema widget', () => {
       renderPage('/system/objects/account');
       expect(screen.getByTestId('data-preview-section')).toBeDefined();
-      expect(screen.getByText('Data Preview')).toBeDefined();
-      expect(screen.getByText('Sample Data')).toBeDefined();
     });
 
-    it('should show system field non-editable hint when system fields exist', () => {
+    it('should render schema-driven content container', () => {
       renderPage('/system/objects/account');
-      // account has id field with readonly=true, which becomes isSystem
-      expect(screen.getByTestId('system-field-hint')).toBeDefined();
-      expect(screen.getByText(/System fields.*read-only/)).toBeDefined();
+      expect(screen.getByTestId('schema-detail-content')).toBeDefined();
     });
   });
 
@@ -245,11 +240,11 @@ describe('ObjectManagerPage', () => {
       expect(screen.getByTestId('object-manager-page')).toBeDefined();
     });
 
-    it('should render detail view with MetadataService props', () => {
+    it('should render detail view with schema-driven widgets', () => {
       renderPage('/system/objects/account');
       expect(screen.getByTestId('object-detail-view')).toBeDefined();
-      // The FieldDesigner should be rendered (service is passed through)
-      expect(screen.getByTestId('field-designer')).toBeDefined();
+      // Schema widgets are rendered (field designer as a registered widget type)
+      expect(screen.getByTestId('field-management-section')).toBeDefined();
     });
   });
 

apps/console/src/__tests__/SystemPages.test.tsx

@@ -217,7 +217,7 @@ describe('SystemHubPage', () => {
     expect(mockNavigate).toHaveBeenCalledWith('/apps/test-app/system/metadata/dashboard');
   });
 
-  it('should navigate to custom route for types with custom pages', async () => {
+  it('should navigate to custom route for types with dedicated list pages', async () => {
     mockFind.mockResolvedValue({ data: [] });
     wrap(<SystemHubPage />);
     await waitFor(() => {

apps/console/src/__tests__/metadataTypeRegistry.test.ts

@@ -35,22 +35,26 @@ describe('metadataTypeRegistry', () => {
       }
     });
 
-    it('should mark app and object as having custom pages', () => {
+    it('should configure app and object with custom routes', () => {
       const app = METADATA_TYPES.find((m) => m.type === 'app')!;
       const obj = METADATA_TYPES.find((m) => m.type === 'object')!;
-      expect(app.hasCustomPage).toBe(true);
       expect(app.customRoute).toBe('/system/apps');
-      expect(obj.hasCustomPage).toBe(true);
       expect(obj.customRoute).toBe('/system/objects');
     });
 
-    it('should not mark generic types as having custom pages', () => {
+    it('should configure object with pageSchemaFactory', () => {
+      const obj = METADATA_TYPES.find((m) => m.type === 'object')!;
+      expect(obj.pageSchemaFactory).toBeDefined();
+      expect(typeof obj.pageSchemaFactory).toBe('function');
+    });
+
+    it('should not configure generic types with custom routes', () => {
       const dashboard = METADATA_TYPES.find((m) => m.type === 'dashboard')!;
       const page = METADATA_TYPES.find((m) => m.type === 'page')!;
       const report = METADATA_TYPES.find((m) => m.type === 'report')!;
-      expect(dashboard.hasCustomPage).toBeFalsy();
-      expect(page.hasCustomPage).toBeFalsy();
-      expect(report.hasCustomPage).toBeFalsy();
+      expect(dashboard.customRoute).toBeFalsy();
+      expect(page.customRoute).toBeFalsy();
+      expect(report.customRoute).toBeFalsy();
     });
 
     it('should have unique type strings', () => {