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')}