fix(permalinks): Fix permanlinks fullwidth (#20658)

src/sentry/static/sentry/app/components/events/eventDataSection.tsx

@@ -80,14 +80,16 @@ class EventDataSection extends React.Component<Props> {
       <DataSection className={className || ''}>
         {title && (
           <SectionHeader id={type} isCentered={isCentered}>
-            {showPermalink ? (
-              <Permalink href={'#' + type} className="permalink">
-                <StyledIconAnchor />
-                {titleNode}
-              </Permalink>
-            ) : (
-              <div>{titleNode}</div>
-            )}
+            <Title>
+              {showPermalink ? (
+                <Permalink href={'#' + type} className="permalink">
+                  <StyledIconAnchor />
+                  {titleNode}
+                </Permalink>
+              ) : (
+                <div>{titleNode}</div>
+              )}
+            </Title>
             {type === 'extra' && (
               <ButtonBar merged active={raw ? 'raw' : 'formatted'}>
                 <Button
@@ -115,6 +117,10 @@ class EventDataSection extends React.Component<Props> {
   }
 }
 
+const Title = styled('div')`
+  display: flex;
+`;
+
 const StyledIconAnchor = styled(IconAnchor)`
   display: none;
   position: absolute;

src/sentry/static/sentry/app/components/events/eventEntries.jsx

@@ -243,7 +243,7 @@ class EventEntries extends React.Component {
             location={location}
           />
         )}
-        {!objectIsEmpty(event.sdk) && <EventSdk event={event} />}
+        {!objectIsEmpty(event.sdk) && <EventSdk sdk={event.sdk} />}
         {!isShare && event.sdkUpdates && event.sdkUpdates.length > 0 && (
           <EventSdkUpdates event={event} />
         )}

src/sentry/static/sentry/app/components/events/eventSdk.tsx

@@ -1,22 +1,22 @@
 import React from 'react';
 
-import SentryTypes from 'app/sentryTypes';
+import {Event} from 'app/types';
 import EventDataSection from 'app/components/events/eventDataSection';
 import Annotated from 'app/components/events/meta/annotated';
 import {t} from 'app/locale';
 
 type Props = {
-  event: SentryTypes.Event;
+  sdk: NonNullable<Event['sdk']>;
 };
 
-const EventSdk = ({event: {sdk: data}}: Props) => (
+const EventSdk = ({sdk}: Props) => (
   <EventDataSection type="sdk" title={t('SDK')}>
     <table className="table key-value">
       <tbody>
         <tr key="name">
           <td className="key">{t('Name')}</td>
           <td className="value">
-            <Annotated object={data} objectKey="name">
+            <Annotated object={sdk} objectKey="name">
               {value => <pre className="val-string">{value}</pre>}
             </Annotated>
           </td>
@@ -24,7 +24,7 @@ const EventSdk = ({event: {sdk: data}}: Props) => (
         <tr key="version">
           <td className="key">{t('Version')}</td>
           <td className="value">
-            <Annotated object={data} objectKey="version">
+            <Annotated object={sdk} objectKey="version">
               {value => <pre className="val-string">{value}</pre>}
             </Annotated>
           </td>

src/sentry/static/sentry/app/components/events/interfaces/breadcrumbs/breadcrumbs.tsx

@@ -179,7 +179,9 @@ class BreadcrumbsContainer extends React.Component<Props, State> {
         actions={
           <BreadCrumbsSearch
             searchTerm={searchTerm}
-            onChangeSearchTerm={this.handleChangeSearchTerm}
+            onChangeSearchTerm={value => {
+              this.handleChangeSearchTerm(value as string);
+            }}
             onClearSearchTerm={this.handleCleanSearch}
           />
         }

src/sentry/static/sentry/app/components/events/sdk.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import SentryTypes from 'app/sentryTypes';
-import EventDataSection from 'app/components/events/eventDataSection';
-import Annotated from 'app/components/events/meta/annotated';
-import {t} from 'app/locale';
-
-type Props = {
-  event: SentryTypes.Event;
-};
-
-const Sdk = ({event: {data}}: Props) => (
-  <EventDataSection type="sdk" title={t('SDK')} wrapTitle>
-    <table className="table key-value">
-      <tbody>
-        <tr key="name">
-          <td className="key">{t('Name')}</td>
-          <td className="value">
-            <Annotated object={data} objectKey="name">
-              {value => <pre>{value}</pre>}
-            </Annotated>
-          </td>
-        </tr>
-        <tr key="version">
-          <td className="key">{t('Version')}</td>
-          <td className="value">
-            <Annotated object={data} objectKey="version">
-              {value => <pre>{value}</pre>}
-            </Annotated>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </EventDataSection>
-);
-
-export default Sdk;

src/sentry/static/sentry/app/types/index.tsx

@@ -311,6 +311,11 @@ type SentryEventBase = {
   };
 
   crashFile: EventAttachment | null;
+
+  sdk?: {
+    name: string;
+    version: string;
+  };
 };
 
 export type SentryTransactionEvent = {
@@ -319,9 +324,6 @@ export type SentryTransactionEvent = {
   entries: SpanEntry[];
   startTimestamp: number;
   endTimestamp: number;
-  sdk?: {
-    name?: string;
-  };
   contexts?: {
     trace?: TraceContextType;
   };