streamline rendering into one component

ryan953 · ryan953 · commit e27bec5cb15b · 2026-02-20T17:22:04.000-08:00
diff --git a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx
@@ -16,7 +16,6 @@ import {IconAdd} from 'sentry/icons';
 import {IconSearch} from 'sentry/icons/iconSearch';
 import {t, tct} from 'sentry/locale';
 import type {RepositoryWithSettings} from 'sentry/types/integrations';
-import type {Sort} from 'sentry/utils/discover/fields';
 import {ListItemCheckboxProvider} from 'sentry/utils/list/useListItemCheckboxState';
 import {useInfiniteQuery, useQueryClient} from 'sentry/utils/queryClient';
 import parseAsSort from 'sentry/utils/url/parseAsSort';
@@ -115,166 +114,99 @@ export default function SeerRepoTable() {
     },
   });
 
-  if (isPending) {
-    return (
-      <RepoTable
-        mutateRepositorySettings={mutateRepositorySettings}
-        onSortClick={setSort}
-        isLoading={isPending || isFetchingNextPage}
-        isLoadingMore={false /* prevent redundant spinners */}
-        repositories={[]}
-        searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
-        sort={sort}
-      >
-        <SimpleTable.Empty>
-          <LoadingIndicator />
-        </SimpleTable.Empty>
-      </RepoTable>
-    );
-  }
-
-  if (isError) {
-    return (
-      <RepoTable
-        mutateRepositorySettings={mutateRepositorySettings}
-        onSortClick={setSort}
-        isLoading={isPending || isFetchingNextPage}
-        isLoadingMore={hasNextPage || isFetchingNextPage}
-        repositories={[]}
-        searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
-        sort={sort}
-      >
-        <SimpleTable.Empty>
-          <LoadingError />
-        </SimpleTable.Empty>
-      </RepoTable>
-    );
-  }
+  const hits = repositories?.length ?? 0;
+  const hasData = hits > 0;
 
   return (
     <ListItemCheckboxProvider
-      hits={repositories.length}
-      knownIds={repositories.map(repository => repository.id)}
+      hits={repositories?.length ?? 0}
+      knownIds={repositories?.map(repository => repository.id) ?? []}
       queryKey={queryOptions.queryKey}
     >
-      <RepoTable
-        mutateRepositorySettings={mutateRepositorySettings}
-        onSortClick={setSort}
-        isLoading={isPending || isFetchingNextPage}
-        isLoadingMore={hasNextPage || isFetchingNextPage}
-        repositories={repositories}
-        searchTerm={searchTerm}
-        setSearchTerm={setSearchTerm}
-        sort={sort}
-      >
-        {repositories.length === 0 ? (
-          <SimpleTable.Empty>
-            {searchTerm
-              ? tct('No repositories found matching [searchTerm]', {
-                  searchTerm: <code>{searchTerm}</code>,
-                })
-              : t('No repositories found')}
-          </SimpleTable.Empty>
-        ) : (
-          repositories.map(repository => (
-            <SeerRepoTableRow
-              key={repository.id}
-              mutateRepositorySettings={mutateRepositorySettings}
-              mutationData={mutationData}
-              repository={repository}
+      <Stack gap="lg">
+        <Grid
+          minWidth="0"
+          gap="md"
+          columns={hasData ? '1fr max-content' : '1fr max-content max-content'}
+        >
+          <InputGroup>
+            <InputGroup.LeadingItems disablePointerEvents>
+              <IconSearch />
+            </InputGroup.LeadingItems>
+            <InputGroup.Input
+              size="md"
+              disabled={!hasData}
+              placeholder={t('Search')}
+              value={searchTerm ?? ''}
+              onChange={e =>
+                setSearchTerm(e.target.value, {limitUrlUpdates: debounce(125)})
+              }
             />
-          ))
-        )}
-      </RepoTable>
-    </ListItemCheckboxProvider>
-  );
-}
-
-function RepoTable({
-  children,
-  isLoading,
-  isLoadingMore,
-  mutateRepositorySettings,
-  onSortClick,
-  repositories,
-  searchTerm,
-  setSearchTerm,
-  sort,
-}: {
-  children: React.ReactNode;
-  isLoading: boolean;
-  isLoadingMore: boolean;
-  mutateRepositorySettings: ReturnType<typeof useBulkUpdateRepositorySettings>['mutate'];
-  onSortClick: (sort: Sort) => void;
-  repositories: RepositoryWithSettings[];
-  searchTerm: string;
-  setSearchTerm: ReturnType<typeof useQueryState<string>>[1];
-  sort: Sort;
-}) {
-  const organization = useOrganization();
-  const hasData = repositories.length > 0;
-  return (
-    <Stack gap="lg">
-      <Grid
-        minWidth="0"
-        gap="md"
-        columns={hasData ? '1fr max-content' : '1fr max-content max-content'}
-      >
-        <InputGroup>
-          <InputGroup.LeadingItems disablePointerEvents>
-            <IconSearch />
-          </InputGroup.LeadingItems>
-          <InputGroup.Input
-            size="md"
-            disabled={!hasData}
-            placeholder={t('Search')}
-            value={searchTerm ?? ''}
-            onChange={e =>
-              setSearchTerm(e.target.value, {limitUrlUpdates: debounce(125)})
-            }
+          </InputGroup>
+
+          {hits > 0 ? null : <LoadingIndicator mini />}
+
+          <LinkButton
+            priority="primary"
+            icon={<IconAdd />}
+            to={{
+              pathname: `/settings/${organization.slug}/integrations/`,
+              query: {
+                category: 'source code management',
+              },
+            }}
+          >
+            {t('Add Repository')}
+          </LinkButton>
+        </Grid>
+        <SimpleTableWithColumns>
+          <SeerRepoTableHeader
+            mutateRepositorySettings={mutateRepositorySettings}
+            onSortClick={setSort}
+            disabled={isPending || isFetchingNextPage}
+            hits={hits}
+            sort={sort}
           />
-        </InputGroup>
-
-        {hasData ? null : <LoadingIndicator mini />}
-
-        <LinkButton
-          priority="primary"
-          icon={<IconAdd />}
-          to={{
-            pathname: `/settings/${organization.slug}/integrations/`,
-            query: {
-              category: 'source code management',
-            },
-          }}
-        >
-          {t('Add Repository')}
-        </LinkButton>
-      </Grid>
-
-      <SimpleTableWithColumns>
-        <SeerRepoTableHeader
-          mutateRepositorySettings={mutateRepositorySettings}
-          onSortClick={onSortClick}
-          disabled={isLoading}
-          repositories={repositories}
-          sort={sort}
-        />
-        {children}
-        {isLoadingMore ? (
-          <SimpleTable.Row key="loading-row">
-            <SimpleTable.RowCell
-              align="center"
-              justify="center"
-              style={{gridColumn: '1 / -1'}}
-            >
-              <LoadingIndicator mini />
-            </SimpleTable.RowCell>
-          </SimpleTable.Row>
-        ) : null}
-      </SimpleTableWithColumns>
-    </Stack>
+          {isPending ? (
+            <SimpleTable.Empty>
+              <LoadingIndicator />
+            </SimpleTable.Empty>
+          ) : isError ? (
+            <SimpleTable.Empty>
+              <LoadingError />
+            </SimpleTable.Empty>
+          ) : repositories.length === 0 ? (
+            <SimpleTable.Empty>
+              {searchTerm
+                ? tct('No repositories found matching [searchTerm]', {
+                    searchTerm: <code>{searchTerm}</code>,
+                  })
+                : t('No repositories found')}
+            </SimpleTable.Empty>
+          ) : (
+            repositories.map(repository => (
+              <SeerRepoTableRow
+                key={repository.id}
+                mutateRepositorySettings={mutateRepositorySettings}
+                mutationData={mutationData}
+                repository={repository}
+              />
+            ))
+          )}
+          {hasNextPage || isFetchingNextPage ? (
+            <SimpleTable.Row key="loading-row">
+              <SimpleTable.RowCell
+                align="center"
+                justify="center"
+                style={{gridColumn: '1 / -1'}}
+              >
+                <LoadingIndicator mini />
+              </SimpleTable.RowCell>
+            </SimpleTable.Row>
+          ) : null}
+        </SimpleTableWithColumns>
+      </Stack>
+    </ListItemCheckboxProvider>
   );
 }
 
diff --git a/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx b/static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx
@@ -10,7 +10,6 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t, tct, tn} from 'sentry/locale';
-import type {RepositoryWithSettings} from 'sentry/types/integrations';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {useListItemCheckboxContext} from 'sentry/utils/list/useListItemCheckboxState';
 import {parseQueryKey} from 'sentry/utils/queryClient';
@@ -20,9 +19,9 @@ import type {useBulkUpdateRepositorySettings} from 'getsentry/views/seerAutomati
 
 interface Props {
   disabled: boolean;
+  hits: number;
   mutateRepositorySettings: ReturnType<typeof useBulkUpdateRepositorySettings>['mutate'];
   onSortClick: (key: Sort) => void;
-  repositories: RepositoryWithSettings[];
   sort: Sort;
 }
 
@@ -50,19 +49,25 @@ export default function SeerRepoTableHeader({
   disabled,
   mutateRepositorySettings,
   onSortClick,
-  repositories,
+  hits,
   sort,
 }: Props) {
   const canWrite = useCanWriteSettings();
   const listItemCheckboxState = useListItemCheckboxContext();
-  const {countSelected, isAllSelected, isAnySelected, queryKey, selectAll, selectedIds} =
-    listItemCheckboxState;
+  const {
+    countSelected,
+    isAllSelected,
+    isAnySelected,
+    queryKey,
+    selectAll,
+    selectedIds,
+    knownIds,
+  } = listItemCheckboxState;
   const queryOptions = queryKey ? parseQueryKey(queryKey).options : undefined;
   const queryString = queryOptions?.query?.query;
 
   const handleBulkCodeReview = (enabledCodeReview: boolean) => {
-    const repositoryIds =
-      selectedIds === 'all' ? repositories.map(repo => repo.id) : selectedIds;
+    const repositoryIds = selectedIds === 'all' ? knownIds : selectedIds;
     mutateRepositorySettings(
       {
         enabledCodeReview,
@@ -96,9 +101,9 @@ export default function SeerRepoTableHeader({
       <TableHeader>
         <SimpleTable.HeaderCell>
           <SelectAllCheckbox
-            listItemCheckboxState={listItemCheckboxState}
-            repositories={repositories}
             disabled={disabled}
+            hits={hits}
+            listItemCheckboxState={listItemCheckboxState}
           />
         </SimpleTable.HeaderCell>
         {COLUMNS.map(({title, key, sortKey}) => (
@@ -129,9 +134,9 @@ export default function SeerRepoTableHeader({
         <TableHeader>
           <TableCellFirst>
             <SelectAllCheckbox
-              listItemCheckboxState={listItemCheckboxState}
-              repositories={repositories}
               disabled={disabled}
+              hits={hits}
+              listItemCheckboxState={listItemCheckboxState}
             />
           </TableCellFirst>
           <TableCellsRemainingContent align="center" gap="md">
@@ -181,8 +186,8 @@ export default function SeerRepoTableHeader({
                     count: countSelected,
                     queryString: <var>{queryString}</var>,
                   })
-                : countSelected > repositories.length
-                  ? t('Selected all %s+ repositories.', repositories.length)
+                : countSelected > hits
+                  ? t('Selected all %s+ repositories.', hits)
                   : tn(
                       'Selected %s repository.',
                       'Selected all %s repositories.',
@@ -198,20 +203,20 @@ export default function SeerRepoTableHeader({
 
 function SelectAllCheckbox({
   listItemCheckboxState: {deselectAll, isAllSelected, selectedIds, selectAll},
-  repositories,
+  hits,
   disabled,
 }: {
   disabled: boolean;
+  hits: number;
   listItemCheckboxState: ReturnType<typeof useListItemCheckboxContext>;
-  repositories: RepositoryWithSettings[];
 }) {
   return (
     <Checkbox
       id="repository-table-select-all"
       checked={isAllSelected}
-      disabled={repositories.length === 0 || disabled}
+      disabled={hits === 0 || disabled}
       onChange={() => {
-        if (isAllSelected === true || selectedIds.length === repositories.length) {
+        if (isAllSelected === true || selectedIds.length === hits) {
           deselectAll();
         } else {
           selectAll();
