Skip to content

fix(params): parameters, grid & tables polish bundle (#1055) - #1083

Merged
alfredo1996 merged 3 commits into
release/1.1from
fix/issue-1055-params-grid-tables-polish
Jun 14, 2026
Merged

fix(params): parameters, grid & tables polish bundle (#1055)#1083
alfredo1996 merged 3 commits into
release/1.1from
fix/issue-1055-params-grid-tables-polish

Conversation

@alfredo1996

@alfredo1996 alfredo1996 commented Jun 14, 2026

Copy link
Copy Markdown
Owner

Closes #1055

Dogfood session 5 (#895) P2 parameters, grid & tables polish bundle.

Changes

Parameters

  • Name normalizationnormalizeParamName strips a leading param_, so naming a parameter param_status produces the clean token $param_status (not the doubled $param_param_status) and a STATUS label. Applied at the editor reference hint, the parameter preview, and on save.
  • Preview waiting state — the widget-editor preview now mirrors the dashboard's "Waiting for parameters…" state when the query references unbound $param_x tokens, instead of running the literal token and surfacing a raw syntax error at or near "$" (guards handlePreview + a panel waiting render). Related to [P2] Widget error state renders raw DB driver error to all roles — no sanitization #1050.

Data grid / tables

  • Rows-per-page — the selector trigger now shows the active page size (e.g. "10") instead of just a chevron.
  • Hide-columns — humanizes snake_case headers (Total_spend → "Total Spend"), consistent with "Customer"/"City" (humanizeHeader).
  • Row hover (P3) — data rows get a subtle hover highlight.

Tests

  • Unit: normalizeParamName (incl. single-strip), humanizeHeader.
  • jsdom: preview waiting state on the panel; page-size label in the pagination trigger; humanized labels in the hide-columns menu.
  • E2E: parameters (27) + table-column-filters green (2 action-rule failures under parallel workers were confirmed contention flakes — pass isolated).

tsc + npm run lint (root eslint .) clean.

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • New Features

    • Widget preview now displays "Waiting for parameters…" when queries contain unbound parameter tokens, improving clarity during parameter configuration.
    • Column labels in data grids now render in human-readable format (e.g., "Total Spend" instead of "total_spend").
    • Added hover effect to data grid rows for improved visual feedback.
  • Bug Fixes

    • Page size selector now displays the current value instead of appearing blank.
    • Parameter names properly normalized to prevent token duplication in references.

Dogfood session 5 P2 findings:
- Parameter name normalization: strip a leading param_ so a name like
  "param_status" yields the clean token $param_status (not the doubled
  $param_param_status) and a STATUS label — applied at the editor hint,
  the param preview, and on save.
- Widget-editor preview mirrors the dashboard "Waiting for parameters…"
  state when the query references unbound $param_x tokens, instead of
  running the literal token and surfacing a raw `syntax error at or
  near "$"` (guards handlePreview + a panel waiting state).
- Data grid: rows-per-page trigger shows the active page size; the
  hide-columns menu humanizes snake_case headers (Total_spend → "Total
  Spend"); data rows get a subtle hover highlight (P3).

Tests: unit for normalizeParamName + humanizeHeader; jsdom for the
preview waiting state, the page-size label, and humanized column labels.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jun 14, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@alfredo1996, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 35 minutes and 11 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3320d469-b6ac-4b78-954a-0da0d47457e8

📥 Commits

Reviewing files that changed from the base of the PR and between dd41de2 and ec54a09.

📒 Files selected for processing (3)
  • app/src/components/widget-editor/__tests__/use-auto-preview.test.tsx
  • app/src/components/widget-editor/widget-preview-panel.tsx
  • component/src/components/composed/__tests__/data-grid.test.tsx

Walkthrough

Adds two new utility functions — normalizeParamName (strips leading param_ prefix) and humanizeHeader (converts snake_case identifiers to title-case labels). These are wired into the widget editor to fix doubled $param_param_ tokens in query hints, save, and preview labels, and to add a "Waiting for parameters…" preview state when $param_x tokens are unbound. Data grid fixes apply humanizeHeader to column visibility labels and correct the page-size selector to display the active value. Non-grouped rows gain a hover background.

Changes

Widget Editor Parameter Fixes

Layer / File(s) Summary
normalizeParamName utility and tests
app/src/lib/parameter/normalize-param-name.ts, app/src/lib/parameter/__tests__/normalize-param-name.test.ts
New helper strips a single leading case-insensitive param_ prefix; three test cases cover stripping, pass-through, and single-occurrence behavior.
waitingForParams preview guard
app/src/components/widget-editor/widget-preview-panel.tsx, app/src/components/widget-editor/use-auto-preview.ts, app/src/components/widget-editor/__tests__/widget-preview-panel.test.tsx
Adds optional waitingForParams prop to WidgetPreviewPanelProps; renders "Waiting for parameters…" when set; useAutoPreview early-returns when unbound tokens are present. Test confirms the waiting element is shown and chart container is absent.
Widget editor modal wiring
app/src/components/widget-editor-modal.tsx
Computes previewWaitingForParams via allReferencedParamsReady and passes it to WidgetPreviewPanel.
Parameter name normalization in UI and save
app/src/components/widget-editor/parameter-config-section.tsx, app/src/components/widget-editor/parameter-preview.tsx, app/src/components/widget-editor/use-widget-save.ts
Applies normalizeParamName to paramWidgetName in query-reference hints, preview label, and stored parameterName to prevent doubled $param_param_ tokens.

Data Grid Polish

Layer / File(s) Summary
humanizeHeader utility and tests
component/src/lib/humanize-header.ts, component/src/lib/__tests__/humanize-header.test.ts
New helper converts underscore/whitespace-separated identifiers into title-cased labels; tests cover snake_case, single-word, and repeated-separator inputs.
DataGrid view-options, pagination, and row hover
component/src/components/composed/data-grid-view-options.tsx, component/src/components/composed/data-grid-pagination.tsx, component/src/components/composed/data-grid.tsx, component/src/components/composed/__tests__/data-grid-*.test.tsx
DataGridViewOptions labels use humanizeHeader; DataGridPagination SelectValue explicitly renders pagination.pageSize; non-grouped TableRow gets transition-colors hover:bg-muted/40. Tests cover humanized label assertion and active page-size display.

Sequence Diagram(s)

sequenceDiagram
  participant Editor as WidgetEditorModal
  participant Ready as allReferencedParamsReady
  participant Panel as WidgetPreviewPanel
  participant Hook as useAutoPreview

  Editor->>Ready: check(query, allParamValues)
  Ready-->>Editor: false (unbound $param_x tokens)
  Editor->>Panel: waitingForParams=true
  Panel-->>Editor: renders "Waiting for parameters…" (no chart)

  Hook->>Ready: check(query, allParamValues) during handlePreview
  Ready-->>Hook: false
  Hook-->>Hook: early return (preview skipped)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • alfredo1996/neoboard#868: Added number-range/cascading-select parameter editor behavior and reference-hint placeholders that this PR normalizes with normalizeParamName.
  • alfredo1996/neoboard#628: Added widget-editor sub-component tests asserting ParameterConfigSection/reference-hint rendering that this PR updates.
  • alfredo1996/neoboard#594: Refactored renderPreviewContent branches in widget-preview-panel.tsx that this PR extends with the waitingForParams early branch.

Suggested labels

enhancement, pkg:app, pkg:component, area:widgets, area:table

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 23.08% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes: parameter normalization, preview waiting state, and grid/table UI polish matching issue #1055 objectives.
Linked Issues check ✅ Passed All five objectives from #1055 are addressed: parameter name normalization [widget-editor-modal, parameter-config-section, parameter-preview, use-widget-save, normalize-param-name], preview waiting state [widget-editor-modal, use-auto-preview, widget-preview-panel], rows-per-page display [data-grid-pagination], humanized headers [data-grid-view-options, humanize-header], and row hover affordance [data-grid].
Out of Scope Changes check ✅ Passed All changes are scoped to #1055: parameter system enhancements, widget editor preview, data grid/table UI improvements, and comprehensive test coverage for the above features.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/issue-1055-params-grid-tables-polish

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/src/components/widget-editor/widget-preview-panel.tsx`:
- Around line 258-259: The error icon condition at line 331 only checks
previewQuery.isError and does not account for the waitingForParams state,
allowing both the "Waiting for parameters..." message and a stale error icon to
display simultaneously. Update the error icon condition to suppress the error
affordance when waitingForParams is active by adding a check for
!waitingForParams to the existing previewQuery.isError condition, so the error
icon is not shown while waiting for parameters to be provided.

In `@component/src/components/composed/data-grid.tsx`:
- Around line 376-381: A new hover affordance behavior has been added to
non-grouped rows in the data-grid component (the "transition-colors
hover:bg-muted/40" classes applied when isGrouped is false), but there is no
corresponding test to verify this behavior. Add a Vitest test case to the
DataGrid test file that verifies non-grouped data rows receive the correct hover
affordance styling by asserting that rows rendered with isGrouped=false include
the "transition-colors" and "hover:bg-muted/40" classes (or equivalent hover
behavior). This test should use jsdom to inspect the rendered DOM and confirm
the className contains these values.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ba6ac706-6f12-43e6-afd5-33677be7e0b5

📥 Commits

Reviewing files that changed from the base of the PR and between bf3534e and dd41de2.

📒 Files selected for processing (16)
  • app/src/components/widget-editor-modal.tsx
  • app/src/components/widget-editor/__tests__/widget-preview-panel.test.tsx
  • app/src/components/widget-editor/parameter-config-section.tsx
  • app/src/components/widget-editor/parameter-preview.tsx
  • app/src/components/widget-editor/use-auto-preview.ts
  • app/src/components/widget-editor/use-widget-save.ts
  • app/src/components/widget-editor/widget-preview-panel.tsx
  • app/src/lib/parameter/__tests__/normalize-param-name.test.ts
  • app/src/lib/parameter/normalize-param-name.ts
  • component/src/components/composed/__tests__/data-grid-pagination.test.tsx
  • component/src/components/composed/__tests__/data-grid-view-options.test.tsx
  • component/src/components/composed/data-grid-pagination.tsx
  • component/src/components/composed/data-grid-view-options.tsx
  • component/src/components/composed/data-grid.tsx
  • component/src/lib/__tests__/humanize-header.test.ts
  • component/src/lib/humanize-header.ts

Comment thread app/src/components/widget-editor/widget-preview-panel.tsx
Comment on lines +376 to +381
className={cn(
isGrouped
? "bg-muted/50 font-medium"
: // Subtle hover affordance on data rows (#1055).
"transition-colors hover:bg-muted/40",
)}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add test coverage for the new non-grouped row hover behavior.

This change introduces new UI behavior, but there’s no matching test in the provided DataGrid test updates. Please add a jsdom/Vitest assertion that non-grouped rows receive the hover affordance class.
As per coding guidelines, "**/*.ts: Write tests before implementation (Red → Green → Refactor). Every new behavior, bug fix, and edge case gets a test."

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@component/src/components/composed/data-grid.tsx` around lines 376 - 381, A
new hover affordance behavior has been added to non-grouped rows in the
data-grid component (the "transition-colors hover:bg-muted/40" classes applied
when isGrouped is false), but there is no corresponding test to verify this
behavior. Add a Vitest test case to the DataGrid test file that verifies
non-grouped data rows receive the correct hover affordance styling by asserting
that rows rendered with isGrouped=false include the "transition-colors" and
"hover:bg-muted/40" classes (or equivalent hover behavior). This test should use
jsdom to inspect the rendered DOM and confirm the className contains these
values.

Source: Coding guidelines

alfredorubin96 and others added 2 commits June 14, 2026 04:25
…1055)

The preview guard now imports allReferencedParamsReady; the test mocked
use-widget-query without it, so the helper was undefined and every
handlePreview-based test threw. Add a faithful mock. Full app (3018) +
component (1428) unit suites green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…#1055)

Address CodeRabbit:
- Preview panel: gate the 'Query failed' error icon on !waitingForParams
  so it can't show alongside 'Waiting for parameters…'.
- Add a DataGrid jsdom test asserting non-grouped rows get the hover class.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

@alfredo1996
alfredo1996 merged commit 9980bc5 into release/1.1 Jun 14, 2026
25 of 26 checks passed
@alfredo1996
alfredo1996 deleted the fix/issue-1055-params-grid-tables-polish branch June 14, 2026 02:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants