edit.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import {useCallback, useEffect} from 'react';
  2. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  3. import {Alert} from 'sentry/components/alert';
  4. import LoadingError from 'sentry/components/loadingError';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import {t} from 'sentry/locale';
  7. import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
  8. import type {Organization} from 'sentry/types/organization';
  9. import type {Project} from 'sentry/types/project';
  10. import {metric} from 'sentry/utils/analytics';
  11. import {useApiQuery} from 'sentry/utils/queryClient';
  12. import normalizeUrl from 'sentry/utils/url/normalizeUrl';
  13. import {useNavigate} from 'sentry/utils/useNavigate';
  14. import RuleForm from 'sentry/views/alerts/rules/metric/ruleForm';
  15. import type {MetricRule} from 'sentry/views/alerts/rules/metric/types';
  16. type RouteParams = {
  17. projectId: string;
  18. ruleId: string;
  19. };
  20. type Props = {
  21. onChangeTitle: (data: string) => void;
  22. organization: Organization;
  23. project: Project;
  24. userTeamIds: string[];
  25. } & RouteComponentProps<RouteParams, {}>;
  26. export function MetricRulesEdit({
  27. organization,
  28. params,
  29. project,
  30. userTeamIds,
  31. onChangeTitle,
  32. ...props
  33. }: Props) {
  34. const navigate = useNavigate();
  35. const {
  36. isPending,
  37. isError,
  38. data: rule,
  39. error,
  40. } = useApiQuery<MetricRule>(
  41. [`/organizations/${organization.slug}/alert-rules/${params.ruleId}/`],
  42. {
  43. staleTime: 0,
  44. retry: false,
  45. refetchOnMount: true,
  46. }
  47. );
  48. useEffect(() => {
  49. if (!isPending && rule) {
  50. onChangeTitle(rule.name ?? '');
  51. }
  52. }, [onChangeTitle, isPending, rule]);
  53. useEffect(() => {
  54. if (isError && error?.responseText) {
  55. try {
  56. const {detail} = JSON.parse(error.responseText);
  57. if (detail) {
  58. addErrorMessage(detail);
  59. }
  60. } catch {
  61. // Ignore
  62. }
  63. }
  64. }, [isError, error]);
  65. const handleSubmitSuccess = useCallback(() => {
  66. metric.endSpan({name: 'saveAlertRule'});
  67. navigate(
  68. normalizeUrl({
  69. pathname: `/organizations/${organization.slug}/alerts/rules/details/${params.ruleId}/`,
  70. })
  71. );
  72. }, [params.ruleId, navigate, organization.slug]);
  73. if (isPending) {
  74. return <LoadingIndicator />;
  75. }
  76. if (isError) {
  77. if (error?.status === 404) {
  78. return (
  79. <Alert type="error" showIcon>
  80. {t('This alert rule could not be found.')}
  81. </Alert>
  82. );
  83. }
  84. return <LoadingError />;
  85. }
  86. return (
  87. <RuleForm
  88. {...props}
  89. // HACK: gnarly workaround to force the component to re-render when rule updates
  90. // Remove this once the RuleForm component is refactored to use `react-query`
  91. key={JSON.stringify(rule)}
  92. params={params}
  93. project={project}
  94. userTeamIds={userTeamIds}
  95. organization={organization}
  96. ruleId={params.ruleId}
  97. rule={rule}
  98. onSubmitSuccess={handleSubmitSuccess}
  99. disableProjectSelector
  100. />
  101. );
  102. }