Browse Source

feat(new-trace): Use current tags component if org doesn't have new tags ui enabled. (#67806)

Fixes the tags overflowing issue too for the current tags ui.

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>
Abdkhan14 11 months ago
parent
commit
48db417155

+ 4 - 0
static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -46,6 +46,10 @@ const TitleOp = styled('div')`
 
 const Table = styled('table')`
   margin-bottom: 0 !important;
+
+  td {
+    overflow: hidden;
+  }
 `;
 
 const IconTitleWrapper = styled(FlexBox)`

+ 19 - 5
static/app/views/performance/newTraceDetails/traceDrawer/details/transaction.tsx

@@ -19,7 +19,7 @@ import {EventExtraData} from 'sentry/components/events/eventExtraData';
 import {REPLAY_CLIP_OFFSETS} from 'sentry/components/events/eventReplay';
 import ReplayClipPreview from 'sentry/components/events/eventReplay/replayClipPreview';
 import {EventSdk} from 'sentry/components/events/eventSdk';
-import Tags from 'sentry/components/events/eventTagsAndScreenshot/tags';
+import NewTagsUI from 'sentry/components/events/eventTagsAndScreenshot/tags';
 import {EventViewHierarchy} from 'sentry/components/events/eventViewHierarchy';
 import {Breadcrumbs} from 'sentry/components/events/interfaces/breadcrumbs';
 import {getFormattedTimeRangeWithLeadingAndTrailingZero} from 'sentry/components/events/interfaces/spans/utils';
@@ -56,7 +56,7 @@ import {isCustomMeasurement} from 'sentry/views/dashboards/utils';
 import {CustomMetricsEventData} from 'sentry/views/ddm/customMetricsEventData';
 import {getTraceTabTitle} from 'sentry/views/performance/newTraceDetails/traceTabs';
 import type {VirtualizedViewManager} from 'sentry/views/performance/newTraceDetails/virtualizedViewManager';
-import {Row} from 'sentry/views/performance/traceDetails/styles';
+import {Row, Tags} from 'sentry/views/performance/traceDetails/styles';
 import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
 
 import type {TraceTree, TraceTreeNode} from '../../traceTree';
@@ -435,9 +435,23 @@ export function TransactionNodeDetails({
           )}
         </tbody>
       </TraceDrawerComponents.Table>
-      <TagsWrapper>
-        <Tags event={event} projectSlug={node.value.project_slug} />
-      </TagsWrapper>
+      {organization.features.includes('event-tags-tree-ui') ? (
+        <TagsWrapper>
+          <NewTagsUI event={event} projectSlug={node.value.project_slug} />
+        </TagsWrapper>
+      ) : (
+        <TraceDrawerComponents.Table className="table key-value">
+          <tbody>
+            <Tags
+              enableHiding
+              location={location}
+              organization={organization}
+              tags={event.tags}
+              event={node.value}
+            />
+          </tbody>
+        </TraceDrawerComponents.Table>
+      )}
       {project ? <EventEvidence event={event} project={project} /> : null}
       <ReplaySection event={event} organization={organization} />
       {event.projectSlug ? (