From 9837960ceb79ce9f7545bf0b300e85f18e181506 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 23 Nov 2022 15:35:06 +0000
Subject: [PATCH] Type experiments on Modals

To catch https://github.com/matrix-org/matrix-react-sdk/pull/9612 and similar
regressions
---
 src/Modal.tsx                                | 65 +++++++++++++-------
 src/components/views/voip/LegacyCallView.tsx |  7 ++-
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index ee24b15d54d..81aea9ae3aa 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -23,6 +23,7 @@ import { TypedEventEmitter } from 'matrix-js-sdk/src/models/typed-event-emitter'
 
 import dis from './dispatcher/dispatcher';
 import AsyncWrapper from './AsyncWrapper';
+import DesktopCapturerSourcePicker from './components/views/elements/DesktopCapturerSourcePicker';
 
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
@@ -111,18 +112,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         return this.priorityModal || this.staticModal || this.modals.length > 0;
     }
 
-    public createDialog<T extends any[]>(
-        Element: React.ComponentType<any>,
+    public createDialog<T extends React.ComponentType, S extends any[]>(
+        Element: T,
         ...rest: ParametersWithoutFirst<ModalManager["createDialogAsync"]>
     ) {
-        return this.createDialogAsync<T>(Promise.resolve(Element), ...rest);
+        return this.createDialogAsync<T, S>(Promise.resolve(Element), ...rest);
     }
 
-    public appendDialog<T extends any[]>(
-        Element: React.ComponentType,
+    public appendDialog<T extends React.ComponentType, S extends any[]>(
+        Element: T,
         ...rest: ParametersWithoutFirst<ModalManager["appendDialogAsync"]>
     ) {
-        return this.appendDialogAsync<T>(Promise.resolve(Element), ...rest);
+        return this.appendDialogAsync<T, S>(Promise.resolve(Element), ...rest);
     }
 
     public closeCurrentModal(reason: string) {
@@ -134,13 +135,13 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         modal.close();
     }
 
-    private buildModal<T extends any[]>(
-        prom: Promise<React.ComponentType>,
-        props?: IProps<T>,
+    private buildModal<T extends React.ComponentType, S extends any[]>(
+        prom: Promise<T>,
+        props?: IProps<S>,
         className?: string,
-        options?: IOptions<T>,
+        options?: IOptions<S>,
     ) {
-        const modal: IModal<T> = {
+        const modal: IModal<S> = {
             onFinished: props ? props.onFinished : null,
             onBeforeClose: options.onBeforeClose,
             beforeClosePromise: null,
@@ -153,7 +154,7 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         };
 
         // never call this from onFinished() otherwise it will loop
-        const [closeDialog, onFinishedProm] = this.getCloseFn<T>(modal, props);
+        const [closeDialog, onFinishedProm] = this.getCloseFn<S>(modal, props);
 
         // don't attempt to reuse the same AsyncWrapper for different dialogs,
         // otherwise we'll get confused.
@@ -214,6 +215,24 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
      * @return {Promise<bool>} whether the dialog should close
      */
 
+    public createDialogAsync<T extends typeof DesktopCapturerSourcePicker, S extends string[]>(
+        prom: Promise<T>,
+        props?: IProps<S>,
+        className?: string,
+        isPriorityModal?: boolean,
+        isStaticModal?: boolean,
+        options?: IOptions<S>,
+    ): IHandle<any[]>;
+
+    public createDialogAsync<T extends React.ComponentType, S extends any[]>(
+        prom: Promise<T>,
+        props?: IProps<S>,
+        className?: string,
+        isPriorityModal?: boolean,
+        isStaticModal?: boolean,
+        options?: IOptions<S>,
+    ): IHandle<any[]>;
+
     /**
      * Open a modal view.
      *
@@ -245,16 +264,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
      * @param {onBeforeClose} options.onBeforeClose a callback to decide whether to close the dialog
      * @returns {object} Object with 'close' parameter being a function that will close the dialog
      */
-    public createDialogAsync<T extends any[]>(
-        prom: Promise<React.ComponentType>,
-        props?: IProps<T>,
+    public createDialogAsync<T extends React.ComponentType, S extends any[]>(
+        prom: Promise<T>,
+        props?: IProps<S>,
         className?: string,
         isPriorityModal = false,
         isStaticModal = false,
-        options: IOptions<T> = {},
-    ): IHandle<T> {
+        options: IOptions<S> = {},
+    ): IHandle<any[]> {
         const beforeModal = this.getCurrentModal();
-        const { modal, closeDialog, onFinishedProm } = this.buildModal<T>(prom, props, className, options);
+        const { modal, closeDialog, onFinishedProm } = this.buildModal<T, S>(prom, props, className, options);
         if (isPriorityModal) {
             // XXX: This is destructive
             this.priorityModal = modal;
@@ -274,13 +293,13 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         };
     }
 
-    private appendDialogAsync<T extends any[]>(
-        prom: Promise<React.ComponentType>,
-        props?: IProps<T>,
+    private appendDialogAsync<T extends React.ComponentType, S extends any[]>(
+        prom: Promise<T>,
+        props?: IProps<S>,
         className?: string,
-    ): IHandle<T> {
+    ): IHandle<S> {
         const beforeModal = this.getCurrentModal();
-        const { modal, closeDialog, onFinishedProm } = this.buildModal<T>(prom, props, className, {});
+        const { modal, closeDialog, onFinishedProm } = this.buildModal<T, S>(prom, props, className, {});
 
         this.modals.push(modal);
 
diff --git a/src/components/views/voip/LegacyCallView.tsx b/src/components/views/voip/LegacyCallView.tsx
index cabc127ba50..bc8e5c7f6d2 100644
--- a/src/components/views/voip/LegacyCallView.tsx
+++ b/src/components/views/voip/LegacyCallView.tsx
@@ -297,9 +297,12 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
                 const [source] = await finished;
                 if (!source) return;
 
-                isScreensharing = await this.props.call.setScreensharingEnabled(true, {
+                // deliberately reintroduce https://github.com/matrix-org/matrix-react-sdk/pull/9612:
+                // typescript should catch this if we get the modal types working
+                /*isScreensharing = await this.props.call.setScreensharingEnabled(true, {
                     desktopCapturerSourceId: source,
-                });
+                });*/
+                isScreensharing = await this.props.call.setScreensharingEnabled(true, source);
             } else {
                 isScreensharing = await this.props.call.setScreensharingEnabled(true);
             }