feat(new-trace-drawer-details): Not displaying rows with no values. (#70151)

<img width="470" alt="Screenshot 2024-05-02 at 1 47 59 PM"
src="https://github.com/getsentry/sentry/assets/60121741/43dc58da-f2be-43c4-b436-385d7184775f">

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

Author: Abdkhan14

static/app/components/events/opsBreakdown.tsx

@@ -44,7 +44,7 @@ type OpStats = {
 
 const TOP_N_SPANS = 4;
 
-type OpBreakdownType = OpStats[];
+export type OpBreakdownType = OpStats[];
 
 type Props = {
   event: Event | AggregateEventTransaction;

static/app/views/performance/newTraceDetails/traceDrawer/details/span/sections/ancestry.tsx

@@ -22,6 +22,7 @@ import {assert} from 'sentry/types/utils';
 import {defined} from 'sentry/utils';
 import EventView from 'sentry/utils/discover/eventView';
 import {generateEventSlug} from 'sentry/utils/discover/urls';
+import type {TraceFullDetailed} from 'sentry/utils/performance/quickTrace/types';
 import type {
   TraceTree,
   TraceTreeNode,
@@ -39,20 +40,14 @@ type TransactionResult = {
 };
 
 function SpanChild({
-  node,
+  childTransaction,
   organization,
   location,
 }: {
+  childTransaction: TraceTreeNode<TraceFullDetailed>;
   location: Location;
-  node: TraceTreeNode<TraceTree.Span>;
   organization: Organization;
 }) {
-  const childTransaction = node.value.childTransactions?.[0];
-
-  if (!childTransaction) {
-    return null;
-  }
-
   const transactionResult: TransactionResult = {
     'project.name': childTransaction.value.project_slug,
     transaction: childTransaction.value.transaction,
@@ -216,11 +211,21 @@ export function getSpanAncestryAndGroupingItems({
     subject: t('Parent Span ID'),
   });
 
-  items.push({
-    key: 'transaction_name',
-    value: <SpanChild node={node} organization={organization} location={location} />,
-    subject: t('Child Transaction'),
-  });
+  const childTransaction = node.value.childTransactions?.[0];
+
+  if (childTransaction) {
+    items.push({
+      key: 'child_transaction',
+      value: (
+        <SpanChild
+          childTransaction={childTransaction}
+          organization={organization}
+          location={location}
+        />
+      ),
+      subject: t('Child Transaction'),
+    });
+  }
 
   if (span.same_process_as_parent) {
     items.push({

static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/generalInfo.tsx

@@ -3,6 +3,7 @@ import type {Location} from 'history';
 import omit from 'lodash/omit';
 
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
+import {generateStats} from 'sentry/components/events/opsBreakdown';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {PAGE_URL_PARAM} from 'sentry/constants/pageFilters';
 import {t} from 'sentry/locale';
@@ -111,19 +112,23 @@ function GeneralInfo({
     ),
   });
 
-  items.push({
-    key: 'ops_breakdown',
-    subject: (
-      <TraceDrawerComponents.FlexBox style={{gap: '5px'}}>
-        {t('Ops Breakdown')}
-        <QuestionTooltip
-          title={t('Applicable to the children of this event only')}
-          size="xs"
-        />
-      </TraceDrawerComponents.FlexBox>
-    ),
-    value: <OpsBreakdown event={event} />,
-  });
+  const breakdown = generateStats(event, {type: 'no_filter'});
+
+  if (breakdown.length > 0) {
+    items.push({
+      key: 'ops_breakdown',
+      subject: (
+        <TraceDrawerComponents.FlexBox style={{gap: '5px'}}>
+          {t('Ops Breakdown')}
+          <QuestionTooltip
+            title={t('Applicable to the children of this event only')}
+            size="xs"
+          />
+        </TraceDrawerComponents.FlexBox>
+      ),
+      value: <OpsBreakdown breakdown={breakdown} />,
+    });
+  }
 
   return <TraceDrawerComponents.SectionCard items={items} title={t('General')} />;
 }

static/app/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/opsBreakDown.tsx

@@ -1,18 +1,12 @@
 import {useState} from 'react';
 
-import {generateStats} from 'sentry/components/events/opsBreakdown';
+import type {OpBreakdownType} from 'sentry/components/events/opsBreakdown';
 import PerformanceDuration from 'sentry/components/performanceDuration';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {EventTransaction} from 'sentry/types';
 
-export function OpsBreakdown({event}: {event: EventTransaction}) {
+export function OpsBreakdown({breakdown}: {breakdown: OpBreakdownType}) {
   const [showingAll, setShowingAll] = useState(false);
-  const breakdown = event && generateStats(event, {type: 'no_filter'});
-
-  if (breakdown.length <= 0) {
-    return null;
-  }
 
   const renderText = showingAll ? t('Show less') : t('Show more') + '...';