feat(trace): add autogrouping preferences (#78156)

Add autogrouping preferences to trace view along with a tiny migration
layer to handle old vs new preference shape

static/app/components/events/interfaces/performance/eventTraceView.tsx

@@ -36,6 +36,10 @@ const DEFAULT_ISSUE_DETAILS_TRACE_VIEW_PREFERENCES: TracePreferencesState = {
     },
     layoutOptions: [],
   },
+  autogroup: {
+    parent: true,
+    sibling: true,
+  },
   layout: 'drawer bottom',
   list: {
     width: 0.5,

static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx

@@ -1100,6 +1100,7 @@ export class TraceTree {
     }
 
     parent.zoomedIn = true;
+
     TraceTree.AutogroupSiblingSpanNodes(parent);
     TraceTree.AutogroupDirectChildrenSpanNodes(parent);
 

static/app/views/performance/newTraceDetails/traceState/tracePreferences.tsx

@@ -12,7 +12,8 @@ type TracePreferencesAction =
       type: 'set drawer dimension';
     }
   | {payload: number; type: 'set list width'}
-  | {payload: boolean; type: 'minimize drawer'};
+  | {payload: boolean; type: 'minimize drawer'}
+  | {payload: boolean; type: 'set autogrouping'};
 
 type TraceDrawerPreferences = {
   layoutOptions: TraceLayoutPreferences[];
@@ -23,6 +24,10 @@ type TraceDrawerPreferences = {
 };
 
 export type TracePreferencesState = {
+  autogroup: {
+    parent: boolean;
+    sibling: boolean;
+  };
   drawer: TraceDrawerPreferences;
   layout: TraceLayoutPreferences;
   list: {
@@ -46,6 +51,10 @@ export const DEFAULT_TRACE_VIEW_PREFERENCES: TracePreferencesState = {
     },
     layoutOptions: ['drawer left', 'drawer right', 'drawer bottom'],
   },
+  autogroup: {
+    parent: true,
+    sibling: true,
+  },
   layout: 'drawer right',
   list: {
     width: 0.5,
@@ -77,6 +86,37 @@ function correctListWidth(state: TracePreferencesState): TracePreferencesState {
   return state;
 }
 
+function isPreferenceState(parsed: any): parsed is TracePreferencesState {
+  return (
+    parsed?.drawer &&
+    typeof parsed.drawer.minimized === 'boolean' &&
+    Array.isArray(parsed.drawer.layoutOptions) &&
+    parsed.drawer.sizes &&
+    isInt(parsed.drawer.sizes['drawer left']) &&
+    isInt(parsed.drawer.sizes['drawer right']) &&
+    isInt(parsed.drawer.sizes['drawer bottom']) &&
+    parsed.layout &&
+    typeof parsed.layout === 'string' &&
+    parsed.list &&
+    isInt(parsed.list.width)
+  );
+}
+
+function isValidAutogrouping(
+  state: TracePreferencesState
+): state is TracePreferencesState & {autogrouping: undefined} {
+  if (state.autogroup === undefined) {
+    return false;
+  }
+  if (
+    typeof state.autogroup.parent !== 'boolean' ||
+    typeof state.autogroup.sibling !== 'boolean'
+  ) {
+    return false;
+  }
+  return true;
+}
+
 export function loadTraceViewPreferences(key: string): TracePreferencesState | null {
   const stored = localStorage.getItem(key);
 
@@ -85,20 +125,13 @@ export function loadTraceViewPreferences(key: string): TracePreferencesState | n
       const parsed = JSON.parse(stored);
       // We need a more robust way to validate the stored preferences.
       // Since we dont have a schema validation lib, just do it manually for now.
-      if (
-        parsed?.drawer &&
-        typeof parsed.drawer.minimized === 'boolean' &&
-        Array.isArray(parsed.drawer.layoutOptions) &&
-        parsed.drawer.sizes &&
-        isInt(parsed.drawer.sizes['drawer left']) &&
-        isInt(parsed.drawer.sizes['drawer right']) &&
-        isInt(parsed.drawer.sizes['drawer bottom']) &&
-        parsed.layout &&
-        typeof parsed.layout === 'string' &&
-        parsed.list &&
-        isInt(parsed.list.width)
-      ) {
+      if (isPreferenceState(parsed)) {
         correctListWidth(parsed);
+
+        // Correct old preferences that are missing autogrouping
+        if (!isValidAutogrouping(parsed)) {
+          parsed.autogroup = {...DEFAULT_TRACE_VIEW_PREFERENCES.autogroup};
+        }
         return parsed;
       }
     } catch (e) {
@@ -133,6 +166,12 @@ export function tracePreferencesReducer(
           },
         },
       };
+    case 'set autogrouping': {
+      return {
+        ...state,
+        autogroup: {sibling: action.payload, parent: action.payload},
+      };
+    }
     case 'set list width':
       return {
         ...state,

static/app/views/replays/detail/trace/trace.tsx

@@ -93,6 +93,10 @@ const DEFAULT_REPLAY_TRACE_VIEW_PREFERENCES: TracePreferencesState = {
     },
     layoutOptions: [],
   },
+  autogroup: {
+    parent: true,
+    sibling: true,
+  },
   layout: 'drawer bottom',
   list: {
     width: 0.5,