Replace blackout status icon with FrontHandSharp - #393
Open
susan-pgedge wants to merge 2 commits into
Open
Conversation
Swap the crescent-moon DarkMode icon in the StatusPanel selection header's blackout-management control for a FrontHandSharp "stop" gesture, matching the requested mui.com icon. FrontHandSharp is not exported by the pinned @mui/icons-material@5.x package; it first ships in the v6 icon set, whose peer dependency requires @mui/material@^6. Bumping the MUI major just for one icon is out of scope, so the icon is recreated locally with MUI's public createSvgIcon utility using the exact path data MUI publishes for FrontHandSharp. This is a pure visual swap: the IconButton, Tooltip, Badge, sizing, and click behaviour are unchanged. Add a dedicated SelectionHeader test (the component was previously mocked out in every StatusPanel test, leaving it uncovered); it now covers every branch at 100% line coverage. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
WalkthroughThe change adds a shared ChangesBlackout updates
Estimated code review effort: 3 (Moderate) | ~20 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 55 |
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
Extract the createSvgIcon FrontHandSharp definition into a single shared
module (client/src/components/shared/BlackoutIcon.tsx) and consume it from
the three places that previously showed the old DarkMode moon icon:
- StatusPanel/SelectionHeader.tsx (already swapped in the prior commit;
now imports the shared component instead of defining it locally).
- BlackoutManagementDialog.tsx (active-blackout banner).
- BlackoutPanel.tsx (active-blackout banner).
With three usages, a single shared module is more maintainable than
triplicating the hardcoded SVG path string; the components/shared
directory is the established home for reusable UI primitives. Each usage
site keeps its existing sizing/props unchanged (sx={activeIconSx} and
sx={iconSx}), so this remains a pure icon swap.
Add a TODO on the shared definition to remove it in favour of importing
FrontHandSharp directly from @mui/icons-material once the project moves
to MUI v6+.
Add a dedicated BlackoutManagementDialog test; the dialog previously had
no coverage (it is mocked to null wherever it appears). The new suite
covers the empty state, the active/non-active/schedule sections, the
time-format branches, the delete-confirmation flows, the create actions,
and close, reaching ~97% line coverage. The shared icon module and
SelectionHeader remain at 100%; BlackoutPanel stays at ~96%.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
client/src/components/BlackoutPanel.tsx (1)
31-31: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRename the import alias to
BlackoutIcon.
BlackoutIconis imported asMoonIcon, and the component still renders<MoonIcon>. This works at runtime, but it leaves obsolete terminology in the blackout path and can mislead future changes. Rename the alias and its JSX usage toBlackoutIcon.Proposed fix
-import MoonIcon from './shared/BlackoutIcon'; +import BlackoutIcon from './shared/BlackoutIcon';🤖 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 `@client/src/components/BlackoutPanel.tsx` at line 31, Rename the imported alias from MoonIcon to BlackoutIcon in BlackoutPanel and update the corresponding JSX usage from <MoonIcon> to <BlackoutIcon>, preserving the existing component behavior.
🤖 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.
Nitpick comments:
In `@client/src/components/BlackoutPanel.tsx`:
- Line 31: Rename the imported alias from MoonIcon to BlackoutIcon in
BlackoutPanel and update the corresponding JSX usage from <MoonIcon> to
<BlackoutIcon>, preserving the existing component behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c10802e3-2f89-4067-a7ed-9e554d6a8e0b
📒 Files selected for processing (5)
client/src/components/BlackoutManagementDialog.tsxclient/src/components/BlackoutPanel.tsxclient/src/components/StatusPanel/SelectionHeader.tsxclient/src/components/__tests__/BlackoutManagementDialog.test.tsxclient/src/components/shared/BlackoutIcon.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- client/src/components/StatusPanel/SelectionHeader.tsx
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
1 participant
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
Replaces the crescent-moon
DarkModeicon in the StatusPanel selectionheader's blackout-management control with a
FrontHandSharpraisedopen-palm "stop" gesture, matching the icon requested by name from the
mui.com icon gallery.
This is a pure visual swap. The
IconButton,Tooltip,Badge,sx={{ fontSize: 20 }}sizing, andonBlackoutClickbehaviour are allunchanged.
Why a custom SVG instead of an
@mui/icons-materialimportFrontHandSharpis not exported by the pinned@mui/icons-material@5.18.0(confirmed: noFrontHand*files ship inthat package; only
BackHandexists in 5.x). The icon first appears inMUI's v6 icon set, and
@mui/icons-material@6's peer dependencyrequires
@mui/material@^6, while this client is pinned to@mui/material@^5.14.20. Bumping the entire MUI major version just toadd one icon is out of scope and too risky for this change, so no MUI
package version was touched.
Instead, the icon is recreated locally with MUI's public
createSvgIconutility (the same documented, supported mechanism@mui/icons-materialuses internally), using the exact path data MUIpublishes for
FrontHandSharpin the upstreammui/material-uirepo.Where the component lives
Co-located directly in
SelectionHeader.tsx. The codebase has noexisting shared-icons directory and no prior
createSvgIconprecedent,so introducing a new
components/icons/convention for a singleone-off icon would be premature; keeping it local is the
least-surprising choice.
Tests
SelectionHeaderwas previously mocked out (vi.mock('../SelectionHeader', ...))in every StatusPanel test, so it had no rendering coverage. This PR adds
a dedicated
SelectionHeader.test.tsxcovering every branch (selectiontypes, status-driven colour and tooltip text, the alert-count badge and
its 99+ clamp, and the blackout button's active/inactive tooltip and
click handler). The modified file now reports 100% line coverage.
The full client suite passes: 172 test files, 3500 tests. ESLint
reports zero errors on the changed files.
🤖 Generated with Claude Code
Summary by CodeRabbit
Bug Fixes
Tests