@open-mercato/ui 0.6.3-develop.3838.1.7f2657a47c → 0.6.3-develop.3857.1.da89d7530c

package/dist/theme/QueryProvider.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { redirectToSessionRefresh, redirectToForbiddenLogin, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from "../backend/utils/api.js";
+import { redirectToSessionRefresh, notifyForbiddenAccess, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from "../backend/utils/api.js";
 function ensureGlobalFetchInterception() {
   if (typeof window === "undefined") return;
   const w = window;
@@ -15,17 +15,17 @@ const client = new QueryClient({
   queryCache: new QueryCache({
     onError: (error) => {
       if (error instanceof UnauthorizedError) redirectToSessionRefresh();
-      else if (error instanceof ForbiddenError) redirectToForbiddenLogin();
+      else if (error instanceof ForbiddenError) notifyForbiddenAccess();
       else if (error?.status === 401) redirectToSessionRefresh();
-      else if (error?.status === 403) redirectToForbiddenLogin();
+      else if (error?.status === 403) notifyForbiddenAccess();
     }
   }),
   mutationCache: new MutationCache({
     onError: (error) => {
       if (error instanceof UnauthorizedError) redirectToSessionRefresh();
-      else if (error instanceof ForbiddenError) redirectToForbiddenLogin();
+      else if (error instanceof ForbiddenError) notifyForbiddenAccess();
       else if (error?.status === 401) redirectToSessionRefresh();
-      else if (error?.status === 403) redirectToForbiddenLogin();
+      else if (error?.status === 403) notifyForbiddenAccess();
     }
   })
 });

package/dist/theme/QueryProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/theme/QueryProvider.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { redirectToSessionRefresh, redirectToForbiddenLogin, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from '../backend/utils/api'\n\n// Ensure global fetch calls also respect our redirect-on-401/403 policy.\nfunction ensureGlobalFetchInterception() {\n  if (typeof window === 'undefined') return\n  const w = window as any\n  if (w.__omFetchPatched) return\n  w.__omFetchPatched = true\n  w.__omOriginalFetch = window.fetch\n  window.fetch = ((input: RequestInfo | URL, init?: RequestInit) => apiFetch(input, init)) as any\n}\n\nconst client = new QueryClient({\n  queryCache: new QueryCache({\n    onError: (error) => {\n      if (error instanceof UnauthorizedError) redirectToSessionRefresh()\n      else if (error instanceof ForbiddenError) redirectToForbiddenLogin()\n      // As a fallback, try to detect common cases\n      else if ((error as any)?.status === 401) redirectToSessionRefresh()\n      else if ((error as any)?.status === 403) redirectToForbiddenLogin()\n    },\n  }),\n  mutationCache: new MutationCache({\n    onError: (error) => {\n      if (error instanceof UnauthorizedError) redirectToSessionRefresh()\n      else if (error instanceof ForbiddenError) redirectToForbiddenLogin()\n      else if ((error as any)?.status === 401) redirectToSessionRefresh()\n      else if ((error as any)?.status === 403) redirectToForbiddenLogin()\n    },\n  }),\n})\n\ntype QueryProviderProps = { children: React.ReactNode; defaultForbiddenRoles?: string[] }\n\nexport function QueryProvider({ children, defaultForbiddenRoles }: QueryProviderProps) {\n  React.useEffect(() => {\n    ensureGlobalFetchInterception()\n    if (defaultForbiddenRoles && defaultForbiddenRoles.length) {\n      setAuthRedirectConfig({ defaultForbiddenRoles })\n    }\n  }, [])\n  return <QueryClientProvider client={client}>{children}</QueryClientProvider>\n}\n"],
-  "mappings": ";AA4CS;AA3CT,YAAY,WAAW;AACvB,SAAS,eAAe,YAAY,aAAa,2BAA2B;AAC5E,SAAS,0BAA0B,0BAA0B,mBAAmB,gBAAgB,UAAU,6BAA6B;AAGvI,SAAS,gCAAgC;AACvC,MAAI,OAAO,WAAW,YAAa;AACnC,QAAM,IAAI;AACV,MAAI,EAAE,iBAAkB;AACxB,IAAE,mBAAmB;AACrB,IAAE,oBAAoB,OAAO;AAC7B,SAAO,SAAS,CAAC,OAA0B,SAAuB,SAAS,OAAO,IAAI;AACxF;AAEA,MAAM,SAAS,IAAI,YAAY;AAAA,EAC7B,YAAY,IAAI,WAAW;AAAA,IACzB,SAAS,CAAC,UAAU;AAClB,UAAI,iBAAiB,kBAAmB,0BAAyB;AAAA,eACxD,iBAAiB,eAAgB,0BAAyB;AAAA,eAEzD,OAAe,WAAW,IAAK,0BAAyB;AAAA,eACxD,OAAe,WAAW,IAAK,0BAAyB;AAAA,IACpE;AAAA,EACF,CAAC;AAAA,EACD,eAAe,IAAI,cAAc;AAAA,IAC/B,SAAS,CAAC,UAAU;AAClB,UAAI,iBAAiB,kBAAmB,0BAAyB;AAAA,eACxD,iBAAiB,eAAgB,0BAAyB;AAAA,eACzD,OAAe,WAAW,IAAK,0BAAyB;AAAA,eACxD,OAAe,WAAW,IAAK,0BAAyB;AAAA,IACpE;AAAA,EACF,CAAC;AACH,CAAC;AAIM,SAAS,cAAc,EAAE,UAAU,sBAAsB,GAAuB;AACrF,QAAM,UAAU,MAAM;AACpB,kCAA8B;AAC9B,QAAI,yBAAyB,sBAAsB,QAAQ;AACzD,4BAAsB,EAAE,sBAAsB,CAAC;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,CAAC;AACL,SAAO,oBAAC,uBAAoB,QAAiB,UAAS;AACxD;",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { redirectToSessionRefresh, notifyForbiddenAccess, UnauthorizedError, ForbiddenError, apiFetch, setAuthRedirectConfig } from '../backend/utils/api'\n\n// Ensure global fetch calls also flow through apiFetch so 401 session-refresh\n// and 403 access-denied flash banners fire consistently.\nfunction ensureGlobalFetchInterception() {\n  if (typeof window === 'undefined') return\n  const w = window as any\n  if (w.__omFetchPatched) return\n  w.__omFetchPatched = true\n  w.__omOriginalFetch = window.fetch\n  window.fetch = ((input: RequestInfo | URL, init?: RequestInit) => apiFetch(input, init)) as any\n}\n\nconst client = new QueryClient({\n  queryCache: new QueryCache({\n    onError: (error) => {\n      if (error instanceof UnauthorizedError) redirectToSessionRefresh()\n      else if (error instanceof ForbiddenError) notifyForbiddenAccess()\n      // As a fallback, try to detect common cases\n      else if ((error as any)?.status === 401) redirectToSessionRefresh()\n      else if ((error as any)?.status === 403) notifyForbiddenAccess()\n    },\n  }),\n  mutationCache: new MutationCache({\n    onError: (error) => {\n      if (error instanceof UnauthorizedError) redirectToSessionRefresh()\n      else if (error instanceof ForbiddenError) notifyForbiddenAccess()\n      else if ((error as any)?.status === 401) redirectToSessionRefresh()\n      else if ((error as any)?.status === 403) notifyForbiddenAccess()\n    },\n  }),\n})\n\ntype QueryProviderProps = { children: React.ReactNode; defaultForbiddenRoles?: string[] }\n\nexport function QueryProvider({ children, defaultForbiddenRoles }: QueryProviderProps) {\n  React.useEffect(() => {\n    ensureGlobalFetchInterception()\n    if (defaultForbiddenRoles && defaultForbiddenRoles.length) {\n      setAuthRedirectConfig({ defaultForbiddenRoles })\n    }\n  }, [])\n  return <QueryClientProvider client={client}>{children}</QueryClientProvider>\n}\n"],
+  "mappings": ";AA6CS;AA5CT,YAAY,WAAW;AACvB,SAAS,eAAe,YAAY,aAAa,2BAA2B;AAC5E,SAAS,0BAA0B,uBAAuB,mBAAmB,gBAAgB,UAAU,6BAA6B;AAIpI,SAAS,gCAAgC;AACvC,MAAI,OAAO,WAAW,YAAa;AACnC,QAAM,IAAI;AACV,MAAI,EAAE,iBAAkB;AACxB,IAAE,mBAAmB;AACrB,IAAE,oBAAoB,OAAO;AAC7B,SAAO,SAAS,CAAC,OAA0B,SAAuB,SAAS,OAAO,IAAI;AACxF;AAEA,MAAM,SAAS,IAAI,YAAY;AAAA,EAC7B,YAAY,IAAI,WAAW;AAAA,IACzB,SAAS,CAAC,UAAU;AAClB,UAAI,iBAAiB,kBAAmB,0BAAyB;AAAA,eACxD,iBAAiB,eAAgB,uBAAsB;AAAA,eAEtD,OAAe,WAAW,IAAK,0BAAyB;AAAA,eACxD,OAAe,WAAW,IAAK,uBAAsB;AAAA,IACjE;AAAA,EACF,CAAC;AAAA,EACD,eAAe,IAAI,cAAc;AAAA,IAC/B,SAAS,CAAC,UAAU;AAClB,UAAI,iBAAiB,kBAAmB,0BAAyB;AAAA,eACxD,iBAAiB,eAAgB,uBAAsB;AAAA,eACtD,OAAe,WAAW,IAAK,0BAAyB;AAAA,eACxD,OAAe,WAAW,IAAK,uBAAsB;AAAA,IACjE;AAAA,EACF,CAAC;AACH,CAAC;AAIM,SAAS,cAAc,EAAE,UAAU,sBAAsB,GAAuB;AACrF,QAAM,UAAU,MAAM;AACpB,kCAA8B;AAC9B,QAAI,yBAAyB,sBAAsB,QAAQ;AACzD,4BAAsB,EAAE,sBAAsB,CAAC;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,CAAC;AACL,SAAO,oBAAC,uBAAoB,QAAiB,UAAS;AACxD;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.3-develop.3838.1.7f2657a47c",
+  "version": "0.6.3-develop.3857.1.da89d7530c",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -141,13 +141,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.3-develop.3838.1.7f2657a47c",
+    "@open-mercato/shared": "0.6.3-develop.3857.1.da89d7530c",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.3-develop.3838.1.7f2657a47c",
+    "@open-mercato/shared": "0.6.3-develop.3857.1.da89d7530c",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/AppShell.tsx

@@ -66,6 +66,7 @@ export type AppShellProps = {
   productName?: string
   logo?: ShellLogo
   email?: string
+  canManageUpgradeActions?: boolean
   groups: {
     id?: string
     name: string
@@ -416,7 +417,7 @@ export function AppShell(props: AppShellProps) {
   )
 }
 
-function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, children, sidebarCollapsedDefault = false, currentTitle, breadcrumb, version, settingsSectionTitle, settingsPathPrefixes = [], settingsSections, profileSections, profileSectionTitle, profilePathPrefixes = [], mobileSidebarSlot }: AppShellProps) {
+function AppShellBody({ productName, logo, email, canManageUpgradeActions = false, groups, rightHeaderSlot, children, sidebarCollapsedDefault = false, currentTitle, breadcrumb, version, settingsSectionTitle, settingsPathPrefixes = [], settingsSections, profileSections, profileSectionTitle, profilePathPrefixes = [], mobileSidebarSlot }: AppShellProps) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const t = useT()
@@ -1341,7 +1342,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           <InjectionSpot spotId={BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID} context={injectionContext} />
           <FlashMessages />
           <PartialIndexBanner />
-          <UpgradeActionBanner />
+          {canManageUpgradeActions ? <UpgradeActionBanner /> : null}
           <LastOperationBanner />
           <InjectionSpot spotId={BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID} context={injectionContext} />
           <InjectionSpot

package/src/backend/CrudForm.tsx

@@ -4109,6 +4109,7 @@ const FieldControl = React.memo(function FieldControlImpl({
               : undefined
           }
           allowCustomValues={builtin?.allowCustomValues ?? true}
+          clearable={!field.required}
           disabled={disabled}
         />
       )}

package/src/backend/__tests__/AppShell.test.tsx

@@ -243,6 +243,33 @@ describe('AppShell', () => {
     })
   })
 
+  it('renders the upgrade action banner only for users who can manage upgrade actions', () => {
+    const { rerender } = renderWithProviders(
+      <AppShell
+        email="demo@example.com"
+        groups={groups}
+        canManageUpgradeActions={false}
+      >
+        <div>Child content</div>
+      </AppShell>,
+      { dict },
+    )
+
+    expect(screen.queryByTestId('upgrade-action-banner')).not.toBeInTheDocument()
+
+    rerender(
+      <AppShell
+        email="demo@example.com"
+        groups={groups}
+        canManageUpgradeActions
+      >
+        <div>Child content</div>
+      </AppShell>,
+    )
+
+    expect(screen.getByTestId('upgrade-action-banner')).toBeInTheDocument()
+  })
+
   it('resets breadcrumb to server-provided values when pathname changes', async () => {
     mockPathname = '/backend/users'
 

package/src/backend/__tests__/UpgradeActionBanner.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, screen, waitFor } from '@testing-library/react'
+import { UpgradeActionBanner } from '../upgrades/UpgradeActionBanner'
+import { useBackendChrome } from '../BackendChromeProvider'
+import { apiCall } from '../utils/apiCall'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+jest.mock('../utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../FlashMessages', () => ({
+  flash: jest.fn(),
+}))
+
+jest.mock('../BackendChromeProvider', () => ({
+  BackendChromeProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useBackendChrome: jest.fn(),
+}))
+
+const UPGRADE_ACTIONS_RESPONSE = {
+  version: '0.3.4',
+  actions: [
+    {
+      id: 'seed-catalog',
+      version: '0.3.4',
+      message: 'Install example products',
+      ctaLabel: 'Install now',
+    },
+  ],
+}
+
+function mockChrome(opts: { isReady?: boolean; grantedFeatures?: string[] } = {}) {
+  const isReady = opts.isReady ?? true
+  ;(useBackendChrome as jest.Mock).mockReturnValue({
+    payload: opts.grantedFeatures !== undefined ? { grantedFeatures: opts.grantedFeatures } : null,
+    isReady,
+    isLoading: !isReady,
+    refresh: jest.fn(),
+  })
+}
+
+beforeAll(() => {
+  if (typeof globalThis.fetch === 'undefined') {
+    Object.defineProperty(globalThis, 'fetch', { value: jest.fn(), writable: true, configurable: true })
+  }
+})
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  process.env.NEXT_PUBLIC_UPGRADE_ACTIONS_ENABLED = 'true'
+  mockChrome()
+})
+
+afterEach(() => {
+  delete process.env.NEXT_PUBLIC_UPGRADE_ACTIONS_ENABLED
+})
+
+describe('UpgradeActionBanner — feature guard', () => {
+  it('renders null and does not call apiCall when payload is null (no configs.manage)', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({ ok: true, result: UPGRADE_ACTIONS_RESPONSE })
+
+    renderWithProviders(<UpgradeActionBanner />)
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(screen.queryByText('Install now')).toBeNull()
+    expect(apiCall).not.toHaveBeenCalled()
+  })
+
+  it('renders null and does not call apiCall when grantedFeatures is empty (no configs.manage)', async () => {
+    mockChrome({ isReady: true, grantedFeatures: [] })
+    ;(apiCall as jest.Mock).mockResolvedValue({ ok: true, result: UPGRADE_ACTIONS_RESPONSE })
+
+    renderWithProviders(<UpgradeActionBanner />)
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(screen.queryByText('Install now')).toBeNull()
+    expect(apiCall).not.toHaveBeenCalled()
+  })
+
+  it('calls apiCall and renders banner when grantedFeatures includes configs.manage', async () => {
+    mockChrome({ isReady: true, grantedFeatures: ['configs.manage'] })
+    ;(apiCall as jest.Mock).mockResolvedValue({ ok: true, result: UPGRADE_ACTIONS_RESPONSE })
+
+    renderWithProviders(<UpgradeActionBanner />)
+
+    await waitFor(() => {
+      expect(apiCall).toHaveBeenCalledWith(
+        '/api/configs/upgrade-actions',
+        { headers: { 'x-om-forbidden-redirect': '0' } },
+      )
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Install now' })).toBeInTheDocument()
+    })
+  })
+
+  it('calls apiCall when grantedFeatures includes configs.* wildcard', async () => {
+    mockChrome({ isReady: true, grantedFeatures: ['configs.*'] })
+    ;(apiCall as jest.Mock).mockResolvedValue({ ok: true, result: UPGRADE_ACTIONS_RESPONSE })
+
+    renderWithProviders(<UpgradeActionBanner />)
+
+    await waitFor(() => {
+      expect(apiCall).toHaveBeenCalledWith(
+        '/api/configs/upgrade-actions',
+        { headers: { 'x-om-forbidden-redirect': '0' } },
+      )
+    })
+  })
+
+  it('does not call apiCall while chrome is still loading (isReady=false), then fires after ready', async () => {
+    mockChrome({ isReady: false })
+    ;(apiCall as jest.Mock).mockResolvedValue({ ok: true, result: UPGRADE_ACTIONS_RESPONSE })
+
+    const { rerender } = renderWithProviders(<UpgradeActionBanner />)
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(screen.queryByText('Install now')).toBeNull()
+    expect(apiCall).not.toHaveBeenCalled()
+
+    mockChrome({ isReady: true, grantedFeatures: ['configs.manage'] })
+    rerender(<UpgradeActionBanner />)
+
+    await waitFor(() => {
+      expect(apiCall).toHaveBeenCalledWith(
+        '/api/configs/upgrade-actions',
+        { headers: { 'x-om-forbidden-redirect': '0' } },
+      )
+    })
+  })
+})

package/src/backend/__tests__/nav-utils.test.ts

@@ -129,4 +129,77 @@ describe('settings navigation helpers', () => {
 
     expect(entries.map((item) => item.href)).toContain('/backend/customer_accounts/users')
   })
+
+  // Regression for GH #2070: an employee without any `configs.*` grant must not
+  // see the system-status page in the sidebar (including settings sections),
+  // even when modules with adjacent prefixes are granted.
+  it('hides routes whose required features are not granted, including settings-context pages', async () => {
+    const employeeGrants = [
+      'sales.orders.view',
+      'sales.quotes.view',
+      'inbox_ops.proposals.view',
+    ]
+    const entries = await buildAdminNav(
+      [
+        {
+          id: 'sales',
+          backendRoutes: [
+            {
+              pattern: '/backend/sales/orders',
+              title: 'Orders',
+              requireFeatures: ['sales.orders.view'],
+            },
+            {
+              pattern: '/backend/sales/quotes',
+              title: 'Quotes',
+              requireFeatures: ['sales.quotes.view'],
+            },
+          ],
+        },
+        {
+          id: 'inbox_ops',
+          backendRoutes: [
+            {
+              pattern: '/backend/inbox-ops',
+              title: 'Proposals',
+              requireFeatures: ['inbox_ops.proposals.view'],
+            },
+          ],
+        },
+        {
+          id: 'configs',
+          backendRoutes: [
+            {
+              pattern: '/backend/config/system-status',
+              title: 'System status',
+              requireFeatures: ['configs.system_status.view'],
+              pageContext: 'settings',
+              group: 'System',
+              groupKey: 'settings.sections.system',
+            },
+          ],
+        },
+      ],
+      { auth: { roles: [] } },
+      undefined,
+      undefined,
+      {
+        checkFeatures: async (features: string[]) =>
+          features.filter((feature) => employeeGrants.includes(feature)),
+      },
+    )
+
+    const hrefs = entries.map((item) => item.href)
+    expect(hrefs).toContain('/backend/sales/orders')
+    expect(hrefs).toContain('/backend/sales/quotes')
+    expect(hrefs).toContain('/backend/inbox-ops')
+    expect(hrefs).not.toContain('/backend/config/system-status')
+
+    // The filtered settings entry must also be absent from any settings section.
+    const settingsSections = buildSettingsSections(entries, { system: 1 })
+    const allSettingsHrefs = settingsSections.flatMap((section) =>
+      section.items.map((item) => item.href),
+    )
+    expect(allSettingsHrefs).not.toContain('/backend/config/system-status')
+  })
 })