From 1d816cfa4c1231f62b3a27f9e87a4efdd97858ae Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 11 Jul 2022 12:02:29 -0400
Subject: [PATCH] Don't unnecessarily persist the host signup dialog

https://github.com/matrix-org/matrix-react-sdk/pull/8747 made it more evident that the host signup dialog was relying on some quirks in how PersistedElement sizes and positions things that it probably shouldn't have been relying on. As far as I can tell, this dialog doesn't *need* to be a PersistedElement at all since it's mounted manually as part of LoggedInView, and so it doesn't look like there's any way for it to unexpectedly disappear on the user.

According to Travis this is supposed to be a bespoke widget in a proper dialog, but this is intended as a more short-term fix.
---
 res/css/views/dialogs/_HostSignupDialog.scss  |  11 --
 .../views/dialogs/HostSignupDialog.tsx        | 121 ++++++++----------
 2 files changed, 56 insertions(+), 76 deletions(-)

diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss
index 56d71034045..b1b7b188987 100644
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@@ -105,17 +105,6 @@ limitations under the License.
     right: 25px;
 }
 
-.mx_HostSignup_persisted {
-    width: 90vw;
-    max-width: 580px;
-    height: 80vh;
-    max-height: 600px;
-    top: 0;
-    left: 0;
-    position: fixed;
-    display: none;
-}
-
 .mx_HostSignupDialog_minimized {
     position: fixed;
     bottom: 80px;
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
index 91c29c68d1e..deb14a9b18e 100644
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ b/src/components/views/dialogs/HostSignupDialog.tsx
@@ -20,7 +20,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
-import PersistedElement from "../elements/PersistedElement";
 import QuestionDialog from './QuestionDialog';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
@@ -35,8 +34,6 @@ import {
 import { IConfigOptions } from "../../../IConfigOptions";
 import { SnakedObject } from "../../../utils/SnakedObject";
 
-const HOST_SIGNUP_KEY = "host_signup";
-
 interface IProps {}
 
 interface IState {
@@ -111,8 +108,6 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
 
     private closeDialog = async () => {
         window.removeEventListener("message", this.messageHandler);
-        // Ensure we destroy the host signup persisted element
-        PersistedElement.destroyElement("host_signup");
         // Finally clear the flag in
         return HostSignupStore.instance.setHostSignupActive(false);
     };
@@ -235,69 +230,65 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
 
     public render(): React.ReactNode {
         return (
-            <div className="mx_HostSignup_persisted">
-                <PersistedElement key={HOST_SIGNUP_KEY} persistKey={HOST_SIGNUP_KEY}>
-                    <div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
-                        <div
-                            className={classNames("mx_Dialog",
+            <div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
+                <div
+                    className={classNames("mx_Dialog",
+                        {
+                            "mx_HostSignupDialog_minimized": this.state.minimized,
+                            "mx_HostSignupDialog": !this.state.minimized,
+                        },
+                    )}
+                >
+                    { this.state.minimized &&
+                        <div className="mx_Dialog_header mx_Dialog_headerWithButton">
+                            <div className="mx_Dialog_title">
+                                { _t("%(hostSignupBrand)s Setup", {
+                                    hostSignupBrand: this.config.get("brand"),
+                                }) }
+                            </div>
+                            <AccessibleButton
+                                className="mx_HostSignup_maximize_button"
+                                onClick={this.maximizeDialog}
+                                aria-label={_t("Maximise dialog")}
+                                title={_t("Maximise dialog")}
+                            />
+                        </div>
+                    }
+                    { !this.state.minimized &&
+                        <div className="mx_Dialog_header mx_Dialog_headerWithCancel">
+                            <AccessibleButton
+                                onClick={this.minimizeDialog}
+                                className="mx_HostSignup_minimize_button"
+                                aria-label={_t("Minimise dialog")}
+                                title={_t("Minimise dialog")}
+                            />
+                            <AccessibleButton
+                                onClick={this.onCloseClick}
+                                className="mx_Dialog_cancelButton"
+                                aria-label={_t("Close dialog")}
+                                title={_t("Close dialog")}
+                            />
+                        </div>
+                    }
+                    { this.state.error &&
+                        <div>
+                            { this.state.error }
+                        </div>
+                    }
+                    { !this.state.error &&
+                        <iframe
+                            title={_t(
+                                "Upgrade to %(hostSignupBrand)s",
                                 {
-                                    "mx_HostSignupDialog_minimized": this.state.minimized,
-                                    "mx_HostSignupDialog": !this.state.minimized,
+                                    hostSignupBrand: this.config.get("brand"),
                                 },
                             )}
-                        >
-                            { this.state.minimized &&
-                                <div className="mx_Dialog_header mx_Dialog_headerWithButton">
-                                    <div className="mx_Dialog_title">
-                                        { _t("%(hostSignupBrand)s Setup", {
-                                            hostSignupBrand: this.config.get("brand"),
-                                        }) }
-                                    </div>
-                                    <AccessibleButton
-                                        className="mx_HostSignup_maximize_button"
-                                        onClick={this.maximizeDialog}
-                                        aria-label={_t("Maximise dialog")}
-                                        title={_t("Maximise dialog")}
-                                    />
-                                </div>
-                            }
-                            { !this.state.minimized &&
-                                <div className="mx_Dialog_header mx_Dialog_headerWithCancel">
-                                    <AccessibleButton
-                                        onClick={this.minimizeDialog}
-                                        className="mx_HostSignup_minimize_button"
-                                        aria-label={_t("Minimise dialog")}
-                                        title={_t("Minimise dialog")}
-                                    />
-                                    <AccessibleButton
-                                        onClick={this.onCloseClick}
-                                        className="mx_Dialog_cancelButton"
-                                        aria-label={_t("Close dialog")}
-                                        title={_t("Close dialog")}
-                                    />
-                                </div>
-                            }
-                            { this.state.error &&
-                                <div>
-                                    { this.state.error }
-                                </div>
-                            }
-                            { !this.state.error &&
-                                <iframe
-                                    title={_t(
-                                        "Upgrade to %(hostSignupBrand)s",
-                                        {
-                                            hostSignupBrand: this.config.get("brand"),
-                                        },
-                                    )}
-                                    src={this.config.get("url")}
-                                    ref={this.iframeRef}
-                                    sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
-                                />
-                            }
-                        </div>
-                    </div>
-                </PersistedElement>
+                            src={this.config.get("url")}
+                            ref={this.iframeRef}
+                            sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
+                        />
+                    }
+                </div>
             </div>
         );
     }