refactor(MultiSelect): support ShowToolbar parameter when set ShowSearch to true

[ArgoZhang]

Link issues

fixes #5645

Summary By Copilot

This pull request includes several changes to the BootstrapBlazor project, focusing on updating package versions, enhancing the MultiSelect component, and adding localization entries. The most important changes are grouped by theme below.

Package Updates:

• Updated BootstrapBlazor.DockView package to version 9.1.5 in BootstrapBlazor.Server.csproj.

MultiSelect Component Enhancements:

• Added a new ShowToolbar property to the MultiSelect component and updated the component to include a toolbar with default buttons. [1] [2] [3] [4] [5] [6] [7] [8] [9]
• Updated the MultiSelect component's SCSS to support fixed toolbar and search box styles. [1] [2] [3] [4]

Localization Additions:

• Added new localization entries for ShowSearch and IsFixedSearch attributes in en-US.json and zh-CN.json. [1] [2] [3]

Project Version Update:

• Incremented the project version to 9.5.0-beta03 in BootstrapBlazor.csproj.

Code Refactoring:

• Refactored the DropdownMenuClassString property in SelectBase.cs to use the new CheckFixedSearch method. [1] [2]
• Adjusted the padding for the search box in bootstrapblazor.scss.

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Adds a ShowToolbar parameter to the MultiSelect component, allowing users to display a toolbar with default buttons when ShowSearch is enabled. This change also includes associated styling updates and localization entries.

New Features:

• Introduces a ShowToolbar property to the MultiSelect component, enabling the display of a toolbar with default buttons when ShowSearch is enabled.

Enhancements:

• Enhances the MultiSelect component to include a ShowToolbar property, providing users with a toolbar when ShowSearch is enabled.
• Updates the MultiSelect component's SCSS to support fixed toolbar and search box styles.
• Refactors the DropdownMenuClassString property in SelectBase.cs to use the new CheckFixedSearch method.
• Adjusts the padding for the search box in bootstrapblazor.scss.
• Adds new localization entries for ShowSearch and IsFixedSearch attributes in en-US.json and zh-CN.json.
• Updates the MultiSelects sample page to include the new ShowToolbar property.
• Updates the MultiSelects sample page to set default values for IsFixedSearch, IsClearable, ShowToolbar and ShowSearch

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request introduces a ShowToolbar property to the MultiSelect component, allowing users to display a toolbar with default or custom buttons. It also includes CSS refactoring to support the new property and localization updates for ShowToolbar and IsFixedSearch properties. Finally, the DropdownMenuClassString property in SelectBase.cs was refactored to use the new CheckFixedSearch method.

Sequence diagram for MultiSelect component with ShowToolbar

sequenceDiagram
    participant User
    participant MultiSelect Component

    User->>MultiSelect Component: Selects an item
    activate MultiSelect Component
    MultiSelect Component->>MultiSelect Component: Updates selected values
    MultiSelect Component->>MultiSelect Component: Renders toolbar with buttons (if ShowToolbar is true)
    MultiSelect Component-->>User: Updates UI with selected items and toolbar
    deactivate MultiSelect Component

Loading

File-Level Changes

Change	Details	Files
Introduced a new ShowToolbar property to the MultiSelect component, allowing users to display a toolbar with default buttons (Select All, Invert Select, Clear) or custom buttons via a template.	Added ShowToolbar property to MultiSelect component. Added default buttons (Select All, Invert Select, Clear) to the toolbar. Added support for custom buttons via ButtonTemplate. Updated the component's rendering logic to include the toolbar when ShowToolbar is enabled.	src/BootstrapBlazor/Components/Select/MultiSelect.razor src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor src/BootstrapBlazor.Server/Components/Samples/MultiSelects.razor.cs
Refactored CSS styles to support the new ShowToolbar property and ensure proper layout when both ShowSearch and ShowToolbar are enabled.	Added is-fixed-toolbar class to the dropdown menu to handle fixed toolbar styling. Adjusted the max-height calculation for the dropdown menu body when both search and toolbar are fixed. Updated toolbar styles, including padding, white-space, and button styling. Added a border between the toolbar and the rest of the dropdown content.	src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss src/BootstrapBlazor/Components/Select/Select.razor.scss src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
Added localization support for the new ShowToolbar and IsFixedSearch properties.	Added localization entries for ShowToolbar in en-US.json and zh-CN.json. Added localization entries for IsFixedSearch in en-US.json and zh-CN.json.	src/BootstrapBlazor.Server/Locales/en-US.json src/BootstrapBlazor.Server/Locales/zh-CN.json
Refactored the DropdownMenuClassString property in SelectBase.cs to use the new CheckFixedSearch method.	Updated DropdownMenuClassString to use CheckFixedSearch method. Added CheckFixedSearch method to determine if the search box should be fixed based on ShowSearch, IsFixedSearch and ShowToolbar properties.	src/BootstrapBlazor/Components/Select/SelectBase.cs

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#5645	Implement virtualization or pagination for the MultiSelect component to handle large datasets efficiently.	❌	The PR introduces a ShowToolbar parameter but does not address the core issue of virtualization or pagination for handling large datasets in the MultiSelect component. The original issue requested either pagination parameters or virtualization to improve performance with large datasets, which this PR does not implement.

Possibly linked issues

• feat(MultiSelect): add IsVirtualize parameter #5645: The PR fixes the issue by adding a toolbar and search box to the MultiSelect component and updating the SCSS to support fixed styles. The changes ensure the MultiSelect component updates correctly in edit dialogs.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider adding a sample to the demo page that showcases the new ShowToolbar feature with custom buttons via the ButtonTemplate.
• The SCSS changes introduce a lot of new variables; ensure these are consistently used and documented.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (366c830) to head (77665e6).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #5655   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          654       654           
  Lines        29571     29576    +5     
  Branches      4207      4208    +1     
=========================================
+ Hits         29571     29576    +5     

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