MudTabs: Add Drag and Drop functionality

[versile2]

Description

Resolves #10704
Add Drag and Drop functionality to MudTabs by allowing MudTabPanels to be re-ordered. Implemented Drag and Drop using the built in MudDropContainer. It can be enabled by using EnableDragAndDrop on MudTabs. Enabled ondragenter to scroll when dragging over built in scroll icons.

Includes a minor synchronization bugfix when someone uses ActivatePanel not properly rendering the tabs until the next update.

MudTabsDragAndDrop.mp4

How Has This Been Tested?

Unit Test added to verify basic styles and ItemDropped functionality.
Visual Testing underway.

Type of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (fix or improvement to the website or code docs)

Checklist

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[codecov]

Codecov Report

Attention: Patch coverage is 76.47059% with 4 lines in your changes missing coverage. Please review.

Project coverage is 91.10%. Comparing base (82ee87c) to head (fe5de26).
Report is 19 commits behind head on dev.

Files with missing lines	Patch %	Lines
src/MudBlazor/Components/Tabs/MudTabs.razor.cs	76.47%	2 Missing and 2 partials ⚠️

❌ Your patch status has failed because the patch coverage (76.47%) is below the target coverage (100.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #11267      +/-   ##
==========================================
- Coverage   91.12%   91.10%   -0.02%     
==========================================
  Files         465      465              
  Lines       14412    14429      +17     
  Branches     2790     2792       +2     
==========================================
+ Hits        13133    13146      +13     
- Misses        641      643       +2     
- Partials      638      640       +2     

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

🚀 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.

[versile2]

@richardhauer Take a look at this one, my ItemUpdated method still worked so I didn't want to change it. However I want to make sure it's in line with the new sort stuff you added.

[richardhauer]

@richardhauer Take a look at this one, my ItemUpdated method still worked so I didn't want to change it. However I want to make sure it's in line with the new sort stuff you added.

@versile2 I like your feature, I've been meaning to integrate sortable.js into this library for a while because I really like it, but it seems that you'd got this going library-free!

It seems like you've already had a look at my feature, but it essentially intercepts the loop to provide sorting control, where I think your ItemUpdated is manually manipulating the underlying list. In the natural-order case (no sorting expression) the default list order is maintained and your feature will work.

In the event a user has set a sorting expression I think you will get un-expected results if you reorder the list items, or rather no observable result as the sorting overrides the natural item order.

Logically, I expect that manually sortable tabs would be mutually exclusive to expression-sorted. I suggest these features cannot both be used together. An analyzer could be used to detect this and warn the user.

If we want to support both features at once I think a shadow list is needed that supports some additional properties needed to determine the intersection of automatic sorting and manual override, as in "sort all the tabs this way in the event they have no 'manual override index' but if they do use that instead" sort of thing.

As a step 0 I think mutually exclusive is reasonable. Sorting should be auto or manual, not both. (imho)

[versile2]

@danielchalmers

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[danielchalmers]

Sorry for the delay, I don't use the tab component so I'm not able to get up to speed and review it right now but will try to at some point if no one else is available.

[RickBenz]

This is a great start, the drag and drop I was looking for is in the advanced setup when you allow users to create new tabs and then allow them to drag and drop in the left panel.

I'll make a test of this change to see what happens! Much appreciated getting this in as I have other use case for this ability.

[versile2]

This is a great start, the drag and drop I was looking for is in the advanced setup when you allow users to create new tabs and then allow them to drag and drop in the left panel.

I'll make a test of this change to see what happens! Much appreciated getting this in as I have other use case for this ability.

Let me know I did quite a bit of testing but there's always a chance I missed something.

[absmallwood]

This is looking great, definitely what I was looking for in the issue reported. I'm looking forward to implementing this one!

[versile2]

@danielchalmers Any time to look at this one maybe this weekend?

[danielchalmers]

Great work!