ref(poc): composition (#36703)

* ref(poc): composition

* feat(PermalinkTitle): use children for props

* fix(evendatasection): add the title back

* fix(permalinkTitle): add back title

Author: JonasBa

static/app/components/events/interfaces/exceptionV2.tsx

@@ -1,11 +1,9 @@
-import styled from '@emotion/styled';
-
 import {t} from 'sentry/locale';
 import {ExceptionType, Group, PlatformType, Project} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import {STACK_TYPE, STACK_VIEW} from 'sentry/types/stacktrace';
 
-import {TraceEventDataSection} from '../traceEventDataSection';
+import {PermalinkTitle, TraceEventDataSection} from '../traceEventDataSection';
 
 import CrashContentException from './crashContent/exception';
 import NoStackTraceMessage from './noStackTraceMessage';
@@ -59,7 +57,7 @@ function Exception({
 
   return (
     <TraceEventDataSection
-      title={<Title>{t('Exception')}</Title>}
+      title={<PermalinkTitle>{t('Exception')}</PermalinkTitle>}
       type={type}
       stackType={STACK_TYPE.ORIGINAL}
       projectId={projectId}
@@ -98,7 +96,6 @@ function Exception({
         !!data.values?.some(value => (value.stacktrace?.frames ?? []).length > 1)
       }
       stackTraceNotFound={stackTraceNotFound}
-      showPermalink
       wrapTitle={false}
     >
       {({recentFirst, display, fullStackTrace}) =>
@@ -131,7 +128,3 @@ function Exception({
 }
 
 export default Exception;
-
-const Title = styled('h3')`
-  margin-bottom: 0;
-`;

static/app/components/events/interfaces/stackTraceV2.tsx

@@ -1,12 +1,10 @@
-import styled from '@emotion/styled';
-
 import CrashContent from 'sentry/components/events/interfaces/crashContent';
 import {t} from 'sentry/locale';
 import {Group, PlatformType, Project} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import {STACK_TYPE, STACK_VIEW} from 'sentry/types/stacktrace';
 
-import {TraceEventDataSection} from '../traceEventDataSection';
+import {PermalinkTitle, TraceEventDataSection} from '../traceEventDataSection';
 
 import CrashContentStackTrace from './crashContent/stackTrace';
 import NoStackTraceMessage from './noStackTraceMessage';
@@ -52,7 +50,7 @@ function StackTrace({
       stackTraceNotFound={stackTraceNotFound}
       recentFirst={isStacktraceNewestFirst()}
       fullStackTrace={!data.hasSystemFrames}
-      title={<Title>{t('Stack Trace')}</Title>}
+      title={<PermalinkTitle>{t('Stack Trace')}</PermalinkTitle>}
       wrapTitle={false}
       hasMinified={false}
       hasVerboseFunctionNames={
@@ -67,7 +65,6 @@ function StackTrace({
       hasAbsoluteAddresses={!!data.frames?.some(frame => !!frame.instructionAddr)}
       hasAppOnlyFrames={!!data.frames?.some(frame => frame.inApp !== true)}
       hasNewestFirst={(data.frames ?? []).length > 1}
-      showPermalink
     >
       {({recentFirst, display, fullStackTrace}) =>
         stackTraceNotFound ? (
@@ -96,7 +93,3 @@ function StackTrace({
 }
 
 export default StackTrace;
-
-const Title = styled('h3')`
-  margin-bottom: 0;
-`;

static/app/components/events/interfaces/threads/index.tsx

@@ -7,6 +7,7 @@ import {t} from 'sentry/locale';
 import {Event, Project, STACK_TYPE, STACK_VIEW, Thread} from 'sentry/types';
 import {defined} from 'sentry/utils';
 
+import {PermalinkTitle} from '../../traceEventDataSection';
 import {isStacktraceNewestFirst} from '../utils';
 
 import findBestThread from './threadSelector/findBestThread';
@@ -133,12 +134,14 @@ function Threads({
             }
           />
         ) : (
-          <CrashTitle
-            title={t('Stack Trace')}
-            newestFirst={newestFirst}
-            hideGuide={hideGuide}
-            onChange={!stackTraceNotFound ? handleChangeNewestFirst : undefined}
-          />
+          <PermalinkTitle>
+            <CrashTitle
+              title={t('Stack Trace')}
+              newestFirst={newestFirst}
+              hideGuide={hideGuide}
+              onChange={!stackTraceNotFound ? handleChangeNewestFirst : undefined}
+            />
+          </PermalinkTitle>
         )
       }
       actions={
@@ -155,7 +158,6 @@ function Threads({
           />
         )
       }
-      showPermalink={!hasMoreThanOneThread}
       wrapTitle={false}
     >
       <Content

static/app/components/events/interfaces/threadsV2.tsx

@@ -1,5 +1,4 @@
 import {Fragment, useState} from 'react';
-import styled from '@emotion/styled';
 import isNil from 'lodash/isNil';
 
 import Pill from 'sentry/components/pill';
@@ -15,7 +14,7 @@ import {
   Thread,
 } from 'sentry/types';
 
-import {TraceEventDataSection} from '../traceEventDataSection';
+import {PermalinkTitle, TraceEventDataSection} from '../traceEventDataSection';
 
 import Exception from './crashContent/exception';
 import StackTrace from './crashContent/stackTrace';
@@ -186,28 +185,6 @@ function Threads({
     );
   }
 
-  function getTitle() {
-    if (hasMoreThanOneThread && activeThread) {
-      return (
-        <ThreadSelector
-          threads={threads}
-          activeThread={activeThread}
-          event={event}
-          onChange={thread => {
-            setState({
-              ...state,
-              activeThread: thread,
-            });
-          }}
-          exception={exception}
-          fullWidth
-        />
-      );
-    }
-
-    return <Title>{t('Stack Trace')}</Title>;
-  }
-
   const platform = getPlatform();
 
   return (
@@ -218,9 +195,26 @@ function Threads({
       eventId={event.id}
       recentFirst={isStacktraceNewestFirst()}
       fullStackTrace={stackView === STACK_VIEW.FULL}
-      title={getTitle()}
+      title={
+        hasMoreThanOneThread && activeThread ? (
+          <ThreadSelector
+            threads={threads}
+            activeThread={activeThread}
+            event={event}
+            onChange={thread => {
+              setState({
+                ...state,
+                activeThread: thread,
+              });
+            }}
+            exception={exception}
+            fullWidth
+          />
+        ) : (
+          <PermalinkTitle>{t('Stack Trace')}</PermalinkTitle>
+        )
+      }
       platform={platform}
-      showPermalink={!hasMoreThanOneThread}
       hasMinified={
         !!exception?.values?.find(value => value.rawStacktrace) ||
         !!activeThread?.rawStacktrace
@@ -275,7 +269,3 @@ function Threads({
 }
 
 export default Threads;
-
-const Title = styled('h3')`
-  margin-bottom: 0;
-`;

static/app/components/events/traceEventDataSection.tsx

@@ -1,4 +1,10 @@
-import {createContext, Fragment, useState} from 'react';
+import {
+  AnchorHTMLAttributes,
+  cloneElement,
+  createContext,
+  Fragment,
+  useState,
+} from 'react';
 import styled from '@emotion/styled';
 
 import Button from 'sentry/components/button';
@@ -54,9 +60,8 @@ type Props = {
   recentFirst: boolean;
   stackTraceNotFound: boolean;
   stackType: STACK_TYPE;
-  title: React.ReactNode;
+  title: React.ReactElement<any, any>;
   type: string;
-  showPermalink?: boolean;
   wrapTitle?: boolean;
 };
 
@@ -67,7 +72,6 @@ export const TraceEventDataSectionContext = createContext<ChildProps | undefined
 export function TraceEventDataSection({
   type,
   title,
-  showPermalink,
   wrapTitle,
   stackTraceNotFound,
   fullStackTrace,
@@ -192,18 +196,7 @@ export function TraceEventDataSection({
       type={type}
       title={
         <Header>
-          <Title>
-            {showPermalink ? (
-              <div>
-                <Permalink href={'#' + type} className="permalink">
-                  <StyledIconAnchor />
-                  {title}
-                </Permalink>
-              </div>
-            ) : (
-              title
-            )}
-          </Title>
+          <Title>{cloneElement(title, {type})}</Title>
           {!stackTraceNotFound && (
             <Fragment>
               {!state.display.includes('raw-stack-trace') && (
@@ -282,6 +275,21 @@ export function TraceEventDataSection({
   );
 }
 
+interface PermalinkTitleProps
+  extends React.DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {}
+
+export function PermalinkTitle(props: PermalinkTitleProps) {
+  return (
+    <Permalink {...props} href={'#' + props.type} className="permalink">
+      <StyledIconAnchor />
+      <h3>{props.children}</h3>
+    </Permalink>
+  );
+}
+
 const StyledIconAnchor = styled(IconAnchor)`
   display: none;
   position: absolute;
@@ -292,7 +300,8 @@ const StyledIconAnchor = styled(IconAnchor)`
 const Permalink = styled('a')`
   display: inline-flex;
   justify-content: flex-start;
-  :hover ${StyledIconAnchor} {
+
+  &:hover ${StyledIconAnchor} {
     display: block;
     color: ${p => p.theme.gray300};
   }