diff --git a/static/app/views/automations/components/automationListTable/index.tsx b/static/app/views/automations/components/automationListTable/index.tsx index 65a6c40db30b21..4eaf532c06c90a 100644 --- a/static/app/views/automations/components/automationListTable/index.tsx +++ b/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()); const togglePageSelected = (pageSelected: boolean) => { @@ -173,7 +180,26 @@ export function AutomationListTable({ /> )} {isSuccess && automations.length === 0 && ( - {t('No alerts found')} + + + + {t('No alerts found.')} + + {t('Try out that same query on the Monitors page.')} + + + } + priority="primary" + to={{ + pathname: makeMonitorBasePathname(organization.slug), + query: {query}, + }} + > + {t('Search Monitors')} + + + )} {isError && } {isPending && } @@ -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; diff --git a/static/app/views/detectors/components/detectorListTable/index.tsx b/static/app/views/detectors/components/detectorListTable/index.tsx index e85d3f3c23d278..804c3ea7dcfc30 100644 --- a/static/app/views/detectors/components/detectorListTable/index.tsx +++ b/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 && {t('Error loading monitors')}} {isPending && } {isSuccess && detectors.length === 0 && ( - {t('No monitors found')} + + + + {t('No monitors found.')} + + {t("Sorry, we couldn't find what you were looking for.")} + + + )} {hasVisualization && ( p.theme.size.xs}; +`; + const VisualizationExpandButton = styled('div')` grid-row: 1; grid-column: -1; diff --git a/static/images/features/alerts-not-found.svg b/static/images/features/alerts-not-found.svg new file mode 100644 index 00000000000000..e44095c1399e29 --- /dev/null +++ b/static/images/features/alerts-not-found.svg @@ -0,0 +1 @@ + \ No newline at end of file