Skip to content

chore(aci): All create monitor buttons should link to type selection #111801

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
malwilley merged 3 commits into from
Mar 31, 2026
Merged

chore(aci): All create monitor buttons should link to type selection #111801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df60776
chore(aci): All create monitor buttons should like to type selection
malwilley Mar 30, 2026
4998ff7
Cleanup unused function
malwilley Mar 30, 2026
2730caa
Merge branch 'master' into malwilley/fix-create-monitor-btn
malwilley Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion static/app/views/detectors/list/allMonitors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function AllMonitors() {
return (
<SentryDocumentTitle title={TITLE}>
<WorkflowEngineListLayout
actions={<DetectorListActions detectorType={null} />}
actions={<DetectorListActions />}
title={TITLE}
description={DESCRIPTION}
docsUrl={DOCS_URL}
Expand Down
36 changes: 6 additions & 30 deletions static/app/views/detectors/list/common/detectorListActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,38 @@ import {ALL_ACCESS_PROJECTS} from 'sentry/components/pageFilters/constants';
import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
import {IconAdd} from 'sentry/icons';
import {t} from 'sentry/locale';
import type {DetectorType} from 'sentry/types/workflowEngine/detectors';
import {useOrganization} from 'sentry/utils/useOrganization';
import {MonitorFeedbackButton} from 'sentry/views/detectors/components/monitorFeedbackButton';
import {
makeMonitorCreatePathname,
makeMonitorCreateSettingsPathname,
} from 'sentry/views/detectors/pathnames';
import {detectorTypeIsUserCreateable} from 'sentry/views/detectors/utils/detectorTypeConfig';
import {makeMonitorCreatePathname} from 'sentry/views/detectors/pathnames';
import {getNoPermissionToCreateMonitorsTooltip} from 'sentry/views/detectors/utils/monitorAccessMessages';
import {useCanCreateDetector} from 'sentry/views/detectors/utils/useCanCreateDetector';

interface DetectorListActionsProps {
detectorType: DetectorType | null;
children?: React.ReactNode;
}

function getPermissionTooltipText({detectorType}: {detectorType: DetectorType | null}) {
const noPermissionText = getNoPermissionToCreateMonitorsTooltip();

if (!detectorType || detectorTypeIsUserCreateable(detectorType)) {
return noPermissionText;
}

return t('This monitor type is managed by Sentry.');
}

export function DetectorListActions({detectorType, children}: DetectorListActionsProps) {
export function DetectorListActions({children}: DetectorListActionsProps) {
const organization = useOrganization();
const {selection} = usePageFilters();

const createPath = detectorType
? makeMonitorCreateSettingsPathname(organization.slug)
: makeMonitorCreatePathname(organization.slug);
const project = selection.projects.find(pid => pid !== ALL_ACCESS_PROJECTS);
const createQuery = detectorType ? {project, detectorType} : {project};
const canCreateDetector = useCanCreateDetector(detectorType);
const canCreateDetector = useCanCreateDetector(null);

return (
<Flex gap="sm">
{children}
<MonitorFeedbackButton />
<LinkButton
to={{
pathname: createPath,
query: createQuery,
pathname: makeMonitorCreatePathname(organization.slug),
query: {project},
}}
priority="primary"
icon={<IconAdd />}
size="sm"
disabled={!canCreateDetector}
tooltipProps={{
title: canCreateDetector
? undefined
: getPermissionTooltipText({
detectorType,
}),
title: canCreateDetector ? undefined : getNoPermissionToCreateMonitorsTooltip(),
}}
>
{t('Create Monitor')}
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/detectors/list/cron.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ export default function CronDetectorsList() {
<MonitorViewContext.Provider value={contextValue}>
<SentryDocumentTitle title={TITLE}>
<WorkflowEngineListLayout
actions={<DetectorListActions detectorType="monitor_check_in_failure" />}
actions={<DetectorListActions />}
title={TITLE}
description={DESCRIPTION}
docsUrl={DOCS_URL}
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/detectors/list/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function ErrorDetectorsList() {
return (
<SentryDocumentTitle title={TITLE}>
<WorkflowEngineListLayout
actions={<DetectorListActions detectorType="error" />}
actions={<DetectorListActions />}
title={TITLE}
description={DESCRIPTION}
docsUrl={DOCS_URL}
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/detectors/list/metric.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function MetricDetectorsList() {
return (
<SentryDocumentTitle title={TITLE}>
<WorkflowEngineListLayout
actions={<DetectorListActions detectorType="metric_issue" />}
actions={<DetectorListActions />}
title={TITLE}
description={DESCRIPTION}
docsUrl={DOCS_URL}
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/detectors/list/mobileBuild.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function MobileBuildDetectorsList() {
<Feature features="organizations:preprod-size-monitors-frontend">
<SentryDocumentTitle title={TITLE}>
<WorkflowEngineListLayout
actions={<DetectorListActions detectorType="preprod_size_analysis" />}
actions={<DetectorListActions />}
title={TITLE}
description={DESCRIPTION}
docsUrl={DOCS_URL}
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/detectors/list/myMonitors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function MyMonitorsList() {
return (
<SentryDocumentTitle title={TITLE}>
<WorkflowEngineListLayout
actions={<DetectorListActions detectorType={null} />}
actions={<DetectorListActions />}
title={TITLE}
description={DESCRIPTION}
docsUrl={DOCS_URL}
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/detectors/list/uptime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default function UptimeDetectorsList() {
<MonitorViewContext.Provider value={contextValue}>
<SentryDocumentTitle title={TITLE}>
<WorkflowEngineListLayout
actions={<DetectorListActions detectorType="uptime_domain_failure" />}
actions={<DetectorListActions />}
Copy link
Copy Markdown
Contributor

@saponifi3d saponifi3d Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not for this pr -- but how could we DRY up all these WorkflowEngineListLayout components? feels fairly repetitive and wonder if we could do something to simplify this (as we add more monitor types, it'll be more difficult to maintain)

Copy link
Copy Markdown
Member Author

@malwilley malwilley Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think having a little boilerplate in each list view page is necessarily a bad thing, WorkflowEngineListLayout is already an attempt to DRY up the code. Each list page needs to be rendered in a separate component since they be customized (for example the uptime page here needs to wrap the content in a MonitorViewContext provider)

title={TITLE}
description={DESCRIPTION}
docsUrl={DOCS_URL}
Expand Down
4 changes: 0 additions & 4 deletions static/app/views/detectors/pathnames.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@ export const makeMonitorCreatePathname = (orgSlug: string) => {
return normalizeUrl(`${makeMonitorBasePathname(orgSlug)}new/`);
};

export const makeMonitorCreateSettingsPathname = (orgSlug: string) => {
return normalizeUrl(`${makeMonitorBasePathname(orgSlug)}new/settings/`);
};

export const makeMonitorEditPathname = (orgSlug: string, monitorId: string) => {
return normalizeUrl(`${makeMonitorBasePathname(orgSlug)}${monitorId}/edit/`);
};
Loading