fix(prevent): Hook up to prevent ai orgs api (#100947)

suejung-sentry · web-flow · commit cf503b7f9382 · 2025-10-07T15:40:57.000-07:00
diff --git a/static/app/views/prevent/preventAI/hooks/usePreventAIOrgRepos.spec.tsx b/static/app/views/prevent/preventAI/hooks/usePreventAIOrgRepos.spec.tsx
@@ -1,47 +1,92 @@
-import {renderHook} from 'sentry-test/reactTestingLibrary';
+import {OrganizationFixture} from 'sentry-fixture/organization';
+import {PreventAIConfigFixture} from 'sentry-fixture/prevent';
 
-import {usePreventAIOrgRepos} from './usePreventAIOrgRepos';
+import {renderHookWithProviders, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import {
+  usePreventAIOrgRepos,
+  type PreventAIOrgReposResponse,
+} from './usePreventAIOrgRepos';
 
 describe('usePreventAIOrgRepos', () => {
-  it('returns the mock orgRepos data', () => {
-    const {result} = renderHook(() => usePreventAIOrgRepos());
-    expect(result.current.data).toEqual({
-      orgRepos: [
-        {
-          id: '1',
-          name: 'org-1',
-          provider: 'github',
-          repos: [
-            {
-              id: '1',
-              name: 'repo-1',
-              fullName: 'org-1/repo-1',
-              url: 'https://github.com/org-1/repo-1',
-            },
-          ],
-        },
-        {
-          id: '2',
-          name: 'org-2',
-          provider: 'github',
-          repos: [
-            {
-              id: '2',
-              name: 'repo-2',
-              fullName: 'org-2/repo-2',
-              url: 'https://github.com/org-2/repo-2',
-            },
-            {
-              id: '3',
-              name: 'repo-3',
-              fullName: 'org-2/repo-3',
-              url: 'https://github.com/org-2/repo-3',
-            },
-          ],
-        },
-      ],
+  const mockOrg = OrganizationFixture({
+    preventAiConfigGithub: PreventAIConfigFixture(),
+  });
+
+  const mockResponse: PreventAIOrgReposResponse = {
+    orgRepos: [
+      {
+        id: '1',
+        name: 'repo1',
+        provider: 'github',
+        repos: [
+          {id: '1', name: 'repo1', fullName: 'repo1', url: 'https://github.com/repo1'},
+        ],
+      },
+      {
+        id: '2',
+        name: 'repo2',
+        provider: 'github',
+        repos: [
+          {id: '2', name: 'repo2', fullName: 'repo2', url: 'https://github.com/repo2'},
+        ],
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+  });
+
+  it('returns data on success', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${mockOrg.slug}/prevent/github/repos/`,
+      body: mockResponse,
     });
-    expect(result.current.isLoading).toBe(false);
+
+    const {result} = renderHookWithProviders(() => usePreventAIOrgRepos(), {
+      organization: mockOrg,
+    });
+
+    await waitFor(() => expect(result.current.data).toEqual(mockResponse));
     expect(result.current.isError).toBe(false);
+    expect(result.current.isPending).toBe(false);
+  });
+
+  it('returns error on failure', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${mockOrg.slug}/prevent/github/repos/`,
+      statusCode: 500,
+      body: {error: 'Internal Server Error'},
+    });
+
+    const {result} = renderHookWithProviders(() => usePreventAIOrgRepos(), {
+      organization: mockOrg,
+    });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+  });
+
+  it('refetches data', async () => {
+    MockApiClient.addMockResponse({
+      url: `/organizations/${mockOrg.slug}/prevent/github/repos/`,
+      body: mockResponse,
+    });
+
+    const {result} = renderHookWithProviders(() => usePreventAIOrgRepos(), {
+      organization: mockOrg,
+    });
+
+    await waitFor(() => expect(result.current.data).toEqual(mockResponse));
+
+    const newResponse = {orgRepos: [{id: '3', name: 'repo3'}]};
+    MockApiClient.addMockResponse({
+      url: `/organizations/${mockOrg.slug}/prevent/github/repos/`,
+      body: newResponse,
+    });
+
+    result.current.refetch();
+    await waitFor(() => expect(result.current.data?.orgRepos?.[0]?.name).toBe('repo3'));
+    expect(result.current.data).toEqual(newResponse);
   });
 });
diff --git a/static/app/views/prevent/preventAI/hooks/usePreventAIOrgRepos.tsx b/static/app/views/prevent/preventAI/hooks/usePreventAIOrgRepos.tsx
@@ -1,58 +1,33 @@
 import type {PreventAIOrg} from 'sentry/types/prevent';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
 
-interface PreventAIOrgReposResponse {
+export interface PreventAIOrgReposResponse {
   orgRepos: PreventAIOrg[];
 }
 
 interface PreventAIOrgsReposResult {
   data: PreventAIOrgReposResponse | undefined;
   isError: boolean;
-  isLoading: boolean;
+  isPending: boolean;
   refetch: () => void;
 }
 
 export function usePreventAIOrgRepos(): PreventAIOrgsReposResult {
-  // TODO: Hook up to real API - GET `/organizations/${organization.slug}/prevent-ai/${provider}/org-repos`
+  const organization = useOrganization();
+
+  const {data, isPending, isError, refetch} = useApiQuery<PreventAIOrgReposResponse>(
+    [`/organizations/${organization.slug}/prevent/github/repos/`],
+    {
+      staleTime: 0,
+      retry: false,
+    }
+  );
 
   return {
-    data: {
-      orgRepos: [
-        {
-          id: '1',
-          name: 'org-1',
-          provider: 'github',
-          repos: [
-            {
-              id: '1',
-              name: 'repo-1',
-              fullName: 'org-1/repo-1',
-              url: 'https://github.com/org-1/repo-1',
-            },
-          ],
-        },
-        {
-          id: '2',
-          name: 'org-2',
-          provider: 'github',
-          repos: [
-            {
-              id: '2',
-              name: 'repo-2',
-              fullName: 'org-2/repo-2',
-              url: 'https://github.com/org-2/repo-2',
-            },
-            {
-              id: '3',
-              name: 'repo-3',
-              fullName: 'org-2/repo-3',
-              url: 'https://github.com/org-2/repo-3',
-            },
-          ],
-        },
-      ],
-    },
-    isLoading: false,
-    isError: false,
-    refetch: () => {},
+    data,
+    isPending,
+    isError,
+    refetch,
   };
 }
diff --git a/static/app/views/prevent/preventAI/index.tsx b/static/app/views/prevent/preventAI/index.tsx
@@ -8,10 +8,10 @@ import PreventAIOnboarding from 'sentry/views/prevent/preventAI/onboarding';
 import {usePreventAIOrgRepos} from './hooks/usePreventAIOrgRepos';
 
 function PreventAIContent() {
-  const {data, isLoading, isError} = usePreventAIOrgRepos();
+  const {data, isPending, isError} = usePreventAIOrgRepos();
   const orgRepos = data?.orgRepos ?? [];
 
-  if (isLoading) {
+  if (isPending) {
     return <LoadingIndicator />;
   }
   if (isError) {
diff --git a/static/app/views/prevent/preventAI/manageRepos.tsx b/static/app/views/prevent/preventAI/manageRepos.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useMemo, useState} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -22,41 +22,53 @@ function ManageReposPage({installedOrgs}: {installedOrgs: PreventAIOrg[]}) {
   const theme = useTheme();
   const [isPanelOpen, setIsPanelOpen] = useState(false);
 
-  const [selectedOrg, setSelectedOrg] = useState(() => installedOrgs[0]?.id ?? '');
-  const [selectedRepo, setSelectedRepo] = useState(
-    () => installedOrgs[0]?.repos?.[0]?.id ?? ''
+  const [selectedOrgName, setSelectedOrgName] = useState(
+    () => installedOrgs[0]?.name ?? ''
   );
-
-  const selectedOrgData = useMemo(
-    () => installedOrgs.find(org => org.id === selectedOrg),
-    [installedOrgs, selectedOrg]
-  );
-  const selectedRepoData = useMemo(
-    () => selectedOrgData?.repos?.find(repo => repo.id === selectedRepo),
-    [selectedOrgData, selectedRepo]
+  const [selectedRepoName, setSelectedRepoName] = useState(
+    () => installedOrgs[0]?.repos?.[0]?.name ?? ''
   );
 
-  // Reset repo selection when org changes
-  useEffect(() => {
-    const org = installedOrgs.find(o => o.id === selectedOrg);
-    if (org && !org.repos.some(repo => repo.id === selectedRepo)) {
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
-      setSelectedRepo(org.repos[0]?.id ?? '');
-    }
-  }, [selectedOrg, installedOrgs, selectedRepo]);
+  // If the selected org is not present in the list of orgs, use the first org
+  const selectedOrg = useMemo(() => {
+    const found = installedOrgs.find(org => org.name === selectedOrgName);
+    return found ?? installedOrgs[0];
+  }, [installedOrgs, selectedOrgName]);
+
+  // Ditto for repos
+  const selectedRepo = useMemo(() => {
+    const found = selectedOrg?.repos?.find(repo => repo.name === selectedRepoName);
+    return found ?? selectedOrg?.repos?.[0];
+  }, [selectedOrg, selectedRepoName]);
+
+  // When the org changes, if the selected repo is not present in the new org,
+  // use the first repo in the new org
+  const setSelectedOrgNameWithCascadeRepoName = useCallback(
+    (orgName: string) => {
+      setSelectedOrgName(orgName);
+      const newSelectedOrgData = installedOrgs.find(org => org.name === orgName);
+      if (
+        newSelectedOrgData &&
+        !newSelectedOrgData.repos.some(repo => repo.name === selectedRepoName)
+      ) {
+        setSelectedRepoName(newSelectedOrgData.repos[0]?.name ?? '');
+      }
+    },
+    [installedOrgs, selectedRepoName]
+  );
 
-  const isOrgSelected = !!selectedOrgData;
-  const isRepoSelected = !!selectedRepoData;
+  const isOrgSelected = !!selectedOrg;
+  const isRepoSelected = !!selectedRepo;
 
   return (
     <Flex direction="column" maxWidth="1000px" gap="xl">
       <Flex align="center" justify="between">
         <ManageReposToolbar
           installedOrgs={installedOrgs}
-          selectedOrg={selectedOrg}
-          selectedRepo={selectedRepo}
-          onOrgChange={setSelectedOrg}
-          onRepoChange={setSelectedRepo}
+          selectedOrg={selectedOrgName}
+          selectedRepo={selectedRepoName}
+          onOrgChange={setSelectedOrgNameWithCascadeRepoName}
+          onRepoChange={setSelectedRepoName}
         />
         <Flex style={{transform: 'translateY(-70px)'}}>
           <Tooltip
@@ -125,11 +137,11 @@ function ManageReposPage({installedOrgs}: {installedOrgs: PreventAIOrg[]}) {
       </Flex>
 
       <ManageReposPanel
-        key={`${selectedOrg || 'no-org'}-${selectedRepo || 'no-repo'}`}
+        key={`${selectedOrgName || 'no-org'}-${selectedRepoName || 'no-repo'}`}
         collapsed={!isPanelOpen}
         onClose={() => setIsPanelOpen(false)}
-        orgName={selectedOrgData?.name ?? ''}
-        repoName={selectedRepoData?.name ?? ''}
+        orgName={selectedOrg?.name ?? ''}
+        repoName={selectedRepo?.name ?? ''}
       />
     </Flex>
   );
diff --git a/static/app/views/prevent/preventAI/manageReposToolbar.spec.tsx b/static/app/views/prevent/preventAI/manageReposToolbar.spec.tsx
diff --git a/static/app/views/prevent/preventAI/manageReposToolbar.tsx b/static/app/views/prevent/preventAI/manageReposToolbar.tsx
