ref(reflux): Remove AlertActions (#33371)

static/app/actionCreators/deployPreview.tsx

@@ -1,7 +1,7 @@
-import AlertActions from 'sentry/actions/alertActions';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {DEPLOY_PREVIEW_CONFIG, EXPERIMENTAL_SPA} from 'sentry/constants';
 import {t, tct} from 'sentry/locale';
+import AlertStore from 'sentry/stores/alertStore';
 
 export function displayDeployPreviewAlert() {
   if (!DEPLOY_PREVIEW_CONFIG) {
@@ -21,7 +21,7 @@ export function displayDeployPreviewAlert() {
     <ExternalLink href={`${repoUrl}/tree/${branch}`}>{branch}</ExternalLink>
   );
 
-  AlertActions.addAlert({
+  AlertStore.addAlert({
     id: 'deploy-preview',
     message: tct(
       'You are viewing a frontend deploy preview of [commitLink] ([branchLink])',
@@ -38,7 +38,7 @@ export function displayExperimentalSpaAlert() {
     return;
   }
 
-  AlertActions.addAlert({
+  AlertStore.addAlert({
     id: 'develop-proxy',
     message: t(
       'You are developing against production Sentry API, please BE CAREFUL, as your changes will affect production data.'

static/app/actionCreators/tags.tsx

@@ -1,10 +1,10 @@
 import {Query} from 'history';
 
-import AlertActions from 'sentry/actions/alertActions';
 import TagActions from 'sentry/actions/tagActions';
 import {Client} from 'sentry/api';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {t} from 'sentry/locale';
+import AlertStore from 'sentry/stores/alertStore';
 import TagStore from 'sentry/stores/tagStore';
 import {PageFilters, Tag} from 'sentry/types';
 
@@ -16,9 +16,9 @@ function tagFetchSuccess(tags: Tag[] | undefined) {
   const trimmedTags = tags.slice(0, MAX_TAGS);
 
   if (tags.length > MAX_TAGS) {
-    AlertActions.addAlert({
+    AlertStore.addAlert({
       message: t('You have too many unique tags and some have been truncated'),
-      type: 'warn',
+      type: 'warning',
     });
   }
   TagActions.loadTagsSuccess(trimmedTags);

static/app/actions/alertActions.tsx

@@ -1,5 +0,0 @@
-import {createActions} from 'reflux';
-
-const AlertActions = createActions(['addAlert', 'closeAlert']);
-
-export default AlertActions;

static/app/stores/alertStore.tsx

@@ -1,6 +1,5 @@
 import {createStore} from 'reflux';
 
-import AlertActions from 'sentry/actions/alertActions';
 import {defined} from 'sentry/utils';
 import localStorage from 'sentry/utils/localStorage';
 import {Theme} from 'sentry/utils/theme';
@@ -27,14 +26,12 @@ interface InternalAlertStoreDefinition {
 interface AlertStoreDefinition
   extends CommonStoreDefinition<Alert[]>,
     InternalAlertStoreDefinition {
+  addAlert(alert: Alert): void;
+  closeAlert(alert: Alert, duration?: number): void;
   init(): void;
-
-  onAddAlert(alert: Alert): void;
-  onCloseAlert(alert: Alert, duration?: number): void;
 }
 
 const storeConfig: AlertStoreDefinition = {
-  listenables: AlertActions,
   alerts: [],
   count: 0,
 
@@ -43,7 +40,7 @@ const storeConfig: AlertStoreDefinition = {
     this.count = 0;
   },
 
-  onAddAlert(alert) {
+  addAlert(alert) {
     const alertAlreadyExists = this.alerts.some(a => a.id === alert.id);
     if (alertAlreadyExists && alert.noDuplicates) {
       return;
@@ -75,7 +72,7 @@ const storeConfig: AlertStoreDefinition = {
 
     if (alert.expireAfter && !alert.neverExpire) {
       window.setTimeout(() => {
-        this.onCloseAlert(alert);
+        this.closeAlert(alert);
       }, alert.expireAfter);
     }
 
@@ -88,7 +85,7 @@ const storeConfig: AlertStoreDefinition = {
     this.trigger(this.alerts);
   },
 
-  onCloseAlert(alert, duration = 60 * 60 * 7 * 24) {
+  closeAlert(alert, duration = 60 * 60 * 7 * 24) {
     if (defined(alert.id) && defined(duration)) {
       const expiry = Math.floor(new Date().valueOf() / 1000) + duration;
       const mutedData = localStorage.getItem('alerts:muted');

static/app/types/system.tsx

@@ -1,6 +1,7 @@
 import type {FocusTrap} from 'focus-trap';
 
 import type exportGlobals from 'sentry/bootstrap/exportGlobals';
+import {Theme} from 'sentry/utils/theme';
 
 import type {User} from './user';
 
@@ -127,7 +128,7 @@ export interface Config {
   /**
    * This comes from django (django.contrib.messages)
    */
-  messages: {level: string; message: string}[];
+  messages: {level: keyof Theme['alert']; message: string}[];
   needsUpgrade: boolean;
 
   privacyUrl: string | null;

static/app/views/app/alertMessage.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import AlertActions from 'sentry/actions/alertActions';
 import Alert from 'sentry/components/alert';
 import Button from 'sentry/components/button';
 import ExternalLink from 'sentry/components/links/externalLink';
@@ -15,7 +14,7 @@ type Props = {
 };
 
 const AlertMessage = ({alert, system}: Props) => {
-  const handleClose = () => AlertActions.closeAlert(alert);
+  const handleClose = () => AlertStore.closeAlert(alert);
 
   const {url, message, type, opaque} = alert;
 

static/app/views/app/index.tsx

@@ -8,12 +8,12 @@ import {
 } from 'sentry/actionCreators/deployPreview';
 import {fetchGuides} from 'sentry/actionCreators/guides';
 import {openCommandPalette} from 'sentry/actionCreators/modal';
-import AlertActions from 'sentry/actions/alertActions';
 import {initApiClientErrorHandling} from 'sentry/api';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import GlobalModal from 'sentry/components/globalModal';
 import Indicators from 'sentry/components/indicators';
 import {DEPLOY_PREVIEW_CONFIG, EXPERIMENTAL_SPA} from 'sentry/constants';
+import AlertStore from 'sentry/stores/alertStore';
 import ConfigStore from 'sentry/stores/configStore';
 import HookStore from 'sentry/stores/hookStore';
 import OrganizationsStore from 'sentry/stores/organizationsStore';
@@ -81,7 +81,7 @@ function App({children}: Props) {
       const {id, message, url} = problem;
       const type = problem.severity === 'critical' ? 'error' : 'warning';
 
-      AlertActions.addAlert({id, message, type, url, opaque: true});
+      AlertStore.addAlert({id, message, type, url, opaque: true});
     });
   }
 
@@ -91,7 +91,7 @@ function App({children}: Props) {
 
     // Show system-level alerts
     config.messages.forEach(msg =>
-      AlertActions.addAlert({message: msg.message, type: msg.level, neverExpire: true})
+      AlertStore.addAlert({message: msg.message, type: msg.level, neverExpire: true})
     );
 
     // The app is running in deploy preview mode

static/app/views/organizationDetails/body.tsx

@@ -1,12 +1,12 @@
 import {Fragment, useState} from 'react';
 
-import AlertActions from 'sentry/actions/alertActions';
 import Alert from 'sentry/components/alert';
 import Button from 'sentry/components/button';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Footer from 'sentry/components/footer';
 import {Body, Main} from 'sentry/components/layouts/thirds';
 import {t, tct} from 'sentry/locale';
+import AlertStore from 'sentry/stores/alertStore';
 import {Organization} from 'sentry/types';
 import useApi from 'sentry/utils/useApi';
 import withOrganization from 'sentry/utils/withOrganization';
@@ -48,7 +48,7 @@ function DeletionPending({organization}: Props) {
       window.location.reload();
     } catch {
       setIsRestoring(false);
-      AlertActions.addAlert({
+      AlertStore.addAlert({
         message:
           'We were unable to restore this organization. Please try again or contact support.',
         type: 'error',

tests/js/spec/stores/alertStore.spec.jsx

@@ -8,14 +8,14 @@ describe('AlertStore', function () {
     AlertStore.count = 0;
   });
 
-  describe('onAddAlert()', function () {
+  describe('addAlert()', function () {
     it('should add a new alert with incrementing key', function () {
-      AlertStore.onAddAlert({
+      AlertStore.addAlert({
         message: 'Bzzzzzzp *crash*',
         type: 'error',
       });
 
-      AlertStore.onAddAlert({
+      AlertStore.addAlert({
         message: 'Everything is super',
         type: 'info',
       });
@@ -26,13 +26,13 @@ describe('AlertStore', function () {
     });
 
     it('should not add duplicates when noDuplicates is set', function () {
-      AlertStore.onAddAlert({
+      AlertStore.addAlert({
         id: 'unique-key',
         message: 'Bzzzzzzp *crash*',
         type: 'error',
         noDuplicates: true,
       });
-      AlertStore.onAddAlert({
+      AlertStore.addAlert({
         id: 'unique-key',
         message: 'Bzzzzzzp *crash*',
         type: 'error',
@@ -43,7 +43,7 @@ describe('AlertStore', function () {
     });
   });
 
-  describe('onCloseAlert()', function () {
+  describe('closeAlert()', function () {
     it('should remove alert', function () {
       AlertStore.alerts = [
         {key: 1, message: 'foo', type: 'error'},
@@ -51,7 +51,7 @@ describe('AlertStore', function () {
         {key: 3, message: 'baz', type: 'error'},
       ];
 
-      AlertStore.onCloseAlert(AlertStore.alerts[1]);
+      AlertStore.closeAlert(AlertStore.alerts[1]);
 
       expect(AlertStore.alerts).toHaveLength(2);
       expect(AlertStore.alerts[0].key).toEqual(1);
@@ -59,8 +59,8 @@ describe('AlertStore', function () {
     });
     it('should persist removal of persistent alerts', function () {
       const alert = {key: 1, id: 'test', message: 'foo', type: 'error'};
-      AlertStore.onCloseAlert(alert);
-      AlertStore.onAddAlert(alert);
+      AlertStore.closeAlert(alert);
+      AlertStore.addAlert(alert);
       expect(AlertStore.alerts).toHaveLength(0);
     });
   });