vtadmin: enable sorting in all tables

[c-r-dev]

Description

vtadmin: enable table sorting, for the schemas table to sort by size / rows.

Related Issue(s)

Fixes #14153

Checklist

• "Backport to:" labels have been added if this change should be back-ported to release branches
• If this change is to be back-ported to previous releases, a justification is included in the PR description
• Tests were added or are not required
• Did the new or modified tests pass consistently locally and on CI?
• Documentation was added or is not required

Deployment Notes

Creating this PR as draft mode , introduced new SortedDataTable (inline with DataTable + some logic. on columns being sortable).

• Open for ideas on refactoring , and also would like to know if the UI changes have a std test pack to be run.

• Tested these changes locally.

[vitess-bot]

Review Checklist

Hello reviewers! 👋 Please follow this checklist when reviewing this Pull Request.

General

• Ensure that the Pull Request has a descriptive title.
• Ensure there is a link to an issue (except for internal cleanup and flaky test fixes), new features should have an RFC that documents use cases and test cases.

Tests

• Bug fixes should have at least one unit or end-to-end test, enhancement and new features should have a sufficient number of tests.

Documentation

• Apply the release notes (needs details) label if users need to know about this change.
• New features should be documented.
• There should be some code comments as to why things are implemented the way they are.
• There should be a comment at the top of each new or modified test to explain what the test does.

New flags

• Is this flag really necessary?
• Flag names must be clear and intuitive, use dashes (-), and have a clear help text.

If a workflow is added or modified:

• Each item in Jobs should be named in order to mark it as required.
• If the workflow needs to be marked as required, the maintainer team must be notified.

Backward compatibility

• Protobuf changes should be wire-compatible.
• Changes to _vt tables and RPCs need to be backward compatible.
• RPC changes should be compatible with vitess-operator
• If a flag is removed, then it should also be removed from vitess-operator and arewefastyet, if used there.
• vtctl command output order should be stable and awk-able.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.74%. Comparing base (cb7d61a) to head (a607e9b).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17468      +/-   ##
==========================================
- Coverage   67.75%   67.74%   -0.01%     
==========================================
  Files        1587     1587              
  Lines      255780   255780              
==========================================
- Hits       173310   173287      -23     
- Misses      82470    82493      +23     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[c-r-dev]

@jfontan , thanks for sharing sample UI Vitest file on slack , with 431ad9f made a UI test case. Please help to review and suggest additions if any.

[jfontan]

@jfontan , thanks for sharing sample UI Vitest file on slack , with 431ad9f made a UI test case. Please help to review and suggest additions if any.

I believe you pinged the wrong user.

[notfelineit]

Hi @c-r-dev - I have some UI feedback if that's alright 😄

• Could you make the cursor a pointer when hovering over the table columns since they're clickable now?
• Can we align the items by center horizontally (likely items-center or similar) on the triangle?

[c-r-dev]

Hi @c-r-dev - I have some UI feedback if that's alright 😄

• Could you make the cursor a pointer when hovering over the table columns since they're clickable now?
• Can we align the items by center horizontally (likely items-center or similar) on the triangle?

Thanks @notfelineit for helping to review and suggest changes. Made changed with 30007fe

As part of commit -

1. made the pointer a cursor for column headers
2. also made table table-fixed , so that column dont appear shifting when triangle is displayed.

Please help to let me know.

New UI looks like below

[notfelineit]

I'll be making some UI changes to this branch!

[notfelineit]

I went ahead and updated the chevron icons to the ones that already exist in this repo. I also made it so that sortable columns always have the icons (so we know they're sortable). What changes is the fill color when clicked:

Additional changes:

• Use tailwind className over style property, since we use tailwind for consistency in this repository
  • Use items-center along with flex to center the items horizontally
• Refactored out the column header into its own component

[beingnoble03]

LGTM. Tested this locally as well. Thank you!

[deepthi]

Thank you for the contribution!