ref(explore): Use sort type from discover (#76220)

Discover already defines a `Sort` type, so let's try to reuse that
instead of redefining our own.

Author: Zylphrex

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

@@ -0,0 +1,157 @@
+import {createMemoryHistory, Route, Router, RouterContext} from 'react-router';
+
+import {act, render} from 'sentry-test/reactTestingLibrary';
+
+import {useSorts} from 'sentry/views/explore/hooks/useSorts';
+import {RouteContext} from 'sentry/views/routeContext';
+
+describe('useSorts', function () {
+  it('allows changing sorts', function () {
+    let sorts, setSorts;
+
+    const fields = ['id', 'timestamp'];
+
+    function TestPage() {
+      [sorts, setSorts] = useSorts({fields});
+      return null;
+    }
+
+    const memoryHistory = createMemoryHistory();
+
+    render(
+      <Router
+        history={memoryHistory}
+        render={props => {
+          return (
+            <RouteContext.Provider value={props}>
+              <RouterContext {...props} />
+            </RouteContext.Provider>
+          );
+        }}
+      >
+        <Route path="/" component={TestPage} />
+      </Router>
+    );
+
+    expect(sorts).toEqual([
+      {
+        kind: 'desc',
+        field: 'timestamp',
+      },
+    ]); // default
+
+    act(() =>
+      setSorts([
+        {
+          kind: 'asc',
+          field: 'timestamp',
+        },
+      ])
+    );
+    expect(sorts).toEqual([
+      {
+        kind: 'asc',
+        field: 'timestamp',
+      },
+    ]);
+
+    act(() =>
+      setSorts([
+        {
+          kind: 'desc',
+          field: 'id',
+        },
+      ])
+    );
+    expect(sorts).toEqual([
+      {
+        kind: 'desc',
+        field: 'id',
+      },
+    ]);
+  });
+
+  it('falls back to timestamp desc if possible', function () {
+    let sorts, setSorts;
+
+    const fields = ['id', 'timestamp'];
+
+    function TestPage() {
+      [sorts, setSorts] = useSorts({fields});
+      return null;
+    }
+
+    const memoryHistory = createMemoryHistory();
+
+    render(
+      <Router
+        history={memoryHistory}
+        render={props => {
+          return (
+            <RouteContext.Provider value={props}>
+              <RouterContext {...props} />
+            </RouteContext.Provider>
+          );
+        }}
+      >
+        <Route path="/" component={TestPage} />
+      </Router>
+    );
+    act(() =>
+      setSorts([
+        {
+          kind: 'asc',
+          field: 'foo',
+        },
+      ])
+    );
+    expect(sorts).toEqual([
+      {
+        kind: 'desc',
+        field: 'timestamp',
+      },
+    ]);
+  });
+
+  it('falls back to first column desc if timestamp is not available', function () {
+    let sorts, setSorts;
+
+    const fields = ['id'];
+
+    function TestPage() {
+      [sorts, setSorts] = useSorts({fields});
+      return null;
+    }
+
+    const memoryHistory = createMemoryHistory();
+
+    render(
+      <Router
+        history={memoryHistory}
+        render={props => {
+          return (
+            <RouteContext.Provider value={props}>
+              <RouterContext {...props} />
+            </RouteContext.Provider>
+          );
+        }}
+      >
+        <Route path="/" component={TestPage} />
+      </Router>
+    );
+    act(() =>
+      setSorts([
+        {
+          kind: 'asc',
+          field: 'foo',
+        },
+      ])
+    );
+    expect(sorts).toEqual([
+      {
+        kind: 'desc',
+        field: 'id',
+      },
+    ]);
+  });
+});

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

@@ -0,0 +1,79 @@
+import {useCallback, useMemo} from 'react';
+import type {Location} from 'history';
+
+import type {Sort} from 'sentry/utils/discover/fields';
+import {decodeSorts} from 'sentry/utils/queryString';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
+
+import type {Field} from './useSampleFields';
+
+interface Options {
+  fields: Field[];
+}
+
+export function useSorts(props): [Sort[], (newSorts: Sort[]) => void] {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const options = {location, navigate, ...props};
+
+  return useSortsImpl(options);
+}
+
+interface ImplOptions extends Options {
+  location: Location;
+  navigate: ReturnType<typeof useNavigate>;
+}
+
+function useSortsImpl({
+  fields,
+  location,
+  navigate,
+}: ImplOptions): [Sort[], (newSorts: Sort[]) => void] {
+  const sorts = useMemo(() => {
+    const rawSorts = decodeSorts(location.query.sort);
+
+    // Try to assign a default sort if possible
+    if (!rawSorts.length || !rawSorts.some(rawSort => fields.includes(rawSort.field))) {
+      if (fields.includes('timestamp')) {
+        return [
+          {
+            field: 'timestamp',
+            kind: 'desc' as const,
+          },
+        ];
+      }
+
+      if (fields.length) {
+        return [
+          {
+            field: fields[0],
+            kind: 'desc' as const,
+          },
+        ];
+      }
+
+      return [];
+    }
+
+    return rawSorts;
+  }, [fields, location.query.sort]);
+
+  const setSort = useCallback(
+    (newSorts: Sort[]) => {
+      const formatted = newSorts.map(newSort => {
+        return newSort.kind === 'desc' ? `-${newSort.field}` : newSort.field;
+      });
+      navigate({
+        ...location,
+        query: {
+          ...location.query,
+          sort: formatted,
+        },
+      });
+    },
+    [location, navigate]
+  );
+
+  return [sorts, setSort];
+}