fix(aci): Show empty state in Alerts list projects column when no detectors are connected

static/app/views/automations/components/automationListTable/projectsCell.tsx

@@ -0,0 +1,20 @@
+import {Placeholder} from 'sentry/components/placeholder';
+import {ProjectList} from 'sentry/components/projectList';
+import {EmptyCell} from 'sentry/components/workflowEngine/gridCell/emptyCell';
+import type {Automation} from 'sentry/types/workflowEngine/automations';
+import {useAutomationProjectSlugs} from 'sentry/views/automations/hooks/utils';
+
+export function ProjectsCell({automation}: {automation: Automation}) {
+  const {projectSlugs, isLoading: isProjectsLoading} =
+    useAutomationProjectSlugs(automation);
+
+  if (isProjectsLoading) {
+    return <Placeholder height="20px" />;
+  }
+
+  if (projectSlugs.length === 0) {
+    return <EmptyCell />;
+  }
+
+  return <ProjectList projectSlugs={projectSlugs} />;
+}

static/app/views/automations/components/automationListTable/row.tsx

@@ -5,19 +5,15 @@ import {Flex} from '@sentry/scraps/layout';
 
 import {hasEveryAccess} from 'sentry/components/acl/access';
 import {Placeholder} from 'sentry/components/placeholder';
-import {ProjectList} from 'sentry/components/projectList';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {ActionCell} from 'sentry/components/workflowEngine/gridCell/actionCell';
 import {AutomationTitleCell} from 'sentry/components/workflowEngine/gridCell/automationTitleCell';
 import {TimeAgoCell} from 'sentry/components/workflowEngine/gridCell/timeAgoCell';
-import {ProjectsStore} from 'sentry/stores/projectsStore';
 import type {Automation} from 'sentry/types/workflowEngine/automations';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {AutomationListConnectedDetectors} from 'sentry/views/automations/components/automationListTable/connectedDetectors';
-import {
-  getAutomationActions,
-  useAutomationProjectIds,
-} from 'sentry/views/automations/hooks/utils';
+import {ProjectsCell} from 'sentry/views/automations/components/automationListTable/projectsCell';
+import {getAutomationActions} from 'sentry/views/automations/hooks/utils';
 
 type AutomationListRowProps = {
   automation: Automation;
@@ -35,10 +31,6 @@ export function AutomationListRow({
 
   const actions = getAutomationActions(automation);
   const {enabled, lastTriggered, detectorIds = []} = automation;
-  const projectIds = useAutomationProjectIds(automation);
-  const projectSlugs = projectIds.map(
-    projectId => ProjectsStore.getById(projectId)?.slug
-  ) as string[];
 
   return (
     <AutomationSimpleTableRow
@@ -66,7 +58,7 @@ export function AutomationListRow({
         <ActionCell actions={actions} disabled={!enabled} />
       </SimpleTable.RowCell>
       <SimpleTable.RowCell data-column-name="projects">
-        <ProjectList projectSlugs={projectSlugs} />
+        <ProjectsCell automation={automation} />
       </SimpleTable.RowCell>
       <SimpleTable.RowCell data-column-name="connected-monitors">
         <AutomationListConnectedDetectors detectorIds={detectorIds} />

static/app/views/automations/hooks/utils.tsx

@@ -1,11 +1,13 @@
 import {t} from 'sentry/locale';
+import {ProjectsStore} from 'sentry/stores/projectsStore';
 import {ActionType} from 'sentry/types/workflowEngine/actions';
 import type {Automation, StatusWarning} from 'sentry/types/workflowEngine/automations';
 import type {DataConditionGroup} from 'sentry/types/workflowEngine/dataConditions';
 import {
   DataConditionGroupLogicType,
   DataConditionType,
 } from 'sentry/types/workflowEngine/dataConditions';
+import {defined} from 'sentry/utils';
 import {AgeComparison} from 'sentry/views/automations/components/actionFilters/constants';
 import type {ConflictingConditions} from 'sentry/views/automations/components/automationBuilderConflictContext';
 import {useDetectorsQuery} from 'sentry/views/detectors/hooks';
@@ -52,11 +54,21 @@ export function getAutomationActionsWarning(
   return null;
 }
 
-export function useAutomationProjectIds(automation: Automation): string[] {
-  const {data: detectors} = useDetectorsQuery({ids: automation.detectorIds});
-  return [
-    ...new Set(detectors?.map(detector => detector.projectId).filter(x => x) ?? []),
-  ] as string[];
+export function useAutomationProjectSlugs(automation: Automation) {
+  const {data: detectors, isLoading} = useDetectorsQuery(
+    {ids: automation.detectorIds},
+    {enabled: automation.detectorIds.length > 0}
+  );
+
+  const projectIds = [
+    ...new Set(detectors?.map(detector => detector.projectId).filter(defined) ?? []),
+  ];
+
+  const projectSlugs = projectIds
+    .map(projectId => ProjectsStore.getById(projectId)?.slug)
+    .filter(defined);
+
+  return {projectSlugs, isLoading};
 }
 
 export function findConflictingConditions(