fix(spans-migration): changed type and wording of dropped fields warnings (#101479)

changed the changed reason types on the frontend to reflect the changes
i've made to the backend. I've also changed up the wording for the
frontend errors as suggested. Widgets have been simplified to one
sentence and queries have slightly changed wording to not use "dropped"

Author: nikkikapadia

static/app/views/dashboards/types.tsx

@@ -101,7 +101,7 @@ type WidgetChangedReason = {
   }> | null;
   orderby: Array<{
     orderby: string;
-    reason: string;
+    reason: string | string[];
   }> | null;
   selected_columns: string[];
 };

static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx

@@ -15,6 +15,7 @@ import {t, tct} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {isEquation, stripEquationPrefix} from 'sentry/utils/discover/fields';
 import {
   MEPState,
   useMEPSettingContext,
@@ -113,54 +114,55 @@ export const useDroppedColumnsWarning = (widget: Widget): React.JSX.Element | nu
     return null;
   }
 
-  const baseWarning = t(
-    "This widget may look different from its original query. Here's why:"
-  );
-  const columnsWarning = [];
-  const equationsWarning = [];
-  const orderbyWarning = [];
+  const columnsDropped = [];
+  const equationsDropped = [];
+  const orderbyDropped = [];
   for (const changedReason of widget.changedReason) {
     if (changedReason.selected_columns.length > 0) {
-      columnsWarning.push(
-        tct(`The following fields were dropped: [columns].`, {
-          columns: changedReason.selected_columns.join(', '),
-        })
-      );
+      columnsDropped.push(...changedReason.selected_columns);
     }
     if (changedReason.equations) {
-      equationsWarning.push(
-        ...changedReason.equations.map(equation =>
-          tct(`[equation] was dropped because [reason] is unsupported.`, {
-            equation: equation.equation,
-            reason:
-              typeof equation.reason === 'string'
-                ? equation.reason
-                : equation.reason.join(', '),
-          })
-        )
+      equationsDropped.push(
+        ...changedReason.equations.map(equation => equation.equation)
       );
     }
     if (changedReason.orderby) {
-      orderbyWarning.push(
-        ...changedReason.orderby.map(equation =>
-          tct(`[orderby] was dropped because [reason].`, {
-            orderby: equation.orderby,
-            reason: equation.reason,
-          })
+      orderbyDropped.push(
+        ...changedReason.orderby.flatMap(orderby =>
+          typeof orderby.reason === 'string' ? orderby.orderby : orderby.reason
         )
       );
     }
   }
 
-  const allWarnings = [...columnsWarning, ...equationsWarning, ...orderbyWarning];
+  const orderbyDroppedWithoutNegation = orderbyDropped.map(orderby =>
+    orderby.startsWith('-') ? orderby.replace('-', '') : orderby
+  );
+  const equationsDroppedParsed = equationsDropped.map(equation => {
+    if (isEquation(equation)) {
+      return stripEquationPrefix(equation);
+    }
+    return equation;
+  });
+  const combinedWarnings = [
+    ...columnsDropped,
+    ...equationsDroppedParsed,
+    ...orderbyDroppedWithoutNegation,
+  ];
+  const allWarningsSet = new Set(combinedWarnings);
+  const allWarnings = [...allWarningsSet];
 
   if (allWarnings.length > 0) {
     return (
-      <div style={{alignContent: 'flex-start'}}>
-        <StyledText as="p">{baseWarning}</StyledText>
-        {allWarnings.map((warning, index) => (
-          <StyledText key={index}>{warning}</StyledText>
-        ))}
+      <div>
+        <StyledText as="p">
+          {tct(
+            'This widget looks different because it was migrated to the spans dataset and [columns] is not supported.',
+            {
+              columns: allWarnings.join(', '),
+            }
+          )}
+        </StyledText>
       </div>
     );
   }

static/app/views/explore/hooks/useSaveQuery.tsx

@@ -30,7 +30,7 @@ export type ExploreQueryChangedReason = {
   }> | null;
   orderby: Array<{
     orderby: string;
-    reason: string;
+    reason: string | string[];
   }> | null;
 };
 

static/app/views/explore/spans/droppedFieldsAlert.tsx

@@ -5,6 +5,7 @@ import {Text} from 'sentry/components/core/text';
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
 import {t, tct} from 'sentry/locale';
+import {stripEquationPrefix} from 'sentry/utils/discover/fields';
 import {useExploreId} from 'sentry/views/explore/contexts/pageParamsContext';
 import {useGetSavedQuery} from 'sentry/views/explore/hooks/useGetSavedQueries';
 
@@ -30,16 +31,16 @@ export function DroppedFieldsAlert(): React.JSX.Element | null {
   const changedReason = savedQuery.changedReason;
   if (changedReason.columns.length > 0) {
     columnsWarning.push(
-      tct(`The following fields were dropped: [columns]`, {
+      tct(`[columns] is no longer supported`, {
         columns: changedReason.columns.join(', '),
       })
     );
   }
   if (changedReason.equations) {
     equationsWarning.push(
       ...changedReason.equations.map(equation =>
-        tct(`[equation] was dropped because [reason] is unsupported`, {
-          equation: equation.equation,
+        tct(`[equation] is no longer supported because [reason] is unsupported`, {
+          equation: stripEquationPrefix(equation.equation),
           reason:
             typeof equation.reason === 'string'
               ? equation.reason
@@ -50,12 +51,23 @@ export function DroppedFieldsAlert(): React.JSX.Element | null {
   }
   if (changedReason.orderby) {
     orderbyWarning.push(
-      ...changedReason.orderby.map(equation =>
-        tct(`[orderby] was dropped because [reason]`, {
-          orderby: equation.orderby,
-          reason: equation.reason,
-        })
-      )
+      ...changedReason.orderby.map(orderby => {
+        const orderbyWithoutPrefix = orderby.orderby.startsWith('-')
+          ? orderby.orderby.replace('-', '')
+          : orderby.orderby;
+        const reasonText =
+          typeof orderby.reason === 'string' ? orderby.reason : orderby.reason.join(', ');
+
+        // make sure that the reason and the orderby aren't the same and word it correctly
+        return typeof orderby.reason === 'string' || orderbyWithoutPrefix === reasonText
+          ? tct(`sorting by [orderby] is no longer supported`, {
+              orderby: orderbyWithoutPrefix,
+            })
+          : tct(`sorting by [orderby] is not supported because [reason] is unsupported`, {
+              orderby: orderby.orderby,
+              reason: reasonText,
+            });
+      })
     );
   }