diff --git a/workspaces/announcements/.changeset/hide-create-button-unauthorized.md b/workspaces/announcements/.changeset/hide-create-button-unauthorized.md new file mode 100644 index 0000000000..2da1c71e38 --- /dev/null +++ b/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 diff --git a/workspaces/announcements/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.test.tsx b/workspaces/announcements/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.test.tsx index 3b59c497b8..80bd5e7fdc 100644 --- a/workspaces/announcements/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.test.tsx +++ b/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( { 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( + + + , + { + 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( + + + , + { + 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( diff --git a/workspaces/announcements/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx b/workspaces/announcements/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx index d25713718a..def31a6b34 100644 --- a/workspaces/announcements/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx +++ b/workspaces/announcements/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx @@ -420,9 +420,8 @@ export const AnnouncementsPage = (props: AnnouncementsPageProps) => { - {!loadingCreatePermission && ( + {!loadingCreatePermission && canCreate && (