Accessibility ergonomy filtering

[littlesvensson]

Fixes #11621

Description

Used bootstrap classes and some JS logic for filtering. The fields are now aligned so its easier to orientate and keep responsivity at the same time. Clear button is disabled in case no filter is set in the fields.

Before:

After:

smaller screen

smaller screen with at least one filter option

[dryrunsecurity]

DryRun Security Summary

The code changes update the Dojo application's CSS, JavaScript, and HTML templates to improve form control width, enhance form clearing functionality, migrate to the select2 library, and add a "Clear Filters" feature, with a focus on maintaining user experience and potential security considerations.

Expand for full summary

Summary:

The provided code changes cover various updates to the Dojo application, including CSS styling, JavaScript functionality, and HTML template modifications. The key changes are:

1. CSS Update: The changes in the dojo.css file focus on updating the width of form controls within a filter set, making them take up the full width of their container.

2. JavaScript Improvements: The changes in the index.js file enhance the clear_form function to handle select-multiple form elements more effectively, ensuring a comprehensive form clearing experience.

3. Library Migration: The changes in the filter_js_snippet.html file replace the bootstrap-select library with the select2 library for handling multiple-select dropdown elements, addressing potential library compatibility issues.

4. Filter Form Enhancements: The changes in the filter_snippet.html file improve the layout, labeling, and functionality of the filter form, including the addition of a "Clear Filters" functionality.

From an application security perspective, the changes do not appear to introduce any obvious security vulnerabilities. However, it is important to review the following aspects:

1. Input Validation: Ensure that all user input, including form field values, is properly validated and sanitized to prevent potential injection attacks.
2. CSRF Protection: Verify that the form includes appropriate CSRF protection mechanisms to prevent cross-site request forgery attacks.
3. Sensitive Data Handling: Ensure that any sensitive data is handled securely and not exposed in the URL or form fields.
4. Error Handling: Review the error handling and logging mechanisms to avoid leaking sensitive information.
5. Accessibility: Ensure that the updated layout and functionality of the filter form maintain accessibility standards.

Overall, the changes appear to be focused on improving the user experience and addressing compatibility issues, and they do not seem to have any immediate security implications. However, it is crucial to perform a thorough security review to identify and address any potential vulnerabilities.

Files Changed:

1. dojo/static/dojo/css/dojo.css: The changes update the width property of a CSS class, making the form controls within the filter set take up the full width of their container.

2. dojo/static/dojo/js/index.js: The changes enhance the clear_form function to handle select-multiple form elements more effectively, ensuring a comprehensive form clearing experience.

3. dojo/templates/dojo/filter_js_snippet.html: The changes replace the bootstrap-select library with the select2 library for handling multiple-select dropdown elements, addressing potential library compatibility issues.

4. dojo/templates/dojo/filter_snippet.html: The changes improve the layout, labeling, and functionality of the filter form, including the addition of a "Clear Filters" functionality.

Code Analysis

We ran 9 analyzers against 4 files and 1 analyzer had findings. 8 analyzers had no findings.

Analyzer	Findings
Configured Codepaths Analyzer	4 findings

Overall Riskiness

🔴 Risk threshold exceeded.

We've notified @mtesauro, @grendel513.

View PR in the DryRun Dashboard.

[mtesauro]

@littlesvensson You can't see me but I'm doing a happy dance. 🕺

One thing, please make this PR against the dev branch rather than master. We don't accept source PRs against master.

[littlesvensson]

One thing, please make this PR against the dev branch rather than master. We don't accept source PRs against master.

thanks @mtesauro for feedback. Yes sorry, that was only accidentally to master 🙈 , original thought was to the bugfix as it fixes one. I will reopen the PR to a different branch once I ll update the unit tests.

[mtesauro]

@littlesvensson

One thing, please make this PR against the dev branch rather than master. We don't accept source PRs against master.

thanks @mtesauro for feedback. Yes sorry, that was only accidentally to master 🙈 , original thought was to the bugfix as it fixes one. I will reopen the PR to a different branch once I ll update the unit tests.

Thanks for moving to the dev branch.

While I LOVE this change, we try to keep bugfix kinda small (though loads of that is qualitative judgements) I asked for Dev since this is as much as improvement as it's a bugfix so felt 'better' as a change for the next minor version.