ref(plan migrations): Parse categories + general improvements (#95709)

Closes
https://linear.app/getsentry/issue/BIL-955/parse-categories-for-plan-migration-table

Author: isabellaenriquez

static/gsApp/views/subscriptionPage/planMigrationActive/index.spec.tsx

@@ -604,6 +604,7 @@ describe('PlanMigrationActive cohort 8', function () {
     expect(screen.queryByTestId('current-renewal')).not.toBeInTheDocument();
   });
 
+  // TODO(isabella): condense category-specific assertions into a single test
   it('renders errors row', function () {
     renderSimple();
     expect(screen.getByTestId('current-errors')).toHaveTextContent(/100K errors/);
@@ -616,6 +617,7 @@ describe('PlanMigrationActive cohort 8', function () {
       /100K performance units/
     );
     expect(screen.getByTestId('new-spans')).toHaveTextContent(/10M spans/);
+    expect(screen.getByText(/Tracing and Performance Monitoring/)).toBeInTheDocument();
   });
 
   it('renders attachments row', function () {
@@ -727,6 +729,7 @@ describe('PlanMigrationActive cohort 9', function () {
       /100K performance units/
     );
     expect(screen.getByTestId('new-spans')).toHaveTextContent(/10M spans/);
+    expect(screen.getByText(/Tracing and Performance Monitoring/)).toBeInTheDocument();
   });
 
   it('renders attachments row', function () {
@@ -832,6 +835,7 @@ describe('PlanMigrationActive cohort 10', function () {
       /100K performance units/
     );
     expect(screen.getByTestId('new-spans')).toHaveTextContent(/10M spans/);
+    expect(screen.getByText(/Tracing and Performance Monitoring/)).toBeInTheDocument();
   });
 
   it('renders attachments row', function () {
@@ -881,10 +885,7 @@ describe('PlanMigrationActive cohort 111 -- TEST ONLY', function () {
 
   it('renders with active migration', function () {
     renderSimple();
-  });
-
-  it('renders plan migration table', function () {
-    renderSimple();
+    expect(screen.getByTestId('plan-migration-panel')).toBeInTheDocument();
     expect(screen.getByRole('table')).toBeInTheDocument();
     expect(screen.getAllByRole('row')).toHaveLength(8);
   });
@@ -896,11 +897,12 @@ describe('PlanMigrationActive cohort 111 -- TEST ONLY', function () {
     );
   });
 
-  it('renders monitor seats row', function () {
+  it('renders spans row with existing spans', function () {
     renderSimple();
-    expect(screen.getByTestId('current-monitorSeats')).toHaveTextContent(
-      /1 cron monitor/
-    );
-    expect(screen.getByTestId('new-monitorSeats')).toHaveTextContent(/1 cron monitor/);
+    expect(screen.getByTestId('current-spans')).toHaveTextContent(/10M spans/);
+    expect(screen.getByTestId('new-spans')).toHaveTextContent(/10M spans/);
+    expect(
+      screen.queryByText(/Tracing and Performance Monitoring/)
+    ).not.toBeInTheDocument();
   });
 });

static/gsApp/views/subscriptionPage/planMigrationActive/planMigrationRow.tsx

@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 
 import {DATA_CATEGORY_INFO} from 'sentry/constants';
 import {IconArrow} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
+import {tct} from 'sentry/locale';
 import type {DataCategory} from 'sentry/types/core';
 import {DataCategoryExact} from 'sentry/types/core';
 
@@ -17,6 +16,8 @@ type DataRow = {
   nextValue: number | null;
   type: DataCategoryExact;
   hasCredits?: boolean;
+  previousType?: DataCategoryExact;
+  titleOverride?: string;
 };
 
 type PriceRow = {
@@ -100,34 +101,6 @@ function PlanMigrationRow(props: Props) {
       currentValue = props.currentValue;
       nextValue = props.nextValue;
       break;
-    case DataCategoryExact.ERROR:
-      currentValue = formatCategoryRowString(props.type, props.currentValue, options);
-      // eslint-disable-next-line no-case-declarations
-      const formattedErrors = formatCategoryRowString(
-        props.type,
-        props.nextValue,
-        options
-      );
-      nextValue = props.hasCredits ? `${formattedErrors}*` : formattedErrors;
-      break;
-    case DataCategoryExact.TRANSACTION:
-    case DataCategoryExact.REPLAY:
-    case DataCategoryExact.MONITOR_SEAT:
-    case DataCategoryExact.ATTACHMENT:
-    case DataCategoryExact.LOG_BYTE:
-    case DataCategoryExact.PROFILE_DURATION:
-      currentValue = formatCategoryRowString(props.type, props.currentValue, options);
-      nextValue = formatCategoryRowString(props.type, props.nextValue, options);
-      break;
-    case DataCategoryExact.SPAN:
-      currentValue = formatCategoryRowString(
-        DataCategoryExact.TRANSACTION,
-        props.currentValue,
-        options
-      );
-      nextValue = formatCategoryRowString(props.type, props.nextValue, options);
-      currentTitle = t('Tracing and Performance Monitoring');
-      break;
     case 'price':
       currentValue = displayPrice({cents: props.currentValue});
       discountPrice = displayPrice({cents: props.discountPrice});
@@ -139,8 +112,24 @@ function PlanMigrationRow(props: Props) {
       nextValue = displayPrice({cents: props.nextValue});
       currentTitle = 'renewal price';
       break;
-    default:
-      return null;
+    default: {
+      // assume DataCategoryExact
+      currentValue = formatCategoryRowString(
+        props.previousType ?? props.type,
+        props.currentValue,
+        options
+      );
+      const formattedNextValue = formatCategoryRowString(
+        props.type,
+        props.nextValue,
+        options
+      );
+      nextValue = props.hasCredits ? `${formattedNextValue}*` : formattedNextValue;
+      if (props.titleOverride) {
+        currentTitle = props.titleOverride;
+      }
+      break;
+    }
   }
 
   const hasDiscount =
@@ -171,7 +160,7 @@ const Title = styled('td')`
 
 const DiscountCell = styled('td')`
   display: flex;
-  gap: ${space(1)};
+  gap: ${p => p.theme.space.md};
   justify-content: flex-end;
 `;