@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/dashboard/__tests__/DashboardScreen.test.tsx

@@ -0,0 +1,112 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { DashboardScreen } from '../DashboardScreen'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { loadDashboardWidgetModule } from '../widgetRegistry'
+
+jest.mock('@open-mercato/ui/backend/utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../widgetRegistry', () => ({
+  loadDashboardWidgetModule: jest.fn(),
+}))
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    refresh: jest.fn(),
+    push: jest.fn(),
+    replace: jest.fn(),
+  }),
+}))
+
+const createMockResponse = (status: number): Response => ({ status } as Response)
+
+const dict = {
+  'dashboard.loadError': 'Failed to load dashboard',
+  'dashboard.widgets.foo.title': 'Widget Foo',
+  'dashboard.widgets.foo.description': 'Widget description',
+}
+
+const widgetResponse = {
+  layout: { items: [{ id: 'item-1', widgetId: 'foo', order: 0, size: 'md' }] },
+  widgets: [
+    {
+      id: 'foo',
+      title: 'Widget Foo',
+      description: 'Widget description',
+      defaultSize: 'md',
+      defaultEnabled: true,
+      defaultSettings: null,
+      features: [],
+      moduleId: 'example',
+      icon: null,
+      loaderKey: 'foo.loader',
+      supportsRefresh: false,
+    },
+  ],
+  allowedWidgetIds: ['foo'],
+  canConfigure: true,
+  context: {
+    userId: 'user',
+    tenantId: null,
+    organizationId: null,
+    userName: 'Demo',
+    userEmail: 'demo@example.com',
+    userLabel: 'Demo User',
+  },
+}
+
+function MockWidget() {
+  return <div>Widget body</div>
+}
+
+describe('DashboardScreen', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    ;(loadDashboardWidgetModule as jest.Mock).mockResolvedValue({
+      Widget: MockWidget,
+      hydrateSettings: (value: unknown) => value,
+      dehydrateSettings: (value: unknown) => value,
+    })
+  })
+
+  it('renders widget cards when layout loads successfully', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: true,
+      status: 200,
+      result: widgetResponse,
+      response: createMockResponse(200),
+    })
+
+    renderWithProviders(<DashboardScreen />, { dict })
+
+    // Wait for the layout to load first
+    expect(await screen.findByText('Widget Foo')).toBeInTheDocument()
+    // Then wait for the widget module to load
+    expect(await screen.findByText('Widget body')).toBeInTheDocument()
+  })
+
+  it('shows an error when the layout request fails', async () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: false,
+      status: 500,
+      result: null,
+      response: createMockResponse(500),
+    })
+
+    renderWithProviders(<DashboardScreen />, { dict })
+
+    await waitFor(() => {
+      expect(screen.getByText('Failed to load dashboard')).toBeInTheDocument()
+    })
+
+    errorSpy.mockRestore()
+  })
+})

package/src/backend/dashboard/index.ts

@@ -0,0 +1 @@
+export { DashboardScreen } from './DashboardScreen'

package/src/backend/dashboard/widgetRegistry.ts

@@ -0,0 +1,68 @@
+import type { ModuleDashboardWidgetEntry } from '@open-mercato/shared/modules/registry'
+import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboard/widgets'
+
+type Entry = ModuleDashboardWidgetEntry
+
+// Registration pattern for publishable packages
+let _dashboardWidgetEntries: Entry[] | null = null
+
+export function registerDashboardWidgets(entries: Entry[]) {
+  if (_dashboardWidgetEntries !== null && process.env.NODE_ENV === 'development') {
+    console.debug('[Bootstrap] Dashboard widgets re-registered (this may occur during HMR)')
+  }
+  _dashboardWidgetEntries = entries
+}
+
+export function getDashboardWidgets(): Entry[] {
+  if (!_dashboardWidgetEntries) {
+    // On client-side, bootstrap doesn't run - return empty array gracefully
+    if (typeof window !== 'undefined') {
+      return []
+    }
+    throw new Error('[Bootstrap] Dashboard widgets not registered. Call registerDashboardWidgets() at bootstrap.')
+  }
+  return _dashboardWidgetEntries
+}
+
+let entriesPromise: Promise<Entry[]> | null = null
+
+async function getEntries(): Promise<Entry[]> {
+  if (!entriesPromise) {
+    const promise = Promise.resolve().then(() => getDashboardWidgets())
+    entriesPromise = promise.catch((err) => {
+      // Clear cache on error so next call can retry after registration
+      if (entriesPromise === promise) {
+        entriesPromise = null
+      }
+      throw err
+    })
+  }
+  return entriesPromise
+}
+
+type LoadedWidgetModule = DashboardWidgetModule<any>
+
+const cache = new Map<string, Promise<LoadedWidgetModule>>()
+
+async function findEntry(loaderKey: string): Promise<Entry | undefined> {
+  const entries = await getEntries()
+  return entries.find((entry) => entry.key === loaderKey)
+}
+
+export async function loadDashboardWidgetModule(loaderKey: string): Promise<LoadedWidgetModule | null> {
+  const entry = await findEntry(loaderKey)
+  if (!entry) return null
+  if (!cache.has(loaderKey)) {
+    cache.set(
+      loaderKey,
+      entry
+        .loader()
+        .then((mod) => {
+          const candidate = mod as LoadedWidgetModule
+          const maybeDefault = (mod as { default?: LoadedWidgetModule }).default
+          return maybeDefault ?? candidate
+        })
+    )
+  }
+  return cache.get(loaderKey) ?? null
+}