Skip to content

feat(nav): Update rest of alert links to use new pathname builder #85257

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.

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
merged 2 commits into from
Feb 14, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
13 changes: 11 additions & 2 deletions static/app/components/createAlertButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import type EventView from 'sentry/utils/discover/eventView';
import useApi from 'sentry/utils/useApi';
import useProjects from 'sentry/utils/useProjects';
import useRouter from 'sentry/utils/useRouter';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import type {AlertType, AlertWizardAlertNames} from 'sentry/views/alerts/wizard/options';
import {
AlertWizardRuleTemplates,
Expand Down Expand Up @@ -75,7 +76,10 @@ function CreateAlertFromViewButton({
: DEFAULT_WIZARD_TEMPLATE;

const to = {
pathname: `/organizations/${organization.slug}/alerts/new/metric/`,
pathname: makeAlertsPathname({
path: '/new/metric/',
organization,
}),
query: {
...queryParams,
createFromDiscover: true,
Expand Down Expand Up @@ -143,7 +147,12 @@ export default function CreateAlertButton({
if (alertOption) {
params.append('alert_option', alertOption);
}
return `/organizations/${organization.slug}/alerts/wizard/?${params.toString()}`;
return (
makeAlertsPathname({
path: '/wizard/',
organization,
}) + `?${params.toString()}`
);
};

function handleClickWithoutProject(event: React.MouseEvent) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';
import {useDimensions} from 'sentry/utils/useDimensions';
import {useLocation} from 'sentry/utils/useLocation';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
import {ResolutionSelector} from 'sentry/views/monitors/components/overviewTimeline/resolutionSelector';
Expand Down Expand Up @@ -77,7 +78,10 @@ export function CronTimelineSection({event, organization, project}: Props) {
size="xs"
icon={<IconOpen />}
to={{
pathname: `/organizations/${organization.slug}/alerts/rules/crons/${project.slug}/${monitorSlug}/details/`,
pathname: makeAlertsPathname({
path: `/rules/crons/${project.slug}/${monitorSlug}/details/`,
organization,
}),
query: {environment},
}}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ import type {Event} from 'sentry/types/event';
import {type Group, GroupActivityType, GroupStatus} from 'sentry/types/group';
import type {Project} from 'sentry/types/project';
import {defined} from 'sentry/utils';
import normalizeUrl from 'sentry/utils/url/normalizeUrl';
import {useDebouncedValue} from 'sentry/utils/useDebouncedValue';
import {useDimensions} from 'sentry/utils/useDimensions';
import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import {
checkStatusPrecedent,
statusToText,
Expand Down Expand Up @@ -133,9 +133,10 @@ export function UptimeDataSection({group, event, project}: Props) {
<LinkButton
icon={<IconSettings />}
size="xs"
to={normalizeUrl(
`/organizations/${organization.slug}/alerts/rules/uptime/${project.slug}/${alertRuleId}/details/`
)}
to={makeAlertsPathname({
path: `/rules/uptime/${project.slug}/${alertRuleId}/details/`,
organization,
})}
>
{t('Uptime Alert Rule')}
</LinkButton>
Expand Down
11 changes: 9 additions & 2 deletions static/app/components/onboardingWizard/taskConfig.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';
import {isDemoModeEnabled} from 'sentry/utils/demoMode';
import {getDemoWalkthroughTasks} from 'sentry/utils/demoMode/guides';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import {getPerformanceBaseUrl} from 'sentry/views/performance/utils';
import {makeReplaysPathname} from 'sentry/views/replays/pathnames';

Expand All @@ -47,12 +48,18 @@ type Options = {

function getIssueAlertUrl({projects, organization}: Options) {
if (!projects || !projects.length) {
return `/organizations/${organization.slug}/alerts/rules/`;
return makeAlertsPathname({
path: '/rules/',
organization,
});
}
// pick the first project with events if we have that, otherwise just pick the first project
const firstProjectWithEvents = projects.find(project => !!project.firstEvent);
const project = firstProjectWithEvents ?? projects[0]!;
return `/organizations/${organization.slug}/alerts/${project.slug}/wizard/`;
return makeAlertsPathname({
path: `/${project.slug}/wizard/`,
organization,
});
}

function getOnboardingInstructionsUrl({projects, organization}: Options) {
Expand Down
6 changes: 5 additions & 1 deletion static/app/components/sidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import useMedia from 'sentry/utils/useMedia';
import useOrganization from 'sentry/utils/useOrganization';
import usePageFilters from 'sentry/utils/usePageFilters';
import useProjects from 'sentry/utils/useProjects';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import {MODULE_BASE_URLS} from 'sentry/views/insights/common/utils/useModuleURL';
import {
AI_LANDING_SUB_PATH,
Expand Down Expand Up @@ -328,7 +329,10 @@ function Sidebar() {
{...sidebarItemProps}
icon={<IconSiren />}
label={t('Alerts')}
to={`/organizations/${organization.slug}/alerts/rules/`}
to={makeAlertsPathname({
path: '/rules/',
organization,
})}
id="alerts"
/>
);
Expand Down
19 changes: 19 additions & 0 deletions static/app/views/alerts/pathnames.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type {Organization} from 'sentry/types/organization';
import normalizeUrl from 'sentry/utils/url/normalizeUrl';

const LEGACY_ALERTS_BASE_PATHNAME = 'alerts';
const ALERTS_BASE_PATHNAME = 'issues/alerts';

export function makeAlertsPathname({
path,
organization,
}: {
organization: Organization;
path: '/' | `/${string}/`;
}) {
return normalizeUrl(
organization.features.includes('navigation-sidebar-v2')
? `/organizations/${organization.slug}/${ALERTS_BASE_PATHNAME}${path}`
: `/organizations/${organization.slug}/${LEGACY_ALERTS_BASE_PATHNAME}${path}`
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type {Group} from 'sentry/types/group';
import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';
import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import {useIssueDetails} from 'sentry/views/issueDetails/streamline/context';
import {SidebarSectionTitle} from 'sentry/views/issueDetails/streamline/sidebar/sidebar';

Expand Down Expand Up @@ -38,7 +39,10 @@ export function getDetectorDetails({
return {
detectorType: 'metric_alert',
detectorId: metricAlertRuleId,
detectorPath: `/organizations/${organization.slug}/alerts/rules/details/${metricAlertRuleId}/`,
detectorPath: makeAlertsPathname({
path: `/rules/details/${metricAlertRuleId}/`,
organization,
}),
// TODO(issues): We can probably enrich this description with details from the alert itself.
description: t(
'This issue was created by a metric alert detector. View the detector details to learn more.'
Expand All @@ -53,7 +57,10 @@ export function getDetectorDetails({
detectorType: 'cron_monitor',
detectorId: cronId,
detectorSlug: cronSlug,
detectorPath: `/organizations/${organization.slug}/alerts/rules/crons/${project.slug}/${cronSlug}/details/`,
detectorPath: makeAlertsPathname({
path: `/rules/crons/${project.slug}/${cronSlug}/details/`,
organization,
}),
description: t(
'This issue was created by a cron monitor. View the monitor details to learn more.'
),
Expand All @@ -65,7 +72,10 @@ export function getDetectorDetails({
return {
detectorType: 'uptime_monitor',
detectorId: uptimeAlertRuleId,
detectorPath: `/organizations/${organization.slug}/alerts/rules/uptime/${project.slug}/${uptimeAlertRuleId}/details/`,
detectorPath: makeAlertsPathname({
path: `/rules/uptime/${project.slug}/${uptimeAlertRuleId}/details/`,
organization,
}),
// TODO(issues): Update this to mention detectors when that language is user-facing
description: t(
'This issue was created by an uptime monitoring alert rule after detecting 3 consecutive failed checks.'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import type {Project} from 'sentry/types/project';
import {formatPercentage} from 'sentry/utils/number/formatPercentage';
import {useApiQuery} from 'sentry/utils/queryClient';
import type {ColorOrAlias} from 'sentry/utils/theme';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import type {MetricRule} from 'sentry/views/alerts/rules/metric/types';

import {ProjectBadge, ProjectBadgeContainer} from './styles';
Expand Down Expand Up @@ -154,7 +155,10 @@ function TeamAlertsTriggered({
<LinkButton
priority="primary"
size="sm"
to={`/organizations/${organization.slug}/alerts/rules/`}
to={makeAlertsPathname({
path: `/rules/`,
organization,
})}
>
{t('Create Alert')}
</LinkButton>
Expand Down Expand Up @@ -182,7 +186,10 @@ function TeamAlertsTriggered({
<Fragment key={rule.id}>
<AlertNameContainer>
<Link
to={`/organizations/${organization.slug}/alerts/rules/details/${rule.id}/`}
to={makeAlertsPathname({
path: `/rules/details/${rule.id}/`,
organization,
})}
>
{rule.name}
</Link>
Expand Down
20 changes: 13 additions & 7 deletions static/app/views/projectDetail/projectLatestAlerts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {Organization} from 'sentry/types/organization';
import {useApiQuery} from 'sentry/utils/queryClient';
import useOrganization from 'sentry/utils/useOrganization';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import type {Incident} from 'sentry/views/alerts/types';
import {IncidentStatus} from 'sentry/views/alerts/types';

Expand All @@ -25,10 +27,10 @@ const PLACEHOLDER_AND_EMPTY_HEIGHT = '172px';

interface AlertRowProps {
alert: Incident;
orgSlug: string;
}

function AlertRow({alert, orgSlug}: AlertRowProps) {
function AlertRow({alert}: AlertRowProps) {
const organization = useOrganization();
const {status, identifier, title, dateClosed, dateStarted} = alert;
const isResolved = status === IncidentStatus.CLOSED;
const isWarning = status === IncidentStatus.WARNING;
Expand All @@ -40,7 +42,10 @@ function AlertRow({alert, orgSlug}: AlertRowProps) {
return (
<AlertRowLink
aria-label={title}
to={`/organizations/${orgSlug}/alerts/${identifier}/`}
to={makeAlertsPathname({
path: `/${identifier}/`,
organization,
})}
>
<AlertBadgeWrapper icon={Icon}>
<AlertBadge status={status} />
Expand Down Expand Up @@ -154,9 +159,7 @@ function ProjectLatestAlerts({

return alertsUnresolvedAndResolved
.slice(0, 3)
.map(alert => (
<AlertRow key={alert.id} alert={alert} orgSlug={organization.slug} />
));
.map(alert => <AlertRow key={alert.id} alert={alert} />);
}

return (
Expand All @@ -166,7 +169,10 @@ function ProjectLatestAlerts({
{/* as this is a link to latest alerts, we want to only preserve project and environment */}
<SectionHeadingLink
to={{
pathname: `/organizations/${organization.slug}/alerts/`,
pathname: makeAlertsPathname({
path: `/`,
organization,
}),
query: {
statsPeriod: undefined,
start: undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import PanelItem from 'sentry/components/panels/panelItem';
import {t} from 'sentry/locale';
import useOrganization from 'sentry/utils/useOrganization';
import useProjects from 'sentry/utils/useProjects';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';

export default function IntegrationAlertRules() {
const organization = useOrganization();
Expand All @@ -27,7 +28,10 @@ export default function IntegrationAlertRules() {
<ProjectItem key={project.slug}>
<ProjectBadge project={project} avatarSize={16} />
<LinkButton
to={`/organizations/${organization.slug}/alerts/${project.slug}/wizard/`}
to={makeAlertsPathname({
path: `/${project.slug}/wizard/`,
organization,
})}
size="xs"
>
{t('Add Alert Rule')}
Expand Down
6 changes: 5 additions & 1 deletion static/app/views/settings/projectAlerts/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import type {ApiQueryKey} from 'sentry/utils/queryClient';
import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
import routeTitleGen from 'sentry/utils/routeTitle';
import useOrganization from 'sentry/utils/useOrganization';
import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
import {ProjectPermissionAlert} from 'sentry/views/settings/project/projectPermissionAlert';

Expand Down Expand Up @@ -107,7 +108,10 @@ function ProjectAlertSettings({canEditRule, params}: ProjectAlertSettingsProps)
action={
<LinkButton
to={{
pathname: `/organizations/${organization.slug}/alerts/rules/`,
pathname: makeAlertsPathname({
path: `/rules/`,
organization,
}),
query: {project: project?.id},
}}
size="sm"
Expand Down
Loading