feat(expore): Generalize drag n drop context for any type (#92142)

For use with the aggregate fields column editor. Allow not just list of
strings.

Author: Zylphrex

static/app/views/explore/contexts/dragNDropContext.tsx

@@ -17,25 +17,35 @@ import {
   useDragNDropColumns,
 } from 'sentry/views/explore/hooks/useDragNDropColumns';
 
-interface DragNDropContextProps {
+interface DragNDropContextProps<T> {
   children: (props: {
     deleteColumnAtIndex: (i: number) => void;
-    editableColumns: Column[];
+    editableColumns: Array<Column<T>>;
     insertColumn: () => void;
-    updateColumnAtIndex: (i: number, column: string) => void;
+    updateColumnAtIndex: (i: number, column: T) => void;
   }) => React.ReactNode;
-  columns: string[];
-  setColumns: (columns: string[], op: 'insert' | 'update' | 'delete' | 'reorder') => void;
+  columns: T[];
+  defaultColumn: () => T;
+  setColumns: (columns: T[], op: 'insert' | 'update' | 'delete' | 'reorder') => void;
 }
 
-export function DragNDropContext({columns, setColumns, children}: DragNDropContextProps) {
+export function DragNDropContext<T>({
+  columns,
+  defaultColumn,
+  setColumns,
+  children,
+}: DragNDropContextProps<T>) {
   const {
     editableColumns,
     insertColumn,
     updateColumnAtIndex,
     deleteColumnAtIndex,
     onDragEnd,
-  } = useDragNDropColumns({columns, setColumns});
+  } = useDragNDropColumns({
+    columns,
+    defaultColumn,
+    setColumns,
+  });
 
   const sensors = useSensors(
     useSensor(PointerSensor),

static/app/views/explore/hooks/useDragNDropColumns.spec.tsx

@@ -7,14 +7,18 @@ import {useDragNDropColumns} from './useDragNDropColumns';
 describe('useDragNDropColumns', () => {
   const initialColumns = ['span.op', 'span_id', 'timestamp'];
 
+  function defaultColumn(): string {
+    return '';
+  }
+
   it('should insert a column', () => {
     let columns!: string[];
     let setColumns: (columns: string[]) => void;
     let insertColumn: ReturnType<typeof useDragNDropColumns>['insertColumn'];
 
     function TestPage() {
       [columns, setColumns] = useState(initialColumns);
-      ({insertColumn} = useDragNDropColumns({columns, setColumns}));
+      ({insertColumn} = useDragNDropColumns({columns, defaultColumn, setColumns}));
       return null;
     }
 
@@ -30,13 +34,11 @@ describe('useDragNDropColumns', () => {
   it('should update a column at a specific index', () => {
     let columns!: string[];
     let setColumns: (columns: string[]) => void;
-    let updateColumnAtIndex: ReturnType<
-      typeof useDragNDropColumns
-    >['updateColumnAtIndex'];
+    let updateColumnAtIndex: (i: number, column: string) => void;
 
     function TestPage() {
       [columns, setColumns] = useState(initialColumns);
-      ({updateColumnAtIndex} = useDragNDropColumns({columns, setColumns}));
+      ({updateColumnAtIndex} = useDragNDropColumns({columns, defaultColumn, setColumns}));
       return null;
     }
 
@@ -56,7 +58,7 @@ describe('useDragNDropColumns', () => {
 
     function TestPage() {
       [columns, setColumns] = useState(initialColumns);
-      ({deleteColumnAtIndex} = useDragNDropColumns({columns, setColumns}));
+      ({deleteColumnAtIndex} = useDragNDropColumns({columns, defaultColumn, setColumns}));
       return null;
     }
 
@@ -76,7 +78,7 @@ describe('useDragNDropColumns', () => {
 
     function TestPage() {
       [columns, setColumns] = useState(initialColumns);
-      ({onDragEnd} = useDragNDropColumns({columns, setColumns}));
+      ({onDragEnd} = useDragNDropColumns({columns, defaultColumn, setColumns}));
       return null;
     }
 

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

@@ -2,26 +2,31 @@ import {useEffect, useMemo, useState} from 'react';
 import type {DragEndEvent} from '@dnd-kit/core';
 import {arrayMove} from '@dnd-kit/sortable';
 
-export type Column = {
-  column: string | undefined;
+export type Column<T> = {
+  column: T | undefined;
   id: number;
 };
 
-interface UseDragAndDropColumnsProps {
-  columns: string[];
-  setColumns: (columns: string[], op: 'insert' | 'update' | 'delete' | 'reorder') => void;
+interface UseDragAndDropColumnsProps<T> {
+  columns: T[];
+  defaultColumn: () => T;
+  setColumns: (columns: T[], op: 'insert' | 'update' | 'delete' | 'reorder') => void;
 }
 
-const extractColumns = (editableColumns: Column[]) => {
-  return editableColumns.map(({column}) => column ?? '');
-};
+function extractColumns<T>(editableColumns: Array<Column<T>>, defaultColumn: () => T) {
+  return editableColumns.map(({column}) => column ?? defaultColumn());
+}
 
-export function useDragNDropColumns({columns, setColumns}: UseDragAndDropColumnsProps) {
+export function useDragNDropColumns<T>({
+  columns,
+  defaultColumn,
+  setColumns,
+}: UseDragAndDropColumnsProps<T>) {
   const mappedColumns = useMemo(() => {
     return columns.map((column, i) => ({id: i + 1, column}));
   }, [columns]);
 
-  const [editableColumns, setEditableColumns] = useState<Column[]>(mappedColumns);
+  const [editableColumns, setEditableColumns] = useState<Array<Column<T>>>(mappedColumns);
 
   useEffect(() => {
     setEditableColumns(prevEditableColumns => {
@@ -44,18 +49,18 @@ export function useDragNDropColumns({columns, setColumns}: UseDragAndDropColumns
 
       setNextId(nextId + 1); // make sure to increment the id for the next time
 
-      setColumns(extractColumns(newEditableColumns), 'insert');
+      setColumns(extractColumns(newEditableColumns, defaultColumn), 'insert');
 
       return newEditableColumns;
     });
   }
 
-  function updateColumnAtIndex(i: number, column: string) {
+  function updateColumnAtIndex(i: number, column: T) {
     setEditableColumns(oldEditableColumns => {
       const newEditableColumns = [...oldEditableColumns];
       newEditableColumns[i]!.column = column;
 
-      setColumns(extractColumns(newEditableColumns), 'update');
+      setColumns(extractColumns(newEditableColumns, defaultColumn), 'update');
 
       return newEditableColumns;
     });
@@ -64,7 +69,7 @@ export function useDragNDropColumns({columns, setColumns}: UseDragAndDropColumns
   function deleteColumnAtIndex(i: number) {
     setEditableColumns(oldEditableColumns => {
       if (oldEditableColumns.length === 1) {
-        setColumns([''], 'delete');
+        setColumns([defaultColumn()], 'delete');
         return [{id: 1, column: undefined}];
       }
 
@@ -73,7 +78,7 @@ export function useDragNDropColumns({columns, setColumns}: UseDragAndDropColumns
         ...oldEditableColumns.slice(i + 1),
       ];
 
-      setColumns(extractColumns(newEditableColumns), 'delete');
+      setColumns(extractColumns(newEditableColumns, defaultColumn), 'delete');
 
       return newEditableColumns;
     });
@@ -89,7 +94,7 @@ export function useDragNDropColumns({columns, setColumns}: UseDragAndDropColumns
       setEditableColumns(oldEditableColumns => {
         const newEditableColumns = arrayMove(oldEditableColumns, oldIndex, newIndex);
 
-        setColumns(extractColumns(newEditableColumns), 'reorder');
+        setColumns(extractColumns(newEditableColumns, defaultColumn), 'reorder');
 
         return newEditableColumns;
       });

static/app/views/explore/tables/columnEditorModal.tsx

@@ -131,7 +131,11 @@ export function ColumnEditorModal({
   }
 
   return (
-    <DragNDropContext columns={tempColumns} setColumns={setTempColumns}>
+    <DragNDropContext
+      columns={tempColumns}
+      setColumns={setTempColumns}
+      defaultColumn={() => ''}
+    >
       {({insertColumn, updateColumnAtIndex, deleteColumnAtIndex, editableColumns}) => (
         <Fragment>
           <Header closeButton data-test-id="editor-header">
@@ -194,7 +198,7 @@ export function ColumnEditorModal({
 
 interface ColumnEditorRowProps {
   canDelete: boolean;
-  column: Column;
+  column: Column<string>;
   onColumnChange: (column: string) => void;
   onColumnDelete: () => void;
   options: Array<SelectOption<string>>;

static/app/views/explore/toolbar/toolbarGroupBy.tsx

@@ -91,7 +91,7 @@ export function ToolbarGroupBy({autoSwitchToAggregates}: ToolbarGroupBy) {
   }, [groupBys, tags]);
 
   return (
-    <DragNDropContext columns={groupBys} setColumns={setColumns}>
+    <DragNDropContext columns={groupBys} setColumns={setColumns} defaultColumn={() => ''}>
       {({editableColumns, insertColumn, updateColumnAtIndex, deleteColumnAtIndex}) => {
         return (
           <ToolbarSection data-test-id="section-group-by">
@@ -136,7 +136,7 @@ export function ToolbarGroupBy({autoSwitchToAggregates}: ToolbarGroupBy) {
 
 interface ColumnEditorRowProps {
   canDelete: boolean;
-  column: Column;
+  column: Column<string>;
   onColumnChange: (column: string) => void;
   onColumnDelete: () => void;
   options: Array<SelectOption<string>>;