migrate shortcut plugin from mui to bui#9778
Open
amitkumar489 wants to merge 4 commits into
Open
Conversation
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Contributor
Changed Packages
|
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates the @backstage-community/plugin-shortcuts frontend from Material-UI (v4) components/styles to Backstage UI (BUI), switching to CSS modules and Remix icons while updating workspace configuration and dependencies.
Changes:
- Replaced MUI components/icons with BUI components and
@remixicon/reacticons. - Moved styling from
makeStylesto CSS modules and added TS declarations for CSS imports. - Updated workspace TypeScript configuration and plugin dependencies to support the migration.
Reviewed changes
Copilot reviewed 14 out of 17 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| workspaces/shortcuts/tsconfig.json | Adjusts TS compiler options for the shortcuts workspace. |
| workspaces/shortcuts/plugins/shortcuts/src/Shortcuts.tsx | Updates the main sidebar entry icon to Remix icon usage. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutItem.tsx | Migrates shortcut row UI to BUI components and tooltip trigger patterns. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutItem.module.css | Adds CSS module styling for shortcut item hover/edit affordance. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutIcon.tsx | Replaces MUI Avatar with CSS-module-based avatar rendering. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutIcon.module.css | Adds CSS module styling for the shortcut “avatar” icon. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutForm.tsx | Migrates shortcut add/edit form controls to BUI components. |
| workspaces/shortcuts/plugins/shortcuts/src/ShortcutForm.module.css | Adds CSS module layout/spacing for the shortcut form. |
| workspaces/shortcuts/plugins/shortcuts/src/globals.d.ts | Adds module declarations for CSS/CSS module imports. |
| workspaces/shortcuts/plugins/shortcuts/src/EditShortcut.tsx | Migrates the edit shortcut UI container to BUI components. |
| workspaces/shortcuts/plugins/shortcuts/src/EditShortcut.module.css | Adds CSS module styling for edit shortcut card layout. |
| workspaces/shortcuts/plugins/shortcuts/src/AddShortcut.tsx | Migrates the add shortcut UI container to BUI components. |
| workspaces/shortcuts/plugins/shortcuts/src/AddShortcut.module.css | Adds CSS module styling for add shortcut card layout. |
| workspaces/shortcuts/plugins/shortcuts/package.json | Swaps MUI deps for BUI + Remix icon + aria-related deps. |
| workspaces/shortcuts/.changeset/twenty-llamas-attack.md | Documents the migration as a minor release changeset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| */ | ||
|
|
||
| import type { MouseEvent } from 'react'; | ||
| import type { ReactNode } from 'react'; |
Comment on lines
+20
to
+21
| import { ButtonIcon, Tooltip } from '@backstage/ui'; | ||
| import { TooltipTrigger } from 'react-aria-components'; |
Comment on lines
+55
to
59
| const handleClick = () => { | ||
| if (buttonRef.current) { | ||
| setAnchorEl(buttonRef.current); | ||
| } | ||
| }; |
Comment on lines
+6
to
+8
| .root:hover #edit { | ||
| visibility: visible; | ||
| } |
Comment on lines
79
to
80
| id="edit" | ||
| data-testid="edit" |
Comment on lines
77
to
+81
| return ( | ||
| <Popover | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| TransitionProps={{ onExit: handleClose }} | ||
| onClose={onClose} | ||
| anchorOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| > | ||
| <Card className={classes.card}> | ||
| <CardHeader | ||
| className={classes.header} | ||
| title="Add Shortcut" | ||
| titleTypographyProps={{ variant: 'subtitle2' }} | ||
| action={ | ||
| <Button | ||
| className={classes.button} | ||
| variant="text" | ||
| size="small" | ||
| color="primary" | ||
| onClick={handlePaste} | ||
| <> | ||
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> |
Comment on lines
92
to
+96
| return ( | ||
| <Popover | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| onClose={onClose} | ||
| anchorOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| > | ||
| <Card className={classes.card}> | ||
| <CardHeader | ||
| className={classes.header} | ||
| title="Edit Shortcut" | ||
| titleTypographyProps={{ variant: 'subtitle2' }} | ||
| action={ | ||
| <Button | ||
| className={classes.button} | ||
| variant="text" | ||
| size="small" | ||
| color="secondary" | ||
| startIcon={<DeleteIcon />} | ||
| onClick={handleRemove} | ||
| <> | ||
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> |
Comment on lines
+44
to
+47
| const hex = color.replace('#', ''); | ||
| const r = parseInt(hex.substr(0, 2), 16); | ||
| const g = parseInt(hex.substr(2, 2), 16); | ||
| const b = parseInt(hex.substr(4, 2), 16); |
Comment on lines
+16
to
+17
| "jsx": "react-jsx", | ||
| "ignoreDeprecations": "6.0" |
Comment on lines
+44
to
48
| "@backstage/ui": "^0.15.0", | ||
| "@remixicon/react": "^4.0.0", | ||
| "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0", | ||
| "react-aria-components": "^1.0.0", | ||
| "react-hook-form": "^7.12.2", |
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
| */ | ||
|
|
||
| import type { MouseEvent } from 'react'; | ||
| import type { ReactNode } from 'react'; |
| <IconButton | ||
| <ButtonIcon | ||
| ref={buttonRef} | ||
| id="edit" |
Comment on lines
+6
to
+8
| .root:hover #edit { | ||
| visibility: visible; | ||
| } |
Comment on lines
+44
to
+47
| const hex = color.replace('#', ''); | ||
| const r = parseInt(hex.substr(0, 2), 16); | ||
| const g = parseInt(hex.substr(2, 2), 16); | ||
| const b = parseInt(hex.substr(4, 2), 16); |
Comment on lines
+16
to
+17
| "jsx": "react-jsx", | ||
| "ignoreDeprecations": "6.0" |
Comment on lines
77
to
+83
| return ( | ||
| <Popover | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| TransitionProps={{ onExit: handleClose }} | ||
| onClose={onClose} | ||
| anchorOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| > | ||
| <Card className={classes.card}> | ||
| <CardHeader | ||
| className={classes.header} | ||
| title="Add Shortcut" | ||
| titleTypographyProps={{ variant: 'subtitle2' }} | ||
| action={ | ||
| <Button | ||
| className={classes.button} | ||
| variant="text" | ||
| size="small" | ||
| color="primary" | ||
| onClick={handlePaste} | ||
| <> | ||
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> | ||
| <div | ||
| style={{ |
Comment on lines
92
to
+99
| return ( | ||
| <Popover | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| onClose={onClose} | ||
| anchorOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| > | ||
| <Card className={classes.card}> | ||
| <CardHeader | ||
| className={classes.header} | ||
| title="Edit Shortcut" | ||
| titleTypographyProps={{ variant: 'subtitle2' }} | ||
| action={ | ||
| <Button | ||
| className={classes.button} | ||
| variant="text" | ||
| size="small" | ||
| color="secondary" | ||
| startIcon={<DeleteIcon />} | ||
| onClick={handleRemove} | ||
| <> | ||
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> | ||
| <div | ||
| style={{ | ||
| display: 'flex', |
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Comment on lines
+17
to
+19
| import type { ReactNode } from 'react'; | ||
|
|
||
| import { useState } from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import IconButton from '@material-ui/core/IconButton'; | ||
| import Tooltip from '@material-ui/core/Tooltip'; | ||
| import EditIcon from '@material-ui/icons/Edit'; | ||
| import { useState, useRef } from 'react'; |
Comment on lines
+6
to
+10
| .actionRoot { | ||
| padding-left: var(--bui-space-4); | ||
| padding-bottom: var(--bui-space-6); | ||
| justify-content: flex-start; | ||
| } |
Comment on lines
77
to
+81
| return ( | ||
| <Popover | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| TransitionProps={{ onExit: handleClose }} | ||
| onClose={onClose} | ||
| anchorOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| > | ||
| <Card className={classes.card}> | ||
| <CardHeader | ||
| className={classes.header} | ||
| title="Add Shortcut" | ||
| titleTypographyProps={{ variant: 'subtitle2' }} | ||
| action={ | ||
| <Button | ||
| className={classes.button} | ||
| variant="text" | ||
| size="small" | ||
| color="primary" | ||
| onClick={handlePaste} | ||
| <> | ||
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> |
Comment on lines
92
to
+96
| return ( | ||
| <Popover | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| onClose={onClose} | ||
| anchorOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| > | ||
| <Card className={classes.card}> | ||
| <CardHeader | ||
| className={classes.header} | ||
| title="Edit Shortcut" | ||
| titleTypographyProps={{ variant: 'subtitle2' }} | ||
| action={ | ||
| <Button | ||
| className={classes.button} | ||
| variant="text" | ||
| size="small" | ||
| color="secondary" | ||
| startIcon={<DeleteIcon />} | ||
| onClick={handleRemove} | ||
| <> | ||
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> |
Comment on lines
+44
to
+47
| "@backstage/ui": "^0.15.0", | ||
| "@remixicon/react": "^4.0.0", | ||
| "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0", | ||
| "react-aria-components": "^1.0.0", |
Signed-off-by: amitkumar489 <amit.kumar489@infosys.com>
Comment on lines
59
to
61
| <SidebarItem | ||
| icon={props.icon ?? PlayListAddIcon} | ||
| icon={props.icon ?? (() => <RiPlayListAddLine />)} | ||
| text="Add Shortcuts" |
Comment on lines
+79
to
+83
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> | ||
| <div | ||
| style={{ |
Comment on lines
+94
to
+100
| {open && ( | ||
| <Card className={styles.card}> | ||
| <CardHeader className={styles.header}> | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', |
Comment on lines
+6
to
+10
| .actionRoot { | ||
| padding-left: var(--bui-space-4); | ||
| padding-bottom: var(--bui-space-6); | ||
| justify-content: flex-start; | ||
| } |
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)