(csrf) replace auto muting useEffect in SnoozeAlert

Author: geoffg-sentry

static/app/components/alerts/snoozeAlert.tsx

@@ -1,10 +1,11 @@
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
 import {Grid} from '@sentry/scraps/layout';
 
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
+import {openConfirmModal} from 'sentry/components/confirm';
 import {IconMute, IconSound} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {useApi} from 'sentry/utils/useApi';
@@ -124,11 +125,40 @@ export function SnoozeAlert({
 
   const primaryMuteAction = 'everyone';
 
+  const hasPrompted = useRef(false);
+
   useEffect(() => {
-    if (location.query.mute === '1' && !isSnoozed) {
-      handleMute(primaryMuteAction, true);
+    if (location.query.mute !== '1' || isSnoozed || hasPrompted.current) {
+      return;
     }
-  }, [location.query, isSnoozed, handleMute, primaryMuteAction]);
+    hasPrompted.current = true;
+
+    const stripMuteParam = () => {
+      navigate(
+        {
+          pathname: location.pathname,
+          query: {...location.query, mute: undefined},
+        },
+        {replace: true}
+      );
+    };
+
+    openConfirmModal({
+      header: t('Mute Alert'),
+      message: t('Are you sure you want to mute this alert for everyone?'),
+      confirmText: t('Mute'),
+      onConfirm: () => handleMute(primaryMuteAction, true),
+      onCancel: stripMuteParam,
+      onClose: stripMuteParam,
+    });
+  }, [
+    location.query,
+    location.pathname,
+    isSnoozed,
+    navigate,
+    handleMute,
+    primaryMuteAction,
+  ]);
 
   if (isSnoozed) {
     return (

static/app/views/alerts/rules/issue/details/ruleDetails.spec.tsx

@@ -5,7 +5,13 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 import {ProjectAlertRuleFixture} from 'sentry-fixture/projectAlertRule';
 
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+  waitFor,
+} from 'sentry-test/reactTestingLibrary';
 
 import {ProjectsStore} from 'sentry/stores/projectsStore';
 
@@ -311,21 +317,31 @@ describe('AlertRuleDetails', () => {
     expect(deleteRequest).toHaveBeenCalledTimes(1);
   });
 
-  it('mutes alert if query parameter is set', async () => {
+  it('shows confirmation modal when mute query parameter is set', async () => {
     const request = MockApiClient.addMockResponse({
       url: `/projects/${organization.slug}/${project.slug}/rules/${rule.id}/snooze/`,
       method: 'POST',
     });
 
     createWrapper({query: {mute: '1'}});
+    renderGlobalModal();
 
-    expect(await screen.findByText('Unmute')).toBeInTheDocument();
-    expect(request).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.objectContaining({
-        data: {target: 'everyone'},
-      })
-    );
+    expect(
+      await screen.findByText('Are you sure you want to mute this alert for everyone?')
+    ).toBeInTheDocument();
+
+    expect(request).not.toHaveBeenCalled();
+
+    await userEvent.click(screen.getByRole('button', {name: 'Mute'}));
+
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          data: {target: 'everyone'},
+        })
+      );
+    });
   });
 
   it('mute button is disabled if no alerts:write permission', async () => {