Shortcut plugin mig new#9416
Open
amitkumar489 wants to merge 6 commits into
Open
Conversation
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Contributor
Changed Packages
|
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Migrates the shortcuts plugin UI away from Material-UI components/icons to Backstage UI (BUI) components with CSS modules, and updates dependencies accordingly.
Changes:
- Replaces MUI icons/components with
@backstage/uiand@remixicon/react. - Re-implements Add/Edit shortcut popovers and form styling using CSS modules + BUI components.
- Replaces MUI Avatar-based shortcut icon with a CSS-module-backed avatar div and custom contrast calculation.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| workspaces/shortcuts/plugins/shortcuts/src/Shortcuts.tsx | Switches the sidebar “Add Shortcuts” icon from MUI to Remixicon. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutItem.tsx | Replaces MUI edit button/tooltip styling with BUI components + CSS modules. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutItem.module.css | Adds CSS-module hover behavior for showing the edit button. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutIcon.tsx | Replaces MUI Avatar with a styled div and manual contrast color computation. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutIcon.module.css | Adds CSS-module styles for the new avatar div. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutForm.tsx | Migrates form UI to BUI components and custom CSS-module styling. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutForm.module.css | Adds CSS-module styles for fields/actions (borders, spacing, dark mode). |
| workspaces/shortcuts/plugins/shortcuts/src/EditShortcut.tsx | Replaces MUI Popover/Card with a custom fixed-position container + click-outside handling. |
| workspaces/shortcuts/plugins/shortcuts/src/EditShortcut.module.css | Adds CSS-module styles for the edit “popover” card/header. |
| workspaces/shortcuts/plugins/shortcuts/src/AddShortcut.tsx | Replaces MUI Popover/Card with a custom fixed-position container + click-outside handling. |
| workspaces/shortcuts/plugins/shortcuts/src/AddShortcut.module.css | Adds CSS-module styles for the add “popover” card/header. |
| workspaces/shortcuts/plugins/shortcuts/package.json | Swaps MUI dependencies for @backstage/ui and @remixicon/react. |
| workspaces/shortcuts/.changeset/many-poems-tan.md | Adds a changeset documenting the BUI migration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+25
to
+42
| // Calculate contrast text color based on background color | ||
| const rgb = parseInt(props.color.substring(1), 16); | ||
| const r = (rgb >> 16) & 0xff; | ||
| const g = (rgb >> 8) & 0xff; | ||
| const b = (rgb >> 0) & 0xff; | ||
| const luma = 0.299 * r + 0.587 * g + 0.114 * b; | ||
| const contrastColor = luma > 128 ? '#000000' : '#ffffff'; | ||
|
|
||
| return <Avatar className={classes.avatar}>{props.text}</Avatar>; | ||
| return ( | ||
| <div | ||
| className={styles.avatar} | ||
| style={ | ||
| { | ||
| '--avatar-bg-color': props.color, | ||
| '--avatar-contrast-text': contrastColor, | ||
| } as React.CSSProperties | ||
| } | ||
| > |
Comment on lines
52
to
56
| const handleClick = () => { | ||
| if (buttonRef.current) { | ||
| setAnchorEl(buttonRef.current); | ||
| } | ||
| }; |
Comment on lines
+74
to
+78
| <ButtonIcon | ||
| ref={buttonRef} | ||
| id="edit" | ||
| data-testid="edit" | ||
| className={styles.button} |
Comment on lines
+2
to
+4
| .root:hover #edit { | ||
| visibility: visible; | ||
| } |
Comment on lines
+104
to
114
| <div | ||
| ref={popoverRef} | ||
| style={{ | ||
| position: 'fixed', | ||
| zIndex: 1300, | ||
| top: anchorEl ? (anchorEl as any).getBoundingClientRect().top : 0, | ||
| left: anchorEl | ||
| ? (anchorEl as any).getBoundingClientRect().right + 10 | ||
| : 0, | ||
| }} | ||
| > |
Author
There was a problem hiding this comment.
Anchor button is in stable Backstage sidebar (not scrolling)
User interactions confined to sidebar area
Form closes on outside click (handles visibility concerns)
Lightweight implementation improves bundle size
Acceptable UX for this specific use case
✅ Future Improvements Listed:
Option to add @floating-ui/react if scroll/viewport collisions become an issue
Path to integrate Popper/Floating UI if panel flipping is needed
✅ Trade-offs Explicitly Stated:
✓ Simpler, lighter implementation
✓ Fewer dependencies
✗ No auto viewport collision detection (not needed in sidebar)
✗ No auto reposition on scroll (sidebar typically fixed)
Comment on lines
+121
to
131
| <div | ||
| ref={popoverRef} | ||
| style={{ | ||
| position: 'fixed', | ||
| zIndex: 1300, | ||
| top: anchorEl ? (anchorEl as any).getBoundingClientRect().top : 0, | ||
| left: anchorEl | ||
| ? (anchorEl as any).getBoundingClientRect().right + 10 | ||
| : 0, | ||
| }} | ||
| > |
Comment on lines
+82
to
+87
| <div | ||
| style={{ | ||
| padding: 'var(--bui-space-4)', | ||
| backgroundColor: 'light-dark(#ffffff, #424242)', | ||
| }} | ||
| > |
Comment on lines
+6
to
+9
| .field :global(input) { | ||
| border: 1px solid #cccccc !important; | ||
| border-radius: 4px !important; | ||
| } |
| <SidebarScrollWrapper> | ||
| <SidebarItem | ||
| icon={props.icon ?? PlayListAddIcon} | ||
| icon={props.icon ?? (() => <RiPlayList2Line size={24} />)} |
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
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
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.
Hey, I just made a Pull Request!
The shortcuts plugin is now fully migrated to BUI with production-ready styling that automatically adapts to light and dark system themes, improved positioning, and modern Backstage UI components. All ESLint checks pass, and the plugin maintains backward compatibility with existing functionality.
✔️ Checklist
Signed-off-byline in the message. (more info)