feat(aci): Add connected automations to detector details (#92786)

Author: scttcper

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

@@ -5,7 +5,7 @@ import type {
   DataConditionHandlerGroupType,
 } from 'sentry/types/workflowEngine/dataConditions';
 import type {ApiQueryKey} from 'sentry/utils/queryClient';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {useApiQueries, useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 
 const makeAutomationsQueryKey = (orgSlug: string): ApiQueryKey => [
@@ -58,3 +58,15 @@ export function useAvailableActionsQuery() {
     retry: false,
   });
 }
+
+export function useDetectorQueriesByIds(automationIds: string[]) {
+  const org = useOrganization();
+
+  return useApiQueries<Automation>(
+    automationIds.map(id => makeAutomationQueryKey(org.slug, id)),
+    {
+      staleTime: 0,
+      retry: false,
+    }
+  );
+}

static/app/views/detectors/components/connectedAutomationList.tsx

@@ -1,49 +1,124 @@
+import {useEffect, useState} from 'react';
+
+import {Flex} from 'sentry/components/container/flex';
 import {Button} from 'sentry/components/core/button';
+import {ButtonBar} from 'sentry/components/core/button/buttonBar';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 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 {defineColumns, SimpleTable} from 'sentry/components/workflowEngine/simpleTable';
+import {IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Automation} from 'sentry/types/workflowEngine/automations';
+import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import {defined} from 'sentry/utils';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useDetectorQueriesByIds} from 'sentry/views/automations/hooks';
 import {useAutomationActions} from 'sentry/views/automations/hooks/utils';
 import {makeAutomationDetailsPathname} from 'sentry/views/automations/pathnames';
 
+const AUTOMATIONS_PER_PAGE = 10;
+
 type Props = {
-  automations: Automation[];
+  automationIds: Detector['workflowIds'];
   connectedAutomationIds?: Set<string>;
   toggleConnected?: (id: string) => void;
 };
 
 export function ConnectedAutomationsList({
-  automations,
+  automationIds,
   connectedAutomationIds,
   toggleConnected,
 }: Props) {
   const organization = useOrganization();
   const canEdit = connectedAutomationIds && !!toggleConnected;
+  // TODO: There will eventually be a single api call to fetch a page of automations
+  const queries = useDetectorQueriesByIds(automationIds);
+  const [currentPage, setCurrentPage] = useState(0);
+  const totalPages = Math.ceil(queries.length / AUTOMATIONS_PER_PAGE);
+
+  // Reset the page when the automationIds change
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [automationIds]);
+
+  const data = queries
+    .map((query): ConnectedAutomationsData | undefined => {
+      if (!query.data) {
+        return undefined;
+      }
+      return {
+        ...query.data,
+        link: makeAutomationDetailsPathname(organization.slug, query.data.id),
+        connected: canEdit
+          ? {
+              isConnected: connectedAutomationIds?.has(query.data.id),
+              toggleConnected: () => toggleConnected?.(query.data.id),
+            }
+          : undefined,
+      };
+    })
+    .filter(defined);
+
+  const isLoading = queries.some(query => query.isPending);
+  const isError = queries.some(query => query.isError);
+
+  if (isError) {
+    return <LoadingError />;
+  }
 
-  const data = automations.map(automation => ({
-    ...automation,
-    link: makeAutomationDetailsPathname(organization.slug, automation.id),
-    connected: canEdit
-      ? {
-          isConnected: connectedAutomationIds?.has(automation.id),
-          toggleConnected: () => toggleConnected?.(automation.id),
-        }
-      : undefined,
-  }));
+  if (isLoading) {
+    return <LoadingIndicator />;
+  }
+
+  const handlePreviousPage = () => {
+    setCurrentPage(prev => Math.max(0, prev - 1));
+  };
+  const handleNextPage = () => {
+    setCurrentPage(prev => Math.min(totalPages - 1, prev + 1));
+  };
+
+  const pagination = (
+    <Flex justify="flex-end">
+      <ButtonBar merged>
+        <Button
+          onClick={handlePreviousPage}
+          disabled={currentPage === 0}
+          aria-label={t('Previous page')}
+          icon={<IconChevron direction="left" />}
+          size="sm"
+        />
+        <Button
+          onClick={handleNextPage}
+          disabled={currentPage === totalPages - 1}
+          aria-label={t('Next page')}
+          icon={<IconChevron direction="right" />}
+          size="sm"
+        />
+      </ButtonBar>
+    </Flex>
+  );
 
   if (canEdit) {
-    return <SimpleTable columns={connectedColumns} data={data} />;
+    return (
+      <Flex column>
+        <SimpleTable columns={connectedColumns} data={data} />
+        {pagination}
+      </Flex>
+    );
   }
 
   return (
-    <SimpleTable
-      columns={baseColumns}
-      data={data}
-      fallback={t('No automations connected')}
-    />
+    <Flex column>
+      <SimpleTable
+        columns={baseColumns}
+        data={data}
+        fallback={t('No automations connected')}
+      />
+      {pagination}
+    </Flex>
   );
 }
 

static/app/views/detectors/detail.tsx

@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {DateTime} from 'sentry/components/dateTime';
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import ActorBadge from 'sentry/components/idBadge/actorBadge';
 import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
 import LoadingError from 'sentry/components/loadingError';
@@ -110,7 +111,9 @@ export default function DetectorDetails() {
                 <IssuesList />
               </Section>
               <Section title={t('Connected Automations')}>
-                <ConnectedAutomationsList automations={[]} />
+                <ErrorBoundary mini>
+                  <ConnectedAutomationsList automationIds={detector.workflowIds} />
+                </ErrorBoundary>
               </Section>
             </DetailLayout.Main>
             <DetailLayout.Sidebar>