docs: add comprehensive sidebar components guide#1512
Conversation
Closes mattermost#1352 Added comprehensive documentation for registering plugins in the Mattermost webapp sidebar including: - Left sidebar header components for team-specific actions - Bottom team sidebar components for status badges and quick links - App bar components (experimental) for global access - Step-by-step code examples with Redux integration - Dynamic badge update patterns - Troubleshooting guide and best practices - Related documentation and example links Provides clear, actionable guidance with multiple complete examples for developers integrating their plugins into the Mattermost UI.
|
Warning Review limit reached
More reviews will be available in 7 minutes and 35 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a new documentation page ( ChangesSidebar Plugin Integration Documentation
Mobile Navigation Resize Fix
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
site/content/integrate/plugins/components/webapp/sidebar-components.md (2)
25-25: ⚡ Quick winUse hyphenated compound adjectives before nouns.
Lines 25 and 108 should use "lower-left corner" instead of "lower left corner" when the phrase appears as a compound adjective modifying the noun. Hyphenation improves readability and follows standard English conventions.
Proposed fix
- 3. **App Bar Component** (experimental) - Appears in the global apps bar at the top of the sidebar (requires [Apps Bar]({{< ref "/integrate/plugins/components/webapp/app-bar" >}}) to be enabled) + 3. **App Bar Component** (experimental) - Appears in the global apps bar at the top of the sidebar (requires [Apps Bar]({{< ref "/integrate/plugins/components/webapp/app-bar" >}}) to be enabled)For line 25:
- 1. **Left Sidebar Header Component** - Appears above the channel list in a team, ideal for team-specific actions + 1. **Left Sidebar Header Component** - Appears above the channel list in a team, ideal for team-specific actionsFor line 108:
- The bottom team sidebar component adds icons to the lower left corner of the UI. This is ideal for displaying status indicators or providing quick access to key features that users can access from anywhere in the team. + The bottom team sidebar component adds icons to the lower-left corner of the UI. This is ideal for displaying status indicators or providing quick access to key features that users can access from anywhere in the team.Also applies to: 108-108
🤖 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 `@site/content/integrate/plugins/components/webapp/sidebar-components.md` at line 25, Compound adjectives that appear before nouns should be hyphenated to follow standard English grammar conventions. In the sidebar-components.md file, locate the phrase "lower left corner" which appears in the context of describing the Bottom Team Sidebar Component and change it to "lower-left corner". Additionally, find and apply the same fix to another instance of this phrase elsewhere in the file (around line 108), ensuring both occurrences use the hyphenated form "lower-left corner" instead of "lower left corner".
459-459: 💤 Low valueEnsure consistent hyphenation for compound terms.
Line 459 references "[Mattermost plugin todo]" as link text. In English, "to-do" (meaning task) is typically hyphenated. Consider updating the link text for consistency, although the URL itself (mattermost-plugin-todo) is correct.
Proposed fix
- - [Mattermost plugin todo](https://github.com/mattermost/mattermost-plugin-todo) - Example with sidebar components + - [Mattermost plugin to-do](https://github.com/mattermost/mattermost-plugin-todo) - Example with sidebar components🤖 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 `@site/content/integrate/plugins/components/webapp/sidebar-components.md` at line 459, Update the link text in the sidebar-components.md file to use proper hyphenation for the compound term. In the markdown link text that currently reads "Mattermost plugin todo", change "todo" to "to-do" so the link text becomes "Mattermost plugin to-do" while keeping the URL itself unchanged as mattermost-plugin-todo. This ensures consistency with standard English hyphenation conventions for the word "to-do".site/static/js/main.js (1)
81-87: ⚡ Quick winConsider debouncing the resize event handler for better performance.
Resize events fire continuously during window resizing, potentially dozens of times per second. While the current class removal operations are lightweight, debouncing the handler (e.g., waiting 150–200ms after resize stops) would reduce unnecessary DOM manipulations and improve performance, especially on lower-end devices.
⚡ Suggested debounce implementation
+ let resizeTimer; window.addEventListener("resize", function () { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(function() { if (window.innerWidth > 767) { hamburger.classList.remove("is-active"); document.body.classList.remove("nav-open"); document.getElementById("navigation").classList.remove("active"); } + }, 150); });🤖 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 `@site/static/js/main.js` around lines 81 - 87, The resize event listener fires continuously during window resizing, causing unnecessary DOM manipulations that impact performance. Implement a debouncing mechanism around the resize event handler to ensure the class removal operations on hamburger, document.body, and the navigation element only execute after the resize action has stopped (typically after 150-200ms of inactivity). This can be achieved by creating a debounce utility function or using a flag-based approach with setTimeout to delay and cancel repeated executions of the handler logic.
🤖 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 `@site/static/js/main.js`:
- Around line 80-87: The resize event listener has a breakpoint mismatch where
it closes the mobile menu at window.innerWidth > 767, but the CSS hides the
hamburger icon at 992px, causing UX confusion in the 768–991px range. Change the
breakpoint condition from 767 to 991 (or 992) to align with the CSS media query.
Additionally, implement debouncing on the resize event handler by wrapping the
menu-closing logic (hamburger.classList.remove, document.body.classList.remove,
and document.getElementById("navigation").classList.remove calls) inside a
setTimeout within a clearTimeout pattern to prevent excessive firing during
viewport resizing and improve performance.
---
Nitpick comments:
In `@site/content/integrate/plugins/components/webapp/sidebar-components.md`:
- Line 25: Compound adjectives that appear before nouns should be hyphenated to
follow standard English grammar conventions. In the sidebar-components.md file,
locate the phrase "lower left corner" which appears in the context of describing
the Bottom Team Sidebar Component and change it to "lower-left corner".
Additionally, find and apply the same fix to another instance of this phrase
elsewhere in the file (around line 108), ensuring both occurrences use the
hyphenated form "lower-left corner" instead of "lower left corner".
- Line 459: Update the link text in the sidebar-components.md file to use proper
hyphenation for the compound term. In the markdown link text that currently
reads "Mattermost plugin todo", change "todo" to "to-do" so the link text
becomes "Mattermost plugin to-do" while keeping the URL itself unchanged as
mattermost-plugin-todo. This ensures consistency with standard English
hyphenation conventions for the word "to-do".
In `@site/static/js/main.js`:
- Around line 81-87: The resize event listener fires continuously during window
resizing, causing unnecessary DOM manipulations that impact performance.
Implement a debouncing mechanism around the resize event handler to ensure the
class removal operations on hamburger, document.body, and the navigation element
only execute after the resize action has stopped (typically after 150-200ms of
inactivity). This can be achieved by creating a debounce utility function or
using a flag-based approach with setTimeout to delay and cancel repeated
executions of the handler logic.
🪄 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: CHILL
Plan: Pro
Run ID: 7bdd99af-35a4-4085-9042-10969471885d
📒 Files selected for processing (2)
site/content/integrate/plugins/components/webapp/sidebar-components.mdsite/static/js/main.js
- main.js: fix breakpoint from 767 to 991 to align with CSS media query (hamburger hidden at min-width: 992px) - main.js: add debounce (150ms) to resize event handler - sidebar-components.md: fix hyphenation 'lower-left corner' (2 occurrences) - sidebar-components.md: fix hyphenation 'to-do' in link text
|
All checks passing (CodeRabbit approved, CLA authorized). Ready for merge. |
|
This PR has been automatically labelled "stale" because it hasn't had recent activity. |
2 participants
What kind of change does this PR introduce?
Documentation enhancement.
Closes #1352
What is the current behavior?
Developers struggle to understand how to register plugins in the Mattermost webapp sidebar. The existing documentation mentions sidebar components in best practices but lacks:
What is the new behavior?
Added a comprehensive new guide at
/integrate/plugins/components/webapp/sidebar-componentsthat covers:Left Sidebar Header Component
Bottom Team Sidebar Component
App Bar Component (Experimental)
Additional content
Key improvements
How to test
Additional context
This documentation directly addresses the issue raised by the Parabol integration where clearer guidance was needed for sidebar plugin registration. The guide provides explicit examples and reference links as requested in #1352.
The content follows Mattermost documentation patterns with:
{{< ref ... >}}