MM-26699 Track open modals (#4539)

app/actions/navigation/index.js

@@ -252,6 +252,7 @@ export function showModal(name, title, passProps = {}, options = {}) {
         },
     };
 
+    EphemeralStore.addNavigationModal(name);
     Navigation.showModal({
         stack: {
             children: [{
@@ -319,10 +320,15 @@ export function showSearchModal(initialValue = '') {
 }
 
 export async function dismissModal(options = {}) {
+    if (!EphemeralStore.hasModalsOpened()) {
+        return;
+    }
+
     const componentId = EphemeralStore.getNavigationTopComponentId();
 
     try {
         await Navigation.dismissModal(componentId, options);
+        EphemeralStore.removeNavigationModal(componentId);
     } catch (error) {
         // RNN returns a promise rejection if there is no modal to
         // dismiss. We'll do nothing in this case.
@@ -330,8 +336,13 @@ export async function dismissModal(options = {}) {
 }
 
 export async function dismissAllModals(options = {}) {
+    if (!EphemeralStore.hasModalsOpened()) {
+        return;
+    }
+
     try {
         await Navigation.dismissAllModals(options);
+        EphemeralStore.clearNavigationModals();
     } catch (error) {
         // RNN returns a promise rejection if there are no modals to
         // dismiss. We'll do nothing in this case.

app/actions/navigation/index.test.js

@@ -17,6 +17,8 @@ jest.unmock('@actions/navigation');
 jest.mock('@store/ephemeral_store', () => ({
     getNavigationTopComponentId: jest.fn(),
     clearNavigationComponents: jest.fn(),
+    addNavigationModal: jest.fn(),
+    hasModalsOpened: jest.fn().mockReturnValue(true),
 }));
 
 const mockStore = configureMockStore([thunk]);

app/screens/search/search.js

@@ -794,6 +794,9 @@ export default class Search extends PureComponent {
 
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
+        flex: {
+            flex: 1,
+        },
         header: {
             backgroundColor: theme.sidebarHeaderBg,
             width: '100%',

app/store/ephemeral_store.js

@@ -11,6 +11,7 @@ class EphemeralStore {
         this.deviceToken = null;
         this.currentServerUrl = null;
         this.navigationComponentIdStack = [];
+        this.navigationModalStack = [];
         this.safeAreaInsets = {
             [ViewTypes.PORTRAIT]: null,
             [ViewTypes.LANDSCAPE]: null,
@@ -21,14 +22,23 @@ class EphemeralStore {
 
     clearNavigationComponents = () => {
         this.navigationComponentIdStack = [];
+        this.navigationModalStack = [];
         this.allNavigationComponentIds = [];
     };
 
+    clearNavigationModals = () => {
+        this.navigationModalStack = [];
+    }
+
     addNavigationComponentId = (componentId) => {
         this.addToNavigationComponentIdStack(componentId);
         this.addToAllNavigationComponentIds(componentId);
     };
 
+    addNavigationModal = (componentId) => {
+        this.navigationModalStack.unshift(componentId);
+    }
+
     addToNavigationComponentIdStack = (componentId) => {
         const index = this.navigationComponentIdStack.indexOf(componentId);
         if (index > 0) {
@@ -44,6 +54,8 @@ class EphemeralStore {
         }
     }
 
+    hasModalsOpened = () => this.navigationModalStack.length > 0;
+
     removeNavigationComponentId = (componentId) => {
         const index = this.navigationComponentIdStack.indexOf(componentId);
         if (index >= 0) {
@@ -51,6 +63,14 @@ class EphemeralStore {
         }
     }
 
+    removeNavigationModal = (componentId) => {
+        const index = this.navigationModalStack.indexOf(componentId);
+
+        if (index >= 0) {
+            this.navigationModalStack.splice(index, 1);
+        }
+    }
+
     getStartFromNotification = () => {
         return this.appStartedFromPushNotification;
     };