@open-mercato/ui 0.7.1-develop.7186.1.6e080a5017 → 0.7.1-develop.7193.1.910a5b0a1e

package/src/backend/DataTable.tsx

@@ -44,7 +44,7 @@ import { parseISO } from 'date-fns/parseISO'
 import { formatDisplayDateTime } from '../primitives/date-format'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { readVersionedPreference, writeVersionedPreference, clearVersionedPreference } from '@open-mercato/shared/lib/browser/versionedPreference'
-import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useLocale, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import { flash } from './FlashMessages'
 import { useConfirmDialog } from './confirm-dialog'
 import { surfaceRecordConflict } from './conflicts'
@@ -510,9 +510,16 @@ function collectUniqueById<T extends { id: string }>(
   return Array.from(byId.values())
 }
 
+const DEFAULT_VIEW_EXPORT_TITLE = 'Export what you view'
+const DEFAULT_FULL_EXPORT_TITLE = 'Full data export'
+
 type ResolvedExportSection = {
   key: string
   title: string
+  // Seeds the default download filename. Kept separate from `title` because
+  // `defaultExportFilename` strips every non-ASCII character, so a translated
+  // title would collapse to underscores in locales like ko.
+  filenameBase: string
   description?: string
   formats: DataTableExportFormat[]
   getUrl?: (format: DataTableExportFormat) => string
@@ -521,13 +528,20 @@ type ResolvedExportSection = {
   disabled: boolean
 }
 
-function resolveExportSections(config: DataTableExportConfig | null | undefined): ResolvedExportSection[] {
+function resolveExportSections(config: DataTableExportConfig | null | undefined, t: TranslateFn): ResolvedExportSection[] {
   if (!config) return []
   const sections: ResolvedExportSection[] = []
   const baseFormats = config.formats && config.formats.length > 0 ? config.formats : DEFAULT_EXPORT_FORMATS
-  const addSection = (key: string, section: DataTableExportSectionConfig | undefined | null, fallbackTitle: string) => {
+  const addSection = (
+    key: string,
+    section: DataTableExportSectionConfig | undefined | null,
+    fallbackTitle: string,
+    fallbackFilenameBase: string,
+  ) => {
     if (!section || (!section.getUrl && !section.prepare)) return
-    const title = section.title?.trim().length ? section.title!.trim() : fallbackTitle
+    const explicitTitle = section.title?.trim().length ? section.title!.trim() : null
+    const title = explicitTitle ?? fallbackTitle
+    const filenameBase = explicitTitle ?? fallbackFilenameBase
     const seen = new Set<DataTableExportFormat>()
     const formatsSource = section.formats && section.formats.length > 0 ? section.formats : baseFormats
     const formats = formatsSource.filter((format) => {
@@ -539,6 +553,7 @@ function resolveExportSections(config: DataTableExportConfig | null | undefined)
     sections.push({
       key,
       title,
+      filenameBase,
       description: section.description,
       formats,
       getUrl: section.getUrl,
@@ -557,19 +572,21 @@ function resolveExportSections(config: DataTableExportConfig | null | undefined)
 
   // Allow legacy config (getUrl without sections/view)
   const hasExplicitSections = Array.isArray(config.sections) && config.sections.length > 0
+  const viewTitle = t('ui.dataTable.export.viewTitle', DEFAULT_VIEW_EXPORT_TITLE)
   if (!config.view && !config.full && !hasExplicitSections && config.getUrl) {
-    addSection('view', { getUrl: config.getUrl, formats: config.formats }, 'Export what you view')
+    addSection('view', { getUrl: config.getUrl, formats: config.formats }, viewTitle, DEFAULT_VIEW_EXPORT_TITLE)
   } else {
-    addSection('view', config.view, 'Export what you view')
+    addSection('view', config.view, viewTitle, DEFAULT_VIEW_EXPORT_TITLE)
   }
 
   if (hasExplicitSections) {
     config.sections!.forEach((section, idx) => {
-      addSection(`section-${idx}`, section, section.title?.trim().length ? section.title! : `Export ${idx + 1}`)
+      const numberedTitle = t('ui.dataTable.export.sectionTitle', 'Export {index}', { index: idx + 1 })
+      addSection(`section-${idx}`, section, numberedTitle, `Export ${idx + 1}`)
     })
   }
 
-  addSection('full', config.full, 'Full data export')
+  addSection('full', config.full, t('ui.dataTable.export.fullTitle', DEFAULT_FULL_EXPORT_TITLE), DEFAULT_FULL_EXPORT_TITLE)
   return sections
 }
 
@@ -872,7 +889,7 @@ function ExportMenu({ config, sections }: { config: DataTableExportConfig; secti
           preparedResult.filename
           ?? section.filename?.(format)
           ?? config.filename?.(format)
-          ?? defaultExportFilename(section.title, format)
+          ?? defaultExportFilename(section.filenameBase, format)
         if (typeof window !== 'undefined') {
           const blob = new Blob([serialized.body], { type: serialized.contentType })
           const href = URL.createObjectURL(blob)
@@ -1341,6 +1358,14 @@ export function DataTable<T extends RowData>({
   // hydration mismatch. Initial render uses only props-derived state (identical on both sides).
   const initialSnapshotRef = React.useRef<PerspectiveSnapshot | null>(null)
   const snapshotHydratedTableRef = React.useRef<string | null>(null)
+  // Tracks the table whose locally-restored state has already been reconciled
+  // against the server response, so reconciliation happens once per table
+  // rather than on every refetch (#5113).
+  const serverReconciledTableRef = React.useRef<string | null>(null)
+  // The snapshot exactly as it came out of localStorage. `initialSnapshotRef`
+  // cannot serve here: applying a snapshot rewrites the stored copy with a
+  // fresh `Date.now()`, which would make every server row look older than it is.
+  const hydratedSnapshotRef = React.useRef<PerspectiveSnapshot | null>(null)
   const initialSettingsSource = perspectiveConfig?.initialState?.initialSettings ?? null
   // Memoized on the host's own object: `sanitizePerspectiveSettings` returns a
   // fresh result on every call, so without this every effect keyed on the
@@ -2042,6 +2067,7 @@ export function DataTable<T extends RowData>({
     const snapshot = readPerspectiveSnapshot(perspectiveTableId)
     if (!snapshot) return
     initialSnapshotRef.current = snapshot
+    hydratedSnapshotRef.current = snapshot
     // When the host page wired an advanced-filter tree (`advancedFilter.onApplyTree`),
     // the host owns filter persistence — typically by hydrating from / writing to the
     // URL (see CRM People/Companies/Deals lazy useState initializers + URL writer
@@ -2579,18 +2605,74 @@ export function DataTable<T extends RowData>({
   React.useLayoutEffect(() => {
     if (!canUsePerspectives) return
     if (!perspectiveTableId) return
-    if (initialSnapshotRef.current) return
-    if (initialPerspectiveAppliedRef.current) return
 
     const source = perspectiveData ?? perspectiveConfig?.initialState?.response
     if (!source) return
 
+    let orphanedSnapshotDropped = false
+
     const tryResolve = (id: string | null | undefined): PerspectiveDto | RolePerspectiveDto | undefined => {
       if (!id) return undefined
       return source.perspectives.find((p) => p.id === id)
         ?? source.rolePerspectives.find((p) => p.id === id)
     }
 
+    // Whatever was painted at mount — the server's initial settings or the
+    // localStorage snapshot — is a paint-flash optimisation, not a source of
+    // truth. Reconcile it against the server response exactly once per table:
+    // the guard used to be permanent, which pinned a browser to a stale layout
+    // (or to a perspective deleted elsewhere) for the lifetime of its
+    // localStorage entry (#5113). One-shot matters as much as reconciling at
+    // all — a later refetch must not clobber edits made after mount.
+    if (initialSnapshotRef.current || initialPerspectiveAppliedRef.current) {
+      if (serverReconciledTableRef.current === perspectiveTableId) return
+      serverReconciledTableRef.current = perspectiveTableId
+      // A snapshot only speaks for the active perspective: once the user has
+      // picked a different view, reconciling the mount-time one would undo that
+      // choice, so fall back to identity-only resolution.
+      const hydrated = hydratedSnapshotRef.current
+      const snapshot = hydrated && (!activePerspectiveId || activePerspectiveId === hydrated.perspectiveId)
+        ? hydrated
+        : null
+      const localId = snapshot?.perspectiveId ?? activePerspectiveId
+      // "No view" and the widths-only snapshot (#1835) carry no perspective;
+      // resolving a server default over them would override an explicit choice.
+      if (!localId) return
+      const local = tryResolve(localId)
+      if (local) {
+        const serverUpdatedAt = local.updatedAt ? Date.parse(local.updatedAt) : NaN
+        const serverIsNewer = snapshot != null
+          && Number.isFinite(serverUpdatedAt)
+          && serverUpdatedAt > snapshot.updatedAt
+        // `snapshot.updatedAt` is a browser clock reading and `local.updatedAt`
+        // a database one, so clock skew alone must never re-apply a view — the
+        // settings have to differ materially too.
+        const settingsDiffer = snapshot != null && diffPerspectiveSettings(
+          sanitizePerspectiveSettings(local.settings) ?? {},
+          sanitizePerspectiveSettings(snapshot.settings) ?? {},
+        ).length > 0
+        if (serverIsNewer && settingsDiffer) {
+          // Reconciliation is a background correction the user did not ask for,
+          // so it follows the mount-time restore rather than an explicit view
+          // selection: on a host that owns filter persistence through the URL,
+          // it must not overwrite the filter currently on screen.
+          applyPerspectiveSettings(local.settings, local.id, {
+            preserveAdvancedFilter: !!advancedFilter?.onApplyTree,
+          })
+          initialPerspectiveAppliedRef.current = true
+        }
+        return
+      }
+      // The snapshot points at a perspective that no longer exists — deleted,
+      // unshared, or reassigned in another session. Drop it and fall through to
+      // normal resolution instead of staying pinned to orphaned settings.
+      writePerspectiveSnapshot(perspectiveTableId, null)
+      initialSnapshotRef.current = null
+      hydratedSnapshotRef.current = null
+      initialPerspectiveAppliedRef.current = false
+      orphanedSnapshotDropped = true
+    }
+
     let target: PerspectiveDto | RolePerspectiveDto | undefined
     if (activePerspectiveId) {
       target = tryResolve(activePerspectiveId)
@@ -2607,10 +2689,31 @@ export function DataTable<T extends RowData>({
       target = source.perspectives[0]
     }
     if (target) {
-      applyPerspectiveSettings(target.settings, target.id)
+      // Falling through to normal resolution after `orphanedSnapshotDropped`
+      // is the same background correction handled below when nothing is left
+      // at all — the active view was deleted, unshared, or reassigned in
+      // another session — so it must not clobber a host-owned advanced filter
+      // either. A fresh mount with no snapshot keeps applying normally.
+      applyPerspectiveSettings(
+        target.settings,
+        target.id,
+        orphanedSnapshotDropped ? { preserveAdvancedFilter: !!advancedFilter?.onApplyTree } : undefined,
+      )
+    } else if (orphanedSnapshotDropped) {
+      // Nothing is left to fall back to — the deleted view was the only one. The
+      // orphaned columns/sorting/search are still painted from the mount-time
+      // restore and `activePerspectiveId` still names a row the server no longer
+      // has, so clear explicitly rather than leaving a dead view on screen until
+      // the next reload (#5113). Like the reconciling apply above, this is a
+      // background correction the user never asked for — the view was deleted in
+      // another session — so it must not clear the filter a host that owns
+      // filter persistence through the URL currently has on screen.
+      applyPerspectiveSettings({}, null, {
+        preserveAdvancedFilter: !!advancedFilter?.onApplyTree,
+      })
     }
     initialPerspectiveAppliedRef.current = true
-  }, [canUsePerspectives, perspectiveData, perspectiveTableId, perspectiveConfig, applyPerspectiveSettings, activePerspectiveId])
+  }, [canUsePerspectives, perspectiveData, perspectiveTableId, perspectiveConfig, applyPerspectiveSettings, activePerspectiveId, advancedFilter?.onApplyTree])
 
   const scrollTableIntoView = React.useCallback(() => {
     const rect = containerRef.current?.getBoundingClientRect()
@@ -3214,7 +3317,7 @@ export function DataTable<T extends RowData>({
   const hasActions = actions !== undefined && actions !== null && actions !== false
   const shouldReserveActionsSpace = actions === null || actions === false
   const exportConfig = exporter === false ? null : exporter || null
-  const resolvedExportSections = React.useMemo(() => resolveExportSections(exportConfig), [exportConfig])
+  const resolvedExportSections = React.useMemo(() => resolveExportSections(exportConfig, t), [exportConfig, t])
   const hasExport = resolvedExportSections.length > 0
   const refreshButtonConfig = refreshButton
   const hasRefreshButton = Boolean(refreshButtonConfig)

package/src/backend/PerspectiveSidebar.tsx

@@ -99,6 +99,7 @@ export function PerspectiveSidebar({
   const [pendingCloneBaselineIds, setPendingCloneBaselineIds] = React.useState<Set<string> | null>(null)
 
   const autosaveRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const pendingAutosaveActionRef = React.useRef<(() => void) | null>(null)
   const isDefaultUserChangeRef = React.useRef(false)
   const isDefaultRef = React.useRef(isDefault)
   isDefaultRef.current = isDefault
@@ -109,41 +110,93 @@ export function PerspectiveSidebar({
   const perspectivesRef = React.useRef(perspectives)
   perspectivesRef.current = perspectives
 
+  const rolePerspectivesRef = React.useRef(rolePerspectives)
+  rolePerspectivesRef.current = rolePerspectives
+
+  const activePerspectiveIdRef = React.useRef(activePerspectiveId)
+  activePerspectiveIdRef.current = activePerspectiveId
+
   const flushAutosave = React.useCallback(() => {
     if (autosaveRef.current) {
       clearTimeout(autosaveRef.current)
       autosaveRef.current = null
     }
+    pendingAutosaveActionRef.current = null
+  }, [])
+
+  // Closing the panel or unmounting inside the debounce window must not drop
+  // a pending autosave save or shared-view warning in silence — that is the
+  // same discarded-edit bug (#5113) the debounce itself was added to fix.
+  // Run whatever is pending immediately instead of just cancelling it.
+  const runPendingAutosave = React.useCallback(() => {
+    if (!autosaveRef.current) return
+    clearTimeout(autosaveRef.current)
+    autosaveRef.current = null
+    const pending = pendingAutosaveActionRef.current
+    pendingAutosaveActionRef.current = null
+    pending?.()
   }, [])
 
   const scheduleAutosave = React.useCallback(() => {
     if (!activePerspectiveId || mode.type === 'new') return
     const activePersonal = perspectivesRef.current.find((p) => p.id === activePerspectiveId)
-    if (!activePersonal) return
+    if (!activePersonal) {
+      // Role perspectives live in their own collection and are shared, so they
+      // are never autosaved into. Say so instead of dropping the edit in
+      // silence — the old early return made a discarded change look saved
+      // (#5113). The timer is reused purely to debounce the hint across a burst
+      // of column toggles.
+      const activeRole = rolePerspectivesRef.current.find((p) => p.id === activePerspectiveId)
+      if (!activeRole) return
+      flushAutosave()
+      const warnedId = activeRole.id
+      const emitWarning = () => {
+        autosaveRef.current = null
+        pendingAutosaveActionRef.current = null
+        // Switching away within the debounce window makes the warning obsolete —
+        // it would name a shared view the user is no longer editing.
+        if (activePerspectiveIdRef.current !== warnedId) return
+        flash(
+          t(
+            'ui.perspectives.autosave.sharedView',
+            'Shared views do not save automatically. Use Clone to keep these changes in your own view.',
+          ),
+          'warning',
+        )
+      }
+      pendingAutosaveActionRef.current = emitWarning
+      autosaveRef.current = setTimeout(emitWarning, 400)
+      return
+    }
     flushAutosave()
     const targetId = activePersonal.id
     const targetName = activePersonal.name
-    autosaveRef.current = setTimeout(async () => {
+    const runSave = () => {
       autosaveRef.current = null
-      try {
-        await onSaveRef.current({
-          name: targetName,
-          isDefault: isDefaultRef.current,
-          applyToRoles: [],
-          setRoleDefault: false,
-          perspectiveId: targetId,
-        })
-        flash(t('ui.perspectives.autosave.success', 'View saved'), 'success')
-      } catch (err: unknown) {
-        if (surfaceRecordConflict(err, t)) return
-        flash(t('ui.perspectives.autosave.error', 'Failed to save view'), 'error')
-      }
-    }, 400)
+      pendingAutosaveActionRef.current = null
+      void (async () => {
+        try {
+          await onSaveRef.current({
+            name: targetName,
+            isDefault: isDefaultRef.current,
+            applyToRoles: [],
+            setRoleDefault: false,
+            perspectiveId: targetId,
+          })
+          flash(t('ui.perspectives.autosave.success', 'View saved'), 'success')
+        } catch (err: unknown) {
+          if (surfaceRecordConflict(err, t)) return
+          flash(t('ui.perspectives.autosave.error', 'Failed to save view'), 'error')
+        }
+      })()
+    }
+    pendingAutosaveActionRef.current = runSave
+    autosaveRef.current = setTimeout(runSave, 400)
   }, [activePerspectiveId, mode.type, flushAutosave, t])
 
   React.useEffect(() => {
-    return () => { flushAutosave() }
-  }, [flushAutosave])
+    return () => { runPendingAutosave() }
+  }, [runPendingAutosave])
 
   const resetMode = () => {
     setMode({ type: 'idle' })
@@ -171,7 +224,7 @@ export function PerspectiveSidebar({
 
   React.useEffect(() => {
     if (!open) {
-      flushAutosave()
+      runPendingAutosave()
       setError(null)
       resetMode()
       setRenamingId(null)
@@ -393,7 +446,10 @@ export function PerspectiveSidebar({
                 {t('ui.perspectives.savedViews.new', 'New')}
               </Button>
               {(perspectives ?? emptyArray).map((p) => {
-                const isActive = activePerspectiveId === p.id
+                // While the new-view form is open the sidebar is creating, not
+                // editing: keeping a chip lit reads as "I am editing the active
+                // view" and hides the mode switch (#5113).
+                const isActive = !isNew && activePerspectiveId === p.id
                 const deleting = deletingIds.includes(p.id)
                 const isShared = sharedIds.has(p.id)
                 return (
@@ -426,7 +482,10 @@ export function PerspectiveSidebar({
                   return !perspectives.some((pp) => pp.name.trim() === rpName)
                 })
                 .map((p) => {
-                const isActive = activePerspectiveId === p.id
+                // While the new-view form is open the sidebar is creating, not
+                // editing: keeping a chip lit reads as "I am editing the active
+                // view" and hides the mode switch (#5113).
+                const isActive = !isNew && activePerspectiveId === p.id
                 const clearing = roleClearingIds.includes(p.roleId)
                 return (
                   <ViewChip

package/src/backend/__tests__/DataTable.exportSectionTitles.test.tsx

@@ -0,0 +1,134 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { DataTable } from '../DataTable'
+import type { DataTableExportConfig } from '../DataTable'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+type Row = { id: string; name: string }
+
+const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+
+const exporter: DataTableExportConfig = {
+  view: { getUrl: () => '/api/example/export?scope=view' },
+  full: { getUrl: () => '/api/example/export?scope=full' },
+}
+
+function renderExportMenu(dict: Record<string, string>, exportConfig: DataTableExportConfig = exporter) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+  const view = render(
+    React.createElement(
+      QueryClientProvider as any,
+      { client: queryClient },
+      React.createElement(
+        I18nProvider as any,
+        { locale: 'en', dict },
+        React.createElement(DataTable as any, {
+          columns,
+          data: [],
+          title: 'Test',
+          exporter: exportConfig,
+        }),
+      ),
+    )
+  )
+  fireEvent.click(screen.getByRole('button', { name: dict['ui.dataTable.export.label'] ?? 'Export' }))
+  return { view, queryClient }
+}
+
+describe('DataTable export section titles', () => {
+  it('falls back to the English defaults when the host supplies no translations', () => {
+    const { view, queryClient } = renderExportMenu({})
+    try {
+      expect(screen.getByText('Export what you view')).toBeTruthy()
+      expect(screen.getByText('Full data export')).toBeTruthy()
+    } finally {
+      view.unmount()
+      queryClient.clear()
+    }
+  })
+
+  it('uses the host dictionary for the default section titles without any page-level title', () => {
+    const { view, queryClient } = renderExportMenu({
+      'ui.dataTable.export.label': 'Eksportuj',
+      'ui.dataTable.export.viewTitle': 'Eksport tego, co widzisz',
+      'ui.dataTable.export.fullTitle': 'Eksport pełnych danych',
+    })
+    try {
+      expect(screen.getByText('Eksport tego, co widzisz')).toBeTruthy()
+      expect(screen.getByText('Eksport pełnych danych')).toBeTruthy()
+      expect(screen.queryByText('Export what you view')).toBeNull()
+      expect(screen.queryByText('Full data export')).toBeNull()
+    } finally {
+      view.unmount()
+      queryClient.clear()
+    }
+  })
+
+  it('translates the numbered fallback for explicit sections that omit a title', () => {
+    const { view, queryClient } = renderExportMenu(
+      { 'ui.dataTable.export.sectionTitle': 'Eksport {index}' },
+      { sections: [{ getUrl: () => '/api/example/export?scope=first' }] },
+    )
+    try {
+      expect(screen.getByText('Eksport 1')).toBeTruthy()
+    } finally {
+      view.unmount()
+      queryClient.clear()
+    }
+  })
+
+  it('keeps the default download filename ASCII when the title is translated', async () => {
+    const anchorClicks: HTMLAnchorElement[] = []
+    const clickSpy = jest
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(function mockClick(this: HTMLAnchorElement) {
+        anchorClicks.push(this)
+      })
+    const originalCreateObjectURL = URL.createObjectURL
+    const originalRevokeObjectURL = URL.revokeObjectURL
+    URL.createObjectURL = jest.fn(() => 'blob:mock')
+    URL.revokeObjectURL = jest.fn()
+
+    const { view, queryClient } = renderExportMenu(
+      { 'ui.dataTable.export.fullTitle': '전체 데이터 내보내기' },
+      { full: { prepare: () => ({ prepared: { columns: [{ field: 'id', header: 'Id' }], rows: [{ id: '1' }] } }) } },
+    )
+    try {
+      expect(screen.getByText('전체 데이터 내보내기')).toBeTruthy()
+      fireEvent.click(screen.getByRole('button', { name: 'CSV' }))
+      await waitFor(() => expect(anchorClicks.length).toBe(1))
+      expect(anchorClicks[0].download).toBe('Full_data_export.csv')
+    } finally {
+      clickSpy.mockRestore()
+      URL.createObjectURL = originalCreateObjectURL
+      URL.revokeObjectURL = originalRevokeObjectURL
+      view.unmount()
+      queryClient.clear()
+    }
+  })
+
+  it('keeps an explicitly supplied section title verbatim', () => {
+    const { view, queryClient } = renderExportMenu(
+      { 'ui.dataTable.export.viewTitle': 'Eksport tego, co widzisz' },
+      { view: { title: 'Host supplied title', getUrl: () => '/api/example/export?scope=view' } },
+    )
+    try {
+      expect(screen.getByText('Host supplied title')).toBeTruthy()
+      expect(screen.queryByText('Eksport tego, co widzisz')).toBeNull()
+    } finally {
+      view.unmount()
+      queryClient.clear()
+    }
+  })
+})