announcements: Fix NewAnnouncementBanner & trigger notification on status update

workspaces/announcements/.changeset/shy-hairs-knock.md

@@ -0,0 +1,9 @@
+---
+'@backstage-community/plugin-announcements-backend': minor
+'@backstage-community/plugin-announcements': minor
+---
+
+Fixed handling of `active` prop in NewAnnouncementBanner
+Extended signal and notification on update when the annoucencement is activated
+Updated `EditAnnoucementPage` to navigate to root path as the announcement creation page
+Updated `EditAnnoucementPage` alertApi on success to be transient

workspaces/announcements/plugins/announcements-backend/src/router.test.ts

@@ -109,7 +109,7 @@ describe('createRouter', () => {
         category: undefined,
         max: undefined,
         offset: undefined,
-        active: undefined,
+        active: false,
         sortBy: 'created_at', // Default sortBy
         order: 'desc', // Default order
         current: undefined,
@@ -161,7 +161,7 @@ describe('createRouter', () => {
         category: undefined,
         max: undefined,
         offset: undefined,
-        active: undefined,
+        active: false,
         sortBy: 'created_at',
         order: 'asc',
       });
@@ -214,7 +214,7 @@ describe('createRouter', () => {
         category: undefined,
         max: undefined,
         offset: undefined,
-        active: undefined,
+        active: false,
         sortBy: 'created_at',
         order: 'desc',
         current: undefined,
@@ -255,7 +255,7 @@ describe('createRouter', () => {
         category: undefined,
         max: undefined,
         offset: undefined,
-        active: undefined,
+        active: false,
         sortBy: 'created_at',
         order: 'desc',
         current: undefined,
@@ -284,7 +284,7 @@ describe('createRouter', () => {
         category: undefined,
         max: undefined,
         offset: undefined,
-        active: undefined,
+        active: false,
         sortBy: 'created_at',
         order: 'desc',
         current: undefined,

workspaces/announcements/plugins/announcements-backend/src/router.ts

@@ -62,7 +62,7 @@ type GetAnnouncementsQueryParams = {
   category?: string;
   page?: number;
   max?: number;
-  active?: boolean;
+  active?: string;
   sortby?: 'created_at' | 'start_at';
   order?: 'asc' | 'desc';
   current?: boolean;
@@ -133,7 +133,7 @@ export async function createRouter(
           category,
           max,
           offset: page ? (page - 1) * (max ?? 10) : undefined,
-          active,
+          active: active === 'true',
           sortBy: ['created_at', 'start_at'].includes(sortby)
             ? sortby
             : 'created_at',
@@ -314,6 +314,15 @@ export async function createRouter(
         });
       }
 
+      if (!initialAnnouncement.active && active) {
+        await signalAnnouncement(announcement, signals);
+        const announcementNotificationsEnabled =
+          req.body?.sendNotification === true;
+        if (announcementNotificationsEnabled) {
+          await sendAnnouncementNotification(announcement, notifications);
+        }
+      }
+
       return res.status(200).json(announcement);
     },
   );

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

@@ -46,6 +46,12 @@ import { EditAnnouncementPage } from './EditAnnouncementPage';
 
 jest.mock('../AnnouncementForm');
 
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
 jest.mock('@backstage-community/plugin-announcements-react', () => ({
   ...jest.requireActual('@backstage-community/plugin-announcements-react'),
   useAnnouncementsTranslation: () => ({ t: (key: string) => key }),
@@ -109,6 +115,7 @@ describe('EditAnnouncementPage', () => {
   beforeEach(() => {
     jest.restoreAllMocks();
     jest.useRealTimers();
+    mockNavigate.mockClear();
   });
 
   it('renders loading state', async () => {
@@ -236,7 +243,10 @@ describe('EditAnnouncementPage', () => {
         expect(alertApiMock.post).toHaveBeenCalledWith({
           message: 'editAnnouncementPage.updatedMessage',
           severity: 'success',
+          display: 'transient',
         });
+
+        expect(mockNavigate).toHaveBeenCalledWith('/announcements');
       });
     });
 
@@ -301,7 +311,10 @@ describe('EditAnnouncementPage', () => {
         expect(alertApiMock.post).toHaveBeenCalledWith({
           message: 'editAnnouncementPage.updatedMessage',
           severity: 'success',
+          display: 'transient',
         });
+
+        expect(mockNavigate).toHaveBeenCalledWith('/announcements');
       });
     });
 
@@ -362,7 +375,10 @@ describe('EditAnnouncementPage', () => {
           message:
             'editAnnouncementPageupdatedMessage editAnnouncementPage.updatedMessageWithNewCategory updated-category.',
           severity: 'success',
+          display: 'transient',
         });
+
+        expect(mockNavigate).toHaveBeenCalledWith('/announcements');
       });
     });
 
@@ -417,6 +433,8 @@ describe('EditAnnouncementPage', () => {
             }),
           );
         });
+
+        expect(mockNavigate).not.toHaveBeenCalled();
       });
     });
   });

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

@@ -20,6 +20,7 @@ import { Page, Header, Content, Progress } from '@backstage/core-components';
 import {
   alertApiRef,
   useApi,
+  useRouteRef,
   useRouteRefParams,
 } from '@backstage/core-plugin-api';
 import { AnnouncementForm } from '../AnnouncementForm';
@@ -31,6 +32,8 @@ import {
   useCategories,
 } from '@backstage-community/plugin-announcements-react';
 import { Alert } from '@material-ui/lab';
+import { rootRouteRef } from '../../routes';
+import { useNavigate } from 'react-router-dom';
 
 type EditAnnouncementPageProps = {
   themeId: string;
@@ -47,6 +50,8 @@ export const EditAnnouncementPage = (props: EditAnnouncementPageProps) => {
   );
   const { categories } = useCategories();
   const { t } = useAnnouncementsTranslation();
+  const navigate = useNavigate();
+  const rootPage = useRouteRef(rootRouteRef);
 
   let title = props.title;
   let content: ReactNode = <Progress />;
@@ -76,7 +81,12 @@ export const EditAnnouncementPage = (props: EditAnnouncementPageProps) => {
       }
 
       await announcementsApi.updateAnnouncement(id, request);
-      alertApi.post({ message: updateMsg, severity: 'success' });
+      alertApi.post({
+        message: updateMsg,
+        severity: 'success',
+        display: 'transient',
+      });
+      navigate(rootPage());
     } catch (err) {
       alertApi.post({ message: (err as Error).message, severity: 'error' });
     }

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

@@ -166,6 +166,7 @@ export const NewAnnouncementBanner = (props: NewAnnouncementBannerProps) => {
     active,
     current,
   });
+
   const lastSeen = announcementsApi.lastSeenDate();
 
   const { lastSignal } = useSignal<AnnouncementSignal>(