feat: explore graph controls icons - BED-9043 - #3132
Merged
Conversation
catsiller
added
enhancement
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughGraph UI controls migrate from Material UI to doodle-ui. GraphControls adds configurable export actions and conditional search rendering. Tests cover accessibility, keyboard behavior, focus restoration, selection, export states, and graph-layout fallback behavior. ChangesGraph UI migration
Estimated code review effort: 3 (Moderate) | ~25 minutes Mergeability Score: ⚪ Minimal · up to This PR replaces the Explore graph toolbar text controls with accessible icons while preserving existing actions and adding optional export actions. No actionable merge-blocking risk remains beyond normal checks and review. Sequence Diagram(s)sequenceDiagram
participant User
participant GraphControls
participant ExportMenu
participant GraphExportAction
User->>GraphControls: Open export menu
GraphControls->>ExportMenu: Render configured actions and JSON export
User->>ExportMenu: Select export action
ExportMenu->>GraphExportAction: Invoke onSelect
ExportMenu-->>GraphControls: Close menu and restore focus
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
catsiller
force-pushed
the
BED-9043-explore-toolbar-icons
branch
from
August 11, 2026 16:08
38f27ac to
1093baa
Compare
catsiller
marked this pull request as ready for review
August 12, 2026 21:29
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsx (1)
31-36: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse shared design tokens for
GraphButtoncolors.
GraphButtonhas no in-repository production imports, butpackages/javascript/bh-shared-ui/src/index.tsre-exports it through the component barrel. Keep the export unless the public API is changing.Replace the hardcoded colors with tokens such as
bg-neutral-2,text-main, andhover:bg-neutral-3.🤖 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 `@packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsx` around lines 31 - 36, Update the className configuration in GraphButton to replace hardcoded background, text, and hover colors with the shared design tokens, including bg-neutral-2, text-main, and hover:bg-neutral-3, while preserving the dark-mode variants and existing component-barrel export.
🤖 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
`@packages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.test.tsx`:
- Around line 379-387: Update the “disables the JSON button if the JSON is
empty” test to call setup with an explicit empty JSON fixture, using setup({
json: {} }). Keep the existing export-menu interaction and aria-disabled
assertion unchanged.
In
`@packages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.tsx`:
- Line 153: Update the selected state class in GraphControls to make both light
and dark text-color utilities important, matching !bg-primary, and replace the
dark-mode hex color with the appropriate theme token. Verify the rendered
selected text color in both light and dark modes while preserving the existing
background behavior.
- Around line 176-183: In GraphControls, add useRef to the existing React import
and create a ref for the search IconButton. Attach the ref to the button and,
after the SearchCurrentNodes panel closes through onClose or the select handler,
restore focus to that button while preserving the existing state updates.
- Around line 186-190: Add role="search" to the search-current-nodes panel
container near isCurrentSearchOpen, and adjust its rendering or positioning so
the absolutely positioned panel is not clipped by GraphView’s overflow-hidden
ancestor; keep it within available bounds or render it through a portal.
In `@packages/javascript/bh-shared-ui/src/components/GraphMenu/GraphMenu.tsx`:
- Around line 40-45: Remove the manually managed buttonId and menuId values and
stop passing id, aria-controls, and aria-labelledby through the GraphMenu
trigger and content. Preserve aria-label and data-testid on IconButton, allowing
Radix to generate the menu accessibility relationships.
---
Nitpick comments:
In `@packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsx`:
- Around line 31-36: Update the className configuration in GraphButton to
replace hardcoded background, text, and hover colors with the shared design
tokens, including bg-neutral-2, text-main, and hover:bg-neutral-3, while
preserving the dark-mode variants and existing component-barrel export.
🪄 Autofix
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: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: ac6abda3-4154-48f2-aca0-ad79d8799bab
📒 Files selected for processing (7)
packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsxpackages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.test.tsxpackages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.tsxpackages/javascript/bh-shared-ui/src/components/GraphControls/index.tspackages/javascript/bh-shared-ui/src/components/GraphMenu/GraphMenu.test.tsxpackages/javascript/bh-shared-ui/src/components/GraphMenu/GraphMenu.tsxpackages/javascript/bh-shared-ui/src/components/SearchCurrentNodes/SearchCurrentNodes.tsx
bfaulk96
self-requested a review
August 13, 2026 18:26
bfaulk96
reviewed
Aug 13, 2026
bfaulk96
reviewed
Aug 13, 2026
bfaulk96
reviewed
Aug 13, 2026
bfaulk96
approved these changes
Aug 13, 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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Description
Describe your changes in detail
Local Testing Instructions Provided Below
Motivation and Context
Resolves https://specterops.atlassian.net/browse/BED-9043
Why is this change required? What problem does it solve?
How Has This Been Tested?
Unit Tests & Manual Testing
Manual Testing Instructions below
Standard Testing
Screen-Reader Testing
Note: please make sure icons work in both light and dark modes
Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc.
Screenshots (optional):
Types of changes
Checklist:
Summary by CodeRabbit
New Features
Bug Fixes