announcements(refactor): Migrate banner to BUI alert (#7422)

* refactor: Migrate banner to BUI alert

Signed-off-by: gaelgoth <gothuey.gael@gmail.com>

* refactor: Move CSS outside compononent and use Box instead of empty tag

Signed-off-by: gaelgoth <gothuey.gael@gmail.com>

---------

Signed-off-by: gaelgoth <gothuey.gael@gmail.com>

Author: gaelgoth

workspaces/announcements/.changeset/rotten-olives-fix.md

@@ -0,0 +1,7 @@
+---
+'@backstage-community/plugin-announcements': minor
+---
+
+Migrate Announcements Banner to the Backstage UI using the Alert component.
+
+This change also removes the `variant` React prop. If you were using the prop with the `block` or `floating` values, it can be safely removed, as the banner now uses the Backstage UI Alert default style.

workspaces/announcements/package.json

@@ -47,7 +47,6 @@
     "@changesets/cli": "^2.27.1",
     "@playwright/test": "^1.32.3",
     "knip": "^5.27.4",
-    "node-gyp": "^10.0.0",
     "prettier": "^2.3.2",
     "typescript": "~5.4.0"
   },

workspaces/announcements/plugins/announcements/README.md

@@ -96,7 +96,6 @@ app:
   extensions:
     - announcements/banner:
         config:
-          variant: floating
           max: 2
           category: updates
           active: true

workspaces/announcements/plugins/announcements/report-alpha.api.md

@@ -52,15 +52,13 @@ const _default: OverridableFrontendPlugin<
     }>;
     'app-root-element:announcements/banner': OverridableExtensionDefinition<{
       config: {
-        variant: 'block' | 'floating';
-        max: number | undefined;
+        max: number;
         category: string | undefined;
         active: boolean | undefined;
         current: boolean | undefined;
         tags: string[] | undefined;
       };
       configInput: {
-        variant?: 'block' | 'floating' | undefined;
         max?: number | undefined;
         active?: boolean | undefined;
         current?: boolean | undefined;

workspaces/announcements/plugins/announcements/report.api.md

@@ -63,7 +63,6 @@ export type MarkdownRendererTypeProps = 'backstage' | 'md-editor';
 
 // @public (undocumented)
 export const NewAnnouncementBanner: (props: {
-  variant?: 'block' | 'floating' | undefined;
   max?: number | undefined;
   category?: string | undefined;
   active?: boolean | undefined;

workspaces/announcements/plugins/announcements/src/alpha/banner.tsx

@@ -25,8 +25,7 @@ export const announcementsBanner = AppRootElementBlueprint.makeWithOverrides({
   name: 'banner',
   config: {
     schema: {
-      variant: z => z.enum(['block', 'floating']).default('floating'),
-      max: z => z.number().optional(),
+      max: z => z.number().optional().default(1),
       category: z => z.string().optional(),
       active: z => z.boolean().optional(),
       current: z => z.boolean().optional(),

workspaces/announcements/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.test.tsx

@@ -85,8 +85,10 @@ describe('NewAnnouncementBanner', () => {
 
     await renderNewAnnouncementBanner(mockAnnouncementsApi(announcementsList));
 
-    expect(await screen.findByText('New Announcement')).toBeInTheDocument();
+    const titles = await screen.findAllByText(/New Announcement/i);
+    expect(titles.length).toBeGreaterThan(0);
     expect(screen.getByText(/This is a new announcement/i)).toBeInTheDocument();
+    expect(screen.getAllByRole('link').length).toBeGreaterThan(0);
   });
 
   it('hides the announcement banner when dismissed', async () => {
@@ -110,11 +112,13 @@ describe('NewAnnouncementBanner', () => {
 
     await renderNewAnnouncementBanner(mockApi);
 
-    const dismissButton = await screen.findByTitle(/mark as seen/i);
+    const dismissButton = await screen.findByRole('button', {
+      name: /mark as seen/i,
+    });
     fireEvent.click(dismissButton);
 
     await waitFor(() => {
-      expect(screen.queryByText('New Announcement')).not.toBeInTheDocument();
+      expect(screen.queryAllByText('New Announcement').length).toBe(0);
     });
 
     expect(mockApi.markLastSeenDate).toHaveBeenCalled();
@@ -128,7 +132,7 @@ describe('NewAnnouncementBanner', () => {
 
     await renderNewAnnouncementBanner(mockApi);
 
-    expect(screen.queryByText(/new announcement/i)).not.toBeInTheDocument();
+    expect(screen.queryAllByText(/new announcement/i).length).toBe(0);
   });
 
   it('captures analytics view events when banner displays', async () => {
@@ -197,7 +201,8 @@ describe('NewAnnouncementBanner', () => {
       analyticsApi,
     );
 
-    const link = await screen.findByText('Clickable Banner Announcement');
+    const links = await screen.findAllByRole('link');
+    const link = links[0];
     fireEvent.click(link);
 
     await waitFor(() => {

workspaces/announcements/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright 2026 The Backstage Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,7 +15,7 @@
  */
 import { useEffect, useState } from 'react';
 import { DateTime } from 'luxon';
-import { Link } from '@backstage/core-components';
+import { Link, Alert, ButtonIcon, Box } from '@backstage/ui';
 import { useApi, useRouteRef, useAnalytics } from '@backstage/core-plugin-api';
 import {
   announcementsApiRef,
@@ -31,71 +31,44 @@ import {
 } from '@backstage-community/plugin-announcements-common';
 import { useSignal } from '@backstage/plugin-signals-react';
 import {
-  makeStyles,
-  Snackbar,
-  SnackbarContent,
-  IconButton,
-  Typography,
-} from '@material-ui/core';
-import Close from '@material-ui/icons/Close';
-import { Alert } from '@material-ui/lab';
+  RiCloseLine,
+  RiMegaphoneLine,
+  RiExternalLinkLine,
+} from '@remixicon/react';
 
 import { announcementViewRouteRef } from '../../routes';
 import { truncate } from '../utils/truncateUtils';
 
-const useStyles = makeStyles(theme => {
-  return {
-    // showing on top, as a block
-    blockPositioning: {
-      padding: theme?.spacing?.(0) ?? 0,
-      position: 'relative',
-      marginBottom: theme?.spacing?.(4) ?? 32,
-      marginTop: theme?.spacing?.(3) ?? -24,
-      zIndex: 'unset',
-    },
-    // showing on top, as a floating alert
-    floatingPositioning: {},
-    icon: {
-      fontSize: 20,
-    },
-    bannerIcon: {
-      fontSize: 20,
-      marginRight: '0.5rem',
-    },
-    content: {
-      width: '100%',
-      maxWidth: 'inherit',
-      flexWrap: 'nowrap',
-      backgroundColor: theme?.palette?.banner?.info ?? '#f0f0f0',
-      display: 'flex',
-      alignItems: 'center',
-      color: theme?.palette?.banner?.text ?? '#000000',
-      '& a': {
-        color: theme?.palette?.banner?.link ?? '#0068c8',
-      },
-    },
-  };
-});
-
 type CardOptions = {
   titleLength?: number;
   excerptLength?: number;
 };
 
 type AnnouncementBannerProps = {
   announcement: Announcement;
-  variant?: 'block' | 'floating';
   cardOptions?: CardOptions;
 };
 
+const floatingStyle: React.CSSProperties = {
+  position: 'fixed',
+  top: 20,
+  left: '50%',
+  transform: 'translateX(-50%)',
+};
+
+const externalLinkIconStyle: React.CSSProperties = {
+  width: '0.85em',
+  height: '0.85em',
+  verticalAlign: 'middle',
+  marginLeft: 5,
+};
+
 const AnnouncementBanner = (props: AnnouncementBannerProps) => {
-  const classes = useStyles();
   const announcementsApi = useApi(announcementsApiRef);
   const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);
   const analytics = useAnalytics();
   const { t } = useAnnouncementsTranslation();
   const [bannerOpen, setBannerOpen] = useState(true);
-  const variant = props.variant || 'block';
   const announcement = props.announcement;
   const titleLength = props.cardOptions?.titleLength;
   const excerptLength = props.cardOptions?.excerptLength;
@@ -136,24 +109,26 @@ const AnnouncementBanner = (props: AnnouncementBannerProps) => {
     ? truncate(announcement.excerpt, excerptLength)
     : announcement.excerpt;
 
-  const message = (
-    <>
-      <Typography
-        component="span"
-        className={classes.bannerIcon}
-        variant="inherit"
-      >
-        📣
-      </Typography>
+  const bannerTitle = (
+    <Box>
+      {title}
       <Link
-        to={viewAnnouncementLink({ id: announcement.id })}
-        variant="inherit"
+        href={viewAnnouncementLink({ id: announcement.id })}
         onClick={handleLinkClick}
+        variant="body-large"
       >
-        {title}
+        <RiExternalLinkLine aria-hidden style={externalLinkIconStyle} />
       </Link>
-      &nbsp;– {excerpt}
-    </>
+    </Box>
+  );
+
+  const closeButton = (
+    <ButtonIcon
+      icon={<RiCloseLine />}
+      aria-label={t('newAnnouncementBanner.markAsSeen')}
+      onPress={handleDismiss}
+      variant="tertiary"
+    />
   );
 
   useEffect(() => {
@@ -169,36 +144,24 @@ const AnnouncementBanner = (props: AnnouncementBannerProps) => {
     });
   }, [analytics, announcement.id, announcement.title, bannerOpen]);
 
+  if (!bannerOpen) {
+    return null;
+  }
+
   return (
-    <Snackbar
-      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      open={bannerOpen}
-      className={
-        variant === 'block'
-          ? classes.blockPositioning
-          : classes.floatingPositioning
-      }
-    >
-      <SnackbarContent
-        className={classes.content}
-        message={message}
-        action={[
-          <IconButton
-            key="dismiss"
-            title={t('newAnnouncementBanner.markAsSeen')}
-            color="inherit"
-            onClick={handleDismiss}
-          >
-            <Close className={classes.icon} />
-          </IconButton>,
-        ]}
-      />
-    </Snackbar>
+    <Alert
+      style={floatingStyle}
+      status="info"
+      icon={<RiMegaphoneLine />}
+      title={bannerTitle}
+      description={excerpt}
+      customActions={closeButton}
+      mb="4"
+    />
   );
 };
 
 type NewAnnouncementBannerProps = {
-  variant?: 'block' | 'floating';
   max?: number;
   category?: string;
   active?: boolean;
@@ -214,7 +177,6 @@ export const NewAnnouncementBanner = (props: NewAnnouncementBannerProps) => {
     category,
     tags,
     active,
-    variant,
     current,
     sortBy,
     cardOptions = {
@@ -254,7 +216,7 @@ export const NewAnnouncementBanner = (props: NewAnnouncementBannerProps) => {
   if (loading) {
     return null;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <Alert status="danger" title={error.message} />;
   }
 
   if (announcements.count === 0) {
@@ -279,7 +241,6 @@ export const NewAnnouncementBanner = (props: NewAnnouncementBannerProps) => {
         <AnnouncementBanner
           key={announcement.id}
           announcement={announcement}
-          variant={variant}
           cardOptions={cardOptions}
         />
       ))}