settings.tsx 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import {Fragment} from 'react';
  2. import AlertLink from 'sentry/components/alertLink';
  3. import {LinkButton} from 'sentry/components/button';
  4. import Form from 'sentry/components/forms/form';
  5. import JsonForm from 'sentry/components/forms/jsonForm';
  6. import LoadingError from 'sentry/components/loadingError';
  7. import LoadingIndicator from 'sentry/components/loadingIndicator';
  8. import PanelAlert from 'sentry/components/panels/panelAlert';
  9. import PluginList from 'sentry/components/pluginList';
  10. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  11. import {fields} from 'sentry/data/forms/projectAlerts';
  12. import {IconMail} from 'sentry/icons';
  13. import {t} from 'sentry/locale';
  14. import type {Plugin} from 'sentry/types/integrations';
  15. import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
  16. import type {Project} from 'sentry/types/project';
  17. import type {ApiQueryKey} from 'sentry/utils/queryClient';
  18. import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
  19. import routeTitleGen from 'sentry/utils/routeTitle';
  20. import useOrganization from 'sentry/utils/useOrganization';
  21. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  22. import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
  23. interface ProjectAlertSettingsProps extends RouteComponentProps<{projectId: string}, {}> {
  24. canEditRule: boolean;
  25. }
  26. function makeFetchProjectPluginsQueryKey(
  27. organizationSlug: string,
  28. projectSlug: string
  29. ): ApiQueryKey {
  30. return [`/projects/${organizationSlug}/${projectSlug}/plugins/`];
  31. }
  32. function ProjectAlertSettings({canEditRule, params}: ProjectAlertSettingsProps) {
  33. const organization = useOrganization();
  34. const queryClient = useQueryClient();
  35. const projectSlug = params.projectId;
  36. const {
  37. data: project,
  38. isPending: isProjectLoading,
  39. isError: isProjectError,
  40. refetch: refetchProject,
  41. } = useApiQuery<Project>([`/projects/${organization.slug}/${projectSlug}/`], {
  42. staleTime: 0,
  43. gcTime: 0,
  44. });
  45. const {
  46. data: pluginList = [],
  47. isPending: isPluginListLoading,
  48. isError: isPluginListError,
  49. refetch: refetchPluginList,
  50. } = useApiQuery<Plugin[]>(
  51. makeFetchProjectPluginsQueryKey(organization.slug, projectSlug),
  52. {staleTime: 0, gcTime: 0}
  53. );
  54. if ((!isProjectLoading && !project) || isPluginListError || isProjectError) {
  55. return (
  56. <LoadingError
  57. onRetry={() => {
  58. isProjectError && refetchProject();
  59. isPluginListError && refetchPluginList();
  60. }}
  61. />
  62. );
  63. }
  64. const updatePlugin = (plugin: Plugin, enabled: boolean) => {
  65. setApiQueryData<Plugin[]>(
  66. queryClient,
  67. makeFetchProjectPluginsQueryKey(organization.slug, projectSlug),
  68. oldState =>
  69. oldState.map(p => {
  70. if (p.id !== plugin.id) {
  71. return p;
  72. }
  73. return {
  74. ...plugin,
  75. enabled,
  76. };
  77. })
  78. );
  79. };
  80. const handleEnablePlugin = (plugin: Plugin) => {
  81. updatePlugin(plugin, true);
  82. };
  83. const handleDisablePlugin = (plugin: Plugin) => {
  84. updatePlugin(plugin, false);
  85. };
  86. return (
  87. <Fragment>
  88. <SentryDocumentTitle
  89. title={routeTitleGen(t('Alerts Settings'), projectSlug, false)}
  90. />
  91. <SettingsPageHeader
  92. title={t('Alerts Settings')}
  93. action={
  94. <LinkButton
  95. to={{
  96. pathname: `/organizations/${organization.slug}/alerts/rules/`,
  97. query: {project: project?.id},
  98. }}
  99. size="sm"
  100. >
  101. {t('View Alert Rules')}
  102. </LinkButton>
  103. }
  104. />
  105. <PermissionAlert project={project} />
  106. <AlertLink to="/settings/account/notifications/" icon={<IconMail />}>
  107. {t(
  108. 'Looking to fine-tune your personal notification preferences? Visit your Account Settings'
  109. )}
  110. </AlertLink>
  111. {isProjectLoading || isPluginListLoading ? (
  112. <LoadingIndicator />
  113. ) : (
  114. <Fragment>
  115. <Form
  116. saveOnBlur
  117. allowUndo
  118. initialData={{
  119. subjectTemplate: project.subjectTemplate,
  120. digestsMinDelay: project.digestsMinDelay,
  121. digestsMaxDelay: project.digestsMaxDelay,
  122. }}
  123. apiMethod="PUT"
  124. apiEndpoint={`/projects/${organization.slug}/${project.slug}/`}
  125. >
  126. <JsonForm
  127. disabled={!canEditRule}
  128. title={t('Email Settings')}
  129. fields={[fields.subjectTemplate]}
  130. />
  131. <JsonForm
  132. title={t('Digests')}
  133. disabled={!canEditRule}
  134. fields={[fields.digestsMinDelay, fields.digestsMaxDelay]}
  135. renderHeader={() => (
  136. <PanelAlert type="info">
  137. {t(
  138. 'Sentry will automatically digest alerts sent by some services to avoid flooding your inbox with individual issue notifications. To control how frequently notifications are delivered, use the sliders below.'
  139. )}
  140. </PanelAlert>
  141. )}
  142. />
  143. </Form>
  144. {canEditRule && (
  145. <PluginList
  146. organization={organization}
  147. project={project}
  148. pluginList={(pluginList ?? []).filter(
  149. p => p.type === 'notification' && p.hasConfiguration
  150. )}
  151. onEnablePlugin={handleEnablePlugin}
  152. onDisablePlugin={handleDisablePlugin}
  153. />
  154. )}
  155. </Fragment>
  156. )}
  157. </Fragment>
  158. );
  159. }
  160. export default ProjectAlertSettings;