Hide create announcement button for unauthorized users

workspaces/announcements/.changeset/hide-create-button-unauthorized.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-announcements': patch
+---
+
+Hide create announcement button when user lacks permission instead of showing it disabled

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

@@ -20,13 +20,25 @@ import {
 } from '@backstage/test-utils';
 import { AnnouncementsPage } from './AnnouncementsPage';
 import { rootRouteRef } from '../../routes';
-import { permissionApiRef } from '@backstage/plugin-permission-react';
+import {
+  permissionApiRef,
+  usePermission,
+} from '@backstage/plugin-permission-react';
 import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { announcementsApiRef } from '@backstage-community/plugin-announcements-react';
 import { DateTime } from 'luxon';
 import { AnnouncementsList } from '@backstage-community/plugin-announcements-common';
 
+jest.mock('@backstage/plugin-permission-react', () => ({
+  ...jest.requireActual('@backstage/plugin-permission-react'),
+  usePermission: jest.fn(),
+}));
+
+const mockUsePermission = usePermission as jest.MockedFunction<
+  typeof usePermission
+>;
+
 const mockAnnouncements = [
   {
     id: '0',
@@ -50,6 +62,14 @@ describe('AnnouncementsPage', () => {
     getEntities: async () => ({ items: [] }),
   };
 
+  beforeEach(() => {
+    mockUsePermission.mockReturnValue({ loading: false, allowed: true });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render', async () => {
     await renderInTestApp(
       <TestApiProvider
@@ -97,6 +117,56 @@ describe('AnnouncementsPage', () => {
     expect(screen.queryByTestId('announcements-context-menu')).toBeNull();
   });
 
+  it('should hide create button when permission is denied', async () => {
+    mockUsePermission.mockReturnValue({ loading: false, allowed: false });
+
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [permissionApiRef, mockApis.permission()],
+          [announcementsApiRef, mockAnnouncementsApi],
+          [catalogApiRef, mockCatalogApi],
+        ]}
+      >
+        <AnnouncementsPage themeId="home" title="Announcements" />
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/announcements': rootRouteRef,
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText('New announcement')).toBeNull();
+    });
+  });
+
+  it('should show create button when permission is granted', async () => {
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [permissionApiRef, mockApis.permission()],
+          [announcementsApiRef, mockAnnouncementsApi],
+          [catalogApiRef, mockCatalogApi],
+        ]}
+      >
+        <AnnouncementsPage themeId="home" title="Announcements" />
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/announcements': rootRouteRef,
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('New announcement')).toBeInTheDocument();
+    });
+  });
+
   describe('AnnouncementCard', () => {
     it('should render announcement card title', async () => {
       await renderInTestApp(

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

@@ -420,9 +420,8 @@ export const AnnouncementsPage = (props: AnnouncementsPageProps) => {
 
       <Content>
         <ContentHeader title="">
-          {!loadingCreatePermission && (
+          {!loadingCreatePermission && canCreate && (
             <LinkButton
-              disabled={!canCreate}
               to={newAnnouncementLink()}
               color="primary"
               variant="contained"