feat(dashboard): add legacy Table to TableNG upgrade flow - #2215
Merged
Conversation
Replace the pure localStorage column-width cache with an overrides-based persistence model. Drag-resizing a column now writes a byName override (via onOverridesChange) that persists with the panel config, while localStorage serves as a fallback for unmigrated widths. - Extract column width utilities (getColumnWidthColDef, upsertColumnWidthOverride, etc.) - Add 'custom.width' override option with InputNumber editor (min=100) - Extend IOverride type with optional width and matcher.id fields - Wire onOverridesChange through the renderer stack to parent state
- Add upgradeTableToNG utility to migrate panel configs - Show confirmation dialog when switching from table to tableNG - Add SeriesToRows and LabelsToFields to transformation exports - Add i18n keys for upgrade flow in all supported locales
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (26)
📝 WalkthroughWalkthroughThe dashboard editor now supports legacy table migration to TableNG. TableNG adds persisted column-width overrides and optional row-detail drawers. Renderer callbacks synchronize overrides with editable panels. Tests and localized labels cover the new behavior. ChangesTableNG dashboard flow
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Editor
participant upgradeTableToNG
participant TableNG
participant Panels
Editor->>upgradeTableToNG: convert legacy panel
upgradeTableToNG->>TableNG: return normalized panel
TableNG->>Panels: persist column-width overrides
Panels->>TableNG: update dashboard configuration
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- Resolve organize field names when remapping legacy link variables to
the final transformed column, supporting ${...}, [[...]] and $__field
syntaxes for name/value/labels placeholders.
- Build organize fields from normalized series columns in the Editor so
the upgrade matches the preview's available fields.
- Drop value rename to "Value" in favor of "value"; keep target legend
for labelValuesToRows overrides and multi-target value field mapping.
- Only set options.links when legacy or existing links are present.
- Remove obsolete upgrade-confirm locale keys and unused seriesToRows/
labelsToFields transformation registrations.
Add an optional "enable row detail" switch in TableNG graph styles. When enabled, a fixed 30px icon column is pinned to the left of the grid; clicking the icon opens a NavigableDrawer with Table/JSON tabs showing all fields and values of the source row, plus row/field copy actions. Click-away outside the drawer and its popups closes it. - New RowDetailDrawer, TextSearchIcon, rowDetailUtils (+tests) - CellOptions gains a wrapTextExtra slot for the toggle - Index maps formatted rows back to source rows via WeakMap and uses forEachNodeAfterFilterAndSort to honor current filter/sort order - i18n updates for en/ja/ru/zh_CN/zh_HK
…-upgrade-table-to-NG # Conflicts: # src/pages/dashboard/Renderer/Renderer/TableNG/index.tsx
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a legacy Table → TableNG upgrade path in the dashboard editor, and expands TableNG with column-width persistence via overrides plus an optional per-row “details drawer” experience (including i18n for all supported locales).
Changes:
- Introduce
upgradeTableToNG(+ tests) to migrate legacy Table panel config (transformations, overrides, links). - Add TableNG column-width utilities (+ tests) and wire column-resize to
overridespersistence via anonOverridesChangecallback. - Add TableNG row details UI (icon column, drawer, serialization utils, styling) and corresponding i18n/editor toggles.
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/dashboard/utils/upgradeTableToNG.ts | New migration utility to convert legacy Table panel configs to TableNG-compatible configs. |
| src/pages/dashboard/utils/upgradeTableToNG.test.ts | Unit tests covering migration behavior and malformed historical inputs. |
| src/pages/dashboard/types.ts | Extend override matcher compatibility (id/type) and add width support in override properties. |
| src/pages/dashboard/Renderer/Renderer/TableNG/utils/columnWidth.ts | Column-width cache/override helpers (validation, merge, upsert, cache cleanup). |
| src/pages/dashboard/Renderer/Renderer/TableNG/utils/columnWidth.test.ts | Tests for cache parsing, override precedence, and override upsert behavior. |
| src/pages/dashboard/Renderer/Renderer/TableNG/TextSearchIcon.tsx | Custom icon for row detail trigger column. |
| src/pages/dashboard/Renderer/Renderer/TableNG/style.less | Styling for TableNG row detail drawer/content and minor icon mask quoting cleanup. |
| src/pages/dashboard/Renderer/Renderer/TableNG/rowDetailUtils.ts | Utilities for row detail selection/navigation and safe serialization. |
| src/pages/dashboard/Renderer/Renderer/TableNG/rowDetailUtils.test.ts | Tests for serialization, displayed row ordering, and click-away ignore logic. |
| src/pages/dashboard/Renderer/Renderer/TableNG/RowDetailDrawer.tsx | Drawer UI to view/copy row details (table view + JSON view). |
| src/pages/dashboard/Renderer/Renderer/TableNG/index.tsx | Wire up row details, persisted column widths, and onOverridesChange resize behavior. |
| src/pages/dashboard/Renderer/Renderer/Table/index.tsx | Ensure legacy Table preview populates global series state (used during upgrade). |
| src/pages/dashboard/Renderer/Renderer/Main.tsx | Plumb onOverridesChange through renderer to panel components. |
| src/pages/dashboard/Renderer/Renderer/index.tsx | Extend renderer props to accept onOverridesChange. |
| src/pages/dashboard/Panels/index.tsx | Persist updated overrides back into dashboard/panels when authorized + editable. |
| src/pages/dashboard/locale/zh_HK.ts | Add i18n keys for upgrade flow, column width label, and row detail strings. |
| src/pages/dashboard/locale/zh_CN.ts | Add i18n keys for upgrade flow, column width label, and row detail strings. |
| src/pages/dashboard/locale/ru_RU.ts | Add i18n keys for upgrade flow, column width label, and row detail strings. |
| src/pages/dashboard/locale/ja_JP.ts | Add i18n keys for upgrade flow, column width label, and row detail strings. |
| src/pages/dashboard/locale/en_US.ts | Add i18n keys for upgrade flow, column width label, and row detail strings. |
| src/pages/dashboard/Editor/Options/TableNG/index.tsx | Enable TableNG overrides option for column width. |
| src/pages/dashboard/Editor/Options/TableNG/GraphStyles.tsx | Add editor toggle for enabling TableNG row details. |
| src/pages/dashboard/Editor/Options/TableNG/CellOptions.tsx | Add wrapTextExtra slot to extend CellOptions UI (used by row detail toggle). |
| src/pages/dashboard/Editor/index.tsx | Add “upgrade to TableNG” confirmation modal and invoke upgradeTableToNG when chosen. |
| src/pages/dashboard/Editor/Form.tsx | Hook preview renderer’s onOverridesChange to update form overrides live. |
| src/pages/dashboard/Editor/Fields/Overrides/index.tsx | Add width input control for overrides when custom.width option is enabled. |
Comment on lines
+26
to
+29
| const value = JSON.parse(storage.getItem(cacheKey) || '{}'); | ||
| if (!_.isPlainObject(value)) return {}; | ||
|
|
||
| return _.pickBy(value as ColumnWidths, isValidColumnWidth); |
Comment on lines
+79
to
+81
| result.overrides = asRecordArray(result.overrides).map((override) => { | ||
| if (override.matcher?.id !== 'byFrameRefID') return override; | ||
| const targetIndex = asRecordArray(result.targets).findIndex((target) => target.refId === override.matcher.value); |
Comment on lines
+326
to
+328
| if (_.isNumber(date1Number) && _.isNumber(date2Number)) { | ||
| return date1Number - date2Number; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Bug Fixes