From cbc78659b4186e75d0bdd3f6cad26e31f7ade5c1 Mon Sep 17 00:00:00 2001
From: Leander Rodrigues <leander.rodrigues@sentry.io>
Date: Tue, 10 Dec 2024 16:24:15 -0500
Subject: [PATCH 1/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Convert=20MergedItem?=
 =?UTF-8?q?=20to=20FC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../issueDetails/groupMerged/mergedItem.tsx   | 187 ++++++++----------
 .../issueDetails/groupMerged/mergedList.tsx   |   1 -
 2 files changed, 86 insertions(+), 102 deletions(-)

diff --git a/static/app/views/issueDetails/groupMerged/mergedItem.tsx b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
index 7b6a4f5a84329d..f36318daefff21 100644
--- a/static/app/views/issueDetails/groupMerged/mergedItem.tsx
+++ b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import {useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/button';
@@ -10,35 +10,24 @@ import {t} from 'sentry/locale';
 import type {Fingerprint} from 'sentry/stores/groupingStore';
 import GroupingStore from 'sentry/stores/groupingStore';
 import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types/organization';
+import useOrganization from 'sentry/utils/useOrganization';
 
-type Props = {
+interface Props {
   fingerprint: Fingerprint;
-  organization: Organization;
   totalFingerprint: number;
-};
-
-type State = {
-  busy: boolean;
-  checked: boolean;
-  collapsed: boolean;
-};
-
-class MergedItem extends Component<Props, State> {
-  state: State = {
-    collapsed: false,
-    checked: false,
-    busy: false,
-  };
+}
 
-  listener = GroupingStore.listen(data => this.onGroupChange(data), undefined);
+export function MergedItem({fingerprint, totalFingerprint}: Props) {
+  const organization = useOrganization();
+  const [busy, setBusy] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const [checked, setChecked] = useState(false);
 
-  onGroupChange = ({unmergeState}) => {
+  function onGroupChange({unmergeState}) {
     if (!unmergeState) {
       return;
     }
 
-    const {fingerprint} = this.props;
     const stateForId = unmergeState.has(fingerprint.id)
       ? unmergeState.get(fingerprint.id)
       : undefined;
@@ -48,42 +37,37 @@ class MergedItem extends Component<Props, State> {
     }
 
     Object.keys(stateForId).forEach(key => {
-      if (stateForId[key] === this.state[key]) {
-        return;
+      if (key === 'collapsed') {
+        setCollapsed(Boolean(stateForId[key]));
+      } else if (key === 'checked') {
+        setChecked(Boolean(stateForId[key]));
+      } else if (key === 'busy') {
+        setBusy(Boolean(stateForId[key]));
       }
-
-      this.setState(prevState => ({...prevState, [key]: stateForId[key]}));
     });
-  };
+  }
 
-  handleToggleEvents = () => {
-    const {fingerprint} = this.props;
+  function handleToggleEvents() {
     GroupingStore.onToggleCollapseFingerprint(fingerprint.id);
-  };
-
-  // Disable default behavior of toggling checkbox
-  handleLabelClick(event: React.MouseEvent) {
-    event.preventDefault();
   }
 
-  handleToggle = () => {
-    const {fingerprint} = this.props;
+  function handleToggle() {
     const {latestEvent} = fingerprint;
 
-    if (this.state.busy) {
+    if (busy) {
       return;
     }
 
     // clicking anywhere in the row will toggle the checkbox
     GroupingStore.onToggleUnmerge([fingerprint.id, latestEvent.id]);
-  };
+  }
 
-  handleCheckClick() {
+  function handleCheckClick() {
     // noop because of react warning about being a controlled input without `onChange`
     // we handle change via row click
   }
 
-  renderFingerprint(id: string, label?: string) {
+  function renderFingerprint(id: string, label?: string) {
     if (!label) {
       return id;
     }
@@ -95,69 +79,70 @@ class MergedItem extends Component<Props, State> {
     );
   }
 
-  render() {
-    const {fingerprint, organization, totalFingerprint} = this.props;
-    const {latestEvent, id, label} = fingerprint;
-    const {collapsed, busy, checked} = this.state;
-    const checkboxDisabled = busy || totalFingerprint === 1;
-
-    // `latestEvent` can be null if last event w/ fingerprint is not within retention period
-    return (
-      <MergedGroup busy={busy}>
-        <Controls expanded={!collapsed}>
-          <FingerprintLabel onClick={this.handleToggle}>
-            <Tooltip
-              containerDisplayMode="flex"
-              disabled={!checkboxDisabled}
-              title={
-                checkboxDisabled && totalFingerprint === 1
-                  ? t('To check, the list must contain 2 or more items')
-                  : undefined
-              }
-            >
-              <Checkbox
-                value={id}
-                checked={checked}
-                disabled={checkboxDisabled}
-                onChange={this.handleCheckClick}
-                size="xs"
-              />
-            </Tooltip>
-
-            {this.renderFingerprint(id, label)}
-          </FingerprintLabel>
-
-          <Button
-            aria-label={
-              collapsed
-                ? t('Show %s fingerprints', id)
-                : t('Collapse %s fingerprints', id)
+  useEffect(
+    () => {
+      GroupingStore.listen(data => onGroupChange(data), undefined);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const {latestEvent, id, label} = fingerprint;
+  const checkboxDisabled = busy || totalFingerprint === 1;
+
+  // `latestEvent` can be null if last event w/ fingerprint is not within retention period
+  return (
+    <MergedGroup busy={busy}>
+      <Controls expanded={!collapsed}>
+        <FingerprintLabel onClick={handleToggle}>
+          <Tooltip
+            containerDisplayMode="flex"
+            disabled={!checkboxDisabled}
+            title={
+              checkboxDisabled && totalFingerprint === 1
+                ? t('To check, the list must contain 2 or more items')
+                : undefined
             }
-            size="zero"
-            borderless
-            icon={<IconChevron direction={collapsed ? 'down' : 'up'} size="xs" />}
-            onClick={this.handleToggleEvents}
-          />
-        </Controls>
-
-        {!collapsed && (
-          <MergedEventList className="event-list">
-            {latestEvent && (
-              <EventDetails className="event-details">
-                <EventOrGroupHeader
-                  data={latestEvent}
-                  organization={organization}
-                  hideIcons
-                  hideLevel
-                  source="merged-item"
-                />
-              </EventDetails>
-            )}
-          </MergedEventList>
-        )}
-      </MergedGroup>
-    );
-  }
+          >
+            <Checkbox
+              value={id}
+              checked={checked}
+              disabled={checkboxDisabled}
+              onChange={handleCheckClick}
+              size="xs"
+            />
+          </Tooltip>
+          {renderFingerprint(id, label)}
+        </FingerprintLabel>
+
+        <Button
+          aria-label={
+            collapsed ? t('Show %s fingerprints', id) : t('Collapse %s fingerprints', id)
+          }
+          size="zero"
+          borderless
+          icon={<IconChevron direction={collapsed ? 'down' : 'up'} size="xs" />}
+          onClick={handleToggleEvents}
+        />
+      </Controls>
+
+      {!collapsed && (
+        <MergedEventList className="event-list">
+          {latestEvent && (
+            <EventDetails className="event-details">
+              <EventOrGroupHeader
+                data={latestEvent}
+                organization={organization}
+                hideIcons
+                hideLevel
+                source="merged-item"
+              />
+            </EventDetails>
+          )}
+        </MergedEventList>
+      )}
+    </MergedGroup>
+  );
 }
 
 const MergedGroup = styled('div')<{busy: boolean}>`
diff --git a/static/app/views/issueDetails/groupMerged/mergedList.tsx b/static/app/views/issueDetails/groupMerged/mergedList.tsx
index ea8d566e5a3f7f..3d8875fadda0ac 100644
--- a/static/app/views/issueDetails/groupMerged/mergedList.tsx
+++ b/static/app/views/issueDetails/groupMerged/mergedList.tsx
@@ -70,7 +70,6 @@ function MergedList({
           {fingerprintsWithLatestEvent.map(fingerprint => (
             <MergedItem
               key={fingerprint.id}
-              organization={organization}
               fingerprint={fingerprint}
               totalFingerprint={fingerprintsWithLatestEvent.length}
             />

From cab3308e060320122e83a7a865fc905500863ad6 Mon Sep 17 00:00:00 2001
From: Leander Rodrigues <leander.rodrigues@sentry.io>
Date: Tue, 10 Dec 2024 16:56:10 -0500
Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20Always=20render=20link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../issueDetails/groupMerged/mergedItem.tsx   | 55 +++++++++++++------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/static/app/views/issueDetails/groupMerged/mergedItem.tsx b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
index f36318daefff21..32d61b66ebd7f7 100644
--- a/static/app/views/issueDetails/groupMerged/mergedItem.tsx
+++ b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
@@ -1,16 +1,19 @@
 import {useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
+import {Button, LinkButton} from 'sentry/components/button';
 import Checkbox from 'sentry/components/checkbox';
+import {Flex} from 'sentry/components/container/flex';
 import EventOrGroupHeader from 'sentry/components/eventOrGroupHeader';
 import {Tooltip} from 'sentry/components/tooltip';
-import {IconChevron} from 'sentry/icons';
+import {IconChevron, IconLink} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Fingerprint} from 'sentry/stores/groupingStore';
 import GroupingStore from 'sentry/stores/groupingStore';
 import {space} from 'sentry/styles/space';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {createIssueLink} from 'sentry/views/issueList/utils';
 
 interface Props {
   fingerprint: Fingerprint;
@@ -19,6 +22,7 @@ interface Props {
 
 export function MergedItem({fingerprint, totalFingerprint}: Props) {
   const organization = useOrganization();
+  const location = useLocation();
   const [busy, setBusy] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
   const [checked, setChecked] = useState(false);
@@ -90,6 +94,16 @@ export function MergedItem({fingerprint, totalFingerprint}: Props) {
   const {latestEvent, id, label} = fingerprint;
   const checkboxDisabled = busy || totalFingerprint === 1;
 
+  const issueLink = latestEvent
+    ? createIssueLink({
+        organization,
+        location,
+        data: latestEvent,
+        eventId: latestEvent.id,
+        referrer: 'merged-item',
+      })
+    : null;
+
   // `latestEvent` can be null if last event w/ fingerprint is not within retention period
   return (
     <MergedGroup busy={busy}>
@@ -127,18 +141,28 @@ export function MergedItem({fingerprint, totalFingerprint}: Props) {
       </Controls>
 
       {!collapsed && (
-        <MergedEventList className="event-list">
-          {latestEvent && (
-            <EventDetails className="event-details">
-              <EventOrGroupHeader
-                data={latestEvent}
-                organization={organization}
-                hideIcons
-                hideLevel
-                source="merged-item"
+        <MergedEventList>
+          {issueLink ? (
+            <Flex align="center" gap={space(0.5)}>
+              <LinkButton
+                to={issueLink}
+                icon={<IconLink color={'linkColor'} />}
+                aria-label={t('Latest Event')}
+                borderless
+                size="xs"
+                style={{marginLeft: space(1)}}
               />
-            </EventDetails>
-          )}
+              <EventDetails>
+                <EventOrGroupHeader
+                  data={latestEvent}
+                  organization={organization}
+                  hideIcons
+                  hideLevel
+                  source="merged-item"
+                />
+              </EventDetails>
+            </Flex>
+          ) : null}
         </MergedEventList>
       )}
     </MergedGroup>
@@ -187,10 +211,7 @@ const MergedEventList = styled('div')`
 const EventDetails = styled('div')`
   display: flex;
   justify-content: space-between;
-
-  .event-list & {
-    padding: ${space(1)};
-  }
+  padding: ${space(1)};
 `;
 
 export default MergedItem;

From 10b5bacaf1b47d7e52056703ce9b6234be3467ca Mon Sep 17 00:00:00 2001
From: Leander Rodrigues <leander.rodrigues@sentry.io>
Date: Tue, 10 Dec 2024 17:00:43 -0500
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=85=20Simple=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/app/views/issueDetails/groupMerged/index.spec.tsx | 3 +++
 static/app/views/issueDetails/groupMerged/mergedItem.tsx | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/static/app/views/issueDetails/groupMerged/index.spec.tsx b/static/app/views/issueDetails/groupMerged/index.spec.tsx
index f317f53ceb3f03..af234fd6dbb47e 100644
--- a/static/app/views/issueDetails/groupMerged/index.spec.tsx
+++ b/static/app/views/issueDetails/groupMerged/index.spec.tsx
@@ -78,5 +78,8 @@ describe('Issues -> Merged View', function () {
     expect(title.parentElement).toHaveTextContent(
       'Fingerprints included in this issue (2)'
     );
+
+    const links = await screen.findAllByRole('button', {name: 'View latest event'});
+    expect(links).toHaveLength(mockData.merged.length);
   });
 });
diff --git a/static/app/views/issueDetails/groupMerged/mergedItem.tsx b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
index 32d61b66ebd7f7..1def2ac45d997a 100644
--- a/static/app/views/issueDetails/groupMerged/mergedItem.tsx
+++ b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
@@ -147,7 +147,7 @@ export function MergedItem({fingerprint, totalFingerprint}: Props) {
               <LinkButton
                 to={issueLink}
                 icon={<IconLink color={'linkColor'} />}
-                aria-label={t('Latest Event')}
+                aria-label={t('View latest event')}
                 borderless
                 size="xs"
                 style={{marginLeft: space(1)}}

From 8d89c85c9a50be60fc5933590d1140eab033f252 Mon Sep 17 00:00:00 2001
From: Leander Rodrigues <leander.rodrigues@sentry.io>
Date: Tue, 10 Dec 2024 17:17:09 -0500
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=94=A5=20teardown=20properly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/issueDetails/groupMerged/mergedItem.tsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/app/views/issueDetails/groupMerged/mergedItem.tsx b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
index 1def2ac45d997a..4800dc6adb1f24 100644
--- a/static/app/views/issueDetails/groupMerged/mergedItem.tsx
+++ b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
@@ -83,13 +83,13 @@ export function MergedItem({fingerprint, totalFingerprint}: Props) {
     );
   }
 
-  useEffect(
-    () => {
-      GroupingStore.listen(data => onGroupChange(data), undefined);
-    },
+  useEffect(() => {
+    const teardown = GroupingStore.listen(data => onGroupChange(data), undefined);
+    return () => {
+      teardown();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  }, []);
 
   const {latestEvent, id, label} = fingerprint;
   const checkboxDisabled = busy || totalFingerprint === 1;

From e82d978add151e245ac59947616142ce5787ce8c Mon Sep 17 00:00:00 2001
From: Leander Rodrigues <leander.rodrigues@sentry.io>
Date: Wed, 11 Dec 2024 09:32:45 -0500
Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20Add=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/app/views/issueDetails/groupMerged/mergedItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/app/views/issueDetails/groupMerged/mergedItem.tsx b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
index 4800dc6adb1f24..8b35348aabf49d 100644
--- a/static/app/views/issueDetails/groupMerged/mergedItem.tsx
+++ b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
@@ -147,6 +147,7 @@ export function MergedItem({fingerprint, totalFingerprint}: Props) {
               <LinkButton
                 to={issueLink}
                 icon={<IconLink color={'linkColor'} />}
+                title={t('View latest event')}
                 aria-label={t('View latest event')}
                 borderless
                 size="xs"