Improve Schema Compare Differences List

[lewis-sanchez]

Pull Request Template – vscode-mssql

Description

I'm aware of the new rule surrounding a single PR fixing a single issue, but by replacing the table components with the datagrid component, I was able to fix these issues with a single change.

This PR fixes #19365
This PR fixes #19178
This PR fixes #19182

This PR replaces the Table Fluent UI component that was previously used to list all schema comparison differences with the DataGrid Fluent UI component. The DataGrid component features long text truncation, features a better layout for consistent checkbox alignment, and built in keyboard accessibility.

Improved keyboard navigation

Checkbox alignment:

Before:
Previously when the schema comparison differences list was small, a scrollbar wouldn't appear which would cause table body rows to shift to the right and get out of alignment.

But if the differences list contained a scroll bar then rows would appear correctly aligned:

After:
With the changes in this PR that alignment issue with checkboxes is fixed as seen here with a small differences list:

And here with a differences list that contains a scroll bar:

Long source/target names no longer overlap with checkboxes.

Before:
Long text overlaps with checkboxes in the schema compare differences.

After:
Long names are truncated, so that they don't overlap with the checkboxes like they did previously:

Compacted row height:

Fixed spinner alignment issue:

In the gif, the spinner appears slightly to the left of the checkboxes, but that is now fixed as seen here:

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

[aasimkhan30]

quick suggestions based on the gif.

1. Can you make sure that loading spinner is aligned with the checkboxes.
2. Can you add a different background color to the table header? (--vscode-keybindingTable-headerBackground variable can be used for that)
3. If possible make the table header sticky so that only the rows are moved and the header remains at the top.
4. Maybe make the rows compact (reduce height) so that we can see more rows in the same screen real estate.

[github-actions]

PR Changes

Category	Main Branch	PR Branch	Difference
Code Coverage	59.60%	59.36%	⚪ 0.00%
VSIX Size	15476 KB	15446 KB	⚪ -30 KB ( 0% )
Webview Bundle Size	3768 KB	3764 KB	⚪ -4 KB ( 0% )