Use bootstrap 5.3.1 for data-sources-statistics attachment#6673
Merged
Conversation
📝 WalkthroughWalkthroughA Freemarker template for database data-sources statistics is upgraded from Bootstrap 3.4.1 to Bootstrap 5.3.1. The template's query display migrates from panel-group collapsible panels to Bootstrap 5 accordion components with updated markup and data attributes. Responsive grid classes and JavaScript dependencies are updated to match Bootstrap 5 conventions. ChangesBootstrap 5 migration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Member
Author
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #6673 +/- ##
=========================================
Coverage 97.79% 97.79%
Complexity 7325 7325
=========================================
Files 1015 1015
Lines 21508 21508
Branches 1416 1416
=========================================
Hits 21033 21033
Misses 359 359
Partials 116 116 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@vividus-plugin-db/src/main/resources/data-sources-statistics.ftl`:
- Line 110: The <p> tag currently uses the deprecated align="center" attribute;
replace it by removing the align attribute and applying Bootstrap's text-center
class instead (e.g., change the <p align="center"> element to a <p> element that
includes class="text-center", merging with any existing class attribute if
present) so centering uses modern HTML/CSS conventions.
- Around line 35-46: The accordion markup lacks proper accessibility linkage:
add an id attribute to the header element (e.g., give the <h4
class="accordion-header"> an id like "heading-left-sql") and add
aria-labelledby="heading-left-sql" to the collapse container with
id="collapse-left-sql" so the collapse div references its header; optionally add
data-bs-parent="`#accordion`" to the collapse div to enforce single-open accordion
behavior.
- Around line 50-61: The right-query accordion markup (button with class
"accordion-button" and collapse div id "collapse-right-sql") lacks the
accessibility attributes used on the left accordion; add a unique id to the
header button (e.g., id="heading-right-sql"), set aria-controls on the button to
"collapse-right-sql" (if not present), and add role="region" plus
aria-labelledby="heading-right-sql" on the div with id="collapse-right-sql" so
the button and panel are properly linked for screen readers.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 957e2c81-d316-4aed-96ef-4454f18b5fdf
📒 Files selected for processing (1)
vividus-plugin-db/src/main/resources/data-sources-statistics.ftl
Comment on lines
+35
to
46
| <div class="accordion-item accordion-item-info"> | ||
| <h4 class="accordion-header"> | ||
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-left-sql" aria-expanded="false" aria-controls="collapse-left-sql"> | ||
| Left query | ||
| </button> | ||
| </h4> | ||
| <div id="collapse-left-sql" class="accordion-collapse collapse"> | ||
| <div class="accordion-body"> | ||
| <pre><code class="sql">${left.query}</code></pre> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Add accessibility attributes for proper accordion semantics.
The accordion structure is missing key accessibility attributes:
- The
<h4 class="accordion-header">should have anidattribute (e.g.,id="heading-left-sql") - The collapse div should have
aria-labelledbypointing to that heading ID
Additionally, consider adding data-bs-parent="#accordion" to the collapse div if you want only one accordion panel open at a time (standard accordion behavior).
♿ Proposed fix for accessibility
- <div class="accordion-item accordion-item-info">
- <h4 class="accordion-header">
+ <div class="accordion-item accordion-item-info">
+ <h4 class="accordion-header" id="heading-left-sql">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="`#collapse-left-sql`" aria-expanded="false" aria-controls="collapse-left-sql">
Left query
</button>
</h4>
- <div id="collapse-left-sql" class="accordion-collapse collapse">
+ <div id="collapse-left-sql" class="accordion-collapse collapse" aria-labelledby="heading-left-sql" data-bs-parent="`#accordion`">
<div class="accordion-body">
<pre><code class="sql">${left.query}</code></pre>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div class="accordion-item accordion-item-info"> | |
| <h4 class="accordion-header"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-left-sql" aria-expanded="false" aria-controls="collapse-left-sql"> | |
| Left query | |
| </button> | |
| </h4> | |
| <div id="collapse-left-sql" class="accordion-collapse collapse"> | |
| <div class="accordion-body"> | |
| <pre><code class="sql">${left.query}</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item accordion-item-info"> | |
| <h4 class="accordion-header" id="heading-left-sql"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="`#collapse-left-sql`" aria-expanded="false" aria-controls="collapse-left-sql"> | |
| Left query | |
| </button> | |
| </h4> | |
| <div id="collapse-left-sql" class="accordion-collapse collapse" aria-labelledby="heading-left-sql" data-bs-parent="`#accordion`"> | |
| <div class="accordion-body"> | |
| <pre><code class="sql">${left.query}</code></pre> | |
| </div> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@vividus-plugin-db/src/main/resources/data-sources-statistics.ftl` around
lines 35 - 46, The accordion markup lacks proper accessibility linkage: add an
id attribute to the header element (e.g., give the <h4 class="accordion-header">
an id like "heading-left-sql") and add aria-labelledby="heading-left-sql" to the
collapse container with id="collapse-left-sql" so the collapse div references
its header; optionally add data-bs-parent="`#accordion`" to the collapse div to
enforce single-open accordion behavior.
Comment on lines
+50
to
61
| <div class="accordion-item accordion-item-info"> | ||
| <h4 class="accordion-header"> | ||
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-right-sql" aria-expanded="false" aria-controls="collapse-right-sql"> | ||
| Right query | ||
| </button> | ||
| </h4> | ||
| <div id="collapse-right-sql" class="accordion-collapse collapse"> | ||
| <div class="accordion-body"> | ||
| <pre><code class="sql">${right.query}</code></pre> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Add accessibility attributes for proper accordion semantics.
Same as the left query accordion, this right query accordion is missing accessibility attributes. Apply the same fix pattern here.
♿ Proposed fix for accessibility
- <div class="accordion-item accordion-item-info">
- <h4 class="accordion-header">
+ <div class="accordion-item accordion-item-info">
+ <h4 class="accordion-header" id="heading-right-sql">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="`#collapse-right-sql`" aria-expanded="false" aria-controls="collapse-right-sql">
Right query
</button>
</h4>
- <div id="collapse-right-sql" class="accordion-collapse collapse">
+ <div id="collapse-right-sql" class="accordion-collapse collapse" aria-labelledby="heading-right-sql" data-bs-parent="`#accordion`">
<div class="accordion-body">
<pre><code class="sql">${right.query}</code></pre>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div class="accordion-item accordion-item-info"> | |
| <h4 class="accordion-header"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-right-sql" aria-expanded="false" aria-controls="collapse-right-sql"> | |
| Right query | |
| </button> | |
| </h4> | |
| <div id="collapse-right-sql" class="accordion-collapse collapse"> | |
| <div class="accordion-body"> | |
| <pre><code class="sql">${right.query}</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item accordion-item-info"> | |
| <h4 class="accordion-header" id="heading-right-sql"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="`#collapse-right-sql`" aria-expanded="false" aria-controls="collapse-right-sql"> | |
| Right query | |
| </button> | |
| </h4> | |
| <div id="collapse-right-sql" class="accordion-collapse collapse" aria-labelledby="heading-right-sql" data-bs-parent="`#accordion`"> | |
| <div class="accordion-body"> | |
| <pre><code class="sql">${right.query}</code></pre> | |
| </div> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@vividus-plugin-db/src/main/resources/data-sources-statistics.ftl` around
lines 50 - 61, The right-query accordion markup (button with class
"accordion-button" and collapse div id "collapse-right-sql") lacks the
accessibility attributes used on the left accordion; add a unique id to the
header button (e.g., id="heading-right-sql"), set aria-controls on the button to
"collapse-right-sql" (if not present), and add role="region" plus
aria-labelledby="heading-right-sql" on the div with id="collapse-right-sql" so
the button and panel are properly linked for screen readers.
| <h4 style='text-align: center'>Counts difference: ${(left.rowsQuantity - right.rowsQuantity)?abs}</h4> | ||
| </div> | ||
| </div> | ||
| <p align="center"> |
There was a problem hiding this comment.
Replace deprecated HTML align attribute with Bootstrap class.
The align="center" attribute is deprecated in HTML5. Use Bootstrap's text-center class instead.
🔧 Proposed fix
- <p align="center">
+ <p class="text-center">
<canvas id="statistics-pie-chart" style="max-width: 360px; max-height: 360px;"></canvas>
</p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <p align="center"> | |
| <p class="text-center"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@vividus-plugin-db/src/main/resources/data-sources-statistics.ftl` at line
110, The <p> tag currently uses the deprecated align="center" attribute; replace
it by removing the align attribute and applying Bootstrap's text-center class
instead (e.g., change the <p align="center"> element to a <p> element that
includes class="text-center", merging with any existing class attribute if
present) so centering uses modern HTML/CSS conventions.
Qodana for JVMIt seems all right 👌 No new problems were found according to the checks applied 💡 Qodana analysis was run in the pull request mode: only the changed files were checked Contact Qodana teamContact us at qodana-support@jetbrains.com
|
|
valfirst
approved these changes
Jun 4, 2026
This was referenced Jun 5, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Release Notes