feat(crons): Add sort selector to bulk edit modal (#65676)

Adds the sort selector to the bulk edit modal (similar to the one on the
listing page)

<img width="793" alt="image"
src="https://github.com/getsentry/sentry/assets/9372512/2ac1ec76-2e00-429d-bbbc-0b1d402c8805">

static/app/components/modals/bulkEditMonitorsModal.tsx

@@ -19,6 +19,11 @@ import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryCl
 import useApi from 'sentry/utils/useApi';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {
+  MonitorSortOption,
+  MonitorSortOrder,
+  SortSelector,
+} from 'sentry/views/monitors/components/overviewTimeline/sortSelector';
 import type {Monitor} from 'sentry/views/monitors/types';
 import {makeMonitorListQueryKey, scheduleAsText} from 'sentry/views/monitors/utils';
 
@@ -35,10 +40,17 @@ export function BulkEditMonitorsModal({Header, Body, Footer, closeModal}: Props)
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [cursor, setCursor] = useState<string | undefined>();
+  const [sortSelection, setSortSelection] = useState<{
+    order: MonitorSortOrder;
+    sort: MonitorSortOption;
+  }>({sort: MonitorSortOption.STATUS, order: MonitorSortOrder.ASCENDING});
+
   const queryKey = makeMonitorListQueryKey(organization, {
     ...location.query,
     query: searchQuery,
     cursor,
+    sort: sortSelection.sort,
+    asc: sortSelection.order,
   });
 
   const [selectedMonitors, setSelectedMonitors] = useState<Monitor[]>([]);
@@ -146,6 +158,14 @@ export function BulkEditMonitorsModal({Header, Body, Footer, closeModal}: Props)
             query={searchQuery}
             onSearch={handleSearch}
           />
+          <SortSelector
+            size="sm"
+            onChangeOrder={({value: order}) =>
+              setSortSelection({...sortSelection, order})
+            }
+            onChangeSort={({value: sort}) => setSortSelection({...sortSelection, sort})}
+            {...sortSelection}
+          />
         </Actions>
         <StyledPanelTable headers={headers} stickyHeaders>
           {isLoading || !monitorList
@@ -191,7 +211,8 @@ export const modalCss = css`
 
 const Actions = styled('div')`
   display: grid;
-  grid-template-columns: 1fr max-content;
+  grid-template-columns: 1fr max-content max-content;
+  gap: ${space(1)};
   margin-bottom: ${space(2)};
 `;
 

static/app/views/monitors/components/overviewTimeline/sortSelector.tsx

@@ -1,4 +1,4 @@
-import {Button} from 'sentry/components/button';
+import {Button, type ButtonProps} from 'sentry/components/button';
 import {CompositeSelect} from 'sentry/components/compactSelect/composite';
 import type {SelectOption} from 'sentry/components/compactSelect/types';
 import {IconSort} from 'sentry/icons';
@@ -31,10 +31,11 @@ interface Props {
   onChangeOrder?: (order: SelectOption<MonitorSortOrder>) => void;
   onChangeSort?: (sort: SelectOption<MonitorSortOption>) => void;
   order?: MonitorSortOrder;
+  size?: ButtonProps['size'];
   sort?: MonitorSortOption;
 }
 
-export function SortSelector({onChangeOrder, onChangeSort, order, sort}: Props) {
+export function SortSelector({onChangeOrder, onChangeSort, order, sort, size}: Props) {
   const {replace, location} = useRouter();
 
   const selectedSort = sort ?? location.query?.sort ?? MonitorSortOption.STATUS;
@@ -53,7 +54,7 @@ export function SortSelector({onChangeOrder, onChangeSort, order, sort}: Props)
       trigger={triggerProps => (
         <Button
           {...triggerProps}
-          size="xs"
+          size={size ?? 'xs'}
           aria-label={t('Sort Cron Monitors')}
           icon={<IconSort size="sm" />}
         >