diff --git a/static/app/views/insights/crons/components/monitorHeaderActions.spec.tsx b/static/app/views/insights/crons/components/monitorHeaderActions.spec.tsx new file mode 100644 index 00000000000000..cf03b155a47953 --- /dev/null +++ b/static/app/views/insights/crons/components/monitorHeaderActions.spec.tsx @@ -0,0 +1,82 @@ +import {MonitorFixture} from 'sentry-fixture/monitor'; +import {OrganizationFixture} from 'sentry-fixture/organization'; + +import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary'; + +import MonitorHeaderActions from 'sentry/views/insights/crons/components/monitorHeaderActions'; + +describe('MonitorHeaderActions', () => { + const organization = OrganizationFixture(); + + it('disables mute button when monitor has no environments', async () => { + const monitor = MonitorFixture({ + environments: [], + }); + + render( + , + {organization} + ); + + const muteButton = screen.getByRole('button', {name: 'Mute'}); + expect(muteButton).toBeDisabled(); + + await userEvent.hover(muteButton); + expect( + await screen.findByText( + 'Muting is only available when there are monitor environments' + ) + ).toBeInTheDocument(); + }); + + it('enables mute button when monitor has environments', async () => { + const monitor = MonitorFixture(); + + const updateMock = MockApiClient.addMockResponse({ + url: `/projects/${organization.slug}/${monitor.project.slug}/monitors/${monitor.slug}/`, + method: 'PUT', + body: {...monitor, isMuted: true}, + }); + + render( + , + {organization} + ); + + const muteButton = screen.getByRole('button', {name: 'Mute'}); + expect(muteButton).toBeEnabled(); + + await userEvent.click(muteButton); + expect(updateMock).toHaveBeenCalledWith( + expect.anything(), + expect.objectContaining({ + data: {isMuted: true}, + }) + ); + }); + + it('shows unmute button when monitor is muted', () => { + const monitor = MonitorFixture({ + isMuted: true, + }); + + render( + , + {organization} + ); + + expect(screen.getByRole('button', {name: 'Unmute'})).toBeInTheDocument(); + }); +}); diff --git a/static/app/views/insights/crons/components/monitorHeaderActions.tsx b/static/app/views/insights/crons/components/monitorHeaderActions.tsx index a8e04a3639fc2f..e870df97278563 100644 --- a/static/app/views/insights/crons/components/monitorHeaderActions.tsx +++ b/static/app/views/insights/crons/components/monitorHeaderActions.tsx @@ -71,6 +71,16 @@ function MonitorHeaderActions({monitor, orgSlug, onUpdate}: Props) { disableProps.title = permissionTooltipText; } + const hasEnvironments = monitor.environments.length > 0; + const muteDisableProps = {...disableProps}; + + if (!hasEnvironments) { + muteDisableProps.disabled = true; + muteDisableProps.title = t( + 'Muting is only available when there are monitor environments' + ); + } + return ( @@ -78,7 +88,7 @@ function MonitorHeaderActions({monitor, orgSlug, onUpdate}: Props) { size="sm" icon={monitor.isMuted ? : } onClick={() => handleUpdate({isMuted: !monitor.isMuted})} - {...disableProps} + {...muteDisableProps} > {monitor.isMuted ? t('Unmute') : t('Mute')}