chore(seer): Settings improvements (#94940)

Author: roaga

static/app/views/issueDetails/streamline/sidebar/seerNotices.tsx

@@ -62,11 +62,8 @@ function CustomStepButtons({
 export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNoticesProps) {
   const organization = useOrganization();
   const {repos} = useAutofixRepos(groupId);
-  const {
-    preference,
-    codeMappingRepos,
-    isLoading: isLoadingPreferences,
-  } = useProjectSeerPreferences(project);
+  const {preference, isLoading: isLoadingPreferences} =
+    useProjectSeerPreferences(project);
   const {starredViews: views} = useStarredIssueViews();
 
   const detailedProject = useDetailedProject({
@@ -88,8 +85,7 @@ export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNotice
 
   // Onboarding conditions
   const needsGithubIntegration = !hasGithubIntegration;
-  const needsRepoSelection =
-    repos.length === 0 && !preference?.repositories?.length && !codeMappingRepos?.length;
+  const needsRepoSelection = repos.length === 0 && !preference?.repositories?.length;
   const needsAutomation =
     detailedProject?.data &&
     (detailedProject?.data?.autofixAutomationTuning === 'off' ||

static/app/views/settings/projectSeer/index.tsx

@@ -13,13 +13,15 @@ import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import type {FieldObject, JsonFormObject} from 'sentry/components/forms/types';
 import HookOrDefault from 'sentry/components/hookOrDefault';
+import {NoAccess} from 'sentry/components/noAccess';
 import Placeholder from 'sentry/components/placeholder';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {space} from 'sentry/styles/space';
 import {DataCategoryExact} from 'sentry/types/core';
 import type {Project} from 'sentry/types/project';
+import {singleLineRenderer} from 'sentry/utils/marked/marked';
 import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import {setApiQueryData} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -247,6 +249,10 @@ function ProjectSeer({project}: ProjectSeerProps) {
     !setupAcknowledgement.orgHasAcknowledged ||
     (!billing.hasAutofixQuota && organization.features.includes('seer-billing'));
 
+  if (organization.hideAiFeatures) {
+    return <NoAccess />;
+  }
+
   if (isLoading) {
     return (
       <Fragment>
@@ -281,7 +287,17 @@ function ProjectSeer({project}: ProjectSeerProps) {
         title={t('Project Seer Settings')}
         projectSlug={project.slug}
       />
-      <SettingsPageHeader title={t('Seer')} />
+      <SettingsPageHeader
+        title={tct('Seer Settings for [projectName]', {
+          projectName: (
+            <span
+              dangerouslySetInnerHTML={{
+                __html: singleLineRenderer(`\`${project.slug}\``),
+              }}
+            />
+          ),
+        })}
+      />
       {organization.features.includes('trigger-autofix-on-issue-summary') && (
         <ProjectSeerGeneralForm project={project} />
       )}

static/gsApp/views/seerAutomation/index.spec.tsx

@@ -9,7 +9,6 @@ import SeerAutomationRoot from './index';
 
 describe('SeerAutomation', function () {
   beforeEach(() => {
-    // Mock the seer setup check endpoint for all tests
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/seer/setup-check/',
       method: 'GET',
@@ -24,6 +23,13 @@ describe('SeerAutomation', function () {
         },
       },
     });
+    MockApiClient.addMockResponse({
+      url: '/projects/org-slug/project-slug/seer/preferences/',
+      method: 'GET',
+      body: {
+        repositories: [],
+      },
+    });
   });
 
   afterEach(() => {

static/gsApp/views/seerAutomation/index.tsx

@@ -25,7 +25,10 @@ function SeerAutomationRoot() {
   const organization = useOrganization();
   const {isLoading, billing, setupAcknowledgement} = useOrganizationSeerSetup();
 
-  if (!organization.features.includes('trigger-autofix-on-issue-summary')) {
+  if (
+    !organization.features.includes('trigger-autofix-on-issue-summary') ||
+    organization.hideAiFeatures
+  ) {
     return <NoAccess />;
   }
 

static/gsApp/views/seerAutomation/seerAutomationProjectList.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useState} from 'react';
+import {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {
@@ -15,13 +15,15 @@ import {Flex} from 'sentry/components/core/layout';
 import {Link} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {useProjectSeerPreferences} from 'sentry/components/events/autofix/preferences/hooks/useProjectSeerPreferences';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import PanelItem from 'sentry/components/panels/panelItem';
 import Placeholder from 'sentry/components/placeholder';
+import SearchBar from 'sentry/components/searchBar';
 import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -44,7 +46,10 @@ function ProjectSeerSetting({project, orgSlug}: {orgSlug: string; project: Proje
     projectSlug: project.slug,
   });
 
-  if (detailedProject.isPending) {
+  const {preference, isPending: isLoadingPreferences} =
+    useProjectSeerPreferences(project);
+
+  if (detailedProject.isPending || isLoadingPreferences) {
     return (
       <div>
         <Placeholder height="12px" width="50px" />
@@ -59,17 +64,21 @@ function ProjectSeerSetting({project, orgSlug}: {orgSlug: string; project: Proje
   const {autofixAutomationTuning = 'off', seerScannerAutomation = false} =
     detailedProject.data;
 
+  const repoCount = preference?.repositories?.length || 0;
+
   return (
     <SeerValue>
       <span>
         <Subheading>{t('Scans')}:</Subheading>{' '}
         {seerScannerAutomation ? t('On') : t('Off')}
       </span>
-      {' | '}
       <span>
         <Subheading>{t('Fixes')}:</Subheading>{' '}
         {getSeerLabel(autofixAutomationTuning, seerScannerAutomation)}
       </span>
+      <span>
+        <Subheading>{t('Repos')}:</Subheading> {repoCount}
+      </span>
     </SeerValue>
   );
 }
@@ -115,6 +124,18 @@ export function SeerAutomationProjectList() {
   const [page, setPage] = useState(1);
   const [selected, setSelected] = useState<Set<string>>(() => new Set());
   const queryClient = useQueryClient();
+  const [search, setSearch] = useState('');
+
+  const filteredProjects = useMemo(() => {
+    return projects.filter(project =>
+      project.slug.toLowerCase().includes(search.toLowerCase())
+    );
+  }, [projects, search]);
+
+  const handleSearchChange = (searchQuery: string) => {
+    setSearch(searchQuery);
+    setPage(1); // Reset to first page when search changes
+  };
 
   if (fetching) {
     return <LoadingIndicator />;
@@ -124,10 +145,10 @@ export function SeerAutomationProjectList() {
     return <LoadingError />;
   }
 
-  const totalProjects = projects.length;
+  const totalProjects = filteredProjects.length;
   const pageStart = (page - 1) * PROJECTS_PER_PAGE;
   const pageEnd = page * PROJECTS_PER_PAGE;
-  const paginatedProjects = projects.slice(pageStart, pageEnd);
+  const paginatedProjects = filteredProjects.slice(pageStart, pageEnd);
 
   const previousDisabled = page <= 1;
   const nextDisabled = pageEnd >= totalProjects;
@@ -140,14 +161,24 @@ export function SeerAutomationProjectList() {
     setPage(p => p + 1);
   };
 
-  const allSelected = selected.size === projects.length && projects.length > 0;
+  const allFilteredSelected =
+    filteredProjects.length > 0 &&
+    filteredProjects.every(project => selected.has(project.id));
   const toggleSelectAll = () => {
-    if (allSelected) {
-      // Unselect all projects
-      setSelected(new Set());
+    if (allFilteredSelected) {
+      // Unselect all filtered projects
+      setSelected(prev => {
+        const newSet = new Set(prev);
+        filteredProjects.forEach(project => newSet.delete(project.id));
+        return newSet;
+      });
     } else {
-      // Select all projects
-      setSelected(new Set(projects.map(project => project.id)));
+      // Select all filtered projects
+      setSelected(prev => {
+        const newSet = new Set(prev);
+        filteredProjects.forEach(project => newSet.add(project.id));
+        return newSet;
+      });
     }
   };
 
@@ -244,6 +275,13 @@ export function SeerAutomationProjectList() {
 
   return (
     <Fragment>
+      <SearchWrapper>
+        <SearchBar
+          query={search}
+          onChange={handleSearchChange}
+          placeholder={t('Search projects')}
+        />
+      </SearchWrapper>
       <Panel>
         <PanelHeader hasButtons>
           {selected.size > 0 ? (
@@ -264,20 +302,25 @@ export function SeerAutomationProjectList() {
           )}
           <div style={{marginLeft: 'auto'}}>
             <Button size="sm" onClick={toggleSelectAll}>
-              {allSelected ? t('Unselect All') : t('Select All')}
+              {allFilteredSelected ? t('Unselect All') : t('Select All')}
             </Button>
           </div>
         </PanelHeader>
         <PanelBody>
+          {filteredProjects.length === 0 && search && (
+            <div style={{padding: space(2), textAlign: 'center', color: '#888'}}>
+              {t('No projects found matching "%(search)s"', {search})}
+            </div>
+          )}
           {paginatedProjects.map(project => (
             <PanelItem key={project.id}>
-              <Flex justify="space-between" gap={space(2)} flex={1}>
+              <Flex justify="space-between" align="center" gap={space(2)} flex={1}>
                 <Flex gap={space(1)} align="center">
                   <Tooltip
                     title={t('You do not have permission to edit this project')}
                     disabled={projectsWithWriteAccess.includes(project)}
                   >
-                    <Checkbox
+                    <StyledCheckbox
                       checked={selected.has(project.id)}
                       onChange={() => toggleProject(project.id)}
                       aria-label={t('Toggle project')}
@@ -321,8 +364,15 @@ export function SeerAutomationProjectList() {
   );
 }
 
+const SearchWrapper = styled('div')`
+  margin-bottom: ${space(2)};
+`;
+
 const SeerValue = styled('div')`
   color: ${p => p.theme.subText};
+  display: flex;
+  justify-content: flex-end;
+  gap: ${space(4)};
 `;
 
 const ActionDropdownMenu = styled(DropdownMenu)`
@@ -331,3 +381,9 @@ const ActionDropdownMenu = styled(DropdownMenu)`
     text-transform: none;
   }
 `;
+
+const StyledCheckbox = styled(Checkbox)`
+  margin-bottom: 0;
+  padding-bottom: 0;
+  padding-top: ${space(0.5)};
+`;