feat(aci): Update connected alerts empty state

Author: malwilley

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

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+
+import {ProjectAvatar} from '@sentry/scraps/avatar';
+import {Flex, Stack} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {tct} from 'sentry/locale';
+import type {AvatarProject} from 'sentry/types/project';
+
+interface ConnectedAlertsEmptyStateProps {
+  project: AvatarProject;
+  children?: React.ReactNode;
+}
+
+export function ConnectedAlertsEmptyState({
+  project,
+  children,
+}: ConnectedAlertsEmptyStateProps) {
+  return (
+    <Stack gap="lg" align="center" maxWidth="300px">
+      {children && (
+        <Stack gap="md" align="center">
+          {children}
+        </Stack>
+      )}
+      <Text variant="muted" align="center" density="comfortable">
+        {tct(
+          'Alerts configured for all Issues in the project [project] will also apply to this Monitor.',
+          {
+            project: (
+              <InlineProjectName display="inline-flex" align="center" gap="xs">
+                <ProjectAvatar project={project} size={16} />
+                <strong>{project.slug}</strong>
+              </InlineProjectName>
+            ),
+          }
+        )}
+      </Text>
+    </Stack>
+  );
+}
+
+const InlineProjectName = styled(Flex)`
+  vertical-align: bottom;
+`;

static/app/views/detectors/components/details/common/automations.spec.tsx

@@ -24,9 +24,12 @@ describe('DetectorDetailsAutomations', () => {
   const automation1 = AutomationFixture({id: '1', name: 'Alert 1'});
   const issueStreamDetector = IssueStreamDetectorFixture({id: '4'});
 
+  const project = ProjectFixture({id: '1'});
+
   beforeEach(() => {
     jest.clearAllMocks();
     MockApiClient.clearMockResponses();
+    ProjectsStore.loadInitialData([project]);
 
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/detectors/',
@@ -297,8 +300,7 @@ describe('DetectorDetailsAutomations', () => {
         projectId: '1',
         workflowIds: [automation1.id],
       });
-
-      act(() => ProjectsStore.loadInitialData([projectWithoutAlertsWrite]));
+      ProjectsStore.loadInitialData([projectWithoutAlertsWrite]);
 
       MockApiClient.addMockResponse({
         url: '/organizations/org-slug/workflows/',

static/app/views/detectors/components/details/common/automations.tsx

@@ -30,6 +30,7 @@ import {useAutomationsQuery} from 'sentry/views/automations/hooks';
 import {getAutomationActions} from 'sentry/views/automations/hooks/utils';
 import {makeAutomationCreatePathname} from 'sentry/views/automations/pathnames';
 import {ConnectAutomationsDrawer} from 'sentry/views/detectors/components/connectAutomationsDrawer';
+import {ConnectedAlertsEmptyState} from 'sentry/views/detectors/components/connectedAutomationsEmptyState';
 import {useUpdateDetector} from 'sentry/views/detectors/hooks';
 import {useCanEditDetectorWorkflowConnections} from 'sentry/views/detectors/utils/useCanEditDetector';
 import {useIssueStreamDetectorsForProject} from 'sentry/views/detectors/utils/useIssueStreamDetectorsForProject';
@@ -222,6 +223,7 @@ export function DetectorDetailsAutomations({detector}: Props) {
   const queryClient = useQueryClient();
   const {openDrawer, closeDrawer, isDrawerOpen} = useDrawer();
   const {mutate: updateDetector} = useUpdateDetector();
+  const project = useProjectFromId({project_id: detector.projectId});
   const canEditWorkflowConnections = useCanEditDetectorWorkflowConnections({
     projectId: detector.projectId,
   });
@@ -304,8 +306,8 @@ export function DetectorDetailsAutomations({detector}: Props) {
           detectorId={detector.id}
           projectId={detector.projectId}
           emptyMessage={
-            <Stack gap="xl" align="center">
-              <Stack gap="sm" align="center">
+            project ? (
+              <ConnectedAlertsEmptyState project={project}>
                 <Button
                   size="sm"
                   onClick={toggleDrawer}
@@ -326,8 +328,10 @@ export function DetectorDetailsAutomations({detector}: Props) {
                 >
                   {t('Create a New Alert')}
                 </LinkButton>
-              </Stack>
-            </Stack>
+              </ConnectedAlertsEmptyState>
+            ) : (
+              t('No alerts connected')
+            )
           }
         />
       </ErrorBoundary>

static/app/views/detectors/components/forms/automateSection.tsx

@@ -2,19 +2,19 @@ import {useCallback, useContext, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
-import {Flex, Stack} from '@sentry/scraps/layout';
-import {Text} from '@sentry/scraps/text';
+import {Flex} from '@sentry/scraps/layout';
 
 import {FormContext} from 'sentry/components/forms/formContext';
 import {useDrawer} from 'sentry/components/globalDrawer';
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {Container} from 'sentry/components/workflowEngine/ui/container';
 import {FormSection} from 'sentry/components/workflowEngine/ui/formSection';
 import {IconAdd, IconEdit} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {AutomationBuilderDrawerForm} from 'sentry/views/automations/components/automationBuilderDrawerForm';
 import {ConnectAutomationsDrawer} from 'sentry/views/detectors/components/connectAutomationsDrawer';
 import {ConnectedAutomationsList} from 'sentry/views/detectors/components/connectedAutomationList';
+import {ConnectedAlertsEmptyState} from 'sentry/views/detectors/components/connectedAutomationsEmptyState';
 import {useDetectorFormContext} from 'sentry/views/detectors/components/forms/context';
 
 export function AutomateSection({step}: {step?: number}) {
@@ -110,7 +110,7 @@ export function AutomateSection({step}: {step?: number}) {
           cursor={undefined}
           onCursor={() => {}}
           emptyMessage={
-            <Stack gap="md" align="center" maxWidth="300px">
+            <ConnectedAlertsEmptyState project={project}>
               <Button
                 ref={ref}
                 size="sm"
@@ -119,18 +119,10 @@ export function AutomateSection({step}: {step?: number}) {
               >
                 {t('Connect Existing Alerts')}
               </Button>
-              <Button size="sm" icon={<IconAdd />} onClick={openCreateDrawer}>
+              <Button size="sm" onClick={openCreateDrawer}>
                 {t('Create New Alert')}
               </Button>
-              <Text variant="muted" align="center">
-                {tct(
-                  'Alerts configured for all Issues in [projectName] will also apply to this Monitor.',
-                  {
-                    projectName: <strong>{project.slug}</strong>,
-                  }
-                )}
-              </Text>
-            </Stack>
+            </ConnectedAlertsEmptyState>
           }
         />
       </FormSection>