ref(issues): Remove state from highlight event edit

static/app/components/events/highlights/highlightsDataSection.spec.tsx

@@ -1,5 +1,4 @@
 import {EventFixture} from 'sentry-fixture/event';
-import {GroupFixture} from 'sentry-fixture/group';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
@@ -21,7 +20,6 @@ describe('HighlightsDataSection', function () {
     contexts: TEST_EVENT_CONTEXTS,
     tags: TEST_EVENT_TAGS,
   });
-  const group = GroupFixture();
   const eventTagMap = TEST_EVENT_TAGS.reduce(
     (tagMap, tag) => ({...tagMap, [tag.key]: tag.value}),
     {}
@@ -35,6 +33,11 @@ describe('HighlightsDataSection', function () {
   const analyticsSpy = jest.spyOn(analytics, 'trackAnalytics');
   const modalSpy = jest.spyOn(modal, 'openModal');
 
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+    jest.clearAllMocks();
+  });
+
   it('renders an empty state', async function () {
     MockApiClient.addMockResponse({
       url: `/projects/${organization.slug}/${project.slug}/`,
@@ -43,7 +46,6 @@ describe('HighlightsDataSection', function () {
     render(
       <HighlightsDataSection
         event={event}
-        group={group}
         project={project}
         viewAllRef={{current: null}}
       />,
@@ -54,13 +56,13 @@ describe('HighlightsDataSection', function () {
     expect(await screen.findByText("There's nothing here...")).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Add Highlights'})).toBeInTheDocument();
     const viewAllButton = screen.getByRole('button', {name: 'View All'});
-    await viewAllButton.click();
+    await userEvent.click(viewAllButton);
     expect(analyticsSpy).toHaveBeenCalledWith(
       'highlights.issue_details.view_all_clicked',
       expect.anything()
     );
     const editButton = screen.getByRole('button', {name: 'Edit'});
-    await editButton.click();
+    await userEvent.click(editButton);
     expect(analyticsSpy).toHaveBeenCalledWith(
       'highlights.issue_details.edit_clicked',
       expect.anything()
@@ -74,7 +76,7 @@ describe('HighlightsDataSection', function () {
       body: {...project, highlightTags, highlightContext},
     });
 
-    render(<HighlightsDataSection event={event} group={group} project={project} />, {
+    render(<HighlightsDataSection event={event} project={project} />, {
       organization,
     });
     expect(screen.getByText('Event Highlights')).toBeInTheDocument();

static/app/components/events/highlights/highlightsDataSection.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useMemo, useRef} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -29,7 +29,8 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconEdit, IconMegaphone} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Event, Group, Project} from 'sentry/types';
+import type {Event} from 'sentry/types/event';
+import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import theme from 'sentry/utils/theme';
 import {useDetailedProject} from 'sentry/utils/useDetailedProject';
@@ -38,18 +39,78 @@ import useOrganization from 'sentry/utils/useOrganization';
 
 interface HighlightsDataSectionProps {
   event: Event;
-  group: Group;
   project: Project;
   viewAllRef?: React.RefObject<HTMLElement>;
 }
 
+function useOpenEditHighlightsModal({
+  detailedProject,
+  event,
+}: {
+  event: Event;
+  detailedProject?: Project;
+}) {
+  const organization = useOrganization();
+  const isProjectAdmin = hasEveryAccess(['project:admin'], {
+    organization: organization,
+    project: detailedProject,
+  });
+
+  const editProps = useMemo(
+    () => ({
+      disabled: !isProjectAdmin,
+      title: !isProjectAdmin ? t('Only Project Admins can edit highlights.') : undefined,
+    }),
+    [isProjectAdmin]
+  );
+
+  const openEditHighlightsModal = useCallback(() => {
+    trackAnalytics('highlights.issue_details.edit_clicked', {organization});
+    openModal(
+      deps => (
+        <EditHighlightsModal
+          event={event}
+          highlightContext={detailedProject?.highlightContext ?? {}}
+          highlightTags={detailedProject?.highlightTags ?? []}
+          highlightPreset={detailedProject?.highlightPreset}
+          project={detailedProject!}
+          {...deps}
+        />
+      ),
+      {modalCss: highlightModalCss}
+    );
+  }, [organization, detailedProject, event]);
+
+  return {openEditHighlightsModal, editProps};
+}
+
+function EditHighlightsButton({project, event}: {event: Event; project: Project}) {
+  const organization = useOrganization();
+  const {isLoading, data: detailedProject} = useDetailedProject({
+    orgSlug: organization.slug,
+    projectSlug: project.slug,
+  });
+  const {openEditHighlightsModal, editProps} = useOpenEditHighlightsModal({
+    detailedProject,
+    event,
+  });
+  return (
+    <Button
+      size="xs"
+      icon={<IconEdit />}
+      onClick={openEditHighlightsModal}
+      title={editProps.title}
+      disabled={isLoading || editProps.disabled}
+    >
+      {t('Edit')}
+    </Button>
+  );
+}
+
 function HighlightsData({
   event,
   project,
-  createEditAction,
-}: Pick<HighlightsDataSectionProps, 'event' | 'project'> & {
-  createEditAction: (action: React.ReactNode) => void;
-}) {
+}: Pick<HighlightsDataSectionProps, 'event' | 'project'>) {
   const organization = useOrganization();
   const location = useLocation();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -58,6 +119,10 @@ function HighlightsData({
     orgSlug: organization.slug,
     projectSlug: project.slug,
   });
+  const {openEditHighlightsModal, editProps} = useOpenEditHighlightsModal({
+    detailedProject,
+    event,
+  });
 
   const highlightContext = useMemo(
     () => detailedProject?.highlightContext ?? project?.highlightContext ?? {},
@@ -125,49 +190,6 @@ function HighlightsData({
     );
   }
 
-  const openEditHighlightsModal = useCallback(() => {
-    trackAnalytics('highlights.issue_details.edit_clicked', {organization});
-    openModal(
-      deps => (
-        <EditHighlightsModal
-          event={event}
-          highlightContext={highlightContext}
-          highlightTags={highlightTags}
-          project={detailedProject ?? project}
-          highlightPreset={detailedProject?.highlightPreset}
-          {...deps}
-        />
-      ),
-      {modalCss: highlightModalCss}
-    );
-  }, [detailedProject, event, highlightContext, highlightTags, organization, project]);
-
-  const isProjectAdmin = hasEveryAccess(['project:admin'], {
-    organization: organization,
-    project: detailedProject,
-  });
-
-  const editProps = useMemo(
-    () => ({
-      disabled: !isProjectAdmin,
-      title: !isProjectAdmin ? t('Only Project Admins can edit highlights.') : undefined,
-    }),
-    [isProjectAdmin]
-  );
-
-  useEffect(() => {
-    createEditAction(
-      <Button
-        size="xs"
-        icon={<IconEdit />}
-        onClick={openEditHighlightsModal}
-        {...editProps}
-      >
-        {t('Edit')}
-      </Button>
-    );
-  }, [createEditAction, editProps, openEditHighlightsModal]);
-
   return (
     <HighlightContainer columnCount={columnCount} ref={containerRef}>
       {isLoading ? (
@@ -221,13 +243,10 @@ function HighlightsFeedback() {
 
 export default function HighlightsDataSection({
   viewAllRef,
-  ...props
+  event,
+  project,
 }: HighlightsDataSectionProps) {
   const organization = useOrganization();
-  // XXX: A bit convoluted to have the edit action created by the child component, but this allows
-  // us to wrap it with an Error Boundary and still display the EventDataSection header if something
-  // goes wrong
-  const [editAction, setEditAction] = useState<React.ReactNode>(null);
 
   const viewAllButton = viewAllRef ? (
     <Button
@@ -255,15 +274,17 @@ export default function HighlightsDataSection({
       isHelpHoverable
       data-test-id="event-highlights"
       actions={
-        <ButtonBar gap={1}>
-          <HighlightsFeedback />
-          {viewAllButton}
-          {editAction}
-        </ButtonBar>
+        <ErrorBoundary mini>
+          <ButtonBar gap={1}>
+            <HighlightsFeedback />
+            {viewAllButton}
+            <EditHighlightsButton project={project} event={event} />
+          </ButtonBar>
+        </ErrorBoundary>
       }
     >
       <ErrorBoundary mini message={t('There was an error loading event highlights')}>
-        <HighlightsData {...props} createEditAction={setEditAction} />
+        <HighlightsData event={event} project={project} />
       </ErrorBoundary>
     </EventDataSection>
   );

static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx

@@ -172,12 +172,7 @@ function DefaultGroupEventDetailsContent({
           project={project}
         />
       )}
-      <HighlightsDataSection
-        event={event}
-        group={group}
-        project={project}
-        viewAllRef={tagsRef}
-      />
+      <HighlightsDataSection event={event} project={project} viewAllRef={tagsRef} />
       {showPossibleSolutionsHigher && (
         <ResourcesAndPossibleSolutionsIssueDetailsContent
           event={event}