Close the release announcement when a dialog is opened (#12559)

* Fire `ModalManagerEvent.Closed` when a dialog is closed

* Listen to modal events in the RA

* Fix first RA test

src/Modal.tsx

@@ -65,10 +65,12 @@ interface IOptions<C extends ComponentType> {
 
 export enum ModalManagerEvent {
     Opened = "opened",
+    Closed = "closed",
 }
 
 type HandlerMap = {
     [ModalManagerEvent.Opened]: () => void;
+    [ModalManagerEvent.Closed]: () => void;
 };
 
 export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMap> {
@@ -232,6 +234,7 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
                 }
 
                 this.reRender();
+                this.emitClosed();
             },
             deferred.promise,
         ];
@@ -328,6 +331,14 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         }
     }
 
+    /**
+     * Emit the closed event
+     * @private
+     */
+    private emitClosed(): void {
+        this.emit(ModalManagerEvent.Closed);
+    }
+
     private onBackgroundClick = (): void => {
         const modal = this.getCurrentModal();
         if (!modal) {

src/hooks/useIsReleaseAnnouncementOpen.ts

@@ -16,17 +16,34 @@
  * /
  */
 
-import { useTypedEventEmitterState } from "./useEventEmitter";
+import { useState } from "react";
+
+import { useTypedEventEmitter, useTypedEventEmitterState } from "./useEventEmitter";
 import { Feature, ReleaseAnnouncementStore } from "../stores/ReleaseAnnouncementStore";
+import Modal, { ModalManagerEvent } from "../Modal";
+
+/**
+ * Hook to return true if a modal is opened
+ */
+function useModalOpened(): boolean {
+    const [opened, setOpened] = useState(false);
+    useTypedEventEmitter(Modal, ModalManagerEvent.Opened, () => setOpened(true));
+    // Modal can be stacked, we need to check if all dialogs are closed
+    useTypedEventEmitter(Modal, ModalManagerEvent.Closed, () => !Modal.hasDialogs() && setOpened(false));
+    return opened;
+}
 
 /**
  * Return true if the release announcement of the given feature is enabled
  * @param feature
  */
 export function useIsReleaseAnnouncementOpen(feature: Feature): boolean {
-    return useTypedEventEmitterState(
+    const modalOpened = useModalOpened();
+    const releaseAnnouncementOpened = useTypedEventEmitterState(
         ReleaseAnnouncementStore.instance,
         "releaseAnnouncementChanged",
         () => ReleaseAnnouncementStore.instance.getReleaseAnnouncement() === feature,
     );
+
+    return !modalOpened && releaseAnnouncementOpened;
 }

src/stores/ReleaseAnnouncementStore.ts

@@ -18,6 +18,7 @@
 
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { cloneDeep } from "lodash";
 
 import SettingsStore from "../settings/SettingsStore";
 import { SettingLevel } from "../settings/SettingLevel";
@@ -90,7 +91,8 @@ export class ReleaseAnnouncementStore extends TypedEventEmitter<ReleaseAnnouncem
      * @private
      */
     private getViewedReleaseAnnouncements(): StoredSettings {
-        return SettingsStore.getValue<StoredSettings>("releaseAnnouncementData");
+        // Clone the settings to avoid to mutate the internal stored value in the SettingsStore
+        return cloneDeep(SettingsStore.getValue<StoredSettings>("releaseAnnouncementData"));
     }
 
     /**