feat(metrics): Add drag-and-drop reordering to metric panels

static/app/views/explore/metrics/hooks/useSortableMetricQueries.spec.tsx

@@ -0,0 +1,214 @@
+import type {DragEndEvent} from '@dnd-kit/core';
+
+import {act, renderHookWithProviders} from 'sentry-test/reactTestingLibrary';
+
+import {EQUATION_PREFIX} from 'sentry/utils/discover/fields';
+import {useSortableMetricQueries} from 'sentry/views/explore/metrics/hooks/useSortableMetricQueries';
+import {MultiMetricsQueryParamsProvider} from 'sentry/views/explore/metrics/multiMetricsQueryParams';
+import {useMultiMetricsQueryParams} from 'sentry/views/explore/metrics/multiMetricsQueryParams';
+import {
+  isVisualizeEquation,
+  VisualizeEquation,
+  VisualizeFunction,
+} from 'sentry/views/explore/queryParams/visualize';
+
+function Wrapper({children}: {children: React.ReactNode}) {
+  return <MultiMetricsQueryParamsProvider>{children}</MultiMetricsQueryParamsProvider>;
+}
+
+describe('useSortableMetricQueries', () => {
+  it('uses stable labels as sortable ids', () => {
+    const {result} = renderHookWithProviders(useSortableMetricQueries, {
+      additionalWrapper: Wrapper,
+      initialRouterConfig: {
+        location: {
+          pathname: '/organizations/org-slug/explore/metrics/',
+          query: {
+            metric: [
+              JSON.stringify({
+                metric: {name: 'foo', type: 'counter'},
+                query: '',
+                aggregateFields: [
+                  new VisualizeFunction('sum(value,foo,counter,-)').serialize(),
+                ],
+                aggregateSortBys: [],
+                mode: 'samples',
+              }),
+              JSON.stringify({
+                metric: {name: 'bar', type: 'counter'},
+                query: '',
+                aggregateFields: [
+                  new VisualizeFunction('sum(value,bar,counter,-)').serialize(),
+                ],
+                aggregateSortBys: [],
+                mode: 'samples',
+              }),
+            ],
+          },
+        },
+      },
+    });
+
+    expect(result.current.sortableItems.map(({id}) => id)).toEqual(['A', 'B']);
+  });
+
+  it('filters sortable items by query type and reorders within that section', () => {
+    const {result} = renderHookWithProviders(
+      () => {
+        const sortable = useSortableMetricQueries({
+          predicate: metricQuery =>
+            !isVisualizeEquation(metricQuery.queryParams.visualizes[0]!),
+        });
+        const metricQueries = useMultiMetricsQueryParams();
+        return {sortable, metricQueries};
+      },
+      {
+        additionalWrapper: Wrapper,
+        initialRouterConfig: {
+          location: {
+            pathname: '/organizations/org-slug/explore/metrics/',
+            query: {
+              metric: [
+                JSON.stringify({
+                  metric: {name: 'foo', type: 'counter'},
+                  query: '',
+                  aggregateFields: [
+                    new VisualizeFunction('sum(value,foo,counter,-)').serialize(),
+                  ],
+                  aggregateSortBys: [],
+                  mode: 'samples',
+                }),
+                JSON.stringify({
+                  metric: {name: 'bar', type: 'counter'},
+                  query: '',
+                  aggregateFields: [
+                    new VisualizeFunction('sum(value,bar,counter,-)').serialize(),
+                  ],
+                  aggregateSortBys: [],
+                  mode: 'samples',
+                }),
+                JSON.stringify({
+                  metric: {name: '', type: ''},
+                  query: '',
+                  aggregateFields: [new VisualizeEquation(EQUATION_PREFIX).serialize()],
+                  aggregateSortBys: [],
+                  mode: 'samples',
+                }),
+              ],
+            },
+          },
+        },
+      }
+    );
+
+    expect(result.current.sortable.sortableItems.map(({id}) => id)).toEqual(['A', 'B']);
+    expect(result.current.metricQueries.map(metricQuery => metricQuery.label)).toEqual([
+      'A',
+      'B',
+      'ƒ1',
+    ]);
+
+    act(() => {
+      result.current.sortable.onDragEnd({
+        active: {id: 'B'},
+        over: {id: 'A'},
+      } as DragEndEvent);
+    });
+
+    expect(result.current.metricQueries.map(metricQuery => metricQuery.label)).toEqual([
+      'B',
+      'A',
+      'ƒ1',
+    ]);
+  });
+
+  it('ignores drops outside the current section', () => {
+    const {result} = renderHookWithProviders(
+      () => {
+        const sortable = useSortableMetricQueries({
+          predicate: metricQuery =>
+            !isVisualizeEquation(metricQuery.queryParams.visualizes[0]!),
+        });
+        const metricQueries = useMultiMetricsQueryParams();
+        return {sortable, metricQueries};
+      },
+      {
+        additionalWrapper: Wrapper,
+        initialRouterConfig: {
+          location: {
+            pathname: '/organizations/org-slug/explore/metrics/',
+            query: {
+              metric: [
+                JSON.stringify({
+                  metric: {name: 'foo', type: 'counter'},
+                  query: '',
+                  aggregateFields: [
+                    new VisualizeFunction('sum(value,foo,counter,-)').serialize(),
+                  ],
+                  aggregateSortBys: [],
+                  mode: 'samples',
+                }),
+                JSON.stringify({
+                  metric: {name: '', type: ''},
+                  query: '',
+                  aggregateFields: [new VisualizeEquation(EQUATION_PREFIX).serialize()],
+                  aggregateSortBys: [],
+                  mode: 'samples',
+                }),
+              ],
+            },
+          },
+        },
+      }
+    );
+
+    act(() => {
+      result.current.sortable.onDragEnd({
+        active: {id: 'A'},
+        over: {id: 'ƒ1'},
+      } as DragEndEvent);
+    });
+
+    expect(result.current.metricQueries.map(metricQuery => metricQuery.label)).toEqual([
+      'A',
+      'ƒ1',
+    ]);
+  });
+
+  it('reorders duplicate queries by label ids', () => {
+    const duplicateQuery = JSON.stringify({
+      metric: {name: 'foo', type: 'counter'},
+      query: '',
+      aggregateFields: [new VisualizeFunction('sum(value,foo,counter,-)').serialize()],
+      aggregateSortBys: [],
+      mode: 'samples',
+    });
+
+    const {result} = renderHookWithProviders(useSortableMetricQueries, {
+      additionalWrapper: Wrapper,
+      initialRouterConfig: {
+        location: {
+          pathname: '/organizations/org-slug/explore/metrics/',
+          query: {
+            metric: [duplicateQuery, duplicateQuery],
+          },
+        },
+      },
+    });
+
+    expect(
+      result.current.sortableItems.map(({metricQuery}) => metricQuery.label)
+    ).toEqual(['A', 'B']);
+
+    act(() => {
+      result.current.onDragEnd({
+        active: {id: 'A'},
+        over: {id: 'B'},
+      } as DragEndEvent);
+    });
+
+    expect(
+      result.current.sortableItems.map(({metricQuery}) => metricQuery.label)
+    ).toEqual(['B', 'A']);
+  });
+});

static/app/views/explore/metrics/hooks/useSortableMetricQueries.tsx

@@ -0,0 +1,73 @@
+import {useCallback, useMemo, useState} from 'react';
+import type {DragEndEvent} from '@dnd-kit/core';
+import {KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
+import {arrayMove, sortableKeyboardCoordinates} from '@dnd-kit/sortable';
+
+import type {MetricQuery} from 'sentry/views/explore/metrics/metricQuery';
+import {
+  useMultiMetricsQueryParams,
+  useReorderMetricQueries,
+} from 'sentry/views/explore/metrics/multiMetricsQueryParams';
+
+interface UseSortableMetricQueriesOptions {
+  predicate?: (metricQuery: MetricQuery) => boolean;
+}
+
+export function useSortableMetricQueries({
+  predicate,
+}: UseSortableMetricQueriesOptions = {}) {
+  const metricQueries = useMultiMetricsQueryParams();
+  const reorderMetricQueries = useReorderMetricQueries();
+  const [isDragging, setIsDragging] = useState(false);
+
+  const sortableItems = useMemo(() => {
+    return metricQueries.flatMap((metricQuery, index) =>
+      predicate?.(metricQuery) === false
+        ? []
+        : [
+            {
+              id: metricQuery.label ?? String(index),
+              metricQuery,
+              index,
+            },
+          ]
+    );
+  }, [metricQueries, predicate]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const onDragStart = useCallback(() => {
+    setIsDragging(true);
+  }, []);
+
+  const onDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      setIsDragging(false);
+      const {active, over} = event;
+      if (active.id !== over?.id) {
+        const oldIndex = sortableItems.find(({id}) => id === active.id)?.index;
+        const newIndex = sortableItems.find(({id}) => id === over?.id)?.index;
+
+        if (oldIndex === undefined || newIndex === undefined) return;
+
+        reorderMetricQueries(
+          arrayMove([...metricQueries], oldIndex, newIndex),
+          oldIndex,
+          newIndex
+        );
+      }
+    },
+    [sortableItems, metricQueries, reorderMetricQueries]
+  );
+
+  const onDragCancel = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  return {sortableItems, sensors, onDragStart, onDragEnd, onDragCancel, isDragging};
+}

static/app/views/explore/metrics/hooks/useStableLabels.tsx

@@ -95,6 +95,25 @@ export function useStableLabels(queries: BaseMetricQuery[]) {
       remove(position: number) {
         labelsRef.current = labelsRef.current.filter((_, j) => j !== position);
       },
+      move(from: number, to: number) {
+        if (
+          from === to ||
+          from < 0 ||
+          to < 0 ||
+          from >= labelsRef.current.length ||
+          to >= labelsRef.current.length
+        ) {
+          return;
+        }
+
+        const next = [...labelsRef.current];
+        const [label] = next.splice(from, 1);
+        if (!label) {
+          return;
+        }
+        next.splice(to, 0, label);
+        labelsRef.current = next;
+      },
     }),
     []
   );

static/app/views/explore/metrics/metricInfoTabs/index.tsx

@@ -52,16 +52,7 @@ export function MetricInfoTabs({
     >
       {orientation === 'right' || visualize.visible ? (
         <Flex direction="row" justify="between" align="center" paddingRight="xl">
-          <TabListWrapper orientation={orientation}>
-            <TabList variant="floating">
-              <TabList.Item key={Mode.SAMPLES} disabled={contentsHidden}>
-                {t('Samples')}
-              </TabList.Item>
-              <TabList.Item key={Mode.AGGREGATE} disabled={contentsHidden}>
-                {t('Aggregates')}
-              </TabList.Item>
-            </TabList>
-          </TabListWrapper>
+          <MetricInfoTabList orientation={orientation} contentsHidden={contentsHidden} />
           {additionalActions}
         </Flex>
       ) : null}
@@ -86,3 +77,24 @@ export function MetricInfoTabs({
     </TabStateProvider>
   );
 }
+
+function MetricInfoTabList({
+  orientation,
+  contentsHidden,
+}: {
+  orientation: TableOrientation;
+  contentsHidden?: boolean;
+}) {
+  return (
+    <TabListWrapper orientation={orientation}>
+      <TabList variant="floating">
+        <TabList.Item key={Mode.SAMPLES} disabled={contentsHidden}>
+          {t('Samples')}
+        </TabList.Item>
+        <TabList.Item key={Mode.AGGREGATE} disabled={contentsHidden}>
+          {t('Aggregates')}
+        </TabList.Item>
+      </TabList>
+    </TabListWrapper>
+  );
+}