Edit Data Result Filtering

[lewis-sanchez]

Description

This PR enhances data filtering for the Edit Data experience by adding result filtering.

The PR adds an improved toolbar

Adds a filter component where users can refine search results:

An additional SQL pane has been added where users can see the SQL statement that was executed.
View of just the SQL pane:

View of the entire Edit Data web view with the open SQL pane:

The changes tab, continues to show the DML statements as changes are made to the result set.

Provide a clear, concise summary of the changes in this PR. What problem does it solve? Why is it needed? Link any related issues using issue closing keywords.

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

[Copilot]

Pull request overview

Copilot reviewed 26 out of 26 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 26 out of 26 changed files in this pull request and generated 8 comments.

[Copilot]

Pull request overview

Copilot reviewed 26 out of 26 changed files in this pull request and generated 4 comments.

[ghiscoding]

@lewis-sanchez the Slickgrid-React Fluent Theme sort icon fix is now available in v10.7.0. Cheers

oh and I took another look at your animated gif above, the UI is looking pretty nice now. However there is maybe 1 thing that might confuse new users, there are 2 places to add filters (via "Add Filters" button on top and then filters in the grid). I know the difference myself but the end user might not (so perhaps adding a tooltip over the top of "Add Filters" button explaining that this one would changes the SQL query which might be helpful)

I also hope that you guys will do another youtube video of the grid because it changed significantly since the original grid was introduced (you added edit, undo, filters, selections, export, ...) and of course I'm biased and would like to see more of my grid demoed... 😆

Also another side note, you might not be aware of this but Slickgrid-React has many built-in operators as I mentioned in this discussion #21909 (or see Slickgrid-React docs for this)

they use Slickgrid-React (which I maintain) and for local filters (what is currently fetched and in memory) you could use * for StartsWith or EndsWith but not both (e.g. John* or *Doe) or any operators should work in the filter input as well (>, >=, <, <=, !=, <>, or even between separated by .. like 10..25)

[Copilot]

Pull request overview

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

Files not reviewed (1)

• extensions/mssql/package-lock.json: Language not supported

Comments suppressed due to low confidence (2)

extensions/mssql/src/tableExplorer/tableExplorerWebViewController.ts:1669

• In showSql, vscode.window.showWarningMessage(...) returns a Thenable and is not awaited or prefixed with void, which violates @typescript-eslint/no-floating-promises (ignoreVoid enabled) and can break lint. Please await or void this call.

            const sqlText = (payload?.sqlText ?? state.tableQuery ?? "").toString();
            if (!sqlText.trim()) {
                vscode.window.showWarningMessage(LocConstants.TableExplorer.noScriptToOpen);
                return state;

extensions/mssql/src/tableExplorer/tableExplorerWebViewController.ts:1687

• In the showSql reducer’s error path, vscode.window.showErrorMessage(...) is called without await or void, which violates @typescript-eslint/no-floating-promises and can fail lint. Please await it or prefix with void.

                this.logger.error(
                    `Error opening SQL in editor: ${getErrorMessage(error)} - OperationId: ${this.operationId}`,
                );
                vscode.window.showErrorMessage(
                    LocConstants.TableExplorer.failedToOpenScript(getErrorMessage(error)),
                );