feat(aci): Add empty states for Monitors / Alerts (#113126)

# Description
This adds a new empty state to the list views.


https://github.com/user-attachments/assets/deb69911-12d4-4393-8f91-4ece6d0d5091


[Figma](https://www.figma.com/design/99EtM4v3UYfGCN0QJU1QfI/Alerts-Create-Issues---ACI?node-id=10425-1269&t=CEzrWPYXCCosvulD-0#1707807759)

Author: saponifi3d

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

@@ -1,12 +1,18 @@
 import {useCallback, useMemo, useState, type ComponentProps} from 'react';
 import styled from '@emotion/styled';
+import {parseAsString, useQueryState} from 'nuqs';
 
+import NoAlertsImage from 'sentry-images/features/alerts-not-found.svg';
+
+import {LinkButton} from '@sentry/scraps/button';
 import {Flex} from '@sentry/scraps/layout';
+import {Heading, Text} from '@sentry/scraps/text';
 
 import {hasEveryAccess} from 'sentry/components/acl/access';
 import {LoadingError} from 'sentry/components/loadingError';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {SelectAllHeaderCheckbox} from 'sentry/components/workflowEngine/ui/selectAllHeaderCheckbox';
+import {IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Automation} from 'sentry/types/workflowEngine/automations';
 import type {Sort} from 'sentry/utils/discover/fields';
@@ -19,6 +25,7 @@ import {
   AutomationListRowSkeleton,
 } from 'sentry/views/automations/components/automationListTable/row';
 import {AUTOMATION_LIST_PAGE_LIMIT} from 'sentry/views/automations/constants';
+import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
 
 type AutomationListTableProps = {
   allResultsVisible: boolean;
@@ -85,7 +92,7 @@ export function AutomationListTable({
 }: AutomationListTableProps) {
   const organization = useOrganization();
   const canEditAutomations = hasEveryAccess(['alerts:write'], {organization});
-
+  const [query] = useQueryState('query', parseAsString);
   const [selected, setSelected] = useState(new Set<string>());
 
   const togglePageSelected = (pageSelected: boolean) => {
@@ -173,7 +180,26 @@ export function AutomationListTable({
         />
       )}
       {isSuccess && automations.length === 0 && (
-        <SimpleTable.Empty>{t('No alerts found')}</SimpleTable.Empty>
+        <SimpleTable.Empty>
+          <StyledFlex gap="xl" direction="column" align="center">
+            <img src={NoAlertsImage} />
+            <Heading as="h3">{t('No alerts found.')}</Heading>
+            <Text align="center" variant="muted">
+              {t('Try out that same query on the Monitors page.')}
+            </Text>
+
+            <LinkButton
+              icon={<IconSearch />}
+              priority="primary"
+              to={{
+                pathname: makeMonitorBasePathname(organization.slug),
+                query: {query},
+              }}
+            >
+              {t('Search Monitors')}
+            </LinkButton>
+          </StyledFlex>
+        </SimpleTable.Empty>
       )}
       {isError && <LoadingError message={t('Error loading alerts')} />}
       {isPending && <LoadingSkeletons />}
@@ -190,6 +216,10 @@ export function AutomationListTable({
   );
 }
 
+const StyledFlex = styled(Flex)`
+  padding: ${p => p.theme.size.sm};
+`;
+
 const AutomationsSimpleTable = styled(SimpleTable)`
   grid-template-columns: 1fr;
 

static/app/views/detectors/components/detectorListTable/index.tsx

@@ -10,8 +10,11 @@ import {css, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {useQueryState} from 'nuqs';
 
+import NoAlertsImage from 'sentry-images/features/alerts-not-found.svg';
+
 import {Button} from '@sentry/scraps/button';
 import {Container, Flex} from '@sentry/scraps/layout';
+import {Heading, Text} from '@sentry/scraps/text';
 
 import {
   GridLineLabels,
@@ -242,7 +245,15 @@ export function DetectorListTable({
         {isError && <SimpleTable.Empty>{t('Error loading monitors')}</SimpleTable.Empty>}
         {isPending && <LoadingSkeletons />}
         {isSuccess && detectors.length === 0 && (
-          <SimpleTable.Empty>{t('No monitors found')}</SimpleTable.Empty>
+          <SimpleTable.Empty>
+            <StyledFlex gap="xl" direction="column" align="center">
+              <img src={NoAlertsImage} />
+              <Heading as="h3">{t('No monitors found.')}</Heading>
+              <Text align="center" variant="muted">
+                {t("Sorry, we couldn't find what you were looking for.")}
+              </Text>
+            </StyledFlex>
+          </SimpleTable.Empty>
         )}
         {hasVisualization && (
           <PositionedGridLineOverlay
@@ -504,6 +515,10 @@ const VisualizationHeaderContainer = styled(Container)`
   grid-column: -3 / -1;
 `;
 
+const StyledFlex = styled(Flex)`
+  padding: ${p => p.theme.size.xs};
+`;
+
 const VisualizationExpandButton = styled('div')`
   grid-row: 1;
   grid-column: -1;