Moving query results to slickgrid-react

[aasimkhan30]

Description

1. Moves Query Results to the new Fluent-themed SlickGrid React implementation behind a feature flag.
2. Adds a reusable FluentResultGrid component with Fluent-styled context menus, filtering, resize dialog, toolbar, grid state handling, and support for contributing custom commands/actions.
3. Keeps the visual style close to the existing results grid for lower migration risk.
4. Adds support for rearranging columns, showing/hiding columns, freezing/unfreezing columns and improved selection behavior.

New Grid	Old Grid

Follow-Up

1. Move SQL notebook results to the SlickGrid React implementation.
2. Add more dedicated tests for the reusable grid component.
3. Continue parity validation against the existing results grid.

Code Changes Checklist

• New or updated unit tests added
• All existing tests pass (npm run test)
• Code follows contributing guidelines
• Telemetry/logging updated if relevant
• No regressions or UX breakage

Reviewers: Please read our reviewer guidelines

[github-actions]

PR Changes

Category	Target Branch	PR Branch	Difference
vscode-mssql VSIX	78879 KB	78939 KB	⚪ 60 KB ( 0% )
sql-database-projects VSIX	6309 KB	6309 KB	⚪ 0 KB ( 0% )
data-workspace VSIX	535 KB	535 KB	⚪ 0 KB ( 0% )
keymap VSIX	7 KB	7 KB	⚪ 0 KB ( 0% )

[codecov-commenter]

Codecov Report

❌ Patch coverage is 93.72822% with 54 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.65%. Comparing base (8c898fa) to head (5844750).
⚠️ Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
...ntResultGrid/internal/fluentResultGridSelection.ts	88.00%	24 Missing ⚠️
...tensions/mssql/src/webviews/common/locConstants.ts	29.41%	12 Missing ⚠️
...ql/src/queryResult/queryResultWebViewController.ts	55.55%	8 Missing ⚠️
extensions/mssql/src/queryResult/utils.ts	46.15%	7 Missing ⚠️
...tResultGrid/internal/fluentResultGridTransforms.ts	98.59%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #22329      +/-   ##
==========================================
- Coverage   88.22%   87.65%   -0.58%     
==========================================
  Files         397      316      -81     
  Lines      126840   112118   -14722     
  Branches     7959      558    -7401     
==========================================
- Hits       111910    98278   -13632     
+ Misses      14930    13840    -1090     

Flag	Coverage Δ
data-workspace	77.10% <ø> (ø)
mssql	89.04% <93.72%> (-0.47%)	⬇️
sqlproj	77.56% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
extensions/mssql/src/previews/previewService.ts	100.00% <100.00%> (ø)
extensions/mssql/src/queryResult/singletonStore.ts	87.14% <100.00%> (-12.86%)	⬇️
...esultGrid/internal/fluentResultGridCommandUtils.ts	100.00% <100.00%> (ø)
...entResultGrid/internal/fluentResultGridKeyboard.ts	100.00% <100.00%> (ø)
...FluentResultGrid/internal/fluentResultGridState.ts	100.00% <100.00%> (ø)
...tResultGrid/internal/fluentResultGridTransforms.ts	98.59% <98.59%> (ø)
extensions/mssql/src/queryResult/utils.ts	60.10% <46.15%> (-0.68%)	⬇️
...ql/src/queryResult/queryResultWebViewController.ts	81.59% <55.55%> (-0.76%)	⬇️
...tensions/mssql/src/webviews/common/locConstants.ts	86.20% <29.41%> (-2.57%)	⬇️
...ntResultGrid/internal/fluentResultGridSelection.ts	88.00% <88.00%> (ø)

... and 191 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This PR introduces a new Fluent-themed SlickGrid React-based query results experience behind a preview feature flag, aiming to improve rendering performance and add richer column customization while maintaining visual parity with the existing results grid.

Changes:

• Adds a reusable FluentResultGrid webview component (provider, commands, overlays, toolbar, data view) and wires it into Query Results behind mssql.preview.betaResultsGrid.
• Extends query result state persistence (server-side singleton store + RPC) to include grid “view state” (hidden columns, frozen column, selection) in addition to widths/filters/scroll.
• Updates layout/keyboard-navigation behaviors in the query results grid view and adds unit tests for new selection/state logic.

Reviewed changes

Copilot reviewed 50 out of 50 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
localization/xliff/vscode-mssql.xlf	Localization entries for new preview/commands (auto-generated localization file).
extensions/mssql/test/unit/singletonStore.test.ts	Tests for deleting persisted gridViewStates with URI state.
extensions/mssql/test/unit/gridSelectionUtils.test.ts	Adds unit tests for displayed→actual selection row conversion.
extensions/mssql/src/webviews/pages/QueryResult/resultGrid.tsx	Expands ResultGrid props to support maximize/view-mode integration.
extensions/mssql/src/webviews/pages/QueryResult/queryResultsTab.tsx	Switches between old grid and Fluent grid based on feature flag.
extensions/mssql/src/webviews/pages/QueryResult/queryResultsGridView.tsx	Improves sizing/layout logic and supports injectable grid component + command bar behavior.
extensions/mssql/src/webviews/pages/QueryResult/queryResultPane.tsx	Uses “Results Preview” strings/tooltips when beta grid flag is enabled.
extensions/mssql/src/webviews/pages/QueryResult/queryResultFluentResultGrid.tsx	New Query Results wrapper for FluentResultGrid (provider, commands, strings, RPC wiring).
extensions/mssql/src/webviews/pages/QueryResult/commandBar.tsx	Adds capture handler/data attribute to support Shift+Tab focus behavior.
extensions/mssql/src/webviews/media/slickgrid.css	Minor header layout tweaks (min-width/margin) to prevent truncation issues.
extensions/mssql/src/webviews/common/useVscodeSelector.ts	Reworks selector subscription logic for webview state slices.
extensions/mssql/src/webviews/common/locConstants.ts	Adds localized strings for “Results Preview” and “Show all columns”.
extensions/mssql/src/webviews/common/FluentSlickGrid/FluentSlickGrid.tsx	Wraps SlickgridReact to work around customDataView initialization bug.
extensions/mssql/src/webviews/common/FluentResultGrid/index.ts	Barrel exports for the new reusable Fluent grid package.
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridTheme.ts	Theme metadata contract for the Fluent grid.
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridStrings.ts	Localizable string contracts + merge helper.
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridState.ts	Grid state types (filters/sort/scroll + view state).
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridProps.ts	Public props/handle contracts for the reusable grid.
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridPrimitives.ts	Shared primitive types for commands/selection/positioning.
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridDataSource.ts	Data source contract (in-memory vs windowed).
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridCommands.ts	Command contribution, placement, and keybinding types/utilities.
extensions/mssql/src/webviews/common/FluentResultGrid/types/fluentResultGridCommandIds.ts	Built-in command id definitions.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridTransforms.ts	In-memory filter/sort transforms and filter item building.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridSelection.ts	Selection conversions between SlickRange and data selections.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/FluentResultGridResizeDialog.tsx	Fluent resize dialog overlay for column width changes.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridProviderTypes.ts	Provider/overlay typing.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridOverlays.ts	Overlay state models (menu/filter/resize).
extensions/mssql/src/webviews/common/FluentResultGrid/internal/FluentResultGridMenuOverlay.tsx	Fluent context menu overlay host and rendering.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridKeyboard.ts	Shortcut matching helpers (structured key combos).
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridFormatters.ts	Cell/column formatting helpers for the Fluent grid.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/FluentResultGridFilterOverlay.tsx	Fluent filter overlay with virtualization and keyboard handling.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridDataView.ts	CustomDataView implementation for windowed/in-memory row loading.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridConstants.ts	Shared constants for sizing, defaults, and behavior.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridCommandResolution.ts	Resolves contributions into runnable commands per placement/context.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridColumns.ts	Generates SlickGrid column definitions for result sets.
extensions/mssql/src/webviews/common/FluentResultGrid/internal/fluentResultGridBuiltInCommands.ts	Built-in command catalog + default placement maps.
extensions/mssql/src/webviews/common/FluentResultGrid/FluentResultGridToolbar.tsx	Fluent vertical toolbar with overflow menu and command wiring.
extensions/mssql/src/webviews/common/FluentResultGrid/FluentResultGridProvider.tsx	Provider for strings/theme/keybindings and overlay coordination.
extensions/mssql/src/webviews/common/FluentResultGrid/FluentResultGrid.vscode.css	VS Code token mappings for Fluent grid theming.
extensions/mssql/src/webviews/common/FluentResultGrid/FluentResultGrid.tsx	Main reusable grid component (SlickGrid + toolbar).
extensions/mssql/src/webviews/common/FluentResultGrid/FluentResultGrid.css	Base styling for the Fluent grid (cells, headers, focus, etc.).
extensions/mssql/src/sharedInterfaces/queryResult.ts	Adds shared GridViewState types and get/set RPC contracts; adds beta flag in webview state.
extensions/mssql/src/queryResult/utils.ts	Registers RPC handlers to persist/retrieve GridViewState.
extensions/mssql/src/queryResult/singletonStore.ts	Adds gridViewStates storage to singleton grid state.
extensions/mssql/src/queryResult/queryResultWebViewController.ts	Plumbs beta flag into initial state and configuration change handling.
extensions/mssql/src/previews/previewService.ts	Adds BetaResultsGrid preview feature enum entry.
extensions/mssql/package.nls.json	Adds localized description key for the new preview setting.
extensions/mssql/package.json	Adds mssql.preview.betaResultsGrid configuration setting.
extensions/mssql/l10n/bundle.l10n.json	Localization bundle updates for new strings (auto-generated localization file).

[ghiscoding]

if there's a bug in Slickgrid-React, feel free to open a PR in my project to fix it 😉

[aasimkhan30]

Yeah, its a todo

[ghiscoding]

@aasimkhan30 I left a few PR comments, it's nice to see that you guys are looking into switching all grids to Slickgrid-React and you also got a very close UI match to previous grid too 😃 I would suggest that you take a look at some of my demos which might give you some more ideas for this PR or future ones:

• Example 51 - Menu Slots - allows you to change the styling/rendering of any Menu plugins (Cell, Context, Header Menu or Grid Menus) by using a menu renderer similar to slots, which can be useful especially if you want to display keyboard shortcuts in some menu items
• Example 52 - SQL Backend Service perhaps that might be useful in the future?
• Example 53 - Custom Filter Bar where I experimented with a similar MSSQL UI
• Example 54 - Web MCP which just came out and is an optional plugin (requires extra download) to enable the use of Web MCP (based on Ag-Grid AI toolkit) to communicate with the grid, which was requested by a user and contributor to my project

feel free to ping me if you have any questions or need clarifications, you can ping me here or open a new Discussion in my project. Cheers

[Copilot]

Pull request overview

Copilot reviewed 61 out of 61 changed files in this pull request and generated 3 comments.

[ghiscoding]

@aasimkhan30 I'm assuming this PR will probably fix issue #22213 even though it will be experimental at first. It's probably good to link the issue nonetheless