ref(ui): Convert system alerts to class component (#25456)

static/app/stores/alertStore.tsx

@@ -17,6 +17,7 @@ type Alert = {
 
 type AlertStoreInterface = Reflux.StoreDefinition & {
   init: () => void;
+  getInitialState: () => Alert[];
   onAddAlert: (alert: Alert) => void;
   onCloseAlert: (alert: Alert, duration?: number) => void;
 };
@@ -36,6 +37,10 @@ const storeConfig: AlertStoreInterface & Internals = {
     this.count = 0;
   },
 
+  getInitialState() {
+    return this.alerts;
+  },
+
   onAddAlert(alert) {
     const alertAlreadyExists = this.alerts.some(a => a.id === alert.id);
     if (alertAlreadyExists && alert.noDuplicates) {

static/app/views/app/systemAlerts.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import createReactClass from 'create-react-class';
 import {ThemeProvider} from 'emotion-theming';
-import Reflux from 'reflux';
 
 import AlertStore from 'app/stores/alertStore';
 import {lightTheme} from 'app/utils/theme';
@@ -14,19 +12,24 @@ type State = {
   alerts: Array<Alert>;
 };
 
-const Alerts = createReactClass<Props, State>({
-  displayName: 'Alerts',
-  mixins: [Reflux.connect(AlertStore, 'alerts') as any],
+class Alerts extends React.Component<Props, State> {
+  state = this.getInitialState();
 
-  getInitialState() {
+  getInitialState(): State {
     return {
-      alerts: [],
+      alerts: AlertStore.getInitialState() as Alert[],
     };
-  },
+  }
+
+  componentWillUnmount() {
+    this.unlistener?.();
+  }
+
+  unlistener = AlertStore.listen((alerts: Alert[]) => this.setState({alerts}), undefined);
 
   render() {
     const {className} = this.props;
-    const alerts = this.state.alerts as Array<Alert>;
+    const {alerts} = this.state;
     return (
       <ThemeProvider theme={lightTheme}>
         <div className={className}>
@@ -36,7 +39,7 @@ const Alerts = createReactClass<Props, State>({
         </div>
       </ThemeProvider>
     );
-  },
-});
+  }
+}
 
 export default Alerts;