fix repo bug

Author: suejung-sentry

static/app/views/prevent/preventAI/manageRepos.tsx

@@ -13,12 +13,10 @@ import {Heading, Text} from 'sentry/components/core/text';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {IconSettings} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
-import type {OrganizationIntegration} from 'sentry/types/integrations';
+import type {OrganizationIntegration, Repository} from 'sentry/types/integrations';
 import {useInfiniteRepositories} from 'sentry/views/prevent/preventAI/hooks/usePreventAIInfiniteRepositories';
 import ManageReposPanel from 'sentry/views/prevent/preventAI/manageReposPanel';
-import ManageReposToolbar, {
-  ALL_REPOS_VALUE,
-} from 'sentry/views/prevent/preventAI/manageReposToolbar';
+import ManageReposToolbar from 'sentry/views/prevent/preventAI/manageReposToolbar';
 
 import {FeatureOverview} from './onboarding';
 
@@ -29,7 +27,7 @@ function ManageReposPage({integratedOrgs}: {integratedOrgs: OrganizationIntegrat
   const [selectedOrgId, setSelectedOrgId] = useState<string>(
     () => integratedOrgs[0]?.id ?? ''
   );
-  const [selectedRepoId, setSelectedRepoId] = useState<string>(() => ALL_REPOS_VALUE);
+  const [selectedRepo, setSelectedRepo] = useState<Repository | null>(() => null);
 
   const queryResult = useInfiniteRepositories({
     integrationId: selectedOrgId,
@@ -46,34 +44,24 @@ function ManageReposPage({integratedOrgs}: {integratedOrgs: OrganizationIntegrat
     return found ?? integratedOrgs[0];
   }, [integratedOrgs, selectedOrgId]);
 
-  // If the selected repo is not present in the list of repos, use null (for "All Repos")
-  const selectedRepo = useMemo(() => {
-    if (selectedRepoId === ALL_REPOS_VALUE) {
-      return null;
-    }
-    const found = reposData.find(repo => repo.id === selectedRepoId);
-    return found ?? null;
-  }, [reposData, selectedRepoId]);
-
   // When the org changes, reset to "All Repos"
   const setSelectedOrgIdWithCascadeRepoId = useCallback((orgId: string) => {
     setSelectedOrgId(orgId);
-    setSelectedRepoId(ALL_REPOS_VALUE);
+    setSelectedRepo(null);
   }, []);
 
   const isOrgSelected = !!selectedOrg;
-  const isRepoSelected = selectedRepoId === ALL_REPOS_VALUE || !!selectedRepo;
+  const isRepoSelected = true; // Always true since null means "All Repos"
 
   return (
     <Flex direction="column" maxWidth="1000px" gap="xl">
       <Flex align="center" justify="between">
         <ManageReposToolbar
           integratedOrgs={integratedOrgs}
           selectedOrg={selectedOrgId}
-          selectedRepo={selectedRepoId}
-          selectedRepoData={selectedRepo}
+          selectedRepo={selectedRepo}
           onOrgChange={setSelectedOrgIdWithCascadeRepoId}
-          onRepoChange={setSelectedRepoId}
+          onRepoChange={setSelectedRepo}
         />
         <Flex style={{transform: 'translateY(-70px)'}}>
           <Tooltip
@@ -141,15 +129,15 @@ function ManageReposPage({integratedOrgs}: {integratedOrgs: OrganizationIntegrat
         />
       </Flex>
 
-      {selectedOrg && (selectedRepoId === ALL_REPOS_VALUE || selectedRepo) && (
+      {selectedOrg && (
         <ManageReposPanel
-          key={`${selectedOrgId || 'no-org'}-${selectedRepoId || 'no-repo'}`}
+          key={`${selectedOrgId || 'no-org'}-${selectedRepo?.id || 'all-repos'}`}
           collapsed={!isPanelOpen}
           onClose={() => setIsPanelOpen(false)}
           org={selectedOrg}
           repo={selectedRepo}
           allRepos={reposData}
-          isEditingOrgDefaults={selectedRepoId === ALL_REPOS_VALUE}
+          isEditingOrgDefaults={selectedRepo === null}
         />
       )}
     </Flex>

static/app/views/prevent/preventAI/manageReposToolbar.spec.tsx

@@ -107,8 +107,7 @@ describe('ManageReposToolbar', () => {
   const defaultProps = {
     integratedOrgs: mockIntegratedOrgs,
     selectedOrg: '1',
-    selectedRepo: '1',
-    selectedRepoData: mockRepositories[0] ?? null,
+    selectedRepo: mockRepositories[0] ?? null,
     onOrgChange: jest.fn(),
     onRepoChange: jest.fn(),
   };
@@ -213,7 +212,7 @@ describe('ManageReposToolbar', () => {
     const repoOption = screen.getByText('repo-2');
     await userEvent.click(repoOption);
 
-    expect(defaultProps.onRepoChange).toHaveBeenCalledWith('2');
+    expect(defaultProps.onRepoChange).toHaveBeenCalledWith(mockRepositories[1]);
   });
 
   it('shows only repos for the selected org', async () => {
@@ -232,8 +231,7 @@ describe('ManageReposToolbar', () => {
       <ManageReposToolbar
         {...defaultProps}
         selectedOrg="2"
-        selectedRepo="3"
-        selectedRepoData={mockOrg2Repositories[0] ?? null}
+        selectedRepo={mockOrg2Repositories[0] ?? null}
       />,
       {
         organization: OrganizationFixture({slug: 'org-slug'}),
@@ -273,7 +271,7 @@ describe('ManageReposToolbar', () => {
     expect(await screen.findByText('All Repos')).toBeInTheDocument();
   });
 
-  it('calls onRepoChange with "__$ALL_REPOS__" when "All Repos" is selected', async () => {
+  it('calls onRepoChange with null when "All Repos" is selected', async () => {
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/repos/',
       body: mockRepositories,
@@ -295,6 +293,6 @@ describe('ManageReposToolbar', () => {
     const allReposOption = await screen.findByText('All Repos');
     await userEvent.click(allReposOption);
 
-    expect(defaultProps.onRepoChange).toHaveBeenCalledWith('__$ALL_REPOS__');
+    expect(defaultProps.onRepoChange).toHaveBeenCalledWith(null);
   });
 });

static/app/views/prevent/preventAI/manageReposToolbar.tsx

@@ -19,14 +19,12 @@ function ManageReposToolbar({
   onRepoChange,
   selectedOrg,
   selectedRepo,
-  selectedRepoData,
 }: {
   integratedOrgs: OrganizationIntegration[];
   onOrgChange: (orgId: string) => void;
-  onRepoChange: (repoId: string) => void;
+  onRepoChange: (repo: Repository | null) => void;
   selectedOrg: string;
-  selectedRepo: string;
-  selectedRepoData: Repository | null;
+  selectedRepo: Repository | null;
 }) {
   const [searchValue, setSearchValue] = useState<string | undefined>();
   const debouncedSearch = useDebouncedValue(searchValue, 300);
@@ -119,19 +117,19 @@ function ManageReposToolbar({
       label: getRepoNameWithoutOrg(repo.name),
     }));
 
-    if (selectedRepoData && selectedRepo !== ALL_REPOS_VALUE) {
+    if (selectedRepo) {
       repoOptions = [
         {
-          value: selectedRepoData.id,
-          label: getRepoNameWithoutOrg(selectedRepoData.name),
+          value: selectedRepo.id,
+          label: getRepoNameWithoutOrg(selectedRepo.name),
         },
         ...repoOptions,
       ];
     }
 
     const dedupedRepoOptions = uniqBy(repoOptions, 'value');
     return [{value: ALL_REPOS_VALUE, label: t('All Repos')}, ...dedupedRepoOptions];
-  }, [filteredReposData, selectedRepo, selectedRepoData]);
+  }, [filteredReposData, selectedRepo]);
 
   const getRepoEmptyMessage = () => {
     if (isLoading) return t('Loading repositories...');
@@ -162,11 +160,19 @@ function ManageReposToolbar({
         />
 
         <CompactSelect
-          value={selectedRepo}
+          value={selectedRepo?.id ?? ALL_REPOS_VALUE}
           options={repositoryOptions}
           loading={isLoading}
           disabled={!selectedOrg || isLoading}
-          onChange={option => onRepoChange(option?.value ?? '')}
+          onChange={option => {
+            const repoId = option?.value;
+            if (repoId === ALL_REPOS_VALUE) {
+              onRepoChange(null);
+            } else {
+              const foundRepo = allReposData.find(repo => repo.id === repoId);
+              onRepoChange(foundRepo ?? null);
+            }
+          }}
           searchable
           disableSearchFilter
           onSearch={setSearchValue}
@@ -181,8 +187,9 @@ function ManageReposToolbar({
             icon: <IconRepository />,
             children: (
               <TriggerLabel>
-                {repositoryOptions.find(opt => opt.value === selectedRepo)?.label ||
-                  t('Select repository')}
+                {repositoryOptions.find(
+                  opt => opt.value === (selectedRepo?.id ?? ALL_REPOS_VALUE)
+                )?.label || t('Select repository')}
               </TriggerLabel>
             ),
           }}