ref(reflux): Remove ModalActions (#33376)

static/app/actionCreators/modal.tsx

@@ -1,4 +1,3 @@
-import ModalActions from 'sentry/actions/modalActions';
 import type {ModalTypes} from 'sentry/components/globalModal';
 import type {DashboardWidgetModalOptions} from 'sentry/components/modals/addDashboardWidgetModal';
 import type {CreateNewIntegrationModalOptions} from 'sentry/components/modals/createNewIntegrationModal';
@@ -8,6 +7,7 @@ import {InviteRow} from 'sentry/components/modals/inviteMembersModal/types';
 import type {ReprocessEventModalOptions} from 'sentry/components/modals/reprocessEventModal';
 import {OverwriteWidgetModalProps} from 'sentry/components/modals/widgetBuilder/overwriteWidgetModal';
 import type {WidgetViewerModalOptions} from 'sentry/components/modals/widgetViewerModal';
+import ModalStore from 'sentry/stores/modalStore';
 import {
   Group,
   IssueOwnership,
@@ -29,14 +29,14 @@ export function openModal(
   renderer: (renderProps: ModalRenderProps) => React.ReactNode,
   options?: ModalOptions
 ) {
-  ModalActions.openModal(renderer, options ?? {});
+  ModalStore.openModal(renderer, options ?? {});
 }
 
 /**
  * Close modal
  */
 export function closeModal() {
-  ModalActions.closeModal();
+  ModalStore.closeModal();
 }
 
 type OpenSudoModalOptions = {

static/app/actions/modalActions.tsx

@@ -1,5 +0,0 @@
-import {createActions} from 'reflux';
-
-const ModalActions = createActions(['openModal', 'closeModal']);
-
-export default ModalActions;

static/app/stores/modalStore.tsx

@@ -1,7 +1,6 @@
 import {createStore, StoreDefinition} from 'reflux';
 
 import {ModalOptions, ModalRenderProps} from 'sentry/actionCreators/modal';
-import ModalActions from 'sentry/actions/modalActions';
 import {makeSafeRefluxStore} from 'sentry/utils/makeSafeRefluxStore';
 
 type Renderer = (renderProps: ModalRenderProps) => React.ReactNode;
@@ -12,10 +11,10 @@ type ModalStoreState = {
 };
 
 interface ModalStoreDefinition extends StoreDefinition {
+  closeModal(): void;
   get(): ModalStoreState;
   init(): void;
-  onCloseModal(): void;
-  onOpenModal(renderer: Renderer, options: ModalOptions): void;
+  openModal(renderer: Renderer, options: ModalOptions): void;
   reset(): void;
 }
 
@@ -24,12 +23,6 @@ const storeConfig: ModalStoreDefinition = {
 
   init() {
     this.reset();
-    this.unsubscribeListeners.push(
-      this.listenTo(ModalActions.closeModal, this.onCloseModal)
-    );
-    this.unsubscribeListeners.push(
-      this.listenTo(ModalActions.openModal, this.onOpenModal)
-    );
   },
 
   get() {
@@ -43,12 +36,12 @@ const storeConfig: ModalStoreDefinition = {
     } as ModalStoreState;
   },
 
-  onCloseModal() {
+  closeModal() {
     this.reset();
     this.trigger(this.state);
   },
 
-  onOpenModal(renderer: Renderer, options: ModalOptions) {
+  openModal(renderer: Renderer, options: ModalOptions) {
     this.state = {renderer, options};
     this.trigger(this.state);
   },

tests/js/spec/components/featureFeedback.spec.tsx

@@ -1,11 +1,17 @@
 import {InjectedRouter} from 'react-router';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {
+  render,
+  screen,
+  userEvent,
+  waitForElementToBeRemoved,
+} from 'sentry-test/reactTestingLibrary';
 
 import * as indicators from 'sentry/actionCreators/indicator';
 import {FeatureFeedback} from 'sentry/components/featureFeedback';
 import GlobalModal from 'sentry/components/globalModal';
+import ModalStore from 'sentry/stores/modalStore';
 import {RouteContext} from 'sentry/views/routeContext';
 
 function TestComponent({router}: {router: InjectedRouter}) {
@@ -39,12 +45,15 @@ describe('FeatureFeedback', function () {
     await import('sentry/components/featureFeedback/feedbackModal');
   });
 
-  it('shows the modal on click', async function () {
-    render(<TestComponent router={router} />);
-
+  async function openModal() {
     expect(screen.getByText('Give Feedback')).toBeInTheDocument();
-
     userEvent.click(screen.getByText('Give Feedback'));
+    expect(await screen.findByText('Select type of feedback')).toBeInTheDocument();
+  }
+
+  it('shows the modal on click', async function () {
+    render(<TestComponent router={router} />);
+    await openModal();
 
     expect(
       await screen.findByRole('heading', {name: 'Submit Feedback'})
@@ -55,6 +64,7 @@ describe('FeatureFeedback', function () {
     jest.spyOn(indicators, 'addSuccessMessage');
 
     render(<TestComponent router={router} />);
+    await openModal();
 
     // Form fields
     expect(screen.getByText('Select type of feedback')).toBeInTheDocument();
@@ -96,11 +106,14 @@ describe('FeatureFeedback', function () {
 
   it('Close modal on click', async function () {
     render(<TestComponent router={router} />);
+    await openModal();
+
     userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
-    await waitFor(() => {
-      expect(
-        screen.queryByRole('heading', {name: 'Submit Feedback'})
-      ).not.toBeInTheDocument();
-    });
+
+    ModalStore.reset();
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByRole('heading', {name: 'Submit Feedback'})
+    );
   });
 });

tests/js/spec/components/modals/reprocessEventModal.spec.tsx

@@ -1,7 +1,7 @@
 import {mountGlobalModal} from 'sentry-test/modal';
 
 import {openReprocessEventModal} from 'sentry/actionCreators/modal';
-import ModalActions from 'sentry/actions/modalActions';
+import ModalStore from 'sentry/stores/modalStore';
 
 const group = TestStubs.Group({
   id: '1337',
@@ -78,7 +78,7 @@ describe('ReprocessEventModal', function () {
     });
 
     jest.spyOn(window.location, 'reload').mockImplementation(() => {});
-    const closeModalFunc = jest.spyOn(ModalActions, 'closeModal');
+    const closeModalFunc = jest.spyOn(ModalStore, 'closeModal');
 
     // Number of events to be reprocessed field
     const reprocessQuantityField = wrapper.find('NumberField input');

tests/js/spec/views/accountSecurity.spec.jsx

@@ -1,8 +1,8 @@
 import {mountWithTheme} from 'sentry-test/enzyme';
 import {mountGlobalModal} from 'sentry-test/modal';
 
-import ModalActions from 'sentry/actions/modalActions';
 import {Client} from 'sentry/api';
+import ModalStore from 'sentry/stores/modalStore';
 import AccountSecurity from 'sentry/views/settings/account/accountSecurity';
 import AccountSecurityWrapper from 'sentry/views/settings/account/accountSecurity/accountSecurityWrapper';
 
@@ -250,7 +250,7 @@ describe('AccountSecurity', function () {
     expect(wrapper.find('TwoFactorRequired')).toHaveLength(1);
 
     // expect modal to be called
-    const openEmailModalFunc = jest.spyOn(ModalActions, 'openModal');
+    const openEmailModalFunc = jest.spyOn(ModalStore, 'openModal');
     const Add2FAButton = wrapper.find('Button[className="enroll-button"]').first();
 
     Add2FAButton.simulate('click');

tests/js/spec/views/alerts/issueRules/ruleNode.spec.jsx

@@ -2,7 +2,7 @@ import selectEvent from 'react-select-event';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import ModalActions from 'sentry/actions/modalActions';
+import ModalStore from 'sentry/stores/modalStore';
 import RuleNode from 'sentry/views/alerts/rules/issue/ruleNode';
 
 describe('RuleNode', () => {
@@ -221,7 +221,7 @@ describe('RuleNode', () => {
 
   it('renders sentry apps with schema forms correctly', () => {
     renderRuleNode(sentryAppNode);
-    const openModal = jest.spyOn(ModalActions, 'openModal');
+    const openModal = jest.spyOn(ModalStore, 'openModal');
 
     expect(screen.getByText(sentryAppNode.label)).toBeInTheDocument();
     const settingsButton = screen.getByLabelText('Settings');

tests/js/spec/views/organizationGroupDetails/actions.spec.tsx

@@ -1,8 +1,8 @@
 import {mountWithTheme} from 'sentry-test/enzyme';
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
-import ModalActions from 'sentry/actions/modalActions';
 import ConfigStore from 'sentry/stores/configStore';
+import ModalStore from 'sentry/stores/modalStore';
 import {Event} from 'sentry/types/event';
 import GroupActions from 'sentry/views/organizationGroupDetails/actions';
 
@@ -149,7 +149,7 @@ describe('GroupActions', function () {
         />
       );
 
-      const onReprocessEventFunc = jest.spyOn(ModalActions, 'openModal');
+      const onReprocessEventFunc = jest.spyOn(ModalStore, 'openModal');
 
       userEvent.click(screen.getByLabelText('More Actions'));
 

tests/js/spec/views/performance/landing/index.spec.tsx

@@ -4,7 +4,7 @@ import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeData} from 'sentry-test/performance/initializePerformanceData';
 import {act} from 'sentry-test/reactTestingLibrary';
 
-import ModalActions from 'sentry/actions/modalActions';
+import ModalStore from 'sentry/stores/modalStore';
 import TeamStore from 'sentry/stores/teamStore';
 import EventView from 'sentry/utils/discover/eventView';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
@@ -112,7 +112,7 @@ describe('Performance > Landing > Index', function () {
       features: ['performance-use-metrics'],
     });
 
-    const spy = jest.spyOn(ModalActions, 'openModal');
+    const spy = jest.spyOn(ModalStore, 'openModal');
 
     wrapper = mountWithTheme(<WrappedComponent data={data} />, data.routerContext);
     await tick();

tests/js/spec/views/performance/transactionSummary/transactionThresholdButton.spec.jsx

@@ -1,7 +1,7 @@
 import {mountWithTheme} from 'sentry-test/enzyme';
 import {act} from 'sentry-test/reactTestingLibrary';
 
-import ModalActions from 'sentry/actions/modalActions';
+import ModalStore from 'sentry/stores/modalStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import EventView from 'sentry/utils/discover/eventView';
 import TransactionThresholdButton from 'sentry/views/performance/transactionSummary/transactionThresholdButton';
@@ -115,7 +115,7 @@ describe('TransactionThresholdButton', function () {
       wrapper.find('TransactionThresholdButton').state('transactionThresholdMetric')
     ).toEqual('lcp');
 
-    const spy = jest.spyOn(ModalActions, 'openModal');
+    const spy = jest.spyOn(ModalStore, 'openModal');
     const button = wrapper.find('Button');
     button.simulate('click');