feat(seer): Implement sorting for the remaining columns on the Code Review settings table (#112973)

I also updated the button on the top-right to link over to the
repositories page, so repos and provider can be managed directly,
instead of in here.

Author: ryan953

static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx

@@ -1,16 +1,14 @@
 import {Fragment, useCallback, useMemo, useRef, useState} from 'react';
-import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {useVirtualizer} from '@tanstack/react-virtual';
 import uniqBy from 'lodash/uniqBy';
 import {debounce, parseAsString, useQueryState} from 'nuqs';
 
-import {Button} from '@sentry/scraps/button';
+import {LinkButton} from '@sentry/scraps/button';
 import {InputGroup} from '@sentry/scraps/input';
 import {Flex, Grid} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
-import {openModal} from 'sentry/actionCreators/modal';
 import {
   isSeerSupportedProvider,
   useSeerSupportedProviderIds,
@@ -20,7 +18,7 @@ import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {Panel} from 'sentry/components/panels/panel';
 import {useBulkUpdateRepositorySettings} from 'sentry/components/repositories/useBulkUpdateRepositorySettings';
 import {getRepositoryWithSettingsQueryKey} from 'sentry/components/repositories/useRepositoryWithSettings';
-import {IconAdd} from 'sentry/icons';
+import {IconOpen} from 'sentry/icons/iconOpen';
 import {IconSearch} from 'sentry/icons/iconSearch';
 import {t, tct} from 'sentry/locale';
 import type {RepositoryWithSettings} from 'sentry/types/integrations';
@@ -38,7 +36,7 @@ import {useOrganization} from 'sentry/utils/useOrganization';
 import {SeerRepoTableHeader} from 'getsentry/views/seerAutomation/components/repoTable/seerRepoTableHeader';
 import {SeerRepoTableRow} from 'getsentry/views/seerAutomation/components/repoTable/seerRepoTableRow';
 
-const GRID_COLUMNS = '40px 1fr 118px 150px';
+const GRID_COLUMNS = '40px 1fr 138px 150px';
 const SELECTED_ROW_HEIGHT = 44;
 const BOTTOM_PADDING = 24; // px gap between table bottom and viewport edge
 const estimateSize = () => 68;
@@ -76,27 +74,54 @@ export function SeerRepoTable() {
             repository.externalId &&
             isSeerSupportedProvider(repository.provider, supportedProviderIds)
         )
-        .sort((a, b) => {
+        .sort((a, b): number => {
           if (sort.field === 'name') {
             return sort.kind === 'asc'
               ? a.name.localeCompare(b.name)
               : b.name.localeCompare(a.name);
           }
-          // TODO: if we can bulk-fetch all the preferences, then it'll be easier to sort by fixes, pr creation, and repos
-          // if (sort.field === 'fixes') {
-          //   return a.slug.localeCompare(b.slug);
-          // }
-          // if (sort.field === 'pr_creation') {
-          //   return a.platform.localeCompare(b.platform);
-          // }
-          // if (sort.field === 'repos') {
-          //   return a.status.localeCompare(b.status);
-          // }
+
+          if (sort.field === 'enabled') {
+            if (
+              (a.settings?.enabledCodeReview ?? false) ===
+              (b.settings?.enabledCodeReview ?? false)
+            ) {
+              return sort.kind === 'asc'
+                ? a.name.localeCompare(b.name)
+                : b.name.localeCompare(a.name);
+            }
+            return sort.kind === 'asc'
+              ? a.settings?.enabledCodeReview
+                ? -1
+                : 1
+              : b.settings?.enabledCodeReview
+                ? -1
+                : 1;
+          }
+
+          if (sort.field === 'triggers') {
+            if (
+              a.settings?.codeReviewTriggers?.length ===
+              b.settings?.codeReviewTriggers?.length
+            ) {
+              return sort.kind === 'asc'
+                ? (a.settings?.codeReviewTriggers[0]?.localeCompare(
+                    b.settings?.codeReviewTriggers[0] ?? ''
+                  ) ?? 0)
+                : (b.settings?.codeReviewTriggers[0]?.localeCompare(
+                    a.settings?.codeReviewTriggers[0] ?? ''
+                  ) ?? 0);
+            }
+            return sort.kind === 'asc'
+              ? (a.settings?.codeReviewTriggers?.length ?? 0) -
+                  (b.settings?.codeReviewTriggers?.length ?? 0)
+              : (b.settings?.codeReviewTriggers?.length ?? 0) -
+                  (a.settings?.codeReviewTriggers?.length ?? 0);
+          }
           return 0;
         }),
   });
 
-  // Auto-fetch each page, one at a time
   useFetchAllPages({result});
 
   const {
@@ -163,28 +188,14 @@ export function SeerRepoTable() {
 
         {isFetchingNextPage ? <LoadingIndicator mini /> : null}
 
-        <Button
+        <LinkButton
           priority="primary"
-          icon={<IconAdd />}
-          onClick={async () => {
-            const {ScmRepoTreeModal} =
-              await import('sentry/components/repositories/scmRepoTreeModal');
-
-            openModal(
-              deps => <ScmRepoTreeModal {...deps} title={t('Add Repository')} />,
-              {
-                modalCss: css`
-                  width: 700px;
-                `,
-                onClose: () => {
-                  queryClient.invalidateQueries({queryKey: queryOptions.queryKey});
-                },
-              }
-            );
-          }}
+          size="sm"
+          to={`/settings/${organization.slug}/repos/`}
+          icon={<IconOpen />}
         >
-          {t('Add Repository')}
-        </Button>
+          {t('Manage Repositories')}
+        </LinkButton>
       </Grid>
       <ListItemCheckboxProvider
         hits={repositories?.length ?? 0}

static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx

@@ -28,7 +28,7 @@ interface Props {
 
 const COLUMNS = [
   {title: t('Name'), key: 'name', sortKey: 'name'},
-  {title: t('Code Review'), key: 'code_review'},
+  {title: t('Code Review'), key: 'code_review', sortKey: 'enabled'},
   {
     title: (
       <Flex gap="sm" align="center">
@@ -43,6 +43,7 @@ const COLUMNS = [
       </Flex>
     ),
     key: 'trigger',
+    sortKey: 'triggers',
   },
 ];