fix(issue-details): Fix deleting screenshot from tags section (#52283)

Fixes https://github.com/getsentry/sentry/issues/52077

static/app/components/events/eventTagsAndScreenshot/index.spec.tsx

@@ -1,7 +1,13 @@
 import {Fragment} from 'react';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+  within,
+} from 'sentry-test/reactTestingLibrary';
 
 import {EventTagsAndScreenshot} from 'sentry/components/events/eventTagsAndScreenshot';
 import GlobalModal from 'sentry/components/globalModal';
@@ -429,6 +435,49 @@ describe('EventTagsAndScreenshot', function () {
       );
     });
 
+    it('can delete a screenshot', async function () {
+      MockApiClient.clearMockResponses();
+      MockApiClient.addMockResponse({
+        url: `/projects/${organization.slug}/${project.slug}/events/${event.id}/attachments/`,
+        body: attachments,
+      });
+      MockApiClient.addMockResponse({
+        url: `/projects/${organization.slug}/${project.slug}/events/${event.id}/attachments/1765467046/`,
+        method: 'DELETE',
+      });
+      render(
+        <EventTagsAndScreenshot
+          event={{...event, tags, contexts}}
+          organization={organization}
+          projectSlug={project.slug}
+          location={router.location}
+        />,
+        {organization}
+      );
+      renderGlobalModal();
+
+      // Open screenshot menu and select delete
+      await userEvent.click(
+        await screen.findByRole('button', {name: 'More screenshot actions'})
+      );
+      await userEvent.click(screen.getByRole('menuitemradio', {name: 'Delete'}));
+
+      // Selecting delete should open a confirmation modal
+      expect(
+        within(screen.getByRole('dialog')).getByText(
+          /are you sure you want to delete this image/i
+        )
+      ).toBeInTheDocument();
+      await userEvent.click(
+        within(screen.getByRole('dialog')).getByRole('button', {name: 'Confirm'})
+      );
+
+      // Screenshot should be removed after confirmation
+      expect(
+        screen.queryByRole('button', {name: 'View screenshot'})
+      ).not.toBeInTheDocument();
+    });
+
     it('has context and attachments only', async function () {
       const {container} = render(
         <EventTagsAndScreenshot

static/app/components/events/eventTagsAndScreenshot/index.tsx

@@ -72,7 +72,7 @@ export function EventTagsAndScreenshot({
 
   const handleDeleteScreenshot = (attachmentId: string) => {
     deleteAttachment({
-      orgSlug: organization.id,
+      orgSlug: organization.slug,
       projectSlug,
       eventId: event.id,
       attachmentId,

static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx

@@ -46,11 +46,11 @@ function Screenshot({
   const orgSlug = organization.slug;
   const [loadingImage, setLoadingImage] = useState(true);
 
-  function handleDelete(screenshotAttachment) {
+  function handleDelete(screenshotAttachmentId: string) {
     trackAnalytics('issue_details.issue_tab.screenshot_dropdown_deleted', {
       organization,
     });
-    onDelete(screenshotAttachment.id);
+    onDelete(screenshotAttachmentId);
   }
 
   function renderContent(screenshotAttachment: EventAttachment) {