ref(nuqs): Use nuqs in monitor list page (#104524)

~Taking over @malwilley's PR that was marked as stale. Seems like there
might be some issues with Nuqs, so I'm taking a quick look~

It appears as if we got a bit lucky with this changeset, and the file
that was failing our tests has since been deleted.

---------

Co-authored-by: Malachi Willey <malwilley@gmail.com>

Author: JonasBa

static/app/utils/queryString.tsx

@@ -1,3 +1,4 @@
+import {createParser} from 'nuqs';
 import * as qs from 'query-string';
 
 import {escapeDoubleQuotes} from 'sentry/utils';
@@ -166,6 +167,16 @@ export function decodeBoolean(
   return fallback;
 }
 
+export const parseAsSort = createParser({
+  parse: value => {
+    const sorts = decodeSorts(value);
+    return sorts[0] ? sorts[0] : null;
+  },
+  serialize: (value: Sort) => {
+    return value.kind === 'desc' ? `-${value.field}` : value.field;
+  },
+});
+
 const queryString = {
   decodeBoolean,
   decodeInteger,

static/app/views/detectors/components/detectorListTable/index.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import {css, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
+import {useQueryState} from 'nuqs';
 
 import {
   GridLineLabels,
@@ -21,17 +22,15 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
 import {defined} from 'sentry/utils';
-import type {Sort} from 'sentry/utils/discover/fields';
 import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
 import {useDimensions} from 'sentry/utils/useDimensions';
-import {useLocation} from 'sentry/utils/useLocation';
-import {useNavigate} from 'sentry/utils/useNavigate';
 import {DetectorsTableActions} from 'sentry/views/detectors/components/detectorListTable/actions';
 import {
   DetectorListRow,
   DetectorListRowSkeleton,
 } from 'sentry/views/detectors/components/detectorListTable/detectorListRow';
 import {DETECTOR_LIST_PAGE_LIMIT} from 'sentry/views/detectors/list/common/constants';
+import {useDetectorListSort} from 'sentry/views/detectors/list/common/useDetectorListSort';
 import {
   useMonitorViewContext,
   type MonitorListAdditionalColumn,
@@ -47,7 +46,6 @@ type DetectorListTableProps = {
   isPending: boolean;
   isSuccess: boolean;
   queryCount: string;
-  sort: Sort | undefined;
 };
 
 function LoadingSkeletons() {
@@ -59,27 +57,22 @@ function LoadingSkeletons() {
 export function HeaderCell({
   children,
   sortKey,
-  sort,
   ...props
 }: {
-  sort: Sort | undefined;
   children?: React.ReactNode;
   divider?: boolean;
   sortKey?: string;
 } & Omit<ComponentProps<typeof SimpleTable.HeaderCell>, 'sort'>) {
-  const location = useLocation();
-  const navigate = useNavigate();
+  const [sort, setSort] = useDetectorListSort();
+  const [, setCursor] = useQueryState('cursor');
   const isSortedByField = sort?.field === sortKey;
   const handleSort = () => {
     if (!sortKey) {
       return;
     }
-    const newSort =
-      sort && isSortedByField ? `${sort.kind === 'asc' ? '-' : ''}${sortKey}` : sortKey;
-    navigate({
-      pathname: location.pathname,
-      query: {...location.query, sort: newSort, cursor: undefined},
-    });
+    const sortDirection = sort && isSortedByField && sort.kind === 'asc' ? 'desc' : 'asc';
+    setSort({field: sortKey, kind: sortDirection});
+    setCursor(null);
   };
 
   return (
@@ -98,7 +91,6 @@ function DetectorListTable({
   isPending,
   isError,
   isSuccess,
-  sort,
   queryCount,
   allResultsVisible,
 }: DetectorListTableProps) {
@@ -160,7 +152,7 @@ function DetectorListTable({
       >
         {selected.size === 0 ? (
           <SimpleTable.Header>
-            <HeaderCell sortKey="name" sort={sort}>
+            <HeaderCell sortKey="name">
               <Flex gap="md" align="center">
                 <SelectAllHeaderCheckbox
                   checked={pageSelected || (anySelected ? 'indeterminate' : false)}
@@ -169,25 +161,19 @@ function DetectorListTable({
                 <span>{t('Name')}</span>
               </Flex>
             </HeaderCell>
-            <HeaderCell data-column-name="type" divider sortKey="type" sort={sort}>
+            <HeaderCell data-column-name="type" divider sortKey="type">
               {t('Type')}
             </HeaderCell>
-            <HeaderCell
-              data-column-name="last-issue"
-              divider
-              sortKey="latestGroup"
-              sort={sort}
-            >
+            <HeaderCell data-column-name="last-issue" divider sortKey="latestGroup">
               {t('Last Issue')}
             </HeaderCell>
-            <HeaderCell data-column-name="assignee" divider sort={sort}>
+            <HeaderCell data-column-name="assignee" divider>
               {t('Assignee')}
             </HeaderCell>
             <HeaderCell
               data-column-name="connected-automations"
               divider
               sortKey="connectedWorkflows"
-              sort={sort}
             >
               {t('Alerts')}
             </HeaderCell>

static/app/views/detectors/list/common/detectorListContent.tsx

@@ -7,7 +7,6 @@ import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import DetectorListTable from 'sentry/views/detectors/components/detectorListTable';
-import {useDetectorListSort} from 'sentry/views/detectors/list/common/useDetectorListSort';
 
 interface DetectorListContentProps {
   data: Detector[] | undefined;
@@ -28,7 +27,6 @@ export function DetectorListContent({
 }: DetectorListContentProps) {
   const location = useLocation();
   const navigate = useNavigate();
-  const sort = useDetectorListSort();
 
   const hits = getResponseHeader?.('X-Hits') || '';
   const hitsInt = hits ? parseInt(hits, 10) || 0 : 0;
@@ -61,7 +59,6 @@ export function DetectorListContent({
             isPending={isLoading}
             isError={isError}
             isSuccess={isSuccess}
-            sort={sort}
             queryCount={hitsInt > maxHitsInt ? `${maxHits}+` : hits}
             allResultsVisible={allResultsVisible()}
           />

static/app/views/detectors/list/common/useDetectorListQuery.tsx

@@ -19,7 +19,7 @@ export function useDetectorListQuery({
   const {selection, isReady} = usePageFilters();
   const cursor = decodeScalar(location.query.cursor);
   const query = decodeScalar(location.query.query);
-  const sort = useDetectorListSort();
+  const [sort] = useDetectorListSort();
 
   // Build the query with detector type and assignee filters if provided
   // Map DetectorType values to query values (e.g., 'monitor_check_in_failure' -> 'cron')

static/app/views/detectors/list/common/useDetectorListSort.tsx

@@ -1,16 +1,12 @@
-import type {Sort} from 'sentry/utils/discover/fields';
-import {decodeSorts} from 'sentry/utils/queryString';
-import {useLocation} from 'sentry/utils/useLocation';
+import {useQueryState} from 'nuqs';
 
-const DEFAULT_SORT: Sort = {kind: 'desc', field: 'latestGroup'};
+import {parseAsSort} from 'sentry/utils/queryString';
 
-export function useDetectorListSort(): Sort {
-  const location = useLocation();
-  const sort = decodeSorts(location.query.sort)[0];
-
-  if (!sort) {
-    return DEFAULT_SORT;
-  }
-
-  return sort;
+export function useDetectorListSort() {
+  return useQueryState(
+    'sort',
+    parseAsSort.withDefault({kind: 'desc', field: 'latestGroup'}).withOptions({
+      history: 'push',
+    })
+  );
 }

static/app/views/detectors/list/cron.tsx

@@ -100,9 +100,7 @@ const ADDITIONAL_COLUMNS: MonitorListAdditionalColumn[] = [
   {
     id: 'environment-label',
     columnWidth: '120px',
-    renderHeaderCell: () => (
-      <HeaderCell data-column-name="environment-label" sort={undefined} />
-    ),
+    renderHeaderCell: () => <HeaderCell data-column-name="environment-label" />,
     renderCell: (detector: Detector) => {
       if (detector.type !== 'monitor_check_in_failure') {
         return null;