Skip to content

fix(monitors): Move edit breadcrumbs into the top bar #113272

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
priscilawebdev merged 11 commits into from
Apr 20, 2026
Merged

fix(monitors): Move edit breadcrumbs into the top bar #113272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b7146dd
fix(monitors): Move edit breadcrumbs into top bar
priscilawebdev Apr 17, 2026
e139266
fix(monitors): Keep error edit title out of top bar
priscilawebdev Apr 17, 2026
b91bdb6
fix(monitors): Remove empty error edit header
priscilawebdev Apr 17, 2026
25c3ffc
fix(monitors): Keep project badge in error edit top bar
priscilawebdev Apr 17, 2026
6871cc9
fix(monitors): Match metric edit top bar layout
priscilawebdev Apr 17, 2026
707c0db
fix(monitors): Add project crumb to error edit page
priscilawebdev Apr 17, 2026
64465a8
fix(monitors): Match error detail breadcrumbs to edit
priscilawebdev Apr 17, 2026
ff19b25
fix(monitors): Link edit project crumb to detail page
priscilawebdev Apr 17, 2026
05728d1
ref(monitors): Inline error breadcrumb variants
priscilawebdev Apr 17, 2026
aaf5541
ref(monitors): Inline error page breadcrumbs
priscilawebdev Apr 17, 2026
843bcdc
ref(monitors): Pass project through error edit flow
priscilawebdev Apr 17, 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
25 changes: 24 additions & 1 deletion static/app/views/detectors/components/details/error/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import {Fragment} from 'react';
import {ExternalLink, Link} from '@sentry/scraps/link';
import {Text} from '@sentry/scraps/text';

import {Breadcrumbs} from 'sentry/components/breadcrumbs';
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
import {DatePageFilter} from 'sentry/components/pageFilters/date/datePageFilter';
import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
import {Placeholder} from 'sentry/components/placeholder';
Expand All @@ -20,6 +22,11 @@ import {DetectorExtraDetails} from 'sentry/views/detectors/components/details/co
import {DetectorDetailsDefaultHeaderContent} from 'sentry/views/detectors/components/details/common/header';
import {DetectorDetailsOngoingIssues} from 'sentry/views/detectors/components/details/common/ongoingIssues';
import {MonitorFeedbackButton} from 'sentry/views/detectors/components/monitorFeedbackButton';
import {
makeMonitorBasePathname,
makeMonitorTypePathname,
} from 'sentry/views/detectors/pathnames';
import {getDetectorTypeLabel} from 'sentry/views/detectors/utils/detectorTypeConfig';
import {useCanEditDetectorWorkflowConnections} from 'sentry/views/detectors/utils/useCanEditDetector';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
Expand Down Expand Up @@ -82,7 +89,23 @@ export function ErrorDetectorDetails({detector, project}: ErrorDetectorDetailsPr
<DetailLayout>
{hasPageFrameFeature ? (
<Fragment>
<DetectorDetailsDefaultHeaderContent detector={detector} project={project} />
<TopBar.Slot name="title">
<Breadcrumbs
crumbs={[
{
label: t('Monitors'),
to: makeMonitorBasePathname(organization.slug),
},
{
label: getDetectorTypeLabel(detector.type),
to: makeMonitorTypePathname(organization.slug, detector.type),
},
{
label: <ProjectBadge disableLink project={project} avatarSize={16} />,
},
]}
/>
</TopBar.Slot>
<TopBar.Slot name="actions">
<EditDetectorAction detector={detector} canEdit={canEdit} />
</TopBar.Slot>
Expand Down
11 changes: 10 additions & 1 deletion static/app/views/detectors/components/forms/editDetectorLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ import {DetectorNameField} from 'sentry/views/detectors/components/forms/common/
import {getSubmitButtonTitle} from 'sentry/views/detectors/components/forms/common/getSubmitButtonTitle';
import {MonitorFeedbackButton} from 'sentry/views/detectors/components/monitorFeedbackButton';
import {useEditDetectorFormSubmit} from 'sentry/views/detectors/hooks/useEditDetectorFormSubmit';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

type EditDetectorLayoutProps<TDetector, TFormData, TUpdatePayload> = {
children: React.ReactNode;
Expand All @@ -49,6 +51,7 @@ export function EditDetectorLayout<
}: EditDetectorLayoutProps<TDetector, TFormData, TUpdatePayload>) {
const theme = useTheme();
const maxWidth = theme.breakpoints.xl;
const hasPageFrame = useHasPageFrameFeature();
const [formModel] = useState(() => new FormModel());
const {onFieldChange} = useFormEagerValidation(formModel);

Expand All @@ -73,7 +76,13 @@ export function EditDetectorLayout<
<EditLayout formProps={formProps}>
<EditLayout.Header maxWidth={maxWidth}>
<EditLayout.HeaderContent>
<EditDetectorBreadcrumbs detector={detector} />
{hasPageFrame ? (
<TopBar.Slot name="title">
<EditDetectorBreadcrumbs detector={detector} />
</TopBar.Slot>
) : (
<EditDetectorBreadcrumbs detector={detector} />
)}
</EditLayout.HeaderContent>

<div>
Expand Down
78 changes: 61 additions & 17 deletions static/app/views/detectors/components/forms/error/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {Fragment} from 'react';
import {Link} from 'react-router-dom';
import {useTheme} from '@emotion/react';
import {Observer} from 'mobx-react-lite';
Expand All @@ -7,30 +8,39 @@ import {Stack} from '@sentry/scraps/layout';
import {ExternalLink} from '@sentry/scraps/link';
import {Text} from '@sentry/scraps/text';

import {Breadcrumbs} from 'sentry/components/breadcrumbs';
import {FormContext} from 'sentry/components/forms/formContext';
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
import * as Layout from 'sentry/components/layouts/thirds';
import {LoadingError} from 'sentry/components/loadingError';
import {EditLayout} from 'sentry/components/workflowEngine/layout/edit';
import {Container} from 'sentry/components/workflowEngine/ui/container';
import {FormSection} from 'sentry/components/workflowEngine/ui/formSection';
import {t, tct} from 'sentry/locale';
import type {Project} from 'sentry/types/project';
import type {ErrorDetector} from 'sentry/types/workflowEngine/detectors';
import {useOrganization} from 'sentry/utils/useOrganization';
import {useProjectFromId} from 'sentry/utils/useProjectFromId';
import {AutomationFeedbackButton} from 'sentry/views/automations/components/automationFeedbackButton';
import {AutomateSection} from 'sentry/views/detectors/components/forms/automateSection';
import {EditDetectorBreadcrumbs} from 'sentry/views/detectors/components/forms/common/breadcrumbs';
import {useEditDetectorFormSubmit} from 'sentry/views/detectors/hooks/useEditDetectorFormSubmit';
import {
makeMonitorBasePathname,
makeMonitorDetailsPathname,
makeMonitorTypePathname,
} from 'sentry/views/detectors/pathnames';
import {getDetectorTypeLabel} from 'sentry/views/detectors/utils/detectorTypeConfig';
import {getNoPermissionToEditMonitorTooltip} from 'sentry/views/detectors/utils/monitorAccessMessages';
import {useCanEditDetectorWorkflowConnections} from 'sentry/views/detectors/utils/useCanEditDetector';
import {TopBar} from 'sentry/views/navigation/topBar';
import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';

type ErrorDetectorFormData = {
workflowIds: string[];
};

function ErrorDetectorForm({detector}: {detector: ErrorDetector}) {
function ErrorDetectorForm({project}: {project: Project}) {
const organization = useOrganization();
const project = useProjectFromId({project_id: detector.projectId});
const theme = useTheme();

return (
Expand All @@ -43,7 +53,7 @@ function ErrorDetectorForm({detector}: {detector: ErrorDetector}) {
{
link: (
<Link
to={`/settings/${organization.slug}/projects/${project?.slug}/issue-grouping/`}
to={`/settings/${organization.slug}/projects/${project.slug}/issue-grouping/`}
/>
),
}
Expand All @@ -59,7 +69,7 @@ function ErrorDetectorForm({detector}: {detector: ErrorDetector}) {
{
link: (
<Link
to={`/settings/${organization.slug}/projects/${project?.slug}/ownership/`}
to={`/settings/${organization.slug}/projects/${project.slug}/ownership/`}
/>
),
}
Expand Down Expand Up @@ -89,7 +99,7 @@ function ErrorDetectorForm({detector}: {detector: ErrorDetector}) {
{
link: (
<Link
to={`/settings/${organization.slug}/projects/${project?.slug}/#resolveAge`}
to={`/settings/${organization.slug}/projects/${project.slug}/#resolveAge`}
/>
),
}
Expand All @@ -114,10 +124,17 @@ export function NewErrorDetectorForm() {
);
}

export function EditExistingErrorDetectorForm({detector}: {detector: ErrorDetector}) {
const project = useProjectFromId({project_id: detector.projectId});
export function EditExistingErrorDetectorForm({
detector,
project,
}: {
detector: ErrorDetector;
project: Project;
}) {
const organization = useOrganization();
const theme = useTheme();
const maxWidth = theme.breakpoints.xl;
const hasPageFrameFeature = useHasPageFrameFeature();

// Error monitors only allow editing workflow connections right now, so that's the only permission we need to check
const canEditWorkflowConnections = useCanEditDetectorWorkflowConnections({
Expand Down Expand Up @@ -147,18 +164,45 @@ export function EditExistingErrorDetectorForm({detector}: {detector: ErrorDetect
onSubmit: handleFormSubmit,
}}
>
<EditLayout.Header>
<EditLayout.HeaderContent>
<EditDetectorBreadcrumbs detector={detector} />
<EditLayout.Title title={detector.name} project={project} />
</EditLayout.HeaderContent>
<EditLayout.Actions>
{hasPageFrameFeature ? (
<Fragment>
<TopBar.Slot name="title">
<Breadcrumbs
crumbs={[
{
label: t('Monitors'),
to: makeMonitorBasePathname(organization.slug),
},
{
label: getDetectorTypeLabel(detector.type),
to: makeMonitorTypePathname(organization.slug, detector.type),
},
{
label: <ProjectBadge disableLink project={project} avatarSize={16} />,
to: makeMonitorDetailsPathname(organization.slug, detector.id),
},
{label: t('Configure')},
]}
/>
</TopBar.Slot>
<AutomationFeedbackButton />
</EditLayout.Actions>
</EditLayout.Header>
</Fragment>
) : (
<EditLayout.Header>
<EditLayout.HeaderContent>
<Fragment>
<EditDetectorBreadcrumbs detector={detector} />
<EditLayout.Title title={detector.name} project={project} />
</Fragment>
</EditLayout.HeaderContent>
<EditLayout.Actions>
<AutomationFeedbackButton />
</EditLayout.Actions>
</EditLayout.Header>
)}

<EditLayout.Body>
<ErrorDetectorForm detector={detector} />
<ErrorDetectorForm project={project} />
</EditLayout.Body>

<FormContext.Consumer>
Expand Down
11 changes: 9 additions & 2 deletions static/app/views/detectors/components/forms/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {Stack} from '@sentry/scraps/layout';
import * as Layout from 'sentry/components/layouts/thirds';
import {LoadingError} from 'sentry/components/loadingError';
import {t} from 'sentry/locale';
import type {Project} from 'sentry/types/project';
import type {Detector, DetectorType} from 'sentry/types/workflowEngine/detectors';
import {unreachable} from 'sentry/utils/unreachable';
import {useOrganization} from 'sentry/utils/useOrganization';
Expand Down Expand Up @@ -65,15 +66,21 @@ export function NewDetectorForm({detectorType}: {detectorType: DetectorType}) {
}
}

export function EditExistingDetectorForm({detector}: {detector: Detector}) {
export function EditExistingDetectorForm({
detector,
project,
}: {
detector: Detector;
project: Project;
}) {
const detectorType = detector.type;
switch (detectorType) {
case 'metric_issue':
return <EditExistingMetricDetectorForm detector={detector} />;
case 'uptime_domain_failure':
return <EditExistingUptimeDetectorForm detector={detector} />;
case 'error':
return <EditExistingErrorDetectorForm detector={detector} />;
return <EditExistingErrorDetectorForm detector={detector} project={project} />;

@priscilawebdev priscilawebdev Apr 17, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I agree this is a little awkward since only this form uses project. The main reason I did it this way is that the route already guarantees a project, so passing it down lets us remove the defensive undefined checks from the form and keep the breadcrumb/rendering logic simpler. I don’t feel strongly about it though, and I’m happy to adjust if you’d prefer a different shape

case 'monitor_check_in_failure':
return <EditExistingCronDetectorForm detector={detector} />;
case 'issue_stream':
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/detectors/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function DetectorEdit() {

return (
<DetectorFormProvider detectorType={detector.type} detector={detector}>
<EditExistingDetectorForm detector={detector} />
<EditExistingDetectorForm detector={detector} project={project} />
</DetectorFormProvider>
);
}
Loading