From 19a2a038aae72c5ba615f8f72a2a7883f6c81d7d Mon Sep 17 00:00:00 2001 From: Hellgren Heikki Date: Tue, 31 Mar 2026 14:16:10 +0300 Subject: [PATCH] feat(notifications): migrate to backstage ui migrated notifications plugin to use backstage ui instead material ui. Signed-off-by: Hellgren Heikki --- .changeset/major-banks-prove.md | 5 + plugins/notifications/dev/index.tsx | 15 +- plugins/notifications/package.json | 3 - plugins/notifications/report-alpha.api.md | 3 +- plugins/notifications/report.api.md | 3 +- .../NotificationsFilters.tsx | 227 +++++-------- .../NotificationsPage/NotificationsPage.tsx | 75 ++--- .../NotificationsSideBarItem.module.css | 26 ++ .../NotificationsSideBarItem.tsx | 139 ++++---- .../NotificationsTable/BulkActions.tsx | 105 +++--- .../NotificationDescription.tsx | 23 +- .../NotificationsTable/NotificationIcon.tsx | 7 +- .../NotificationsTable.module.css | 36 ++ .../NotificationsTable/NotificationsTable.tsx | 311 +++++++++--------- .../NotificationsTable/SelectAll.module.css | 28 ++ .../NotificationsTable/SelectAll.tsx | 47 +-- .../SeverityIcon.module.css | 33 ++ .../NotificationsTable/SeverityIcon.tsx | 65 ++-- .../NoBorderTableCell.module.css | 23 ++ .../NoBorderTableCell.tsx | 20 +- .../OriginRow.tsx | 55 ++-- .../UserNotificationSettingsCard/TopicRow.tsx | 38 +-- .../UserNotificationSettingsPanel.module.css | 29 ++ .../UserNotificationSettingsPanel.tsx | 63 ++-- plugins/notifications/src/translation.ts | 3 +- yarn.lock | 14 - 26 files changed, 738 insertions(+), 658 deletions(-) create mode 100644 .changeset/major-banks-prove.md create mode 100644 plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.module.css create mode 100644 plugins/notifications/src/components/NotificationsTable/NotificationsTable.module.css create mode 100644 plugins/notifications/src/components/NotificationsTable/SelectAll.module.css create mode 100644 plugins/notifications/src/components/NotificationsTable/SeverityIcon.module.css create mode 100644 plugins/notifications/src/components/UserNotificationSettingsCard/NoBorderTableCell.module.css create mode 100644 plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.module.css diff --git a/.changeset/major-banks-prove.md b/.changeset/major-banks-prove.md new file mode 100644 index 0000000000..51de7df727 --- /dev/null +++ b/.changeset/major-banks-prove.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications': patch +--- + +Migrated notifications plugin to use backstage UI diff --git a/plugins/notifications/dev/index.tsx b/plugins/notifications/dev/index.tsx index 81354e2a73..df2258372d 100644 --- a/plugins/notifications/dev/index.tsx +++ b/plugins/notifications/dev/index.tsx @@ -21,7 +21,18 @@ import { } from '../src'; import { signalsPlugin } from '@backstage/plugin-signals'; import { SidebarItem } from '@backstage/core-components'; -import AddAlert from '@material-ui/icons/AddAlert'; +import { IconComponent } from '@backstage/core-plugin-api'; +import { RiBellLine } from '@remixicon/react'; + +const AddAlertIcon: IconComponent = props => { + let size = 24; + if (props.fontSize === 'large') { + size = 32; + } else if (props.fontSize === 'small') { + size = 16; + } + return ; +}; createDevApp() .registerPlugin(notificationsPlugin) @@ -38,7 +49,7 @@ createDevApp() .addSidebarItem() .addSidebarItem( { fetch('http://localhost:7007/api/notifications-debug/', { diff --git a/plugins/notifications/package.json b/plugins/notifications/package.json index 58ac16a7bf..6fb8931422 100644 --- a/plugins/notifications/package.json +++ b/plugins/notifications/package.json @@ -59,11 +59,8 @@ "@backstage/plugin-signals-react": "workspace:^", "@backstage/theme": "workspace:^", "@backstage/ui": "workspace:^", - "@material-ui/core": "^4.9.13", - "@material-ui/icons": "^4.9.1", "@remixicon/react": "^4.6.0", "lodash": "^4.17.21", - "material-ui-confirm": "^3.0.12", "notistack": "^3.0.1", "react-relative-time": "^0.0.9", "react-use": "^17.2.4" diff --git a/plugins/notifications/report-alpha.api.md b/plugins/notifications/report-alpha.api.md index cfc88c3d7a..73a210ac22 100644 --- a/plugins/notifications/report-alpha.api.md +++ b/plugins/notifications/report-alpha.api.md @@ -137,8 +137,9 @@ export const notificationsTranslationRef: TranslationRef< readonly 'table.bulkActions.returnSelectedAmongUnread': 'Return selected among unread'; readonly 'table.bulkActions.saveSelectedForLater': 'Save selected for later'; readonly 'table.bulkActions.undoSaveForSelected': 'Undo save for selected'; + readonly 'table.confirmDialog.cancel': 'Cancel'; readonly 'table.confirmDialog.title': 'Are you sure?'; - readonly 'table.confirmDialog.markAllReadDescription': 'Mark all notifications as read.'; + readonly 'table.confirmDialog.markAllReadDescription': 'Mark all notifications as read.'; readonly 'table.confirmDialog.markAllReadConfirmation': 'Mark All'; readonly 'filters.view.all': 'All'; readonly 'filters.view.label': 'View'; diff --git a/plugins/notifications/report.api.md b/plugins/notifications/report.api.md index 21dc817d91..ff39a03a8a 100644 --- a/plugins/notifications/report.api.md +++ b/plugins/notifications/report.api.md @@ -205,8 +205,9 @@ export const notificationsTranslationRef: TranslationRef< readonly 'table.bulkActions.returnSelectedAmongUnread': 'Return selected among unread'; readonly 'table.bulkActions.saveSelectedForLater': 'Save selected for later'; readonly 'table.bulkActions.undoSaveForSelected': 'Undo save for selected'; + readonly 'table.confirmDialog.cancel': 'Cancel'; readonly 'table.confirmDialog.title': 'Are you sure?'; - readonly 'table.confirmDialog.markAllReadDescription': 'Mark all notifications as read.'; + readonly 'table.confirmDialog.markAllReadDescription': 'Mark all notifications as read.'; readonly 'table.confirmDialog.markAllReadConfirmation': 'Mark All'; readonly 'filters.view.all': 'All'; readonly 'filters.view.label': 'View'; diff --git a/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx b/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx index 66aacdb72e..6f68763c1b 100644 --- a/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx +++ b/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx @@ -13,14 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { ChangeEvent } from 'react'; -import FormControl from '@material-ui/core/FormControl'; -import Divider from '@material-ui/core/Divider'; -import Grid from '@material-ui/core/Grid'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; +import { Select, Text, Flex } from '@backstage/ui'; +import type { Key } from 'react-aria-components'; import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { notificationsTranslationRef } from '../../translation'; import { GetNotificationsOptions } from '../../api'; @@ -128,22 +122,20 @@ export const NotificationsFilters = ({ const { t } = useTranslationRef(notificationsTranslationRef); const sortByText = getSortByText(sorting); - const handleOnCreatedAfterChanged = ( - event: ChangeEvent<{ name?: string; value: unknown }>, - ) => { - onCreatedAfterChanged(event.target.value as string); + const handleOnCreatedAfterChanged = (key: Key | Key[] | null) => { + if (key !== null && !Array.isArray(key)) + onCreatedAfterChanged(key as string); }; - const handleOnViewChanged = ( - event: ChangeEvent<{ name?: string; value: unknown }>, - ) => { - if (event.target.value === 'unread') { + const handleOnViewChanged = (key: Key | Key[] | null) => { + const value = Array.isArray(key) ? key[0] : key; + if (value === 'unread') { onUnreadOnlyChanged(true); onSavedChanged(undefined); - } else if (event.target.value === 'read') { + } else if (value === 'read') { onUnreadOnlyChanged(false); onSavedChanged(undefined); - } else if (event.target.value === 'saved') { + } else if (value === 'saved') { onUnreadOnlyChanged(undefined); onSavedChanged(true); } else { @@ -153,10 +145,8 @@ export const NotificationsFilters = ({ } }; - const handleOnSortByChanged = ( - event: ChangeEvent<{ name?: string; value: unknown }>, - ) => { - const idx = ((event.target.value as string) || + const handleOnSortByChanged = (key: Key | Key[] | null) => { + const idx = (((Array.isArray(key) ? key[0] : key) as string) || 'newest') as keyof typeof SortByOptions; const option = SortByOptions[idx]; onSortingChanged({ ...option.sortBy }); @@ -171,145 +161,86 @@ export const NotificationsFilters = ({ viewValue = 'read'; } - const handleOnSeverityChanged = ( - event: ChangeEvent<{ name?: string; value: unknown }>, - ) => { + const handleOnSeverityChanged = (key: Key | Key[] | null) => { const value: NotificationSeverity = - (event.target.value as NotificationSeverity) || 'normal'; + ((Array.isArray(key) ? key[0] : key) as NotificationSeverity) || 'normal'; onSeverityChanged(value); }; - const handleOnTopicChanged = ( - event: ChangeEvent<{ name?: string; value: unknown }>, - ) => { - const value = event.target.value as string; + const handleOnTopicChanged = (key: Key | Key[] | null) => { + const value = (Array.isArray(key) ? key[0] : key) as string; onTopicChanged(value === ALL ? undefined : value); }; - const sortedAllTopics = (allTopics || []).sort((a, b) => a.localeCompare(b)); + const sortedAllTopics = [...(allTopics ?? [])].sort((a, b) => + a.localeCompare(b), + ); return ( - <> - - - {t('filters.title')} - - + +
+ {t('filters.title')} +
- - - - {t('filters.view.label')} - - - - + ({ + value: key, + label: t( + CreatedAfterOptions[key as keyof typeof CreatedAfterOptions] + .labelKey, + ), + }))} + /> - - - + ({ + value: key, + label: t(`filters.severity.${key}`), + }))} + /> - - - - - - - - {t('filters.severity.label')} - - - - - - - - - - {t('filters.topic.label')} - - - - - - - +