ref(replay): Extract components from <BreadcrumbItem> (#94536)

## PR Description

This pull request refactors the `BreadcrumbItem` component in the
Replays feature to improve its structure, readability, and
maintainability. The original component was becoming too large and
complex, handling multiple responsibilities within a single file. The
goal is to decompose it into smaller, more focused components, each
responsible for a specific aspect of the breadcrumb display.

<details>
<summary><b>Click to see more</b></summary>

### Key Technical Changes
The primary technical change is the extraction of several rendering
functions within `BreadcrumbItem` into separate React components.
Specifically:

* `BreadcrumbCodeSnippet`: Handles the display of code snippets
associated with breadcrumbs.
* `BreadcrumbComparisonButton`: Renders a button to compare replay
states related to hydration errors.
* `BreadcrumbDescription`: Displays the description of the breadcrumb,
including the 'View HTML' button.
* `BreadcrumbIssueLink`: Creates a link to the associated issue, if the
breadcrumb represents an error or feedback event.
* `BreadcrumbWebVital`: Renders web vital data associated with the
breadcrumb.

These new components are then used within `BreadcrumbItem` to render
their respective parts of the breadcrumb. The `isSpanFrame` and
`isWebVitalFrame` checks have been updated to ensure correct rendering
of code snippets and the 'View HTML' button.

### Architecture Decisions
The architectural decision is to follow the Single Responsibility
Principle by breaking down the monolithic `BreadcrumbItem` component
into smaller, more manageable components. This promotes code reuse,
improves testability, and makes it easier to understand and modify the
breadcrumb rendering logic. Styled components are used to encapsulate
the styling for each new component, maintaining a consistent look and
feel.

### Dependencies and Interactions
The refactored components depend on the following:

* `sentry/components/codeSnippet`, `sentry/components/placeholder`,
`sentry/components/core/button`, `sentry/components/core/tooltip`,
`sentry/components/structuredEventData`, `sentry/components/timeline`,
and `sentry/components/links/link` for UI elements.
* `sentry/utils/replays/extractDomNodes`,
`sentry/utils/replays/getDiffTimestamps`,
`sentry/utils/replays/getFrameDetails`, and
`sentry/utils/replays/hooks/useExtractDomNodes` for data extraction and
processing.
* `sentry/utils/replays/types` for type definitions related to replay
frames and events.
* `sentry/utils/useOrganization` and `sentry/utils/useProjectFromSlug`
for accessing organization and project information.
* `sentry/views/replays/detail/timestampButton` and
`sentry/views/replays/detail/useVirtualizedInspector` for
replay-specific UI elements and functionality.

The components interact with the `ReplayContext` and
`ReplayGroupContext` to access replay data and group information.

### Risk Considerations
The primary risk is that the refactoring might introduce regressions in
the rendering of breadcrumbs. Thorough testing is required to ensure
that all types of breadcrumbs are rendered correctly and that the new
components handle all edge cases. The changes to the `isSpanFrame` and
`isWebVitalFrame` checks need to be carefully reviewed to avoid
unintended side effects. The removal of the `&:not(:last-child)::before`
CSS selector might also have unintended visual consequences.

### Notable Implementation Details
The condition `(!isSpanFrame(frame) || !isWebVitalFrame(frame))` in
`BreadcrumbCodeSnippet` and `BreadcrumbDescription` was identified as
potentially incorrect and should be reviewed carefully. The
`@ts-expect-error` comments in `BreadcrumbWebVital` indicate areas where
type safety needs to be improved. The removal of the `render*` functions
from `BreadcrumbItem` significantly reduces its complexity and improves
readability.
</details>

Author: billyvg

static/app/components/replays/breadcrumbs/breadcrumbCodeSnippet.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import beautify from 'js-beautify';
+
+import {CodeSnippet} from 'sentry/components/codeSnippet';
+import Placeholder from 'sentry/components/placeholder';
+import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
+import type {ReplayFrame} from 'sentry/utils/replays/types';
+import {isSpanFrame} from 'sentry/utils/replays/types';
+
+interface Props {
+  frame: ReplayFrame;
+  isPending: boolean;
+  showSnippet: boolean;
+  extraction?: Extraction;
+}
+
+export function BreadcrumbCodeSnippet({
+  frame,
+  extraction,
+  showSnippet,
+  isPending,
+}: Props) {
+  if (!showSnippet) {
+    return null;
+  }
+
+  if (isPending) {
+    return <Placeholder height="34px" />;
+  }
+
+  if (isSpanFrame(frame)) {
+    return null;
+  }
+
+  return extraction?.html?.map(html => (
+    <CodeContainer key={html}>
+      <CodeSnippet language="html" hideCopyButton>
+        {beautify.html(html, {indent_size: 2})}
+      </CodeSnippet>
+    </CodeContainer>
+  ));
+}
+
+const CodeContainer = styled('div')`
+  max-height: 400px;
+  max-width: 100%;
+  overflow: auto;
+`;

static/app/components/replays/breadcrumbs/breadcrumbComparisonButton.tsx

@@ -0,0 +1,37 @@
+import {OpenReplayComparisonButton} from 'sentry/components/replays/breadcrumbs/openReplayComparisonButton';
+import {t} from 'sentry/locale';
+import {getReplayDiffOffsetsFromFrame} from 'sentry/utils/replays/getDiffTimestamps';
+import type ReplayReader from 'sentry/utils/replays/replayReader';
+import type {ReplayFrame} from 'sentry/utils/replays/types';
+import {isBreadcrumbFrame, isHydrationErrorFrame} from 'sentry/utils/replays/types';
+
+interface Props {
+  frame: ReplayFrame;
+  replay: ReplayReader | null;
+}
+
+export function BreadcrumbComparisonButton({frame, replay}: Props) {
+  if (!isBreadcrumbFrame(frame) || !isHydrationErrorFrame(frame) || !replay) {
+    return null;
+  }
+
+  const {frameOrEvent, leftOffsetMs, rightOffsetMs} = getReplayDiffOffsetsFromFrame(
+    replay,
+    frame
+  );
+
+  return (
+    <div>
+      <OpenReplayComparisonButton
+        frameOrEvent={frameOrEvent}
+        initialLeftOffsetMs={leftOffsetMs}
+        initialRightOffsetMs={rightOffsetMs}
+        replay={replay}
+        size="xs"
+        surface="replay-breadcrumbs"
+      >
+        {t('Open Hydration Diff')}
+      </OpenReplayComparisonButton>
+    </div>
+  );
+}

static/app/components/replays/breadcrumbs/breadcrumbDescription.tsx

@@ -0,0 +1,95 @@
+import type {ReactNode} from 'react';
+import {isValidElement} from 'react';
+import styled from '@emotion/styled';
+
+import {Button} from 'sentry/components/core/button';
+import {Tooltip} from 'sentry/components/core/tooltip';
+import StructuredEventData from 'sentry/components/structuredEventData';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {ReplayFrame, WebVitalFrame} from 'sentry/utils/replays/types';
+import {isSpanFrame} from 'sentry/utils/replays/types';
+import type {OnExpandCallback} from 'sentry/views/replays/detail/useVirtualizedInspector';
+
+interface Props {
+  allowShowSnippet: boolean;
+  description: ReactNode;
+  frame: ReplayFrame | WebVitalFrame;
+  onClickViewHtml: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onInspectorExpanded: OnExpandCallback;
+  showSnippet: boolean;
+  className?: string;
+  expandPaths?: string[];
+}
+
+export function BreadcrumbDescription({
+  description,
+  allowShowSnippet,
+  showSnippet,
+  frame,
+  expandPaths,
+  onInspectorExpanded,
+  onClickViewHtml,
+}: Props) {
+  if (
+    typeof description === 'string' ||
+    (description !== undefined && isValidElement(description))
+  ) {
+    return (
+      <DescriptionWrapper>
+        <Description title={description} showOnlyOnOverflow isHoverable>
+          {description}
+        </Description>
+
+        {allowShowSnippet &&
+          !showSnippet &&
+          frame.data?.nodeId !== undefined &&
+          !isSpanFrame(frame) && (
+            <ViewHtmlButton priority="link" onClick={onClickViewHtml} size="xs">
+              {t('View HTML')}
+            </ViewHtmlButton>
+          )}
+      </DescriptionWrapper>
+    );
+  }
+
+  return (
+    <Wrapper>
+      <StructuredEventData
+        initialExpandedPaths={expandPaths ?? []}
+        onToggleExpand={(expandedPaths, path) => {
+          onInspectorExpanded(
+            path,
+            Object.fromEntries(expandedPaths.map(item => [item, true]))
+          );
+        }}
+        data={description}
+        withAnnotatedText
+      />
+    </Wrapper>
+  );
+}
+
+const Description = styled(Tooltip)`
+  ${p => p.theme.overflowEllipsis};
+  font-size: 0.7rem;
+  font-variant-numeric: tabular-nums;
+  line-height: ${p => p.theme.text.lineHeightBody};
+  color: ${p => p.theme.subText};
+`;
+
+const DescriptionWrapper = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+  justify-content: space-between;
+`;
+
+const ViewHtmlButton = styled(Button)`
+  white-space: nowrap;
+`;
+
+const Wrapper = styled('div')`
+  pre {
+    margin: 0;
+  }
+`;

static/app/components/replays/breadcrumbs/breadcrumbIssueLink.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+
+import {ProjectAvatar} from 'sentry/components/core/avatar/projectAvatar';
+import Link from 'sentry/components/links/link';
+import {useReplayGroupContext} from 'sentry/components/replays/replayGroupContext';
+import {space} from 'sentry/styles/space';
+import type {ErrorFrame, FeedbackFrame, ReplayFrame} from 'sentry/utils/replays/types';
+import {isErrorFrame, isFeedbackFrame} from 'sentry/utils/replays/types';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
+import {makeFeedbackPathname} from 'sentry/views/userFeedback/pathnames';
+
+interface Props {
+  frame: ReplayFrame;
+}
+
+export function BreadcrumbIssueLink({frame}: Props) {
+  if (!isErrorFrame(frame) && !isFeedbackFrame(frame)) {
+    return null;
+  }
+
+  return <CrumbErrorIssue frame={frame} />;
+}
+
+function CrumbErrorIssue({frame}: {frame: FeedbackFrame | ErrorFrame}) {
+  const organization = useOrganization();
+  const project = useProjectFromSlug({organization, projectSlug: frame.data.projectSlug});
+  const {groupId} = useReplayGroupContext();
+
+  const projectAvatar = project ? <ProjectAvatar project={project} size={16} /> : null;
+
+  if (String(frame.data.groupId) === groupId) {
+    return (
+      <CrumbIssueWrapper>
+        {projectAvatar}
+        {frame.data.groupShortId}
+      </CrumbIssueWrapper>
+    );
+  }
+
+  return (
+    <CrumbIssueWrapper>
+      {projectAvatar}
+      <Link
+        to={
+          isFeedbackFrame(frame)
+            ? {
+                pathname: makeFeedbackPathname({
+                  path: '/',
+                  organization,
+                }),
+                query: {feedbackSlug: `${frame.data.projectSlug}:${frame.data.groupId}`},
+              }
+            : `/organizations/${organization.slug}/issues/${frame.data.groupId}/`
+        }
+      >
+        {frame.data.groupShortId}
+      </Link>
+    </CrumbIssueWrapper>
+  );
+}
+
+const CrumbIssueWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${space(0.5)};
+  font-size: ${p => p.theme.fontSize.sm};
+  color: ${p => p.theme.subText};
+`;